primereact 10.3.0 → 10.3.1

package/picklist/picklist.esm.js

@@ -1,9 +1,9 @@
 'use client';
 import * as React from 'react';
-import PrimeReact, { PrimeReactContext, FilterService } from 'primereact/api';
+import PrimeReact$1, { ariaLabel as ariaLabel$1, PrimeReactContext, FilterService } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
-import { useMatchMedia, useMountEffect, useUpdateEffect } from 'primereact/hooks';
-import { classNames, mergeProps, ObjectUtils, IconUtils, DomHandler, UniqueComponentId } from 'primereact/utils';
+import { useMatchMedia, useUpdateEffect } from 'primereact/hooks';
+import { classNames, mergeProps, ObjectUtils, IconUtils, UniqueComponentId, DomHandler } from 'primereact/utils';
 import { Button } from 'primereact/button';
 import { AngleDoubleDownIcon } from 'primereact/icons/angledoubledown';
 import { AngleDoubleUpIcon } from 'primereact/icons/angledoubleup';
@@ -16,6 +16,82 @@ import { AngleDoubleRightIcon } from 'primereact/icons/angledoubleright';
 import { AngleLeftIcon } from 'primereact/icons/angleleft';
 import { AngleRightIcon } from 'primereact/icons/angleright';
 
+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;
 }
@@ -48,21 +124,6 @@ function _iterableToArrayLimit(r, l) {
   }
 }
 
-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.");
 }
