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

package/dist/esm/components/TextField/Field.js

@@ -1,146 +1,139 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import { useTextField } from './TextField.context.js';
 import styled, { css } from 'styled-components';
 import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import * as TextField_tokens from './TextField.tokens.js';
+import { textfield as textfield$1 } from './TextField.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Input } from '../Input/Input.js';
 import { Textarea } from '../Textarea/Textarea.js';
 import { Icon as InputIcon } from './Icon/Icon.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const {
-  textfield
-} = TextField_tokens;
+var _excluded = ["multiline", "variant", "disabled", "readOnly", "type", "unit", "inputIcon", "rowsMax", "onBlur", "onFocus"];
+var textfield = textfield$1;
 
-const Variation = _ref => {
+var Variation = function Variation(_ref) {
   var _token$border, _token$border2, _token$border3, _token$border4;
 
-  let {
-    variant,
-    isFocused,
-    token
-  } = _ref;
+  var variant = _ref.variant,
+      isFocused = _ref.isFocused,
+      token = _ref.token;
 
   if (!variant) {
-    return ``;
+    return "";
   }
 
-  return css(["box-shadow:", ";", ""], isFocused ? `none` : variant === 'default' ? `inset 0 -1px 0 0 ${((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)}` : `0 0 0 1px ${((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)}`, isFocused && outlineTemplate(token.states.focus.outline));
+  return css(["box-shadow:", ";", ""], isFocused ? "none" : variant === 'default' ? "inset 0 -1px 0 0 ".concat(((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)) : "0 0 0 1px ".concat(((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)), isFocused && outlineTemplate(token.states.focus.outline));
 };
 
-const StrippedInput = styled(Input).withConfig({
+var StrippedInput = styled(Input).withConfig({
   displayName: "Field__StrippedInput",
   componentId: "sc-455b88-0"
 })(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
-const StrippedTextarea = styled(Textarea).withConfig({
+var StrippedTextarea = styled(Textarea).withConfig({
   displayName: "Field__StrippedTextarea",
   componentId: "sc-455b88-1"
 })(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
-const InputWrapper = styled.div.withConfig({
+var InputWrapper = styled.div.withConfig({
   displayName: "Field__InputWrapper",
   componentId: "sc-455b88-2"
-})(_ref2 => {
-  let {
-    inputIcon,
-    unit,
-    isDisabled,
-    isReadOnly,
-    multiline,
-    variant
-  } = _ref2;
+})(function (_ref2) {
+  var inputIcon = _ref2.inputIcon,
+      unit = _ref2.unit,
+      isDisabled = _ref2.isDisabled,
+      isReadOnly = _ref2.isReadOnly,
+      multiline = _ref2.multiline,
+      variant = _ref2.variant;
   return css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"]));
 });
-const Unit = styled.span.withConfig({
+var Unit = styled.span.withConfig({
   displayName: "Field__Unit",
   componentId: "sc-455b88-3"
-})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), _ref3 => {
-  let {
-    isDisabled
-  } = _ref3;
+})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), function (_ref3) {
+  var isDisabled = _ref3.isDisabled;
   return isDisabled && {
     color: textfield.entities.unit.states.disabled.typography.color
   };
 });
-const Adornments = styled.div.withConfig({
+var Adornments = styled.div.withConfig({
   displayName: "Field__Adornments",
   componentId: "sc-455b88-4"
-})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, _ref4 => {
-  let {
-    multiline,
-    theme
-  } = _ref4;
+})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, function (_ref4) {
+  var multiline = _ref4.multiline,
+      theme = _ref4.theme;
   return multiline && {
     marginTop: theme.spacings.top,
     alignSelf: 'start'
   };
 });
-const Field = /*#__PURE__*/forwardRef(function Field(_ref5, ref) {
-  let {
-    multiline,
-    variant,
-    disabled,
-    readOnly,
-    type,
-    unit,
-    inputIcon,
-    rowsMax,
-    onBlur,
-    onFocus,
-    ...other
-  } = _ref5;
-  const {
-    handleFocus,
-    handleBlur,
-    isFocused
-  } = useTextField();
-  const {
-    density
-  } = useEds();
-  const iconSize = density === 'compact' ? 16 : 24;
-  const actualVariant = variant === 'default' ? 'textfield' : variant;
-  const inputVariant = TextField_tokens[actualVariant];
-  const isError = actualVariant === 'error';
-
-  const focusHandler = e => {
+var Field = /*#__PURE__*/forwardRef(function Field(_ref5, ref) {
+  var multiline = _ref5.multiline,
+      variant = _ref5.variant,
+      disabled = _ref5.disabled,
+      readOnly = _ref5.readOnly,
+      type = _ref5.type,
+      unit = _ref5.unit,
+      inputIcon = _ref5.inputIcon,
+      rowsMax = _ref5.rowsMax,
+      onBlur = _ref5.onBlur,
+      onFocus = _ref5.onFocus,
+      other = _objectWithoutProperties(_ref5, _excluded);
+
+  var _useTextField = useTextField(),
+      handleFocus = _useTextField.handleFocus,
+      handleBlur = _useTextField.handleBlur,
+      isFocused = _useTextField.isFocused;
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var iconSize = density === 'compact' ? 16 : 24;
+  var actualVariant = variant === 'default' ? 'textfield' : variant;
+  var inputVariant = TextField_tokens[actualVariant];
+  var isError = actualVariant === 'error';
+
+  var focusHandler = function focusHandler(e) {
     handleFocus();
     onFocus && onFocus(e);
   };
 
-  const blurHandler = e => {
+  var blurHandler = function blurHandler(e) {
     handleBlur();
     onBlur && onBlur(e);
   };
 
-  const inputWrapperProps = {
-    isFocused,
+  var inputWrapperProps = {
+    isFocused: isFocused,
     isDisabled: disabled,
     isReadOnly: readOnly,
-    variant,
+    variant: variant,
     token: inputVariant,
-    inputIcon,
-    unit,
-    multiline
+    inputIcon: inputIcon,
+    unit: unit,
+    multiline: multiline
   };
-  const inputProps = {
+
+  var inputProps = _objectSpread({
     ref: ref,
     'aria-invalid': isError,
-    type,
-    disabled,
-    readOnly,
-    variant,
+    type: type,
+    disabled: disabled,
+    readOnly: readOnly,
+    variant: variant,
     onBlur: blurHandler,
-    onFocus: focusHandler,
-    ...other
-  };
-  const textareaProps = { ...inputProps,
-    rowsMax,
+    onFocus: focusHandler
+  }, other);
+
+  var textareaProps = _objectSpread(_objectSpread({}, inputProps), {}, {
+    rowsMax: rowsMax,
     ref: ref
-  };
-  return /*#__PURE__*/jsxs(InputWrapper, { ...inputWrapperProps,
-    children: [multiline ? /*#__PURE__*/jsx(StrippedTextarea, { ...textareaProps
-    }) : /*#__PURE__*/jsx(StrippedInput, { ...inputProps
-    }), (inputIcon || unit) && /*#__PURE__*/jsxs(Adornments, {
+  });
+
+  return /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({}, inputWrapperProps), {}, {
+    children: [multiline ? /*#__PURE__*/jsx(StrippedTextarea, _objectSpread({}, textareaProps)) : /*#__PURE__*/jsx(StrippedInput, _objectSpread({}, inputProps)), (inputIcon || unit) && /*#__PURE__*/jsxs(Adornments, {
       multiline: multiline,
       children: [unit && /*#__PURE__*/jsx(Unit, {
         isDisabled: disabled,
@@ -152,7 +145,7 @@ const Field = /*#__PURE__*/forwardRef(function Field(_ref5, ref) {
         children: inputIcon
       })]
     })]
-  });
+  }));
 });
 
 export { Field, InputWrapper };

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

@@ -1,3 +1,5 @@
+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 { typographyTemplate } from '@equinor/eds-utils';
@@ -6,22 +8,20 @@ import { useTextField } from '../TextField.context.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Icon as InputIcon } from '../Icon/Icon.js';
 
-const Variation = _ref => {
-  let {
-    variant,
-    isFocused,
-    isDisabled
-  } = _ref;
+var _excluded = ["helperText", "icon", "variant", "disabled"];
+
+var Variation = function Variation(_ref) {
+  var variant = _ref.variant,
+      isFocused = _ref.isFocused,
+      isDisabled = _ref.isDisabled;
 
   if (!variant) {
-    return ``;
+    return "";
   }
 
-  const {
-    focusColor,
-    color,
-    disabledColor
-  } = variant;
+  var focusColor = variant.focusColor,
+      color = variant.color,
+      disabledColor = variant.disabledColor;
 
   if (isDisabled) {
     return css(["color:", ";"], disabledColor);
@@ -34,45 +34,42 @@ const Variation = _ref => {
   return css(["color:", ";"], color);
 };
 
-const Container = styled.div.withConfig({
+var Container = styled.div.withConfig({
   displayName: "HelperText__Container",
   componentId: "sc-1kfkyxg-0"
-})(["display:flex;align-items:flex-start;margin-top:", ";"], _ref2 => {
-  let {
-    spacings
-  } = _ref2;
+})(["display:flex;align-items:flex-start;margin-top:", ";"], function (_ref2) {
+  var spacings = _ref2.spacings;
   return spacings.top;
 });
-const Text = styled.p.withConfig({
+var Text = styled.p.withConfig({
   displayName: "HelperText__Text",
   componentId: "sc-1kfkyxg-1"
-})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), _ref3 => {
-  let {
-    spacings
-  } = _ref3;
+})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), function (_ref3) {
+  var spacings = _ref3.spacings;
   return spacings.left;
 }, Variation);
-const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText(_ref4, ref) {
-  let {
-    helperText: helperText$1,
-    icon,
-    variant = 'default',
-    disabled: isDisabled,
-    ...rest
-  } = _ref4;
-  const helperVariant = helperText[variant];
-  const spacings = helperText.spacings.comfortable;
-  const {
-    isFocused
-  } = useTextField();
-  const colors = {
+var TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText(_ref4, ref) {
+  var helperText$1 = _ref4.helperText,
+      icon = _ref4.icon,
+      _ref4$variant = _ref4.variant,
+      variant = _ref4$variant === void 0 ? 'default' : _ref4$variant,
+      isDisabled = _ref4.disabled,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+
+  var helperVariant = helperText[variant];
+  var spacings = helperText.spacings.comfortable;
+
+  var _useTextField = useTextField(),
+      isFocused = _useTextField.isFocused;
+
+  var colors = {
     color: helperVariant.color,
     disabledColor: helperVariant.disabledColor,
     focusColor: helperVariant.focusColor
   };
-  return /*#__PURE__*/jsxs(Container, {
-    ref: ref,
-    ...rest,
+  return /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({
+    ref: ref
+  }, rest), {}, {
     spacings: spacings,
     children: [icon && /*#__PURE__*/jsx(InputIcon, {
       isDisabled: isDisabled,
@@ -86,7 +83,7 @@ const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText
       spacings: spacings,
       children: helperText$1
     })]
-  });
+  }));
 });
 
 export { TextfieldHelperText as HelperText };

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

@@ -1,13 +1,9 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors,
-  spacings: {
-    comfortable
-  },
-  typography
-} = tokens;
-const helperText = {
+var colors = tokens.colors,
+    comfortable = tokens.spacings.comfortable,
+    typography = tokens.typography;
+var helperText = {
   background: colors.ui.background__light.hex,
   typography: typography.input.helper,
   spacings: {
@@ -24,7 +20,7 @@ const helperText = {
       bottom: '6px'
     }
   },
-  default: {
+  "default": {
     color: colors.text.static_icons__tertiary.hex,
     disabledColor: colors.interactive.disabled__text.hex,
     focusColor: colors.text.static_icons__tertiary.hex

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

@@ -1,25 +1,24 @@
+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 { useTextField } from '../TextField.context.js';
 import { input } from './Icon.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledIcon = styled.div.withConfig({
+var _excluded = ["size", "variant", "isDisabled", "colors", "children"];
+var StyledIcon = styled.div.withConfig({
   displayName: "Icon__StyledIcon",
   componentId: "sc-jr0rqa-0"
-})(_ref => {
-  let {
-    colors,
-    isDisabled,
-    isFocused,
-    size
-  } = _ref;
-  const {
-    focusColor,
-    color,
-    disabledColor
-  } = colors;
-  let fill = color;
+})(function (_ref) {
+  var colors = _ref.colors,
+      isDisabled = _ref.isDisabled,
+      isFocused = _ref.isFocused,
+      size = _ref.size;
+  var focusColor = colors.focusColor,
+      color = colors.color,
+      disabledColor = colors.disabledColor;
+  var fill = color;
 
   if (isDisabled) {
     fill = disabledColor;
@@ -31,34 +30,36 @@ const StyledIcon = styled.div.withConfig({
 
   return css(["&,svg{fill:", ";width:", "px;height:", "px;}"], fill, size, size);
 });
-const InputIcon = /*#__PURE__*/forwardRef(function InputIcon(_ref2, ref) {
-  let {
-    size = 24,
-    variant = 'default',
-    isDisabled = false,
-    colors = {
-      color: input[variant].color,
-      disabledColor: input[variant].disabledColor,
-      focusColor: input[variant].focusColor
-    },
-    children,
-    ...other
-  } = _ref2;
-  const {
-    isFocused
-  } = useTextField();
-  const iconProps = {
-    isDisabled,
-    colors,
-    isFocused,
-    size
+var InputIcon = /*#__PURE__*/forwardRef(function InputIcon(_ref2, ref) {
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 24 : _ref2$size,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+      _ref2$isDisabled = _ref2.isDisabled,
+      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+      _ref2$colors = _ref2.colors,
+      colors = _ref2$colors === void 0 ? {
+    color: input[variant].color,
+    disabledColor: input[variant].disabledColor,
+    focusColor: input[variant].focusColor
+  } : _ref2$colors,
+      children = _ref2.children,
+      other = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useTextField = useTextField(),
+      isFocused = _useTextField.isFocused;
+
+  var iconProps = {
+    isDisabled: isDisabled,
+    colors: colors,
+    isFocused: isFocused,
+    size: size
   };
-  return /*#__PURE__*/jsx(StyledIcon, {
-    ref: ref,
-    ...iconProps,
-    ...other,
+  return /*#__PURE__*/jsx(StyledIcon, _objectSpread(_objectSpread(_objectSpread({
+    ref: ref
+  }, iconProps), other), {}, {
     children: children
-  });
+  }));
 });
 
 export { InputIcon as Icon };

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

@@ -1,12 +1,8 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors,
-  spacings: {
-    comfortable
-  }
-} = tokens;
-const input = {
+var colors = tokens.colors,
+    comfortable = tokens.spacings.comfortable;
+var input = {
   spacings: {
     comfortable: {
       left: comfortable.small,
@@ -21,7 +17,7 @@ const input = {
       bottom: '10px'
     }
   },
-  default: {
+  "default": {
     color: colors.text.static_icons__tertiary.hex,
     disabledColor: colors.interactive.disabled__fill.hex,
     focusColor: colors.interactive.primary__resting.hex

package/dist/esm/components/TextField/TextField.context.js

@@ -1,31 +1,39 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, createContext, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-const initalState = {
+var initalState = {
   isFocused: false
 };
-const TextFieldContext = /*#__PURE__*/createContext(initalState);
-const TextFieldProvider = _ref => {
-  let {
-    children
-  } = _ref;
-  const [state, setState] = useState(initalState);
+var TextFieldContext = /*#__PURE__*/createContext(initalState);
+var TextFieldProvider = function TextFieldProvider(_ref) {
+  var children = _ref.children;
 
-  const handleFocus = () => {
-    setState(prevState => ({ ...prevState,
-      isFocused: true
-    }));
+  var _useState = useState(initalState),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var handleFocus = function handleFocus() {
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        isFocused: true
+      });
+    });
   };
 
-  const handleBlur = () => {
-    setState(prevState => ({ ...prevState,
-      isFocused: false
-    }));
+  var handleBlur = function handleBlur() {
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        isFocused: false
+      });
+    });
   };
 
-  const value = {
-    handleFocus,
-    handleBlur,
+  var value = {
+    handleFocus: handleFocus,
+    handleBlur: handleBlur,
     isFocused: state.isFocused
   };
   return /*#__PURE__*/jsx(TextFieldContext.Provider, {
@@ -33,6 +41,8 @@ const TextFieldProvider = _ref => {
     children: children
   });
 };
-const useTextField = () => useContext(TextFieldContext);
+var useTextField = function useTextField() {
+  return useContext(TextFieldContext);
+};
 
 export { TextFieldProvider, useTextField };