@decisiv/ui-components 2.0.1-alpha.99 → 2.0.2-alpha.2

package/lib/components/Button/index.js

@@ -28,6 +28,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes2 = require("@decisiv/prop-types");
 
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Loading = _interopRequireDefault(require("../Loading"));
+
 var _StyledButton = _interopRequireDefault(require("./StyledButton"));
 
 var _schema = require("./schema");
@@ -72,6 +76,12 @@ var iconMarginProp = {
   left: 'margin-right',
   right: 'margin-left'
 };
+var buttonSizeToSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'medium',
+  extraLarge: 'medium'
+};
 
 var iconMargin = function iconMargin(props) {
   return !props.iconOnly && "".concat(iconMarginProp[props.position], ": ").concat((0, _rem.default)(5));
@@ -83,36 +93,59 @@ var IconContainer = _styledComponents.default.span.withConfig({
 })(["line-height:0;", ";"], iconMargin);
 
 var Button = function Button(props, ref) {
-  var text = props.text,
-      disabled = props.disabled,
+  var disabled = props.disabled,
       icon = props.icon,
       iconPosition = props.iconPosition,
       intent = props.intent,
-      onClick = props.onClick,
       kind = props.kind,
+      loading = props.loading,
+      propLoadingText = props.loadingText,
+      minWidth = props.minWidth,
+      onClick = props.onClick,
       size = props.size,
+      text = props.text,
       variant = props.variant,
-      rest = _objectWithoutProperties(props, ["text", "disabled", "icon", "iconPosition", "intent", "onClick", "kind", "size", "variant"]);
+      rest = _objectWithoutProperties(props, ["disabled", "icon", "iconPosition", "intent", "kind", "loading", "loadingText", "minWidth", "onClick", "size", "text", "variant"]);
 
+  var translate = (0, _useTranslations.default)();
+  var loadingVariant = (0, _react.useMemo)(function () {
+    if (variant === 'ghost') return 'normal';
+    return 'inverted';
+  }, [variant]);
   var ButtonIcon = (0, _react.useMemo)(function () {
     var Icon = icon;
     return Icon && _react.default.createElement(IconContainer, {
       position: iconPosition,
       iconOnly: !text
     }, _react.default.createElement(Icon, {
-      size: size
+      size: buttonSizeToSize[size]
     }));
   }, [icon, iconPosition, size, text]);
+  var ButtonContent = (0, _react.useMemo)(function () {
+    if (loading) {
+      var loadingText = text ? translate(propLoadingText, 'button.loading') : undefined;
+      var showLoadingText = !!text || !!loadingText;
+      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Loading.default, {
+        variant: loadingVariant,
+        size: "small",
+        marginRight: showLoadingText ? 0.5 : 0
+      }), _react.default.createElement(_react.default.Fragment, null, showLoadingText && loadingText));
+    }
+
+    return _react.default.createElement(_react.default.Fragment, null, !!icon && iconPosition !== 'right' && ButtonIcon, !!text && text, !!icon && iconPosition === 'right' && ButtonIcon);
+  }, [ButtonIcon, icon, iconPosition, loading, loadingVariant, propLoadingText, text, translate]);
   return _react.default.createElement(_StyledButton.default, _extends({
-    ref: ref,
-    disabled: disabled,
-    kind: kind,
+    disabled: disabled || loading,
     intent: intent,
+    kind: kind,
+    minWidth: minWidth,
     onClick: disabled ? _noop.default : onClick,
+    ref: ref,
     size: size,
     type: "button",
-    variant: variant
-  }, rest), !!icon && iconPosition !== 'right' && ButtonIcon, !!text && text, !!icon && iconPosition === 'right' && ButtonIcon);
+    variant: variant,
+    $loading: loading
+  }, rest), ButtonContent);
 };
 
 var propTypes = {
@@ -121,12 +154,15 @@ var propTypes = {
     return (0, _isEmpty.default)(text);
   }),
   disabled: _propTypes.default.bool,
