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

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

@@ -0,0 +1,158 @@
+import { forwardRef, useState, useLayoutEffect } from 'react';
+import styled from 'styled-components';
+import { useIsMounted } from '@equinor/eds-utils';
+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 { jsx, jsxs } from 'react/jsx-runtime';
+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:", ";"], _ref => {
+  let {
+    withItemIndicator
+  } = _ref;
+  return 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 "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
+}
+
+const Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
+  let {
+    totalItems,
+    defaultPage = 1,
+    withItemIndicator,
+    itemsPerPage = 10,
+    onChange,
+    ...rest
+  } = _ref2;
+  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__*/jsx(Navigation, {
+    "aria-label": "pagination",
+    ...props,
+    children: /*#__PURE__*/jsxs(OrderedList, {
+      style: {
+        gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
+      },
+      children: [/*#__PURE__*/jsx(ListItem, {
+        children: /*#__PURE__*/jsx(Button, {
+          variant: "ghost_icon",
+          onClick: activePage > 1 ? event => {
+            onPageChange(event, activePage - 1);
+          } : undefined,
+          disabled: activePage === 1,
+          "aria-label": "Go to previous page",
+          children: /*#__PURE__*/jsx(Icon, {
+            name: "chevron_left"
+          })
+        })
+      }, "previous"), items.length > 0 ? items.map((page, index) => page !== 'ELLIPSIS' ?
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      jsx(ListItem, {
+        children: /*#__PURE__*/jsx(PaginationItem, { ...page,
+          "aria-label": getAriaLabel(page, activePage),
+          "aria-current": activePage,
+          page: page,
+          selected: page === activePage,
+          onClick: event => {
+            onPageChange(event, page);
+          }
+        })
+      }, "list-item ".concat(index)) : /*#__PURE__*/jsx(ListItem // eslint-disable-next-line react/no-array-index-key
+      , {
+        children: /*#__PURE__*/jsx(StyledIcon, {
+          name: "more_horizontal",
+          "aria-label": "Ellipsis of pages"
+        })
+      }, "ellipsis-".concat(index))) : undefined, /*#__PURE__*/jsx(ListItem, {
+        children: /*#__PURE__*/jsx(Button, {
+          variant: "ghost_icon",
+          onClick: activePage < pages ? event => {
+            onPageChange(event, activePage + 1);
+          } : undefined,
+          "aria-label": "Go to next page",
+          disabled: activePage === pages,
+          children: /*#__PURE__*/jsx(Icon, {
+            name: "chevron_right"
+          })
+        })
+      }, "next")]
+    })
+  });
+
+  return withItemIndicator ? /*#__PURE__*/jsxs(FlexContainer, {
+    children: [/*#__PURE__*/jsx(Text, {
+      children: currentItemFirst !== currentItemLast ? "".concat(currentItemFirst, "\n              ", ' - ', "\n              ").concat(currentItemLast, "\n              ", ' of ', "\n              ").concat(totalItems, "\n              ", ' items') : "".concat(currentItemFirst, " ", ' of ', " ").concat(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,31 @@
+import { forwardRef } from 'react';
+import { pagination } from './Pagination.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../Button/Button.js';
+
+const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem(_ref, ref) {
+  let {
+    page,
+    selected,
+    onClick,
+    ...rest
+  } = _ref;
+  const props = {
+    ref,
+    page,
+    selected,
+    ...rest
+  };
+  const background = selected ? pagination.entities.item.states.active.background : null;
+  return /*#__PURE__*/jsx(Button, {
+    style: {
+      background
+    },
+    variant: "ghost_icon",
+    onClick: onClick ? onClick : undefined,
+    ...props,
+    children: page
+  });
+});
+
+export { PaginationItem };

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

@@ -0,0 +1,46 @@
+function PaginationControl(pages, activePage) {
+  const siblings = 1; // amount of siblings on left and right side of active page after trunking
+
+  const totalPagesShown = 7; // amount of total pages before we start trunking pages in ellipsis
+
+  const pagesBeforeEllipsis = 5; // total pages shown before ellipsis and trunking begins
+
+  const ELLIPSIS = 'ELLIPSIS'; // Range function from https://dev.to/namirsab/comment/2050
+
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({
+      length
+    }, (_, i) => start + i);
+  };
+
+  let pageRange;
+
+  if (pages > 4) {
+    const startPage = Math.max(1, activePage < pagesBeforeEllipsis || pages <= totalPagesShown ? 1 : activePage + siblings + 1 >= pages ? pages - 4 // - 4 to fit total columns /
+    : activePage > 4 && pages > totalPagesShown ? activePage - siblings : 1); // the first page after left ellipsis
+
+    const endOffset = activePage < pagesBeforeEllipsis && pages > totalPagesShown ? pagesBeforeEllipsis : activePage < pagesBeforeEllipsis && pages <= totalPagesShown ? pages : activePage + siblings + 1 < pages - 1 ? activePage + siblings : activePage + siblings + 1 === pages - 1 ? pages : pages;
+    const endPage = Math.min(pages, endOffset); // the last page before right ellipsis
+
+    pageRange = range(startPage, endPage); // range in between ellipsis(es). Ex: range(4, 6) =  1 ... ( 4 5 6 )  ... 10
+
+    const hiddenLeft = startPage > 2 && pages > totalPagesShown; // Has hidden pages on left side
+
+    const hiddenRight = pages - endPage > 1 && pages > totalPagesShown; // Has hidden pages on right side
+
+    if (hiddenLeft && !hiddenRight) {
+      pageRange = [1, ELLIPSIS, ...pageRange];
+    } else if (!hiddenLeft && hiddenRight) {
+      pageRange = [...pageRange, ELLIPSIS, pages];
+    } else if (hiddenLeft && hiddenRight) {
+      pageRange = [1, ELLIPSIS, ...pageRange, ELLIPSIS, pages];
+    }
+
+    return [...pageRange];
+  }
+
+  return range(1, pages);
+}
+
+export { PaginationControl };

package/dist/esm/components/Paper/Paper.js

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { paper, elevation } from './Paper.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledPaper = styled.div.withConfig({
+  displayName: "Paper__StyledPaper",
+  componentId: "sc-6ncnv9-0"
+})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
+  let {
+    elevation
+  } = _ref;
+  return elevation;
+});
+const Paper = /*#__PURE__*/forwardRef(function Paper(_ref2, ref) {
+  let {
+    elevation: elevation$1,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    elevation: elevation[elevation$1] || 'none'
+  };
+  return /*#__PURE__*/jsx(StyledPaper, { ...props,
+    ref: ref
+  });
+});
+
+export { Paper };

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