@@ -81,20 +142,22 @@ var classes = {
   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 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.extend({
   defaultProps: {
     __TYPE: 'PickList',
@@ -112,6 +175,8 @@ var PickListBase = ComponentBase.extend({
     showSourceControls: true,
     showTargetControls: true,
     metaKeySelection: true,
+    onFocus: null,
+    onBlur: null,
     filter: false,
     filterBy: null,
     filterMatchMode: 'contains',
@@ -157,22 +222,6 @@ var PickListBase = ComponentBase.extend({
   }
 });
 
-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.memo(function (props) {
   var ptm = props.ptm,
     cx = props.cx,
@@ -290,6 +339,7 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveUp,
     pt: ptm('moveUpButton'),
     unstyled: unstyled,
+    "aria-label": ariaLabel$1('moveUp'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -300,6 +350,7 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveTop,
     pt: ptm('moveTopButton'),
     unstyled: unstyled,
+    "aria-label": ariaLabel$1('moveTop'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -310,6 +361,7 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveDown,
     pt: ptm('moveDownButton'),
     unstyled: unstyled,
+    "aria-label": ariaLabel$1('moveDown'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -320,6 +372,7 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveBottom,
     pt: ptm('moveBottomButton'),
     unstyled: unstyled,
+    "aria-label": ariaLabel$1('moveBottom'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -327,47 +380,6 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
 });
 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.memo(function (props) {
   var ptm = props.ptm,
     cx = props.cx;
@@ -383,7 +395,8 @@ var PickListItem = /*#__PURE__*/React.memo(function (props) {
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
-        value: props.value
+        value: props.value,
+        id: props.id
       });
     }
   };
@@ -395,92 +408,47 @@ var PickListItem = /*#__PURE__*/React.memo(function (props) {
       });
     }
   };
+  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 = mergeProps({
     className: 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.createElement("li", itemProps, content, /*#__PURE__*/React.createElement(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.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var listElementRef = React.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 = 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 ? !DomHandler.hasClass(nextItem, 'p-picklist-item') ? findNextItem(nextItem) : nextItem : null;
-  };
-  var findPrevItem = function findPrevItem(item) {
-    var prevItem = item.previousElementSibling;
-    return prevItem ? !DomHandler.hasClass(prevItem, 'p-picklist-item') ? findPrevItem(prevItem) : prevItem : null;
-  };
   var isSelected = function isSelected(item) {
     return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
   };
@@ -501,7 +469,9 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   };
   React.useImperativeHandle(ref, function () {
     return {
-      listElementRef: listElementRef
+      getElement: function getElement() {
+        return listElementRef.current;
+      }
     };
   });
   var createHeader = function createHeader() {
@@ -515,18 +485,26 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   };
   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.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
         });
@@ -540,7 +518,7 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       className: cx('filterIcon')
     }, getPTOptions('filterIcon'));
     var icon = props.type === 'source' ? props.sourceFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps) : props.targetFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
-    var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, filterIconProps), {
+    var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread$1({}, filterIconProps), {
       props: props
     });
     if (props.showFilter) {
@@ -580,9 +558,18 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   var createList = function createList() {
     var items = createItems();
     var listProps = mergeProps({
+      ref: listElementRef,
       className: 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.createElement("ul", listProps, items);
@@ -591,13 +578,241 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   var filter = createFilter();
   var list = createList();
   var listWrapperProps = mergeProps({
-    className: classNames(props.className, cx('listWrapper')),
-    ref: listElementRef
+    className: classNames(props.className, cx('listWrapper'))
   }, getPTOptions('listWrapper'));
   return /*#__PURE__*/React.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.memo(function (props) {
   var viewChanged = useMatchMedia("(max-width: ".concat(props.breakpoint, ")"), props.breakpoint);
   var ptm = props.ptm,
@@ -727,6 +942,7 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveRight,
     pt: ptm('moveToTargetButton'),
     unstyled: unstyled,
+    "aria-label": ariaLabel('moveToTarget'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -737,6 +953,7 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveAllRight,
     pt: ptm('moveAllToTargetButton'),
     unstyled: unstyled,
+    "aria-label": ariaLabel('moveAllToTarget'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -747,6 +964,7 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveLeft,
     pt: ptm('moveToSourceButton'),
     unstyled: unstyled,
+    "aria-label": ariaLabel('moveToSource'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -757,6 +975,7 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveAllLeft,
     pt: ptm('moveAllToSourceButton'),
     unstyled: unstyled,
+    "aria-label": ariaLabel('moveAllToSource'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -764,6 +983,8 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
 });
 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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var context = React.useContext(PrimeReactContext);
   var props = PickListBase.getProps(inProps, context);
@@ -783,10 +1004,25 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     targetFilterValueState = _React$useState8[0],
     setTargetFilterValueState = _React$useState8[1];
-  var _React$useState9 = React.useState(null),
+  var _React$useState9 = React.useState(props.id),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
     attributeSelectorState = _React$useState10[0],
     setAttributeSelectorState = _React$useState10[1];
+  var _React$useState11 = React.useState(-1),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    focusedOptionIndex = _React$useState12[0],
+    setFocusedOptionIndex = _React$useState12[1];
+  var _React$useState13 = React.useState(null),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    focusedOptionId = _React$useState14[0],
+    setFocusedOptionId = _React$useState14[1];
+  var _React$useState15 = React.useState({
+      source: false,
+      target: false
+    }),
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    focused = _React$useState16[0],
+    setFocused = _React$useState16[1];
   var metaData = {
     props: props,
     state: {
@@ -819,31 +1055,30 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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 = 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;
       }
@@ -949,13 +1184,6 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       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 && 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);
@@ -970,9 +1198,271 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
     return 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 && 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 = DomHandler.findSingle(listElement, '[data-p-highlight="true"]') || DomHandler.findSingle(listElement, '[data-pc-section="item"]');
+    var itemList = listElement && listElement.children ? _toConsumableArray(listElement.children) : [];
+    if (selectedFirstItem) {
+      var findIndex = 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 = 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 = DomHandler.find(listElement, '[data-pc-section="item"]');
+    var focusedItem = 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 = DomHandler.find(listElement, '[data-pc-section="item"]');
+      var selectedItemIndex = ObjectUtils.findIndexInList(selection[0], _toConsumableArray(listItems));
+      var focusedItem = 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 = DomHandler.find(listElement, '[data-pc-section="item"]');
+      var focusedItem = 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 = DomHandler.find(listElement, '[data-pc-section="item"]');
+    if (event.ctrlKey && event.shiftKey) {
+      var isSource = type === 'source';
+      var listItems = isSource ? sourceList : targetList;
+      var focusedItem = 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 = 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 = 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 = 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 = 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 = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
+      styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact$1.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;
     }
@@ -988,9 +1478,6 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
     };
   });
-  useMountEffect(function () {
-    !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
-  });
   useUpdateEffect(function () {
     if (attributeSelectorState) {
       elementRef.current.setAttribute(attributeSelectorState, '');
@@ -1001,18 +1488,23 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     };
   }, [attributeSelectorState, props.breakpoint]);
   useUpdateEffect(function () {
+    if (!props.id && !attributeSelectorState) {
+      setAttributeSelectorState(UniqueComponentId());
+    }
     if (reorderedListElementRef.current) {
       handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
       reorderedListElementRef.current = null;
       reorderDirection.current = null;
     }
   });
+  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 = mergeProps({
-    id: props.id,
+    id: attributeSelectorState,
     ref: elementRef,
     className: classNames(props.className, cx('root')),
     style: props.style
@@ -1037,10 +1529,28 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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,
@@ -1082,9 +1592,27 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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,