@equinor/eds-core-react 0.39.1-dev13062024 → 0.40.0

package/dist/eds-core-react.cjs

@@ -9490,8 +9490,10 @@ function mergeEventsFromRight(props1, props2) {
 const findNextIndex = ({
   index,
   optionDisabled,
-  availableItems
+  availableItems,
+  allDisabled
 }) => {
+  if (allDisabled) return 0;
   const options = {
     index,
     optionDisabled,
@@ -9511,8 +9513,10 @@ const findNextIndex = ({
 const findPrevIndex = ({
   index,
   optionDisabled,
-  availableItems
+  availableItems,
+  allDisabled
 }) => {
+  if (allDisabled) return 0;
   const options = {
     index,
     optionDisabled,
@@ -9591,6 +9595,7 @@ function AutocompleteInner(props, ref) {
   const [inputOptions, setInputOptions] = react.useState(options);
   const [_availableItems, setAvailableItems] = react.useState(inputOptions);
   const [typedInputValue, setTypedInputValue] = react.useState('');
+  const inputRef = react.useRef(null);
   const showSelectAll = react.useMemo(() => {
     if (!multiple && allowSelectAll) {
       throw new Error(`allowSelectAll can only be used with multiple`);
@@ -9659,6 +9664,7 @@ function AutocompleteInner(props, ref) {
     const disabledItemsSet = new Set(inputOptions.filter(optionDisabled));
     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 selectedEnabledItems = react.useMemo(() => selectedItems.filter(x => !selectedDisabledItemsSet.has(x)), [selectedItems, selectedDisabledItemsSet]);
   const allSelectedState = react.useMemo(() => {
@@ -9829,7 +9835,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
@@ -9845,7 +9852,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           default:
@@ -9890,7 +9898,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
@@ -9906,7 +9915,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
@@ -10001,6 +10011,7 @@ function AutocompleteInner(props, ref) {
     //dont clear items if they are selected and disabled
     setSelectedItems([...selectedDisabledItemsSet]);
     setTypedInputValue('');
+    inputRef.current?.focus();
   };
   const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
   const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;
@@ -10105,7 +10116,8 @@ function AutocompleteInner(props, ref) {
   });
   const inputProps = getInputProps(getDropdownProps({
     preventKeyAction: multiple ? isOpen : undefined,
-    disabled
+    disabled,
+    ref: inputRef
   }));
   const consolidatedEvents = mergeEventsFromRight(other, inputProps);
 
@@ -11624,9 +11636,16 @@ const useDatePickerContext = () => react.useContext(DatePickerContext);
 const Segment = styled__default.default.div.withConfig({
   displayName: "DateSegment__Segment",
   componentId: "sc-19uidpx-0"
-})(["color:", ";font-family:", ";&:focus-visible{outline:2px solid ", ";background-color:", ";}", ""], edsTokens.tokens.typography.input.text.color, edsTokens.tokens.typography.input.text.fontFamily, edsTokens.tokens.colors.interactive.primary__resting.rgba, edsTokens.tokens.colors.ui.background__medium.rgba, ({
+})(({
+  $placeholder,
   $disabled
-}) => $disabled && `color: ${edsTokens.tokens.colors.interactive.disabled__text.rgba};`);
+}) => {
+  return styled.css(["font-family:", ";&:focus-visible{outline:2px solid ", ";background-color:", ";}", " ", ""], edsTokens.tokens.typography.input.text.fontFamily, edsTokens.tokens.colors.interactive.primary__resting.rgba, edsTokens.tokens.colors.ui.background__medium.rgba, $placeholder ? styled.css({
+    color: edsTokens.tokens.colors.text.static_icons__tertiary.rgba
+  }) : styled.css({
+    color: edsTokens.tokens.colors.text.static_icons__default.rgba
+  }), $disabled && styled.css(["color:", ";"], edsTokens.tokens.colors.interactive.disabled__text.rgba));
+});
 
 /**
  * DateSegment is used to represent a single segment of a date in the DateField (i.e. day, month, year)
@@ -11778,10 +11797,11 @@ const Toggle = ({
   disabled,
   buttonProps,
   valueString,
+  showClearButton,
   readonly
 }) => {
   return readonly || disabled ? null : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+    children: [showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
       disabled: disabled,
       variant: 'ghost_icon',
       "aria-label": 'Reset',
@@ -11833,9 +11853,12 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
   defaultValue,
   showTimeInput,
   granularity,
+  hideClearButton,
   disabled: isDisabled,
   readOnly: isReadOnly,
   formatOptions,
+  helperProps,
+  variant,
   ...props
 }, forwardedRef) => {
   timezone = timezone ?? defaultTimezone;
@@ -11890,7 +11913,8 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
     locale
   } = reactAria.useLocale();
   const dateCreateProps = {
-    ...props,
+    helperProps,
+    variant,
     isDisabled,
     value: _value,
     hideTimeZone: true,
@@ -11911,7 +11935,7 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
     fieldProps,
     calendarProps
   } = reactAria.useDatePicker(dateCreateProps, pickerState, ref);
-  const helperProps = pickerState.displayValidation.isInvalid ? {
+  const helperPropsInvalid = pickerState.displayValidation.isInvalid ? {
     text: pickerState.displayValidation.validationErrors.join('\n'),
     color: edsTokens.tokens.colors.interactive.warning__text.rgba,
     icon: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
@@ -11919,6 +11943,7 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
       data: edsIcons.warning_outlined
     })
   } : undefined;
+  const showClearButton = pickerState.dateValue !== null && !hideClearButton;
 
   // innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
   react.useEffect(() => {
@@ -11928,6 +11953,7 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
     timezone: timezone,
     formatOptions: formatOptions,
     children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
+      ...props,
       isOpen: isOpen,
       readonly: fieldProps.isReadOnly,
       pickerRef: pickerRef,
@@ -11942,8 +11968,8 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
       }),
       disabled: isDisabled,
       readOnly: isReadOnly,
-      color: pickerState.isInvalid ? 'warning' : props.variant,
-      helperProps: helperProps ?? props.helperProps,
+      color: pickerState.isInvalid ? 'warning' : variant,
+      helperProps: helperPropsInvalid ?? helperProps,
       children: /*#__PURE__*/jsxRuntime.jsx(DateField, {
         fieldProps: fieldProps,
         groupProps: groupProps,
@@ -11951,6 +11977,7 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
         ref: ref,
         onChange: _onChange,
         rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
+          showClearButton: showClearButton,
           setOpen: setIsOpen,
           open: isOpen,
           icon: edsIcons.calendar,
@@ -11964,7 +11991,7 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
             day: '2-digit'
           })
         }),
-        variant: props.variant
+        variant: variant
       })
     })
   });
@@ -12080,6 +12107,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
   timezone,
   defaultValue,
   formatOptions,
+  hideClearButton,
   disabled: isDisabled,
   readOnly: isReadOnly,
   ...props
@@ -12157,6 +12185,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
       data: edsIcons.warning_outlined
     })
   } : undefined;
