@equinor/eds-core-react 0.23.0 → 0.24.0-dev.20221006

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

@@ -1,23 +1,10 @@
 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 = {
+var _tokens$colors$intera = tokens.colors.interactive,
+    selectedColor = _tokens$colors$intera.primary__selected_highlight.rgba,
+    disabledColor = _tokens$colors$intera.disabled__text.rgba,
+    spacingSmall = tokens.spacings.comfortable.small;
+var pagination = {
   entities: {
     item: {
       states: {

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

@@ -1,31 +1,33 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import { Button } from '../Button/index.js';
 import { pagination } from './Pagination.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-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, {
+var _excluded = ["page", "selected", "onClick"];
+var PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem(_ref, ref) {
+  var page = _ref.page,
+      selected = _ref.selected,
+      onClick = _ref.onClick,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var props = _objectSpread({
+    ref: ref,
+    page: page,
+    selected: selected
+  }, rest);
+
+  var background = selected ? pagination.entities.item.states.active.background : null;
+  return /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
     style: {
-      background
+      background: background
     },
     variant: "ghost_icon",
-    onClick: onClick ? onClick : undefined,
-    ...props,
+    onClick: onClick ? onClick : undefined
+  }, props), {}, {
     children: page
-  });
+  }));
 });
 
 export { PaginationItem };

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

@@ -1,43 +1,47 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+
 function PaginationControl(pages, activePage) {
-  const siblings = 1; // amount of siblings on left and right side of active page after trunking
+  var 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
+  var totalPagesShown = 7; // amount of total pages before we start trunking pages in ellipsis
 
-  const pagesBeforeEllipsis = 5; // total pages shown before ellipsis and trunking begins
+  var pagesBeforeEllipsis = 5; // total pages shown before ellipsis and trunking begins
 
-  const ELLIPSIS = 'ELLIPSIS'; // Range function from https://dev.to/namirsab/comment/2050
+  var ELLIPSIS = 'ELLIPSIS'; // Range function from https://dev.to/namirsab/comment/2050
 
-  const range = (start, end) => {
-    const length = end - start + 1;
+  var range = function range(start, end) {
+    var length = end - start + 1;
     return Array.from({
-      length
-    }, (_, i) => start + i);
+      length: length
+    }, function (_, i) {
+      return start + i;
+    });
   };
 
-  let pageRange;
+  var 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 /
+    var 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
+    var 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;
+    var 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
+    var hiddenLeft = startPage > 2 && pages > totalPagesShown; // Has hidden pages on left side
 
-    const hiddenRight = pages - endPage > 1 && pages > totalPagesShown; // Has hidden pages on right side
+    var hiddenRight = pages - endPage > 1 && pages > totalPagesShown; // Has hidden pages on right side
 
     if (hiddenLeft && !hiddenRight) {
-      pageRange = [1, ELLIPSIS, ...pageRange];
+      pageRange = [1, ELLIPSIS].concat(_toConsumableArray(pageRange));
     } else if (!hiddenLeft && hiddenRight) {
-      pageRange = [...pageRange, ELLIPSIS, pages];
+      pageRange = [].concat(_toConsumableArray(pageRange), [ELLIPSIS, pages]);
     } else if (hiddenLeft && hiddenRight) {
-      pageRange = [1, ELLIPSIS, ...pageRange, ELLIPSIS, pages];
+      pageRange = [1, ELLIPSIS].concat(_toConsumableArray(pageRange), [ELLIPSIS, pages]);
     }
 
-    return [...pageRange];
+    return _toConsumableArray(pageRange);
   }
 
   return range(1, pages);

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

@@ -1,28 +1,29 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 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({
+var _excluded = ["elevation"];
+var StyledPaper = styled.div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
-})(["background:", ";box-shadow:", ";"], paper.background, _ref => {
-  let {
-    elevation
-  } = _ref;
+})(["background:", ";box-shadow:", ";"], paper.background, function (_ref) {
+  var elevation = _ref.elevation;
   return elevation;
 });
