@equinor/eds-core-react 0.24.0-dev.20221007 → 0.25.0

package/dist/esm/components/InputWrapper/HelperText/HelperText.js

@@ -0,0 +1,49 @@
+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 { typographyMixin } from '@equinor/eds-utils';
+import { helperText } from './HelperText.token.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["text", "icon", "color"];
+var Container = styled.div.withConfig({
+  displayName: "HelperText__Container",
+  componentId: "sc-189ug61-0"
+})(function (_ref) {
+  var color = _ref.color;
+  return css({
+    display: 'grid',
+    gap: '8px',
+    gridAutoFlow: 'column',
+    alignItems: 'start',
+    justifyContent: 'start',
+    color: color
+  });
+});
+var Text = styled.p.withConfig({
+  displayName: "HelperText__Text",
+  componentId: "sc-189ug61-1"
+})(["margin:0;", ";"], typographyMixin(helperText.typography));
+var TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText(_ref2, ref) {
+  var text = _ref2.text,
+      icon = _ref2.icon,
+      _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? helperText.typography.color : _ref2$color,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  if (!text) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, rest), {}, {
+    color: color,
+    ref: ref
+  })), {}, {
+    children: [icon, /*#__PURE__*/jsx(Text, {
+      children: text
+    })]
+  }));
+});
+
+export { TextfieldHelperText as HelperText };

package/dist/esm/components/InputWrapper/HelperText/HelperText.token.js

@@ -0,0 +1,28 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { tokens } from '@equinor/eds-tokens';
+
+var colors = tokens.colors,
+    comfortable = tokens.spacings.comfortable,
+    typography = tokens.typography;
+var helperText = {
+  background: colors.ui.background__light.hex,
+  typography: _objectSpread(_objectSpread({}, typography.input.helper), {}, {
+    color: colors.text.static_icons__tertiary.rgba
+  }),
+  spacings: {
+    comfortable: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: comfortable.small,
+      bottom: '6px'
+    },
+    compact: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: comfortable.xx_small,
+      bottom: '6px'
+    }
+  }
+};
+
+export { helperText };

package/dist/esm/components/InputWrapper/InputWrapper.js

@@ -0,0 +1,68 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef, useCallback } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { useToken } from '@equinor/eds-utils';
+import { inputToken } from './InputWrapper.tokens.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
+import { Label as Label$1 } from '../Label/Label.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+var _excluded = ["children", "color", "label", "labelProps", "helperProps", "helperIcon"];
+var Container = styled.div.withConfig({
+  displayName: "InputWrapper__Container",
+  componentId: "sc-v6o9z1-0"
+})([""]);
+var HelperText = styled(TextfieldHelperText).withConfig({
+  displayName: "InputWrapper__HelperText",
+  componentId: "sc-v6o9z1-1"
+})(["margin-top:8px;margin-left:8px;"]);
+var Label = styled(Label$1).withConfig({
+  displayName: "InputWrapper__Label",
+  componentId: "sc-v6o9z1-2"
+})(["margin-left:8px;margin-right:8px;"]);
+
+/** InputWrapper is a internal skeleton component for structuring input elements  */
+var InputWrapper = /*#__PURE__*/forwardRef(function InputWrapper(_ref, ref) {
+  var children = _ref.children,
+      color = _ref.color,
+      label = _ref.label,
+      _ref$labelProps = _ref.labelProps,
+      labelProps = _ref$labelProps === void 0 ? {} : _ref$labelProps,
+      _ref$helperProps = _ref.helperProps,
+      helperProps = _ref$helperProps === void 0 ? {} : _ref$helperProps,
+      helperIcon = _ref.helperIcon,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var actualVariant = color || 'input';
+  var inputToken$1 = inputToken[actualVariant];
+  var token = useToken({
+    density: density
+  }, inputToken$1);
+  var helperTextColor = useCallback(function () {
+    var _token = token();
+
+    return other.disabled ? _token.entities.helperText.states.disabled.typography.color : _token.entities.helperText.typography.color;
+  }, [token, other.disabled])();
+  var hasHelperText = Boolean(helperProps === null || helperProps === void 0 ? void 0 : helperProps.text);
+  var hasLabel = Boolean(label || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.label));
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, other), {}, {
+      ref: ref,
+      children: [hasLabel && /*#__PURE__*/jsx(Label, _objectSpread({}, _objectSpread({
+        label: label
+      }, labelProps))), children, hasHelperText && /*#__PURE__*/jsx(HelperText, _objectSpread({
+        color: helperTextColor
+      }, _objectSpread({
+        icon: helperIcon
+      }, helperProps)))]
+    }))
+  });
+});
+
+export { InputWrapper };

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