+  const showClearButton = state.dateRange !== null && !hideClearButton;
   const formattedValue = state.formatValue(locale, {
     year: 'numeric',
     month: 'short',
@@ -12199,6 +12228,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
         variant: props.variant,
         disabled: isDisabled,
         rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
+          showClearButton: showClearButton,
           buttonProps: buttonProps,
           disabled: isDisabled,
           readonly: isReadOnly,

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

@@ -1,4 +1,4 @@
-import { forwardRef, useState, useMemo, useEffect, useCallback, useRef } from 'react';
+import { forwardRef, useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import styled, { css, ThemeProvider } from 'styled-components';
@@ -94,8 +94,10 @@ function mergeEventsFromRight(props1, props2) {
 const findNextIndex = ({
   index,
   optionDisabled,
-  availableItems
+  availableItems,
+  allDisabled
 }) => {
+  if (allDisabled) return 0;
   const options = {
     index,
     optionDisabled,
@@ -115,8 +117,10 @@ const findNextIndex = ({
 const findPrevIndex = ({
   index,
   optionDisabled,
-  availableItems
+  availableItems,
+  allDisabled
 }) => {
+  if (allDisabled) return 0;
   const options = {
     index,
     optionDisabled,
@@ -195,6 +199,7 @@ function AutocompleteInner(props, ref) {
   const [inputOptions, setInputOptions] = useState(options);
   const [_availableItems, setAvailableItems] = useState(inputOptions);
   const [typedInputValue, setTypedInputValue] = useState('');
+  const inputRef = useRef(null);
   const showSelectAll = useMemo(() => {
     if (!multiple && allowSelectAll) {
       throw new Error(`allowSelectAll can only be used with multiple`);
@@ -263,6 +268,7 @@ function AutocompleteInner(props, ref) {
     const disabledItemsSet = new Set(inputOptions.filter(optionDisabled));
     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 selectedEnabledItems = useMemo(() => selectedItems.filter(x => !selectedDisabledItemsSet.has(x)), [selectedItems, selectedDisabledItemsSet]);
   const allSelectedState = useMemo(() => {
@@ -433,7 +439,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
@@ -449,7 +456,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           default:
@@ -494,7 +502,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
@@ -510,7 +519,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
@@ -605,6 +615,7 @@ function AutocompleteInner(props, ref) {
     //dont clear items if they are selected and disabled
     setSelectedItems([...selectedDisabledItemsSet]);
     setTypedInputValue('');
+    inputRef.current?.focus();
   };
   const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
   const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;
@@ -709,7 +720,8 @@ function AutocompleteInner(props, ref) {
   });
   const inputProps = getInputProps(getDropdownProps({
     preventKeyAction: multiple ? isOpen : undefined,
-    disabled
+    disabled,
+    ref: inputRef
   }));
   const consolidatedEvents = mergeEventsFromRight(other, inputProps);
 

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

@@ -27,9 +27,12 @@ const DatePicker = /*#__PURE__*/forwardRef(({
   defaultValue,
   showTimeInput,
   granularity,
+  hideClearButton,
   disabled: isDisabled,
   readOnly: isReadOnly,
   formatOptions,
+  helperProps,
+  variant,
   ...props
 }, forwardedRef) => {
   timezone = timezone ?? defaultTimezone;
@@ -84,7 +87,8 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     locale
   } = useLocale();
   const dateCreateProps = {
-    ...props,
+    helperProps,
+    variant,
     isDisabled,
     value: _value,
     hideTimeZone: true,
@@ -105,7 +109,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     fieldProps,
     calendarProps
   } = useDatePicker(dateCreateProps, pickerState, ref);
-  const helperProps = pickerState.displayValidation.isInvalid ? {
+  const helperPropsInvalid = pickerState.displayValidation.isInvalid ? {
     text: pickerState.displayValidation.validationErrors.join('\n'),
     color: tokens.colors.interactive.warning__text.rgba,
     icon: /*#__PURE__*/jsx(Icon, {
@@ -113,6 +117,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
       data: warning_outlined
     })
   } : undefined;
+  const showClearButton = pickerState.dateValue !== null && !hideClearButton;
 
   // innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
   useEffect(() => {
@@ -122,6 +127,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     timezone: timezone,
     formatOptions: formatOptions,
     children: /*#__PURE__*/jsx(FieldWrapper, {
+      ...props,
       isOpen: isOpen,
       readonly: fieldProps.isReadOnly,
       pickerRef: pickerRef,
@@ -136,8 +142,8 @@ const DatePicker = /*#__PURE__*/forwardRef(({
       }),
       disabled: isDisabled,
       readOnly: isReadOnly,
-      color: pickerState.isInvalid ? 'warning' : props.variant,
-      helperProps: helperProps ?? props.helperProps,
+      color: pickerState.isInvalid ? 'warning' : variant,
+      helperProps: helperPropsInvalid ?? helperProps,
       children: /*#__PURE__*/jsx(DateField, {
         fieldProps: fieldProps,
         groupProps: groupProps,
@@ -145,6 +151,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
         ref: ref,
         onChange: _onChange,
         rightAdornments: /*#__PURE__*/jsx(Toggle, {
+          showClearButton: showClearButton,
           setOpen: setIsOpen,
           open: isOpen,
           icon: calendar,
@@ -158,7 +165,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
             day: '2-digit'
           })
         }),
-        variant: props.variant
+        variant: variant
       })
     })
   });

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

@@ -26,6 +26,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
   timezone,
   defaultValue,
   formatOptions,
+  hideClearButton,
   disabled: isDisabled,
   readOnly: isReadOnly,
   ...props
@@ -103,6 +104,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
       data: warning_outlined
     })
   } : undefined;
+  const showClearButton = state.dateRange !== null && !hideClearButton;
   const formattedValue = state.formatValue(locale, {
     year: 'numeric',
     month: 'short',
@@ -145,6 +147,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef(({
         variant: props.variant,
         disabled: isDisabled,
         rightAdornments: /*#__PURE__*/jsx(Toggle, {
+          showClearButton: showClearButton,
           buttonProps: buttonProps,
           disabled: isDisabled,
           readonly: isReadOnly,

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

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react';
 import { useDateFormatter, useDateSegment } from 'react-aria';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
 import { useDatePickerContext } from '../utils/context.js';
 import { jsx } from 'react/jsx-runtime';
@@ -8,9 +8,16 @@ import { jsx } from 'react/jsx-runtime';
 const Segment = styled.div.withConfig({
   displayName: "DateSegment__Segment",
   componentId: "sc-19uidpx-0"
-})(["color:", ";font-family:", ";&:focus-visible{outline:2px solid ", ";background-color:", ";}", ""], tokens.typography.input.text.color, tokens.typography.input.text.fontFamily, tokens.colors.interactive.primary__resting.rgba, tokens.colors.ui.background__medium.rgba, ({
+})(({
+  $placeholder,
   $disabled
-}) => $disabled && `color: ${tokens.colors.interactive.disabled__text.rgba};`);
+}) => {
+  return css(["font-family:", ";&:focus-visible{outline:2px solid ", ";background-color:", ";}", " ", ""], tokens.typography.input.text.fontFamily, tokens.colors.interactive.primary__resting.rgba, tokens.colors.ui.background__medium.rgba, $placeholder ? css({
+    color: tokens.colors.text.static_icons__tertiary.rgba
+  }) : css({
+    color: tokens.colors.text.static_icons__default.rgba
+  }), $disabled && css(["color:", ";"], tokens.colors.interactive.disabled__text.rgba));
+});
 
 /**
  * DateSegment is used to represent a single segment of a date in the DateField (i.e. day, month, year)

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

@@ -21,10 +21,11 @@ const Toggle = ({
   disabled,
   buttonProps,
   valueString,
+  showClearButton,
   readonly
 }) => {
   return readonly || disabled ? null : /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(StyledButton, {
+    children: [showClearButton && /*#__PURE__*/jsx(StyledButton, {
       disabled: disabled,
       variant: 'ghost_icon',
       "aria-label": 'Reset',

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

@@ -3,7 +3,7 @@
  * DatePicker component encapsulates the logic for selecting a single date.
  * Either by accessible input field or by a calendar.
  */
-export declare const DatePicker: import("react").ForwardRefExoticComponent<Partial<{
+export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> & Partial<{
     variant: import("../types").Variants;
     disabled?: boolean;
     readOnly?: boolean;
@@ -17,6 +17,7 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Parti
     Footer: (props: import("./props").HeaderFooterProps<import("@react-stately/calendar").CalendarState>) => import("react").ReactNode;
     Header: (props: import("./props").HeaderFooterProps<import("@react-stately/calendar").CalendarState>) => import("react").ReactNode;
     showTimeInput?: boolean;
+    hideClearButton?: boolean;
     defaultValue?: Date;
     timezone: string;
     granularity?: "hour" | "minute" | "second";

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

@@ -3,25 +3,7 @@
  * DateRangePicker component encapsulates the logic for selecting a range of dates
  * Either by accessible input fields or by a calendar.
  */
-export declare const DateRangePicker: import("react").ForwardRefExoticComponent<Omit<Partial<{
-    variant: import("../types").Variants;
-    disabled?: boolean;
-    readOnly?: boolean;
-    helperProps?: import("../InputWrapper/HelperText").HelperTextProps;
-    value: Date;
-    onChange: (date: Date) => void;
-    label: string;
-    minValue: Date;
-    maxValue: Date;
-    isDateUnavailable?: (v: Date) => boolean;
-    Footer: (props: import("./props").HeaderFooterProps<import("@react-stately/calendar").CalendarState>) => import("react").ReactNode;
-    Header: (props: import("./props").HeaderFooterProps<import("@react-stately/calendar").CalendarState>) => import("react").ReactNode;
-    showTimeInput?: boolean;
-    defaultValue?: Date;
-    timezone: string;
-    granularity?: "hour" | "minute" | "second";
-    formatOptions?: import("react-aria").DateFormatterOptions;
-}>, "defaultValue" | "onChange" | "value" | "multiple" | "showTimeInput" | "stateRef"> & Partial<{
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<Omit<import("./props").DatePickerProps, "defaultValue" | "onChange" | "value" | "multiple" | "showTimeInput" | "stateRef"> & Partial<{
     onChange: (range: {
         from: Date;
         to: Date;

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

@@ -3,7 +3,7 @@ import { AriaButtonProps } from 'react-aria';
 /**
  * Toggle component encapsulates the reset and open calendar buttons
  */
-export declare const Toggle: ({ reset, setOpen, open, icon, disabled, buttonProps, valueString, readonly, }: {
+export declare const Toggle: ({ reset, setOpen, open, icon, disabled, buttonProps, valueString, showClearButton, readonly, }: {
     reset: () => void;
     setOpen: (open: boolean) => void;
     open: boolean;
@@ -12,4 +12,5 @@ export declare const Toggle: ({ reset, setOpen, open, icon, disabled, buttonProp
     readonly: boolean;
     buttonProps: AriaButtonProps;
     valueString: string;
+    showClearButton: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,3 @@
 export * from './DatePicker';
 export * from './DateRangePicker';
+export * from './props';

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

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactNode } from 'react';
+import { MutableRefObject, ReactNode, HTMLAttributes } from 'react';
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { Variants } from '../types';
 import { HelperTextProps } from '../InputWrapper/HelperText';
@@ -14,7 +14,7 @@ export type HeaderFooterProps<T = CalendarState | RangeCalendarState> = {
     month: number;
     state: T;
 };
-export type DatePickerProps = Partial<{
+export type DatePickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & Partial<{
     /**
      * The variant / state of the datepicker field
      * @default undefined
@@ -71,6 +71,11 @@ export type DatePickerProps = Partial<{
      * Whether to allow picking the time as well as the date
      */
     showTimeInput?: boolean;
+    /**
+     * hide the clear button even when date is set
+     * @default false
+     */
+    hideClearButton?: boolean;
     /**
      * Uncontrolled value
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.39.1-dev13062024",
+  "version": "0.40.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"