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

package/dist/esm/components/Search/Search.js

@@ -2,220 +2,93 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
-import styled, { css, ThemeProvider } from 'styled-components';
-import { search as search$1, close } from '@equinor/eds-icons';
-import { search } from './Search.tokens.js';
+import styled from 'styled-components';
+import { search, close } from '@equinor/eds-icons';
 import { Button } from '../Button/index.js';
 import { Icon } from '../Icon/index.js';
-import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken, mergeRefs, setReactInputValue } from '@equinor/eds-utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { mergeRefs, setReactInputValue } from '@equinor/eds-utils';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { Input } from '../Input/Input.js';
-import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["onChange", "defaultValue", "value", "className", "style", "disabled", "onBlur", "onFocus"];
-var Container = styled.span.withConfig({
-  displayName: "Search__Container",
-  componentId: "sc-v8l23u-0"
-})(function (_ref) {
-  var disabled = _ref.disabled,
-      isFocused = _ref.isFocused,
-      theme = _ref.theme;
-  var height = theme.height,
-      spacings = theme.spacings,
-      background = theme.background,
-      border = theme.border,
-      clickbound = theme.clickbound,
-      _theme$entities = theme.entities,
-      icon = _theme$entities.icon,
-      placeholder = _theme$entities.placeholder,
-      states = theme.states;
-  return css(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, bordersTemplate(border), icon.typography.color, spacingsTemplate(spacings), isFocused && bordersTemplate(states.focus.border), placeholder.typography.color, disabled ? css(["cursor:not-allowed;"]) : css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
-});
+var _excluded = ["onChange", "style", "className"];
 var SearchInput = styled(Input).withConfig({
   displayName: "Search__SearchInput",
-  componentId: "sc-v8l23u-1"
-})(function (_ref2) {
-  var theme = _ref2.theme,
-      disabled = _ref2.disabled;
-  return css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}&:-webkit-autofill{box-shadow:0 0 0px 1000px ", " inset;}&:autofill{box-shadow:0 0 0px 1000px ", " inset;}", ""], theme.height, typographyTemplate(theme.typography), theme.background, theme.background, disabled && css(["cursor:not-allowed;"]));
-});
+  componentId: "sc-v8l23u-0"
+})(["input{&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}}"]);
 var InsideButton = styled(Button).withConfig({
   displayName: "Search__InsideButton",
-  componentId: "sc-v8l23u-2"
-})(function (_ref3) {
-  var theme = _ref3.theme,
-      isActive = _ref3.isActive;
-  var button = theme.entities.button;
-  return css(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, isActive && css(["visibility:visible;"]));
-});
-var Search = /*#__PURE__*/forwardRef(function Search(_ref4, ref) {
-  var _onChange = _ref4.onChange,
-      _ref4$defaultValue = _ref4.defaultValue,
-      defaultValue = _ref4$defaultValue === void 0 ? '' : _ref4$defaultValue,
-      value = _ref4.value,
-      _ref4$className = _ref4.className,
-      className = _ref4$className === void 0 ? '' : _ref4$className,
-      style = _ref4.style,
-      _ref4$disabled = _ref4.disabled,
-      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-      _onBlur = _ref4.onBlur,
-      _onFocus = _ref4.onFocus,
-      rest = _objectWithoutProperties(_ref4, _excluded);
-
-  var _useEds = useEds(),
-      density = _useEds.density;
+  componentId: "sc-v8l23u-1"
+})(["height:24px;width:24px;"]);
+var Search = /*#__PURE__*/forwardRef(function Search(_ref, ref) {
+  var _onChange = _ref.onChange,
+      style = _ref.style,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
-  var token = useToken({
-    density: density
-  }, search);
-  var isControlled = typeof value !== 'undefined';
-  var isActive = isControlled && value !== '' || defaultValue !== '';
   var inputRef = useRef(null);
 
-  var _useState = useState({
-    isActive: isActive,
-    isFocused: false
-  }),
+  var _useState = useState(Boolean(rest.defaultValue)),
       _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+      showClear = _useState2[0],
+      setShowClear = _useState2[1];
 
   useEffect(function () {
-    setState(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        isActive: isActive
-      });
-    });
-  }, [value, defaultValue, isActive]);
-
-  var handleOnClick = function handleOnClick() {
-    var inputEl = inputRef.current;
-    inputEl.focus();
-  };
-
-  var handleFocus = function handleFocus() {
-    return setState(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        isFocused: true
-      });
-    });
-  };
-
-  var handleBlur = function handleBlur() {
-    return setState(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        isFocused: false
-      });
-    });
-  };
-
-  var handleOnChange = function handleOnChange(event) {
-    setIsActive(event.target.value);
-  };
+    if (rest.value) {
+      setShowClear(Boolean(rest.value));
+    }
+  }, [rest.value]);
 
