@equinor/eds-core-react 0.35.1 → 0.36.0

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

@@ -1,5 +1,3 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef } from 'react';
 import { useId } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -7,84 +5,91 @@ 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"];
 /** 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));
+const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
+  return props.$multiline ? /*#__PURE__*/jsx(Textarea, {
+    ref: ref,
+    ...props
+  }) : /*#__PURE__*/jsx(Input, {
+    ref: ref,
+    ...props
+  });
 });
-var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    meta = _ref.meta,
-    unit = _ref.unit,
-    helperText = _ref.helperText,
-    placeholder = _ref.placeholder,
-    disabled = _ref.disabled,
-    _ref$multiline = _ref.multiline,
-    multiline = _ref$multiline === void 0 ? false : _ref$multiline,
-    className = _ref.className,
-    variant = _ref.variant,
-    inputIcon = _ref.inputIcon,
-    helperIcon = _ref.helperIcon,
-    style = _ref.style,
-    rowsMax = _ref.rowsMax,
-    textareaRef = _ref.textareaRef,
-    inputRef = _ref.inputRef,
-    other = _objectWithoutProperties(_ref, _excluded);
-  var helperTextId = useId(null, 'helpertext');
-  var fieldProps = _objectSpread({
+const TextField = /*#__PURE__*/forwardRef(function TextField({
+  id,
+  label,
+  meta,
+  unit,
+  helperText,
+  placeholder,
+  disabled,
+  multiline = false,
+  className,
+  variant,
+  inputIcon,
+  helperIcon,
+  style,
+  rowsMax,
+  textareaRef,
+  inputRef,
+  ...other
+}, ref) {
+  const helperTextId = useId(null, 'helpertext');
+  let fieldProps = {
     'aria-invalid': variant === 'error' || undefined,
-    disabled: disabled,
-    placeholder: placeholder,
-    id: id,
-    variant: variant,
+    disabled,
+    placeholder,
+    id,
+    variant,
     rightAdornments: /*#__PURE__*/jsxs(Fragment, {
       children: [inputIcon, /*#__PURE__*/jsx("span", {
         children: unit
       })]
     }),
-    rowsMax: rowsMax,
+    rowsMax,
     ref: inputRef || textareaRef,
-    $multiline: multiline
-  }, other);
-  var helperProps = {
+    $multiline: multiline,
+    ...other
+  };
+  let helperProps = {
     id: null,
     text: helperText,
     icon: helperIcon,
-    disabled: disabled
+    disabled
   };
-  var containerProps = {
-    ref: ref,
-    className: className,
-    style: _objectSpread({
-      width: '100%'
-    }, style),
+  const containerProps = {
+    ref,
+    className,
+    style: {
+      width: '100%',
+      ...style
+    },
     color: variant
   };
-  var labelProps = {
+  const labelProps = {
     htmlFor: id,
-    label: label,
-    meta: meta,
-    disabled: disabled
+    label,
+    meta,
+    disabled
   };
   if (helperText) {
-    fieldProps = _objectSpread({
-      'aria-describedby': helperTextId
-    }, fieldProps);
-    helperProps = _objectSpread(_objectSpread({}, helperProps), {}, {
+    fieldProps = {
+      'aria-describedby': helperTextId,
+      ...fieldProps
+    };
+    helperProps = {
+      ...helperProps,
       id: helperTextId
-    });
+    };
   }
-  return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsx(InputWrapper, {
     helperProps: helperProps,
-    labelProps: labelProps
-  }, containerProps), {}, {
-    children: /*#__PURE__*/jsx(Field, _objectSpread({}, fieldProps))
-  }));
+    labelProps: labelProps,
+    ...containerProps,
+    children: /*#__PURE__*/jsx(Field, {
+      ...fieldProps
+    })
+  });
 });
 
 export { TextField };

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

