@equinor/eds-core-react 0.42.4 → 0.42.6-dev-11212024

package/dist/eds-core-react.cjs

@@ -1165,7 +1165,8 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
         y: arrowY
       } = {}
     },
-    placement: finalPlacement
+    placement: finalPlacement,
+    elements
   } = react$1.useFloating({
     placement,
     open,
@@ -1228,11 +1229,12 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
       ...children.props
     })
   });
-  edsUtils.useIsomorphicLayoutEffect(() => {
-    if (shouldOpen && open) {
-      refs.floating.current?.showPopover();
+  react.useEffect(() => {
+    if (!elements.floating) return;
+    if (elements.floating.isConnected && shouldOpen && open) {
+      elements.floating.showPopover();
     }
-  }, [open, shouldOpen, refs.floating]);
+  }, [open, shouldOpen, elements.floating]);
   const TooltipEl = /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, {
     popover: "manual",
     ...rest,
@@ -9772,7 +9774,7 @@ function AutocompleteInner(props, ref) {
     return inputOptions.filter(x => !disabledItemsSet.has(x));
   }, [inputOptions, optionDisabled]);
   const allDisabled = enabledItems.length === 0;
-  const selectedDisabledItemsSet = react.useMemo(() => new Set(selectedItems.filter(optionDisabled)), [selectedItems, optionDisabled]);
+  const selectedDisabledItemsSet = react.useMemo(() => new Set(selectedItems.filter(x => x !== null && optionDisabled(x))), [selectedItems, optionDisabled]);
   const selectedEnabledItems = react.useMemo(() => selectedItems.filter(x => !selectedDisabledItemsSet.has(x)), [selectedItems, selectedDisabledItemsSet]);
   const allSelectedState = react.useMemo(() => {
     if (!enabledItems || !selectedEnabledItems) return 'NONE';
@@ -11881,12 +11883,9 @@ function DateSegment({
  * A field that wraps segments for inputting a date / date-time
  */
 const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
-  const {
-    locale
-  } = reactAria.useLocale();
   const state = datepicker.useDateFieldState({
     ...props,
-    locale,
+    locale: props.locale,
     createCalendar: date.createCalendar
   });
   const {
@@ -11911,7 +11910,7 @@ const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
 DateFieldSegments.displayName = 'SingleDateField';
 
 /**
- * Datefield is the input field used in {@link DatePicker} to type in a single date.
+ * DateField is the input field used in {@link DatePicker} to type in a single date.
  * Encapsulates styling / functionality for typing a date
  */
 const DateField = /*#__PURE__*/react.forwardRef(function ({
@@ -11933,6 +11932,7 @@ const DateField = /*#__PURE__*/react.forwardRef(function ({
     children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
       ...state,
       ...fieldProps,
+      locale: dateCreateProps.locale,
       ref: inputRef
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
       style: {
@@ -12268,7 +12268,8 @@ const DateRangeField = /*#__PURE__*/react.forwardRef(function (props, ref) {
     ...props.groupProps,
     children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
       ...props.startFieldProps,
-      ref: fromRef
+      ref: fromRef,
+      locale: props.locale
     }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
       as: 'span',
       variant: 'text',
@@ -12279,7 +12280,8 @@ const DateRangeField = /*#__PURE__*/react.forwardRef(function (props, ref) {
       children: "\u2014"
     }), /*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
       ...props.endFieldProps,
-      ref: toRef
+      ref: toRef,
+      locale: props.locale
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
       style: {
         flex: '1 1 auto'
@@ -12423,6 +12425,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
           ref: ref,
           variant: props.variant,
           disabled: isDisabled,
+          locale: locale,
           rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
             showClearButton: showClearButton,
             buttonProps: buttonProps,

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

@@ -266,7 +266,7 @@ function AutocompleteInner(props, ref) {
     return inputOptions.filter(x => !disabledItemsSet.has(x));
   }, [inputOptions, optionDisabled]);
   const allDisabled = enabledItems.length === 0;
-  const selectedDisabledItemsSet = useMemo(() => new Set(selectedItems.filter(optionDisabled)), [selectedItems, optionDisabled]);
+  const selectedDisabledItemsSet = useMemo(() => new Set(selectedItems.filter(x => x !== null && optionDisabled(x))), [selectedItems, optionDisabled]);
   const selectedEnabledItems = useMemo(() => selectedItems.filter(x => !selectedDisabledItemsSet.has(x)), [selectedItems, selectedDisabledItemsSet]);
   const allSelectedState = useMemo(() => {
     if (!enabledItems || !selectedEnabledItems) return 'NONE';

package/dist/esm/components/Datepicker/DateRangePicker.js

@@ -149,6 +149,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
           ref: ref,
           variant: props.variant,
           disabled: isDisabled,
+          locale: locale,
           rightAdornments: /*#__PURE__*/jsx(Toggle, {
             showClearButton: showClearButton,
             buttonProps: buttonProps,

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

@@ -5,7 +5,7 @@ import { DateFieldSegments } from './DateFieldSegments.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /**
- * Datefield is the input field used in {@link DatePicker} to type in a single date.
+ * DateField is the input field used in {@link DatePicker} to type in a single date.
  * Encapsulates styling / functionality for typing a date
  */
 const DateField = /*#__PURE__*/forwardRef(function ({
@@ -27,6 +27,7 @@ const DateField = /*#__PURE__*/forwardRef(function ({
     children: [/*#__PURE__*/jsx(DateFieldSegments, {
       ...state,
       ...fieldProps,
+      locale: dateCreateProps.locale,
       ref: inputRef
     }), /*#__PURE__*/jsx("span", {
       style: {

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

@@ -1,5 +1,5 @@
 import { useDateFieldState } from '@react-stately/datepicker';
-import { useLocale, useDateField } from 'react-aria';
+import { useDateField } from 'react-aria';
 import { createCalendar } from '@internationalized/date';
 import { DateSegment } from './DateSegment.js';
 import { forwardRef } from 'react';
@@ -11,12 +11,9 @@ import { jsx } from 'react/jsx-runtime';
  * A field that wraps segments for inputting a date / date-time
  */
 const DateFieldSegments = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    locale
-  } = useLocale();
   const state = useDateFieldState({
     ...props,
-    locale,
+    locale: props.locale,
     createCalendar
   });
   const {

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

@@ -19,7 +19,8 @@ const DateRangeField = /*#__PURE__*/forwardRef(function (props, ref) {
     ...props.groupProps,
     children: [/*#__PURE__*/jsx(DateFieldSegments, {
       ...props.startFieldProps,
-      ref: fromRef
+      ref: fromRef,
+      locale: props.locale
     }), /*#__PURE__*/jsx(Typography, {
       as: 'span',
       variant: 'text',
@@ -30,7 +31,8 @@ const DateRangeField = /*#__PURE__*/forwardRef(function (props, ref) {
       children: "\u2014"
     }), /*#__PURE__*/jsx(DateFieldSegments, {
       ...props.endFieldProps,
-      ref: toRef
+      ref: toRef,
+      locale: props.locale
     }), /*#__PURE__*/jsx("span", {
       style: {
         flex: '1 1 auto'

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

@@ -1,7 +1,7 @@
 import { forwardRef, useRef, useState, useMemo, useEffect, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
-import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
+import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs } from '@equinor/eds-utils';
 import { tooltip } from './Tooltip.tokens.js';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss } from '@floating-ui/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -43,7 +43,8 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
         y: arrowY
       } = {}
     },
-    placement: finalPlacement
+    placement: finalPlacement,
+    elements
   } = useFloating({
     placement,
     open,
@@ -106,11 +107,12 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
       ...children.props
     })
   });
-  useIsomorphicLayoutEffect(() => {
-    if (shouldOpen && open) {
-      refs.floating.current?.showPopover();
+  useEffect(() => {
+    if (!elements.floating) return;
+    if (elements.floating.isConnected && shouldOpen && open) {
+      elements.floating.showPopover();
     }
-  }, [open, shouldOpen, refs.floating]);
+  }, [open, shouldOpen, elements.floating]);
   const TooltipEl = /*#__PURE__*/jsxs(StyledTooltip, {
     popover: "manual",
     ...rest,

package/dist/types/components/Datepicker/fields/DateField.d.ts

@@ -13,7 +13,7 @@ type Props = {
     dateCreateProps: DateFieldStateOptions<CalendarDate | CalendarDateTime>;
 };
 /**
- * Datefield is the input field used in {@link DatePicker} to type in a single date.
+ * DateField is the input field used in {@link DatePicker} to type in a single date.
  * Encapsulates styling / functionality for typing a date
  */
 export declare const DateField: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Datepicker/fields/DateRangeField.d.ts

@@ -8,4 +8,5 @@ export declare const DateRangeField: import("react").ForwardRefExoticComponent<{
     startFieldProps: AriaDatePickerProps<DateValue>;
     endFieldProps: AriaDatePickerProps<DateValue>;
     groupProps: GroupDOMAttributes;
+    locale: string;
 } & Partial<InputProps> & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.42.4",
+  "version": "0.42.6-dev-11212024",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -87,8 +87,8 @@
     "@tanstack/react-virtual": "3.10.8",
     "downshift": "9.0.8",
     "react-aria": "^3.34.1",
-    "@equinor/eds-icons": "^0.21.0",
     "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-icons": "^0.21.0",
     "@equinor/eds-utils": "0.8.5"
   },
   "scripts": {