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

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

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 import { useAutocompleteContext } from './AutocompleteContext.js';
 import { RightAdornments } from './RightAdornments.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Chip } from '../Chip/Chip.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Input } from '../Input/Input.js';
+import { Chip } from '../Chip/Chip.js';
 
 const UnstyledInput = styled.input.withConfig({
   displayName: "MultipleInput__UnstyledInput",
@@ -76,7 +76,7 @@ const MultipleInput = () => {
           if (el) chipRefs.current.set(getLabel(item), el);else chipRefs.current.delete(getLabel(item));
         },
         style: {
-          outline: '1px solid var(--eds-color-accent-12)',
+          outline: '1px solid var(--eds_interactive_primary__resting, rgba(0, 112, 121, 1))',
           ...(density === 'compact' && {
             height: '16px',
             fontSize: '12px',

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

@@ -41,10 +41,12 @@ const OptionList = ({
 
   // MARK: popover toggle
   useIsomorphicLayoutEffect(() => {
-    if (isOpen) {
-      refs.floating.current?.showPopover();
-    } else {
-      refs.floating.current?.hidePopover();
+    if (refs.floating.current?.hasAttribute('popover')) {
+      if (isOpen) {
+        refs.floating.current.showPopover();
+      } else {
+        refs.floating.current.hidePopover();
+      }
     }
   }, [isOpen, refs.floating]);
   const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;

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

@@ -43,6 +43,7 @@ const useAutocomplete = ({
   variant,
   onClear,
   ref,
+  id,
   ...other
 }) => {
   const [lastScrollOffset, setLastScrollOffset] = useState(0);
@@ -204,6 +205,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],

package/dist/esm/components/Datepicker/calendars/CalendarGrid.js

@@ -1,5 +1,4 @@
-import { useLocale, useCalendarGrid } from 'react-aria';
-import { getWeeksInMonth } from '@internationalized/date';
+import { useCalendarGrid } from 'react-aria';
 import { CalendarCell } from './CalendarCell.js';
 import { YearGrid } from './YearGrid.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -17,9 +16,6 @@ function CalendarGrid({
   setYearPickerPage,
   ...props
 }) {
-  const {
-    locale
-  } = useLocale();
   const {
     gridProps,
     headerProps,
@@ -29,9 +25,9 @@ function CalendarGrid({
     weekdayStyle: 'long'
   }, state);
 
-  // Get the number of weeks in the month so that we can render the proper number of rows.
-  const howManyWeeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-  const weeksInMonthArray = [...new Array(howManyWeeksInMonth).keys()];
+  // Always render 6 rows (the maximum weeks in any month) so the calendar
+  // height stays consistent when navigating between months.
+  const weeksInMonthArray = [...new Array(6).keys()];
   return showYearPicker ? /*#__PURE__*/jsx(YearGrid, {
     year: state.focusedDate.year,
     setFocusedYear: year => {

package/dist/esm/components/Datepicker/calendars/CalendarHeader.js

@@ -21,7 +21,7 @@ function TodayPicker({
     onClick: () => onClick(new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())),
     variant: 'ghost',
     style: {
-      marginLeft: 16
+      marginLeft: 4
     },
     children: "Today"
   });
@@ -30,6 +30,10 @@ const HeaderActions = styled.div.withConfig({
   displayName: "CalendarHeader__HeaderActions",
   componentId: "sc-kuy15-1"
 })(["display:flex;align-items:center;width:100%;"]);
+const TitleButton = styled(Button).withConfig({
+  displayName: "CalendarHeader__TitleButton",
+  componentId: "sc-kuy15-2"
+})(["min-width:13.1rem;white-space:nowrap;font-size:", ";text-transform:capitalize;& > span{display:flex;justify-content:space-between;align-items:center;width:100%;}"], tokens.typography.heading.h5.fontSize);
 
 /**
  * The default header for the calendar components if no custom header is provided
@@ -61,15 +65,11 @@ function CalendarHeader({
         style: {
           flex: '1 1 auto'
         }
-      }), /*#__PURE__*/jsxs(Button, {
+      }), /*#__PURE__*/jsxs(TitleButton, {
         onClick: () => setShowYearPicker(!showYearPicker),
         "data-testid": 'heading',
         "aria-live": 'polite',
         variant: 'ghost',
-        style: {
-          fontSize: tokens.typography.heading.h5.fontSize,
-          textTransform: 'capitalize'
-        },
         children: [title, /*#__PURE__*/jsx(Icon, {
           data: showYearPicker ? chevron_up : chevron_down
         })]

package/dist/esm/components/Datepicker/fields/DateSegment.js

@@ -30,7 +30,10 @@ function DateSegment({
     formatOptions,
     timezone
   } = useDatePickerContext();
-  const formatter = useDateFormatter(formatOptions);
+  const formatter = useDateFormatter({
+    ...formatOptions,
+    timeZone: timezone
+  });
   const parts = state.value ? formatter.formatToParts(state.value.toDate(timezone)) : [];
   const part = parts.find(p => p.type === segment.type);
   const value = segment.isPlaceholder || segment.type === 'literal' ? segment.text : part?.value ?? segment.text;

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/Popover/Popover.js

@@ -99,12 +99,12 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
   } = useInteractions([useDismiss(context)]);
   useEffect(() => {
     if (!elements.floating) return;
-    if (open) {
-      if (elements.floating.isConnected) {
+    if (elements.floating.hasAttribute('popover')) {
+      if (open) {
         elements.floating.showPopover();
+      } else {
+        elements.floating.hidePopover();
       }
-    } else {
-      elements.floating.hidePopover();
     }
   }, [open, elements.floating]);
   useEffect(() => {

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

@@ -38,6 +38,7 @@ const Button = /*#__PURE__*/forwardRef(function Button({
     ...rest,
     children: icon ? children : /*#__PURE__*/jsx(TypographyNext, {
       as: "span",
+      className: "eds-button__label",
       family: "ui",
       size: typographySize,
       lineHeight: "squished",

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

@@ -1,6 +1,32 @@
 import { forwardRef, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+/**
+ * Icon component for EDS 2.0
+ *
+ * Features:
+ * - Automatic sizing from parent's data-font-size via --eds-typography-icon-size
+ * - Dynamic fallback sizing (1.5em) when no tokens are set
+ * - Explicit size prop for standalone usage
+ * - WCAG 2.1 AA accessible with optional title for semantic icons
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@equinor/eds-core-react/next'
+ * import { save } from '@equinor/eds-icons'
+ *
+ * // Auto-sized from parent's data-font-size
+ * <div data-font-size="md">
+ *   <Icon data={warning} /> Error message
+ * </div>
+ *
+ * // Explicit size for standalone usage
+ * <Icon data={save} size="lg" />
+ *
+ * // Semantic icon with accessible name
+ * <Icon data={save} title="Save document" />
+ * ```
+ */
 const Icon = /*#__PURE__*/forwardRef(function Icon({
   data,
   title,
@@ -19,7 +45,7 @@ const Icon = /*#__PURE__*/forwardRef(function Icon({
     height = '24',
     width = '24'
   } = data;
-  const classes = ['icon', className].filter(Boolean).join(' ');
+  const classes = ['eds-icon', className].filter(Boolean).join(' ');
 
   // Accessibility: decorative icons are hidden, semantic icons have role="img"
   const accessibilityProps = title ? {

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,24 @@
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const Link = /*#__PURE__*/forwardRef(function Link({
+  variant = 'inline',
+  className,
+  children,
+  ...rest
+}, ref) {
+  const classes = ['eds-link', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/jsx("a", {
+    ref: ref,
+    className: classes,
+    "data-variant": variant,
+    "data-font-family": variant === 'standalone' ? 'ui' : undefined,
+    "data-font-size": variant === 'standalone' ? 'md' : undefined,
+    "data-line-height": variant === 'standalone' ? 'squished' : undefined,
+    ...rest,
+    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/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 };