-  var handleOnDelete = function handleOnDelete() {
+  var clearInputValue = function clearInputValue() {
     var input = inputRef.current;
     var clearedValue = '';
     setReactInputValue(input, clearedValue);
-    setState(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        isActive: false
-      });
-    });
   };
 
-  var setIsActive = function setIsActive(newValue) {
-    return setState(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        isActive: newValue !== ''
-      });
-    });
+  var handleOnChange = function handleOnChange(e) {
+    setShowClear(Boolean(e.currentTarget.value));
   };
-  /** Applying props for controlled vs. uncontrolled scnarios */
-
 
-  var applyControllingProps = function applyControllingProps(props, value, defaultValue) {
-    if (isControlled) {
-      return _objectSpread(_objectSpread({}, props), {}, {
-        value: value
-      });
-    }
-
-    return _objectSpread(_objectSpread({}, props), {}, {
-      defaultValue: defaultValue
-    });
-  };
-
-  var isFocused = state.isFocused;
-  var size = 24;
-  var containerProps = {
-    isFocused: isFocused,
-    className: className,
-    style: style,
-    disabled: disabled,
-    role: 'search',
-    'aria-label': rest['aria-label'],
-    onClick: handleOnClick
-  };
   var combinedRef = useMemo(function () {
     return mergeRefs(inputRef, ref);
   }, [inputRef, ref]);
-  var inputProps = applyControllingProps(_objectSpread(_objectSpread({}, rest), {}, {
-    disabled: disabled,
-    ref: combinedRef,
-    type: 'search',
-    role: 'searchbox',
-    'aria-label': 'search input',
-    onBlur: function onBlur(e) {
-      handleBlur();
-
-      if (_onBlur) {
-        _onBlur(e);
-      }
-    },
-    onFocus: function onFocus(e) {
-      handleFocus();
-
-      if (_onFocus) {
-        _onFocus(e);
-      }
-    },
-    onChange: function onChange(e) {
-      handleOnChange(e);
-
-      if (_onChange) {
-        _onChange(e);
-      }
-    }
-  }), value, defaultValue);
-  var clearButtonProps = {
-    isActive: state.isActive,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-
-      if (state.isActive) {
-        handleOnDelete();
-      }
-    }
-  };
-  return /*#__PURE__*/jsx(ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-      children: [/*#__PURE__*/jsx(Icon, {
-        data: search$1,
+  return /*#__PURE__*/jsx(InputWrapper, {
+    role: "search",
+    style: style,
+    className: className,
+    children: /*#__PURE__*/jsx(SearchInput, _objectSpread({
+      onChange: function onChange(e) {
+        handleOnChange(e);
+
+        if (_onChange) {
+          _onChange(e);
+        }
+      },
+      ref: combinedRef,
+      leftAdornmentsWidth: 24 + 8,
+      leftAdornments: /*#__PURE__*/jsx(Icon, {
+        data: search,
         "aria-hidden": true,
-        size: size
-      }), /*#__PURE__*/jsx(SearchInput, _objectSpread({}, inputProps)), /*#__PURE__*/jsx(InsideButton, _objectSpread(_objectSpread({}, clearButtonProps), {}, {
-        "aria-label": 'clear search',
-        title: "clear",
-        variant: "ghost_icon",
-        children: /*#__PURE__*/jsx(Icon, {
-          data: close,
-          size: 16
+        size: 18
+      }),
+      rightAdornmentsWidth: 24 + 8,
+      rightAdornments: /*#__PURE__*/jsx(Fragment, {
+        children: showClear && /*#__PURE__*/jsx(InsideButton, {
+          "aria-label": 'clear search',
+          title: "clear",
+          variant: "ghost_icon",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            clearInputValue();
+          },
+          children: /*#__PURE__*/jsx(Icon, {
+            data: close,
+            size: 16
+          })
         })
-      }))]
-    }))
+      })
+    }, rest))
   });
-}); // Search.displayName = 'eds-search'
+});
 
 export { Search };

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

@@ -1,21 +1,22 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
-import { Field } from './Field.js';
-import { TextFieldProvider } from './TextField.context.js';
-import { textfield } from './TextField.tokens.js';
-import { useId, useToken } from '@equinor/eds-utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Label } from '../Label/Label.js';
-import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { useId } from '@equinor/eds-utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { InputWrapper } from '../InputWrapper/InputWrapper.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { Input } from '../Input/Input.js';
+
+var _excluded = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
 
