primereact 10.3.0 → 10.3.2

package/picklist/picklist.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.picklist = (function (exports, React, PrimeReact, componentbase, hooks, utils, button, angledoubledown, angledoubleup, angledown, angleup, search, ripple, angledoubleleft, angledoubleright, angleleft, angleright) {
+this.primereact.picklist = (function (exports, React, PrimeReact$1, componentbase, hooks, utils, button, angledoubledown, angledoubleup, angledown, angleup, search, ripple, angledoubleleft, angledoubleright, angleleft, angleright) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -23,7 +23,83 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
   }
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
-  var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
+  var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact$1);
+
+  function _readOnlyError(name) {
+    throw new TypeError("\"" + name + "\" is read-only");
+  }
+
+  function _typeof(o) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+      return typeof o;
+    } : function (o) {
+      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+    }, _typeof(o);
+  }
+
+  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,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+
+  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;
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
+  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 _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
 
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
@@ -57,21 +133,6 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     }
   }
 
-  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;
-  }
-
-  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 _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
@@ -90,20 +151,22 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     filterContainer: 'p-picklist-filter-container',
     list: 'p-picklist-list',
     listWrapper: 'p-picklist-list-wrapper',
-    listSourceWrapper: 'p-picklist-source-wrapper',
-    listTargetWrapper: 'p-picklist-target-wrapper',
-    listSource: 'p-picklist-source',
-    listTarget: 'p-picklist-target',
+    listSourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
+    listTargetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
+    listSource: 'p-picklist-list p-picklist-source',
+    listTarget: 'p-picklist-list p-picklist-target',
     item: function item(_ref) {
-      var subProps = _ref.subProps;
+      var selected = _ref.selected,
+        focused = _ref.focused;
       return utils.classNames('p-picklist-item', {
-        'p-highlight': subProps.selected
+        'p-highlight': selected,
+        'p-focus': focused
       });
     },
     sourceControls: 'p-picklist-source-controls p-picklist-buttons',
     targetControls: 'p-picklist-target-controls p-picklist-buttons'
   };
-  var styles = "\n@layer primereact {\n    .p-picklist {\n        display: flex;\n    }\n    \n    .p-picklist-buttons {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n    \n    .p-picklist-list-wrapper {\n        flex: 1 1 50%;\n    }\n    \n    .p-picklist-list {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n        overflow: auto;\n        min-height: 12rem;\n        max-height: 24rem;\n    }\n    \n    .p-picklist-item {\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-picklist-filter {\n        position: relative;\n    }\n    \n    .p-picklist-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-picklist-filter-input {\n        width: 100%;\n    }\n}\n";
+  var styles = "\n@layer primereact {\n    .p-picklist {\n        display: flex;\n    }\n\n    .p-picklist-buttons {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n\n    .p-picklist-list-wrapper {\n        flex: 1 1 50%;\n    }\n\n    .p-picklist-list {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n        overflow: auto;\n        min-height: 12rem;\n        max-height: 24rem;\n    }\n\n    .p-picklist-item {\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-picklist-filter {\n        position: relative;\n    }\n\n    .p-picklist-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n\n    .p-picklist-filter-input {\n        width: 100%;\n    }\n}\n";
   var PickListBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'PickList',
@@ -121,6 +184,8 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       showSourceControls: true,
       showTargetControls: true,
       metaKeySelection: true,
+      onFocus: null,
+      onBlur: null,
       filter: false,
       filterBy: null,
       filterMatchMode: 'contains',
@@ -166,23 +231,8 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     }
   });
 
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
-
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-  }
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
-
   var PickListControls = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var ptm = props.ptm,
       cx = props.cx,
       unstyled = props.unstyled;
@@ -287,7 +337,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
         }
       }
     };