@@ -0,0 +1,19 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  elevation,
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      }
+    }
+  }
+} = tokens;
+const paper = {
+  maxWidth: 'calc(100% - 32px)',
+  minWidth: '96px',
+  background
+};
+
+export { elevation, paper };

package/dist/esm/components/Popover/Popover.js

@@ -0,0 +1,115 @@
+import { forwardRef, useState, useEffect } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { typographyTemplate, bordersTemplate, useCombinedRefs, useOutsideClick, useGlobalKeyPress, usePopper, useToken } from '@equinor/eds-utils';
+import { popover } from './Popover.tokens.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Paper } from '../Paper/Paper.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+const PopoverPaper = styled(Paper).withConfig({
+  displayName: "Popover__PopoverPaper",
+  componentId: "sc-b7p1is-0"
+})(_ref => {
+  let {
+    theme,
+    open
+  } = _ref;
+  return css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], {
+    visibility: open ? null : 'hidden'
+  }, typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, bordersTemplate(theme.border), theme.entities.arrow.width, theme.entities.arrow.height, theme.entities.arrow.spacings.bottom, theme.entities.arrow.spacings.top, theme.entities.arrow.spacings.right, theme.entities.arrow.spacings.left);
+});
+const ArrowWrapper = styled.div.withConfig({
+  displayName: "Popover__ArrowWrapper",
+  componentId: "sc-b7p1is-1"
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return css(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], theme.entities.arrow.width, theme.entities.arrow.height);
+});
+const InnerWrapper = styled.div.withConfig({
+  displayName: "Popover__InnerWrapper",
+  componentId: "sc-b7p1is-2"
+})(_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return css(["display:grid;grid-gap:", ";"], theme.spacings.bottom);
+});
+const PopoverArrow = styled.svg.withConfig({
+  displayName: "Popover__PopoverArrow",
+  componentId: "sc-b7p1is-3"
+})(_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return css(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], theme.entities.arrow.width, theme.entities.arrow.height, theme.background);
+});
+const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
+  let {
+    children,
+    placement = 'bottom',
+    anchorEl,
+    open,
+    onClose,
+    ...rest
+  } = _ref5;
+  const [popperEl, setPopperEl] = useState(null);
+  const [storedAnchorEl, setStoredAnchorEl] = useState(null);
+  const [arrowRef, setArrowRef] = useState(null);
+  const popoverRef = useCombinedRefs(ref, setPopperEl);
+  useOutsideClick(popperEl, e => {
+    if (open && onClose !== null && anchorEl && !anchorEl.contains(e.target)) {
+      onClose();
+    }
+  });
+  useGlobalKeyPress('Escape', () => {
+    if (onClose !== null && open) {
+      onClose();
+    }
+  });
+  useEffect(() => {
+    open ? setStoredAnchorEl(anchorEl) : setStoredAnchorEl(null);
+    return () => setStoredAnchorEl(null);
+  }, [anchorEl, open]);
+  const {
+    styles,
+    attributes
+  } = usePopper(storedAnchorEl, popperEl, arrowRef, placement);
+  const props = {
+    open,
+    ...rest,
+    ...attributes.popper
+  };
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, popover);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(PopoverPaper, {
+      ref: popoverRef,
+      elevation: "overlay",
+      style: styles.popper,
+      "data-testid": "popover",
+      ...props,
+      children: [/*#__PURE__*/jsx(ArrowWrapper, {
+        ref: setArrowRef,
+        style: styles.arrow,
+        className: "arrow",
+        children: /*#__PURE__*/jsx(PopoverArrow, {
+          className: "arrowSvg",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+          })
+        })
+      }), /*#__PURE__*/jsx(InnerWrapper, {
+        children: children
+      })]
+    })
+  });
+});
+
+export { Popover };

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

