primereact 8.7.2 → 9.0.0-beta.1

package/multiselect/multiselect.js

@@ -29,20 +29,45 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
     return _extends.apply(this, arguments);
   }
 
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
+  }
+
+  function _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
   function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value: value,
@@ -53,17 +78,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     } else {
       obj[key] = value;
     }
-
     return obj;
   }
 
   function _arrayLikeToArray$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
-
     for (var i = 0, arr2 = new Array(len); i < len; i++) {
       arr2[i] = arr[i];
     }
-
     return arr2;
   }
 
@@ -97,33 +119,33 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
   }
 
   function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-
-    var _s, _e;
-
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
+    var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+    if (null != _i) {
+      var _s,
+        _e,
+        _x,
+        _r,
+        _arr = [],
+        _n = !0,
+        _d = !1;
       try {
-        if (!_n && _i["return"] != null) _i["return"]();
+        if (_x = (_i = _i.call(arr)).next, 0 === i) {
+          if (Object(_i) !== _i) return;
+          _n = !1;
+        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+          ;
+        }
+      } catch (err) {
+        _d = !0, _e = err;
       } finally {
-        if (_d) throw _e;
+        try {
+          if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        } finally {
+          if (_d) throw _e;
+        }
       }
+      return _arr;
     }
-
-    return _arr;
   }
 
   function _nonIterableRest() {
@@ -136,21 +158,17 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
 
   var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState(false),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        focusedState = _React$useState2[0],
-        setFocusedState = _React$useState2[1];
-
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focusedState = _React$useState2[0],
+      setFocusedState = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
-
     var onClick = function onClick(event) {
       if (!props.disabled && !props.readOnly && props.onChange) {
         var _checked = isChecked();
-
         var checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement;
         var isInputToggled = event.target === inputRef.current;
         var isCheckboxToggled = checkboxClicked && event.target.checked !== _checked;
-
         if (isInputToggled || isCheckboxToggled) {
           var value = _checked ? props.falseValue : props.trueValue;
           props.onChange({
@@ -168,33 +186,31 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
             }
           });
         }
-
         utils.DomHandler.focus(inputRef.current);
         event.preventDefault();
       }
     };
-
     var onFocus = function onFocus() {
       setFocusedState(true);
     };
-
     var onBlur = function onBlur() {
       setFocusedState(false);
     };
-
     var onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space') {
+      if (event.code === 'Space' || event.key === ' ') {
+        // event.key is for Android support
         onClick(event);
       }
     };
-
     var isChecked = function isChecked() {
       return props.checked === props.trueValue;
     };
-
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
+        focus: function focus() {
+          return utils.DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -294,7 +310,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         return props.resetFilter();
       }
     };
-
     var onFilter = function onFilter(event) {
       if (props.onFilter) {
         props.onFilter({
@@ -303,7 +318,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         });
       }
     };
-
     var onSelectAll = function onSelectAll(event) {
       if (props.onSelectAll) {
         props.onSelectAll({
@@ -311,16 +325,15 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           checked: props.selectAll
         });
       }
-
       event.preventDefault();
     };
-
     var createFilterElement = function createFilterElement() {
       if (props.filter) {
         var containerClassName = utils.classNames('p-multiselect-filter-container');
         var content = /*#__PURE__*/React__namespace.createElement("div", {
           className: containerClassName
         }, /*#__PURE__*/React__namespace.createElement(inputtext.InputText, {
+          ref: props.filterRef,
           type: "text",
           role: "textbox",
           value: props.filterValue,
@@ -330,7 +343,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         }), /*#__PURE__*/React__namespace.createElement("span", {
           className: "p-multiselect-filter-icon pi pi-search"
         }));
-
         if (props.filterTemplate) {
           var defaultContentOptions = {
             className: containerClassName,
@@ -342,13 +354,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           };
           content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
         }
-
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, content);
       }
-
       return null;
     };