-var _excluded = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputRef", "inputIcon", "helperIcon", "rowsMax", "style"];
-var Container = styled.div.withConfig({
-  displayName: "TextField__Container",
-  componentId: "sc-o1nc07-0"
-})(["min-width:100px;width:100%;"]);
+/** Proxy component for working around typescript and element type switching */
+var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
+  return props.multiline ? /*#__PURE__*/jsx(Textarea, _objectSpread({
+    ref: ref
+  }, props)) : /*#__PURE__*/jsx(Input, _objectSpread({
+    ref: ref
+  }, props));
+});
 var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   var id = _ref.id,
       label = _ref.label,
@@ -24,43 +25,49 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
       helperText = _ref.helperText,
       placeholder = _ref.placeholder,
       disabled = _ref.disabled,
-      multiline = _ref.multiline,
+      _ref$multiline = _ref.multiline,
+      multiline = _ref$multiline === void 0 ? false : _ref$multiline,
       className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-      inputRef = _ref.inputRef,
+      variant = _ref.variant,
       inputIcon = _ref.inputIcon,
       helperIcon = _ref.helperIcon,
-      rowsMax = _ref.rowsMax,
       style = _ref.style,
+      rowsMax = _ref.rowsMax,
+      textareaRef = _ref.textareaRef,
+      inputRef = _ref.inputRef,
       other = _objectWithoutProperties(_ref, _excluded);
 
   var helperTextId = useId(null, 'helpertext');
 
-  var inputProps = _objectSpread({
-    'aria-describedby': helperTextId,
-    multiline: multiline,
+  var fieldProps = _objectSpread({
+    'aria-invalid': variant === 'error' || undefined,
     disabled: disabled,
     placeholder: placeholder,
     id: id,
     variant: variant,
-    ref: inputRef,
-    inputIcon: inputIcon,
-    unit: unit,
-    rowsMax: rowsMax
+    rightAdornments: /*#__PURE__*/jsxs(Fragment, {
+      children: [inputIcon, /*#__PURE__*/jsx("span", {
+        children: unit
+      })]
+    }),
+    rowsMax: rowsMax,
+    ref: inputRef || textareaRef,
+    multiline: multiline
   }, other);
 
   var helperProps = {
-    id: helperTextId,
-    variant: variant,
-    helperText: helperText,
+    id: null,
+    text: helperText,
     icon: helperIcon,
     disabled: disabled
   };
   var containerProps = {
     ref: ref,
     className: className,
-    style: style
+    style: _objectSpread({
+      width: '100%'
+    }, style),
+    color: variant
   };
   var labelProps = {
     htmlFor: id,
@@ -68,23 +75,22 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     meta: meta,
     disabled: disabled
   };
-  var showLabel = label || meta;
-  var showHelperText = helperText;
 
-  var _useEds = useEds(),
-      density = _useEds.density;
+  if (helperText) {
+    fieldProps = _objectSpread({
+      'aria-describedby': helperTextId
+    }, fieldProps);
+    helperProps = _objectSpread({
+      id: helperTextId
+    }, helperProps);
+  }
 
-  var token = useToken({
-    density: density
-  }, textfield);
-  return /*#__PURE__*/jsx(ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-      children: /*#__PURE__*/jsxs(TextFieldProvider, {
-        children: [showLabel && /*#__PURE__*/jsx(Label, _objectSpread({}, labelProps)), /*#__PURE__*/jsx(Field, _objectSpread({}, inputProps)), showHelperText && /*#__PURE__*/jsx(TextfieldHelperText, _objectSpread({}, helperProps))]
-      })
-    }))
-  });
+  return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
+    helperProps: helperProps,
+    labelProps: labelProps
+  }, containerProps), {}, {
+    children: /*#__PURE__*/jsx(Field, _objectSpread({}, fieldProps))
+  }));
 });
 
 export { TextField };

package/dist/esm/components/Textarea/Textarea.js

@@ -1,55 +1,26 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef, useState, useMemo } from 'react';
-import styled, { css } from 'styled-components';
+import { forwardRef, useState, useCallback } from 'react';
 import * as Input_tokens from '../Input/Input.tokens.js';
 import { input as input$1 } from '../Input/Input.tokens.js';
