@equinor/eds-core-react 1.1.0 → 2.0.0

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

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useCallback, useState, useRef, useImperativeHandle, useEffect } from 'react';
+import { forwardRef, useState, useMemo, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import styled, { ThemeProvider, css } from 'styled-components';
@@ -158,6 +158,8 @@ const defaultOptionDisabled = () => false;
 
 // MARK: component
 function AutocompleteInner(props, ref) {
+  const [controlledHighlightedIndex, setControlledHighlightedIndex] = useState(0);
+  const [lastScrollOffset, setLastScrollOffset] = useState(0);
   const {
     options = [],
     totalOptions,
@@ -229,6 +231,7 @@ function AutocompleteInner(props, ref) {
     if (onAddNewOption) return [AddSymbol, ..._availableItems];
     return _availableItems;
   }, [_availableItems, showSelectAll, onAddNewOption]);
+  const getSelectedIndex = useCallback(selectedItem => availableItems.findIndex(item => itemCompare ? itemCompare(item, selectedItem) : item === selectedItem), [availableItems, itemCompare]);
 
   //issue 2304, update dataset when options are added dynamically
   useEffect(() => {
@@ -366,20 +369,18 @@ function AutocompleteInner(props, ref) {
       }));
     },
     onHighlightedIndexChange({
-      highlightedIndex,
-      type
+      highlightedIndex
     }) {
-      if (type == useCombobox.stateChangeTypes.InputClick || type == useCombobox.stateChangeTypes.InputKeyDownArrowDown && !isOpen || type == useCombobox.stateChangeTypes.InputKeyDownArrowUp && !isOpen) {
-        //needs delay for dropdown to render before calling scroll
-        setTimeout(() => {
+      if (highlightedIndex >= 0 && rowVirtualizer.getVirtualItems) {
+        const visibleIndexes = rowVirtualizer.getVirtualItems().map(v => v.index);
+        if (!visibleIndexes.includes(highlightedIndex)) {
           rowVirtualizer.scrollToIndex(highlightedIndex, {
             align: allowSelectAll ? 'center' : 'auto'
           });
-        }, 1);
-      } else if (type !== useCombobox.stateChangeTypes.ItemMouseMove && type !== useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
-        rowVirtualizer.scrollToIndex(highlightedIndex, {
-          align: allowSelectAll ? 'center' : 'auto'
-        });
+        }
+      }
+      if (typeof rowVirtualizer.scrollOffset === 'number') {
+        setLastScrollOffset(rowVirtualizer.scrollOffset);
       }
     },
     onIsOpenChange: ({
@@ -387,6 +388,19 @@ function AutocompleteInner(props, ref) {
     }) => {
       if (!multiple && selectedItem !== null) {
         setAvailableItems(options);
+        setTimeout(() => {
+          if (controlledHighlightedIndex === 0) {
+            rowVirtualizer.scrollToOffset?.(0);
+          } else if (rowVirtualizer.scrollToOffset && lastScrollOffset > 0) {
+            rowVirtualizer.scrollToOffset(lastScrollOffset);
+          }
+          const visibleIndexes = rowVirtualizer.getVirtualItems?.().map(v => v.index) || [];
+          if (!visibleIndexes.includes(controlledHighlightedIndex)) {
+            rowVirtualizer.scrollToIndex(controlledHighlightedIndex, {
+              align: allowSelectAll ? 'center' : 'auto'
+            });
+          }
+        }, 10);
       }
     },
     onStateChange: ({
@@ -426,6 +440,8 @@ function AutocompleteInner(props, ref) {
       ...comboBoxProps,
       onSelectedItemChange: changes => {
         if (changes.selectedItem === AddSymbol) return;
+        const idx = getSelectedIndex(changes.selectedItem);
+        setControlledHighlightedIndex(idx >= 0 ? idx : 0);
         if (onOptionsChange) {
           let {
             selectedItem
@@ -438,7 +454,7 @@ function AutocompleteInner(props, ref) {
           });
         }
       },
-      stateReducer: (_, actionAndChanges) => {
+      stateReducer: (state, actionAndChanges) => {
         const {
           changes,
           type
@@ -447,19 +463,25 @@ function AutocompleteInner(props, ref) {
           case useCombobox.stateChangeTypes.InputClick:
             return {
               ...changes,
-              isOpen: !(disabled || readOnly)
+              isOpen: !(disabled || readOnly),
+              highlightedIndex: controlledHighlightedIndex
             };
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
           case useCombobox.stateChangeTypes.ItemClick:
-            if (changes.selectedItem === AddSymbol) {
+            {
+              if (changes.selectedItem === AddSymbol) {
+                return {
+                  ...changes,
+                  inputValue: ''
+                };
+              }
+              const idx = getSelectedIndex(changes.selectedItem);
+              setControlledHighlightedIndex(idx >= 0 ? idx : 0);
               return {
                 ...changes,
-                inputValue: ''
+                highlightedIndex: idx >= 0 ? idx : 0
               };
             }
-            return {
-              ...changes
-            };
           case useCombobox.stateChangeTypes.InputBlur:
             return {
               ...changes,
@@ -471,13 +493,19 @@ function AutocompleteInner(props, ref) {
               ...changes
             };
           case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
-          case useCombobox.stateChangeTypes.InputKeyDownHome:
             if (readOnly) {
               return {
                 ...changes,
                 isOpen: false
               };
             }
+            if (state.isOpen === false) {
+              return {
+                ...changes,
+                isOpen: true,
+                highlightedIndex: controlledHighlightedIndex
+              };
+            }
             return {
               ...changes,
               highlightedIndex: findNextIndex({
@@ -487,14 +515,36 @@ function AutocompleteInner(props, ref) {
                 allDisabled
               })
             };
+          case useCombobox.stateChangeTypes.InputKeyDownHome:
+            if (readOnly) {
+              return {
+                ...changes,
+                isOpen: false
+              };
+            }
+            return {
+              ...changes,
+              highlightedIndex: findNextIndex({
+                index: 0,
+                availableItems,
+                optionDisabled,
+                allDisabled
+              })
+            };
           case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
-          case useCombobox.stateChangeTypes.InputKeyDownEnd:
             if (readOnly) {
               return {
                 ...changes,
                 isOpen: false
               };
             }
+            if (state.isOpen === false) {
+              return {
+                ...changes,
+                isOpen: true,
+                highlightedIndex: controlledHighlightedIndex
+              };
+            }
             return {
               ...changes,
               highlightedIndex: findPrevIndex({
@@ -504,10 +554,27 @@ function AutocompleteInner(props, ref) {
                 allDisabled
               })
             };
+          case useCombobox.stateChangeTypes.InputKeyDownEnd:
+            if (readOnly) {
+              return {
+                ...changes,
+                isOpen: false
+              };
+            }
+            return {
+              ...changes,
+              highlightedIndex: findPrevIndex({
+                index: availableItems.length - 1,
+                availableItems,
+                optionDisabled,
+                allDisabled
+              })
+            };
           case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
             setSelectedItems([changes.selectedItem]);
             return {
-              ...changes
+              ...changes,
+              highlightedIndex: controlledHighlightedIndex
             };
           default:
             return changes;

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { Popover } from '../../Popover/index.js';
 import { filterDOMProps } from '@react-aria/utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -101,6 +101,12 @@ const FieldWrapper = /*#__PURE__*/forwardRef(({
   readonly,
   ...props
 }, ref) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  useEffect(() => {
+    if (ref && typeof ref !== 'function' && ref.current) {
+      setAnchorEl(ref.current);
+    }
+  }, [ref]);
   useEffect(() => {
     if (isOpen === false) {
       // Focus the first segment in the input field
@@ -123,7 +129,7 @@ const FieldWrapper = /*#__PURE__*/forwardRef(({
     }), /*#__PURE__*/jsx(Popover, {
       open: isOpen ?? false,
       onClose: () => setIsOpen(false),
-      anchorEl: ref.current,
+      anchorEl: anchorEl,
       placement: 'bottom-start',
       children: calendar
     })]

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

@@ -1,5 +1,4 @@
-import { useId } from '@equinor/eds-utils';
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import styled from 'styled-components';
 import { get } from './library.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -72,7 +71,7 @@ const Icon = /*#__PURE__*/forwardRef(function Icon({
   };
 
   // Accessibility
-  const titleId = useId(null, `${icon.prefix}-${icon.name}`);
+  const titleId = useId();
   if (title) {
     svgProps = {
       ...svgProps,

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

@@ -0,0 +1,61 @@
+import { useId } from 'react';
+
+/**
+ * Shared hook for TextField and Textarea that handles common logic
+ * for IDs, labels, helper text, and ARIA attributes
+ */
+const useInputField = ({
+  id,
+  label,
+  meta,
+  helperText,
+  helperIcon,
+  variant,
+  disabled,
+  className,
+  style
+}) => {
+  const generatedFieldId = useId();
+  const generatedHelperTextId = useId();
+
+  // Use provided ID or fall back to generated one
+  const fieldId = id ?? generatedFieldId;
+  const helperTextId = generatedHelperTextId;
+  const hasHelperText = Boolean(helperText);
+  const containerProps = {
+    className,
+    style: {
+      width: '100%',
+      ...style
+    },
+    color: variant
+  };
+  const labelProps = {
+    htmlFor: fieldId,
+    label,
+    meta,
+    disabled
+  };
+  const helperProps = {
+    id: hasHelperText ? helperTextId : null,
+    text: helperText,
+    icon: helperIcon
+  };
+  const ariaProps = {
+    id: fieldId,
+    'aria-invalid': variant === 'error' || undefined,
+    ...(hasHelperText && {
+      'aria-describedby': helperTextId
+    })
+  };
+  return {
+    fieldId,
+    helperTextId: hasHelperText ? helperTextId : null,
+    containerProps,
+    labelProps,
+    helperProps,
+    ariaProps
+  };
+};
+
+export { useInputField };

package/dist/esm/components/SideBar/SideBarAccordion/index.js

@@ -1,6 +1,6 @@
-import { forwardRef, useState, useMemo, Children } from 'react';
+import { forwardRef, useId, useState, useMemo, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { useId, mergeRefs, bordersTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { mergeRefs, bordersTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { chevron_up, chevron_down, arrow_drop_down } from '@equinor/eds-icons';
 import { useSideBar } from '../SideBar.context.js';
 import { sidebar } from '../SideBar.tokens.js';
@@ -104,7 +104,8 @@ const SideBarAccordion = /*#__PURE__*/forwardRef(function SideBarAccordion({
   disabled,
   ...rest
 }, ref) {
-  const accordionId = useId(id, 'accordion');
+  const generatedAccordionId = useId();
+  const accordionId = id ?? generatedAccordionId;
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   const [accordionIsOpen, setAccordionIsOpen] = useState(isExpanded);
   const [anchorEl, setAnchorEl] = useState(null);

package/dist/esm/components/Slider/Slider.js

@@ -1,10 +1,10 @@
-import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
+import { forwardRef, useState, useEffect, useRef, useId, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
 import { MinMax } from './MinMax.js';
 import { Output } from './Output.js';
 import { SliderInput } from './SliderInput.js';
-import { useId, bordersTemplate } from '@equinor/eds-utils';
+import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 const {
@@ -216,9 +216,12 @@ const Slider = /*#__PURE__*/forwardRef(function Slider({
       setMousePressed(false);
     }
   };
-  let inputIdA = useId(null, 'inputA');
-  let inputIdB = useId(null, 'inputB');
-  let inputId = useId(null, 'thumb');
+  const generatedInputIdA = useId();
+  const generatedInputIdB = useId();
+  const generatedInputId = useId();
+  let inputIdA = generatedInputIdA;
+  let inputIdB = generatedInputIdB;
+  let inputId = generatedInputId;
   if (rest['id']) {
     const overrideId = rest['id'];
     inputIdA = `${overrideId}-thumb-a`;

package/dist/esm/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
-import { forwardRef, useRef, useMemo, useState, useEffect } from 'react';
+import { forwardRef, useId, useRef, useMemo, useState, useEffect } from 'react';
 import { TabsProvider } from './Tabs.context.js';
 import { token } from './Tabs.tokens.js';
-import { useId, mergeRefs, useToken } from '@equinor/eds-utils';
+import { mergeRefs, useToken } from '@equinor/eds-utils';
 import { ThemeProvider } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
@@ -16,7 +16,8 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs({
   id,
   ...props
 }, ref) {
-  const tabsId = useId(id, 'tabs');
+  const generatedTabsId = useId();
+  const tabsId = id ?? generatedTabsId;
   const tabsRef = useRef(null);
   const combinedTabsRef = useMemo(() => mergeRefs(tabsRef, ref), [tabsRef, ref]);
   const [tabsFocused, setTabsFocused] = useState(false);

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

@@ -1,93 +1,60 @@
 import { forwardRef } from 'react';
-import { useId } from '@equinor/eds-utils';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useInputField } from '../InputWrapper/useInputField.js';
 import { InputWrapper } from '../InputWrapper/InputWrapper.js';
-import { Textarea } from '../Textarea/Textarea.js';
 import { Input } from '../Input/Input.js';
 
-/** Proxy component for working around typescript and element type switching */
-const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
-  return props.$multiline ? /*#__PURE__*/jsx(Textarea, {
-    ref: ref,
-    ...props
-  }) : /*#__PURE__*/jsx(Input, {
-    ref: ref,
-    ...props
-  });
-});
 const TextField = /*#__PURE__*/forwardRef(function TextField({
-  id: _id,
+  id,
   label,
   meta,
   unit,
   helperText,
   placeholder,
   disabled,
-  multiline = false,
   className,
   variant,
   inputIcon,
   helperIcon,
   style,
-  rowsMax,
-  textareaRef,
   inputRef,
   ...other
 }, ref) {
-  const id = useId(_id, 'input');
-  const helperTextId = useId(null, 'helpertext');
+  const {
+    ariaProps,
+    containerProps,
+    labelProps,
+    helperProps
+  } = useInputField({
+    id,
+    label,
+    meta,
+    helperText,
+    helperIcon,
+    variant,
+    disabled,
+    className,
+    style
+  });
   const hasRightAdornments = Boolean(unit || inputIcon);
-  let fieldProps = {
-    'aria-invalid': variant === 'error' || undefined,
+  const fieldProps = {
+    ...ariaProps,
     disabled,
     placeholder,
-    id,
     variant,
     rightAdornments: hasRightAdornments && /*#__PURE__*/jsxs(Fragment, {
       children: [inputIcon, /*#__PURE__*/jsx("span", {
         children: unit
       })]
     }),
-    rowsMax,
-    ref: ref || inputRef || textareaRef,
-    $multiline: multiline,
+    ref: ref || inputRef,
     ...other
   };
-  let helperProps = {
-    id: null,
-    text: helperText,
-    icon: helperIcon,
-    disabled
-  };
-  const containerProps = {
-    className,
-    style: {
-      width: '100%',
-      ...style
-    },
-    color: variant
-  };
-  const labelProps = {
-    htmlFor: id,
-    label,
-    meta,
-    disabled
-  };
-  if (helperText) {
-    fieldProps = {
-      'aria-describedby': helperTextId,
-      ...fieldProps
-    };
-    helperProps = {
-      ...helperProps,
-      id: helperTextId
-    };
-  }
   return /*#__PURE__*/jsx(InputWrapper, {
     helperProps: helperProps,
     labelProps: labelProps,
     ...containerProps,
-    children: /*#__PURE__*/jsx(Field, {
+    children: /*#__PURE__*/jsx(Input, {
       ...fieldProps
     })
   });

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

@@ -1,22 +1,58 @@
-import { forwardRef, useState, useCallback } from 'react';
+import { forwardRef, useMemo } 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 { useInputField } from '../InputWrapper/useInputField.js';
+import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
+import { Input } from '../Input/Input.js';
 
 const {
   input
 } = Input_tokens;
+const leftAdornmentStyles = {
+  style: {
+    alignItems: 'flex-start'
+  }
+};
+const rightAdornmentStyles = {
+  style: {
+    alignItems: 'flex-start',
+    pointerEvents: 'none'
+  }
+};
 const Textarea = /*#__PURE__*/forwardRef(function Textarea({
+  id,
+  label,
+  meta,
+  helperText,
+  placeholder,
+  disabled,
+  className,
   variant,
-  disabled = false,
-  type = 'text',
+  inputIcon,
+  helperIcon,
+  style,
   rowsMax,
   ...other
 }, ref) {
-  const [textareaEl, setTextareaEl] = useState(null);
+  const {
+    ariaProps,
+    containerProps,
+    labelProps,
+    helperProps
+  } = useInputField({
+    id,
+    label,
+    meta,
+    helperText,
+    helperIcon,
+    variant,
+    disabled,
+    className,
+    style
+  });
   const {
     density
   } = useEds();
@@ -28,40 +64,35 @@ const Textarea = /*#__PURE__*/forwardRef(function Textarea({
     top,
     bottom
   } = spacings;
-  let fontSize = 16;
-  if (textareaEl) {
-    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
-  }
-  const padding = parseInt(top) + parseInt(bottom);
-  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
-  useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  const combinedRef = useCallback(() => mergeRefs(ref, setTextareaEl), [setTextareaEl, ref])();
-  const inputProps = {
-    ref: combinedRef,
-    type,
+
+  // Calculate maxHeight if rowsMax is provided
+  // Using default fontSize of 16px for initial calculation
+  // useAutoResize will handle actual resizing based on element's scrollHeight
+  const maxHeight = rowsMax ? parseFloat(lineHeight) * 16 * rowsMax + parseInt(top) + parseInt(bottom) : null;
+  const autoResizeRef = useAutoResize(maxHeight);
+  const combinedRef = useMemo(() => mergeRefs(ref, autoResizeRef), [ref, autoResizeRef]);
+  const fieldProps = {
+    ...ariaProps,
     disabled,
+    placeholder,
     variant,
-    ...other
-  };
-  const leftAdornmentStyles = {
-    style: {
-      alignItems: 'flex-start'
-    }
-  };
-  const rigthAdornmentStyles = {
-    style: {
-      alignItems: 'flex-start',
-      pointerEvents: 'none'
-    }
-  };
-  return /*#__PURE__*/jsx(Input, {
-    as: "textarea",
-    rightAdornmentsProps: rigthAdornmentStyles,
+    rightAdornments: inputIcon,
+    rightAdornmentsProps: rightAdornmentStyles,
     leftAdornmentsProps: leftAdornmentStyles,
+    as: 'textarea',
+    ref: combinedRef,
     style: {
       height: 'auto'
     },
-    ...inputProps
+    ...other
+  };
+  return /*#__PURE__*/jsx(InputWrapper, {
+    helperProps: helperProps,
+    labelProps: labelProps,
+    ...containerProps,
+    children: /*#__PURE__*/jsx(Input, {
+      ...fieldProps
+    })
   });
 });
 

package/dist/esm/index.js

@@ -30,6 +30,7 @@ export { Row as TableRow } from './components/Table/Row/Row.js';
 export { Caption as TableCaption } from './components/Table/Caption.js';
 export { Divider } from './components/Divider/Divider.js';
 export { TextField } from './components/TextField/TextField.js';
+export { Textarea } from './components/Textarea/Textarea.js';
 export { ListItem } from './components/List/ListItem.js';
 export { AccordionItem } from './components/Accordion/AccordionItem.js';
 export { AccordionHeader } from './components/Accordion/AccordionHeader.js';
@@ -86,6 +87,7 @@ 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';
+export { useInputField } from './components/InputWrapper/useInputField.js';
 export { useSideBar } from './components/SideBar/SideBar.context.js';
 export { SidebarLink } from './components/SideBar/SidebarLink/index.js';
 export { SideBarContent } from './components/SideBar/SideBarContent.js';

package/dist/types/components/InputWrapper/index.d.ts

@@ -0,0 +1,5 @@
+export { InputWrapper } from './InputWrapper';
+export type { InputWrapperProps } from './InputWrapper';
+export { useInputField } from './useInputField';
+export type { InputFieldConfig, UseInputFieldReturn } from './useInputField';
+export type { BaseInputFieldProps } from './types';

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import type { Variants } from '../types';
+/**
+ * Base props shared by all input field components (TextField, Textarea, etc.)
+ */
+export type BaseInputFieldProps = {
+    /** Variants */
+    variant?: Variants;
+    /** Input unique id. If this is not provided, one will be generated */
+    id?: string;
+    /** Label text */
+    label?: ReactNode;
+    /** Meta text */
+    meta?: ReactNode;
+    /** Helper text */
+    helperText?: string;
+    /** InputIcon */
+    inputIcon?: ReactNode;
+    /** HelperIcon */
+    helperIcon?: ReactNode;
+};