-
     var filterElement = createFilterElement();
     var checkboxElement = props.showSelectAll && /*#__PURE__*/React__namespace.createElement(Checkbox, {
       checked: props.selectAll,
@@ -368,7 +377,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     var element = /*#__PURE__*/React__namespace.createElement("div", {
       className: "p-multiselect-header"
     }, checkboxElement, filterElement, closeElement);
-
     if (props.template) {
       var defaultOptions = {
         className: 'p-multiselect-header',
@@ -385,7 +393,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
       };
       return utils.ObjectUtils.getJSXElement(props.template, defaultOptions);
     }
-
     return element;
   });
   MultiSelectHeader.displayName = 'MultiSelectHeader';
@@ -398,10 +405,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           option: props.option
         });
       }
-
       event.preventDefault();
     };
-
     var onKeyDown = function onKeyDown(event) {
       if (props.onKeyDown) {
         props.onKeyDown({
@@ -410,11 +415,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         });
       }
     };
-
     var className = utils.classNames('p-multiselect-item', {
       'p-highlight': props.selected,
       'p-disabled': props.disabled
-    }, props.option.className);
+    }, props.className, props.option.className);
     var checkboxClassName = utils.classNames('p-checkbox-box', {
       'p-highlight': props.selected
     });
@@ -442,16 +446,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
   MultiSelectItem.displayName = 'MultiSelectItem';
 
   function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
   function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var virtualScrollerRef = React__namespace.useRef(null);
-
+    var filterInputRef = React__namespace.useRef(null);
     var onEnter = function onEnter() {
       props.onEnter(function () {
         if (virtualScrollerRef.current) {
           var selectedIndex = props.getSelectedOptionIndex();
-
           if (selectedIndex !== -1) {
             setTimeout(function () {
               return virtualScrollerRef.current.scrollToIndex(selectedIndex);
@@ -460,22 +462,26 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         }
       });
     };
-
+    var onEntered = function onEntered() {
+      props.onEntered(function () {
+        if (props.filter && filterInputRef.current) {
+          utils.DomHandler.focus(filterInputRef.current, false);
+        }
+      });
+    };
     var onFilterInputChange = function onFilterInputChange(event) {
       if (virtualScrollerRef.current) {
         virtualScrollerRef.current.scrollToIndex(0);
       }
-
       props.onFilterInputChange && props.onFilterInputChange(event);
     };
-
     var isEmptyFilter = function isEmptyFilter() {
       return !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
     };
-
     var createHeader = function createHeader() {
       return /*#__PURE__*/React__namespace.createElement(MultiSelectHeader, {
         filter: props.filter,
+        filterRef: filterInputRef,
         filterValue: props.filterValue,
         filterTemplate: props.filterTemplate,
         onFilter: onFilterInputChange,
@@ -487,7 +493,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         template: props.panelHeaderTemplate
       });
     };
-
     var createFooter = function createFooter() {
       if (props.panelFooterTemplate) {
         var content = utils.ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
@@ -495,10 +500,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           className: "p-multiselect-footer"
         }, content);
       }
-
       return null;
     };
-
     var createGroupChildren = function createGroupChildren(optionGroup, style) {
       var groupChildren = props.getOptionGroupChildren(optionGroup);
       return groupChildren.map(function (option, j) {
@@ -517,24 +520,22 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           onClick: props.onOptionSelect,
           onKeyDown: props.onOptionKeyDown,
           tabIndex: tabIndex,
-          disabled: disabled
+          disabled: disabled,
+          className: props.itemClassName
         });
       });
     };
-
     var createEmptyFilter = function createEmptyFilter() {
       var emptyFilterMessage = utils.ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || PrimeReact.localeOption('emptyFilterMessage');
       return /*#__PURE__*/React__namespace.createElement("li", {
         className: "p-multiselect-empty-message"
       }, emptyFilterMessage);
     };
