@equinor/eds-core-react 0.18.0-envis.2 → 0.19.0-dev.20220405

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

@@ -56,6 +56,11 @@ const {
     rounded: {
       borderRadius
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens$1;
 const enabled = {
@@ -88,11 +93,11 @@ const enabled = {
     },
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth,
         color: focusOutlineColor,
         style: 'dashed',
         type: 'outline',
-        offset: '2px'
+        offset: '3px'
       }
     },
     active: {

package/dist/esm/components/Chip/Icon.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { close } from '@equinor/eds-icons';
 import { Icon as Icon$1 } from '../Icon/index.js';
 import * as Chip_tokens from './Chip.tokens.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
+import { bordersTemplate } from '@equinor/eds-utils';
 
 Icon$1.add({
   close
@@ -14,9 +14,11 @@ const {
 const Icon = styled(Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
-})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), ({
-  variant
-}) => {
+})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), _ref => {
+  let {
+    variant
+  } = _ref;
+
   switch (variant) {
     case 'error':
       return css(["background:", ";svg{fill:", ";}"], error.entities.icon.background, error.entities.icon.typography.color);
@@ -24,8 +26,11 @@ const Icon = styled(Icon$1).withConfig({
     default:
       return css(["background:", ";svg{fill:", ";}"], enabled.entities.icon.states.hover.background, enabled.states.hover.typography.color);
   }
-}, ({
-  disabled
-}) => disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]));
+}, _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]);
+});
 
 export { Icon };

package/dist/esm/components/Dialog/Dialog.js

@@ -1,12 +1,12 @@
 import { forwardRef } from 'react';
+import { createPortal } from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
+import { typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
 import { dialog } from './Dialog.tokens.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
-import { bordersTemplate } from '../../utils/templates/borders.js';
+import { Scrim } from '../Scrim/Scrim.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledDialog = styled(Paper).attrs({
   tabIndex: 0,
@@ -17,29 +17,53 @@ const StyledDialog = styled(Paper).attrs({
 }).withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-1mewo3f-0"
-})(({
-  theme
-}) => {
-  return css(["width:", ";background:", ";display:grid;", " ", " ", ""], theme.width, theme.background, typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), bordersTemplate(theme.border));
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", " ", " grid-gap:", ";"], theme.width, theme.background, typographyTemplate(theme.typography), bordersTemplate(theme.border), theme.spacings.bottom);
 });
-const Dialog = /*#__PURE__*/forwardRef(function Dialog({
-  children,
-  ...props
-}, ref) {
+const Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref2, ref) {
+  let {
+    children,
+    open,
+    onClose,
+    isDismissable = false,
+    ...props
+  } = _ref2;
+  const rest = { ...props,
+    open,
+    ref
+  };
   const {
     density
   } = useEds();
   const token = useToken({
     density
   }, dialog);
-  return /*#__PURE__*/jsx(ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsx(StyledDialog, {
-      elevation: "above_scrim",
-      ...props,
-      ref: ref,
-      children: children
-    })
+
+  const handleDismiss = () => {
+    onClose && onClose();
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ThemeProvider, {
+      theme: token,
+      children: /*#__PURE__*/jsx(Scrim, {
+        open: true,
+        isDismissable: isDismissable,
+        onClose: handleDismiss,
+        children: /*#__PURE__*/jsx(StyledDialog, {
+          elevation: "above_scrim",
+          ...rest,
+          children: children
+        })
+      })
+    }), document.body)
   });
 }); // Dialog.displayName = 'EdsDialog'
 

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