@@ -0,0 +1,66 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography: {
+    ui: {
+      accordion_header: header
+    }
+  },
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium,
+      small: spacingSmall
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const popover = {
+  background,
+  typography: header,
+  maxWidth: '560px',
+  maxHeight: '80vh',
+  entities: {
+    arrow: {
+      width: '6px',
+      height: spacingSmall,
+      spacings: {
+        top: '-5px',
+        // 1px less than arrow width, if not the shadow would show between arrow and popover
+        bottom: '-5px',
+        left: '-5px',
+        right: '-5px'
+      }
+    },
+    title: {
+      spacings: {
+        top: '12px'
+      }
+    }
+  },
+  spacings: {
+    top: spacingMedium,
+    left: spacingMedium,
+    right: spacingMedium,
+    bottom: spacingMedium
+  },
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  modes: {
+    compact: {}
+  }
+};
+
+export { popover };

package/dist/esm/components/Popover/PopoverActions.js

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledPopoverActions = styled.div.withConfig({
+  displayName: "PopoverActions__StyledPopoverActions",
+  componentId: "sc-1dkrhw6-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+});
+const PopoverActions = /*#__PURE__*/forwardRef(function PopoverActions(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledPopoverActions, { ...props,
+    children: children
+  });
+});
+
+export { PopoverActions };

package/dist/esm/components/Popover/PopoverContent.js

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const ContentWrapper = styled.div.withConfig({
+  displayName: "PopoverContent__ContentWrapper",
+  componentId: "sc-vwww9h-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["overflow:hidden;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+});
+const PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(ContentWrapper, { ...props,
+    children: children
+  });
+}); // PopoverContent.displayName = 'eds-popover-content'
+
+export { PopoverContent };

package/dist/esm/components/Popover/PopoverHeader.js

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledPopoverHeader = styled.div.withConfig({
+  displayName: "PopoverHeader__StyledPopoverHeader",
+  componentId: "sc-ibcx7p-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["display:flex;justify-content:space-between;align-items:center;padding:", " ", " 0 ", ";"], theme.entities.title.spacings.top, theme.spacings.right, theme.spacings.left);
+});
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "PopoverHeader__StyledDivider",
+  componentId: "sc-ibcx7p-1"
+})(["margin-bottom:0;"]);
+const PopoverHeader = /*#__PURE__*/forwardRef(function PopoverHeader(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsxs("div", { ...props,
+    children: [/*#__PURE__*/jsx(StyledPopoverHeader, {
+      children: children
+    }), /*#__PURE__*/jsx(StyledDivider, {
+      variant: "small"
+    })]
+  });
+});
+
+export { PopoverHeader };

package/dist/esm/components/Popover/PopoverTitle.js

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledPopoverTitle = styled.div.withConfig({
+  displayName: "PopoverTitle__StyledPopoverTitle",
+  componentId: "sc-1ben8su-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["max-width:", ";margin-right:", ";overflow:hidden;"], theme.maxWidth, theme.spacings.right);
+});
+const PopoverTitle = /*#__PURE__*/forwardRef(function PopoverTitle(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(StyledPopoverTitle, { ...props,
+    children: children
+  });
+});
+
+export { PopoverTitle };

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

@@ -0,0 +1,17 @@
+import { Popover as Popover$1 } from './Popover.js';
+import { PopoverTitle } from './PopoverTitle.js';
+import { PopoverContent } from './PopoverContent.js';
+import { PopoverHeader } from './PopoverHeader.js';
+import { PopoverActions } from './PopoverActions.js';
+
+const Popover = Popover$1;
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
+Popover.Header = PopoverHeader;
+Popover.Actions = PopoverActions;
+Popover.Title.displayName = 'Popover.Title';
+Popover.Content.displayName = 'Popover.Content';
+Popover.Header.displayName = 'Popover.Header';
+Popover.Actions.displayName = 'Popover.Actions';
+
+export { Popover };