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

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"
@@ -9431,7 +9432,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"
@@ -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
@@ -9542,6 +9543,9 @@ const handleListFocus = e => {
   });
 };
 const defaultOptionDisabled = () => false;
+// MARK: types
+
+// MARK: component
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -9555,10 +9559,11 @@ function AutocompleteInner(props, ref) {
     hideClearButton = false,
     onOptionsChange,
     onInputChange,
-    selectedOptions,
+    selectedOptions: _selectedOptions,
     multiple,
+    itemCompare,
     allowSelectAll,
-    initialSelectedOptions = [],
+    initialSelectedOptions: _initialSelectedOptions = [],
     disablePortal,
     optionDisabled = defaultOptionDisabled,
     optionsFilter,
@@ -9575,6 +9580,10 @@ 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) {
     console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
   }
@@ -9620,7 +9629,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
           });
@@ -9641,6 +9653,8 @@ 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));
@@ -9660,6 +9674,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) {
@@ -9682,6 +9698,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,
@@ -9696,8 +9714,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);
@@ -9762,14 +9783,18 @@ function AutocompleteInner(props, ref) {
       }
     }
   };
+  // MARK: singleselect specific
   if (!multiple) {
     comboBoxProps = {
       ...comboBoxProps,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
-          const {
+          let {
             selectedItem
           } = changes;
+          if (itemCompare) {
+            selectedItem = inputOptions.find(item => itemCompare(item, selectedItem));
+          }
           onOptionsChange({
             selectedItems: selectedItem ? [selectedItem] : []
           });
@@ -9835,6 +9860,7 @@ function AutocompleteInner(props, ref) {
       };
     }
   }
+  // MARK: multiselect specific
   if (multiple) {
     placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
     comboBoxProps = {
@@ -9928,6 +9954,8 @@ function AutocompleteInner(props, ref) {
     inputValue,
     reset: resetCombobox
   } = downshift.useCombobox(comboBoxProps);
+
+  // MARK: floating-ui setup
   const {
     x,
     y,
@@ -9959,6 +9987,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();
@@ -9975,6 +10005,8 @@ function AutocompleteInner(props, ref) {
   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({
@@ -10076,6 +10108,8 @@ function AutocompleteInner(props, ref) {
     disabled
   }));
   const consolidatedEvents = mergeEventsFromRight(other, inputProps);
+
+  // MARK: input
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
@@ -10131,6 +10165,7 @@ function AutocompleteInner(props, ref) {
     })
   });
 }
+// MARK: exported component
 const Autocomplete = /*#__PURE__*/react.forwardRef(AutocompleteInner);
 
 const {
@@ -11607,7 +11642,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

@@ -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"
@@ -35,7 +36,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"
@@ -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
@@ -146,6 +147,9 @@ const handleListFocus = e => {
   });
 };
 const defaultOptionDisabled = () => false;
+// MARK: types
+
+// MARK: component
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -159,10 +163,11 @@ function AutocompleteInner(props, ref) {
     hideClearButton = false,
     onOptionsChange,
     onInputChange,
-    selectedOptions,
+    selectedOptions: _selectedOptions,
     multiple,
+    itemCompare,
     allowSelectAll,
-    initialSelectedOptions = [],
+    initialSelectedOptions: _initialSelectedOptions = [],
     disablePortal,
     optionDisabled = defaultOptionDisabled,
     optionsFilter,
@@ -179,6 +184,10 @@ 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) {
     console.warn('Autocomplete "disablePortal" prop has been deprecated. Autocomplete now uses the native popover api');
   }
@@ -224,7 +233,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
           });
@@ -245,6 +257,8 @@ 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));
@@ -264,6 +278,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) {
@@ -286,6 +302,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,
@@ -300,8 +318,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);
@@ -366,14 +387,18 @@ function AutocompleteInner(props, ref) {
       }
     }
   };
+  // MARK: singleselect specific
   if (!multiple) {
     comboBoxProps = {
       ...comboBoxProps,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
-          const {
+          let {
             selectedItem
           } = changes;
+          if (itemCompare) {
+            selectedItem = inputOptions.find(item => itemCompare(item, selectedItem));
+          }
           onOptionsChange({
             selectedItems: selectedItem ? [selectedItem] : []
           });
@@ -439,6 +464,7 @@ function AutocompleteInner(props, ref) {
       };
     }
   }
+  // MARK: multiselect specific
   if (multiple) {
     placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
     comboBoxProps = {
@@ -532,6 +558,8 @@ function AutocompleteInner(props, ref) {
     inputValue,
     reset: resetCombobox
   } = useCombobox(comboBoxProps);
+
+  // MARK: floating-ui setup
   const {
     x,
     y,
@@ -563,6 +591,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();
@@ -579,6 +609,8 @@ function AutocompleteInner(props, ref) {
   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({
@@ -680,6 +712,8 @@ function AutocompleteInner(props, ref) {
     disabled
   }));
   const consolidatedEvents = mergeEventsFromRight(other, inputProps);
+
+  // MARK: input
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(Container, {
@@ -735,6 +769,7 @@ function AutocompleteInner(props, ref) {
     })
   });
 }
+// MARK: exported component
 const Autocomplete = /*#__PURE__*/forwardRef(AutocompleteInner);
 
 export { Autocomplete };

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

@@ -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 */
@@ -100,11 +87,15 @@ export type AutocompleteProps<T> = {
      *  @default 300
      */
     dropdownHeight?: number;
-} & HTMLAttributes<HTMLDivElement> & OptionLabelProps<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>;
 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
@@ -156,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 */
@@ -180,7 +177,11 @@ export declare const Autocomplete: <T>(props: {
      *  @default 300
      */
     dropdownHeight?: number;
-} & HTMLAttributes<HTMLDivElement> & OptionLabelProps<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> & {
     ref?: React.ForwardedRef<HTMLDivElement>;
     /** @ignore */
     displayName?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.38.0",
+  "version": "0.39.1-dev13062024",
   "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",
@@ -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",