@equinor/eds-core-react 0.15.0 → 0.17.0-dev.20220209

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { label } from './Label.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const LabelBase = styled.label.withConfig({
+  displayName: "Label__LabelBase",
+  componentId: "sc-1gi2bcn-0"
+})(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], typographyTemplate(label.typography), label.spacings.left, label.spacings.right, _ref => {
+  let {
+    disabledText
+  } = _ref;
+  return disabledText ? label.states.disabled.typography.color : label.typography.color;
+});
+const Text = styled.span.withConfig({
+  displayName: "Label__Text",
+  componentId: "sc-1gi2bcn-1"
+})(["margin:0;"]);
+const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
+  const {
+    label = '',
+    meta,
+    disabled = false,
+    ...other
+  } = props;
+  return (
+    /*#__PURE__*/
+
+    /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
+    jsxs(LabelBase, {
+      ref: ref,
+      disabledText: disabled,
+      ...other,
+      children: [/*#__PURE__*/jsx(Text, {
+        children: label
+      }), meta && /*#__PURE__*/jsx(Text, {
+        children: meta
+      })]
+    })
+  );
+}); // Label.displayName = 'eds-text-field-label'
+
+export { Label };

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

@@ -0,0 +1,30 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable
+  },
+  typography
+} = tokens;
+const label = {
+  background: colors.ui.background__light.rgba,
+  typography: { ...typography.input.label,
+    color: colors.text.static_icons__tertiary.rgba
+  },
+  spacings: {
+    left: comfortable.small,
+    right: comfortable.small,
+    top: '6px',
+    bottom: '6px'
+  },
+  states: {
+    disabled: {
+      typography: {
+        color: colors.interactive.disabled__text.rgba
+      }
+    }
+  }
+};
+
+export { label };

package/dist/esm/components/List/List.js

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { list } from './List.tokens.js';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  typography
+} = list;
+const StyledList = styled.ul.withConfig({
+  displayName: "List__StyledList",
+  componentId: "sc-v9d2hy-0"
+})(["", " ", ""], _ref => {
+  let {
+    as
+  } = _ref;
+  return as === 'ol' ? css(["& ol{list-style-type:lower-alpha;}"]) : '';
+}, typographyTemplate(typography));
+const List = /*#__PURE__*/forwardRef(function List(_ref2, ref) {
+  let {
+    children,
+    variant = 'bullet',
+    ...props
+  } = _ref2;
+  const as = variant === 'numbered' ? 'ol' : 'ul';
+  return /*#__PURE__*/jsx(StyledList, {
+    as: as,
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // List.displayName = 'List'
+
+export { List };

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

@@ -0,0 +1,12 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography: {
+    paragraph
+  }
+} = tokens;
+const list = {
+  typography: paragraph.body_short
+};
+
+export { list };

package/dist/esm/components/List/ListItem.js

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const ListItem = /*#__PURE__*/forwardRef(function ListItem(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/jsx("li", { ...props,
+    ref: ref,
+    children: children
+  });
+}); // ListItem.displayName = 'ListItem'
+
+export { ListItem };

package/dist/esm/components/List/index.js

@@ -0,0 +1,8 @@
+import { List as List$1 } from './List.js';
+import { ListItem } from './ListItem.js';
+
+const List = List$1;
+List.Item = ListItem;
+List.Item.displayName = 'List.Item';
+
+export { List };

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

@@ -0,0 +1,49 @@
+import { useState, useContext, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const initalState = {
+  focusedIndex: -1,
+  onClose: null
+};
+const MenuContext = /*#__PURE__*/createContext(initalState);
+const MenuProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const [state, setState] = useState(initalState);
+  const {
+    focusedIndex,
+    onClose
+  } = state;
+
+  const setFocusedIndex = i => {
+    setState(prevState => ({ ...prevState,
+      focusedIndex: i
+    }));
+  };
+
+  const setOnClose = onClose => {
+    const onCloseHelper = () => {
+      setFocusedIndex(-1);
+      onClose();
+    };
+
+    setState(prevState => ({ ...prevState,
+      onClose: onCloseHelper
+    }));
+  };
+
+  const value = {
+    setFocusedIndex,
+    focusedIndex,
+    setOnClose,
+    onClose
+  };
+  return /*#__PURE__*/jsx(MenuContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useMenu = () => useContext(MenuContext);
+
+export { MenuProvider, useMenu };

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

@@ -0,0 +1,125 @@
+import { forwardRef, useState, useEffect } from 'react';
+import * as ReactDom from 'react-dom';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { MenuProvider, useMenu } from './Menu.context.js';
+import { MenuList } from './MenuList.js';
+import { bordersTemplate, useIsMounted, useToken, usePopper, useOutsideClick, useGlobalKeyPress } from '@equinor/eds-utils';
+import { menu } from './Menu.tokens.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Paper } from '../Paper/Paper.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+const {
+  border
+} = menu;
+const MenuPaper = styled(Paper).withConfig({
+  displayName: "Menu__MenuPaper",
+  componentId: "sc-1vlnqcj-0"
+})(["position:absolute;z-index:300;width:fit-content;min-width:fit-content;", ";", ""], bordersTemplate(border), _ref => {
+  let {
+    open
+  } = _ref;
+  return css({
+    visibility: open ? null : 'hidden'
+  });
+});
+const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
+  let {
+    children,
+    anchorEl,
+    onClose: onCloseCallback,
+    open,
+    containerEl,
+    ...rest
+  } = _ref2;
+  const {
+    setOnClose,
+    onClose
+  } = useMenu();
+  useEffect(() => {
+    if (onClose === null && onCloseCallback) {
+      setOnClose(onCloseCallback);
+    }
+  }, [onClose, onCloseCallback, setOnClose]);
+  useOutsideClick(containerEl, e => {
+    if (open && onClose !== null && !anchorEl.contains(e.target)) {
+      onClose();
+    }
+  });
+  useGlobalKeyPress('Escape', () => {
+    if (open && onClose !== null) {
+      onClose();
+      anchorEl.focus();
+    }
+  });
+  useGlobalKeyPress('Enter', () => {
+    if (open && onClose !== null) {
+      setTimeout(() => {
+        if (window.document.contains(anchorEl)) {
+          anchorEl.focus();
+        }
+      }, 0);
+    }
+  });
+  return /*#__PURE__*/jsx(MenuList, { ...rest,
+    ref: ref,
+    children: children
+  });
+});
+const Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
+  let {
+    anchorEl,
+    open,
+    placement = 'auto',
+    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(storedAnchorEl, containerEl, null, placement, 4);
+  const props = {
+    open,
+    style: { ...styles.popper,
+      ...style
+    },
+    className,
+    ...attributes.popper
+  };
+  const menuProps = { ...rest,
+    anchorEl,
+    open,
+    containerEl
+  };
+  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
+          })
+        })
+      })
+    }), document.body)
+  });
+});
+
+export { Menu };

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

