@equinor/eds-core-react 1.1.0 → 2.0.0

package/README.md

@@ -8,7 +8,7 @@ Read the [changelog](https://github.com/equinor/design-system/blob/main/packages
 ## Installation
 
 ```sh
-npm install @equinor/eds-core-react styled-components
+npm install @equinor/eds-core-react @equinor/eds-tokens styled-components 
 ```
 If you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
 ```sh
@@ -23,6 +23,21 @@ npm install typescript --save-dev
 <link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font.css" />
 ```
 
+### Required Stylesheets
+
+EDS Core React components require css variables and foundation styles for typography and spacing. Import both stylesheets from `@equinor/eds-tokens`:
+
+```css
+@import '@equinor/eds-tokens/css/variables';
+@import '@equinor/eds-tokens/css/foundation';
+```
+
+**Why both?**
+- **Variables CSS** (`/css/variables`) provides all design tokens (colors, spacing, typography variables)
+- **Foundation CSS** (`/css/foundation`) provides typography and spacing utility classes used in our components.
+
+For more information about the typography system, see the [Typography component documentation](./src/components/Typography/README.md).
+
 ## Usage
 
 ```jsx

package/dist/eds-core-react.cjs

@@ -2747,6 +2747,64 @@ const InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper({
   });
 });
 
+/**
+ * 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 = react.useId();
+  const generatedHelperTextId = react.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
+  };
+};
+
 const {
   colors: {
     ui: {
@@ -3088,148 +3146,145 @@ const Input$4 = /*#__PURE__*/react.forwardRef(function Input({
   );
 });
 
-const {
-  input
-} = tokens$5;
-const Textarea = /*#__PURE__*/react.forwardRef(function Textarea({
-  variant,
-  disabled = false,
-  type = 'text',
-  rowsMax,
-  ...other
-}, ref) {
-  const [textareaEl, setTextareaEl] = react.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);
-  }
-  const padding = parseInt(top) + parseInt(bottom);
-  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
-  edsUtils.useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  const combinedRef = react.useCallback(() => edsUtils.mergeRefs(ref, setTextareaEl), [setTextareaEl, ref])();
-  const inputProps = {
-    ref: combinedRef,
-    type,
-    disabled,
-    variant,
-    ...other
-  };
-  const leftAdornmentStyles = {
-    style: {
-      alignItems: 'flex-start'
-    }
-  };
-  const rigthAdornmentStyles = {
-    style: {
-      alignItems: 'flex-start',
-      pointerEvents: 'none'
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Input$4, {
-    as: "textarea",
-    rightAdornmentsProps: rigthAdornmentStyles,
-    leftAdornmentsProps: leftAdornmentStyles,
-    style: {
-      height: 'auto'
-    },
-    ...inputProps
-  });
-});
-
-/** Proxy component for working around typescript and element type switching */
-const Field = /*#__PURE__*/react.forwardRef(function Field(props, ref) {
-  return props.$multiline ? /*#__PURE__*/jsxRuntime.jsx(Textarea, {
-    ref: ref,
-    ...props
-  }) : /*#__PURE__*/jsxRuntime.jsx(Input$4, {
-    ref: ref,
-    ...props
-  });
-});
 const TextField = /*#__PURE__*/react.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 = edsUtils.useId(_id, 'input');
-  const helperTextId = edsUtils.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [inputIcon, /*#__PURE__*/jsxRuntime.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 = {
+  return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
+    helperProps: helperProps,
+    labelProps: labelProps,
+    ...containerProps,
+    children: /*#__PURE__*/jsxRuntime.jsx(Input$4, {
+      ...fieldProps
+    })
+  });
+});
+
+const {
+  input
+} = tokens$5;
+const leftAdornmentStyles = {
+  style: {
+    alignItems: 'flex-start'
+  }
+};
+const rightAdornmentStyles = {
+  style: {
+    alignItems: 'flex-start',
+    pointerEvents: 'none'
+  }
+};
+const Textarea = /*#__PURE__*/react.forwardRef(function Textarea({
+  id,
+  label,
+  meta,
+  helperText,
+  placeholder,
+  disabled,
+  className,
+  variant,
+  inputIcon,
+  helperIcon,
+  style,
+  rowsMax,
+  ...other
+}, ref) {
+  const {
+    ariaProps,
+    containerProps,
+    labelProps,
+    helperProps
+  } = useInputField({
+    id,
+    label,
+    meta,
+    helperText,
+    helperIcon,
+    variant,
+    disabled,
     className,
+    style
+  });
+  const {
+    density
+  } = useEds();
+  const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
+  const {
+    lineHeight
+  } = input$1.typography;
+  const {
+    top,
+    bottom
+  } = spacings;
+
+  // 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 = edsUtils.useAutoResize(maxHeight);
+  const combinedRef = react.useMemo(() => edsUtils.mergeRefs(ref, autoResizeRef), [ref, autoResizeRef]);
+  const fieldProps = {
+    ...ariaProps,
+    disabled,
+    placeholder,
+    variant,
+    rightAdornments: inputIcon,
+    rightAdornmentsProps: rightAdornmentStyles,
+    leftAdornmentsProps: leftAdornmentStyles,
+    as: 'textarea',
+    ref: combinedRef,
     style: {
-      width: '100%',
-      ...style
+      height: 'auto'
     },
-    color: variant
-  };
-  const labelProps = {
-    htmlFor: id,
-    label,
-    meta,
-    disabled
+    ...other
   };
-  if (helperText) {
-    fieldProps = {
-      'aria-describedby': helperTextId,
-      ...fieldProps
-    };
-    helperProps = {
-      ...helperProps,
-      id: helperTextId
-    };
-  }
   return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
     helperProps: helperProps,
     labelProps: labelProps,
     ...containerProps,
-    children: /*#__PURE__*/jsxRuntime.jsx(Field, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Input$4, {
       ...fieldProps
     })
   });
@@ -3316,7 +3371,7 @@ const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
   };
 
   // Accessibility
-  const titleId = edsUtils.useId(null, `${icon.prefix}-${icon.name}`);
+  const titleId = react.useId();
   if (title) {
     svgProps = {
       ...svgProps,
@@ -3532,7 +3587,8 @@ const Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion({
   id,
   ...props
 }, ref) {
-  const accordionId = edsUtils.useId(id, 'accordion');
+  const generatedAccordionId = react.useId();
+  const accordionId = id ?? generatedAccordionId;
   const {
     density
   } = useEds();
@@ -4044,7 +4100,8 @@ const Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs({
   id,
   ...props
 }, ref) {
-  const tabsId = edsUtils.useId(id, 'tabs');
+  const generatedTabsId = react.useId();
+  const tabsId = id ?? generatedTabsId;
   const tabsRef = react.useRef(null);
   const combinedTabsRef = react.useMemo(() => edsUtils.mergeRefs(tabsRef, ref), [tabsRef, ref]);
   const [tabsFocused, setTabsFocused] = react.useState(false);
@@ -6152,9 +6209,12 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider({
       setMousePressed(false);
     }
   };
-  let inputIdA = edsUtils.useId(null, 'inputA');
-  let inputIdB = edsUtils.useId(null, 'inputB');
-  let inputId = edsUtils.useId(null, 'thumb');
+  const generatedInputIdA = react.useId();
+  const generatedInputIdB = react.useId();
+  const generatedInputId = react.useId();
+  let inputIdA = generatedInputIdA;
+  let inputIdB = generatedInputIdB;
+  let inputId = generatedInputId;
   if (rest['id']) {
     const overrideId = rest['id'];
     inputIdA = `${overrideId}-thumb-a`;
@@ -9849,6 +9909,8 @@ const defaultOptionDisabled = () => false;
 
 // MARK: component
 function AutocompleteInner(props, ref) {
+  const [controlledHighlightedIndex, setControlledHighlightedIndex] = react.useState(0);
+  const [lastScrollOffset, setLastScrollOffset] = react.useState(0);
   const {
     options = [],
     totalOptions,
@@ -9920,6 +9982,7 @@ function AutocompleteInner(props, ref) {
     if (onAddNewOption) return [AddSymbol, ..._availableItems];
     return _availableItems;
   }, [_availableItems, showSelectAll, onAddNewOption]);
+  const getSelectedIndex = react.useCallback(selectedItem => availableItems.findIndex(item => itemCompare ? itemCompare(item, selectedItem) : item === selectedItem), [availableItems, itemCompare]);
 
   //issue 2304, update dataset when options are added dynamically
   react.useEffect(() => {
@@ -10057,20 +10120,18 @@ function AutocompleteInner(props, ref) {
       }));
     },
     onHighlightedIndexChange({
-      highlightedIndex,
-      type
+      highlightedIndex
     }) {
-      if (type == downshift.useCombobox.stateChangeTypes.InputClick || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown && !isOpen || type == downshift.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 !== downshift.useCombobox.stateChangeTypes.ItemMouseMove && type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
-        rowVirtualizer.scrollToIndex(highlightedIndex, {
-          align: allowSelectAll ? 'center' : 'auto'
-        });
+        }
+      }
+      if (typeof rowVirtualizer.scrollOffset === 'number') {
+        setLastScrollOffset(rowVirtualizer.scrollOffset);
       }
     },
     onIsOpenChange: ({
@@ -10078,6 +10139,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: ({
@@ -10117,6 +10191,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
@@ -10129,7 +10205,7 @@ function AutocompleteInner(props, ref) {
           });
         }
       },
-      stateReducer: (_, actionAndChanges) => {
+      stateReducer: (state, actionAndChanges) => {
         const {
           changes,
           type
@@ -10138,19 +10214,25 @@ function AutocompleteInner(props, ref) {
           case downshift.useCombobox.stateChangeTypes.InputClick:
             return {
               ...changes,
-              isOpen: !(disabled || readOnly)
+              isOpen: !(disabled || readOnly),
+              highlightedIndex: controlledHighlightedIndex
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
           case downshift.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 downshift.useCombobox.stateChangeTypes.InputBlur:
             return {
               ...changes,
@@ -10162,13 +10244,19 @@ function AutocompleteInner(props, ref) {
               ...changes
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
-          case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
             if (readOnly) {
               return {
                 ...changes,
                 isOpen: false
               };
             }
+            if (state.isOpen === false) {
+              return {
+                ...changes,
+                isOpen: true,
+                highlightedIndex: controlledHighlightedIndex
+              };
+            }
             return {
               ...changes,
               highlightedIndex: findNextIndex({
@@ -10178,14 +10266,36 @@ function AutocompleteInner(props, ref) {
                 allDisabled
               })
             };
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
+            if (readOnly) {
+              return {
+                ...changes,
+                isOpen: false
+              };
+            }
+            return {
+              ...changes,
+              highlightedIndex: findNextIndex({
+                index: 0,
+                availableItems,
+                optionDisabled,
+                allDisabled
+              })
+            };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
-          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnd:
             if (readOnly) {
               return {
                 ...changes,
                 isOpen: false
               };
             }
+            if (state.isOpen === false) {
+              return {
+                ...changes,
+                isOpen: true,
+                highlightedIndex: controlledHighlightedIndex
+              };
+            }
             return {
               ...changes,
               highlightedIndex: findPrevIndex({
@@ -10195,10 +10305,27 @@ function AutocompleteInner(props, ref) {
                 allDisabled
               })
             };
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnd:
+            if (readOnly) {
+              return {
+                ...changes,
+                isOpen: false
+              };
+            }
+            return {
+              ...changes,
+              highlightedIndex: findPrevIndex({
+                index: availableItems.length - 1,
+                availableItems,
+                optionDisabled,
+                allDisabled
+              })
+            };
           case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
             setSelectedItems([changes.selectedItem]);
             return {
-              ...changes
+              ...changes,
+              highlightedIndex: controlledHighlightedIndex
             };
           default:
             return changes;
@@ -11201,7 +11328,8 @@ const SideBarAccordion = /*#__PURE__*/react.forwardRef(function SideBarAccordion
   disabled,
   ...rest
 }, ref) {
-  const accordionId = edsUtils.useId(id, 'accordion');
+  const generatedAccordionId = react.useId();
+  const accordionId = id ?? generatedAccordionId;
   const [menuIsOpen, setMenuIsOpen] = react.useState(false);
   const [accordionIsOpen, setAccordionIsOpen] = react.useState(isExpanded);
   const [anchorEl, setAnchorEl] = react.useState(null);
@@ -12020,6 +12148,12 @@ const FieldWrapper = /*#__PURE__*/react.forwardRef(({
   readonly,
   ...props
 }, ref) => {
+  const [anchorEl, setAnchorEl] = react.useState(null);
+  react.useEffect(() => {
+    if (ref && typeof ref !== 'function' && ref.current) {
+      setAnchorEl(ref.current);
+    }
+  }, [ref]);
   react.useEffect(() => {
     if (isOpen === false) {
       // Focus the first segment in the input field
@@ -12042,7 +12176,7 @@ const FieldWrapper = /*#__PURE__*/react.forwardRef(({
     }), /*#__PURE__*/jsxRuntime.jsx(Popover, {
       open: isOpen ?? false,
       onClose: () => setIsOpen(false),
-      anchorEl: ref.current,
+      anchorEl: anchorEl,
       placement: 'bottom-start',
       children: calendar
     })]
@@ -12799,6 +12933,7 @@ exports.TableOfContentsLinkItem = LinkItem;
 exports.TableRow = Row;
 exports.Tabs = Tabs;
 exports.TextField = TextField;
+exports.Textarea = Textarea;
 exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip$2;
 exports.TopBar = TopBar;
@@ -12808,4 +12943,5 @@ exports.TopbarHeader = Header$2;
 exports.Typography = Typography;
 exports.TypographyNext = TypographyNext;
 exports.useEds = useEds;
+exports.useInputField = useInputField;
 exports.useSideBar = useSideBar;

package/dist/esm/components/Accordion/Accordion.js

@@ -1,7 +1,7 @@
-import { forwardRef, Children, cloneElement } from 'react';
+import { forwardRef, useId, Children, cloneElement } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { accordion } from './Accordion.tokens.js';
-import { useId, useToken } from '@equinor/eds-utils';
+import { useToken } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
@@ -12,7 +12,8 @@ const Accordion = /*#__PURE__*/forwardRef(function Accordion({
   id,
   ...props
 }, ref) {
-  const accordionId = useId(id, 'accordion');
+  const generatedAccordionId = useId();
+  const accordionId = id ?? generatedAccordionId;
   const {
     density
   } = useEds();