@equinor/eds-core-react 0.35.0 → 0.36.0

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

@@ -1,6 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { outlineTemplate, spacingsTemplate, typographyMixin, useToken } from '@equinor/eds-utils';
@@ -8,130 +5,134 @@ import { inputToken } from './Input.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["variant", "disabled", "type", "leftAdornments", "rightAdornments", "readOnly", "className", "style", "leftAdornmentsProps", "rightAdornmentsProps", "leftAdornmentsWidth", "rightAdornmentsWidth"];
-var Container = styled.div.withConfig({
+const Container = styled.div.withConfig({
   displayName: "Input__Container",
   componentId: "sc-1ykv024-0"
-})(function (_ref) {
-  var _entities$adornment;
-  var $token = _ref.$token,
-    disabled = _ref.disabled,
-    readOnly = _ref.readOnly;
-  var states = $token.states,
-    entities = $token.entities;
-  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, $token.typography.color, $token.height, $token.width, $token.boxShadow, $token.background, outlineTemplate($token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 || (_entities$adornment = _entities$adornment.states.focus) === null || _entities$adornment === void 0 ? void 0 : _entities$adornment.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
+})(({
+  $token,
+  disabled,
+  readOnly
+}) => {
+  const {
+    states,
+    entities
+  } = $token;
+  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, $token.typography.color, $token.height, $token.width, $token.boxShadow, $token.background, outlineTemplate($token.outline), entities.adornment?.states.focus?.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));
 });
-var StyledInput = styled.input.withConfig({
+const StyledInput = styled.input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "sc-1ykv024-1"
-})(function (_ref2) {
-  var $token = _ref2.$token,
-    $paddingLeft = _ref2.$paddingLeft,
-    $paddingRight = _ref2.$paddingRight;
+})(({
+  $token,
+  $paddingLeft,
+  $paddingRight
+}) => {
   return css(["width:100%;border:none;background:transparent;", " ", " outline:none;padding-left:", ";padding-right:", ";&::placeholder{color:", ";}&:disabled{color:var(--eds-input-color);cursor:not-allowed;}"], spacingsTemplate($token.spacings), typographyMixin($token.typography), $paddingLeft, $paddingRight, $token.entities.placeholder.typography.color);
 });
-var Adornments = styled.div.withConfig({
+const Adornments = styled.div.withConfig({
   displayName: "Input__Adornments",
   componentId: "sc-1ykv024-2"
-})(function (_ref3) {
-  var $token = _ref3.$token;
+})(({
+  $token
+}) => {
   return css(["position:absolute;top:", ";bottom:", ";display:flex;align-items:center;", " color:var(--eds-input-adornment-color);"], $token.spacings.top, $token.spacings.bottom, typographyMixin($token.entities.adornment.typography));
 });
-var LeftAdornments = styled(Adornments).withConfig({
+const LeftAdornments = styled(Adornments).withConfig({
   displayName: "Input__LeftAdornments",
   componentId: "sc-1ykv024-3"
-})(function (_ref4) {
-  var $token = _ref4.$token;
-  return css(["left:0;padding-left:", ";"], $token.entities.adornment.spacings.left);
-});
-var RightAdornments = styled(Adornments).withConfig({
+})(({
+  $token
+}) => css(["left:0;padding-left:", ";"], $token.entities.adornment.spacings.left));
+const RightAdornments = styled(Adornments).withConfig({
   displayName: "Input__RightAdornments",
   componentId: "sc-1ykv024-4"
-})(function (_ref5) {
-  var $token = _ref5.$token;
-  return css(["right:0;padding-right:", ";"], $token.entities.adornment.spacings.right);
-});
-var Input = /*#__PURE__*/forwardRef(function Input(_ref6, ref) {
-  var variant = _ref6.variant,
-    _ref6$disabled = _ref6.disabled,
-    disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
-    _ref6$type = _ref6.type,
-    type = _ref6$type === void 0 ? 'text' : _ref6$type,
-    leftAdornments = _ref6.leftAdornments,
-    rightAdornments = _ref6.rightAdornments,
-    readOnly = _ref6.readOnly,
-    className = _ref6.className,
-    style = _ref6.style,
-    leftAdornmentsProps = _ref6.leftAdornmentsProps,
-    rightAdornmentsProps = _ref6.rightAdornmentsProps,
-    leftAdornmentsWidth = _ref6.leftAdornmentsWidth,
-    rightAdornmentsWidth = _ref6.rightAdornmentsWidth,
-    other = _objectWithoutProperties(_ref6, _excluded);
-  var inputVariant = inputToken[variant] ? inputToken[variant] : inputToken.input;
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var _token = useToken({
-    density: density
+})(({
+  $token
+}) => css(["right:0;padding-right:", ";"], $token.entities.adornment.spacings.right));
+const Input = /*#__PURE__*/forwardRef(function Input({
+  variant,
+  disabled = false,
+  type = 'text',
+  leftAdornments,
+  rightAdornments,
+  readOnly,
+  className,
+  style,
+  leftAdornmentsProps,
+  rightAdornmentsProps,
+  leftAdornmentsWidth,
+  rightAdornmentsWidth,
+  ...other
+}, ref) {
+  const inputVariant = inputToken[variant] ? inputToken[variant] : inputToken.input;
+  const {
+    density
+  } = useEds();
+  const _token = useToken({
+    density
   }, inputVariant)();
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    rightAdornmentsRef = _useState2[0],
-    setRightAdornmentsRef = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    leftAdornmentsRef = _useState4[0],
-    setLeftAdornmentsRef = _useState4[1];
-  var token = useCallback(function () {
-    var _leftAdornmentsWidth = leftAdornmentsWidth || (leftAdornmentsRef ? leftAdornmentsRef.clientWidth : 0);
-    var _rightAdornmentsWidth = rightAdornmentsWidth || (rightAdornmentsRef ? rightAdornmentsRef.clientWidth : 0);
-    return _objectSpread(_objectSpread({}, _token), {}, {
-      spacings: _objectSpread(_objectSpread({}, _token.spacings), {}, {
-        left: "".concat(_leftAdornmentsWidth + parseInt(_token.spacings.left), "px"),
-        right: "".concat(_rightAdornmentsWidth + parseInt(_token.spacings.right), "px")
-      })
-    });
+  const [rightAdornmentsRef, setRightAdornmentsRef] = useState();
+  const [leftAdornmentsRef, setLeftAdornmentsRef] = useState();
+  const token = useCallback(() => {
+    const _leftAdornmentsWidth = leftAdornmentsWidth || (leftAdornmentsRef ? leftAdornmentsRef.clientWidth : 0);
+    const _rightAdornmentsWidth = rightAdornmentsWidth || (rightAdornmentsRef ? rightAdornmentsRef.clientWidth : 0);
+    return {
+      ..._token,
+      spacings: {
+        ..._token.spacings,
+        left: `${_leftAdornmentsWidth + parseInt(_token.spacings.left)}px`,
+        right: `${_rightAdornmentsWidth + parseInt(_token.spacings.right)}px`
+      }
+    };
   }, [leftAdornmentsWidth, leftAdornmentsRef, rightAdornmentsWidth, rightAdornmentsRef, _token])();
-  var inputProps = _objectSpread({
-    ref: ref,
-    type: type,
-    disabled: disabled,
-    readOnly: readOnly,
+  const inputProps = {
+    ref,
+    type,
+    disabled,
+    readOnly,
     $token: token,
     style: {
       resize: 'none'
-    }
-  }, other);
-  var containerProps = {
-    disabled: disabled,
-    readOnly: readOnly,
-    className: className,
-    style: style,
+    },
+    ...other
+  };
+  const containerProps = {
+    disabled,
+    readOnly,
+    className,
+    style,
     $token: token
   };
-  var _leftAdornmentProps = _objectSpread(_objectSpread({}, leftAdornmentsProps), {}, {
+  const _leftAdornmentProps = {
+    ...leftAdornmentsProps,
     ref: setLeftAdornmentsRef,
     $token: token
-  });
-  var _rightAdornmentProps = _objectSpread(_objectSpread({}, rightAdornmentsProps), {}, {
+  };
+  const _rightAdornmentProps = {
+    ...rightAdornmentsProps,
     ref: setRightAdornmentsRef,
     $token: token
-  });
+  };
   return (
     /*#__PURE__*/
     // Not using <ThemeProvider> because of cascading styling messing with adornments
-    jsxs(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-      children: [leftAdornments ? /*#__PURE__*/jsx(LeftAdornments, _objectSpread(_objectSpread({}, _leftAdornmentProps), {}, {
+    jsxs(Container, {
+      ...containerProps,
+      children: [leftAdornments ? /*#__PURE__*/jsx(LeftAdornments, {
+        ..._leftAdornmentProps,
         children: leftAdornments
-      })) : null, /*#__PURE__*/jsx(StyledInput, _objectSpread({
+      }) : null, /*#__PURE__*/jsx(StyledInput, {
         $paddingLeft: token.spacings.left,
-        $paddingRight: token.spacings.right
-      }, inputProps)), rightAdornments ? /*#__PURE__*/jsx(RightAdornments, _objectSpread(_objectSpread({}, _rightAdornmentProps), {}, {
+        $paddingRight: token.spacings.right,
+        ...inputProps
+      }), rightAdornments ? /*#__PURE__*/jsx(RightAdornments, {
+        ..._rightAdornmentProps,
         children: rightAdornments
-      })) : null]
-    }))
+      }) : null]
+    })
   );
 });
 

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

@@ -1,39 +1,51 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.29.1/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 = {
+const {
+  colors: {
+    ui: {
+      background__light: {
+        rgba: background
+      }
+    },
+    text: {
+      static_icons__default,
+      static_icons__tertiary
+    },
+    interactive: {
+      disabled__text,
+      primary__resting,
+      danger__resting,
+      danger__hover,
+      warning__resting,
+      warning__hover,
+      success__resting,
+      success__hover
+    }
+  },
+  spacings: {
+    comfortable: {
+      small,
+      x_small
+    }
+  },
+  typography,
+  shape
+} = tokens;
+const input = {
   height: shape.straight.minHeight,
   width: '100%',
-  background: background,
+  background,
   spacings: {
     left: small,
     right: small,
     top: '6px',
     bottom: '6px'
   },
-  typography: _objectSpread(_objectSpread({}, typography.input.text), {}, {
+  typography: {
+    ...typography.input.text,
     color: static_icons__default.rgba
-  }),
+  },
   outline: {
     type: 'outline',
     color: 'transparent',
@@ -48,9 +60,10 @@ var input = {
       }
     },
     adornment: {
-      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+      typography: {
+        ...typography.input.label,
         color: static_icons__tertiary.rgba
-      }),
+      },
       spacings: {
         left: small,
         right: small
@@ -98,7 +111,7 @@ var input = {
     }
   }
 };
-var error = mergeDeepRight(input, {
+const error = mergeDeepRight(input, {
   boxShadow: 'none',
   outline: {
     color: danger__resting.rgba
@@ -112,9 +125,10 @@ var error = mergeDeepRight(input, {
   },
   entities: {
     adornment: {
-      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+      typography: {
+        ...typography.input.label,
         color: danger__resting.rgba
-      }),
+      },
       states: {
         focus: {
           outline: {
@@ -125,7 +139,7 @@ var error = mergeDeepRight(input, {
     }
   }
 });
-var warning = mergeDeepRight(input, {
+const warning = mergeDeepRight(input, {
   boxShadow: 'none',
   outline: {
     color: warning__resting.rgba
@@ -139,9 +153,10 @@ var warning = mergeDeepRight(input, {
   },
   entities: {
     adornment: {
-      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+      typography: {
+        ...typography.input.label,
         color: warning__resting.rgba
-      }),
+      },
       states: {
         focus: {
           outline: {
@@ -152,7 +167,7 @@ var warning = mergeDeepRight(input, {
     }
   }
 });
-var success = mergeDeepRight(input, {
+const success = mergeDeepRight(input, {
   boxShadow: 'none',
   outline: {
     color: success__resting.rgba
@@ -166,9 +181,10 @@ var success = mergeDeepRight(input, {
   },
   entities: {
     adornment: {
-      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
+      typography: {
+        ...typography.input.label,
         color: success__resting.rgba
-      }),
+      },
       states: {
         focus: {
           outline: {
@@ -179,11 +195,11 @@ var success = mergeDeepRight(input, {
     }
   }
 });
-var inputToken = {
-  input: input,
-  error: error,
-  warning: warning,
-  success: success
+const inputToken = {
+  input,
+  error,
+  warning,
+  success
 };
 
 export { error, input, inputToken, success, warning };

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

@@ -1,47 +1,43 @@
-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({
+const 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({
+})(({
+  color
+}) => css({
+  display: 'grid',
+  gap: '8px',
+  gridAutoFlow: 'column',
+  alignItems: 'start',
+  justifyContent: 'start',
+  color
+}));
+const 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);
+})(["margin:0;", ";white-space:pre-line;"], typographyMixin(helperText.typography));
+const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText({
+  text,
+  icon,
+  color = helperText.typography.color,
+  ...rest
+}, ref) {
   if (!text) {
     return null;
   }
-  return /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, rest), {}, {
-    color: color,
-    ref: ref
-  })), {}, {
+  return /*#__PURE__*/jsxs(Container, {
+    ...rest,
+    color,
+    ref,
     children: [icon, /*#__PURE__*/jsx(Text, {
       children: text
     })]
-  }));
+  });
 });
 
 export { TextfieldHelperText as HelperText };

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

@@ -1,14 +1,18 @@
-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 = {
+const {
+  colors,
+  spacings: {
+    comfortable
+  },
+  typography
+} = tokens;
+const helperText = {
   background: colors.ui.background__light.hex,
-  typography: _objectSpread(_objectSpread({}, typography.input.helper), {}, {
+  typography: {
+    ...typography.input.helper,
     color: colors.text.static_icons__tertiary.rgba
-  }),
+  },
   spacings: {
     comfortable: {
       left: comfortable.small,

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

@@ -1,5 +1,3 @@
-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';
@@ -9,57 +7,58 @@ 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({
+const Container = styled.div.withConfig({
   displayName: "InputWrapper__Container",
   componentId: "sc-v6o9z1-0"
 })([""]);
-var HelperText = styled(TextfieldHelperText).withConfig({
+const HelperText = styled(TextfieldHelperText).withConfig({
   displayName: "InputWrapper__HelperText",
   componentId: "sc-v6o9z1-1"
 })(["margin-top:8px;margin-left:8px;"]);
-var Label = styled(Label$1).withConfig({
+const Label = styled(Label$1).withConfig({
   displayName: "InputWrapper__Label",
   componentId: "sc-v6o9z1-2"
 })(["margin-left:8px;margin-right:8px;"]);
 /* @TODO fix no-unused-prop-types disabled & readOnly */
 
 /** 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
+const InputWrapper = /*#__PURE__*/forwardRef(function InputWrapper({
+  children,
+  color,
+  label,
+  labelProps = {},
+  helperProps = {},
+  helperIcon,
+  ...other
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const actualVariant = color || 'input';
+  const inputToken$1 = inputToken[actualVariant];
+  const token = useToken({
+    density
   }, inputToken$1);
-  var helperTextColor = useCallback(function () {
-    var _token = token();
+  const helperTextColor = useCallback(() => {
+    const _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));
+  const hasHelperText = Boolean(helperProps?.text);
+  const hasLabel = Boolean(label || labelProps?.label);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, other), {}, {
+    children: /*#__PURE__*/jsxs(Container, {
+      ...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)))]
-    }))
+      children: [hasLabel && /*#__PURE__*/jsx(Label, {
+        label,
+        ...labelProps
+      }), children, hasHelperText && /*#__PURE__*/jsx(HelperText, {
+        color: helperTextColor,
+        icon: helperIcon,
+        ...helperProps
+      })]
+    })
   });
 });