@@ -0,0 +1,132 @@
+import { tokens } from '@equinor/eds-tokens';
+
+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,
+    left: '0px',
+    right: '0px'
+  },
+  border: {
+    type: 'border',
+    radius: '4px'
+  },
+  typography: { ...typography,
+    color: textColor
+  },
+  entities: {
+    icon: {
+      states: {
+        disabled: {
+          typography: {
+            color: disabledIconColor
+          }
+        }
+      }
+    },
+    item: {
+      spacings: {
+        left: large,
+        right: large,
+        top: medium,
+        bottom: medium
+      },
+      states: {
+        active: {
+          typography: { ...typography,
+            color: activeTextColor
+          },
+          background: activeBackground
+        },
+        focus: {
+          outline: {
+            color: focusColor,
+            style: 'dashed',
+            type: 'outline',
+            width: '2px',
+            offset: '2px'
+          }
+        },
+        hover: {
+          background: hoverBackground
+        },
+        disabled: {
+          typography: { ...typography,
+            color: disabledTextColor
+          }
+        }
+      }
+    },
+    title: {
+      spacings: {
+        left: large,
+        right: large,
+        top: small,
+        bottom: small
+      }
+    }
+  },
+  modes: {
+    compact: {
+      entities: {
+        item: {
+          spacings: {
+            left: large,
+            right: large,
+            top: small,
+            bottom: small
+          }
+        }
+      }
+    }
+  }
+};
+
+export { menu };

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

@@ -0,0 +1,103 @@
+import { memo, 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 { useMenu } from './Menu.context.js';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  typography,
+  entities: {
+    item: {
+      states: {
+        active: activeToken,
+        focus,
+        hover,
+        disabled: disabledToken
+      }
+    },
+    icon
+  }
+} = menu;
+const Item = styled.button.attrs(_ref => {
+  let {
+    isFocused
+  } = _ref;
+  return {
+    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;", " ", " ", " ", ""], typographyTemplate(typography), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return spacingsTemplate(theme.entities.item.spacings);
+}, _ref3 => {
+  let {
+    active
+  } = _ref3;
+  return active && css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
+}, _ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  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));
+});
+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;"]);
+const MenuItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function MenuItem(_ref5, ref) {
+  let {
+    children,
+    disabled,
+    index = 0,
+    onClick,
+    ...rest
+  } = _ref5;
+  const {
+    focusedIndex,
+    setFocusedIndex,
+    onClose
+  } = useMenu();
+
+  const toggleFocus = index_ => {
+    if (focusedIndex !== index_) {
+      setFocusedIndex(index_);
+    }
+  };
+
+  const isFocused = index === focusedIndex;
+  const props = { ...rest,
+    disabled,
+    isFocused
+  };
+  return /*#__PURE__*/jsx(Item, { ...props,
+    ref: useCombinedRefs(ref, el => {
+      if (isFocused) {
+        requestAnimationFrame(() => {
+          if (el !== null) el.focus();
+        });
+      }
+    }),
+    onFocus: () => toggleFocus(index),
+    onClick: e => {
+      if (onClick) {
+        onClick(e);
+
+        if (onClose !== null) {
+          onClose(e);
+        }
+      }
+    },
+    children: /*#__PURE__*/jsx(Content, {
+      children: children
+    })
+  });
+}));
+MenuItem.displayName = 'MenuItem';
+
+export { MenuItem };

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

