@equinor/eds-core-react 0.39.0 → 0.40.0

package/dist/eds-core-react.cjs

@@ -9420,6 +9420,7 @@ const Container$2 = styled__default.default.div.withConfig({
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
 const AllSymbol = Symbol('Select all');
+// MARK: styled components
 const StyledList = styled__default.default(List$1).withConfig({
   displayName: "Autocomplete__StyledList",
   componentId: "sc-yvif0e-1"
@@ -9452,7 +9453,7 @@ const StyledButton$1 = styled__default.default(Button$1).withConfig({
     }
   }
 }) => styled.css(["height:", ";width:", ";"], button.height, button.height));
-
+// MARK: outside functions
 // Typescript can struggle with parsing generic arrow functions in a .tsx file (see https://github.com/microsoft/TypeScript/issues/15713)
 // Workaround is to add a trailing , after T, which tricks the compiler, but also have to ignore prettier rule.
 // prettier-ignore
@@ -9489,8 +9490,10 @@ function mergeEventsFromRight(props1, props2) {
 const findNextIndex = ({
   index,
   optionDisabled,
-  availableItems
+  availableItems,
+  allDisabled
 }) => {
+  if (allDisabled) return 0;
   const options = {
     index,
     optionDisabled,
@@ -9510,8 +9513,10 @@ const findNextIndex = ({
 const findPrevIndex = ({
   index,
   optionDisabled,
-  availableItems
+  availableItems,
+  allDisabled
 }) => {
+  if (allDisabled) return 0;
   const options = {
     index,
     optionDisabled,
@@ -9542,9 +9547,9 @@ const handleListFocus = e => {
   });
 };
 const defaultOptionDisabled = () => false;
+// MARK: types
 
-// prettier-ignore
-
+// MARK: component
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -9579,6 +9584,8 @@ function AutocompleteInner(props, ref) {
     variant,
     ...other
   } = props;
+
+  // MARK: initializing data/setup
   const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
   const initialSelectedOptions = _initialSelectedOptions ? itemCompare ? options.filter(item => _initialSelectedOptions.some(compare => itemCompare(item, compare))) : _initialSelectedOptions : undefined;
   if (disablePortal) {
@@ -9588,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`);
@@ -9650,10 +9658,13 @@ function AutocompleteInner(props, ref) {
     selectedItems,
     setSelectedItems
   } = downshift.useMultipleSelection(multipleSelectionProps);
+
+  // MARK: select all logic
   const enabledItems = react.useMemo(() => {
     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(() => {
@@ -9669,6 +9680,8 @@ function AutocompleteInner(props, ref) {
       setSelectedItems([...enabledItems, ...selectedDisabledItemsSet]);
     }
   };
+
+  // MARK: getLabel
   const getLabel = react.useCallback(item => {
     //note: non strict check for null or undefined to allow 0
     if (item == null) {
@@ -9691,6 +9704,8 @@ function AutocompleteInner(props, ref) {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
+
+  // MARK: setup virtualizer
   const scrollContainer = react.useRef(null);
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: availableItems.length,
@@ -9705,8 +9720,11 @@ function AutocompleteInner(props, ref) {
   edsUtils.useIsomorphicLayoutEffect(() => {
     rowVirtualizer?.measure?.();
   }, [rowVirtualizer, density]);
+
+  // MARK: downshift state
   let comboBoxProps = {
     items: availableItems,
+    //can not pass readonly type to downshift so we cast it to regular T[]
     initialSelectedItem: initialSelectedOptions[0],
     isItemDisabled(item) {
       return optionDisabled(item);
@@ -9771,6 +9789,7 @@ function AutocompleteInner(props, ref) {
       }
     }
   };
+  // MARK: singleselect specific
   if (!multiple) {
     comboBoxProps = {
       ...comboBoxProps,
@@ -9816,7 +9835,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
@@ -9832,7 +9852,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           default:
@@ -9847,6 +9868,7 @@ function AutocompleteInner(props, ref) {
       };
     }
   }
+  // MARK: multiselect specific
   if (multiple) {
     placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
     comboBoxProps = {
@@ -9876,7 +9898,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
@@ -9892,7 +9915,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
@@ -9940,6 +9964,8 @@ function AutocompleteInner(props, ref) {
     inputValue,
     reset: resetCombobox
   } = downshift.useCombobox(comboBoxProps);
+
+  // MARK: floating-ui setup
   const {
     x,
     y,
@@ -9971,6 +9997,8 @@ function AutocompleteInner(props, ref) {
       return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, isOpen]);
+
+  // MARK: popover toggle
   edsUtils.useIsomorphicLayoutEffect(() => {
     if (isOpen) {
       refs.floating.current.showPopover();
@@ -9983,10 +10011,13 @@ 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;
   const selectedItemsLabels = react.useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
+
+  // MARK: optionsList
   const optionsList = /*#__PURE__*/jsxRuntime.jsx(StyledPopover, {
     popover: "manual",
     ...getFloatingProps({
@@ -10085,9 +10116,12 @@ function AutocompleteInner(props, ref) {
   });
   const inputProps = getInputProps(getDropdownProps({
     preventKeyAction: multiple ? isOpen : undefined,
-    disabled
+    disabled,
+    ref: inputRef
   }));
   const consolidatedEvents = mergeEventsFromRight(other, inputProps);
+
+  // MARK: input
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
@@ -10143,6 +10177,7 @@ function AutocompleteInner(props, ref) {
     })
   });
 }
+// MARK: exported component
 const Autocomplete = /*#__PURE__*/react.forwardRef(AutocompleteInner);
 
 const {
@@ -11601,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)
@@ -11755,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',
@@ -11810,9 +11853,12 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
   defaultValue,
   showTimeInput,
   granularity,
+  hideClearButton,
   disabled: isDisabled,
   readOnly: isReadOnly,
   formatOptions,
+  helperProps,
+  variant,
   ...props
 }, forwardedRef) => {
   timezone = timezone ?? defaultTimezone;
@@ -11867,7 +11913,8 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
     locale
   } = reactAria.useLocale();
   const dateCreateProps = {
-    ...props,
+    helperProps,
+    variant,
     isDisabled,
     value: _value,
     hideTimeZone: true,
@@ -11888,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, {
@@ -11896,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(() => {
@@ -11905,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,
@@ -11919,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,
@@ -11928,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,
@@ -11941,7 +11991,7 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
             day: '2-digit'
           })
         }),
-        variant: props.variant
+        variant: variant
       })
     })
   });
@@ -12057,6 +12107,7 @@ const DateRangePicker = /*#__PURE__*/react.forwardRef(({
   timezone,
   defaultValue,
   formatOptions,
+  hideClearButton,
   disabled: isDisabled,
   readOnly: isReadOnly,
   ...props
@@ -12134,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',
@@ -12176,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';
@@ -24,6 +24,7 @@ const Container = styled.div.withConfig({
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
 const AllSymbol = Symbol('Select all');
+// MARK: styled components
 const StyledList = styled(List).withConfig({
   displayName: "Autocomplete__StyledList",
   componentId: "sc-yvif0e-1"
@@ -56,7 +57,7 @@ const StyledButton = styled(Button).withConfig({
     }
   }
 }) => css(["height:", ";width:", ";"], button.height, button.height));
-
+// MARK: outside functions
 // Typescript can struggle with parsing generic arrow functions in a .tsx file (see https://github.com/microsoft/TypeScript/issues/15713)
 // Workaround is to add a trailing , after T, which tricks the compiler, but also have to ignore prettier rule.
 // prettier-ignore
@@ -93,8 +94,10 @@ function mergeEventsFromRight(props1, props2) {
 const findNextIndex = ({
   index,
   optionDisabled,
-  availableItems
+  availableItems,
+  allDisabled
 }) => {
+  if (allDisabled) return 0;
   const options = {
     index,
     optionDisabled,
@@ -114,8 +117,10 @@ const findNextIndex = ({
 const findPrevIndex = ({
   index,
   optionDisabled,
-  availableItems
+  availableItems,
+  allDisabled
 }) => {
+  if (allDisabled) return 0;
   const options = {
     index,
     optionDisabled,
@@ -146,9 +151,9 @@ const handleListFocus = e => {
   });
 };
 const defaultOptionDisabled = () => false;
+// MARK: types
 
-// prettier-ignore
-
+// MARK: component
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -183,6 +188,8 @@ function AutocompleteInner(props, ref) {
     variant,
     ...other
   } = props;
+
+  // MARK: initializing data/setup
   const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
   const initialSelectedOptions = _initialSelectedOptions ? itemCompare ? options.filter(item => _initialSelectedOptions.some(compare => itemCompare(item, compare))) : _initialSelectedOptions : undefined;
   if (disablePortal) {
@@ -192,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`);
@@ -254,10 +262,13 @@ function AutocompleteInner(props, ref) {
     selectedItems,
     setSelectedItems
   } = useMultipleSelection(multipleSelectionProps);
+
+  // MARK: select all logic
   const enabledItems = useMemo(() => {
     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(() => {
@@ -273,6 +284,8 @@ function AutocompleteInner(props, ref) {
       setSelectedItems([...enabledItems, ...selectedDisabledItemsSet]);
     }
   };
+
+  // MARK: getLabel
   const getLabel = useCallback(item => {
     //note: non strict check for null or undefined to allow 0
     if (item == null) {
@@ -295,6 +308,8 @@ function AutocompleteInner(props, ref) {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
+
+  // MARK: setup virtualizer
   const scrollContainer = useRef(null);
   const rowVirtualizer = useVirtualizer({
     count: availableItems.length,
@@ -309,8 +324,11 @@ function AutocompleteInner(props, ref) {
   useIsomorphicLayoutEffect(() => {
     rowVirtualizer?.measure?.();
   }, [rowVirtualizer, density]);
+
+  // MARK: downshift state
   let comboBoxProps = {
     items: availableItems,
+    //can not pass readonly type to downshift so we cast it to regular T[]
     initialSelectedItem: initialSelectedOptions[0],
     isItemDisabled(item) {
       return optionDisabled(item);
@@ -375,6 +393,7 @@ function AutocompleteInner(props, ref) {
       }
     }
   };
+  // MARK: singleselect specific
   if (!multiple) {
     comboBoxProps = {
       ...comboBoxProps,
@@ -420,7 +439,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
@@ -436,7 +456,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           default:
@@ -451,6 +472,7 @@ function AutocompleteInner(props, ref) {
       };
     }
   }
+  // MARK: multiselect specific
   if (multiple) {
     placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
     comboBoxProps = {
@@ -480,7 +502,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findNextIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
@@ -496,7 +519,8 @@ function AutocompleteInner(props, ref) {
               highlightedIndex: findPrevIndex({
                 index: changes.highlightedIndex,
                 availableItems,
-                optionDisabled
+                optionDisabled,
+                allDisabled
               })
             };
           case useCombobox.stateChangeTypes.InputKeyDownEnter:
@@ -544,6 +568,8 @@ function AutocompleteInner(props, ref) {
     inputValue,
     reset: resetCombobox
   } = useCombobox(comboBoxProps);
+
+  // MARK: floating-ui setup
   const {
     x,
     y,
@@ -575,6 +601,8 @@ function AutocompleteInner(props, ref) {
       return autoUpdate(refs.reference.current, refs.floating.current, update);
     }
   }, [refs.reference, refs.floating, update, isOpen]);
+
+  // MARK: popover toggle
   useIsomorphicLayoutEffect(() => {
     if (isOpen) {
       refs.floating.current.showPopover();
@@ -587,10 +615,13 @@ 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;
   const selectedItemsLabels = useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
+
+  // MARK: optionsList
   const optionsList = /*#__PURE__*/jsx(StyledPopover, {
     popover: "manual",
     ...getFloatingProps({
@@ -689,9 +720,12 @@ function AutocompleteInner(props, ref) {
   });
   const inputProps = getInputProps(getDropdownProps({
     preventKeyAction: multiple ? isOpen : undefined,
-    disabled
+    disabled,
+    ref: inputRef
   }));
   const consolidatedEvents = mergeEventsFromRight(other, inputProps);
+
+  // MARK: input
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(Container, {
@@ -747,6 +781,7 @@ function AutocompleteInner(props, ref) {
     })
   });
 }
+// MARK: exported component
 const Autocomplete = /*#__PURE__*/forwardRef(AutocompleteInner);
 
 export { Autocomplete };

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/Autocomplete/Autocomplete.d.ts

@@ -1,30 +1,11 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { Variants } from '../types';
-type OptionLabelProps<T> = T extends string | number ? {
-    /**  Custom option label */
-    optionLabel?: (option: T) => string;
-    /** Disable option
-     * @default () => false
-     */
-    optionDisabled?: (option: T) => boolean;
-    /** List of options in dropdown */
-    options: (string | number)[];
-} : {
-    /**  Custom option label */
-    optionLabel: (option: T) => string;
-    /** Disable option
-     * @default () => false
-     */
-    optionDisabled?: (option: T) => boolean;
-    /** List of options in dropdown */
-    options: T[];
-};
 export type AutocompleteChanges<T> = {
     selectedItems: T[];
 };
 export type AutocompleteProps<T> = {
     /** List of options in dropdown */
-    options: T[];
+    options: readonly T[];
     /** Label for the select element */
     label: ReactNode;
     /** Array of initial selected items
@@ -76,12 +57,18 @@ export type AutocompleteProps<T> = {
     multiple?: boolean;
     /** Add select-all option. Throws an error if true while multiple = false */
     allowSelectAll?: boolean;
+    /**  Custom option label. NOTE: This is required when option is an object */
+    optionLabel?: (option: T) => string;
     /**  Custom option template */
     optionComponent?: (option: T, isSelected: boolean) => ReactNode;
     /** Disable use of react portal for dropdown
      * @deprecated  Autocomplete now uses the native popover api to render the dropdown. This prop will be removed in a future version
      */
     disablePortal?: boolean;
+    /** Disable option
+     * @default () => false
+     */
+    optionDisabled?: (option: T) => boolean;
     /** Custom filter function for options */
     optionsFilter?: (option: T, inputValue: string) => boolean;
     /** If `true` the width of the dropdown will adjust to the width of the input */
@@ -104,11 +91,11 @@ export type AutocompleteProps<T> = {
      * Method that is used to compare objects by value. If omitted, objects are matched by reference.
      */
     itemCompare?: (value: T, compare: T) => boolean;
-} & HTMLAttributes<HTMLDivElement> & OptionLabelProps<T>;
+} & HTMLAttributes<HTMLDivElement>;
 declare function AutocompleteInner<T>(props: AutocompleteProps<T>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare const Autocomplete: <T>(props: {
     /** List of options in dropdown */
-    options: T[];
+    options: readonly T[];
     /** Label for the select element */
     label: ReactNode;
     /** Array of initial selected items
@@ -160,12 +147,18 @@ export declare const Autocomplete: <T>(props: {
     multiple?: boolean;
     /** Add select-all option. Throws an error if true while multiple = false */
     allowSelectAll?: boolean;
+    /**  Custom option label. NOTE: This is required when option is an object */
+    optionLabel?: (option: T) => string;
     /**  Custom option template */
     optionComponent?: (option: T, isSelected: boolean) => ReactNode;
     /** Disable use of react portal for dropdown
      * @deprecated  Autocomplete now uses the native popover api to render the dropdown. This prop will be removed in a future version
      */
     disablePortal?: boolean;
+    /** Disable option
+     * @default () => false
+     */
+    optionDisabled?: (option: T) => boolean;
     /** Custom filter function for options */
     optionsFilter?: (option: T, inputValue: string) => boolean;
     /** If `true` the width of the dropdown will adjust to the width of the input */
@@ -188,7 +181,7 @@ export declare const Autocomplete: <T>(props: {
      * Method that is used to compare objects by value. If omitted, objects are matched by reference.
      */
     itemCompare?: (value: T, compare: T) => boolean;
-} & HTMLAttributes<HTMLDivElement> & OptionLabelProps<T> & {
+} & HTMLAttributes<HTMLDivElement> & {
     ref?: React.ForwardedRef<HTMLDivElement>;
     /** @ignore */
     displayName?: string | undefined;

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.0",
+  "version": "0.40.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -86,16 +86,12 @@
     "@react-stately/datepicker": "^3.9.3",
     "@react-types/shared": "^3.23.0",
     "@tanstack/react-virtual": "3.5.0",
-    "downshift": "9.0.4",
+    "downshift": "9.0.6",
     "react-aria": "^3.33.0",
     "@equinor/eds-icons": "^0.21.0",
     "@equinor/eds-tokens": "0.9.2",
     "@equinor/eds-utils": "0.8.5"
   },
-  "engines": {
-    "pnpm": ">=4",
-    "node": ">=10.0.0"
-  },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",
     "test": "tsc -p tsconfig.test.json && jest",