@@ -1,62 +1,62 @@
-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 * as Input_tokens from '../Input/Input.tokens.js';
 import { input as input$1 } from '../Input/Input.tokens.js';
 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 Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref, ref) {
-  var variant = _ref.variant,
-    _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 _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    textareaEl = _useState2[0],
-    setTextareaEl = _useState2[1];
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
-  var lineHeight = input$1.typography.lineHeight;
-  var top = spacings.top,
-    bottom = spacings.bottom;
-  var fontSize = 16;
+const {
+  input
+} = Input_tokens;
+const Textarea = /*#__PURE__*/forwardRef(function Textarea({
+  variant,
+  disabled = false,
+  type = 'text',
+  rowsMax,
+  ...other
+}, ref) {
+  const [textareaEl, setTextareaEl] = useState(null);
+  const {
+    density
+  } = useEds();
+  const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
+  const {
+    lineHeight
+  } = input$1.typography;
+  const {
+    top,
+    bottom
+  } = spacings;
+  let fontSize = 16;
   if (textareaEl) {
     fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
   }
-  var padding = parseInt(top) + parseInt(bottom);
-  var maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
+  const padding = parseInt(top) + parseInt(bottom);
+  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
   useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  var combinedRef = useCallback(function () {
-    return mergeRefs(ref, setTextareaEl);
-  }, [setTextareaEl, ref])();
-  var inputProps = _objectSpread({
+  const combinedRef = useCallback(() => mergeRefs(ref, setTextareaEl), [setTextareaEl, ref])();
+  const inputProps = {
     ref: combinedRef,
-    type: type,
-    disabled: disabled,
-    variant: variant
-  }, other);
-  var adornmentsToTop = {
+    type,
+    disabled,
+    variant,
+    ...other
+  };
+  const adornmentsToTop = {
     style: {
       alignItems: 'flex-start'
     }
   };
-  return /*#__PURE__*/jsx(Input, _objectSpread({
+  return /*#__PURE__*/jsx(Input, {
     as: "textarea",
     rightAdornmentsProps: adornmentsToTop,
     leftAdornmentsProps: adornmentsToTop,
     style: {
       height: 'auto'
-    }
-  }, inputProps));
+    },
+    ...inputProps
+  });
 });
 
 export { Textarea };

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

@@ -1,7 +1,3 @@
-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, useEffect, cloneElement } from 'react';
 import styled from 'styled-components';
 import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs, useIsInDialog } from '@equinor/eds-utils';
@@ -9,78 +5,73 @@ import { tooltip } from './Tooltip.tokens.js';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss, FloatingPortal } from '@floating-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var _excluded = ["title", "placement", "children", "style", "enterDelay"];
-var StyledTooltip = styled.div.withConfig({
+const StyledTooltip = styled.div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
 })(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background);