-import { typographyTemplate, useAutoResize, mergeRefs, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
+import { Input } from '../Input/Input.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
 var _excluded = ["variant", "disabled", "type", "rowsMax"];
 var input = input$1;
-
-var Variation = function Variation(_ref) {
+var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref, ref) {
   var variant = _ref.variant,
-      token = _ref.token,
-      density = _ref.density;
-
-  if (!variant) {
-    return "";
-  }
-
-  var _token$states = token.states,
-      focusOutline = _token$states.focus.outline,
-      activeOutline = _token$states.active.outline,
-      boxShadow = token.boxShadow;
-  var spacings = input.spacings;
-
-  if (density === 'compact') {
-    spacings = input.modes.compact.spacings;
-  }
-
-  return css(["border:none;", " ", " box-shadow:", ";&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}"], spacingsTemplate(spacings), outlineTemplate(activeOutline), boxShadow, outlineTemplate(focusOutline));
-};
-
-var StyledTextarea = styled.textarea.withConfig({
-  displayName: "Textarea__StyledTextarea",
-  componentId: "sc-2yjdcc-0"
-})(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, typographyTemplate(input.typography), Variation, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
-var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref2, ref) {
-  var _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? 'text' : _ref2$type,
-      rowsMax = _ref2.rowsMax,
-      other = _objectWithoutProperties(_ref2, _excluded);
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      rowsMax = _ref.rowsMax,
+      other = _objectWithoutProperties(_ref, _excluded);
 
-  var actualVariant = variant === 'default' ? 'input' : variant;
-  var inputVariant = Input_tokens[actualVariant];
+  var inputVariant = Input_tokens[variant] ? Input_tokens[variant] : input$1;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -72,9 +43,9 @@ var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref2, ref) {
   var padding = parseInt(top) + parseInt(bottom);
   var maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
   useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  var combinedRef = useMemo(function () {
+  var combinedRef = useCallback(function () {
     return mergeRefs(ref, setTextareaEl);
-  }, [setTextareaEl, ref]);
+  }, [setTextareaEl, ref])();
 
   var inputProps = _objectSpread({
     ref: combinedRef,
@@ -85,7 +56,19 @@ var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref2, ref) {
     density: density
   }, other);
 
-  return /*#__PURE__*/jsx(StyledTextarea, _objectSpread({}, inputProps));
+  var adornmentsToTop = {
+    style: {
+      alignItems: 'flex-start'
+    }
+  };
+  return /*#__PURE__*/jsx(Input, _objectSpread({
+    as: "textarea",
+    rightAdornmentsProps: adornmentsToTop,
+    leftAdornmentsProps: adornmentsToTop,
+    style: {
+      height: 'auto'
+    }
+  }, inputProps));
 });
 
 export { Textarea };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef, useRef, useState, useMemo, cloneElement } from 'react';
+import { forwardRef, useRef, useState, useMemo, useEffect, cloneElement } from 'react';
 import styled from 'styled-components';
 import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs } from '@equinor/eds-utils';
 import { tooltip } from './Tooltip.tokens.js';
@@ -81,43 +81,44 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
       getReferenceProps = _useInteractions.getReferenceProps,
       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;
+  useEffect(function () {
+    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));
-  }
+    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));
+    }
+  });
   var updatedChildren = /*#__PURE__*/cloneElement(children, _objectSpread({}, getReferenceProps(_objectSpread({
     ref: anchorRef
   }, children.props))));

package/dist/esm/index.js

@@ -40,3 +40,4 @@ export { Switch } from './components/Switch/Switch.js';
 export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
 export { Paper } from './components/Paper/Paper.js';
 export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
+export { InputWrapper } from './components/InputWrapper/InputWrapper.js';

package/dist/types/components/Input/Input.d.ts

@@ -1,5 +1,6 @@
-import { InputHTMLAttributes } from 'react';
-import type { Variants } from '../TextField/types';
+import { ReactNode, CSSProperties, ElementType, ComponentPropsWithoutRef } from 'react';
+import { OverridableComponent } from '@equinor/eds-utils';
+import type { Variants } from '../types';
 export declare type InputProps = {
     /** Placeholder */
     placeholder?: string;
@@ -11,16 +12,22 @@ export declare type InputProps = {
     type?: string;
     /** Read Only */
     readOnly?: boolean;
-} & InputHTMLAttributes<HTMLInputElement>;
-export declare const Input: import("react").ForwardRefExoticComponent<{
-    /** Placeholder */
-    placeholder?: string;
-    /** Variant */
-    variant?: Variants;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Type */
-    type?: string;
-    /** Read Only */
-    readOnly?: boolean;
-} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    /** Left adornments */
+    leftAdornments?: ReactNode;
+    /** Right adornments */
+    rightAdornments?: ReactNode;
+    /** Left adornments props */
+    leftAdornmentsProps?: ComponentPropsWithoutRef<'div'>;
+    /** Right adornments props */
+    rightAdornmentsProps?: ComponentPropsWithoutRef<'div'>;
+    /** Manually specify left adornments width. The width will be the dom element width if not defined */
+    leftAdornmentsWidth?: number;
+    /**  Manually specify right adornments width. The width will be the dom element width if not defined */
+    rightAdornmentsWidth?: number;
+    /** Cast the input to another element */
+    as?: ElementType;
+    /**  */
+    className?: string;
+    style?: CSSProperties;
+};
+export declare const Input: OverridableComponent<InputProps, HTMLInputElement>;