@@ -0,0 +1,164 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { tokens } from '@equinor/eds-tokens';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
+
+var _tokens$colors = tokens.colors,
+    background = _tokens$colors.ui.background__light.rgba,
+    _tokens$colors$text = _tokens$colors.text,
+    static_icons__default = _tokens$colors$text.static_icons__default,
+    static_icons__tertiary = _tokens$colors$text.static_icons__tertiary,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    disabled__text = _tokens$colors$intera.disabled__text,
+    primary__resting = _tokens$colors$intera.primary__resting,
+    danger__resting = _tokens$colors$intera.danger__resting,
+    danger__hover = _tokens$colors$intera.danger__hover,
+    warning__resting = _tokens$colors$intera.warning__resting,
+    warning__hover = _tokens$colors$intera.warning__hover,
+    success__resting = _tokens$colors$intera.success__resting,
+    success__hover = _tokens$colors$intera.success__hover,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    small = _tokens$spacings$comf.small,
+    x_small = _tokens$spacings$comf.x_small,
+    typography = tokens.typography,
+    shape = tokens.shape;
+var input = {
+  minHeight: shape.straight.minHeight,
+  background: background,
+  spacings: {
+    left: small,
+    right: small,
+    top: '6px',
+    bottom: '6px'
+  },
+  typography: _objectSpread(_objectSpread({}, typography.input.text), {}, {
+    color: static_icons__default.rgba
+  }),
+  entities: {
+    placeholder: {
+      typography: {
+        color: static_icons__tertiary.rgba
+      }
+    },
+    helperText: {
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+        color: static_icons__tertiary.rgba
+      }),
+      states: {
+        disabled: {
+          typography: {
+            color: disabled__text.rgba
+          }
+        }
+      }
+    }
+  },
+  states: {
+    disabled: {
+      typography: {
+        color: disabled__text.rgba
+      }
+    },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none'
+    },
+    active: {
+      outline: {
+        type: 'outline',
+        color: 'transparent',
+        width: '1px',
+        style: 'solid',
+        offset: '0px'
+      }
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: primary__resting.rgba,
+        style: 'solid',
+        offset: '0px'
+      }
+    }
+  },
+  boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
+  modes: {
+    compact: {
+      minHeight: shape._modes.compact.straight.minHeight,
+      spacings: {
+        left: x_small,
+        right: x_small,
+        top: x_small,
+        bottom: x_small
+      }
+    }
+  }
+};
+var error = mergeDeepRight(input, {
+  boxShadow: 'none',
+  outline: {
+    color: danger__resting.rgba
+  },
+  states: {
+    focus: {
+      outline: {
+        color: danger__hover.rgba
+      }
+    }
+  },
+  entities: {
+    helperText: {
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+        color: danger__hover.rgba
+      })
+    }
+  }
+});
+var warning = mergeDeepRight(input, {
+  boxShadow: 'none',
+  outline: {
+    color: warning__resting.rgba
+  },
+  states: {
+    focus: {
+      outline: {
+        color: warning__hover.rgba
+      }
+    }
+  },
+  entities: {
+    helperText: {
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+        color: warning__hover.rgba
+      })
+    }
+  }
+});
+var success = mergeDeepRight(input, {
+  boxShadow: 'none',
+  outline: {
+    color: success__resting.rgba
+  },
+  states: {
+    focus: {
+      outline: {
+        color: success__hover.rgba
+      }
+    }
+  },
+  entities: {
+    helperText: {
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+        color: success__hover.rgba
+      })
+    }
+  }
+});
+var inputToken = {
+  input: input,
+  error: error,
+  warning: warning,
+  success: success
+};
+
+export { error, input, inputToken, success, warning };

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

@@ -3,23 +3,21 @@ 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';
+import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
-import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss } from '@floating-ui/react-dom-interactions';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss, FloatingPortal, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["children", "placement", "anchorEl", "style", "open", "onClose"];
+var _excluded = ["children", "placement", "anchorEl", "style", "open", "onClose", "withinPortal", "trapFocus"];
 var PopoverPaper = styled(Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
 })(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));
+  var theme = _ref.theme;
+  var paper = theme.entities.paper;
+  return css(["", " background:", ";", " z-index:1400;&:focus-visible{", "}"], typographyTemplate(theme.typography), theme.background, bordersTemplate(theme.border), outlineTemplate(paper.states.focus.outline));
 });
 var ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
@@ -50,6 +48,8 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
       style = _ref5.style,
       open = _ref5.open,
       onClose = _ref5.onClose,