@@ -36,22 +36,17 @@ const dialog = {
     radius: borderRadius
   },
   spacings: {
-    top: spacingMedium
+    bottom: spacingMedium
   },
   entities: {
     children: {
       spacings: {
-        top: '0px',
-        bottom: '0px',
+        top: spacingMedium,
+        bottom: spacingMedium,
         left: spacingMedium,
         right: spacingMedium
       }
     },
-    divider: {
-      spacings: {
-        bottom: spacingMedium
-      }
-    },
     title: {
       minHeight: '24px',
       typography: accordion_header
@@ -59,10 +54,7 @@ const dialog = {
     content: {
       minHeight: '80px',
       height: '104px',
-      typography: body_long,
-      spacings: {
-        bottom: spacingMedium
-      }
+      typography: body_long
     },
     actions: {
       minHeight: '48px'

package/dist/esm/components/Dialog/DialogActions.js

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledDialogActions = styled.div.withConfig({
+  displayName: "DialogActions__StyledDialogActions",
+  componentId: "sc-16ydtxd-0"
+})(_ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  return css(["align-self:end;justify-self:start;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, !children && css(["min-height:initial;height:'8px';"]));
+});
+const DialogActions = /*#__PURE__*/forwardRef(function DialogActions(_ref2, ref) {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/jsx(StyledDialogActions, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // Actions.displayName = 'EdsDialogActions'
+
+export { DialogActions };

package/dist/esm/components/Dialog/DialogContent.js

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledDialogContent = styled.div.withConfig({
+  displayName: "DialogContent__StyledDialogContent",
+  componentId: "sc-1tze18k-0"
+})(_ref => {
+  let {
+    theme,
+    scrollable
+  } = _ref;
+  return css(["", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+});
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "DialogContent__StyledDivider",
+  componentId: "sc-1tze18k-1"
+})(["width:100%;margin-bottom:0;"]);
+const DialogContent = /*#__PURE__*/forwardRef(function DialogContent(_ref2, ref) {
+  let {
+    children,
+    scrollable = false,
+    ...rest
+  } = _ref2;
+  const props = {
+    scrollable,
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledDialogContent, {
+      id: "eds-dialog-customcontent",
+      ...props,
+      children: children
+    }), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
+      color: "medium",
+      variant: "small"
+    })]
+  });
+});
+
+export { DialogContent };

package/dist/esm/components/Dialog/DialogHeader.js

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledDialogHeader = styled.div.withConfig({
+  displayName: "DialogHeader__StyledDialogHeader",
+  componentId: "sc-mbwcos-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["display:flex;justify-content:space-betweene;algin-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
+});
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "DialogHeader__StyledDivider",
+  componentId: "sc-mbwcos-1"
+})(["margin-bottom:0;"]);
+const DialogHeader = /*#__PURE__*/forwardRef(function DialogHeader(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsxs("div", { ...props,
+    children: [/*#__PURE__*/jsx(StyledDialogHeader, {
+      children: children
+    }), /*#__PURE__*/jsx(StyledDivider, {
+      variant: "small",
+      color: "medium"
+    })]
+  });
+});
+
+export { DialogHeader };

package/dist/esm/components/Dialog/DialogTitle.js

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const StyledDialogTitle = styled.div.withConfig({
+  displayName: "DialogTitle__StyledDialogTitle",
+  componentId: "sc-1t3jljt-0"
+})(_ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  return css(["", " min-height:", ";align-self:end;justify-self:start;margin-right:", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, theme.entities.children.spacings.right, !children && css(["min-height:initial;height:'8px';"]));
+});
+const DialogTitle = /*#__PURE__*/forwardRef(function DialogTitle(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx(StyledDialogTitle, {
+      id: "eds-dialog-title",
+      ref: ref,
+      ...rest,
+      children: children
+    })
+  });
+});
+
+export { DialogTitle };

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

@@ -1,14 +1,18 @@
 import { Dialog as Dialog$1 } from './Dialog.js';
-import { Actions } from './Actions.js';
-import { Title } from './Title.js';
-import { CustomContent } from './CustomContent.js';
+import { DialogActions } from './DialogActions.js';
+import { DialogTitle } from './DialogTitle.js';
+import { DialogContent } from './DialogContent.js';
+import { DialogHeader } from './DialogHeader.js';
 
 const Dialog = Dialog$1;
-Dialog.Actions = Actions;
-Dialog.Title = Title;
-Dialog.CustomContent = CustomContent;
+Dialog.Actions = DialogActions;
+Dialog.Title = DialogTitle;
+Dialog.CustomContent = DialogContent;
+Dialog.Content = DialogContent;
+Dialog.Header = DialogHeader;
 Dialog.Actions.displayName = 'Dialog.Actions';
 Dialog.Title.displayName = 'Dialog.Title';
-Dialog.CustomContent.displayName = 'Dialog.CustomContent';
+Dialog.Content.displayName = 'Dialog.Content';
+Dialog.Header.displayName = 'Dialog.Header';
 
 export { Dialog };

package/dist/esm/components/Divider/Divider.js

