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

package/dist/esm/components/TextField/TextField.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, { ThemeProvider } from 'styled-components';
 import { Field } from './Field.js';
@@ -9,79 +11,79 @@ import { Label } from '../Label/Label.js';
 import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const Container = styled.div.withConfig({
+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%;"]);
-const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
-  let {
-    id,
-    label,
-    meta,
-    unit,
-    helperText,
-    placeholder,
-    disabled,
-    multiline,
-    className,
-    variant = 'default',
-    inputRef,
-    inputIcon,
-    helperIcon,
-    rowsMax,
-    style,
-    ...other
-  } = _ref;
-  const helperTextId = useId(null, 'helpertext');
-  const inputProps = {
+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,
+      multiline = _ref.multiline,
+      className = _ref.className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+      inputRef = _ref.inputRef,
+      inputIcon = _ref.inputIcon,
+      helperIcon = _ref.helperIcon,
+      rowsMax = _ref.rowsMax,
+      style = _ref.style,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var helperTextId = useId(null, 'helpertext');
+
+  var inputProps = _objectSpread({
     'aria-describedby': helperTextId,
-    multiline,
-    disabled,
-    placeholder,
-    id,
-    variant,
+    multiline: multiline,
+    disabled: disabled,
+    placeholder: placeholder,
+    id: id,
+    variant: variant,
     ref: inputRef,
-    inputIcon,
-    unit,
-    rowsMax,
-    ...other
-  };
-  const helperProps = {
+    inputIcon: inputIcon,
+    unit: unit,
+    rowsMax: rowsMax
+  }, other);
+
+  var helperProps = {
     id: helperTextId,
-    variant,
-    helperText,
+    variant: variant,
+    helperText: helperText,
     icon: helperIcon,
-    disabled
+    disabled: disabled
   };
-  const containerProps = {
-    ref,
-    className,
-    style
+  var containerProps = {
+    ref: ref,
+    className: className,
+    style: style
   };
-  const labelProps = {
+  var labelProps = {
     htmlFor: id,
-    label,
-    meta,
-    disabled
+    label: label,
+    meta: meta,
+    disabled: disabled
   };
-  const showLabel = label || meta;
-  const showHelperText = helperText;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+  var showLabel = label || meta;
+  var showHelperText = helperText;
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, textfield);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(Container, { ...containerProps,
+    children: /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
       children: /*#__PURE__*/jsxs(TextFieldProvider, {
-        children: [showLabel && /*#__PURE__*/jsx(Label, { ...labelProps
-        }), /*#__PURE__*/jsx(Field, { ...inputProps
-        }), showHelperText && /*#__PURE__*/jsx(TextfieldHelperText, { ...helperProps
-        })]
+        children: [showLabel && /*#__PURE__*/jsx(Label, _objectSpread({}, labelProps)), /*#__PURE__*/jsx(Field, _objectSpread({}, inputProps)), showHelperText && /*#__PURE__*/jsx(TextfieldHelperText, _objectSpread({}, helperProps))]
       })
-    })
+    }))
   });
 });
 

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

@@ -1,16 +1,12 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens as tokens$1 } from '@equinor/eds-tokens';
 
