@equinor/eds-core-react 0.35.1 → 0.36.0

package/dist/esm/components/SideBar/SideBarToggle.js

@@ -1,6 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends from '@babel/runtime/helpers/extends';
 import { forwardRef } from 'react';
 import { Button } from '../Button/index.js';
 import { Icon } from '../Icon/index.js';
@@ -11,37 +8,54 @@ import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
-var iconColor = sidebar.entities.toggleOpen.typography.color;
-var ToggleContainer = styled.div.withConfig({
+const {
+  entities: {
+    toggleOpen: {
+      typography: {
+        color: iconColor
+      }
+    }
+  }
+} = sidebar;
+const ToggleContainer = styled.div.withConfig({
   displayName: "SideBarToggle__ToggleContainer",
   componentId: "sc-1w5e44y-0"
-})(function (_ref) {
-  var theme = _ref.theme;
-  var minWidth = theme.minWidth,
-    _theme$entities$toggl = theme.entities.toggleOpen.spacings,
-    top = _theme$entities$toggl.top,
-    bottom = _theme$entities$toggl.bottom;
+})(({
+  theme
+}) => {
+  const {
+    minWidth,
+    entities: {
+      toggleOpen: {
+        spacings: {
+          top,
+          bottom
+        }
+      }
+    }
+  } = theme;
   return css(["width:", ";display:grid;place-items:center;margin-block-start:", ";margin-block-end:", ";"], minWidth, top, bottom);
 });
-var SideBarToggle = /*#__PURE__*/forwardRef(function SideBarToggle(_ref2, ref) {
-  var rest = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-  var _useSideBar = useSideBar(),
-    isOpen = _useSideBar.isOpen,
-    setIsOpen = _useSideBar.setIsOpen;
-  return /*#__PURE__*/jsx(ToggleContainer, _objectSpread(_objectSpread({
-    open: isOpen
-  }, props), {}, {
+const SideBarToggle = /*#__PURE__*/forwardRef(function SideBarToggle({
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref
+  };
+  const {
+    isOpen,
+    setIsOpen
+  } = useSideBar();
+  return /*#__PURE__*/jsx(ToggleContainer, {
+    open: isOpen,
+    ...props,
     children: /*#__PURE__*/jsx(Tooltip, {
       title: isOpen ? 'Collapse' : 'Expand',
       placement: "right",
       children: /*#__PURE__*/jsx(Button, {
         variant: "ghost_icon",
-        onClick: function onClick() {
-          return setIsOpen(!isOpen);
-        },
+        onClick: () => setIsOpen(!isOpen),
         "aria-label": isOpen ? 'Collapse' : 'Expand',
         children: /*#__PURE__*/jsx(Icon, {
           size: 24,
@@ -50,7 +64,7 @@ var SideBarToggle = /*#__PURE__*/forwardRef(function SideBarToggle(_ref2, ref) {
         })
       })
     })
-  }));
+  });
 });
 
 export { SideBarToggle };

package/dist/esm/components/SideBar/SidebarLink/index.js

@@ -1,5 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import { sidebar } from '../SideBar.tokens.js';
 import { bordersTemplate, outlineTemplate } from '@equinor/eds-utils';
@@ -10,65 +8,106 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../../Typography/Typography.js';
 import { Tooltip as Tooltip$1 } from '../../Tooltip/Tooltip.js';
 
-var _excluded = ["icon", "label", "active", "onClick", "as"];
-var _tokens$entities$side = sidebar.entities.sidebarItem,
-  itemTextColor = _tokens$entities$side.typography.color,
-  iconActive = _tokens$entities$side.states.active.typography.color;
-var Container = styled.a.withConfig({
+const {
+  entities: {
+    sidebarItem: {
+      typography: {
+        color: itemTextColor
+      },
+      states: {
+        active: {
+          typography: {
+            color: iconActive
+          }
+        }
+      }
+    }
+  }
+} = sidebar;
+const Container = styled.a.withConfig({
   displayName: "SidebarLink__Container",
   componentId: "sc-gbehcj-0"
-})(function (_ref) {
-  var theme = _ref.theme,
-    $active = _ref.$active;
-  var minWidth = theme.minWidth,
-    _theme$entities$sideb = theme.entities.sidebarItem,
-    minHeight = _theme$entities$sideb.minHeight,
-    border = _theme$entities$sideb.border,
-    _theme$entities$sideb2 = _theme$entities$sideb.states,
-    menuActiveBackground = _theme$entities$sideb2.active.background,
-    menuHoverBackground = _theme$entities$sideb2.hover.background,
-    focus = _theme$entities$sideb2.focus,
-    _theme$entities$sideb3 = _theme$entities$sideb2.disabled,
-    menuDisabledBackground = _theme$entities$sideb3.background,
-    menuDisabledText = _theme$entities$sideb3.typography.color;
+})(({
+  theme,
+  $active
+}) => {
+  const {
+    minWidth,
+    entities: {
+      sidebarItem: {
+        minHeight,
+        border,
+        states: {
+          active: {
+            background: menuActiveBackground
+          },
+          hover: {
+            background: menuHoverBackground
+          },
+          focus,
+          disabled: {
+            background: menuDisabledBackground,
+            typography: {
+              color: menuDisabledText
+            }
+          }
+        }
+      }
+    }
+  } = theme;
   return css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;width:100%;padding:0;place-items:center;border:0;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";cursor:not-allowed;& > p{color:", ";}& > svg{fill:", ";}}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'transparent', minWidth, bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, menuDisabledText, menuDisabledText, outlineTemplate(focus.outline));
 });
-var ItemText = styled(Typography).withConfig({
+const ItemText = styled(Typography).withConfig({
   displayName: "SidebarLink__ItemText",
   componentId: "sc-gbehcj-1"
-})(function (_ref2) {
-  var theme = _ref2.theme,
-    $active = _ref2.$active;
-  var _theme$entities$sideb4 = theme.entities.sidebarItem,
-    itemTextColor = _theme$entities$sideb4.typography.color,
-    itemActiveTextColor = _theme$entities$sideb4.states.active.typography.color;
+})(({
+  theme,
+  $active
+}) => {
+  const {
+    entities: {
+      sidebarItem: {
+        typography: {
+          color: itemTextColor
+        },
+        states: {
+          active: {
+            typography: {
+              color: itemActiveTextColor
+            }
+          }
+        }
+      }
+    }
+  } = theme;
   return css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $active ? itemActiveTextColor : itemTextColor);
 });
-var Tooltip = styled(Tooltip$1).withConfig({
+const Tooltip = styled(Tooltip$1).withConfig({
   displayName: "SidebarLink__Tooltip",
   componentId: "sc-gbehcj-2"
 })(["text-transform:capitalize;"]);
-var SidebarLink = /*#__PURE__*/forwardRef(function SidebarLink(_ref3, ref) {
-  var icon = _ref3.icon,
-    label = _ref3.label,
-    active = _ref3.active,
-    onClick = _ref3.onClick,
-    _ref3$as = _ref3.as,
-    as = _ref3$as === void 0 ? 'a' : _ref3$as,
-    rest = _objectWithoutProperties(_ref3, _excluded);
-  var _useSideBar = useSideBar(),
-    isOpen = _useSideBar.isOpen;
-  var getIconColor = function getIconColor() {
+const SidebarLink = /*#__PURE__*/forwardRef(function SidebarLink({
+  icon,
+  label,
+  active,
+  onClick,
+  as = 'a',
+  ...rest
+}, ref) {
+  const {
+    isOpen
+  } = useSideBar();
+  const getIconColor = () => {
     return active ? iconActive : itemTextColor;
   };
   if (isOpen) {
-    return /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({
+    return /*#__PURE__*/jsxs(Container, {
       as: as,
       tabIndex: 0,
       $active: active,
       onClick: onClick,
-      ref: ref
-    }, rest), {}, {
+      ref: ref,
+      ...rest,
       children: [icon && /*#__PURE__*/jsx(Icon, {
         data: icon,
         color: getIconColor()
@@ -78,23 +117,23 @@ var SidebarLink = /*#__PURE__*/forwardRef(function SidebarLink(_ref3, ref) {
         $active: active,
         children: label
       })]
-    }));
+    });
   }
   return /*#__PURE__*/jsx(Tooltip, {
     title: label,
     placement: "right",
-    children: /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({
+    children: /*#__PURE__*/jsx(Container, {
       tabIndex: 0,
       as: as,
       $active: active,
       onClick: onClick,
-      ref: ref
-    }, rest), {}, {
+      ref: ref,
+      ...rest,
       children: icon && /*#__PURE__*/jsx(Icon, {
         data: icon,
         color: getIconColor()
       })
-    }))
+    })
   });
 });
 SidebarLink.displayName = 'SidebarLink';

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

@@ -7,7 +7,7 @@ import { SideBarButton } from './SideBarButton/index.js';
 import { SideBarAccordion } from './SideBarAccordion/index.js';
 import { SideBarAccordionItem } from './SideBarAccordionItem/index.js';
 
-var SideBar = SideBar$1;
+const SideBar = SideBar$1;
 SideBar.Link = SidebarLink;
 SideBar.Content = SideBarContent;
 SideBar.Footer = SideBarFooter;

package/dist/esm/components/SideSheet/SideSheet.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 from 'styled-components';
 import { clear } from '@equinor/eds-icons';
@@ -10,36 +8,38 @@ import { variants, comfortable } from './SideSheet.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-var _excluded = ["variant", "width", "title", "children", "open", "onClose"];
-var background = comfortable.background,
-  spacings = comfortable.spacings,
-  border = comfortable.border,
-  typography = comfortable.typography;
-var StyledSideSheet = styled.div.withConfig({
+const {
+  background,
+  spacings,
+  border,
+  typography
+} = comfortable;
+const StyledSideSheet = styled.div.withConfig({
   displayName: "SideSheet__StyledSideSheet",
   componentId: "sc-wkzlnn-0"
-})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background, function (_ref) {
-  var width = _ref.width;
-  return width;
-}, bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography));
-var Header = styled.div.withConfig({
+})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background, ({
+  width
+}) => width, bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography));
+const Header = styled.div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
 })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;}"]);
-var SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
-  var _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
-    width = _ref2.width,
-    title = _ref2.title,
-    children = _ref2.children,
-    open = _ref2.open,
-    onClose = _ref2.onClose,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref,
+const SideSheet = /*#__PURE__*/forwardRef(function SideSheet({
+  variant = 'medium',
+  width,
+  title,
+  children,
+  open,
+  onClose,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref,
     width: width || variants[variant]
-  });
-  return open && /*#__PURE__*/jsxs(StyledSideSheet, _objectSpread(_objectSpread({}, props), {}, {
+  };
+  return open && /*#__PURE__*/jsxs(StyledSideSheet, {
+    ...props,
     children: [(title || onClose) && /*#__PURE__*/jsxs(Header, {
       children: [title && /*#__PURE__*/jsx(Typography, {
         variant: "h2",
@@ -55,7 +55,7 @@ var SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
         })
       })]
     }), children]
-  }));
+  });
 });
 
 export { SideSheet };

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

@@ -1,15 +1,30 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors$ui = tokens.colors.ui,
-  background = _tokens$colors$ui.background__default.rgba,
-  borderColor = _tokens$colors$ui.background__light.rgba,
-  _tokens$spacings$comf = tokens.spacings.comfortable,
-  spacingXXS = _tokens$spacings$comf.xx_small,
-  spacingMedium = _tokens$spacings$comf.medium,
-  body_short = tokens.typography.paragraph.body_short;
-var comfortable = {
-  background: background,
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      },
+      background__light: {
+        rgba: borderColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      xx_small: spacingXXS,
+      medium: spacingMedium
+    }
+  },
+  typography: {
+    paragraph: {
+      body_short
+    }
+  }
+} = tokens;
+const comfortable = {
+  background,
   spacings: {
     left: '14px',
     // padding left is 14px, because of border-left 'steals' 2px of the padding
@@ -24,9 +39,11 @@ var comfortable = {
       style: 'solid'
     }
   },
-  typography: _objectSpread({}, body_short)
+  typography: {
+    ...body_short
+  }
 };
-var variants = {
+const variants = {
   small: '240px',
   medium: '320px',
   large: '480px',

package/dist/esm/components/Slider/MinMax.js

@@ -4,15 +4,19 @@ import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _tokens$entities = slider.entities,
-  track = _tokens$entities.track,
-  output = _tokens$entities.output;
-var StyledMinMax = styled.span.withConfig({
+const {
+  entities: {
+    track,
+    output
+  }
+} = slider;
+const StyledMinMax = styled.span.withConfig({
   displayName: "MinMax__StyledMinMax",
   componentId: "sc-lxmlid-0"
 })(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], typographyTemplate(output.typography), track.spacings.top);
-var MinMax = /*#__PURE__*/forwardRef(function MinMax(_ref, ref) {
-  var children = _ref.children;
+const MinMax = /*#__PURE__*/forwardRef(function MinMax({
+  children
+}, ref) {
   return /*#__PURE__*/jsx(StyledMinMax, {
     ref: ref,
     children: children

package/dist/esm/components/Slider/Output.js

@@ -2,32 +2,29 @@ import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { typographyTemplate } from '@equinor/eds-utils';
 import { slider } from './Slider.tokens.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
-var output = slider.entities.output;
-var StyledOutput = styled.output.withConfig({
+const {
+  entities: {
+    output
+  }
+} = slider;
+const StyledOutput = styled.output.withConfig({
   displayName: "Output__StyledOutput",
   componentId: "sc-1dy945x-0"
-})(["--realWidth:calc(100% - 12px);--background:rgb(0 0 0 / 0.8);width:fit-content;position:absolute;display:flex;align-items:center;border-radius:4px;z-index:1;", ";color:white;background:var(--background);padding:4px 8px;bottom:calc(100% + 8px);pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;opacity:var(--showTooltip);"], typographyTemplate(output.typography));
-var TooltipArrow = styled.svg.withConfig({
-  displayName: "Output__TooltipArrow",
-  componentId: "sc-1dy945x-1"
-})(["width:6px;height:8px;position:absolute;fill:var(--background);top:calc(100% - 1px);rotate:-90deg;translate:-50%;left:50%;"]);
-var Output = /*#__PURE__*/forwardRef(function Output(_ref, ref) {
-  var children = _ref.children,
-    value = _ref.value,
-    htmlFor = _ref.htmlFor;
-  return /*#__PURE__*/jsxs(StyledOutput, {
+})(["--realWidth:calc(100% - 12px);--background:var(--tooltip-background,", ");width:fit-content;position:absolute;display:flex;align-items:center;border-radius:4px;z-index:1;", ";color:white;background:var(--background);padding:4px 4px 2px 4px;bottom:calc(100% + 1px);pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;opacity:var(--showTooltip);[data-disabled] &{background:", ";color:", ";}"], output.background, typographyTemplate(output.typography), output.states.disabled.background, output.states.disabled.typography.color);
+const Output = /*#__PURE__*/forwardRef(function Output({
+  children,
+  value,
+  htmlFor
+}, ref) {
+  return /*#__PURE__*/jsx(StyledOutput, {
     ref: ref,
     style: {
       '--val': value
     },
     htmlFor: htmlFor,
-    children: [children, /*#__PURE__*/jsx(TooltipArrow, {
-      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"
-      })
-    })]
+    children: children
   });
 });