-
     var createItem = function createItem(option, index) {
       var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var style = {
         height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
       };
-
       if (props.optionGroupLabel) {
         var groupContent = props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
         var groupChildrenContent = createGroupChildren(option, style);
@@ -561,21 +562,19 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           onClick: props.onOptionSelect,
           onKeyDown: props.onOptionKeyDown,
           tabIndex: tabIndex,
-          disabled: disabled
+          disabled: disabled,
+          className: props.itemClassName
         });
       }
     };
-
     var createItems = function createItems() {
       if (utils.ObjectUtils.isNotEmpty(props.visibleOptions)) {
         return props.visibleOptions.map(createItem);
       } else if (props.hasFilter) {
         return createEmptyFilter();
       }
-
       return null;
     };
-
     var createContent = function createContent() {
       if (props.virtualScrollerOptions) {
         var virtualScrollerProps = _objectSpread$1(_objectSpread$1({}, props.virtualScrollerOptions), {
@@ -604,7 +603,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
             }, content);
           }
         });
-
         return /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
           ref: virtualScrollerRef
         }, virtualScrollerProps));
@@ -622,15 +620,26 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         }, items));
       }
     };
-
     var createElement = function createElement() {
       var allowOptionSelect = props.allowOptionSelect();
       var panelClassName = utils.classNames('p-multiselect-panel p-component', {
-        'p-multiselect-limited': !allowOptionSelect
+        'p-multiselect-inline': props.inline,
+        'p-multiselect-flex': props.flex,
+        'p-multiselect-limited': !allowOptionSelect,
+        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
       }, props.panelClassName);
       var header = createHeader();
       var content = createContent();
       var footer = createFooter();
+      if (props.inline) {
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          ref: ref,
+          className: panelClassName,
+          style: props.panelStyle,
+          onClick: props.onClick
+        }, content, footer);
+      }
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: ref,
         classNames: "p-connected-overlay",
@@ -642,7 +651,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         options: props.transitionOptions,
         unmountOnExit: true,
         onEnter: onEnter,
-        onEntered: props.onEntered,
+        onEntered: onEntered,
         onExit: props.onExit,
         onExited: props.onExited
       }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -652,8 +661,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         onClick: props.onClick
       }, header, content, footer));
     };
-
     var element = createElement();
+    if (props.inline) return element;
     return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
       element: element,
       appendTo: props.appendTo
@@ -662,30 +671,23 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
   MultiSelectPanel.displayName = 'MultiSelectPanel';
 
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
   function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
   var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState(''),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        filterState = _React$useState2[0],
-        setFilterState = _React$useState2[1];
-
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      filterState = _React$useState2[0],
+      setFilterState = _React$useState2[1];
     var _React$useState3 = React__namespace.useState(false),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        focusedState = _React$useState4[0],
-        setFocusedState = _React$useState4[1];
-
-    var _React$useState5 = React__namespace.useState(false),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        overlayVisibleState = _React$useState6[0],
-        setOverlayVisibleState = _React$useState6[1];
-
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      focusedState = _React$useState4[0],
+      setFocusedState = _React$useState4[1];
+    var _React$useState5 = React__namespace.useState(props.inline),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      overlayVisibleState = _React$useState6[0],
+      setOverlayVisibleState = _React$useState6[1];
     var elementRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
     var labelRef = React__namespace.useRef(null);
@@ -693,43 +695,36 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     var hasFilter = filterState && filterState.trim().length > 0;
     var empty = utils.ObjectUtils.isEmpty(props.value);
     var equalityKey = props.optionValue ? null : props.dataKey;