-const Paper = /*#__PURE__*/forwardRef(function Paper(_ref2, ref) {
-  let {
-    elevation: elevation$1,
-    ...rest
-  } = _ref2;
-  const props = { ...rest,
+var Paper = /*#__PURE__*/forwardRef(function Paper(_ref2, ref) {
+  var elevation$1 = _ref2.elevation,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
     elevation: elevation[elevation$1] || 'none'
-  };
-  return /*#__PURE__*/jsx(StyledPaper, { ...props,
-    ref: ref
   });
+
+  return /*#__PURE__*/jsx(StyledPaper, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref
+  }));
 });
 
 export { Paper };

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

@@ -1,17 +1,9 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  elevation,
-  colors: {
-    ui: {
-      background__default: {
-        rgba: background
-      }
-    }
-  }
-} = tokens;
-const paper = {
-  background
+var elevation = tokens.elevation,
+    background = tokens.colors.ui.background__default.rgba;
+var paper = {
+  background: background
 };
 
 export { elevation, paper };

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

@@ -1,3 +1,6 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useLayoutEffect, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { typographyTemplate, bordersTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
@@ -7,101 +10,96 @@ 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({
+var _excluded = ["children", "placement", "anchorEl", "style", "open", "onClose"];
+var PopoverPaper = styled(Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
-})(_ref => {
-  let {
-    theme,
-    open
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      open = _ref.open;
   return css(["", " ", " background:", ";", " z-index:1400;"], {
     display: open ? 'block' : 'none'
   }, typographyTemplate(theme.typography), theme.background, bordersTemplate(theme.border));
 });
-const ArrowWrapper = styled.div.withConfig({
+var ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
   componentId: "sc-b7p1is-1"
-})(_ref2 => {
-  let {
-    theme
-  } = _ref2;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return css(["position:absolute;width:", ";height:", ";z-index:-1;"], theme.entities.arrow.width, theme.entities.arrow.height);
 });
-const InnerWrapper = styled.div.withConfig({
+var InnerWrapper = styled.div.withConfig({
   displayName: "Popover__InnerWrapper",
   componentId: "sc-b7p1is-2"
-})(_ref3 => {
-  let {
-    theme
-  } = _ref3;
+})(function (_ref3) {
+  var theme = _ref3.theme;
   return css(["display:grid;grid-gap:", ";max-height:", ";width:max-content;max-width:", ";overflow:auto;"], theme.spacings.bottom, theme.maxHeight, theme.maxWidth);
 });
-const PopoverArrow = styled.svg.withConfig({
+var PopoverArrow = styled.svg.withConfig({
   displayName: "Popover__PopoverArrow",
   componentId: "sc-b7p1is-3"
-})(_ref4 => {
-  let {
-    theme
-  } = _ref4;
+})(function (_ref4) {
+  var theme = _ref4.theme;
   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,
-    style,
-    open,
-    onClose,
-    ...rest
-  } = _ref5;
-  const arrowRef = useRef(null);
-  const {
-    x,
-    y,
-    reference,
-    floating,
-    refs,
-    update,
-    strategy,
-    context,
-    middlewareData: {
-      arrow: {
-        x: arrowX,
-        y: arrowY
-      } = {}
-    },
-    placement: finalPlacement
-  } = useFloating({
-    placement,
-    open,
+var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
+  var children = _ref5.children,
+      _ref5$placement = _ref5.placement,
+      placement = _ref5$placement === void 0 ? 'bottom' : _ref5$placement,
+      anchorEl = _ref5.anchorEl,
+      style = _ref5.style,
+      open = _ref5.open,
+      onClose = _ref5.onClose,
+      rest = _objectWithoutProperties(_ref5, _excluded);
+
+  var arrowRef = useRef(null);
+
+  var _useFloating = useFloating({
+    placement: placement,
+    open: open,
     onOpenChange: onClose,
     middleware: [offset(14), flip(), shift({
       padding: 8
     }), arrow({
       element: arrowRef
     })]
-  });
-  useLayoutEffect(() => {
+  }),
+      x = _useFloating.x,
+      y = _useFloating.y,
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      refs = _useFloating.refs,
+      update = _useFloating.update,
+      strategy = _useFloating.strategy,
+      context = _useFloating.context,
+      _useFloating$middlewa = _useFloating.middlewareData.arrow;
+
+  _useFloating$middlewa = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa;
+  var arrowX = _useFloating$middlewa.x,
+      arrowY = _useFloating$middlewa.y,
+      finalPlacement = _useFloating.placement;
+  useLayoutEffect(function () {
     reference(anchorEl);
   }, [anchorEl, reference]);
-  const popoverRef = useMemo(() => mergeRefs(floating, ref), [floating, ref]);
-  useEffect(() => {
+  var popoverRef = useMemo(function () {
+    return mergeRefs(floating, ref);
+  }, [floating, ref]);
+  useEffect(function () {
     if (refs.reference.current && refs.floating.current && open) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, open]);
-  const {
-    getFloatingProps
-  } = useInteractions([useDismiss(context)]);
-  const staticSide = {
+
+  var _useInteractions = useInteractions([useDismiss(context)]),
+      getFloatingProps = _useInteractions.getFloatingProps;
+
+  var staticSide = {
     top: 'bottom',
     right: 'left',
     bottom: 'top',
     left: 'right'
   }[finalPlacement.split('-')[0]];
-  let arrowTransform = 'none';
+  var arrowTransform = 'none';
 
   switch (staticSide) {
     case 'right':
@@ -122,39 +120,38 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
   }
 
   if (arrowRef.current) {
-    Object.assign(arrowRef.current.style, {
-      left: arrowX != null ? `${arrowX}px` : '',
-      top: arrowY != null ? `${arrowY}px` : '',
+    var _Object$assign;
+
+    Object.assign(arrowRef.current.style, (_Object$assign = {
+      left: arrowX != null ? "".concat(arrowX, "px") : '',
+      top: arrowY != null ? "".concat(arrowY, "px") : '',
       right: '',
-      bottom: '',
-      [staticSide]: '-6px',
-      transform: arrowTransform
-    });
+      bottom: ''
+    }, _defineProperty(_Object$assign, staticSide, '-6px'), _defineProperty(_Object$assign, "transform", arrowTransform), _Object$assign));
   }
 
-  const props = {
-    open,
-    ...rest
-  };
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+  var props = _objectSpread({
+    open: open
+  }, rest);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, popover);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(PopoverPaper, {
-      elevation: "overlay",
-      ...props,
-      ...getFloatingProps({
-        ref: popoverRef,
-        style: { ...style,
-          position: strategy,
-          top: y || 0,
-          left: x || 0
-        }
-      }),
+    children: /*#__PURE__*/jsxs(PopoverPaper, _objectSpread(_objectSpread(_objectSpread({
+      elevation: "overlay"
+    }, props), getFloatingProps({
+      ref: popoverRef,
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      })
+    })), {}, {
       children: [/*#__PURE__*/jsx(ArrowWrapper, {
         ref: arrowRef,
         className: "arrow",
@@ -167,7 +164,7 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
       }), /*#__PURE__*/jsx(InnerWrapper, {
         children: children
       })]
-    })
+    }))
   });
 });
 

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

@@ -1,32 +1,13 @@
 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,
+var header = tokens.typography.ui.accordion_header,
+    background = tokens.colors.ui.background__default.rgba,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    spacingMedium = _tokens$spacings$comf.medium,
+    spacingSmall = _tokens$spacings$comf.small,
+    borderRadius = tokens.shape.corners.borderRadius;
+var popover = {
+  background: background,
   typography: header,
   maxWidth: '560px',
   maxHeight: '80vh',

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

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

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

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

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

@@ -1,36 +1,37 @@
+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 { jsxs, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 
-const StyledPopoverHeader = styled.div.withConfig({
+var _excluded = ["children"];
+var StyledPopoverHeader = styled.div.withConfig({
   displayName: "PopoverHeader__StyledPopoverHeader",
   componentId: "sc-ibcx7p-0"
-})(_ref => {
-  let {
-    theme
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme;
   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({
+var 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,
+var PopoverHeader = /*#__PURE__*/forwardRef(function PopoverHeader(_ref2, ref) {
+  var children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref
+  });
+
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsx(StyledPopoverHeader, {
       children: children
     }), /*#__PURE__*/jsx(StyledDivider, {
       variant: "small"
     })]
-  });
+  }));
 });
 
 export { PopoverHeader };