-var ArrowWrapper = styled.div.withConfig({
+const ArrowWrapper = styled.div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
 })(["position:absolute;width:", ";height:", ";z-index:-1;"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
-var TooltipArrow = styled.svg.withConfig({
+const TooltipArrow = styled.svg.withConfig({
   displayName: "Tooltip__TooltipArrow",
   componentId: "sc-m2im2p-2"
 })(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
-var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
-  var title = _ref.title,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
-    children = _ref.children,
-    style = _ref.style,
-    _ref$enterDelay = _ref.enterDelay,
-    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var arrowRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var shouldOpen = title !== '';
-  var _useFloating = useFloating({
-      placement: placement,
-      open: open,
-      onOpenChange: setOpen,
-      middleware: [offset(14), flip(), shift({
-        padding: 8
-      }), arrow({
-        element: arrowRef
-      })],
-      whileElementsMounted: autoUpdate
-    }),
-    x = _useFloating.x,
-    y = _useFloating.y,
-    refs = _useFloating.refs,
-    strategy = _useFloating.strategy,
-    context = _useFloating.context,
-    _useFloating$middlewa = _useFloating.middlewareData.arrow,
-    _useFloating$middlewa2 = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa,
-    arrowX = _useFloating$middlewa2.x,
-    arrowY = _useFloating$middlewa2.y,
-    finalPlacement = _useFloating.placement;
-  var anchorRef = useMemo(function () {
-    return mergeRefs(refs.setReference, children === null || children === void 0 ? void 0 : children.ref);
-  }, [refs.setReference, children === null || children === void 0 ? void 0 : children.ref]);
-  var tooltipRef = useMemo(function () {
-    return mergeRefs(refs.setFloating, ref);
-  }, [refs.setFloating, ref]);
-  var _useInteractions = useInteractions([useHover(context, {
-      delay: {
-        open: enterDelay
-      }
-    }), useFocus(context), useRole(context, {
-      role: 'tooltip'
-    }), useDismiss(context)]),
-    getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps;
-  useEffect(function () {
-    var staticSide = {
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
+  title,
+  placement = 'bottom',
+  children,
+  style,
+  enterDelay = 100,
+  ...rest
+}, ref) {
+  const arrowRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const shouldOpen = title !== '';
+  const {
+    x,
+    y,
+    refs,
+    strategy,
+    context,
+    middlewareData: {
+      arrow: {
+        x: arrowX,
+        y: arrowY
+      } = {}
+    },
+    placement: finalPlacement
+  } = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    middleware: [offset(14), flip(), shift({
+      padding: 8
+    }), arrow({
+      element: arrowRef
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const anchorRef = useMemo(() => mergeRefs(refs.setReference, children?.ref), [refs.setReference, children?.ref]);
+  const tooltipRef = useMemo(() => mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useHover(context, {
+    delay: {
+      open: enterDelay
+    }
+  }), useFocus(context), useRole(context, {
+    role: 'tooltip'
+  }), useDismiss(context)]);
+  useEffect(() => {
+    const staticSide = {
       top: 'bottom',
       right: 'left',
       bottom: 'top',
       left: 'right'
     }[finalPlacement.split('-')[0]];
-    var arrowTransform = 'none';
+    let arrowTransform = 'none';
     switch (staticSide) {
       case 'right':
         arrowTransform = 'rotateY(180deg)';
@@ -96,29 +87,36 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
         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") : '',
+      Object.assign(arrowRef.current.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
         right: '',
-        bottom: ''
-      }, _defineProperty(_Object$assign, staticSide, '-6px'), _defineProperty(_Object$assign, "transform", arrowTransform), _Object$assign));
+        bottom: '',
+        [staticSide]: '-6px',
+        transform: arrowTransform
+      });
     }
   });
-  var updatedChildren = /*#__PURE__*/cloneElement(children, _objectSpread({}, getReferenceProps(_objectSpread({
-    ref: anchorRef
-  }, children.props))));
+  const updatedChildren = /*#__PURE__*/cloneElement(children, {
+    ...getReferenceProps({
+      ref: anchorRef,
+      ...children.props
+    })
+  });
 
   //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
-  var inDialog = useIsInDialog(refs.domReference.current);
-  var TooltipEl = /*#__PURE__*/jsxs(StyledTooltip, _objectSpread(_objectSpread(_objectSpread({}, rest), getFloatingProps({
-    ref: tooltipRef,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      position: strategy,
-      top: y || 0,
-      left: x || 0
-    })
-  })), {}, {
+  const inDialog = useIsInDialog(refs.domReference.current);
+  const TooltipEl = /*#__PURE__*/jsxs(StyledTooltip, {
+    ...rest,
+    ...getFloatingProps({
+      ref: tooltipRef,
+      style: {
+        ...style,
+        position: strategy,
+        top: y || 0,
+        left: x || 0
+      }
+    }),
     children: [title, /*#__PURE__*/jsx(ArrowWrapper, {
       ref: arrowRef,
       children: /*#__PURE__*/jsx(TooltipArrow, {
@@ -128,7 +126,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
         })
       })
     })]
-  }));
+  });
   return /*#__PURE__*/jsxs(Fragment, {
     children: [inDialog ? /*#__PURE__*/jsx(Fragment, {
       children: shouldOpen && open && TooltipEl

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

@@ -1,19 +1,39 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens.colors,
-  white = _tokens$colors.text.static_icons__primary_white.rgba,
-  background = _tokens$colors.ui.background__overlay.rgba,
-  ui = tokens.typography.ui,
-  _tokens$spacings$comf = tokens.spacings.comfortable,
-  spacingXlarge = _tokens$spacings$comf.x_large,
-  spacingSmall = _tokens$spacings$comf.small,
-  borderRadius = tokens.shape.corners.borderRadius;
-var tooltip = {
-  typography: _objectSpread(_objectSpread({}, ui.tooltip), {}, {
+const {
+  colors: {
+    text: {
+      static_icons__primary_white: {
+        rgba: white
+      }
+    },
+    ui: {
+      background__overlay: {
+        rgba: background
+      }
+    }
+  },
+  typography: {
+    ui
+  },
+  spacings: {
+    comfortable: {
+      x_large: spacingXlarge,
+      small: spacingSmall
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const tooltip = {
+  typography: {
+    ...ui.tooltip,
     color: white
-  }),
-  background: background,
+  },
+  background,
   border: {
     type: 'border',
     radius: borderRadius

package/dist/esm/components/TopBar/Actions.js

@@ -1,22 +1,20 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var StyledActions = styled.div.withConfig({
+const StyledActions = styled.div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
 })(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
-var Actions = /*#__PURE__*/forwardRef(function Actions(_ref, ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(StyledActions, _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
+const Actions = /*#__PURE__*/forwardRef(function Actions({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledActions, {
+    ref: ref,
+    ...props,
     children: children
-  }));
+  });
 });
 
 // Actions.displayName = 'eds-topbar-actions'

package/dist/esm/components/TopBar/CustomContent.js

@@ -1,22 +1,20 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var StyledCustomContent = styled.div.withConfig({
+const StyledCustomContent = styled.div.withConfig({
   displayName: "CustomContent__StyledCustomContent",
   componentId: "sc-d0e83a-0"
 })(["grid-area:center;"]);
-var CustomContent = /*#__PURE__*/forwardRef(function CustomContent(_ref, ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(StyledCustomContent, _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
+const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledCustomContent, {
+    ref: ref,
+    ...props,
     children: children
-  }));
+  });
 });
 
 // CustomContent.displayName = 'eds-topbar-customcontent'

package/dist/esm/components/TopBar/Header.js

@@ -1,22 +1,20 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var StyledHeader = styled.div.withConfig({
+const StyledHeader = styled.div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
 })(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:12px;align-items:center;"]);
-var Header = /*#__PURE__*/forwardRef(function Header(_ref, ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(StyledHeader, _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
+const Header = /*#__PURE__*/forwardRef(function Header({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledHeader, {
+    ref: ref,
+    ...props,
     children: children
-  }));
+  });
 });
 
 // Header.displayName = 'eds-topbar-header'