-
     var _useOverlayListener = hooks.useOverlayListener({
-      target: elementRef,
-      overlay: overlayRef,
-      listener: function listener(event, _ref) {
-        var type = _ref.type,
+        target: elementRef,
+        overlay: overlayRef,
+        listener: function listener(event, _ref) {
+          var type = _ref.type,
             valid = _ref.valid;
-
-        if (valid) {
-          type === 'outside' ? !isClearClicked(event) && hide() : hide();
-        }
-      },
-      when: overlayVisibleState
-    }),
-        _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
-        bindOverlayListener = _useOverlayListener2[0],
-        unbindOverlayListener = _useOverlayListener2[1];
-
+          if (valid) {
+            type === 'outside' ? !isClearClicked(event) && hide() : hide();
+          }
+        },
+        when: overlayVisibleState
+      }),
+      _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
+      bindOverlayListener = _useOverlayListener2[0],
+      unbindOverlayListener = _useOverlayListener2[1];
     var onPanelClick = function onPanelClick(event) {
       overlayservice.OverlayService.emit('overlay-click', {
         originalEvent: event,
         target: elementRef.current
       });
     };
-
     var allowOptionSelect = function allowOptionSelect() {
       return !props.selectionLimit || !props.value || props.value && props.value.length < props.selectionLimit;
     };
-
     var onOptionSelect = function onOptionSelect(event) {
       var originalEvent = event.originalEvent,
-          option = event.option;
-
+        option = event.option;
       if (props.disabled || isOptionDisabled(option)) {
         return;
       }
-
       var optionValue = getOptionValue(option);
       var isUsed = isOptionValueUsed(option);
       var selected = isSelected(option);
@@ -738,11 +733,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         return !utils.ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey);
       }));else if (allowSelect) updateModel(originalEvent, [].concat(_toConsumableArray(props.value || []), [optionValue]));
     };
-
     var onOptionKeyDown = function onOptionKeyDown(event) {
       var originalEvent = event.originalEvent;
       var listItem = originalEvent.currentTarget;
-
       switch (originalEvent.which) {
         //down
         case 40:
@@ -750,93 +743,86 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           nextItem && nextItem.focus();
           originalEvent.preventDefault();
           break;
-        //up
 
+        //up
         case 38:
           var prevItem = findPrevItem(listItem);
           prevItem && prevItem.focus();
           originalEvent.preventDefault();
           break;
-        //enter and space
 
+        //enter and space
         case 13:
         case 32:
           onOptionSelect(event);
           originalEvent.preventDefault();
           break;
-        //escape
 
+        //escape
         case 27:
           hide();
           utils.DomHandler.focus(inputRef.current);
           break;
       }
     };
-
     var findNextItem = function findNextItem(item) {
       var nextItem = item.nextElementSibling;
       return nextItem ? utils.DomHandler.hasClass(nextItem, 'p-disabled') || utils.DomHandler.hasClass(nextItem, 'p-multiselect-item-group') ? findNextItem(nextItem) : nextItem : null;
     };
-
     var findPrevItem = function findPrevItem(item) {
       var prevItem = item.previousElementSibling;
       return prevItem ? utils.DomHandler.hasClass(prevItem, 'p-disabled') || utils.DomHandler.hasClass(prevItem, 'p-multiselect-item-group') ? findPrevItem(prevItem) : prevItem : null;
     };