-  text: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['small', 'medium']),
   icon: _propTypes.default.elementType,
   iconPosition: _propTypes.default.oneOf(['left', 'right']),
   intent: _propTypes.default.oneOf(['success', 'danger']),
   kind: _propTypes.default.oneOf(['primary', 'secondary']),
+  loading: _propTypes.default.bool,
+  loadingText: _propTypes.default.string,
+  minWidth: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'medium', 'large', 'extraLarge']),
+  text: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['normal', 'inverted', 'ghost'])
 };
 var defaultProps = {
@@ -135,6 +171,9 @@ var defaultProps = {
   iconPosition: 'left',
   intent: undefined,
   kind: undefined,
+  loading: false,
+  loadingText: null,
+  minWidth: undefined,
   size: 'medium',
   text: undefined,
   variant: 'normal'

package/lib/components/Button/index.test.js

@@ -101,39 +101,74 @@ describe('Button', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('renders correctly the large size', function () {
+    var _renderButton3 = renderButton({
+      size: 'large'
+    }),
+        container = _renderButton3.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  it('renders correctly the extraLarge size', function () {
+    var _renderButton4 = renderButton({
+      size: 'extraLarge'
+    }),
+        container = _renderButton4.container;
+
+    expect(container).toMatchSnapshot();
+  });
+  describe('loading', function () {
+    it('renders loading with default text', function () {
+      var _renderButton5 = renderButton({
+        loading: true
+      }),
+          container = _renderButton5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('renders loading with custom message', function () {
+      var _renderButton6 = renderButton({
+        loading: true,
+        loadingText: 'Action...'
+      }),
+          container = _renderButton6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
   describe('kind=secondary', function () {
     it('renders correctly with the light theme', function () {
-      var _renderButton3 = renderButton({
+      var _renderButton7 = renderButton({
         kind: 'secondary'
       }),
-          container = _renderButton3.container;
+          container = _renderButton7.container;
 
       expect(container).toMatchSnapshot();
     });
     it('renders correctly with the dark theme', function () {
-      var _renderButton4 = renderButton({
+      var _renderButton8 = renderButton({
         kind: 'secondary'
       }, 'dark'),
-          container = _renderButton4.container;
+          container = _renderButton8.container;
 
       expect(container).toMatchSnapshot();
     });
     describe('inverted', function () {
       it('renders correctly with the light theme', function () {
-        var _renderButton5 = renderButton({
+        var _renderButton9 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }),
-            container = _renderButton5.container;
+            container = _renderButton9.container;
 
         expect(container).toMatchSnapshot();
       });
       it('renders correctly with the dark theme', function () {
-        var _renderButton6 = renderButton({
+        var _renderButton10 = renderButton({
           kind: 'secondary',
           variant: 'inverted'
         }, 'dark'),
-            container = _renderButton6.container;
+            container = _renderButton10.container;
 
         expect(container).toMatchSnapshot();
       });

package/lib/components/Button/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CAiCpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Button/schema.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,eAAO,MAAM,yBAAyB;;;;CA6CpC,CAAC;AAEH,QAAA,MAAM,MAAM,KAAsC,CAAC;AAInD,eAAe,MAAM,CAAC"}

package/lib/components/Button/schema.js

@@ -17,11 +17,14 @@ var makeButtonSchemaPropTypes = function makeButtonSchemaPropTypes(extensions) {
   return _objectSpread({
     text: _reactDesc.PropTypes.string.description("The button's text"),
     disabled: _reactDesc.PropTypes.bool.description('Defines if the button will be disabled').defaultValue('false'),
-    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the button').defaultValue('medium'),
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium', 'large', 'extraLarge']).description('Defines the size of the button').defaultValue('medium'),
     icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to render'),
     iconPosition: _reactDesc.PropTypes.oneOf(['left', 'right']).description('In which side of the text the icon should be rendered').defaultValue('left'),
     intent: _reactDesc.PropTypes.oneOf(['success', 'danger']).description('Applies desired hover state of button'),
     kind: _reactDesc.PropTypes.oneOf(['primary', 'secondary']).description('Applies inverted button styles'),
+    loading: _reactDesc.PropTypes.bool.description('Defines if the loading animation within the button should be displayed').defaultValue('false'),
+    loadingText: _reactDesc.PropTypes.string.description('Loading animation text'),
+    minWidth: _reactDesc.PropTypes.string.description('A pass-through CSS value for the min-width attribute'),
     variant: _reactDesc.PropTypes.oneOf(['normal', 'inverted']).description('Applies secondary button styles')
   }, extensions);
 };

package/lib/components/Button/types.d.ts

@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes, Ref } from 'react';
 import { IconProps } from '@decisiv/iconix';
 import { TranslatedText } from '../../utils/useTranslations';
 export declare type ButtonRef = HTMLButtonElement;
-export declare type Size = 'medium' | 'small';
+export declare type Size = 'small' | 'medium' | 'large' | 'extraLarge';
 export declare type IconPosition = 'left' | 'right';
 export declare type Intent = 'danger' | 'success';
 export declare type Variant = 'normal' | 'inverted' | 'ghost';
@@ -14,6 +14,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconPosition?: IconPosition;
     intent?: Intent;
     kind?: Kind;
+    loading?: boolean;
+    loadingText?: string;
+    minWidth?: string;
     ref?: Ref<ButtonRef>;
     size?: Size;
     text?: TranslatedText;

package/lib/components/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAC1C,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtC,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1C,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAC1C,oBAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAC/D,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1C,oBAAY,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AACtD,oBAAY,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/lib/components/Combobox/Target.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAkBvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiLtC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,gBAAgB,EAChB,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAkBvE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA+LtC,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,gBAAgB,EAChB,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,CAAC"}

package/lib/components/Combobox/Target.js

@@ -112,6 +112,9 @@ function Target(_ref, ref) {
   }, rest)), hasClearButton && !readOnly && _react.default.createElement(ClearButtonContainer, {
     hasExpandIndicator: hasExpandIndicator
   }, _react.default.createElement(_Button.default, {
+    style: {
+      padding: 0
+    },
     "aria-label": translate(clearButtonLabel, 'combobox.clearButtonLabel', {
       label: inputFieldLabel
     }),
@@ -131,6 +134,13 @@ function Target(_ref, ref) {
   })), hasExpandIndicator && _react.default.createElement(ExpandedIndicatorContainer, {
     disabled: disabled
   }, _react.default.createElement(_Button.default, {
+    "aria-label": translate(undefined, isPopoverVisible ? 'combobox.collapseButtonLabel' : 'combobox.expandButtonLabel', {
+      label: inputFieldLabel
+    }),
+    disabled: disabled,
+    style: {
+      padding: 0
+    },
     variant: "ghost",
     size: "small",
     tabIndex: -1,

package/lib/components/Combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAqiBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAgnBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -122,7 +122,13 @@ function Combobox(props, ref) {
       propValue = props.value,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'sync' : _props$variant,
-      zIndex = props.zIndex;
+      zIndex = props.zIndex,
+      containerSelector = props.containerSelector,
+      pointerEvents = props.pointerEvents,
+      externalIsPopoverVisible = props.isPopoverVisible,
+      externalListRef = props.listRef,
+      enableVirtualization = props.enableVirtualization,
+      getItemHeight = props.getItemHeight;
 
   var _useCombobox = (0, _useCombobox2.default)(props),
       getInputFieldProps = _useCombobox.getInputFieldProps,
@@ -133,7 +139,8 @@ function Combobox(props, ref) {
   var fallbackComboboxRef = (0, _react.useRef)(null);
   var finalComboboxRef = ref || fallbackComboboxRef;
   var inputId = (0, _useUniqueId.default)(id, 'combobox-');
-  var listRef = (0, _react.useRef)(null);
+  var fallbackListRef = (0, _react.useRef)(null);
+  var listRef = externalListRef || fallbackListRef;
 
   var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(),
       _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
@@ -159,6 +166,8 @@ function Combobox(props, ref) {
       setIsPopoverVisibleState = _useState6[1];
 
   var previousIsPopoverVisible = (0, _usePrevious.default)(isPopoverVisible);
+  var isControlled = externalIsPopoverVisible !== undefined;
+  var popoverVisibleStateToUse = isControlled ? externalIsPopoverVisible : isPopoverVisible;
   /**
    * Combobox controls the Popover instead of relying on the Popover's internal state.
    * The Popover's onShow/ onHide handlers only function when the Popover is _not_
@@ -167,6 +176,8 @@ function Combobox(props, ref) {
    */
 
   (0, _react.useEffect)(function () {
+    if (isControlled) return;
+
     if (previousIsPopoverVisible && !isPopoverVisible && onHide) {
       onHide();
     }
@@ -174,17 +185,18 @@ function Combobox(props, ref) {
     if (!previousIsPopoverVisible && isPopoverVisible && onShow) {
       onShow();
     }
-  }, [isPopoverVisible, previousIsPopoverVisible, onShow, onHide]);
+  }, [isControlled, isPopoverVisible, previousIsPopoverVisible, onShow, onHide]);
   /**
    * Update the dropdown list visibility.
    */
 
   var updateIsPopoverVisible = (0, _react.useCallback)(function (arg) {
+    if (isControlled) return;
     if (arg === true || arg === false) setIsPopoverVisibleState(arg);
     if (arg === 'toggle') setIsPopoverVisibleState(function (old) {
       return !old;
     });
-  }, [setIsPopoverVisibleState]);
+  }, [isControlled, setIsPopoverVisibleState]);
   /**
    * This generates a flat list of the options (including those in categories)
    * in the order they are presented in the dropdown list. Filtering disabled elements.
@@ -233,13 +245,49 @@ function Combobox(props, ref) {
    */
 
 
-  var updateSelected = (0, _react.useCallback)(function (selectedId) {
+  var updateSelected = (0, _react.useCallback)(function (selectedIds) {
+    // When using a controlled multiple variation, we want to also have access to the
+    // removed id values.
+    if (multiple && onChangeValue && Array.isArray(selectedIds) && selectedValues) {
+      var isRemoving = selectedIds.length < selectedValues.length;
+
+      if (isRemoving && selectedValues.length > 0) {
+        var removedValue = selectedValues.find(function (_ref2) {
+          var optionId = _ref2.id;
+          return !selectedIds.includes(optionId);
+        });
+
+        if (removedValue && removedValue.id !== undefined) {
+          var filteredValues = selectedValues.filter(function (_ref3) {
+            var optionId = _ref3.id;
+            return optionId !== removedValue.id;
+          });
+          setSelectedValues(filteredValues);
+          onChangeValue(removedValue.id, {
+            removed: true
+          });
+          return;
+        }
+      }
+    }
+
+    var getSelectedId = function getSelectedId(ids) {
+      var isMultiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (Array.isArray(ids)) {
+        return isMultiple ? (0, _last.default)(ids) : ids[0];
+      }
+
+      return ids;
+    };
+
+    var selectedId = getSelectedId(selectedIds, multiple);
     setSelectedValue(selectedId);
     var newSelected = (0, _utils.getOptionFromOptions)(options, selectedId) || null;
 
     if (multiple) {
-      var index = selectedValues && selectedValues.findIndex(function (_ref2) {
-        var itemId = _ref2.id;
+      var index = selectedValues && selectedValues.findIndex(function (_ref4) {
+        var itemId = _ref4.id;
         return itemId === selectedId;
       });
 
@@ -266,8 +314,8 @@ function Combobox(props, ref) {
     }
   }, [multiple, onChangeValue, options, selectedValues, setInternalInputValue, setSelectedValue, setSelectedValues, setActiveId]);
   var removeSelected = (0, _react.useCallback)(function (selectedId) {
-    var newSelectedValues = selectedValues && selectedValues.filter(function (_ref3) {
-      var optionId = _ref3.id;
+    var newSelectedValues = selectedValues && selectedValues.filter(function (_ref5) {
+      var optionId = _ref5.id;
       return selectedId !== optionId;
     });
     setSelectedValues(newSelectedValues);
@@ -306,16 +354,12 @@ function Combobox(props, ref) {
   /**
    * This handler is called by the dropdown's "onChange" event. That handler is called with
    * an array of values, but we only allow single select in the Combobox.
+   * This is being managed in the `updatedSelected` function.
    */
 
   var handleChangeDropdownListValue = (0, _react.useCallback)(function (selectedIds) {
-    if (multiple) {
-      updateSelected((0, _last.default)(selectedIds));
-      return;
-    }
-
-    updateSelected(selectedIds[0]);
-  }, [updateSelected, multiple]);
+    updateSelected(selectedIds);
+  }, [updateSelected]);
   /**
    * Clicking anywhere within the Combobox component (except the clear button) should open
    * the dropdown list. There is some complex logic here because of the <input> rendered inside
@@ -336,45 +380,41 @@ function Combobox(props, ref) {
        * Usually that's fine. In this case, we don't want that behavior.
        */
       updateIsPopoverVisible(false);
-    } else if (isFocused) {
-      if (variant === 'sync' && finalComboboxRef && // @ts-ignore
-      finalComboboxRef.current === event.target) {
+    } else if (variant === 'sync' && finalComboboxRef && // @ts-ignore
+    finalComboboxRef.current === event.target) {
+      /**
+       * This prevents a double toggle when the user clicks
+       * the actual input field inside the combobox.
+       */
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (!isPopoverVisible) {
         /**
-         * This prevents a double toggle when the user clicks
-         * the actual input field inside the combobox.
+         * This re-opens the popover if you first open it,
+         * then make a selection, then click the <input> again.
          */
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!isPopoverVisible) {
-          /**
-           * This re-opens the popover if you first open it,
-           * then make a selection, then click the <input> again.
-           */
-          updateIsPopoverVisible(true);
-        }
-      } else {
-        updateIsPopoverVisible('toggle');
+        updateIsPopoverVisible(true);
       }
+    } else {
+      updateIsPopoverVisible('toggle');
     }
 
     onClick && onClick(event);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isFocused, isPopoverVisible, variant, onClick, updateIsPopoverVisible]);
+  }, [finalInputContainerRef, onClick, updateIsPopoverVisible, variant, finalComboboxRef, isPopoverVisible]);
   /**
    * This focus handler is responsible for opening the dropdown list and tracking focus state.
    * It's important to do this in the focus handler because the dropdown should open when the
    * Combobox is clicked or tabbed to.
+   *
+   * [KDS-3742] Patch: Updated this handler to align the behavior with the Select component.
+   * The popover will no longer automatically show when the Combobox gains focus.
    */
 
   var handleContainerFocus = (0, _react.useCallback)(function (event) {
-    if (variant === 'sync') {
-      updateIsPopoverVisible(true);
-    }
-
     setIsFocused(true);
     onFocus && onFocus(event);
-  }, [onFocus, updateIsPopoverVisible, variant]);
+  }, [onFocus]);
   /**
    * Pressing certain keys when focused on the Combobox component should trigger some actions.
    */
@@ -388,8 +428,8 @@ function Combobox(props, ref) {
       if (!isPopoverVisible) {
         updateIsPopoverVisible(true);
       } else {
-        var currentIndex = (0, _findIndex.default)(flatOptions, function (_ref4) {
-          var optionId = _ref4.id;
+        var currentIndex = (0, _findIndex.default)(flatOptions, function (_ref6) {
+          var optionId = _ref6.id;
           return optionId === activeId;
         });
 
@@ -409,7 +449,13 @@ function Combobox(props, ref) {
       }
     }
 
+    if (event.key === 'Enter' && !isPopoverVisible) {
+      event.preventDefault();
+      updateIsPopoverVisible(true);
+    }
+
     if (event.key === 'Enter' && isPopoverVisible) {
+      event.preventDefault();
       updateSelected(activeId || '');
       updateIsPopoverVisible(false);
     }
@@ -432,7 +478,9 @@ function Combobox(props, ref) {
       updateIsPopoverVisible(false);
     }
   }, [isPopoverVisible, updateIsPopoverVisible]);
-  (0, _useClickOutside.default)([finalComboboxRef, listRef], handleClickOutsideList);
+  (0, _useClickOutside.default)([finalComboboxRef, listRef], handleClickOutsideList, {
+    capture: true
+  });
   /**
    * The DropdownList accepts a prop called `PanelComponent` that can be used
    * to render useful messages like "Loading" and "No Matches". This builds those
@@ -479,7 +527,7 @@ function Combobox(props, ref) {
     return undefined;
   }, [internalInputValue, loading, options, translate]);
   var selectedValuesIds = selectedValues ? selectedValues.map(function (elem) {
-    return elem.id || '';
+    return elem && elem.id || '';
   }) : undefined;
   return _react.default.createElement(StyledInputDiv, {
     maxWidth: maxWidth
@@ -493,18 +541,18 @@ function Combobox(props, ref) {
     onClick: handleContainerClick,
     onKeyDown: handleContainerKeyDown,
     ref: finalComboboxRef
-  }), function (_ref5) {
-    var ariaLabelledBy = _ref5['aria-labelledby'],
-        disabled = _ref5.disabled,
-        targetId = _ref5.id,
-        onBlurTarget = _ref5.onBlur,
-        onChangeTargetValue = _ref5.onChange,
-        onFocusTarget = _ref5.onFocus,
-        readOnly = _ref5.readOnly,
-        targetRef = _ref5.ref,
-        value = _ref5.value,
-        autoComplete = _ref5.autoComplete,
-        type = _ref5.type;
+  }), function (_ref7) {
+    var ariaLabelledBy = _ref7['aria-labelledby'],
+        disabled = _ref7.disabled,
+        targetId = _ref7.id,
+        onBlurTarget = _ref7.onBlur,
+        onChangeTargetValue = _ref7.onChange,
+        onFocusTarget = _ref7.onFocus,
+        readOnly = _ref7.readOnly,
+        targetRef = _ref7.ref,
+        value = _ref7.value,
+        autoComplete = _ref7.autoComplete,
+        type = _ref7.type;
     var dropdownListId = "".concat(targetId, "-dropdown-list");
     return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Target.default, {
       "aria-haspopup": "listbox",
@@ -515,7 +563,7 @@ function Combobox(props, ref) {
       hasClearButton: Boolean(value),
       id: targetId,
       inputFieldLabel: label,
-      isPopoverVisible: isPopoverVisible,
+      isPopoverVisible: popoverVisibleStateToUse,
       name: name,
       multiple: multiple,
       selectedValues: selectedValues,
@@ -537,6 +585,7 @@ function Combobox(props, ref) {
       autoComplete: autoComplete,
       type: type
     }), _react.default.createElement(_DropdownList.default, {
+      containerSelector: containerSelector,
       PanelComponent: getPanelComponent(),
       activeId: activeId,
       "aria-labelledby": ariaLabelledBy,
@@ -555,9 +604,12 @@ function Combobox(props, ref) {
       showArrow: false,
       showCheckbox: !multiple,
       target: popoverTargetRef,
-      visible: Boolean(isPopoverVisible || loading),
+      visible: Boolean(popoverVisibleStateToUse || loading),
       renderOptionLabel: renderOptionLabel,
-      zIndex: zIndex
+      zIndex: zIndex,
+      pointerEvents: pointerEvents,
+      enableVirtualization: enableVirtualization,
+      getItemHeight: getItemHeight
     }));
   }));
 }