-    var controlsProps = utils.mergeProps({
+    var controlsProps = mergeProps({
       className: utils.classNames(props.className, cx('controls'))
     }, ptm('controls', {
       hostName: props.hostName
@@ -299,6 +349,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       onClick: moveUp,
       pt: ptm('moveUpButton'),
       unstyled: unstyled,
+      "aria-label": PrimeReact$1.ariaLabel('moveUp'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -309,6 +360,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       onClick: moveTop,
       pt: ptm('moveTopButton'),
       unstyled: unstyled,
+      "aria-label": PrimeReact$1.ariaLabel('moveTop'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -319,6 +371,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       onClick: moveDown,
       pt: ptm('moveDownButton'),
       unstyled: unstyled,
+      "aria-label": PrimeReact$1.ariaLabel('moveDown'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -329,6 +382,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       onClick: moveBottom,
       pt: ptm('moveBottomButton'),
       unstyled: unstyled,
+      "aria-label": PrimeReact$1.ariaLabel('moveBottom'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -336,48 +390,8 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
   });
   PickListControls.displayName = 'PickListControls';
 
-  function _typeof(o) {
-    "@babel/helpers - typeof";
-
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-      return typeof o;
-    } : function (o) {
-      return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-    }, _typeof(o);
-  }
-
-  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,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-    return obj;
-  }
-
   var PickListItem = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var ptm = props.ptm,
       cx = props.cx;
     var getPTOptions = function getPTOptions(key) {
@@ -392,7 +406,8 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       if (props.onClick) {
         props.onClick({
           originalEvent: event,
-          value: props.value
+          value: props.value,
+          id: props.id
         });
       }
     };
@@ -404,92 +419,48 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
         });
       }
     };
+    var onMouseDown = function onMouseDown(event) {
+      if (props.onMouseDown) {
+        props.onMouseDown(event);
+      }
+    };
+    var onFocus = function onFocus(event) {
+      if (props.onFocus) {
+        props.onFocus(event);
+      }
+    };
     var content = props.template ? props.template(props.value) : props.value;
-    var itemProps = utils.mergeProps({
+    var itemProps = mergeProps({
       className: utils.classNames(props.className, cx('item', {
-        subProps: props
+        selected: props.selected,
+        focused: props.focused
       })),
+      id: props.id,
       onClick: onClick,
       onKeyDown: onKeyDown,
-      tabIndex: props.tabIndex,
+      onFocus: onFocus,
+      onMouseDown: onMouseDown,
       role: 'option',
-      'aria-selected': props.selected
+      'aria-selected': props.selected,
+      'data-p-highlight': props.selected,
+      'data-p-focused': props.focused
     }, getPTOptions('item'));
     return /*#__PURE__*/React__namespace.createElement("li", itemProps, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   });
   PickListItem.displayName = 'PickListItem';
 
-  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var PickListSubList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+    var mergeProps = hooks.useMergeProps();
     var listElementRef = React__namespace.useRef(null);
     var ptm = props.ptm,
       cx = props.cx;
     var getPTOptions = function getPTOptions(key, options) {
-      return ptm(key, _objectSpread({
+      return ptm(key, _objectSpread$1({
         hostName: props.hostName
       }, options));
     };
-    var onItemClick = function onItemClick(event) {
-      var originalEvent = event.originalEvent;
-      var item = event.value;
-      var selection = _toConsumableArray(props.selection);
-      var index = utils.ObjectUtils.findIndexInList(item, selection, props.dataKey);
-      var selected = index !== -1;
-      var metaSelection = props.metaKeySelection;
-      if (metaSelection) {
-        var metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
-        if (selected && metaKey) {
-          selection.splice(index, 1);
-        } else {
-          if (!metaKey) {
-            selection.length = 0;
-          }
-          selection.push(item);
-        }
-      } else {
-        if (selected) selection.splice(index, 1);else selection.push(item);
-      }
-      if (props.onSelectionChange) {
-        props.onSelectionChange({
-          event: originalEvent,
-          value: selection
-        });
-      }
-    };
-    var onItemKeyDown = function onItemKeyDown(event) {
-      var originalEvent = event.originalEvent;
-      var listItem = originalEvent.currentTarget;
-      switch (originalEvent.which) {
-        //down
-        case 40:
-          var nextItem = findNextItem(listItem);
-          nextItem && nextItem.focus();
-          originalEvent.preventDefault();
-          break;
-
-        //up
-        case 38:
-          var prevItem = findPrevItem(listItem);
-          prevItem && prevItem.focus();
-          originalEvent.preventDefault();
-          break;
-
-        //enter
-        case 13:
-          onItemClick(event);
-          originalEvent.preventDefault();
-          break;
-      }
-    };
-    var findNextItem = function findNextItem(item) {
-      var nextItem = item.nextElementSibling;
-      return nextItem ? !utils.DomHandler.hasClass(nextItem, 'p-picklist-item') ? findNextItem(nextItem) : nextItem : null;
-    };
-    var findPrevItem = function findPrevItem(item) {
-      var prevItem = item.previousElementSibling;
-      return prevItem ? !utils.DomHandler.hasClass(prevItem, 'p-picklist-item') ? findPrevItem(prevItem) : prevItem : null;
-    };
     var isSelected = function isSelected(item) {
       return utils.ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
     };
@@ -510,11 +481,13 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     };
     React__namespace.useImperativeHandle(ref, function () {
       return {
-        listElementRef: listElementRef
+        getElement: function getElement() {
+          return listElementRef.current;
+        }
       };
     });
     var createHeader = function createHeader() {
-      var headerProps = utils.mergeProps({
+      var headerProps = mergeProps({
         className: cx('header')
       }, getPTOptions('header'));
       if (props.header) {
@@ -524,18 +497,26 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     };
     var createItems = function createItems() {
       if (props.list) {
-        return props.list.map(function (item) {
-          var key = JSON.stringify(item);
+        return props.list.map(function (item, index) {
+          var key = props.parentId + '_' + index;
           var selected = isSelected(item);
           return /*#__PURE__*/React__namespace.createElement(PickListItem, {
             hostName: props.hostName,
             key: key,
+            id: key,
+            index: index,
+            focused: key === props.focusedOptionId,
             value: item,
             template: props.itemTemplate,
             selected: selected,
-            onClick: onItemClick,
-            onKeyDown: onItemKeyDown,
-            tabIndex: props.tabIndex,
+            onClick: props.onItemClick,
+            onKeyDown: props.onItemKeyDown,
+            onMouseDown: function onMouseDown(event) {
+              return props.onOptionMouseDown(_objectSpread$1(_objectSpread$1({}, event), {}, {
+                index: index,
+                type: props.type
+              }));
+            },
             ptm: ptm,
             cx: cx
           });
@@ -545,18 +526,18 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     };
     var createFilter = function createFilter() {
       var iconClassName = 'p-picklist-filter-icon';
-      var filterIconProps = utils.mergeProps({
+      var filterIconProps = mergeProps({
         className: cx('filterIcon')
       }, getPTOptions('filterIcon'));
       var icon = props.type === 'source' ? props.sourceFilterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, filterIconProps) : props.targetFilterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, filterIconProps);
-      var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, filterIconProps), {
+      var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, filterIconProps), {
         props: props
       });
       if (props.showFilter) {
-        var filterProps = utils.mergeProps({
+        var filterProps = mergeProps({
           className: cx('filter')
         }, getPTOptions('filter'));
-        var filterInputProps = utils.mergeProps({
+        var filterInputProps = mergeProps({
           type: 'text',
           value: props.filterValue,
           onChange: onFilter,
@@ -579,7 +560,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
           };
           content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
         }
-        var filterContainerProps = utils.mergeProps({
+        var filterContainerProps = mergeProps({
           className: cx('filterContainer')
         }, getPTOptions('filterContainer'));
         return /*#__PURE__*/React__namespace.createElement("div", filterContainerProps, content);
@@ -588,10 +569,19 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     };
     var createList = function createList() {
       var items = createItems();
-      var listProps = utils.mergeProps({
+      var listProps = mergeProps({
+        ref: listElementRef,
         className: utils.classNames(props.listClassName, cx('list')),
         role: 'listbox',
+        id: props.parentId + '_' + props.type + '_list',
         'aria-multiselectable': true,
+        'aria-activedescendant': props.ariaActivedescendant,
+        tabIndex: props.list && props.list.length > 0 ? props.tabIndex : -1,
+        onKeyDown: props.onListKeyDown,
+        onFocus: function onFocus(event) {
+          props.onListFocus(event, props.type);
+        },
+        onBlur: props.onListBlur,
         style: props.style
       }, getPTOptions('list'));
       return /*#__PURE__*/React__namespace.createElement("ul", listProps, items);
@@ -599,15 +589,244 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     var header = createHeader();
     var filter = createFilter();
     var list = createList();
-    var listWrapperProps = utils.mergeProps({
-      className: utils.classNames(props.className, cx('listWrapper')),
-      ref: listElementRef
+    var listWrapperProps = mergeProps({
+      className: utils.classNames(props.className, cx('listWrapper'))
     }, getPTOptions('listWrapper'));
     return /*#__PURE__*/React__namespace.createElement("div", listWrapperProps, header, filter, list);
   }));
   PickListSubList.displayName = 'PickListSubList';
 
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+    }
+  }
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var FilterMatchMode = Object.freeze({
+    STARTS_WITH: 'startsWith',
+    CONTAINS: 'contains',
+    NOT_CONTAINS: 'notContains',
+    ENDS_WITH: 'endsWith',
+    EQUALS: 'equals',
+    NOT_EQUALS: 'notEquals',
+    IN: 'in',
+    LESS_THAN: 'lt',
+    LESS_THAN_OR_EQUAL_TO: 'lte',
+    GREATER_THAN: 'gt',
+    GREATER_THAN_OR_EQUAL_TO: 'gte',
+    BETWEEN: 'between',
+    DATE_IS: 'dateIs',
+    DATE_IS_NOT: 'dateIsNot',
+    DATE_BEFORE: 'dateBefore',
+    DATE_AFTER: 'dateAfter',
+    CUSTOM: 'custom'
+  });
+
+  /**
+   * @deprecated please use PrimeReactContext
+   */
+  var PrimeReact = /*#__PURE__*/_createClass(function PrimeReact() {
+    _classCallCheck(this, PrimeReact);
+  });
+  _defineProperty(PrimeReact, "ripple", false);
+  _defineProperty(PrimeReact, "inputStyle", 'outlined');
+  _defineProperty(PrimeReact, "locale", 'en');
+  _defineProperty(PrimeReact, "appendTo", null);
+  _defineProperty(PrimeReact, "cssTransition", true);
+  _defineProperty(PrimeReact, "autoZIndex", true);
+  _defineProperty(PrimeReact, "hideOverlaysOnDocumentScrolling", false);
+  _defineProperty(PrimeReact, "nonce", null);
+  _defineProperty(PrimeReact, "nullSortOrder", 1);
+  _defineProperty(PrimeReact, "zIndex", {
+    modal: 1100,
+    overlay: 1000,
+    menu: 1000,
+    tooltip: 1100,
+    toast: 1200
+  });
+  _defineProperty(PrimeReact, "pt", undefined);
+  _defineProperty(PrimeReact, "filterMatchModeOptions", {
+    text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
+    numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
+    date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
+  });
+  _defineProperty(PrimeReact, "changeTheme", function (currentTheme, newTheme, linkElementId, callback) {
+    var _linkElement$parentNo;
+    var linkElement = document.getElementById(linkElementId);
+    var cloneLinkElement = linkElement.cloneNode(true);
+    var newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+    cloneLinkElement.setAttribute('id', linkElementId + '-clone');
+    cloneLinkElement.setAttribute('href', newThemeUrl);
+    cloneLinkElement.addEventListener('load', function () {
+      linkElement.remove();
+      cloneLinkElement.setAttribute('id', linkElementId);
+      if (callback) {
+        callback();
+      }
+    });
+    (_linkElement$parentNo = linkElement.parentNode) === null || _linkElement$parentNo === void 0 || _linkElement$parentNo.insertBefore(cloneLinkElement, linkElement.nextSibling);
+  });
+
+  var locales = {
+    en: {
+      startsWith: 'Starts with',
+      contains: 'Contains',
+      notContains: 'Not contains',
+      endsWith: 'Ends with',
+      equals: 'Equals',
+      notEquals: 'Not equals',
+      noFilter: 'No Filter',
+      filter: 'Filter',
+      lt: 'Less than',
+      lte: 'Less than or equal to',
+      gt: 'Greater than',
+      gte: 'Greater than or equal to',
+      dateIs: 'Date is',
+      dateIsNot: 'Date is not',
+      dateBefore: 'Date is before',
+      dateAfter: 'Date is after',
+      custom: 'Custom',
+      clear: 'Clear',
+      close: 'Close',
+      apply: 'Apply',
+      matchAll: 'Match All',
+      matchAny: 'Match Any',
+      addRule: 'Add Rule',
+      removeRule: 'Remove Rule',
+      accept: 'Yes',
+      reject: 'No',
+      choose: 'Choose',
+      upload: 'Upload',
+      cancel: 'Cancel',
+      completed: 'Completed',
+      pending: 'Pending',
+      fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+      dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+      dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+      dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+      monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      today: 'Today',
+      weekHeader: 'Wk',
+      firstDayOfWeek: 0,
+      showMonthAfterYear: false,
+      dateFormat: 'mm/dd/yy',
+      weak: 'Weak',
+      medium: 'Medium',
+      strong: 'Strong',
+      passwordPrompt: 'Enter a password',
+      emptyFilterMessage: 'No available options',
+      emptyMessage: 'No results found',
+      aria: {
+        trueLabel: 'True',
+        falseLabel: 'False',
+        nullLabel: 'Not Selected',
+        star: '1 star',
+        stars: '{star} stars',
+        selectAll: 'All items selected',
+        unselectAll: 'All items unselected',
+        close: 'Close',
+        previous: 'Previous',
+        next: 'Next',
+        navigation: 'Navigation',
+        scrollTop: 'Scroll Top',
+        moveTop: 'Move Top',
+        moveUp: 'Move Up',
+        moveDown: 'Move Down',
+        moveBottom: 'Move Bottom',
+        moveToTarget: 'Move to Target',
+        moveToSource: 'Move to Source',
+        moveAllToTarget: 'Move All to Target',
+        moveAllToSource: 'Move All to Source',
+        pageLabel: 'Page {page}',
+        firstPageLabel: 'First Page',
+        lastPageLabel: 'Last Page',
+        nextPageLabel: 'Next Page',
+        previousPageLabel: 'Previous Page',
+        rowsPerPageLabel: 'Rows per page',
+        jumpToPageDropdownLabel: 'Jump to Page Dropdown',
+        jumpToPageInputLabel: 'Jump to Page Input',
+        selectRow: 'Row Selected',
+        unselectRow: 'Row Unselected',
+        expandRow: 'Row Expanded',
+        collapseRow: 'Row Collapsed',
+        showFilterMenu: 'Show Filter Menu',
+        hideFilterMenu: 'Hide Filter Menu',
+        filterOperator: 'Filter Operator',
+        filterConstraint: 'Filter Constraint',
+        editRow: 'Row Edit',
+        saveEdit: 'Save Edit',
+        cancelEdit: 'Cancel Edit',
+        listView: 'List View',
+        gridView: 'Grid View',
+        slide: 'Slide',
+        slideNumber: '{slideNumber}',
+        zoomImage: 'Zoom Image',
+        zoomIn: 'Zoom In',
+        zoomOut: 'Zoom Out',
+        rotateRight: 'Rotate Right',
+        rotateLeft: 'Rotate Left',
+        selectLabel: 'Select',
+        unselectLabel: 'Unselect',
+        expandLabel: 'Expand',
+        collapseLabel: 'Collapse'
+      }
+    }
+  };
+
+  /**
+   * Find an ARIA label in the locale by key.  If options are passed it will replace all options:
+   * ```ts
+   * const ariaValue = "Page {page}, User {user}, Role {role}";
+   * const options = { page: 2, user: "John", role: "Admin" };
+   * const result = ariaLabel('yourLabel', { page: 2, user: "John", role: "Admin" })
+   * console.log(result); // Output: Page 2, User John, Role Admin
+   * ```
+   * @param {string} ariaKey key of the ARIA label to look up in locale.
+   * @param {any} options JSON options like { page: 2, user: "John", role: "Admin" }
+   * @returns the ARIA label with replaced values
+   */
+  function ariaLabel(ariaKey, options) {
+    var _locale = PrimeReact.locale;
+    try {
+      var _ariaLabel = localeOptions(_locale)['aria'][ariaKey];
+      if (_ariaLabel) {
+        for (var key in options) {
+          if (options.hasOwnProperty(key)) {
+            _ariaLabel = _ariaLabel.replace("{".concat(key, "}"), options[key]);
+          }
+        }
+      }
+      return _ariaLabel;
+    } catch (error) {
+      throw new Error("The ".concat(ariaKey, " option is not found in the current locale('").concat(_locale, "')."));
+    }
+  }
+  function localeOptions(locale) {
+    var _locale = locale || PrimeReact.locale;
+    return locales[_locale];
+  }
+
   var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var viewChanged = hooks.useMatchMedia("(max-width: ".concat(props.breakpoint, ")"), props.breakpoint);
     var ptm = props.ptm,
       cx = props.cx,
@@ -724,7 +943,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
         }
       }
     };
-    var buttonsProps = utils.mergeProps({
+    var buttonsProps = mergeProps({
       className: utils.classNames(props.className, cx('buttons'))
     }, ptm('buttons', {
       hostName: props.hostName
@@ -736,6 +955,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       onClick: moveRight,
       pt: ptm('moveToTargetButton'),
       unstyled: unstyled,
+      "aria-label": ariaLabel('moveToTarget'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -746,6 +966,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       onClick: moveAllRight,
       pt: ptm('moveAllToTargetButton'),
       unstyled: unstyled,
+      "aria-label": ariaLabel('moveAllToTarget'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -756,6 +977,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       onClick: moveLeft,
       pt: ptm('moveToSourceButton'),
       unstyled: unstyled,
+      "aria-label": ariaLabel('moveToSource'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -766,6 +988,7 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       onClick: moveAllLeft,
       pt: ptm('moveAllToSourceButton'),
       unstyled: unstyled,
+      "aria-label": ariaLabel('moveAllToSource'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -773,8 +996,11 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
   });
   PickListTransferControls.displayName = 'PickListTransferControls';
 
+  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var mergeProps = hooks.useMergeProps();
+    var context = React__namespace.useContext(PrimeReact$1.PrimeReactContext);
     var props = PickListBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -792,10 +1018,25 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       targetFilterValueState = _React$useState8[0],
       setTargetFilterValueState = _React$useState8[1];
-    var _React$useState9 = React__namespace.useState(null),
+    var _React$useState9 = React__namespace.useState(props.id),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       attributeSelectorState = _React$useState10[0],
       setAttributeSelectorState = _React$useState10[1];
+    var _React$useState11 = React__namespace.useState(-1),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      focusedOptionIndex = _React$useState12[0],
+      setFocusedOptionIndex = _React$useState12[1];
+    var _React$useState13 = React__namespace.useState(null),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      focusedOptionId = _React$useState14[0],
+      setFocusedOptionId = _React$useState14[1];
+    var _React$useState15 = React__namespace.useState({
+        source: false,
+        target: false
+      }),
+      _React$useState16 = _slicedToArray(_React$useState15, 2),
+      focused = _React$useState16[0],
+      setFocused = _React$useState16[1];
     var metaData = {
       props: props,
       state: {
@@ -828,31 +1069,30 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     var showTargetFilter = hasFilterBy && props.showTargetFilter;
     var onSourceReorder = function onSourceReorder(event) {
       handleChange(event, event.value, props.target);
-      reorderedListElementRef.current = sourceListElementRef.current.listElementRef.current;
+      reorderedListElementRef.current = getListElement('source');
       reorderDirection.current = event.direction;
     };
     var onTargetReorder = function onTargetReorder(event) {
       handleChange(event, props.source, event.value);
-      reorderedListElementRef.current = targetListElementRef.current.listElementRef.current;
+      reorderedListElementRef.current = getListElement('target');
       reorderDirection.current = event.direction;
     };
     var handleScrollPosition = function handleScrollPosition(listElement, direction) {
       if (listElement) {
-        var list = utils.DomHandler.findSingle(listElement, '[data-pc-section="list"]');
         switch (direction) {
           case 'up':
-            scrollInView(list, -1);
+            scrollInView(listElement, -1);
             break;
           case 'top':
-            list.scrollTop = 0;
+            listElement.scrollTop = 0;
             break;
           case 'down':
-            scrollInView(list, 1);
+            scrollInView(listElement, 1);
             break;
           case 'bottom':
             /* TODO: improve this code block */
             setTimeout(function () {
-              return list.scrollTop = list.scrollHeight;
+              return listElement.scrollTop = listElement.scrollHeight;
             }, 100);
             break;
         }
@@ -958,13 +1198,6 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
         setFilterState(value);
       }
     };
-    var getVisibleList = function getVisibleList(list, type) {
-      var _ref3 = type === 'source' ? [sourceFilteredValue, filterSource] : [targetFilteredValue, filterTarget],
-        _ref4 = _slicedToArray(_ref3, 2),
-        filteredValue = _ref4[0],
-        filterCallback = _ref4[1];
-      return hasFilterBy && utils.ObjectUtils.isNotEmpty(filteredValue) ? filterCallback(filteredValue) : list;
-    };
     var filterSource = function filterSource() {
       var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
@@ -977,11 +1210,273 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
     };
     var filter = function filter(list, filterValue) {
       var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
-      return PrimeReact.FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+      return PrimeReact$1.FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+    };
+    var getVisibleList = function getVisibleList(list, type) {
+      var _ref3 = type === 'source' ? [sourceFilteredValue, filterSource] : [targetFilteredValue, filterTarget],
+        _ref4 = _slicedToArray(_ref3, 2),
+        filteredValue = _ref4[0],
+        filterCallback = _ref4[1];
+      return hasFilterBy && utils.ObjectUtils.isNotEmpty(filteredValue) ? filterCallback(filteredValue) : list;
+    };
+    var sourceList = getVisibleList(props.source, 'source');
+    var targetList = getVisibleList(props.target, 'target');
+    var _onListFocus = function onListFocus(event, type) {
+      var listElement = getListElement(type);
+      var selectedFirstItem = utils.DomHandler.findSingle(listElement, '[data-p-highlight="true"]') || utils.DomHandler.findSingle(listElement, '[data-pc-section="item"]');
+      var itemList = listElement && listElement.children ? _toConsumableArray(listElement.children) : [];
+      if (selectedFirstItem) {
+        var findIndex = utils.ObjectUtils.findIndexInList(selectedFirstItem, itemList);
+        setFocused(_objectSpread(_objectSpread({}, focused), {}, _defineProperty({}, type, true)));
+        var index = focusedOptionIndex !== -1 ? focusedOptionIndex : selectedFirstItem ? findIndex : -1;
+        changeFocusedOptionIndex(index, type);
+        props.onFocus && props.onFocus(event);
+      }
+    };
+    var _onListBlur = function onListBlur(event, type) {
+      setFocused(_objectSpread(_objectSpread({}, focused), {}, _defineProperty({}, type, false)));
+      setFocusedOptionIndex(-1);
+      props.onBlur && props.onBlur(event);
+    };
+    var _onItemClick = function onItemClick(event, type) {
+      var arrowKeyClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var originalEvent = event.originalEvent;
+      var item = event.value;
+      var selectedId = event.id;
+      var isSource = type === 'source';
+      var selection = _toConsumableArray(isSource ? sourceSelection : targetSelection);
+      var index = utils.ObjectUtils.findIndexInList(item, selection, props.dataKey);
+      var selected = index !== -1;
+      var metaSelection = props.metaKeySelection;
+      if (!arrowKeyClick) setFocusedOptionIndex(selectedId);
+      if (metaSelection) {
+        var metaKey = originalEvent.metaKey || originalEvent.ctrlKey || originalEvent.shiftKey;
+        if (selected && metaKey) {
+          selection.splice(index, 1);
+        } else {
+          if (!metaKey) {
+            selection.length = 0;
+          }
+          selection.push(item);
+        }
+      } else {
+        if (selected) selection.splice(index, 1);else selection.push(item);
+      }
+      if (isSource) {
+        _onSelectionChange({
+          originalEvent: originalEvent,
+          value: selection
+        }, 'sourceSelection', props.onSourceSelectionChange);
+      } else {
+        _onSelectionChange({
+          originalEvent: originalEvent,
+          value: selection
+        }, 'targetSelection', props.onTargetSelectionChange);
+      }
+    };
+    var _onOptionMouseDown = function onOptionMouseDown(_ref5) {
+      var index = _ref5.index,
+        type = _ref5.type;
+      setFocused(_objectSpread(_objectSpread({}, focused), {}, _defineProperty({}, type, true)));
+      setFocusedOptionIndex(index);
+    };
+    var _onListKeyDown = function onListKeyDown(event, type) {
+      switch (event.code) {
+        case 'ArrowDown':
+          onArrowDownKey(event, type);
+          break;
+        case 'ArrowUp':
+          onArrowUpKey(event, type);
+          break;
+        case 'Home':
+          onHomeKey(event, type);
+          break;
+        case 'End':
+          onEndKey(event, type);
+          break;
+        case 'Enter':
+        case 'NumpadEnter':
+          onEnterKey(event, type);
+          break;
+        case 'Space':
+          onSpaceKey(event, type);
+          break;
+        case 'KeyA':
+          if (event.ctrlKey) {
+            var isSource = type === 'source';
+            if (isSource) setSourceSelectionState(_toConsumableArray(sourceList));else setTargetSelectionState(_toConsumableArray(targetList));
+            _onSelectionChange({
+              originalEvent: event,
+              value: _toConsumableArray(sourceList)
+            }, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
+            event.preventDefault();
+          }
+      }
+    };
+    var onArrowDownKey = function onArrowDownKey(event, type) {
+      var optionIndex = findNextOptionIndex(focusedOptionIndex, type);
+      var visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
+      changeFocusedOptionIndex(optionIndex, type);
+      if (visibleList && visibleList.length > 0 && event.shiftKey) {
+        _onItemClick({
+          originalEvent: event,
+          value: visibleList[optionIndex]
+        }, type, true);
+      }
+      event.preventDefault();
+    };
+    var onArrowUpKey = function onArrowUpKey(event, type) {
+      var optionIndex = findPrevOptionIndex(focusedOptionIndex, type);
+      var visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
+      changeFocusedOptionIndex(optionIndex, type);
+      if (visibleList && visibleList.length > 0 && event.shiftKey) {
+        _onItemClick({
+          originalEvent: event,
+          value: visibleList[optionIndex]
+        }, type, true);
+      }
+      event.preventDefault();
+    };
+    var onEnterKey = function onEnterKey(event, type) {
+      var listElement = getListElement(type);
+      var visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
+      var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+      var focusedItem = utils.DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
+      var id = focusedItem && focusedItem.getAttribute('id');
+      var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+        return item === focusedItem;
+      });
+      if (visibleList && visibleList.length > 0) {
+        _onItemClick({
+          originalEvent: event,
+          value: visibleList[matchedOptionIndex],
+          id: id
+        }, type);
+      }
+      event.preventDefault();
+    };
+    var onSpaceKey = function onSpaceKey(event, type) {
+      event.preventDefault();
+      var isSource = type === 'source';
+      var selection = isSource ? sourceSelectionState : targetSelectionState;
+      if (event.shiftKey && selection && selection.length > 0) {
+        var listItems = isSource ? sourceList : targetList;
+        var listElement = getListElement(type);
+        var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+        var selectedItemIndex = utils.ObjectUtils.findIndexInList(selection[0], _toConsumableArray(listItems));
+        var focusedItem = utils.DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
+        var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+          return item === focusedItem;
+        });
+        _toConsumableArray(listItems).slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1), _readOnlyError("selection");
+        if (isSource) {
+          _onSelectionChange({
+            originalEvent: event,
+            value: selection
+          }, 'sourceSelection', props.onSourceSelectionChange);
+        } else {
+          _onSelectionChange({
+            originalEvent: event,
+            value: selection
+          }, 'targetSelection', props.onTargetSelectionChange);
+        }
+      } else {
+        onEnterKey(event, type);
+      }
+    };
+    var onHomeKey = function onHomeKey(event, type) {
+      if (event.ctrlKey && event.shiftKey) {
+        var isSource = type === 'source';
+        var listItems = isSource ? sourceList : targetList;
+        var listElement = getListElement(type);
+        var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+        var focusedItem = utils.DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
+        var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+          return item === focusedItem;
+        });
+        var selection = _toConsumableArray(listItems).slice(0, matchedOptionIndex + 1);
+        if (isSource) {
+          _onSelectionChange({
+            originalEvent: event,
+            value: selection
+          }, 'sourceSelection', props.onSourceSelectionChange);
+        } else {
+          _onSelectionChange({
+            originalEvent: event,
+            value: selection
+          }, 'targetSelection', props.onTargetSelectionChange);
+        }
+      } else {
+        changeFocusedOptionIndex(0, type);
+      }
+      event.preventDefault();
+    };
+    var onEndKey = function onEndKey(event, type) {
+      var listElement = getListElement(type);
+      var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+      if (event.ctrlKey && event.shiftKey) {
+        var isSource = type === 'source';
+        var listItems = isSource ? sourceList : targetList;
+        var focusedItem = utils.DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
+        var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+          return item === focusedItem;
+        });
+        var selection = _toConsumableArray(listItems).slice(matchedOptionIndex, items.length);
+        if (isSource) {
+          _onSelectionChange({
+            originalEvent: event,
+            value: selection
+          }, 'sourceSelection', props.onSourceSelectionChange);
+        } else {
+          _onSelectionChange({
+            originalEvent: event,
+            value: selection
+          }, 'targetSelection', props.onTargetSelectionChange);
+        }
+      } else {
+        changeFocusedOptionIndex(items.length - 1, type);
+      }
+      event.preventDefault();
+    };
+    var findNextOptionIndex = function findNextOptionIndex(index, type) {
+      var listElement = getListElement(type);
+      var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+      var matchedOptionIndex = _toConsumableArray(items).findIndex(function (link) {
+        return link.id === index;
+      });
+      return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+    };
+    var findPrevOptionIndex = function findPrevOptionIndex(index, type) {
+      var listElement = getListElement(type);
+      var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+      var matchedOptionIndex = _toConsumableArray(items).findIndex(function (link) {
+        return link.id === index;
+      });
+      return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+    };
+    var changeFocusedOptionIndex = function changeFocusedOptionIndex(index, type) {
+      var listElement = getListElement(type);
+      var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+      var order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
+      setFocusedOptionIndex(items[order].getAttribute('id'));
+      scrollInViewWithFocus(items[order].getAttribute('id'), type);
+    };
+    var scrollInViewWithFocus = function scrollInViewWithFocus(id, type) {
+      var listElement = getListElement(type);
+      var element = utils.DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=\"".concat(id, "\"]"));
+      if (element) {
+        element.scrollIntoView && element.scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      }
+    };
+    var getListElement = function getListElement(type) {
+      return type === 'source' ? sourceListElementRef.current.getElement() : targetListElementRef.current.getElement();
     };
     var createStyle = function createStyle() {
       if (!styleElementRef.current) {
-        styleElementRef.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
+        styleElementRef.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce, context && context.styleContainer);
         var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-picklist[").concat(attributeSelectorState, "] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");
         styleElementRef.current.innerHTML = innerHTML;
       }
@@ -997,9 +1492,6 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
         }
       };
     });
-    hooks.useMountEffect(function () {
-      !attributeSelectorState && setAttributeSelectorState(utils.UniqueComponentId());
-    });
     hooks.useUpdateEffect(function () {
       if (attributeSelectorState) {
         elementRef.current.setAttribute(attributeSelectorState, '');
@@ -1010,18 +1502,23 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       };
     }, [attributeSelectorState, props.breakpoint]);
     hooks.useUpdateEffect(function () {
+      if (!props.id && !attributeSelectorState) {
+        setAttributeSelectorState(utils.UniqueComponentId());
+      }
       if (reorderedListElementRef.current) {
         handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
         reorderedListElementRef.current = null;
         reorderDirection.current = null;
       }
     });
+    hooks.useUpdateEffect(function () {
+      var _focusedOptionId = focusedOptionIndex !== -1 ? focusedOptionIndex : null;
+      setFocusedOptionId(_focusedOptionId);
+    }, [focusedOptionIndex]);
     var sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
     var targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
-    var sourceList = getVisibleList(props.source, 'source');
-    var targetList = getVisibleList(props.target, 'target');
-    var rootProps = utils.mergeProps({
-      id: props.id,
+    var rootProps = mergeProps({
+      id: attributeSelectorState,
       ref: elementRef,
       className: utils.classNames(props.className, cx('root')),
       style: props.style
@@ -1046,10 +1543,28 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       ref: sourceListElementRef,
       type: "source",
       list: sourceList,
+      parentId: attributeSelectorState,
       selection: sourceSelection,
       onSelectionChange: function onSelectionChange(e) {
         return _onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange);
       },
+      onListKeyDown: function onListKeyDown(e) {
+        return _onListKeyDown(e, 'source');
+      },
+      onListFocus: function onListFocus(e) {
+        return _onListFocus(e, 'source');
+      },
+      onListBlur: function onListBlur(e) {
+        return _onListBlur(e, 'source');
+      },
+      onOptionMouseDown: function onOptionMouseDown(index) {
+        return _onOptionMouseDown(index);
+      },
+      onItemClick: function onItemClick(e) {
+        return _onItemClick(e, 'source');
+      },
+      focusedOptionId: focused['source'] ? focusedOptionId : null,
+      ariaActivedescendant: focused['source'] ? focusedOptionId : null,
       itemTemplate: sourceItemTemplate,
       header: props.sourceHeader,
       style: props.sourceStyle,
@@ -1091,9 +1606,27 @@ this.primereact.picklist = (function (exports, React, PrimeReact, componentbase,
       type: "target",
       list: targetList,
       selection: targetSelection,
+      parentId: attributeSelectorState,
       onSelectionChange: function onSelectionChange(e) {
         return _onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange);
       },
+      onListKeyDown: function onListKeyDown(e) {
+        return _onListKeyDown(e, 'target');
+      },
+      onListFocus: function onListFocus(e) {
+        return _onListFocus(e, 'target');
+      },
+      onListBlur: function onListBlur(e) {
+        return _onListBlur(e, 'target');
+      },
+      onOptionMouseDown: function onOptionMouseDown(index) {
+        return _onOptionMouseDown(index);
+      },
+      onItemClick: function onItemClick(e) {
+        return _onItemClick(e, 'target');
+      },
+      focusedOptionId: focused['target'] ? focusedOptionId : null,
+      ariaActivedescendant: focused['target'] ? focusedOptionId : null,
       itemTemplate: targetItemTemplate,
       header: props.targetHeader,
       style: props.targetStyle,