-const {
-  colors,
-  typography,
-  spacings: {
-    comfortable: {
-      small,
-      x_small
-    }
-  }
-} = tokens$1;
-const textfield = {
+var colors = tokens$1.colors,
+    typography = tokens$1.typography,
+    _tokens$spacings$comf = tokens$1.spacings.comfortable,
+    small = _tokens$spacings$comf.small,
+    x_small = _tokens$spacings$comf.x_small;
+var textfield = {
   background: colors.ui.background__light.hex,
   border: {
     type: 'border',
@@ -40,9 +36,9 @@ const textfield = {
   },
   entities: {
     unit: {
-      typography: { ...typography.input.label,
+      typography: _objectSpread(_objectSpread({}, typography.input.label), {}, {
         color: colors.text.static_icons__tertiary.hex
-      },
+      }),
       states: {
         disabled: {
           typography: {
@@ -63,7 +59,7 @@ const textfield = {
     }
   }
 };
-const error = {
+var error = {
   border: {
     type: 'border',
     radius: 0,
@@ -82,7 +78,7 @@ const error = {
     }
   }
 };
-const warning = {
+var warning = {
   border: {
     type: 'border',
     radius: 0,
@@ -101,7 +97,7 @@ const warning = {
     }
   }
 };
-const success = {
+var success = {
   border: {
     type: 'border',
     radius: 0,

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

@@ -1,3 +1,6 @@
+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 * as Input_tokens from '../Input/Input.tokens.js';
@@ -6,33 +9,23 @@ import { typographyTemplate, useAutoResize, mergeRefs, spacingsTemplate, outline
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const {
-  input
-} = Input_tokens;
+var _excluded = ["variant", "disabled", "type", "rowsMax"];
+var input = input$1;
 
-const Variation = _ref => {
-  let {
-    variant,
-    token,
-    density
-  } = _ref;
+var Variation = function Variation(_ref) {
+  var variant = _ref.variant,
+      token = _ref.token,
+      density = _ref.density;
 
   if (!variant) {
-    return ``;
+    return "";
   }
 
-  const {
-    states: {
-      focus: {
-        outline: focusOutline
-      },
-      active: {
-        outline: activeOutline
-      }
-    },
-    boxShadow
-  } = token;
-  let spacings = input.spacings;
+  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;
@@ -41,53 +34,58 @@ const Variation = _ref => {
   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));
 };
 
-const StyledTextarea = styled.textarea.withConfig({
+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);
-const Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref2, ref) {
-  let {
-    variant = 'default',
-    disabled = false,
-    type = 'text',
-    rowsMax,
-    ...other
-  } = _ref2;
-  const actualVariant = variant === 'default' ? 'input' : variant;
-  const inputVariant = Input_tokens[actualVariant];
-  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;
+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);
+
+  var actualVariant = variant === 'default' ? 'input' : variant;
+  var inputVariant = Input_tokens[actualVariant];
+
+  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;
 
   if (textareaEl) {
     fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
   }
 
-  const padding = parseInt(top) + parseInt(bottom);
-  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
+  var padding = parseInt(top) + parseInt(bottom);
+  var maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
   useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  const combinedRef = useMemo(() => mergeRefs(ref, setTextareaEl), [setTextareaEl, ref]);
-  const inputProps = {
+  var combinedRef = useMemo(function () {
+    return mergeRefs(ref, setTextareaEl);
+  }, [setTextareaEl, ref]);
+
+  var inputProps = _objectSpread({
     ref: combinedRef,
-    type,
-    disabled,
-    variant,
+    type: type,
+    disabled: disabled,
+    variant: variant,
     token: inputVariant,
-    density,
-    ...other
-  };
-  return /*#__PURE__*/jsx(StyledTextarea, { ...inputProps
-  });
+    density: density
+  }, other);
+
+  return /*#__PURE__*/jsx(StyledTextarea, _objectSpread({}, inputProps));
 });
 
 export { Textarea };

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

@@ -1,3 +1,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 styled from 'styled-components';
 import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs } from '@equinor/eds-utils';
@@ -5,47 +9,41 @@ import { tooltip } from './Tooltip.tokens.js';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss, FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-const StyledTooltip = styled.div.withConfig({
+var _excluded = ["title", "placement", "children", "style", "enterDelay"];
+var StyledTooltip = styled.div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
 })(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background);
-const ArrowWrapper = styled.div.withConfig({
+var 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);
-const TooltipArrow = styled.svg.withConfig({
+var 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);
-const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
-  let {
-    title,
-    placement = 'bottom',
-    children,
-    style,
-    enterDelay = 100,
-    ...rest
-  } = _ref;
-  const arrowRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const shouldOpen = title !== '';
-  const {
-    x,
-    y,
-    reference,
-    floating,
-    strategy,
-    context,
-    middlewareData: {
-      arrow: {
-        x: arrowX,
-        y: arrowY
-      } = {}
-    },
-    placement: finalPlacement
-  } = useFloating({
-    placement,
-    open,
+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
@@ -53,26 +51,43 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
       element: arrowRef
     })],
     whileElementsMounted: autoUpdate
-  });
-  const anchorRef = useMemo(() => mergeRefs(reference, children === null || children === void 0 ? void 0 : children.ref), [reference, children === null || children === void 0 ? void 0 : children.ref]);
-  const tooltipRef = useMemo(() => mergeRefs(floating, ref), [floating, ref]);
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([useHover(context, {
+  }),
+      x = _useFloating.x,
+      y = _useFloating.y,
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      strategy = _useFloating.strategy,
+      context = _useFloating.context,
+      _useFloating$middlewa = _useFloating.middlewareData.arrow;
+
+  _useFloating$middlewa = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa;
+  var arrowX = _useFloating$middlewa.x,
+      arrowY = _useFloating$middlewa.y,
+      finalPlacement = _useFloating.placement;
+  var anchorRef = useMemo(function () {
+    return mergeRefs(reference, children === null || children === void 0 ? void 0 : children.ref);
+  }, [reference, children === null || children === void 0 ? void 0 : children.ref]);
+  var tooltipRef = useMemo(function () {
+    return mergeRefs(floating, ref);
+  }, [floating, ref]);
+
+  var _useInteractions = useInteractions([useHover(context, {
     delay: {
       open: enterDelay
     }
   }), useFocus(context), useRole(context, {
     role: 'tooltip'
-  }), useDismiss(context)]);
-  const staticSide = {
+  }), useDismiss(context)]),
+      getReferenceProps = _useInteractions.getReferenceProps,
+      getFloatingProps = _useInteractions.getFloatingProps;
+
+  var staticSide = {
     top: 'bottom',
     right: 'left',
     bottom: 'top',
     left: 'right'
   }[finalPlacement.split('-')[0]];
-  let arrowTransform = 'none';
+  var arrowTransform = 'none';
 
   switch (staticSide) {
     case 'right':
@@ -93,33 +108,30 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
   }
 
   if (arrowRef.current) {
-    Object.assign(arrowRef.current.style, {
-      left: arrowX != null ? `${arrowX}px` : '',
-      top: arrowY != null ? `${arrowY}px` : '',
+    var _Object$assign;
+
+    Object.assign(arrowRef.current.style, (_Object$assign = {
+      left: arrowX != null ? "".concat(arrowX, "px") : '',
+      top: arrowY != null ? "".concat(arrowY, "px") : '',
       right: '',
-      bottom: '',
-      [staticSide]: '-6px',
-      transform: arrowTransform
-    });
+      bottom: ''
+    }, _defineProperty(_Object$assign, staticSide, '-6px'), _defineProperty(_Object$assign, "transform", arrowTransform), _Object$assign));
   }
 
-  const updatedChildren = /*#__PURE__*/cloneElement(children, { ...getReferenceProps({
-      ref: anchorRef,
-      ...children.props
-    })
-  });
+  var updatedChildren = /*#__PURE__*/cloneElement(children, _objectSpread({}, getReferenceProps(_objectSpread({
+    ref: anchorRef
+  }, children.props))));
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(FloatingPortal, {
       id: "eds-tooltip-container",
-      children: shouldOpen && open && /*#__PURE__*/jsxs(StyledTooltip, { ...rest,
-        ...getFloatingProps({
-          ref: tooltipRef,
-          style: { ...style,
-            position: strategy,
-            top: y || 0,
-            left: x || 0
-          }
-        }),
+      children: shouldOpen && open && /*#__PURE__*/jsxs(StyledTooltip, _objectSpread(_objectSpread(_objectSpread({}, rest), getFloatingProps({
+        ref: tooltipRef,
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          position: strategy,
+          top: y || 0,
+          left: x || 0
+        })
+      })), {}, {
         children: [title, /*#__PURE__*/jsx(ArrowWrapper, {
           ref: arrowRef,
           children: /*#__PURE__*/jsx(TooltipArrow, {
@@ -129,7 +141,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
             })
           })
         })]
-      })
+      }))
     }), updatedChildren]
   });
 });

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

@@ -1,38 +1,19 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-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,
+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), {}, {
     color: white
-  },
-  background,
+  }),
+  background: background,
   border: {
     type: 'border',
     radius: borderRadius

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

@@ -1,21 +1,23 @@
+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';
 
-const StyledActions = styled.div.withConfig({
+var _excluded = ["children"];
+var StyledActions = styled.div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
 })(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
-const Actions = /*#__PURE__*/forwardRef(function Actions(_ref, ref) {
-  let {
-    children,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/jsx(StyledActions, {
-    ref: ref,
-    ...props,
+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), {}, {
     children: children
-  });
+  }));
 }); // Actions.displayName = 'eds-topbar-actions'
 
 export { Actions };