@equinor/eds-core-react 0.39.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"
@@ -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,9 +9543,9 @@ const handleListFocus = e => {
   });
 };
 const defaultOptionDisabled = () => false;
+// MARK: types
 
-// prettier-ignore
-
+// MARK: component
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -9579,6 +9580,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) {
@@ -9650,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));
@@ -9669,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) {
@@ -9691,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,
@@ -9705,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);
@@ -9771,6 +9783,7 @@ function AutocompleteInner(props, ref) {
       }
     }
   };
+  // MARK: singleselect specific
   if (!multiple) {
     comboBoxProps = {
       ...comboBoxProps,
@@ -9847,6 +9860,7 @@ function AutocompleteInner(props, ref) {
       };
     }
   }
+  // MARK: multiselect specific
   if (multiple) {
     placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
     comboBoxProps = {
@@ -9940,6 +9954,8 @@ function AutocompleteInner(props, ref) {
     inputValue,
     reset: resetCombobox
   } = downshift.useCombobox(comboBoxProps);
+
+  // MARK: floating-ui setup
   const {
     x,
     y,
@@ -9971,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();
@@ -9987,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({
@@ -10088,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, {
@@ -10143,6 +10165,7 @@ function AutocompleteInner(props, ref) {
     })
   });
 }
+// MARK: exported component
 const Autocomplete = /*#__PURE__*/react.forwardRef(AutocompleteInner);
 
 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"
@@ -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,9 +147,9 @@ const handleListFocus = e => {
   });
 };
 const defaultOptionDisabled = () => false;
+// MARK: types
 
-// prettier-ignore
-
+// MARK: component
 function AutocompleteInner(props, ref) {
   const {
     options = [],
@@ -183,6 +184,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) {
@@ -254,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));
@@ -273,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) {
@@ -295,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,
@@ -309,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);
@@ -375,6 +387,7 @@ function AutocompleteInner(props, ref) {
       }
     }
   };
+  // MARK: singleselect specific
   if (!multiple) {
     comboBoxProps = {
       ...comboBoxProps,
@@ -451,6 +464,7 @@ function AutocompleteInner(props, ref) {
       };
     }
   }
+  // MARK: multiselect specific
   if (multiple) {
     placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
     comboBoxProps = {
@@ -544,6 +558,8 @@ function AutocompleteInner(props, ref) {
     inputValue,
     reset: resetCombobox
   } = useCombobox(comboBoxProps);
+
+  // MARK: floating-ui setup
   const {
     x,
     y,
@@ -575,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();
@@ -591,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({
@@ -692,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, {
@@ -747,6 +769,7 @@ function AutocompleteInner(props, ref) {
     })
   });
 }
+// MARK: exported component
 const Autocomplete = /*#__PURE__*/forwardRef(AutocompleteInner);
 
 export { Autocomplete };

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/package.json

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