+      withinPortal = _ref5.withinPortal,
+      trapFocus = _ref5.trapFocus,
       rest = _objectWithoutProperties(_ref5, _excluded);
 
   var arrowRef = useRef(null);
@@ -62,14 +62,13 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
       padding: 8
     }), arrow({
       element: arrowRef
-    })]
+    })],
+    whileElementsMounted: autoUpdate
   }),
       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;
@@ -84,51 +83,49 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
   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]);
 
   var _useInteractions = useInteractions([useDismiss(context)]),
       getFloatingProps = _useInteractions.getFloatingProps;
 
-  var staticSide = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right'
-  }[finalPlacement.split('-')[0]];
-  var arrowTransform = 'none';
-
-  switch (staticSide) {
-    case 'right':
-      arrowTransform = 'rotateY(180deg)';
-      break;
-
-    case 'left':
-      arrowTransform = 'none';
-      break;
-
-    case 'top':
-      arrowTransform = 'rotate(90deg)';
-      break;
-
-    case 'bottom':
-      arrowTransform = 'rotate(-90deg)';
-      break;
-  }
-
-  if (arrowRef.current) {
-    var _Object$assign;
-
-    Object.assign(arrowRef.current.style, (_Object$assign = {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
-      right: '',
-      bottom: ''
-    }, _defineProperty(_Object$assign, staticSide, '-6px'), _defineProperty(_Object$assign, "transform", arrowTransform), _Object$assign));
-  }
+  useEffect(function () {
+    if (arrowRef.current) {
+      var _Object$assign;
+
+      var staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[finalPlacement.split('-')[0]];
+      var arrowTransform = 'none';
+
+      switch (staticSide) {
+        case 'right':
+          arrowTransform = 'rotateY(180deg)';
+          break;
+
+        case 'left':
+          arrowTransform = 'none';
+          break;
+
+        case 'top':
+          arrowTransform = 'rotate(90deg)';
+          break;
+
+        case 'bottom':
+          arrowTransform = 'rotate(-90deg)';
+          break;
+      }
+
+      Object.assign(arrowRef.current.style, (_Object$assign = {
+        left: arrowX != null ? "".concat(arrowX, "px") : '',
+        top: arrowY != null ? "".concat(arrowY, "px") : '',
+        right: '',
+        bottom: ''
+      }, _defineProperty(_Object$assign, staticSide, '-6px'), _defineProperty(_Object$assign, "transform", arrowTransform), _Object$assign));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [arrowRef.current, arrowX, arrowY, finalPlacement]);
 
   var props = _objectSpread({
     open: open
@@ -140,7 +137,8 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
   var token = useToken({
     density: density
   }, popover);
-  return /*#__PURE__*/jsx(ThemeProvider, {
+
+  var popover$1 = /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(PopoverPaper, _objectSpread(_objectSpread(_objectSpread({
       elevation: "overlay"
@@ -166,6 +164,23 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
       })]
     }))
   });
+
+  return /*#__PURE__*/jsx(Fragment, {
+    children: withinPortal ? /*#__PURE__*/jsx(FloatingPortal, {
+      id: "eds-popover-container",
+      children: open && trapFocus ? open && /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        modal: true,
+        children: popover$1
+      }) : open && popover$1
+    }) : /*#__PURE__*/jsx(Fragment, {
+      children: trapFocus ? open && /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        modal: true,
+        children: popover$1
+      }) : open && popover$1
+    })
+  });
 });
 
 export { Popover };

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

@@ -1,11 +1,14 @@
 import { tokens } from '@equinor/eds-tokens';
 
 var header = tokens.typography.ui.accordion_header,
-    background = tokens.colors.ui.background__default.rgba,
+    _tokens$colors = tokens.colors,
+    background = _tokens$colors.ui.background__default.rgba,
+    focusOutlineColor = _tokens$colors.interactive.focus.rgba,
     _tokens$spacings$comf = tokens.spacings.comfortable,
     spacingMedium = _tokens$spacings$comf.medium,
     spacingSmall = _tokens$spacings$comf.small,
-    borderRadius = tokens.shape.corners.borderRadius;
+    borderRadius = tokens.shape.corners.borderRadius,
+    focusOutlineWidth = tokens.interactions.focused.width;
 var popover = {
   background: background,
   typography: header,
@@ -27,6 +30,18 @@ var popover = {
       spacings: {
         top: '12px'
       }
+    },
+    paper: {
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            width: focusOutlineWidth,
+            style: 'dashed',
+            color: focusOutlineColor
+          }
+        }
+      }
     }
   },
   spacings: {