@equinor/eds-core-react 2.4.0 → 2.4.1-beta.0

package/dist/esm/components/Autocomplete/useAutocomplete.js

@@ -23,6 +23,7 @@ const useAutocomplete = ({
   onInputChange,
   selectedOptions: _selectedOptions,
   selectionDisplay = 'summary',
+  chipCount,
   multiple,
   itemToKey: _itemToKey,
   itemCompare: _itemCompare,
@@ -43,6 +44,7 @@ const useAutocomplete = ({
   variant,
   onClear,
   ref,
+  id,
   ...other
 }) => {
   const [lastScrollOffset, setLastScrollOffset] = useState(0);
@@ -204,6 +206,9 @@ const useAutocomplete = ({
 
   // MARK: downshift state
   let comboBoxProps = {
+    ...(id !== undefined && {
+      inputId: id
+    }),
     items: availableItems,
     //can not pass readonly type to downshift so we cast it to regular T[]
     initialSelectedItem: initialSelectedOptions[0],
@@ -591,6 +596,7 @@ const useAutocomplete = ({
     onInputChange,
     selectedOptions,
     selectionDisplay,
+    chipCount,
     itemToKey,
     itemCompare,
     allowSelectAll,

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

@@ -3,9 +3,9 @@ import styled, { ThemeProvider } from 'styled-components';
 import { useToken } from '@equinor/eds-utils';
 import { inputToken } from './InputWrapper.tokens.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 import { Label as Label$1 } from '../Label/Label.js';
 import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
-import { useEds } from '../EdsProvider/eds.context.js';
 
 const Container = styled.div.withConfig({
   displayName: "InputWrapper__Container",

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

@@ -4,8 +4,8 @@ import { input as input$1 } from '../Input/Input.tokens.js';
 import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 import { useInputField } from '../InputWrapper/useInputField.js';
-import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { Input } from '../Input/Input.js';
 
 const {

package/dist/esm-next/components/next/Banner/Banner.js

@@ -0,0 +1,88 @@
+import { forwardRef } from 'react';
+import { close } from '@equinor/eds-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { TypographyNext } from '../../Typography/Typography.new.js';
+
+const BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon({
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx("span", {
+    ref: ref,
+    className: ['eds-banner__icon', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage({
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(TypographyNext, {
+    ref: ref,
+    as: "p",
+    family: "ui",
+    size: "md",
+    baseline: "center",
+    lineHeight: "default",
+    tracking: "normal",
+    className: ['eds-banner__message', className].filter(Boolean).join(' '),
+    ...rest,
+    children: children
+  });
+});
+const BannerActions = /*#__PURE__*/forwardRef(function BannerActions({
+  placement = 'left',
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    className: ['eds-banner__actions', className].filter(Boolean).join(' '),
+    "data-placement": placement,
+    ...rest,
+    children: children
+  });
+});
+const BannerComponent = /*#__PURE__*/forwardRef(function Banner({
+  tone = 'info',
+  role = 'status',
+  onDismiss,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: ['eds-banner', className].filter(Boolean).join(' '),
+    "data-color-appearance": tone,
+    role: role,
+    ...rest,
+    children: [children, onDismiss && /*#__PURE__*/jsx(Button, {
+      variant: "ghost",
+      icon: true,
+      size: "small",
+      className: "eds-banner__dismiss",
+      "aria-label": "Dismiss",
+      onClick: onDismiss,
+      children: /*#__PURE__*/jsx(Icon, {
+        data: close
+      })
+    })]
+  });
+});
+BannerIcon.displayName = 'Banner.Icon';
+BannerMessage.displayName = 'Banner.Message';
+BannerActions.displayName = 'Banner.Actions';
+BannerComponent.displayName = 'Banner';
+const Banner = BannerComponent;
+Banner.Icon = BannerIcon;
+Banner.Message = BannerMessage;
+Banner.Actions = BannerActions;
+
+export { Banner };

package/dist/esm-next/components/next/Button/Button.js

@@ -4,8 +4,7 @@ import { TypographyNext } from '../../Typography/Typography.new.js';
 
 const SIZE_MAPPING = {
   small: 'sm',
-  default: 'md',
-  large: 'lg'
+  default: 'md'
 };
 const sizeToTypography = SIZE_MAPPING;
 const sizeToSelectableSpace = SIZE_MAPPING;

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

@@ -56,7 +56,7 @@ const Input = /*#__PURE__*/forwardRef(function Input({
       })]
     }), /*#__PURE__*/jsx(Component, {
       ref: ref,
-      type: type,
+      type: Component === 'textarea' ? undefined : type,
       disabled: disabled,
       readOnly: readOnly,
       className: ['eds-input', className].filter(Boolean).join(' '),

package/dist/esm-next/components/next/Link/Link.js

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '../Slot/Slot.js';
+
+const Link = /*#__PURE__*/forwardRef(function Link({
+  variant = 'inline',
+  asChild,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const classes = ['eds-link', className].filter(Boolean).join(' ');
+  const sharedProps = {
+    ref,
+    className: classes,
+    'data-variant': variant,
+    'data-color-appearance': 'info',
+    'data-font-family': variant === 'standalone' ? 'ui' : undefined,
+    'data-font-size': variant === 'standalone' ? 'md' : undefined,
+    'data-line-height': variant === 'standalone' ? 'squished' : undefined,
+    ...rest
+  };
+  if (asChild) {
+    return /*#__PURE__*/jsx(Slot, {
+      ...sharedProps,
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsx("a", {
+    ...sharedProps,
+    children: children
+  });
+});
+Link.displayName = 'Link';
+
+export { Link };

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

@@ -0,0 +1,118 @@
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { close, search } from '@equinor/eds-icons';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFieldIds } from '../Field/useFieldIds.js';
+import { Field } from '../Field/Field.js';
+import { Input } from '../Input/Input.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+
+const Search = /*#__PURE__*/forwardRef(function Search({
+  label,
+  description,
+  helperMessage,
+  id: providedId,
+  invalid,
+  disabled,
+  readOnly,
+  value,
+  defaultValue,
+  onChange,
+  onClear,
+  clearLabel = 'Clear search',
+  ...inputProps
+}, forwardedRef) {
+  const {
+    inputId,
+    labelId,
+    descriptionId,
+    helperMessageId,
+    getDescribedBy
+  } = useFieldIds(providedId);
+  const isControlled = value !== undefined;
+  const [internalHasValue, setInternalHasValue] = useState(() => Boolean(defaultValue));
+  const hasValue = isControlled ? Boolean(value) : internalHasValue;
+  const inputRef = useRef(null);
+  const mergedRef = useCallback(node => {
+    inputRef.current = node;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef]);
+  const handleChange = e => {
+    if (!isControlled) {
+      setInternalHasValue(Boolean(e.target.value));
+    }
+    onChange?.(e);
+  };
+  const handleClear = () => {
+    if (!isControlled && inputRef.current) {
+      // Direct DOM mutation: bypasses React's synthetic onChange, which is
+      // intentional — onClear is the designated callback for clear actions.
+      inputRef.current.value = '';
+      setInternalHasValue(false);
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const showClear = hasValue && !disabled && !readOnly;
+  // Accent only in interactive states — grey in error, readonly, disabled
+  const iconTone = disabled || readOnly || invalid ? 'neutral' : 'accent';
+  return /*#__PURE__*/jsx("search", {
+    className: "eds-search",
+    "aria-labelledby": label ? labelId : undefined,
+    children: /*#__PURE__*/jsxs(Field, {
+      disabled: disabled,
+      children: [label && /*#__PURE__*/jsx(Field.Label, {
+        id: labelId,
+        htmlFor: inputId,
+        children: label
+      }), description && /*#__PURE__*/jsx(Field.Description, {
+        id: descriptionId,
+        children: description
+      }), /*#__PURE__*/jsx(Input, {
+        ref: mergedRef,
+        id: inputId,
+        type: "search",
+        disabled: disabled,
+        readOnly: readOnly,
+        invalid: invalid,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: handleChange,
+        "aria-describedby": getDescribedBy({
+          hasDescription: !!description,
+          hasHelperMessage: !!helperMessage
+        }),
+        hideErrorIcon: true,
+        startAdornment: /*#__PURE__*/jsx(Icon, {
+          data: search,
+          className: "search-icon",
+          "data-color-appearance": iconTone
+        }),
+        endAdornment: showClear ? /*#__PURE__*/jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: invalid ? 'neutral' : 'accent',
+          onClick: handleClear,
+          "aria-label": clearLabel,
+          children: /*#__PURE__*/jsx(Icon, {
+            data: close
+          })
+        }) : undefined,
+        ...inputProps
+      }), helperMessage && /*#__PURE__*/jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        role: invalid ? 'alert' : undefined,
+        children: helperMessage
+      })]
+    })
+  });
+});
+Search.displayName = 'Search';
+
+export { Search };

package/dist/esm-next/components/next/Slot/Slot.js

@@ -0,0 +1,47 @@
+import { forwardRef, isValidElement, cloneElement } from 'react';
+
+function mergeClassNames(...classNames) {
+  return classNames.filter(Boolean).join(' ');
+}
+function mergeProps(slotProps, childProps) {
+  const merged = {
+    ...childProps
+  };
+  for (const key of Object.keys(slotProps)) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (key === 'className') {
+      merged[key] = mergeClassNames(slotValue, childValue);
+    } else if (key === 'style') {
+      merged[key] = {
+        ...slotValue,
+        ...childValue
+      };
+    } else if (typeof slotValue === 'function' && typeof childValue === 'function') {
+      merged[key] = (...args) => {
+        childValue(...args);
+        slotValue(...args);
+      };
+    } else if (slotValue !== undefined) {
+      merged[key] = slotValue;
+    }
+  }
+  return merged;
+}
+const Slot = /*#__PURE__*/forwardRef(function Slot({
+  children,
+  ...slotProps
+}, ref) {
+  if (! /*#__PURE__*/isValidElement(children)) {
+    return null;
+  }
+  const child = children;
+  const merged = mergeProps(slotProps, child.props);
+  return /*#__PURE__*/cloneElement(child, {
+    ...merged,
+    ref
+  });
+});
+Slot.displayName = 'Slot';
+
+export { Slot };

package/dist/esm-next/components/next/TextArea/TextArea.js

@@ -0,0 +1,131 @@
+import { forwardRef, useState, useEffect, useRef, useMemo } from 'react';
+import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
+import { info_circle } from '@equinor/eds-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFieldIds } from '../Field/useFieldIds.js';
+import { Field } from '../Field/Field.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Button } from '../Button/Button.js';
+import { Icon } from '../Icon/Icon.js';
+import { Input } from '../Input/Input.js';
+
+const TextArea = /*#__PURE__*/forwardRef(function TextArea({
+  label,
+  labelInfo,
+  indicator,
+  description,
+  helperMessage,
+  id: providedId,
+  invalid,
+  disabled,
+  maxRows,
+  showCharacterCount,
+  ...textareaProps
+}, ref) {
+  const {
+    inputId,
+    descriptionId,
+    helperMessageId,
+    getDescribedBy
+  } = useFieldIds(providedId);
+  const [charCount, setCharCount] = useState(() => String(textareaProps.value ?? textareaProps.defaultValue ?? '').length);
+  useEffect(() => {
+    if (textareaProps.value !== undefined) {
+      setCharCount(String(textareaProps.value).length);
+    }
+  }, [textareaProps.value]);
+  const {
+    maxLength,
+    onChange: onChangeProp,
+    ...restTextareaProps
+  } = textareaProps;
+  const handleChange = e => {
+    setCharCount(e.target.value.length);
+    onChangeProp?.(e);
+  };
+  const internalRef = useRef(null);
+  const [maxPixelHeight, setMaxPixelHeight] = useState(undefined);
+
+  // Auto-grow is always on. When maxRows is set, compute a pixel cap after
+  // mount using the element's actual rendered line-height and padding
+  // (density-aware). Until the cap is computed (or if maxRows is not set),
+  // pass Infinity so the textarea grows without bound.
+  const autoResizeHeight = maxRows !== undefined && maxPixelHeight !== undefined ? maxPixelHeight : Infinity;
+  const autoResizeRef = useAutoResize(autoResizeHeight);
+  useEffect(() => {
+    if (!maxRows || !internalRef.current) return;
+    const el = internalRef.current;
+    const updateMaxHeight = () => {
+      const style = window.getComputedStyle(el);
+      const lineHeight = parseFloat(style.lineHeight);
+      const paddingBlockStart = parseFloat(style.paddingBlockStart);
+      const paddingBlockEnd = parseFloat(style.paddingBlockEnd);
+      setMaxPixelHeight(lineHeight * maxRows + paddingBlockStart + paddingBlockEnd);
+    };
+    const observer = new ResizeObserver(updateMaxHeight);
+    observer.observe(el);
+    updateMaxHeight();
+    return () => observer.disconnect();
+  }, [maxRows]);
+  const combinedRef = useMemo(() => mergeRefs(ref, autoResizeRef, internalRef), [ref, autoResizeRef, internalRef]);
+  const showHelperRow = helperMessage || showCharacterCount;
+  return /*#__PURE__*/jsxs(Field, {
+    className: "eds-text-area",
+    disabled: disabled,
+    children: [label && /*#__PURE__*/jsxs("div", {
+      className: "label-row",
+      children: [/*#__PURE__*/jsx(Field.Label, {
+        htmlFor: inputId,
+        indicator: indicator,
+        children: label
+      }), labelInfo && /*#__PURE__*/jsx(Tooltip, {
+        title: labelInfo,
+        placement: "top",
+        children: /*#__PURE__*/jsx(Button, {
+          variant: "ghost",
+          icon: true,
+          round: true,
+          size: "small",
+          tone: "neutral",
+          "aria-label": "More information",
+          children: /*#__PURE__*/jsx(Icon, {
+            data: info_circle,
+            size: "xs"
+          })
+        })
+      })]
+    }), description && /*#__PURE__*/jsx(Field.Description, {
+      id: descriptionId,
+      children: description
+    }), /*#__PURE__*/jsx(Input, {
+      ref: combinedRef,
+      as: "textarea",
+      id: inputId,
+      disabled: disabled,
+      invalid: invalid,
+      maxLength: maxLength,
+      onChange: handleChange,
+      "aria-describedby": getDescribedBy({
+        hasDescription: !!description,
+        hasHelperMessage: !!helperMessage
+      }),
+      ...restTextareaProps
+    }), showHelperRow && /*#__PURE__*/jsxs("div", {
+      className: "helper-row",
+      children: [helperMessage && /*#__PURE__*/jsx(Field.HelperMessage, {
+        id: helperMessageId,
+        role: invalid ? 'alert' : undefined,
+        children: helperMessage
+      }), showCharacterCount && /*#__PURE__*/jsx("span", {
+        className: "char-count",
+        "data-font-family": "ui",
+        "data-font-size": "xs",
+        "aria-live": maxLength !== undefined && charCount >= maxLength * 0.8 ? 'polite' : 'off',
+        children: maxLength !== undefined ? `${charCount} / ${maxLength}` : charCount
+      })]
+    })]
+  });
+});
+TextArea.displayName = 'TextArea';
+
+export { TextArea };

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

@@ -27,7 +27,6 @@ const TextField = /*#__PURE__*/forwardRef(function TextField({
   } = useFieldIds(providedId);
   return /*#__PURE__*/jsxs(Field, {
     disabled: disabled,
-    className: "eds-text-field",
     children: [label && /*#__PURE__*/jsxs("div", {
       className: "eds-text-field__header",
       children: [/*#__PURE__*/jsx(Field.Label, {

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

@@ -0,0 +1,84 @@
+import { forwardRef, useId, useRef, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
+  title,
+  placement = 'top',
+  disabled,
+  children,
+  className,
+  onMouseEnter: onMouseEnterProp,
+  onMouseLeave: onMouseLeaveProp,
+  ...rest
+}, ref) {
+  const uid = useId();
+  const tooltipId = `eds-tooltip-${uid.replace(/:/g, '')}`;
+  const anchorName = `--${tooltipId}`;
+  const tooltipRef = useRef(null);
+  const hideTimer = useRef(null);
+  const active = Boolean(title) && !disabled;
+  const show = () => {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    if (!tooltipRef.current?.matches(':popover-open')) {
+      tooltipRef.current?.showPopover();
+    }
+  };
+
+  // Short delay so mouse can travel from trigger to tooltip (WCAG 1.4.13 — hoverable)
+  const hide = () => {
+    hideTimer.current = setTimeout(() => {
+      if (tooltipRef.current?.matches(':popover-open')) {
+        tooltipRef.current.hidePopover();
+      }
+    }, 100);
+  };
+
+  // Merge forwarded ref with internal ref
+  const setRef = node => {
+    tooltipRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+  };
+  if (!active) return children;
+  return /*#__PURE__*/jsxs("span", {
+    className: "eds-tooltip-anchor",
+    style: {
+      '--tooltip-anchor-name': anchorName
+    },
+    onMouseEnter: show,
+    onMouseLeave: hide,
+    onFocus: show,
+    onBlur: hide,
+    children: [/*#__PURE__*/cloneElement(children, {
+      'aria-describedby': tooltipId
+    }), /*#__PURE__*/jsx("div", {
+      ref: setRef,
+      id: tooltipId,
+      role: "tooltip"
+      // hint: top-layer + Escape/light-dismiss. Safari falls back to manual (no Escape).
+      ,
+      popover: "hint",
+      className: ['eds-tooltip', className].filter(Boolean).join(' '),
+      "data-placement": placement,
+      "data-space-proportions": "squished",
+      ...rest,
+      onMouseEnter: e => {
+        if (hideTimer.current) clearTimeout(hideTimer.current);
+        onMouseEnterProp?.(e);
+      },
+      onMouseLeave: e => {
+        hide();
+        onMouseLeaveProp?.(e);
+      },
+      children: /*#__PURE__*/jsx("span", {
+        className: "label",
+        "data-font-family": "ui",
+        "data-font-size": "sm",
+        "data-baseline": "center",
+        children: title
+      })
+    })]
+  });
+});
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };

package/dist/esm-next/index.next.js

@@ -1,9 +1,15 @@
+export { Banner } from './components/next/Banner/Banner.js';
 export { Button } from './components/next/Button/Button.js';
 export { Checkbox } from './components/next/Checkbox/Checkbox.js';
 export { Field } from './components/next/Field/Field.js';
 export { Icon } from './components/next/Icon/Icon.js';
 export { Input } from './components/next/Input/Input.js';
+export { Link } from './components/next/Link/Link.js';
 export { Radio } from './components/next/Radio/Radio.js';
+export { Search } from './components/next/Search/Search.js';
+export { Slot } from './components/next/Slot/Slot.js';
 export { Switch } from './components/next/Switch/Switch.js';
+export { TextArea } from './components/next/TextArea/TextArea.js';
 export { TextField } from './components/next/TextField/TextField.js';
+export { Tooltip } from './components/next/Tooltip/Tooltip.js';
 export { useFieldIds } from './components/next/Field/useFieldIds.js';