@equinor/eds-core-react 0.42.5 → 0.43.0-dev-12102024

package/dist/eds-core-react.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('react');
@@ -912,7 +913,8 @@ const initalState$2 = {
 const EdsContext = /*#__PURE__*/react.createContext(initalState$2);
 const EdsProvider = ({
   children,
-  density
+  density,
+  rootElement
 }) => {
   const [state, setState] = react.useState({
     ...initalState$2,
@@ -929,6 +931,7 @@ const EdsProvider = ({
   }, [density, state.density]);
   const value = {
     density: state.density,
+    rootElement,
     setDensity
   };
   return /*#__PURE__*/jsxRuntime.jsx(EdsContext.Provider, {
@@ -1148,11 +1151,15 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
   children,
   style,
   enterDelay = 100,
+  portalContainer,
   ...rest
 }, ref) {
   const arrowRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const shouldOpen = title !== '' && typeof document !== 'undefined';
+  const {
+    rootElement
+  } = useEds();
   const {
     x,
     y,
@@ -1165,7 +1172,8 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
         y: arrowY
       } = {}
     },
-    placement: finalPlacement
+    placement: finalPlacement,
+    elements
   } = react$1.useFloating({
     placement,
     open,
@@ -1228,16 +1236,18 @@ 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,
     ...getFloatingProps({
       ref: tooltipRef,
+      className: `eds-tooltip ${rest.className ?? ''}`,
       style: {
         ...style,
         position: strategy,
@@ -1256,7 +1266,7 @@ const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [shouldOpen && open && /*#__PURE__*/reactDom.createPortal(TooltipEl, document.body), updatedChildren]
+    children: [shouldOpen && open && /*#__PURE__*/reactDom.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
   });
 });
 
@@ -9772,7 +9782,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 +11891,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 +11918,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 +11940,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 +12276,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 +12288,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 +12433,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/EdsProvider/eds.context.js

@@ -8,7 +8,8 @@ const initalState = {
 const EdsContext = /*#__PURE__*/createContext(initalState);
 const EdsProvider = ({
   children,
-  density
+  density,
+  rootElement
 }) => {
   const [state, setState] = useState({
     ...initalState,
@@ -25,6 +26,7 @@ const EdsProvider = ({
   }, [density, state.density]);
   const value = {
     density: state.density,
+    rootElement,
     setDensity
   };
   return /*#__PURE__*/jsx(EdsContext.Provider, {

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

@@ -1,10 +1,11 @@
 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';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const StyledTooltip = styled('div').withConfig({
   shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
@@ -26,11 +27,15 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
   children,
   style,
   enterDelay = 100,
+  portalContainer,
   ...rest
 }, ref) {
   const arrowRef = useRef(null);
   const [open, setOpen] = useState(false);
   const shouldOpen = title !== '' && typeof document !== 'undefined';
+  const {
+    rootElement
+  } = useEds();
   const {
     x,
     y,
@@ -43,7 +48,8 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
         y: arrowY
       } = {}
     },
-    placement: finalPlacement
+    placement: finalPlacement,
+    elements
   } = useFloating({
     placement,
     open,
@@ -106,16 +112,18 @@ 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,
     ...getFloatingProps({
       ref: tooltipRef,
+      className: `eds-tooltip ${rest.className ?? ''}`,
       style: {
         ...style,
         position: strategy,
@@ -134,7 +142,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
     })]
   });
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [shouldOpen && open && /*#__PURE__*/createPortal(TooltipEl, document.body), updatedChildren]
+    children: [shouldOpen && open && /*#__PURE__*/createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
   });
 });
 

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+'use client';
 export { Button } from './components/Button/index.js';
 export { Table } from './components/Table/index.js';
 export { Icon } from './components/Icon/index.js';

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/dist/types/components/EdsProvider/eds.context.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type Density = 'compact' | 'comfortable';
 type State = {
     density: Density;
+    rootElement?: HTMLElement | null;
 };
 type UseEdsProps<T> = {
     /** Use this to update the `density` from nested components in `EdsProvider` */
@@ -9,6 +10,7 @@ type UseEdsProps<T> = {
 } & T;
 export type EdsProviderProps = {
     density?: Density;
+    rootElement?: HTMLElement | null;
     children: ReactNode;
 };
 export declare const EdsProvider: React.FC<EdsProviderProps>;

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

@@ -9,6 +9,10 @@ export type TooltipProps = {
     children: React.ReactElement & React.RefAttributes<HTMLElement>;
     /** Delay in ms, default 100 */
     enterDelay?: number;
+    /** Portal container
+     * @default document.body
+     * */
+    portalContainer?: HTMLElement;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     /** Tooltip placement relative to anchor */
@@ -19,4 +23,8 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     children: React.ReactElement & React.RefAttributes<HTMLElement>;
     /** Delay in ms, default 100 */
     enterDelay?: number;
+    /** Portal container
+     * @default document.body
+     * */
+    portalContainer?: HTMLElement;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.42.5",
+  "version": "0.43.0-dev-12102024",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -66,6 +66,7 @@
     "rollup": "^4.22.5",
     "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.3.4",
     "styled-components": "6.1.12",
     "tsc-watch": "^6.2.0",
@@ -84,7 +85,7 @@
     "@react-stately/calendar": "^3.5.3",
     "@react-stately/datepicker": "^3.10.1",
     "@react-types/shared": "^3.24.1",
-    "@tanstack/react-virtual": "3.10.8",
+    "@tanstack/react-virtual": "3.11.1",
     "downshift": "9.0.8",
     "react-aria": "^3.34.1",
     "@equinor/eds-icons": "^0.21.0",