-
     var onClick = function onClick(event) {
-      if (!props.disabled && !isPanelClicked(event) && !utils.DomHandler.hasClass(event.target, 'p-multiselect-token-icon') && !isClearClicked(event)) {
+      if (!props.inline && !props.disabled && !isPanelClicked(event) && !utils.DomHandler.hasClass(event.target, 'p-multiselect-token-icon') && !isClearClicked(event)) {
         overlayVisibleState ? hide() : show();
         utils.DomHandler.focus(inputRef.current);
         event.preventDefault();
       }
     };
-
     var onKeyDown = function onKeyDown(event) {
       switch (event.which) {
         //down
         case 40:
+          if (props.inline) break;
           if (!overlayVisibleState && event.altKey) {
             show();
             event.preventDefault();
           }
-
           break;
-        //space
 
+        //space
         case 32:
+          if (props.inline) break;
           overlayVisibleState ? hide() : show();
           event.preventDefault();
           break;
-        //escape
 
+        //escape
         case 27:
+          if (props.inline) break;
           hide();
           break;
-        //tab
 
+        //tab
         case 9:
           if (overlayVisibleState) {
             var firstFocusableElement = utils.DomHandler.getFirstFocusableElement(overlayRef.current);
-
             if (firstFocusableElement) {
               firstFocusableElement.focus();
               event.preventDefault();
             }
           }
-
           break;
       }
     };
-
     var onSelectAll = function onSelectAll(event) {
       if (props.onSelectAll) {
         props.onSelectAll(event);
       } else {
         var value = null;
-
         if (event.checked) {
           value = [];
-
           if (visibleOptions) {
             var selectedOptions = visibleOptions.filter(function (option) {
               return isOptionDisabled(option) && isSelected(option);
@@ -849,7 +835,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           var options = visibleOptions.filter(function (option) {
             return !isOptionDisabled(option);
           });
-
           if (props.optionGroupLabel) {
             value = [];
             options.forEach(function (optionGroup) {
@@ -865,11 +850,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
             });
           }
         }
-
         updateModel(event.originalEvent, value);
       }
     };
-
     var updateModel = function updateModel(event, value) {
       if (props.onChange) {
         props.onChange({
@@ -885,11 +868,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         });
       }
     };
-
     var onFilterInputChange = function onFilterInputChange(event) {
       var filter = event.query;
       setFilterState(filter);
-
       if (props.onFilter) {
         props.onFilter({
           originalEvent: event,
@@ -897,17 +878,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         });
       }
     };
-
     var resetFilter = function resetFilter() {
       setFilterState('');
       props.onFilter && props.onFilter({
         filter: ''
       });
     };
-
     var scrollInView = function scrollInView() {
       var highlightItem = utils.DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
-
       if (highlightItem && highlightItem.scrollIntoView) {
         highlightItem.scrollIntoView({
           block: 'nearest',
@@ -915,59 +893,48 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         });
       }
     };
-
     var show = function show() {
       setOverlayVisibleState(true);
     };
-
     var hide = function hide() {
       setOverlayVisibleState(false);
     };
-
     var onOverlayEnter = function onOverlayEnter(callback) {
       utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
       alignOverlay();
       scrollInView();
       callback && callback();
     };
-
-    var onOverlayEntered = function onOverlayEntered() {
+    var onOverlayEntered = function onOverlayEntered(callback) {
+      callback && callback();
       bindOverlayListener();
       props.onShow && props.onShow();
     };
-
     var onOverlayExit = function onOverlayExit() {
       unbindOverlayListener();
     };
-
     var onOverlayExited = function onOverlayExited() {
       if (props.filter && props.resetFilterOnHide) {
         resetFilter();
       }
-
       utils.ZIndexUtils.clear(overlayRef.current);
       props.onHide && props.onHide();
     };
-
     var alignOverlay = function alignOverlay() {
       utils.DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact__default["default"].appendTo);
     };
-
     var isClearClicked = function isClearClicked(event) {
       return utils.DomHandler.hasClass(event.target, 'p-multiselect-clear-icon');
     };
-
     var isPanelClicked = function isPanelClicked(event) {
       return overlayRef.current && overlayRef.current.contains(event.target);
     };
-
     var onCloseClick = function onCloseClick(event) {
       hide();
       utils.DomHandler.focus(inputRef.current);
       event.preventDefault();
       event.stopPropagation();
     };
-
     var getSelectedOptionIndex = function getSelectedOptionIndex() {
       if (props.value != null && props.options) {
         if (props.optionGroupLabel) {
@@ -983,10 +950,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           return findOptionIndexInList(props.value, props.options);
         }
       }
-
       return -1;
     };
-
     var findOptionIndexInList = function findOptionIndexInList(value, list) {
       return list.findIndex(function (item) {
         return value.some(function (val) {
@@ -994,7 +959,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         });
       });
     };
-
     var isSelected = function isSelected(option) {
       if (props.value) {
         var optionValue = getOptionValue(option);
@@ -1003,23 +967,18 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           return utils.ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey);
         });
       }
-
       return false;
     };
-
     var getLabelByValue = function getLabelByValue(val) {
       var option;
-
       if (props.options) {
         if (props.optionGroupLabel) {
           var _iterator = _createForOfIteratorHelper(props.options),
-              _step;
-
+            _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
               var optionGroup = _step.value;
               option = findOptionByValue(val, getOptionGroupChildren(optionGroup));
-
               if (option) {
                 break;
               }
@@ -1033,26 +992,21 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           option = findOptionByValue(val, props.options);
         }
       }
-
       return option ? getOptionLabel(option) : null;
     };
-
     var findOptionByValue = function findOptionByValue(val, list) {
       return list.find(function (option) {
         return utils.ObjectUtils.equals(getOptionValue(option), val, equalityKey);
       });
     };
-
     var onFocus = function onFocus(event) {
       setFocusedState(true);
       props.onFocus && props.onFocus(event);
     };
-
     var onBlur = function onBlur(event) {
       setFocusedState(false);
       props.onBlur && props.onBlur(event);
     };
-
     var isAllSelected = function isAllSelected() {
       if (props.onSelectAll) {
         return props.selectAll;
@@ -1060,15 +1014,12 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         if (utils.ObjectUtils.isEmpty(visibleOptions)) {
           return false;
         }
-
         var options = visibleOptions.filter(function (option) {
           return !isOptionDisabled(option);
         });
-
         if (props.optionGroupLabel) {
           var _iterator2 = _createForOfIteratorHelper(options),
-              _step2;
-
+            _step2;
           try {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var optionGroup = _step2.value;
@@ -1090,71 +1041,57 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           });
         }
       }
-
       return true;
     };
