@equinor/eds-core-react 0.41.4 → 0.42.0

package/dist/eds-core-react.cjs

@@ -859,7 +859,7 @@ const primary$6 = mergeDeepRight(primary$a, contained_icon);
 const secondary$1 = mergeDeepRight(secondary$5, contained_icon);
 const danger$2 = mergeDeepRight(danger$6, contained_icon);
 
-const token$5 = {
+const token$6 = {
   primary: {
     contained: primary$a,
     outlined: primary$9,
@@ -904,17 +904,17 @@ const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth({
   });
 });
 
-const initalState$3 = {
+const initalState$2 = {
   /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
-const EdsContext = /*#__PURE__*/react.createContext(initalState$3);
+const EdsContext = /*#__PURE__*/react.createContext(initalState$2);
 const EdsProvider = ({
   children,
   density
 }) => {
   const [state, setState] = react.useState({
-    ...initalState$3,
+    ...initalState$2,
     density: density || 'comfortable'
   });
   const setDensity = density => setState(prevState => ({
@@ -955,12 +955,12 @@ const getVariant$1 = (tokenSet, variant) => {
 const getToken$1 = (variant, color) => {
   switch (color) {
     case 'danger':
-      return getVariant$1(token$5.danger, variant);
+      return getVariant$1(token$6.danger, variant);
     case 'secondary':
-      return getVariant$1(token$5.secondary, variant);
+      return getVariant$1(token$6.secondary, variant);
     case 'primary':
     default:
-      return getVariant$1(token$5.primary, variant);
+      return getVariant$1(token$6.primary, variant);
   }
 };
 const Inner = styled__default.default.span.withConfig({
@@ -1485,12 +1485,12 @@ const {
     },
     ui: {
       background__medium: {
-        rgba: borderColor$4
+        rgba: borderColor$5
       }
     },
     interactive: {
       table__cell__fill_resting: {
-        rgba: backgroundColor$5
+        rgba: backgroundColor$6
       },
       table__cell__fill_hover: {
         rgba: hoverBackgroundColor$3
@@ -1523,14 +1523,14 @@ const {
 } = edsTokens.tokens;
 const tableCell = {
   height: 'var(--eds_table__cell__height, 48px)',
-  background: backgroundColor$5,
+  background: backgroundColor$6,
   align: {
     vertical: 'var(--eds_table__cell__vertical_align, inherit)'
   },
   border: {
     type: 'bordergroup',
     bottom: {
-      color: borderColor$4,
+      color: borderColor$5,
       width: '1px',
       style: 'solid'
     }
@@ -1646,10 +1646,10 @@ const Table$1 = /*#__PURE__*/react.forwardRef(function Table({
 
 // Table.displayName = 'EdsTable'
 
-const initalState$2 = {
+const initialState = {
   variant: 'body'
 };
-const InnerContext = /*#__PURE__*/react.createContext(initalState$2);
+const InnerContext = /*#__PURE__*/react.createContext(initialState);
 
 const TableBase = styled__default.default.tbody.withConfig({
   displayName: "Body__TableBase",
@@ -1671,7 +1671,7 @@ const Body = /*#__PURE__*/react.forwardRef(function Body({
   });
 });
 
-const StyledTableCell$1 = styled__default.default.td.withConfig({
+const StyledTableCell$2 = styled__default.default.td.withConfig({
   displayName: "DataCell__StyledTableCell",
   componentId: "sc-15tuitc-0"
 })(({
@@ -1702,7 +1702,7 @@ const TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell({
   }, applyVariant(variant, tableCell));
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$1, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$2, {
       ...rest,
       ref: ref,
       children: children
@@ -1727,12 +1727,12 @@ const {
     },
     ui: {
       background__medium: {
-        rgba: borderColor$3
+        rgba: borderColor$4
       }
     },
     interactive: {
       table__header__fill_resting: {
-        rgba: backgroundColor$4
+        rgba: backgroundColor$5
       },
       table__header__fill_hover: {
         rgba: hoverBackgroundColor$2
@@ -1760,9 +1760,9 @@ const {
     }
   }
 } = edsTokens.tokens;
-const token$4 = {
+const token$5 = {
   height: 'var(--eds_table__cell__height, 48px)',
-  background: backgroundColor$4,
+  background: backgroundColor$5,
   align: {
     vertical: 'var(--eds_table__cell__vertical_align, inherit)'
   },
@@ -1776,7 +1776,7 @@ const token$4 = {
     bottom: {
       type: 'border',
       width: '2px',
-      color: borderColor$3,
+      color: borderColor$4,
       style: 'solid'
     }
   },
@@ -1838,7 +1838,7 @@ const token$4 = {
   }
 };
 
-const StyledTableCell = styled__default.default.th.withConfig({
+const StyledTableCell$1 = styled__default.default.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
 })(props => {
@@ -1864,7 +1864,7 @@ const StyledTableCell = styled__default.default.th.withConfig({
   }
   return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, $sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
 });
-const CellInner = styled__default.default.div.withConfig({
+const CellInner$1 = styled__default.default.div.withConfig({
   displayName: "HeaderCell__CellInner",
   componentId: "sc-18w2o3a-1"
 })(["display:flex;align-items:center;"]);
@@ -1879,7 +1879,7 @@ const TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell({
   } = useEds();
   const token = edsUtils.useToken({
     density
-  }, token$4);
+  }, token$5);
   const props = {
     ref,
     $sticky: sticky,
@@ -1887,8 +1887,55 @@ const TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell({
   };
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell, {
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$1, {
       "aria-sort": sort,
+      ...props,
+      children: /*#__PURE__*/jsxRuntime.jsx(CellInner$1, {
+        children: children
+      })
+    })
+  });
+});
+
+const StyledTableCell = styled__default.default.th.withConfig({
+  displayName: "FooterCell__StyledTableCell",
+  componentId: "sc-1xq9z77-0"
+})(props => {
+  const {
+    theme,
+    $sticky
+  } = props;
+  const {
+    background,
+    height,
+    typography,
+    spacings
+  } = theme;
+  return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), $sticky ? styled.css(["position:sticky;bottom:0;z-index:2;"]) : '');
+});
+const CellInner = styled__default.default.div.withConfig({
+  displayName: "FooterCell__CellInner",
+  componentId: "sc-1xq9z77-1"
+})(["display:flex;align-items:center;"]);
+const TableFooterCell = /*#__PURE__*/react.forwardRef(function TableFooterCell({
+  children,
+  sticky,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = edsUtils.useToken({
+    density
+  }, token$5);
+  const props = {
+    ref,
+    $sticky: sticky,
+    ...rest
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell, {
       ...props,
       children: /*#__PURE__*/jsxRuntime.jsx(CellInner, {
         children: children
@@ -1912,6 +1959,12 @@ const Cell = /*#__PURE__*/react.forwardRef(function Cell({
             sticky: sticky,
             ...rest
           });
+        case 'foot':
+          return /*#__PURE__*/jsxRuntime.jsx(TableFooterCell, {
+            ref: ref,
+            sticky: sticky,
+            ...rest
+          });
         default:
         case 'body':
           return /*#__PURE__*/jsxRuntime.jsx(TableDataCell, {
@@ -1927,24 +1980,24 @@ const {
   colors: {
     ui: {
       background__medium: {
-        rgba: borderColor$2
+        rgba: borderColor$3
       }
     },
     interactive: {
       table__header__fill_resting: {
-        rgba: backgroundColor$3
+        rgba: backgroundColor$4
       }
     }
   }
 } = edsTokens.tokens;
-const token$3 = {
-  background: backgroundColor$3,
+const token$4 = {
+  background: backgroundColor$4,
   border: {
     type: 'bordergroup',
     bottom: {
       type: 'border',
       width: '2px',
-      color: borderColor$2,
+      color: borderColor$3,
       style: 'solid'
     }
   }
@@ -1953,7 +2006,7 @@ const token$3 = {
 const StyledTableHead = styled__default.default.thead.withConfig({
   displayName: "Head__StyledTableHead",
   componentId: "sc-g9tch7-0"
-})(["", " background:", ";"], edsUtils.bordersTemplate(token$3.border), token$3.background);
+})(["", " background:", ";"], edsUtils.bordersTemplate(token$4.border), token$4.background);
 const Head = /*#__PURE__*/react.forwardRef(function Head({
   children,
   sticky,
@@ -1972,6 +2025,55 @@ const Head = /*#__PURE__*/react.forwardRef(function Head({
   });
 });
 
+const {
+  colors: {
+    ui: {
+      background__medium: {
+        rgba: borderColor$2
+      }
+    },
+    interactive: {
+      table__header__fill_resting: {
+        rgba: backgroundColor$3
+      }
+    }
+  }
+} = edsTokens.tokens;
+const token$3 = {
+  background: backgroundColor$3,
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      type: 'border',
+      width: '2px',
+      color: borderColor$2,
+      style: 'solid'
+    }
+  }
+};
+
+const StyledTableFoot = styled__default.default.tfoot.withConfig({
+  displayName: "Foot__StyledTableFoot",
+  componentId: "sc-3w9vih-0"
+})(["", " background:", ";"], edsUtils.bordersTemplate(token$3.border), token$3.background);
+const Foot = /*#__PURE__*/react.forwardRef(function Foot({
+  children,
+  sticky,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
+    value: {
+      variant: 'foot',
+      sticky
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTableFoot, {
+      ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+
 const {
   colors: {
     interactive: {
@@ -2037,11 +2139,13 @@ const Table = Table$1;
 Table.Body = Body;
 Table.Cell = Cell;
 Table.Head = Head;
+Table.Foot = Foot;
 Table.Row = Row;
 Table.Caption = Caption;
 Table.Body.displayName = 'Table.Body';
 Table.Cell.displayName = 'Table.Cell';
 Table.Head.displayName = 'Table.Head';
+Table.Foot.displayName = 'Table.Foot';
 Table.Row.displayName = 'Table.Row';
 Table.Caption.displayName = 'Table.Caption';
 
@@ -4743,6 +4847,7 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim({
   ...rest
 }, ref) {
   const scrimRef = react.useRef(null);
+  edsUtils.useHideBodyScroll(open);
   const combinedScrimRef = react.useMemo(() => edsUtils.mergeRefs(scrimRef, ref), [scrimRef, ref]);
   edsUtils.useGlobalKeyPress('Escape', () => {
     if (isDismissable && onClose && open) {
@@ -4760,7 +4865,6 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim({
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsx(StyledScrim, {
-    lockScroll: true,
     onMouseDown: handleMouseClose,
     ref: combinedScrimRef,
     ...rest,
@@ -6398,9 +6502,13 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
   const {
     getFloatingProps
   } = react$1.useInteractions([react$1.useDismiss(context)]);
-  edsUtils.useIsomorphicLayoutEffect(() => {
+  react.useEffect(() => {
     if (open) {
-      refs.floating.current?.showPopover();
+      setTimeout(() => {
+        if (refs.floating.current?.isConnected) {
+          refs.floating.current.showPopover();
+        }
+      }, 1);
     } else {
       refs.floating.current?.hidePopover();
     }
@@ -11669,7 +11777,6 @@ const FieldWrapper = /*#__PURE__*/react.forwardRef(({
       onClose: () => setIsOpen(false),
       anchorEl: ref.current,
       placement: 'bottom-start',
-      withinPortal: true,
       children: calendar
     })]
   });
@@ -11904,6 +12011,16 @@ const getCalendarDate = (value, timezone, showTimeInput = false) => {
   return showTimeInput ? date.toCalendarDateTime(date.fromDate(value, timezone)) : date.toCalendarDate(date.fromDate(value, timezone));
 };
 
+const useGetLocale = locale => {
+  const {
+    locale: externalLocale
+  } = 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;
+};
+
 const DatePicker = /*#__PURE__*/react.forwardRef(({
   onChange,
   label,
@@ -11914,6 +12031,7 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
   Footer,
   Header,
   timezone,
+  locale: propLocale,
   defaultValue,
   showTimeInput,
   granularity,
@@ -11973,16 +12091,14 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
     }
   }, [onChange, isOpen, showTimeInput, timezone]);
   const _value = getCalendarDate(value, timezone, showTimeInput) ?? innerValue;
-  const {
-    locale
-  } = reactAria.useLocale();
+  const locale = useGetLocale(propLocale);
   const dateCreateProps = {
     helperProps,
     variant,
     isDisabled,
     value: _value,
     hideTimeZone: true,
-    locale,
+    locale: locale,
     createCalendar: date.createCalendar,
     onChange: _onChange,
     minValue: _minValue,
@@ -12013,49 +12129,52 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
   react.useEffect(() => {
     if (!defaultValue && !value) setInnerValue(null);
   }, [defaultValue, value]);
-  return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
-    timezone: timezone,
-    formatOptions: formatOptions,
-    children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
-      ...props,
-      isOpen: isOpen,
-      readonly: fieldProps.isReadOnly,
-      pickerRef: pickerRef,
-      ref: ref,
-      setIsOpen: setIsOpen,
-      label: label,
-      calendar: /*#__PURE__*/jsxRuntime.jsx(Calendar, {
-        ref: pickerRef,
-        Footer: Footer,
-        Header: Header,
-        ...calendarProps
-      }),
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      color: pickerState.isInvalid ? 'warning' : variant,
-      helperProps: helperPropsInvalid ?? helperProps,
-      children: /*#__PURE__*/jsxRuntime.jsx(DateField, {
-        fieldProps: fieldProps,
-        groupProps: groupProps,
-        dateCreateProps: dateCreateProps,
+  return /*#__PURE__*/jsxRuntime.jsx(reactAria.I18nProvider, {
+    locale: locale,
+    children: /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
+      timezone: timezone,
+      formatOptions: formatOptions,
+      children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
+        ...props,
+        isOpen: isOpen,
+        readonly: fieldProps.isReadOnly,
+        pickerRef: pickerRef,
         ref: ref,
-        onChange: _onChange,
-        rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
-          showClearButton: showClearButton,
-          setOpen: setIsOpen,
-          open: isOpen,
-          icon: edsIcons.calendar,
-          disabled: isDisabled,
-          readonly: isReadOnly,
-          reset: () => _onChange(null),
-          buttonProps: buttonProps,
-          valueString: pickerState.formatValue(locale, {
-            year: 'numeric',
-            month: 'short',
-            day: '2-digit'
-          })
+        setIsOpen: setIsOpen,
+        label: label,
+        calendar: /*#__PURE__*/jsxRuntime.jsx(Calendar, {
+          ref: pickerRef,
+          Footer: Footer,
+          Header: Header,
+          ...calendarProps
         }),
-        variant: variant
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        color: pickerState.isInvalid ? 'warning' : variant,
+        helperProps: helperPropsInvalid ?? helperProps,
+        children: /*#__PURE__*/jsxRuntime.jsx(DateField, {
+          fieldProps: fieldProps,
+          groupProps: groupProps,
+          dateCreateProps: dateCreateProps,
+          ref: ref,
+          onChange: _onChange,
+          rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
+            showClearButton: showClearButton,
+            setOpen: setIsOpen,
+            open: isOpen,
+            icon: edsIcons.calendar,
+            disabled: isDisabled,
+            readonly: isReadOnly,
+            reset: () => _onChange(null),
+            buttonProps: buttonProps,
+            valueString: pickerState.formatValue(locale, {
+              year: 'numeric',
+              month: 'short',
+              day: '2-digit'
+            })
+          }),
+          variant: variant
+        })
       })
     })
   });
@@ -12174,6 +12293,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
   Header,
   timezone,
   defaultValue,
+  locale: propLocale,
   formatOptions,
   hideClearButton,
   disabled: isDisabled,
@@ -12199,9 +12319,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
   const inputRef = react.useRef(null);
   const pickerRef = react.useRef(null);
   const ref = forwardedRef || inputRef;
-  const {
-    locale
-  } = reactAria.useLocale();
+  const locale = useGetLocale(propLocale);
   const {
     _minValue,
     _maxValue,
@@ -12267,47 +12385,50 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
     if (!defaultValue && !value) setInnerValue(null);
     if (!val?.from && !val?.to) setInnerValue(null);
   }, [defaultValue, value]);
-  return /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
-    timezone: timezone,
-    formatOptions: formatOptions,
-    children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
-      ...props,
-      isOpen: isOpen,
-      color: state.isInvalid ? 'warning' : props.variant,
-      helperProps: helperProps ?? props.helperProps,
-      readonly: startFieldProps.isReadOnly,
-      ref: ref,
-      pickerRef: pickerRef,
-      setIsOpen: setIsOpen,
-      label: label,
-      calendar: /*#__PURE__*/jsxRuntime.jsx(RangeCalendar, {
-        ref: pickerRef,
-        maxValue: _maxValue,
-        minValue: _minValue,
-        isDateUnavailable: _isDateUnavailable,
-        Footer: Footer,
-        Header: Header,
-        ...calendarProps
-      }),
-      children: /*#__PURE__*/jsxRuntime.jsx(DateRangeField, {
-        startFieldProps: startFieldProps,
-        endFieldProps: endFieldProps,
-        groupProps: groupProps,
+  return /*#__PURE__*/jsxRuntime.jsx(reactAria.I18nProvider, {
+    locale: locale,
+    children: /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
+      timezone: timezone,
+      formatOptions: formatOptions,
+      children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
+        ...props,
+        isOpen: isOpen,
+        color: state.isInvalid ? 'warning' : props.variant,
+        helperProps: helperProps ?? props.helperProps,
+        readonly: startFieldProps.isReadOnly,
         ref: ref,
-        variant: props.variant,
-        disabled: isDisabled,
-        rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
-          showClearButton: showClearButton,
-          buttonProps: buttonProps,
+        pickerRef: pickerRef,
+        setIsOpen: setIsOpen,
+        label: label,
+        calendar: /*#__PURE__*/jsxRuntime.jsx(RangeCalendar, {
+          ref: pickerRef,
+          maxValue: _maxValue,
+          minValue: _minValue,
+          isDateUnavailable: _isDateUnavailable,
+          Footer: Footer,
+          Header: Header,
+          ...calendarProps
+        }),
+        children: /*#__PURE__*/jsxRuntime.jsx(DateRangeField, {
+          startFieldProps: startFieldProps,
+          endFieldProps: endFieldProps,
+          groupProps: groupProps,
+          ref: ref,
+          variant: props.variant,
           disabled: isDisabled,
-          readonly: isReadOnly,
-          reset: () => {
-            _onChange(null);
-          },
-          setOpen: setIsOpen,
-          open: isOpen,
-          icon: edsIcons.calendar_date_range,
-          valueString: valueString
+          rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
+            showClearButton: showClearButton,
+            buttonProps: buttonProps,
+            disabled: isDisabled,
+            readonly: isReadOnly,
+            reset: () => {
+              _onChange(null);
+            },
+            setOpen: setIsOpen,
+            open: isOpen,
+            icon: edsIcons.calendar_date_range,
+            valueString: valueString
+          })
         })
       })
     })

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

@@ -6,12 +6,13 @@ import { useConvertedValidationFunctions } from './utils/useConvertedValidationF
 import { FieldWrapper } from './fields/FieldWrapper.js';
 import { Toggle } from './fields/Toggle.js';
 import { toCalendarDateTime, fromDate, toCalendarDate, createCalendar } from '@internationalized/date';
-import { useLocale, useDatePicker } from 'react-aria';
+import { useDatePicker, I18nProvider } from 'react-aria';
 import { useDatePickerState } from '@react-stately/datepicker';
 import { DatePickerProvider, defaultTimezone } from './utils/context.js';
 import { tokens } from '@equinor/eds-tokens';
 import { Icon } from '../Icon/index.js';
 import { getCalendarDate } from './utils/get-calendar-date.js';
+import { useGetLocale } from './utils/useGetLocale.js';
 import { jsx } from 'react/jsx-runtime';
 
 const DatePicker = /*#__PURE__*/forwardRef(({
@@ -24,6 +25,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   Footer,
   Header,
   timezone,
+  locale: propLocale,
   defaultValue,
   showTimeInput,
   granularity,
@@ -83,16 +85,14 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     }
   }, [onChange, isOpen, showTimeInput, timezone]);
   const _value = getCalendarDate(value, timezone, showTimeInput) ?? innerValue;
-  const {
-    locale
-  } = useLocale();
+  const locale = useGetLocale(propLocale);
   const dateCreateProps = {
     helperProps,
     variant,
     isDisabled,
     value: _value,
     hideTimeZone: true,
-    locale,
+    locale: locale,
     createCalendar,
     onChange: _onChange,
     minValue: _minValue,
@@ -123,49 +123,52 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (!defaultValue && !value) setInnerValue(null);
   }, [defaultValue, value]);
-  return /*#__PURE__*/jsx(DatePickerProvider, {
-    timezone: timezone,
-    formatOptions: formatOptions,
-    children: /*#__PURE__*/jsx(FieldWrapper, {
-      ...props,
-      isOpen: isOpen,
-      readonly: fieldProps.isReadOnly,
-      pickerRef: pickerRef,
-      ref: ref,
-      setIsOpen: setIsOpen,
-      label: label,
-      calendar: /*#__PURE__*/jsx(Calendar, {
-        ref: pickerRef,
-        Footer: Footer,
-        Header: Header,
-        ...calendarProps
-      }),
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      color: pickerState.isInvalid ? 'warning' : variant,
-      helperProps: helperPropsInvalid ?? helperProps,
-      children: /*#__PURE__*/jsx(DateField, {
-        fieldProps: fieldProps,
-        groupProps: groupProps,
-        dateCreateProps: dateCreateProps,
+  return /*#__PURE__*/jsx(I18nProvider, {
+    locale: locale,
+    children: /*#__PURE__*/jsx(DatePickerProvider, {
+      timezone: timezone,
+      formatOptions: formatOptions,
+      children: /*#__PURE__*/jsx(FieldWrapper, {
+        ...props,
+        isOpen: isOpen,
+        readonly: fieldProps.isReadOnly,
+        pickerRef: pickerRef,
         ref: ref,
-        onChange: _onChange,
-        rightAdornments: /*#__PURE__*/jsx(Toggle, {
-          showClearButton: showClearButton,
-          setOpen: setIsOpen,
-          open: isOpen,
-          icon: calendar,
-          disabled: isDisabled,
-          readonly: isReadOnly,
-          reset: () => _onChange(null),
-          buttonProps: buttonProps,
-          valueString: pickerState.formatValue(locale, {
-            year: 'numeric',
-            month: 'short',
-            day: '2-digit'
-          })
+        setIsOpen: setIsOpen,
+        label: label,
+        calendar: /*#__PURE__*/jsx(Calendar, {
+          ref: pickerRef,
+          Footer: Footer,
+          Header: Header,
+          ...calendarProps
         }),
-        variant: variant
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        color: pickerState.isInvalid ? 'warning' : variant,
+        helperProps: helperPropsInvalid ?? helperProps,
+        children: /*#__PURE__*/jsx(DateField, {
+          fieldProps: fieldProps,
+          groupProps: groupProps,
+          dateCreateProps: dateCreateProps,
+          ref: ref,
+          onChange: _onChange,
+          rightAdornments: /*#__PURE__*/jsx(Toggle, {
+            showClearButton: showClearButton,
+            setOpen: setIsOpen,
+            open: isOpen,
+            icon: calendar,
+            disabled: isDisabled,
+            readonly: isReadOnly,
+            reset: () => _onChange(null),
+            buttonProps: buttonProps,
+            valueString: pickerState.formatValue(locale, {
+              year: 'numeric',
+              month: 'short',
+              day: '2-digit'
+            })
+          }),
+          variant: variant
+        })
       })
     })
   });

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

@@ -4,7 +4,7 @@ import { warning_outlined, calendar_date_range } from '@equinor/eds-icons';
 import { useConvertedValidationFunctions } from './utils/useConvertedValidationFunctions.js';
 import { FieldWrapper } from './fields/FieldWrapper.js';
 import { Toggle } from './fields/Toggle.js';
-import { useLocale, useDateRangePicker } from 'react-aria';
+import { useDateRangePicker, I18nProvider } from 'react-aria';
 import { useDateRangePickerState } from '@react-stately/datepicker';
 import { DateRangeField } from './fields/DateRangeField.js';
 import { toCalendarDate, fromDate } from '@internationalized/date';
@@ -12,6 +12,7 @@ import { DatePickerProvider, defaultTimezone } from './utils/context.js';
 import { tokens } from '@equinor/eds-tokens';
 import { Icon } from '../Icon/index.js';
 import { getCalendarDate } from './utils/get-calendar-date.js';
+import { useGetLocale } from './utils/useGetLocale.js';
 import { jsx } from 'react/jsx-runtime';
 
 const DateRangePicker = /*#__PURE__*/forwardRef(({
@@ -25,6 +26,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
   Header,
   timezone,
   defaultValue,
+  locale: propLocale,
   formatOptions,
   hideClearButton,
   disabled: isDisabled,
@@ -50,9 +52,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
   const inputRef = useRef(null);
   const pickerRef = useRef(null);
   const ref = forwardedRef || inputRef;
-  const {
-    locale
-  } = useLocale();
+  const locale = useGetLocale(propLocale);
   const {
     _minValue,
     _maxValue,
@@ -118,47 +118,50 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
     if (!defaultValue && !value) setInnerValue(null);
     if (!val?.from && !val?.to) setInnerValue(null);
   }, [defaultValue, value]);
-  return /*#__PURE__*/jsx(DatePickerProvider, {
-    timezone: timezone,
-    formatOptions: formatOptions,
-    children: /*#__PURE__*/jsx(FieldWrapper, {
-      ...props,
-      isOpen: isOpen,
-      color: state.isInvalid ? 'warning' : props.variant,
-      helperProps: helperProps ?? props.helperProps,
-      readonly: startFieldProps.isReadOnly,
-      ref: ref,
-      pickerRef: pickerRef,
-      setIsOpen: setIsOpen,
-      label: label,
-      calendar: /*#__PURE__*/jsx(RangeCalendar, {
-        ref: pickerRef,
-        maxValue: _maxValue,
-        minValue: _minValue,
-        isDateUnavailable: _isDateUnavailable,
-        Footer: Footer,
-        Header: Header,
-        ...calendarProps
-      }),
-      children: /*#__PURE__*/jsx(DateRangeField, {
-        startFieldProps: startFieldProps,
-        endFieldProps: endFieldProps,
-        groupProps: groupProps,
+  return /*#__PURE__*/jsx(I18nProvider, {
+    locale: locale,
+    children: /*#__PURE__*/jsx(DatePickerProvider, {
+      timezone: timezone,
+      formatOptions: formatOptions,
+      children: /*#__PURE__*/jsx(FieldWrapper, {
+        ...props,
+        isOpen: isOpen,
+        color: state.isInvalid ? 'warning' : props.variant,
+        helperProps: helperProps ?? props.helperProps,
+        readonly: startFieldProps.isReadOnly,
         ref: ref,
-        variant: props.variant,
-        disabled: isDisabled,
-        rightAdornments: /*#__PURE__*/jsx(Toggle, {
-          showClearButton: showClearButton,
-          buttonProps: buttonProps,
+        pickerRef: pickerRef,
+        setIsOpen: setIsOpen,
+        label: label,
+        calendar: /*#__PURE__*/jsx(RangeCalendar, {
+          ref: pickerRef,
+          maxValue: _maxValue,
+          minValue: _minValue,
+          isDateUnavailable: _isDateUnavailable,
+          Footer: Footer,
+          Header: Header,
+          ...calendarProps
+        }),
+        children: /*#__PURE__*/jsx(DateRangeField, {
+          startFieldProps: startFieldProps,
+          endFieldProps: endFieldProps,
+          groupProps: groupProps,
+          ref: ref,
+          variant: props.variant,
           disabled: isDisabled,
-          readonly: isReadOnly,
-          reset: () => {
-            _onChange(null);
-          },
-          setOpen: setIsOpen,
-          open: isOpen,
-          icon: calendar_date_range,
-          valueString: valueString
+          rightAdornments: /*#__PURE__*/jsx(Toggle, {
+            showClearButton: showClearButton,
+            buttonProps: buttonProps,
+            disabled: isDisabled,
+            readonly: isReadOnly,
+            reset: () => {
+              _onChange(null);
+            },
+            setOpen: setIsOpen,
+            open: isOpen,
+            icon: calendar_date_range,
+            valueString: valueString
+          })
         })
       })
     })

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

@@ -125,7 +125,6 @@ const FieldWrapper = /*#__PURE__*/forwardRef(({
       onClose: () => setIsOpen(false),
       anchorEl: ref.current,
       placement: 'bottom-start',
-      withinPortal: true,
       children: calendar
     })]
   });

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

@@ -0,0 +1,13 @@
+import { useLocale } from 'react-aria';
+
+const useGetLocale = locale => {
+  const {
+    locale: externalLocale
+  } = 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;
+};
+
+export { useGetLocale };

package/dist/esm/components/Popover/Popover.js

@@ -1,6 +1,6 @@
 import { forwardRef, useRef, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useIsomorphicLayoutEffect, useToken } from '@equinor/eds-utils';
+import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken } from '@equinor/eds-utils';
 import { popover } from './Popover.tokens.js';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useInteractions, useDismiss, FloatingFocusManager } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -96,9 +96,13 @@ const Popover = /*#__PURE__*/forwardRef(function Popover({
   const {
     getFloatingProps
   } = useInteractions([useDismiss(context)]);
-  useIsomorphicLayoutEffect(() => {
+  useEffect(() => {
     if (open) {
-      refs.floating.current?.showPopover();
+      setTimeout(() => {
+        if (refs.floating.current?.isConnected) {
+          refs.floating.current.showPopover();
+        }
+      }, 1);
     } else {
       refs.floating.current?.hidePopover();
     }

package/dist/esm/components/Scrim/Scrim.js

@@ -1,7 +1,7 @@
 import { forwardRef, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
-import { mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
+import { useHideBodyScroll, mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
 import { FloatingOverlay } from '@floating-ui/react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -24,6 +24,7 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim({
   ...rest
 }, ref) {
   const scrimRef = useRef(null);
+  useHideBodyScroll(open);
   const combinedScrimRef = useMemo(() => mergeRefs(scrimRef, ref), [scrimRef, ref]);
   useGlobalKeyPress('Escape', () => {
     if (isDismissable && onClose && open) {
@@ -41,7 +42,6 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim({
     return null;
   }
   return /*#__PURE__*/jsx(StyledScrim, {
-    lockScroll: true,
     onMouseDown: handleMouseClose,
     ref: combinedScrimRef,
     ...rest,

package/dist/esm/components/Table/Cell.js

@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 import { InnerContext } from './Inner.context.js';
 import { jsx } from 'react/jsx-runtime';
 import { TableDataCell } from './DataCell/DataCell.js';
+import { TableFooterCell } from './FooterCell/FooterCell.js';
 import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
 
 const Cell = /*#__PURE__*/forwardRef(function Cell({
@@ -19,6 +20,12 @@ const Cell = /*#__PURE__*/forwardRef(function Cell({
             sticky: sticky,
             ...rest
           });
+        case 'foot':
+          return /*#__PURE__*/jsx(TableFooterCell, {
+            ref: ref,
+            sticky: sticky,
+            ...rest
+          });
         default:
         case 'body':
           return /*#__PURE__*/jsx(TableDataCell, {

package/dist/esm/components/Table/Foot/Foot.js

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './Foot.tokens.js';
+import { bordersTemplate } from '@equinor/eds-utils';
+import { InnerContext } from '../Inner.context.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledTableFoot = styled.tfoot.withConfig({
+  displayName: "Foot__StyledTableFoot",
+  componentId: "sc-3w9vih-0"
+})(["", " background:", ";"], bordersTemplate(token.border), token.background);
+const Foot = /*#__PURE__*/forwardRef(function Foot({
+  children,
+  sticky,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(InnerContext.Provider, {
+    value: {
+      variant: 'foot',
+      sticky
+    },
+    children: /*#__PURE__*/jsx(StyledTableFoot, {
+      ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+
+export { Foot };

package/dist/esm/components/Table/Foot/Foot.tokens.js

@@ -0,0 +1,30 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__medium: {
+        rgba: borderColor
+      }
+    },
+    interactive: {
+      table__header__fill_resting: {
+        rgba: backgroundColor
+      }
+    }
+  }
+} = tokens;
+const token = {
+  background: backgroundColor,
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      type: 'border',
+      width: '2px',
+      color: borderColor,
+      style: 'solid'
+    }
+  }
+};
+
+export { token };

package/dist/esm/components/Table/FooterCell/FooterCell.js

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
+import { token } from '../HeaderCell/HeaderCell.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../../EdsProvider/eds.context.js';
+
+const StyledTableCell = styled.th.withConfig({
+  displayName: "FooterCell__StyledTableCell",
+  componentId: "sc-1xq9z77-0"
+})(props => {
+  const {
+    theme,
+    $sticky
+  } = props;
+  const {
+    background,
+    height,
+    typography,
+    spacings
+  } = theme;
+  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), $sticky ? css(["position:sticky;bottom:0;z-index:2;"]) : '');
+});
+const CellInner = styled.div.withConfig({
+  displayName: "FooterCell__CellInner",
+  componentId: "sc-1xq9z77-1"
+})(["display:flex;align-items:center;"]);
+const TableFooterCell = /*#__PURE__*/forwardRef(function TableFooterCell({
+  children,
+  sticky,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token$1 = useToken({
+    density
+  }, token);
+  const props = {
+    ref,
+    $sticky: sticky,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token$1,
+    children: /*#__PURE__*/jsx(StyledTableCell, {
+      ...props,
+      children: /*#__PURE__*/jsx(CellInner, {
+        children: children
+      })
+    })
+  });
+});
+
+export { TableFooterCell };

package/dist/esm/components/Table/Inner.context.js

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 
-const initalState = {
+const initialState = {
   variant: 'body'
 };
-const InnerContext = /*#__PURE__*/createContext(initalState);
+const InnerContext = /*#__PURE__*/createContext(initialState);
 
 export { InnerContext };

package/dist/esm/components/Table/index.js

@@ -3,17 +3,20 @@ import { Body } from './Body.js';
 import { Cell } from './Cell.js';
 import { Caption } from './Caption.js';
 import { Head } from './Head/Head.js';
+import { Foot } from './Foot/Foot.js';
 import { Row } from './Row/Row.js';
 
 const Table = Table$1;
 Table.Body = Body;
 Table.Cell = Cell;
 Table.Head = Head;
+Table.Foot = Foot;
 Table.Row = Row;
 Table.Caption = Caption;
 Table.Body.displayName = 'Table.Body';
 Table.Cell.displayName = 'Table.Cell';
 Table.Head.displayName = 'Table.Head';
+Table.Foot.displayName = 'Table.Foot';
 Table.Row.displayName = 'Table.Row';
 Table.Caption.displayName = 'Table.Caption';
 

package/dist/types/components/Datepicker/DatePicker.d.ts

@@ -21,4 +21,5 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<
     timezone: string;
     granularity?: "hour" | "minute" | "second";
     formatOptions?: import("react-aria").DateFormatterOptions;
+    locale?: string;
 }> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Datepicker/props.d.ts

@@ -93,6 +93,11 @@ export type DatePickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
      * Only applies when input is blurred
      */
     formatOptions?: DateFormatterOptions;
+    /**
+     * The locale to use for formatting the date.
+     * Defaults to browser's language setting
+     */
+    locale?: string;
 }>;
 export type DateTimePickerProps = Omit<DatePickerProps, 'onChange' | 'value' | 'multiple'> & {
     onChange: (date: Date | null) => void;

package/dist/types/components/Datepicker/utils/useGetLocale.d.ts

@@ -0,0 +1 @@
+export declare const useGetLocale: (locale?: string) => string;

package/dist/types/components/Table/Foot/Foot.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export type FootProps = {
+    /** Footer will stick to bottom when scrolling */
+    sticky?: boolean;
+} & HTMLAttributes<HTMLTableSectionElement>;
+export declare const Foot: import("react").ForwardRefExoticComponent<{
+    /** Footer will stick to bottom when scrolling */
+    sticky?: boolean;
+} & HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/Table/Foot/Foot.tokens.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentToken } from '@equinor/eds-tokens';
+export declare const token: ComponentToken;

package/dist/types/components/Table/Foot/index.d.ts

@@ -0,0 +1 @@
+export * from './Foot';

package/dist/types/components/Table/FooterCell/FooterCell.d.ts

@@ -0,0 +1,4 @@
+import { ThHTMLAttributes } from 'react';
+export declare const TableFooterCell: import("react").ForwardRefExoticComponent<{
+    sticky?: boolean;
+} & ThHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/types/components/Table/FooterCell/index.d.ts

@@ -0,0 +1 @@
+export * from './FooterCell';

package/dist/types/components/Table/Inner.context.d.ts

@@ -1,5 +1,5 @@
 type State = {
-    variant: 'body' | 'head';
+    variant: 'body' | 'head' | 'foot';
     sticky?: boolean;
 };
 export declare const InnerContext: import("react").Context<State>;

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

@@ -2,15 +2,17 @@ import { Table as BaseTable, TableProps } from './Table';
 import { Body, BodyProps } from './Body';
 import { Cell, CellProps } from './Cell';
 import { Head, HeadProps } from './Head';
+import { Foot, FootProps } from './Foot';
 import { Row, RowProps } from './Row';
 import { Caption, CaptionProps } from './Caption';
 type TableCompoundProps = typeof BaseTable & {
     Body: typeof Body;
     Cell: typeof Cell;
     Head: typeof Head;
+    Foot: typeof Foot;
     Row: typeof Row;
     Caption: typeof Caption;
 };
 declare const Table: TableCompoundProps;
 export { Table };
-export type { TableProps, CellProps, BodyProps, RowProps, CaptionProps, HeadProps, };
+export type { TableProps, CellProps, BodyProps, RowProps, CaptionProps, HeadProps, FootProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.41.4",
+  "version": "0.42.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -89,8 +89,8 @@
     "downshift": "9.0.8",
     "react-aria": "^3.34.1",
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-utils": "0.8.5",
-    "@equinor/eds-tokens": "0.9.2"
+    "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-utils": "0.8.5"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",