@equinor/eds-core-react 0.44.0 → 0.45.0

package/dist/eds-core-react.cjs

@@ -9663,7 +9663,8 @@ function AutocompleteInner(props, ref) {
     onInputChange,
     selectedOptions: _selectedOptions,
     multiple,
-    itemCompare,
+    itemToKey: _itemToKey,
+    itemCompare: _itemCompare,
     allowSelectAll,
     initialSelectedOptions: _initialSelectedOptions = [],
     optionDisabled = defaultOptionDisabled,
@@ -9682,6 +9683,20 @@ function AutocompleteInner(props, ref) {
     onClear,
     ...other
   } = props;
+  const itemCompare = react.useMemo(() => {
+    if (_itemCompare && _itemToKey) {
+      console.error('Error: Specifying both itemCompare and itemToKey. itemCompare is deprecated, while itemToKey should be used instead of it. Please only use one.');
+      return _itemCompare;
+    }
+    if (_itemToKey) {
+      return (o1, o2) => _itemToKey(o1) === _itemToKey(o2);
+    }
+    return _itemCompare;
+  }, [_itemCompare, _itemToKey]);
+  const itemToKey = react.useCallback(item => {
+    console.log(`item is`, item);
+    return _itemToKey ? _itemToKey(item) : item;
+  }, [_itemToKey]);
 
   // MARK: initializing data/setup
   const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
@@ -9722,6 +9737,7 @@ function AutocompleteInner(props, ref) {
   const tokens = token();
   let placeholderText = placeholder;
   let multipleSelectionProps = {
+    itemToKey,
     initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
   };
   if (multiple) {
@@ -9824,6 +9840,7 @@ function AutocompleteInner(props, ref) {
     isItemDisabled(item) {
       return optionDisabled(item);
     },
+    itemToKey,
     itemToString: getLabel,
     onInputValueChange: ({
       inputValue
@@ -11884,7 +11901,8 @@ const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ...fieldProps,
     style: {
-      display: 'flex'
+      display: 'flex',
+      fontFamily: 'Equinor, Arial, sans-serif'
     },
     ref: ref,
     children: state.segments.map((segment, i) => /*#__PURE__*/jsxRuntime.jsx(DateSegment, {
@@ -11964,7 +11982,10 @@ const Toggle = ({
   showClearButton,
   readonly
 }) => {
-  return readonly || disabled ? null : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      visibility: readonly || disabled ? 'hidden' : 'visible'
+    },
     children: [showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
       disabled: disabled,
       variant: 'ghost_icon',
@@ -12006,12 +12027,14 @@ const getCalendarDate = (value, timezone, showTimeInput = false) => {
 
 const useGetLocale = locale => {
   const {
-    locale: externalLocale
+    locale: currentLocale
   } = reactAria.useLocale();
-  // react-aria defaults to navigator.language if no locale is provided. If these are equal, we override by using the system default locale
-  const defaultLocale = typeof navigator !== 'undefined' && navigator.language || 'en-US';
-  const fallbackLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
-  return locale ?? (externalLocale === defaultLocale ? undefined : externalLocale) ?? fallbackLocale;
+  // Priority:
+  // 1. Explicitly passed locale prop
+  // 2. Locale from I18nProvider
+  // 3. Fallback to browser's default
+  const browserLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
+  return locale ?? currentLocale ?? browserLocale;
 };
 
 const DatePicker = /*#__PURE__*/react.forwardRef(({

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

@@ -1,4 +1,4 @@
-import { forwardRef, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { forwardRef, useMemo, useCallback, useState, useRef, useEffect } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import styled, { css, ThemeProvider } from 'styled-components';
@@ -169,7 +169,8 @@ function AutocompleteInner(props, ref) {
     onInputChange,
     selectedOptions: _selectedOptions,
     multiple,
-    itemCompare,
+    itemToKey: _itemToKey,
+    itemCompare: _itemCompare,
     allowSelectAll,
     initialSelectedOptions: _initialSelectedOptions = [],
     optionDisabled = defaultOptionDisabled,
@@ -188,6 +189,20 @@ function AutocompleteInner(props, ref) {
     onClear,
     ...other
   } = props;
+  const itemCompare = useMemo(() => {
+    if (_itemCompare && _itemToKey) {
+      console.error('Error: Specifying both itemCompare and itemToKey. itemCompare is deprecated, while itemToKey should be used instead of it. Please only use one.');
+      return _itemCompare;
+    }
+    if (_itemToKey) {
+      return (o1, o2) => _itemToKey(o1) === _itemToKey(o2);
+    }
+    return _itemCompare;
+  }, [_itemCompare, _itemToKey]);
+  const itemToKey = useCallback(item => {
+    console.log(`item is`, item);
+    return _itemToKey ? _itemToKey(item) : item;
+  }, [_itemToKey]);
 
   // MARK: initializing data/setup
   const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
@@ -228,6 +243,7 @@ function AutocompleteInner(props, ref) {
   const tokens = token();
   let placeholderText = placeholder;
   let multipleSelectionProps = {
+    itemToKey,
     initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
   };
   if (multiple) {
@@ -330,6 +346,7 @@ function AutocompleteInner(props, ref) {
     isItemDisabled(item) {
       return optionDisabled(item);
     },
+    itemToKey,
     itemToString: getLabel,
     onInputValueChange: ({
       inputValue

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

@@ -26,7 +26,8 @@ const DateFieldSegments = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ...fieldProps,
     style: {
-      display: 'flex'
+      display: 'flex',
+      fontFamily: 'Equinor, Arial, sans-serif'
     },
     ref: ref,
     children: state.segments.map((segment, i) => /*#__PURE__*/jsx(DateSegment, {

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

@@ -3,7 +3,7 @@ import { close } from '@equinor/eds-icons';
 import { Button } from '../../Button/Button.js';
 import styled from 'styled-components';
 import { filterDOMProps } from '@react-aria/utils';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const StyledButton = styled(Button).withConfig({
   displayName: "Toggle__StyledButton",
@@ -24,7 +24,10 @@ const Toggle = ({
   showClearButton,
   readonly
 }) => {
-  return readonly || disabled ? null : /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      visibility: readonly || disabled ? 'hidden' : 'visible'
+    },
     children: [showClearButton && /*#__PURE__*/jsx(StyledButton, {
       disabled: disabled,
       variant: 'ghost_icon',

package/dist/esm/components/Datepicker/utils/useGetLocale.js

@@ -2,12 +2,14 @@ import { useLocale } from 'react-aria';
 
 const useGetLocale = locale => {
   const {
-    locale: externalLocale
+    locale: currentLocale
   } = useLocale();
-  // react-aria defaults to navigator.language if no locale is provided. If these are equal, we override by using the system default locale
-  const defaultLocale = typeof navigator !== 'undefined' && navigator.language || 'en-US';
-  const fallbackLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
-  return locale ?? (externalLocale === defaultLocale ? undefined : externalLocale) ?? fallbackLocale;
+  // Priority:
+  // 1. Explicitly passed locale prop
+  // 2. Locale from I18nProvider
+  // 3. Fallback to browser's default
+  const browserLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
+  return locale ?? currentLocale ?? browserLocale;
 };
 
 export { useGetLocale };

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

@@ -84,6 +84,11 @@ export type AutocompleteProps<T> = {
      */
     dropdownHeight?: number;
     /**
+     * Method that is used to select a key that can be used for comparing items. If omitted, objects are matched by reference.
+     */
+    itemToKey?: (value: T | null) => unknown;
+    /**
+     * @deprecated since version 0.45.0 - use itemToKey instead
      * Method that is used to compare objects by value. If omitted, objects are matched by reference.
      */
     itemCompare?: (value: T, compare: T) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -46,7 +46,7 @@
     "@storybook/react-vite": "^8.4.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "16.1.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "^29.5.14",
     "@types/ramda": "^0.30.2",
@@ -68,9 +68,9 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.4.7",
-    "styled-components": "6.1.13",
+    "styled-components": "6.1.17",
     "tsc-watch": "^6.2.1",
-    "typescript": "^5.7.2"
+    "typescript": "^5.8.2"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -78,7 +78,7 @@
     "styled-components": ">=5.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.26.0",
+    "@babel/runtime": "^7.26.10",
     "@floating-ui/react": "^0.27.2",
     "@internationalized/date": "^3.6.0",
     "@react-aria/utils": "^3.26.0",
@@ -89,8 +89,8 @@
     "downshift": "9.0.8",
     "react-aria": "^3.36.0",
     "@equinor/eds-icons": "^0.22.0",
-    "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-utils": "0.8.6"
+    "@equinor/eds-utils": "0.8.7",
+    "@equinor/eds-tokens": "0.9.2"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",