@@ -11,11 +11,12 @@ const StyledDivider = styled.hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
 })(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/forwardRef(function Divider({
-  color = 'medium',
-  variant = 'medium',
-  ...rest
-}, ref) {
+const Divider = /*#__PURE__*/forwardRef(function Divider(_ref, ref) {
+  let {
+    color = 'medium',
+    variant = 'medium',
+    ...rest
+  } = _ref;
   const colorValue = color === 'medium' ? 'mediumColor' : color;
   const props = {
     backgroundColor: divider[colorValue].background,

package/dist/esm/components/EdsProvider/eds.context.js

@@ -5,10 +5,11 @@ const initalState = {
   density: 'comfortable'
 };
 const EdsContext = /*#__PURE__*/createContext(initalState);
-const EdsProvider = ({
-  children,
-  density = 'comfortable'
-}) => {
+const EdsProvider = _ref => {
+  let {
+    children,
+    density = 'comfortable'
+  } = _ref;
   const [state, setState] = useState({ ...initalState,
     density
   });

package/dist/esm/components/Icon/Icon.js

@@ -3,75 +3,106 @@ import styled from 'styled-components';
 import { get } from './library.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const customIcon = icon => ({
-  icon,
-  count: Math.floor(Math.random() * 1000)
-});
+const transform = _ref => {
+  let {
+    rotation
+  } = _ref;
+  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
+};
 
-const transform = ({
-  rotation
-}) => rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
-
-const StyledSvg = styled.svg.attrs(({
-  height,
-  width,
-  fill
-}) => ({
-  name: null,
-  xmlns: 'http://www.w3.org/2000/svg',
-  height: "".concat(height, "px"),
-  width: "".concat(width, "px"),
-  fill
-})).withConfig({
+const StyledSvg = styled.svg.attrs(_ref2 => {
+  let {
+    height,
+    width,
+    fill
+  } = _ref2;
+  return {
+    name: null,
+    xmlns: 'http://www.w3.org/2000/svg',
+    height: "".concat(height, "px"),
+    width: "".concat(width, "px"),
+    fill
+  };
+}).withConfig({
   displayName: "Icon__StyledSvg",
   componentId: "sc-6evbi1-0"
 })(["", ""], transform);
-const StyledPath = styled.path.attrs(({
-  height,
-  size
-}) => ({
-  size: null,
-  fillRule: 'evenodd',
-  clipRule: 'evenodd',
-  transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
-})).withConfig({
+const StyledPath = styled.path.attrs(_ref3 => {
+  let {
+    height,
+    size
+  } = _ref3;
+  return {
+    size: null,
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+  };
+}).withConfig({
   displayName: "Icon__StyledPath",
   componentId: "sc-6evbi1-1"
 })([""]);
-const Icon = /*#__PURE__*/forwardRef(function Icon({
-  size = 24,
-  color = 'currentColor',
-  name,
-  className,
-  rotation,
-  title,
-  data,
-  ...rest
-}, ref) {
-  const {
+
+const customIcon = icon => ({
+  icon,
+  count: Math.floor(Math.random() * 1000)
+});
+
+const findIcon = (name, data, size) => {
+  // eslint-disable-next-line prefer-const
+  let {
     icon,
     count
   } = data ? customIcon(data) : get(name);
 
+  if (size < 24) {
+    var _icon$sizes;
+
+    // fallback to normal icon if small is not made yet
+    icon = ((_icon$sizes = icon.sizes) === null || _icon$sizes === void 0 ? void 0 : _icon$sizes.small) || icon;
+  }
+
+  return {
+    icon,
+    count
+  };
+};
+
+const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
+  let {
+    size = 24,
+    color = 'currentColor',
+    name,
+    rotation,
+    title,
+    data,
+    ...rest
+  } = _ref4;
+  // eslint-disable-next-line prefer-const
+  const {
+    icon,
+    count
+  } = findIcon(name, data, size);
+
   if (typeof icon === 'undefined') {
     throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
   }
 
+  const height = size ? size : parseInt(icon.width);
+  const width = size ? size : parseInt(icon.height);
   let svgProps = {
-    height: size,
-    width: size,
+    height,
+    width,
     fill: color,
-    viewBox: "0 0 ".concat(size, " ").concat(size),
-    className,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
     rotation,
     name,
-    'aria-hidden': true,
-    title: null
+    'aria-hidden': true
   };
   const pathProps = {
     d: icon.svgPathData,
     height: icon.height ? icon.height : size,
-    size
+    size: size || icon.height
   }; // Accessibility
 
   let titleId = '';

package/dist/esm/components/Input/Input.js

@@ -1,18 +1,17 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { inputToken } from './Input.tokens.js';
+import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
-import { outlineTemplate } from '../../utils/templates/focus.js';
-import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { useToken } from '../../hooks/useToken.js';
 
 const StyledInput = styled.input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "sc-1ykv024-0"
-})(({
-  theme
-}) => {
+})(_ref => {
+  let {
+    theme
+  } = _ref;
   const {
     states: {
       focus: {
@@ -28,12 +27,13 @@ const StyledInput = styled.input.withConfig({
   } = theme;
   return css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
 });
-const Input = /*#__PURE__*/forwardRef(function Input({
-  variant = 'default',
-  disabled = false,
-  type = 'text',
-  ...other
-}, ref) {
+const Input = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
+  let {
+    variant = 'default',
+    disabled = false,
+    type = 'text',
+    ...other
+  } = _ref2;
   const actualVariant = variant === 'default' ? 'input' : variant;
   const inputVariant = inputToken[actualVariant];
   const {

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

@@ -1,5 +1,5 @@
 import { tokens as tokens$1 } from '@equinor/eds-tokens';
-import mergeDeepRight_1 from '../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   colors: {
@@ -93,7 +93,7 @@ const input = {
     }
   }
 };
-const error = mergeDeepRight_1(input, {
+const error = mergeDeepRight(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -116,7 +116,7 @@ const error = mergeDeepRight_1(input, {
     }
   }
 });
-const warning = mergeDeepRight_1(input, {
+const warning = mergeDeepRight(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {
@@ -139,7 +139,7 @@ const warning = mergeDeepRight_1(input, {
     }
   }
 });
-const success = mergeDeepRight_1(input, {
+const success = mergeDeepRight(input, {
   boxShadow: 'inset 0px -1px 0px 0px transparent',
   states: {
     active: {

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

@@ -1,15 +1,18 @@
 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';
-import { typographyTemplate } from '../../utils/templates/index.js';
 
 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, ({
-  disabledText
-}) => disabledText ? label.states.disabled.typography.color : label.typography.color);
+})(["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"