-
     var getOptionLabel = function getOptionLabel(option) {
       return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
     };
-
     var getOptionValue = function getOptionValue(option) {
+      if (props.useOptionAsValue) {
+        return option;
+      }
       if (props.optionValue) {
         var data = utils.ObjectUtils.resolveFieldData(option, props.optionValue);
         return data !== null ? data : option;
       }
-
       return option && option['value'] !== undefined ? option['value'] : option;
     };
-
     var getOptionRenderKey = function getOptionRenderKey(option) {
       return props.dataKey ? utils.ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
     };
-
     var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
       return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
     };
-
     var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
       return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
     };
-
     var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
       return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
     };
-
     var isOptionDisabled = function isOptionDisabled(option) {
       if (props.optionDisabled) {
         return utils.ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : utils.ObjectUtils.resolveFieldData(option, props.optionDisabled);
       }
-
       return option && option['disabled'] !== undefined ? option['disabled'] : false;
     };
-
     var isOptionValueUsed = function isOptionValueUsed(option) {
-      return props.optionValue || option && option['value'] !== undefined;
+      return !props.useOptionAsValue && props.optionValue || option && option['value'] !== undefined;
     };
-
     var removeChip = function removeChip(event, item) {
       var value = props.value.filter(function (val) {
         return !utils.ObjectUtils.equals(val, item, equalityKey);
       });
       updateModel(event, value);
     };
-
     var getSelectedItemsLabel = function getSelectedItemsLabel() {
       var pattern = /{(.*?)}/;
-
       if (pattern.test(props.selectedItemsLabel)) {
         return props.selectedItemsLabel.replace(props.selectedItemsLabel.match(pattern)[0], props.value.length + '');
       }
-
       return props.selectedItemsLabel;
     };
-
     var getLabel = function getLabel() {
       var label;
-
       if (!empty && !props.fixedPlaceholder) {
         if (utils.ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
           return getSelectedItemsLabel();
@@ -1164,10 +1101,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           }, '');
         }
       }
-
       return label;
     };
-
     var getLabelContent = function getLabelContent() {
       if (props.selectedItemTemplate) {
         if (!empty) {
@@ -1205,27 +1140,21 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
             }, label), icon);
           });
         }
