@equinor/eds-core-react 0.14.3 → 0.15.0-dev.20211116

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

@@ -0,0 +1,102 @@
+import _extends from '@babel/runtime/helpers/extends';
+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 { menu } from './Menu.tokens.js';
+import { useIsMounted } from '../../hooks/useMountedRef.js';
+import { useOutsideClick } from '../../hooks/useOutsideClick.js';
+import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
+import { Paper } from '../Paper/Paper.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
+import { usePopper } from '../../hooks/usePopper.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), ({
+  open
+}) => css({
+  visibility: open ? null : 'hidden'
+}));
+const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer({
+  children,
+  anchorEl,
+  onClose: onCloseCallback,
+  open,
+  containerEl,
+  ...rest
+}, ref) {
+  const {
+    setOnClose,
+    onClose
+  } = useMenu();
+  useEffect(() => {
+    if (onClose === null && onCloseCallback) {
+      setOnClose(onCloseCallback);
+    }
+  });
+  useOutsideClick(containerEl, e => {
+    if (open && onClose !== null && !anchorEl.contains(e.target)) {
+      onClose();
+    }
+  });
+  useGlobalKeyPress('Escape', () => {
+    if (open && onClose !== null) {
+      onClose();
+    }
+  });
+  return /*#__PURE__*/React.createElement(MenuList, _extends({}, rest, {
+    ref: ref
+  }), children);
+});
+const Menu = /*#__PURE__*/forwardRef(function Menu({
+  anchorEl,
+  open,
+  placement = 'auto',
+  style,
+  className,
+  ...rest
+}, ref) {
+  const [containerEl, setContainerEl] = useState(null);
+  const isMounted = useIsMounted();
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, menu);
+  const {
+    styles,
+    attributes
+  } = usePopper(anchorEl, containerEl, null, placement, 4);
+  const props = {
+    open,
+    style: { ...styles.popper,
+      ...style
+    },
+    className,
+    ...attributes.popper
+  };
+  const menuProps = { ...rest,
+    anchorEl,
+    open,
+    containerEl
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isMounted && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: token
+  }, /*#__PURE__*/React.createElement(MenuPaper, _extends({
+    elevation: "raised",
+    ref: setContainerEl
+  }, props), /*#__PURE__*/React.createElement(MenuProvider, null, /*#__PURE__*/React.createElement(MenuContainer, _extends({}, 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,87 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { memo, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { menu } from './Menu.tokens.js';
+import { useMenu } from './Menu.context.js';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const {
+  typography,
+  entities: {
+    item: {
+      states: {
+        active: activeToken,
+        focus,
+        hover,
+        disabled: disabledToken
+      }
+    },
+    icon
+  }
+} = menu;
+const ListItem = styled.li.attrs(({
+  isFocused
+}) => ({
+  role: 'menuitem',
+  tabIndex: isFocused ? -1 : 0
+})).withConfig({
+  displayName: "MenuItem__ListItem",
+  componentId: "sc-1g9fpbe-0"
+})(["width:auto;position:relative;z-index:2;", " ", " ", " ", ""], 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{", "}"], 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({
+  children,
+  disabled,
+  index = 0,
+  onClick,
+  ...rest
+}, ref) {
+  const {
+    focusedIndex,
+    setFocusedIndex,
+    onClose
+  } = useMenu();
+
+  const toggleFocus = index_ => {
+    if (focusedIndex !== index_) {
+      setFocusedIndex(index_);
+    }
+  };
+
+  const isFocused = index === focusedIndex;
+  const props = { ...rest,
+    disabled,
+    isFocused
+  };
+  return /*#__PURE__*/React.createElement(ListItem, _extends({}, props, {
+    ref: useCombinedRefs(ref, el => {
+      if (el !== null && isFocused) {
+        el.focus();
+      }
+    }),
+    onFocus: () => toggleFocus(index),
+    onClick: e => {
+      if (!disabled && onClick) {
+        onClick(e);
+
+        if (onClose !== null) {
+          onClose(e);
+        }
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Content, null, children));
+}));
+MenuItem.displayName = 'MenuItem';
+
+export { MenuItem };

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

@@ -0,0 +1,95 @@
+import _extends from '@babel/runtime/helpers/extends';
+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 '../../utils/templates/index.js';
+
+const List = styled.ul.withConfig({
+  displayName: "MenuList__List",
+  componentId: "sc-104rzof-0"
+})(["position:relative;list-style:none;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({
+  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__*/React.createElement(List, _extends({
+    onKeyDown: handleKeyPress,
+    role: "menu"
+  }, rest, {
+    ref: ref
+  }), updatedChildren);
+}); // MenuList.displayName = 'EdsMenuList'
+
+export { MenuList };

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { menu } from './Menu.tokens.js';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+import { Divider } from '../Divider/Divider.js';
+import { Typography } from '../Typography/Typography.js';
+
+const ListItem = styled.li.attrs(() => ({
+  tabIndex: 0
+})).withConfig({
+  displayName: "MenuSection__ListItem",
+  componentId: "sc-gfcbvg-0"
+})(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
+const MenuSection = /*#__PURE__*/React.memo(function MenuSection(props) {
+  const {
+    children,
+    title,
+    index
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, index !== 0 && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Divider, {
+    variant: "small"
+  })), title && /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Typography, {
+    group: "navigation",
+    variant: "label"
+  }, 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 };

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

@@ -0,0 +1,148 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useState, useLayoutEffect } from 'react';
+import styled from 'styled-components';
+import { Icon } from '../Icon/index.js';
+import { PaginationItem } from './PaginationItem.js';
+import { pagination } from './Pagination.tokens.js';
+import { chevron_left, chevron_right, more_horizontal } from '@equinor/eds-icons';
+import { PaginationControl } from './paginationControl.js';
+import { useIsMounted } from '../../hooks/useMountedRef.js';
+import { Typography } from '../Typography/Typography.js';
+import { Button } from '../Button/Button.js';
+
+const icons = {
+  chevron_left,
+  chevron_right,
+  more_horizontal
+};
+Icon.add(icons);
+const Navigation = styled.nav.withConfig({
+  displayName: "Pagination__Navigation",
+  componentId: "sc-13cpp3o-0"
+})(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], ({
+  withItemIndicator
+}) => withItemIndicator ? pagination.spacings.left : 0);
+const OrderedList = styled.ol.withConfig({
+  displayName: "Pagination__OrderedList",
+  componentId: "sc-13cpp3o-1"
+})(["list-style:none;margin:0;padding:0;display:grid;grid-gap:", ";grid-auto-flow:column;"], pagination.spacings.left);
+const ListItem = styled.li.withConfig({
+  displayName: "Pagination__ListItem",
+  componentId: "sc-13cpp3o-2"
+})(["display:inline-grid;"]);
+const StyledIcon = styled(Icon).withConfig({
+  displayName: "Pagination__StyledIcon",
+  componentId: "sc-13cpp3o-3"
+})(["align-self:center;justify-self:center;fill:", ";"], pagination.entities.icon.typography.color);
+const FlexContainer = styled.div.withConfig({
+  displayName: "Pagination__FlexContainer",
+  componentId: "sc-13cpp3o-4"
+})(["display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:center;"]);
+const Text = styled(Typography).withConfig({
+  displayName: "Pagination__Text",
+  componentId: "sc-13cpp3o-5"
+})(["white-space:nowrap;"]);
+
+function getAriaLabel(page, selected) {
+  return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`;
+}
+
+const Pagination = /*#__PURE__*/forwardRef(function Pagination({
+  totalItems,
+  defaultPage = 1,
+  withItemIndicator,
+  itemsPerPage = 10,
+  onChange,
+  ...rest
+}, ref) {
+  const pages = Math.ceil(totalItems / itemsPerPage); // Total page numbers
+
+  const columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2:  < and >
+
+  const [activePage, setActivePage] = useState(defaultPage);
+  const currentItemFirst = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1; // First number of range of items at current page
+
+  const currentItemLast = activePage === pages ? totalItems : activePage * itemsPerPage; // Last number of range of items at current page
+
+  const onPageChange = (event, page) => {
+    page && setActivePage(page);
+
+    if (event && onChange) {
+      // Callback for provided onChange func
+      onChange(event, page);
+    } else {
+      return undefined;
+    }
+  };
+
+  const isMounted = useIsMounted();
+  const items = PaginationControl(pages, activePage);
+  useLayoutEffect(() => {
+    if (isMounted) {
+      setActivePage(1);
+      onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [itemsPerPage]);
+  const props = {
+    ref,
+    withItemIndicator,
+    ...rest
+  };
+  const pagination = /*#__PURE__*/React.createElement(Navigation, _extends({
+    "aria-label": "pagination"
+  }, props), /*#__PURE__*/React.createElement(OrderedList, {
+    style: {
+      gridTemplateColumns: `repeat(${columns}, 48px)`
+    }
+  }, /*#__PURE__*/React.createElement(ListItem, {
+    key: "previous"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost_icon",
+    onClick: activePage > 1 ? event => {
+      onPageChange(event, activePage - 1);
+    } : undefined,
+    disabled: activePage === 1,
+    "aria-label": "Go to previous page"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron_left"
+  }))), items.length > 0 ? items.map((page, index) => page !== 'ELLIPSIS' ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  React.createElement(ListItem, {
+    key: `list-item ${index}`
+  }, /*#__PURE__*/React.createElement(PaginationItem, _extends({}, page, {
+    "aria-label": getAriaLabel(page, activePage),
+    "aria-current": activePage,
+    page: page,
+    selected: page === activePage,
+    onClick: event => {
+      onPageChange(event, page);
+    }
+  }))) : /*#__PURE__*/React.createElement(ListItem // eslint-disable-next-line react/no-array-index-key
+  , {
+    key: `ellipsis-${index}`
+  }, /*#__PURE__*/React.createElement(StyledIcon, {
+    name: "more_horizontal",
+    "aria-label": "Ellipsis of pages"
+  }))) : undefined, /*#__PURE__*/React.createElement(ListItem, {
+    key: "next"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost_icon",
+    onClick: activePage < pages ? event => {
+      onPageChange(event, activePage + 1);
+    } : undefined,
+    "aria-label": "Go to next page",
+    disabled: activePage === pages
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron_right"
+  })))));
+  return withItemIndicator ? /*#__PURE__*/React.createElement(FlexContainer, null, /*#__PURE__*/React.createElement(Text, null, currentItemFirst !== currentItemLast ? `${currentItemFirst}
+              ${' - '}
+              ${currentItemLast}
+              ${' of '}
+              ${totalItems}
+              ${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`), pagination) : pagination;
+});
+
+export { Pagination };

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

@@ -0,0 +1,40 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    interactive: {
+      primary__selected_highlight: {
+        rgba: selectedColor
+      },
+      disabled__text: {
+        rgba: disabledColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      small: spacingSmall
+    }
+  }
+} = tokens;
+const pagination = {
+  entities: {
+    item: {
+      states: {
+        active: {
+          background: selectedColor
+        }
+      }
+    },
+    icon: {
+      typography: {
+        color: disabledColor
+      }
+    }
+  },
+  spacings: {
+    left: spacingSmall
+  }
+};
+
+export { pagination };

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

@@ -0,0 +1,28 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import { pagination } from './Pagination.tokens.js';
+import { Button } from '../Button/Button.js';
+
+const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem({
+  page,
+  selected,
+  onClick,
+  ...rest
+}, ref) {
+  const props = {
+    ref,
+    page,
+    selected,
+    ...rest
+  };
+  const background = selected ? pagination.entities.item.states.active.background : null;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    style: {
+      background
+    },
+    variant: "ghost_icon",
+    onClick: onClick ? onClick : undefined
+  }, props), page);
+});
+
+export { PaginationItem };