@equinor/eds-core-react 0.35.1 → 0.36.0

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

@@ -1,6 +1,3 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { MenuProvider, useMenu } from './Menu.context.js';
@@ -12,40 +9,41 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["children", "anchorEl", "onClose", "open"],
-  _excluded2 = ["anchorEl", "open", "placement", "matchAnchorWidth", "onClose", "style", "className"];
-var border = menu.border;
-var MenuPaper = styled(Paper).withConfig({
+const {
+  border
+} = menu;
+const MenuPaper = styled(Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], bordersTemplate(border), function (_ref) {
-  var open = _ref.open;
-  return css({
-    display: open ? 'block' : 'none'
-  });
-});
-var MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
-  var children = _ref2.children,
-    anchorEl = _ref2.anchorEl,
-    onCloseCallback = _ref2.onClose,
-    open = _ref2.open,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var _useMenu = useMenu(),
-    setOnClose = _useMenu.setOnClose,
-    onClose = _useMenu.onClose,
-    setInitialFocus = _useMenu.setInitialFocus,
-    focusedIndex = _useMenu.focusedIndex;
-  var closeMenuOnClickIndexes = useMemo(function () {
-    return [];
-  }, []);
-  useEffect(function () {
+})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], bordersTemplate(border), ({
+  open
+}) => css({
+  display: open ? 'block' : 'none'
+}));
+const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
+  children,
+  anchorEl,
+  onClose: onCloseCallback,
+  open,
+  ...rest
+}, ref) {
+  const {
+    setOnClose,
+    onClose,
+    setInitialFocus,
+    focusedIndex
+  } = useMenu();
+  const closeMenuOnClickIndexes = useMemo(() => [], []);
+  useEffect(() => {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
   }, [onClose, onCloseCallback, setOnClose]);
-  useEffect(function () {
-    var openWithKey = function openWithKey(e) {
-      var key = e.key;
+  useEffect(() => {
+    const openWithKey = e => {
+      const {
+        key
+      } = e;
       //activate menu with arrows according to wai-aria best practices
       if (key === 'ArrowDown' || key === 'ArrowUp') {
         e.preventDefault();
@@ -65,125 +63,130 @@ var MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
       }
     };
     if (anchorEl) anchorEl.addEventListener('keydown', openWithKey);
-    return function () {
+    return () => {
       if (anchorEl) anchorEl.removeEventListener('keydown', openWithKey);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [anchorEl]);
-  useGlobalKeyPress('Escape', function () {
+  useGlobalKeyPress('Escape', () => {
     if (open && onClose !== null) {
       onClose();
       anchorEl.focus();
     }
   });
-  useGlobalKeyPress('Enter', function () {
+  useGlobalKeyPress('Enter', () => {
     if (open && onClose !== null && closeMenuOnClickIndexes.includes(focusedIndex)) {
-      setTimeout(function () {
+      setTimeout(() => {
         if (window.document.contains(anchorEl)) {
           anchorEl.focus();
         }
       }, 0);
     }
   });
-  var addCloseMenuOnClickIndex = function addCloseMenuOnClickIndex(index) {
+  const addCloseMenuOnClickIndex = index => {
     if (closeMenuOnClickIndexes.indexOf(index) < 0) {
       closeMenuOnClickIndexes.push(index);
     }
   };
-  return /*#__PURE__*/jsx(MenuList, _objectSpread(_objectSpread({
-    addCloseMenuOnClickIndex: addCloseMenuOnClickIndex
-  }, rest), {}, {
+  return /*#__PURE__*/jsx(MenuList, {
+    addCloseMenuOnClickIndex: addCloseMenuOnClickIndex,
+    ...rest,
     ref: ref,
     children: children
-  }));
+  });
 });
-var Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
-  var anchorEl = _ref3.anchorEl,
-    open = _ref3.open,
-    _ref3$placement = _ref3.placement,
-    placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement,
-    _ref3$matchAnchorWidt = _ref3.matchAnchorWidth,
-    matchAnchorWidth = _ref3$matchAnchorWidt === void 0 ? false : _ref3$matchAnchorWidt,
-    onClose = _ref3.onClose,
-    style = _ref3.style,
-    className = _ref3.className,
-    rest = _objectWithoutProperties(_ref3, _excluded2);
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var token = useToken({
-    density: density
+const Menu = /*#__PURE__*/forwardRef(function Menu({
+  anchorEl,
+  open,
+  placement = 'bottom',
+  matchAnchorWidth = false,
+  onClose,
+  style,
+  className,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, menu);
-  var floatingMiddleware = [offset(4), flip(), shift({
+  let floatingMiddleware = [offset(4), flip(), shift({
     padding: 8
   })];
   if (matchAnchorWidth) {
-    floatingMiddleware = [].concat(_toConsumableArray(floatingMiddleware), [size({
-      apply: function apply(_ref4) {
-        var rects = _ref4.rects,
-          elements = _ref4.elements;
+    floatingMiddleware = [...floatingMiddleware, size({
+      apply({
+        rects,
+        elements
+      }) {
         Object.assign(elements.floating.style, {
-          width: "".concat(rects.reference.width, "px")
+          width: `${rects.reference.width}px`
         });
       }
-    })]);
+    })];
   }
-  var _useFloating = useFloating({
-      elements: {
-        reference: anchorEl
-      },
-      placement: placement,
-      open: open,
-      onOpenChange: onClose,
-      middleware: floatingMiddleware
-    }),
-    x = _useFloating.x,
-    y = _useFloating.y,
-    refs = _useFloating.refs,
-    update = _useFloating.update,
-    strategy = _useFloating.strategy,
-    context = _useFloating.context;
-  var popoverRef = useMemo(function () {
-    return mergeRefs(refs.setFloating, ref);
-  }, [refs.setFloating, ref]);
-  useIsomorphicLayoutEffect(function () {
+  const {
+    x,
+    y,
+    refs,
+    update,
+    strategy,
+    context
+  } = useFloating({
+    elements: {
+      reference: anchorEl
+    },
+    placement,
+    open,
+    onOpenChange: onClose,
+    middleware: floatingMiddleware
+  });
+  const popoverRef = useMemo(() => mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
+  useIsomorphicLayoutEffect(() => {
     if (refs.reference.current && refs.floating.current && open) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, open]);
-  var _useInteractions = useInteractions([useDismiss(context, {
-      escapeKey: false
-    })]),
-    getFloatingProps = _useInteractions.getFloatingProps;
-  var props = {
-    open: open,
-    className: className
+  const {
+    getFloatingProps
+  } = useInteractions([useDismiss(context, {
+    escapeKey: false
+  })]);
+  const props = {
+    open,
+    className
+  };
+  const menuProps = {
+    ...rest,
+    onClose,
+    anchorEl,
+    open
   };
-  var menuProps = _objectSpread(_objectSpread({}, rest), {}, {
-    onClose: onClose,
-    anchorEl: anchorEl,
-    open: open
-  });
 
   //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  var inDialog = useIsInDialog(anchorEl);
-  var menuElement = /*#__PURE__*/jsx(ThemeProvider, {
+  const inDialog = useIsInDialog(anchorEl);
+  const menuElement = /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(MenuPaper, _objectSpread(_objectSpread(_objectSpread({
-      elevation: "raised"
-    }, props), getFloatingProps({
-      ref: popoverRef,
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        position: strategy,
-        top: y || 0,
-        left: x || 0
-      })
-    })), {}, {
+    children: /*#__PURE__*/jsx(MenuPaper, {
+      elevation: "raised",
+      ...props,
+      ...getFloatingProps({
+        ref: popoverRef,
+        style: {
+          ...style,
+          position: strategy,
+          top: y || 0,
+          left: x || 0
+        }
+      }),
       children: /*#__PURE__*/jsx(MenuProvider, {
-        children: /*#__PURE__*/jsx(MenuContainer, _objectSpread(_objectSpread({}, menuProps), {}, {
+        children: /*#__PURE__*/jsx(MenuContainer, {
+          ...menuProps,
           ref: ref
-        }))
+        })
       })
-    }))
+    })
   });
   return /*#__PURE__*/jsx(Fragment, {
     children: inDialog ? menuElement : /*#__PURE__*/jsx(FloatingPortal, {

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

@@ -1,23 +1,53 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens.colors,
-  background = _tokens$colors.ui.background__default.rgba,
-  _tokens$colors$intera = _tokens$colors.interactive,
-  activeBackground = _tokens$colors$intera.primary__selected_highlight.rgba,
-  activeTextColor = _tokens$colors$intera.primary__resting.rgba,
-  focusColor = _tokens$colors$intera.focus.rgba,
-  disabledIconColor = _tokens$colors$intera.disabled__fill.rgba,
-  disabledTextColor = _tokens$colors$intera.disabled__text.rgba,
-  hoverBackground = _tokens$colors$intera.table__header__fill_hover.rgba,
-  textColor = _tokens$colors.text.static_icons__default.rgba,
-  _tokens$spacings$comf = tokens.spacings.comfortable,
-  medium = _tokens$spacings$comf.medium,
-  large = _tokens$spacings$comf.large,
-  small = _tokens$spacings$comf.small,
-  typography = tokens.typography.navigation.menu_title;
-var menu = {
-  background: background,
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      }
+    },
+    interactive: {
+      primary__selected_highlight: {
+        rgba: activeBackground
+      },
+      primary__resting: {
+        rgba: activeTextColor
+      },
+      focus: {
+        rgba: focusColor
+      },
+      disabled__fill: {
+        rgba: disabledIconColor
+      },
+      disabled__text: {
+        rgba: disabledTextColor
+      },
+      table__header__fill_hover: {
+        rgba: hoverBackground
+      }
+    },
+    text: {
+      static_icons__default: {
+        rgba: textColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium,
+      large,
+      small
+    }
+  },
+  typography: {
+    navigation: {
+      menu_title: typography
+    }
+  }
+} = tokens;
+const menu = {
+  background,
   spacings: {
     top: small,
     bottom: small,
@@ -28,9 +58,10 @@ var menu = {
     type: 'border',
     radius: '4px'
   },
-  typography: _objectSpread(_objectSpread({}, typography), {}, {
+  typography: {
+    ...typography,
     color: textColor
-  }),
+  },
   entities: {
     icon: {
       states: {
@@ -50,9 +81,10 @@ var menu = {
       },
       states: {
         active: {
-          typography: _objectSpread(_objectSpread({}, typography), {}, {
+          typography: {
+            ...typography,
             color: activeTextColor
-          }),
+          },
           background: activeBackground
         },
         focus: {
@@ -68,9 +100,10 @@ var menu = {
           background: hoverBackground
         },
         disabled: {
-          typography: _objectSpread(_objectSpread({}, typography), {}, {
+          typography: {
+            ...typography,
             color: disabledTextColor
-          })
+          }
         }
       }
     },

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

@@ -1,5 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { menu } from './Menu.tokens.js';
@@ -7,80 +5,80 @@ import { typographyTemplate, spacingsTemplate, outlineTemplate, mergeRefs } from
 import { useMenu } from './Menu.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "disabled", "active", "index", "as", "onClick", "closeMenuOnClick"];
-var typography = menu.typography,
-  _tokens$entities = menu.entities,
-  _tokens$entities$item = _tokens$entities.item.states,
-  activeToken = _tokens$entities$item.active,
-  focus = _tokens$entities$item.focus,
-  hover = _tokens$entities$item.hover,
-  disabledToken = _tokens$entities$item.disabled,
-  icon = _tokens$entities.icon;
-var Item = styled.button.attrs(function (_ref) {
-  var $isFocused = _ref.$isFocused;
-  return {
-    role: 'menuitem',
-    tabIndex: $isFocused ? -1 : 0
-  };
-}).withConfig({
+const {
+  typography,
+  entities: {
+    item: {
+      states: {
+        active: activeToken,
+        focus,
+        hover,
+        disabled: disabledToken
+      }
+    },
+    icon
+  }
+} = menu;
+const Item = styled.button.attrs(({
+  $isFocused
+}) => ({
+  role: 'menuitem',
+  tabIndex: $isFocused ? -1 : 0
+})).withConfig({
   displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;text-decoration:none;", " ", " ", " ", ""], typographyTemplate(typography), function (_ref2) {
-  var theme = _ref2.theme;
-  return spacingsTemplate(theme.entities.item.spacings);
-}, function (_ref3) {
-  var $active = _ref3.$active;
-  return $active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline));
-});
-var Content = styled.div.withConfig({
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;text-decoration:none;", " ", " ", " ", ""], typographyTemplate(typography), ({
+  theme
+}) => spacingsTemplate(theme.entities.item.spacings), ({
+  $active
+}) => $active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color), ({
+  disabled
+}) => disabled ? css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline)));
+const Content = styled.div.withConfig({
   displayName: "MenuItem__Content",
   componentId: "sc-1g9fpbe-1"
 })(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
-var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
-  var children = _ref5.children,
-    disabled = _ref5.disabled,
-    active = _ref5.active,
-    _ref5$index = _ref5.index,
-    index = _ref5$index === void 0 ? 0 : _ref5$index,
-    _ref5$as = _ref5.as,
-    as = _ref5$as === void 0 ? 'button' : _ref5$as,
-    _onClick = _ref5.onClick,
-    _ref5$closeMenuOnClic = _ref5.closeMenuOnClick,
-    closeMenuOnClick = _ref5$closeMenuOnClic === void 0 ? true : _ref5$closeMenuOnClic,
-    rest = _objectWithoutProperties(_ref5, _excluded);
-  var _useMenu = useMenu(),
-    focusedIndex = _useMenu.focusedIndex,
-    setFocusedIndex = _useMenu.setFocusedIndex,
-    onClose = _useMenu.onClose;
-  var toggleFocus = function toggleFocus(index_) {
+const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
+  children,
+  disabled,
+  active,
+  index = 0,
+  as = 'button',
+  onClick,
+  closeMenuOnClick = true,
+  ...rest
+}, ref) {
+  const {
+    focusedIndex,
+    setFocusedIndex,
+    onClose
+  } = useMenu();
+  const toggleFocus = index_ => {
     if (focusedIndex !== index_) {
       setFocusedIndex(index_);
     }
   };
-  var isFocused = index === focusedIndex;
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    as: as,
-    disabled: disabled,
+  const isFocused = index === focusedIndex;
+  const props = {
+    ...rest,
+    as,
+    disabled,
     $isFocused: isFocused
-  });
-  return /*#__PURE__*/jsx(Item, _objectSpread(_objectSpread({}, props), {}, {
+  };
+  return /*#__PURE__*/jsx(Item, {
+    ...props,
     $active: active,
-    ref: mergeRefs(ref, function (el) {
+    ref: mergeRefs(ref, el => {
       if (isFocused) {
-        requestAnimationFrame(function () {
+        requestAnimationFrame(() => {
           if (el !== null) el.focus();
         });
       }
     }),
-    onFocus: function onFocus() {
-      return toggleFocus(index);
-    },
-    onClick: function onClick(e) {
-      if (_onClick) {
-        _onClick(e);
+    onFocus: () => toggleFocus(index),
+    onClick: e => {
+      if (onClick) {
+        onClick(e);
         if (onClose !== null && closeMenuOnClick) {
           onClose(e);
         }
@@ -89,7 +87,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
     children: /*#__PURE__*/jsx(Content, {
       children: children
     })
-  }));
+  });
 });
 MenuItem.displayName = 'MenuItem';