@@ -0,0 +1,97 @@
+import { forwardRef, useMemo, Children, cloneElement, useEffect, isValidElement } from 'react';
+import styled from 'styled-components';
+import { useMenu } from './Menu.context.js';
+import { MenuItem } from './MenuItem.js';
+import { MenuSection } from './MenuSection.js';
+import { menu } from './Menu.tokens.js';
+import { spacingsTemplate } from '@equinor/eds-utils';
+import { jsx } from 'react/jsx-runtime';
+
+const List = styled.div.withConfig({
+  displayName: "MenuList__List",
+  componentId: "sc-104rzof-0"
+})(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
+
+function isIndexable(item) {
+  if ( /*#__PURE__*/isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
+  return false;
+}
+
+const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
+  let {
+    children,
+    focus,
+    ...rest
+  } = _ref;
+  const {
+    focusedIndex,
+    setFocusedIndex
+  } = useMenu();
+  let index = -1;
+  const focusableIndexs = useMemo(() => [], []);
+  const updatedChildren = useMemo(() => Children.map(children, child => {
+    if (child.type === MenuSection) {
+      const updatedGrandChildren = Children.map(child.props.children, grandChild => {
+        index++;
+        if (isIndexable(grandChild)) focusableIndexs.push(index);
+        return /*#__PURE__*/cloneElement(grandChild, {
+          index
+        });
+      });
+      return /*#__PURE__*/cloneElement(child, null, updatedGrandChildren);
+    } else {
+      index++;
+      if (isIndexable(child)) focusableIndexs.push(index);
+      return /*#__PURE__*/cloneElement(child, {
+        index
+      });
+    }
+  }), [children, focusableIndexs, index]);
+  const firstFocusIndex = focusableIndexs[0];
+  const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
+  useEffect(() => {
+    if (focus === 'first') {
+      setFocusedIndex(firstFocusIndex);
+    }
+
+    if (focus === 'last') {
+      setFocusedIndex(lastFocusIndex);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [focus, firstFocusIndex, lastFocusIndex]);
+
+  const handleMenuItemChange = (direction, fallbackIndex) => {
+    const i = direction === 'down' ? 1 : -1;
+    const currentFocus = focusableIndexs.indexOf(focusedIndex);
+    const nextMenuItem = focusableIndexs[currentFocus + i];
+    const nextFocusedIndex = typeof nextMenuItem === 'undefined' ? fallbackIndex : nextMenuItem;
+    setFocusedIndex(nextFocusedIndex);
+  };
+
+  const handleKeyPress = event => {
+    const {
+      key
+    } = event;
+    event.stopPropagation();
+
+    if (key === 'ArrowDown') {
+      event.preventDefault();
+      handleMenuItemChange('down', firstFocusIndex);
+    }
+
+    if (key === 'ArrowUp') {
+      event.preventDefault();
+      handleMenuItemChange('up', lastFocusIndex);
+    }
+  };
+
+  return /*#__PURE__*/jsx(List, {
+    onKeyDown: handleKeyPress,
+    role: "menu",
+    ...rest,
+    ref: ref,
+    children: updatedChildren
+  });
+}); // MenuList.displayName = 'EdsMenuList'
+
+export { MenuList };

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

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+import styled from 'styled-components';
+import { menu } from './Menu.tokens.js';
+import { spacingsTemplate } from '@equinor/eds-utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+import { Typography } from '../Typography/Typography.js';
+
+const Header = styled.div.attrs(() => ({
+  tabIndex: 0
+})).withConfig({
+  displayName: "MenuSection__Header",
+  componentId: "sc-gfcbvg-0"
+})(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
+const MenuSection = /*#__PURE__*/memo(function MenuSection(props) {
+  const {
+    children,
+    title,
+    index
+  } = props;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [index !== 0 && /*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsx(Divider, {
+        variant: "small"
+      })
+    }), title && /*#__PURE__*/jsx(Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        group: "navigation",
+        variant: "label",
+        children: title
+      })
+    }), children]
+  });
+}); // MenuSection.displayName = 'EdsMenuSection'
+
+export { MenuSection };

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

@@ -0,0 +1,11 @@
+import { Menu as Menu$1 } from './Menu.js';
+import { MenuItem } from './MenuItem.js';
+import { MenuSection } from './MenuSection.js';
+
+const Menu = Menu$1;
+Menu.Item = MenuItem;
+Menu.Section = MenuSection;
+Menu.Item.displayName = 'Menu.Item';
+Menu.Section.displayName = 'Menu.Section';
+
+export { Menu };