@equinor/eds-core-react 0.38.0 → 0.39.0

package/dist/eds-core-react.cjs

@@ -9431,7 +9431,7 @@ const StyledPopover = styled__default.default('div').withConfig({
 }).withConfig({
   displayName: "Autocomplete__StyledPopover",
   componentId: "sc-yvif0e-2"
-})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;"]);
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;&::backdrop{background-color:transparent;}"]);
 const HelperText = styled__default.default(TextfieldHelperText).withConfig({
   displayName: "Autocomplete__HelperText",
   componentId: "sc-yvif0e-3"
@@ -9542,6 +9542,9 @@ const handleListFocus = e => {
   });
 };
 const defaultOptionDisabled = () => false;
+
+// prettier-ignore
+
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -9555,10 +9558,11 @@ function AutocompleteInner(props, ref) {
     hideClearButton = false,
     onOptionsChange,
     onInputChange,
-    selectedOptions,
+    selectedOptions: _selectedOptions,
     multiple,
+    itemCompare,
     allowSelectAll,
-    initialSelectedOptions = [],
+    initialSelectedOptions: _initialSelectedOptions = [],
     disablePortal,
     optionDisabled = defaultOptionDisabled,
     optionsFilter,
@@ -9575,6 +9579,8 @@ function AutocompleteInner(props, ref) {
     variant,
     ...other
   } = props;
+  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) {
     console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
   }
@@ -9620,7 +9626,10 @@ function AutocompleteInner(props, ref) {
       ...multipleSelectionProps,
       onSelectedItemsChange: changes => {
         if (onOptionsChange) {
-          const selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          if (itemCompare) {
+            selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
+          }
           onOptionsChange({
             selectedItems
           });
@@ -9767,9 +9776,12 @@ function AutocompleteInner(props, ref) {
       ...comboBoxProps,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
-          const {
+          let {
             selectedItem
           } = changes;
+          if (itemCompare) {
+            selectedItem = inputOptions.find(item => itemCompare(item, selectedItem));
+          }
           onOptionsChange({
             selectedItems: selectedItem ? [selectedItem] : []
           });
@@ -11607,7 +11619,7 @@ function DateSegment({
   const formatter = reactAria.useDateFormatter(formatOptions);
   const parts = state.value ? formatter.formatToParts(state.value.toDate(timezone)) : [];
   const part = parts.find(p => p.type === segment.type);
-  const value = part?.value ?? segment.text;
+  const value = segment.isPlaceholder || segment.type === 'literal' ? segment.text : part?.value ?? segment.text;
   const [focus, setFocus] = react.useState(false);
   const ref = react.useRef(null);
   const {

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

@@ -35,7 +35,7 @@ const StyledPopover = styled('div').withConfig({
 }).withConfig({
   displayName: "Autocomplete__StyledPopover",
   componentId: "sc-yvif0e-2"
-})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;"]);
+})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;&::backdrop{background-color:transparent;}"]);
 const HelperText = styled(TextfieldHelperText).withConfig({
   displayName: "Autocomplete__HelperText",
   componentId: "sc-yvif0e-3"
@@ -146,6 +146,9 @@ const handleListFocus = e => {
   });
 };
 const defaultOptionDisabled = () => false;
+
+// prettier-ignore
+
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -159,10 +162,11 @@ function AutocompleteInner(props, ref) {
     hideClearButton = false,
     onOptionsChange,
     onInputChange,
-    selectedOptions,
+    selectedOptions: _selectedOptions,
     multiple,
+    itemCompare,
     allowSelectAll,
-    initialSelectedOptions = [],
+    initialSelectedOptions: _initialSelectedOptions = [],
     disablePortal,
     optionDisabled = defaultOptionDisabled,
     optionsFilter,
@@ -179,6 +183,8 @@ function AutocompleteInner(props, ref) {
     variant,
     ...other
   } = props;
+  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) {
     console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
   }
@@ -224,7 +230,10 @@ function AutocompleteInner(props, ref) {
       ...multipleSelectionProps,
       onSelectedItemsChange: changes => {
         if (onOptionsChange) {
-          const selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          if (itemCompare) {
+            selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
+          }
           onOptionsChange({
             selectedItems
           });
@@ -371,9 +380,12 @@ function AutocompleteInner(props, ref) {
       ...comboBoxProps,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
-          const {
+          let {
             selectedItem
           } = changes;
+          if (itemCompare) {
+            selectedItem = inputOptions.find(item => itemCompare(item, selectedItem));
+          }
           onOptionsChange({
             selectedItems: selectedItem ? [selectedItem] : []
           });

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

@@ -26,7 +26,7 @@ function DateSegment({
   const formatter = useDateFormatter(formatOptions);
   const parts = state.value ? formatter.formatToParts(state.value.toDate(timezone)) : [];
   const part = parts.find(p => p.type === segment.type);
-  const value = part?.value ?? segment.text;
+  const value = segment.isPlaceholder || segment.type === 'literal' ? segment.text : part?.value ?? segment.text;
   const [focus, setFocus] = useState(false);
   const ref = useRef(null);
   const {

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

@@ -100,6 +100,10 @@ export type AutocompleteProps<T> = {
      *  @default 300
      */
     dropdownHeight?: number;
+    /**
+     * 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>;
 declare function AutocompleteInner<T>(props: AutocompleteProps<T>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare const Autocomplete: <T>(props: {
@@ -180,6 +184,10 @@ export declare const Autocomplete: <T>(props: {
      *  @default 300
      */
     dropdownHeight?: number;
+    /**
+     * 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> & {
     ref?: React.ForwardedRef<HTMLDivElement>;
     /** @ignore */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -75,7 +75,7 @@
   "peerDependencies": {
     "react": ">=16.8",
     "react-dom": ">=16.8",
-    "styled-components": ">=4.2"
+    "styled-components": ">=5.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",