-
         return getLabel();
       }
     };
-
     var getVisibleOptions = function getVisibleOptions() {
       if (hasFilter) {
         var filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
         var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
-
         if (props.optionGroupLabel) {
           var filteredGroups = [];
-
           var _iterator3 = _createForOfIteratorHelper(props.options),
-              _step3;
-
+            _step3;
           try {
             for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
               var optgroup = _step3.value;
               var filteredSubOptions = PrimeReact.FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
-
               if (filteredSubOptions && filteredSubOptions.length) {
                 filteredGroups.push(_objectSpread(_objectSpread({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
               }
@@ -1235,7 +1164,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           } finally {
             _iterator3.f();
           }
-
           return filteredGroups;
         } else {
           return PrimeReact.FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
@@ -1244,12 +1172,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         return props.options;
       }
     };
-
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
         show: show,
         hide: hide,
+        focus: function focus() {
+          return utils.DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -1264,6 +1194,11 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
+    React__namespace.useEffect(function () {
+      setTimeout(function () {
+        props.overlayVisible ? show() : hide();
+      }, 100);
+    }, [props.overlayVisible]);
     hooks.useUpdateEffect(function () {
       if (overlayVisibleState && hasFilter) {
         alignOverlay();
@@ -1272,7 +1207,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     hooks.useUnmountEffect(function () {
       utils.ZIndexUtils.clear(overlayRef.current);
     });
-
     var createClearIcon = function createClearIcon() {
       if (!empty && props.showClear && !props.disabled) {
         return /*#__PURE__*/React__namespace.createElement("i", {
@@ -1282,10 +1216,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
           }
         });
       }
-
       return null;
     };
-
     var createLabel = function createLabel() {
       var content = getLabelContent();
       var className = utils.classNames('p-multiselect-label', {
@@ -1300,7 +1232,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
         className: className
       }, content || props.placeholder || 'empty'));
     };
-
     var visibleOptions = getVisibleOptions();
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
     var otherProps = utils.ObjectUtils.findDiffKeys(props, MultiSelect.defaultProps);
@@ -1313,8 +1244,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
       'p-inputwrapper-filled': utils.ObjectUtils.isNotEmpty(props.value),
       'p-inputwrapper-focus': focusedState || overlayVisibleState
     }, props.className);
-    var label = createLabel();
-    var clearIcon = createClearIcon();
+    var label = !props.inline && createLabel();
+    var clearIcon = !props.inline && createClearIcon();
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef,
       id: props.id,
@@ -1337,13 +1268,13 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
       "aria-expanded": overlayVisibleState,
       disabled: props.disabled,
       tabIndex: props.tabIndex
-    }, ariaProps))), label, clearIcon, /*#__PURE__*/React__namespace.createElement("div", {
+    }, ariaProps))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, /*#__PURE__*/React__namespace.createElement("div", {
       className: "p-multiselect-trigger"
     }, utils.IconUtils.getJSXIcon(props.dropdownIcon, {
       className: 'p-multiselect-trigger-icon p-c'
     }, {
       props: props
-    })), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
+    }))), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
       ref: overlayRef,
       visibleOptions: visibleOptions
     }, props, {
@@ -1395,9 +1326,12 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     filterPlaceholder: null,
     filterTemplate: null,
     fixedPlaceholder: false,
+    flex: false,
     id: null,
+    inline: false,
     inputId: null,
     inputRef: null,
+    itemClassName: null,
     itemTemplate: null,
     maxSelectedLabels: null,
     name: null,
@@ -1415,6 +1349,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     optionLabel: null,
     optionValue: null,
     options: null,
+    overlayVisible: false,
     panelClassName: null,
     panelFooterTemplate: null,
     panelHeaderTemplate: null,
@@ -1434,6 +1369,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, hooks, over
     tooltip: null,
     tooltipOptions: null,
     transitionOptions: null,
+    useOptionAsValue: false,
     value: null,
     virtualScrollerOptions: null
   };