primereact 10.2.1 → 10.3.1

package/orderlist/orderlist.cjs.js

@@ -123,18 +123,21 @@ var classes = {
   filterContainer: 'p-orderlist-filter-container',
   container: 'p-orderlist-list-container',
   item: function item(_ref) {
-    var _item = _ref.item,
-      isSelected = _ref.isSelected;
+    var selected = _ref.selected,
+      focused = _ref.focused;
     return utils.classNames('p-orderlist-item', {
-      'p-highlight': isSelected(_item)
+      'p-highlight': selected,
+      'p-focus': focused
     });
   }
 };
-var styles = "\n@layer primereact {\n    .p-orderlist {\n        display: flex;\n    }\n    \n    .p-orderlist-controls {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n    \n    .p-orderlist-list-container {\n        flex: 1 1 auto;\n    }\n    \n    .p-orderlist-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-orderlist-item {\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-orderlist-filter {\n        position: relative;\n    }\n    \n    .p-orderlist-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-orderlist-filter-input {\n        width: 100%;\n    }\n    \n    .p-orderlist.p-state-disabled .p-orderlist-item,\n    .p-orderlist.p-state-disabled .p-button {\n        cursor: default;\n    }\n    \n    .p-orderlist.p-state-disabled .p-orderlist-list {\n        overflow: hidden;\n    }\n    \n    .p-orderlist .p-orderlist-droppoint {\n        height: 0.5rem;\n    }\n    \n    .p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {\n        background: var(--primary-color);\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-orderlist {\n        display: flex;\n    }\n\n    .p-orderlist-controls {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n\n    .p-orderlist-list-container {\n        flex: 1 1 auto;\n    }\n\n    .p-orderlist-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-orderlist-item {\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-orderlist-filter {\n        position: relative;\n    }\n\n    .p-orderlist-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n\n    .p-orderlist-filter-input {\n        width: 100%;\n    }\n\n    .p-orderlist.p-state-disabled .p-orderlist-item,\n    .p-orderlist.p-state-disabled .p-button {\n        cursor: default;\n    }\n\n    .p-orderlist.p-state-disabled .p-orderlist-list {\n        overflow: hidden;\n    }\n\n    .p-orderlist .p-orderlist-droppoint {\n        height: 0.5rem;\n    }\n\n    .p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {\n        background: var(--primary-color);\n    }\n}\n";
 var OrderListBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'OrderList',
     id: null,
+    ariaLabel: null,
+    ariaLabelledBy: null,
     value: null,
     header: null,
     style: null,
@@ -281,6 +284,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     }
   };
+  var isMoveDisabled = utils.ObjectUtils.isEmpty(props.value) || utils.ObjectUtils.isEmpty(props.selection);
   var controlsProps = utils.mergeProps({
     className: cx('controls')
   }, ptm('controls', {
@@ -291,6 +295,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     unstyled: unstyled,
     icon: moveUpIcon,
     onClick: moveUp,
+    disabled: isMoveDisabled,
     'aria-label': PrimeReact.ariaLabel('moveUp'),
     __parentMetadata: {
       parent: props.metaData
@@ -301,6 +306,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     unstyled: unstyled,
     icon: moveTopIcon,
     onClick: moveTop,
+    disabled: isMoveDisabled,
     'aria-label': PrimeReact.ariaLabel('moveTop'),
     __parentMetadata: {
       parent: props.metaData
@@ -311,6 +317,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     unstyled: unstyled,
     icon: moveDownIcon,
     onClick: moveDown,
+    disabled: isMoveDisabled,
     'aria-label': PrimeReact.ariaLabel('moveDown'),
     __parentMetadata: {
       parent: props.metaData
@@ -321,6 +328,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     unstyled: unstyled,
     icon: moveBottomIcon,
     onClick: moveBottom,
+    disabled: isMoveDisabled,
     'aria-label': PrimeReact.ariaLabel('moveBottom'),
     __parentMetadata: {
       parent: props.metaData
@@ -381,7 +389,7 @@ function _defineProperty(obj, key, value) {
 
 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 OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
+var OrderListSubList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var ptm = props.ptm,
     cx = props.cx;
   var _ptm = function _ptm(key, options) {
@@ -479,17 +487,25 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
     }, _ptm('header'));
     return props.header ? /*#__PURE__*/React__namespace.createElement("div", headerProps, props.header) : null;
   };
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      getElement: function getElement() {
+        return listElementRef.current;
+      }
+    };
+  });
   var createItems = function createItems() {
     if (props.value) {
       return props.value.map(function (item, i) {
         var content = props.itemTemplate ? props.itemTemplate(item) : item;
-        var key = JSON.stringify(item);
+        var key = props.parentId + '_' + i;
+        var focused = props.focused && props.focusedOptionId === key;
+        var selected = isSelected(item);
         if (props.dragdrop) {
           var itemProps = utils.mergeProps({
-            className: utils.classNames(props.className, cx('item', {
-              item: item,
-              isSelected: isSelected
-            })),
+            id: key,
+            role: 'option',
+            draggable: 'true',
             onClick: function onClick(e) {
               return props.onItemClick({
                 originalEvent: e,
@@ -497,22 +513,18 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
                 index: i
               });
             },
-            onKeyDown: function onKeyDown(e) {
-              return props.onItemKeyDown({
-                originalEvent: e,
-                value: item,
-                index: i
-              });
-            },
-            role: 'option',
-            'aria-selected': isSelected(item),
-            draggable: 'true',
+            onMouseDown: props.onOptionMouseDown,
             onDragStart: function onDragStart(e) {
               return _onDragStart(e, i);
             },
             onDragEnd: onDragEnd,
-            tabIndex: props.tabIndex,
-            'data-p-highlight': isSelected(item)
+            className: utils.classNames(props.className, cx('item', {
+              selected: selected,
+              focused: focused
+            })),
+            'aria-selected': selected,
+            'data-p-highlight': selected,
+            'data-p-focused': focused
           }, getPTOptions(item, 'item'));
           var items = [];
           if (i === 0) {
@@ -525,12 +537,8 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
           return items;
         } else {
           var _itemProps = utils.mergeProps({
+            id: key,
             role: 'option',
-            tabIndex: props.tabIndex,
-            className: utils.classNames(props.className, cx('item', {
-              item: item,
-              isSelected: isSelected
-            })),
             onClick: function onClick(e) {
               return props.onItemClick({
                 originalEvent: e,
@@ -538,15 +546,14 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
                 index: i
               });
             },
-            onKeyDown: function onKeyDown(e) {
-              return props.onItemKeyDown({
-                originalEvent: e,
-                value: item,
-                index: i
-              });
-            },
-            'aria-selected': isSelected(item),
-            'data-p-highlight': isSelected(item)
+            onMouseDown: props.onOptionMouseDown,
+            className: utils.classNames(props.className, cx('item', {
+              selected: selected,
+              focused: focused
+            })),
+            'aria-selected': selected,
+            'data-p-highlight': selected,
+            'data-p-focused': focused
           }, getPTOptions(item, 'item'));
           return /*#__PURE__*/React__namespace.createElement("li", _extends({
             key: key
@@ -564,6 +571,13 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
       style: props.listStyle,
       onDragOver: onListMouseMove,
       role: 'listbox',
+      onFocus: props.onListFocus,
+      onBlur: props.onListBlur,
+      onKeyDown: props.onListKeyDown,
+      tabIndex: props.tabIndex,
+      'aria-activedescendant': props.focused ? props.focusedOptionId : null,
+      'aria-label': props.ariaLabel,
+      'aria-labelledby': props.ariaLabelledBy,
       'aria-multiselectable': true
     }, _ptm('list'));
     return /*#__PURE__*/React__namespace.createElement("ul", listProps, items);
@@ -621,7 +635,7 @@ var OrderListSubList = /*#__PURE__*/React__namespace.memo(function (props) {
     className: cx('container')
   }, _ptm('container'));
   return /*#__PURE__*/React__namespace.createElement("div", containerProps, header, filter, list);
-});
+}));
 OrderListSubList.displayName = 'OrderListSubList';
 
 var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
@@ -639,10 +653,23 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     attributeSelectorState = _React$useState6[0],
     setAttributeSelectorState = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    focused = _React$useState8[0],
+    setFocused = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focusedOptionId = _React$useState10[0],
+    setFocusedOptionId = _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 hasFilter = utils.ObjectUtils.isNotEmpty(filterValueState);
   var elementRef = React__namespace.useRef(null);
   var styleElementRef = React__namespace.useRef(null);
   var reorderDirection = React__namespace.useRef(null);
+  var listElementRef = React__namespace.useRef(null);
   var metaData = {
     props: props,
     state: {
@@ -658,39 +685,195 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   componentbase.useHandleStyle(OrderListBase.css.styles, isUnstyled, {
     name: 'orderlist'
   });
+  var getVisibleList = function getVisibleList() {
+    if (hasFilter) {
+      var filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
+      var searchFields = props.filterBy ? props.filterBy.split(',') : [];
+      return PrimeReact.FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+    }
+    return props.value;
+  };
+  var visibleList = getVisibleList();
+  var getListElement = function getListElement() {
+    return listElementRef.current && listElementRef.current.getElement();
+  };
   var onItemClick = function onItemClick(event) {
-    var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
-    var index = utils.ObjectUtils.findIndexInList(event.value, selectionState, props.dataKey);
-    var selected = index !== -1;
+    var originalEvent = event.originalEvent,
+      value = event.value,
+      index = event.index;
+    var selectedIndex = utils.ObjectUtils.findIndexInList(value, selectionState);
+    var listElement = getListElement();
+    var selectedId = utils.DomHandler.find(listElement, '[data-pc-section="item"]')[index].getAttribute('id');
+    setFocusedOptionIndex(selectedId);
+    var metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
+    var selected = selectedIndex !== -1;
     var newSelection;
     if (selected) newSelection = metaKey ? selectionState.filter(function (_, i) {
-      return i !== index;
-    }) : [event.value];else newSelection = metaKey ? [].concat(_toConsumableArray(selectionState), [event.value]) : [event.value];
+      return i !== selectedIndex;
+    }) : [value];else newSelection = metaKey ? [].concat(_toConsumableArray(selectionState), [value]) : [value];
     setSelectionState(newSelection);
   };
-  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();
+  var setSelectionStateWithIndex = function setSelectionStateWithIndex(index) {
+    var item = visibleList[index];
+    var selected = utils.ObjectUtils.findIndexInList(item, selectionState) !== -1;
+    if (selected) setSelectionState(selectionState.filter(function (selectedItem) {
+      return selectedItem !== item;
+    }));else setSelectionState([].concat(_toConsumableArray(selectionState), [item]));
+  };
+  var onListFocus = function onListFocus(event) {
+    var listElement = getListElement();
+    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 && itemList.length > 0) {
+      var findIndex = utils.ObjectUtils.findIndexInList(selectedFirstItem, itemList);
+      setFocused(true);
+      var index = focusedOptionIndex !== -1 ? focusedOptionIndex : selectedFirstItem ? findIndex : -1;
+      changeFocusedOptionIndex(index);
+      props.onFocus && props.onFocus(event);
+    }
+  };
+  var onListBlur = function onListBlur(event) {
+    setFocused(false);
+    setFocusedOptionIndex(-1);
+    props.onBlur && props.onBlur(event);
+  };
+  var onListKeyDown = function onListKeyDown(event) {
+    switch (event.code) {
+      case 'ArrowDown':
+        onArrowDownKey(event);
         break;
-
-      //up
-      case 38:
-        var prevItem = findPrevItem(listItem);
-        prevItem && prevItem.focus();
-        originalEvent.preventDefault();
+      case 'ArrowUp':
+        onArrowUpKey(event);
         break;
-
-      //enter
-      case 13:
-        onItemClick(event);
-        originalEvent.preventDefault();
+      case 'Home':
+        onHomeKey(event);
+        break;
+      case 'End':
+        onEndKey(event);
         break;
+      case 'Enter':
+      case 'NumpadEnter':
+        onEnterKey(event);
+        break;
+      case 'Space':
+        onSpaceKey(event);
+        break;
+      case 'KeyA':
+        if (event.ctrlKey) {
+          setSelectionState(visibleList);
+          event.preventDefault();
+        }
+    }
+  };
+  var onOptionMouseDown = function onOptionMouseDown(index) {
+    setFocused(true);
+    setFocusedOptionIndex(index);
+  };
+  var onArrowDownKey = function onArrowDownKey(event) {
+    var optionIndex = findNextOptionIndex(focusedOptionIndex);
+    changeFocusedOptionIndex(optionIndex);
+    if (event.shiftKey) {
+      setSelectionStateWithIndex(optionIndex);
+    }
+    event.preventDefault();
+  };
+  var onArrowUpKey = function onArrowUpKey(event) {
+    var optionIndex = findPrevOptionIndex(focusedOptionIndex);
+    changeFocusedOptionIndex(optionIndex);
+    if (event.shiftKey) {
+      setSelectionStateWithIndex(optionIndex);
+    }
+    event.preventDefault();
+  };
+  var onHomeKey = function onHomeKey(event) {
+    if (event.ctrlKey && event.shiftKey) {
+      var listElement = getListElement();
+      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;
+      });
+      setSelectionState(_toConsumableArray(visibleList).slice(0, matchedOptionIndex + 1));
+    } else {
+      changeFocusedOptionIndex(0);
+    }
+    event.preventDefault();
+  };
+  var onEndKey = function onEndKey(event) {
+    var listElement = getListElement();
+    if (event.ctrlKey && event.shiftKey) {
+      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;
+      });
+      setSelectionState(_toConsumableArray(visibleList).slice(matchedOptionIndex, items.length));
+    } else {
+      changeFocusedOptionIndex(utils.DomHandler.find(listElement, '[data-pc-section="item"]').length - 1);
+    }
+    event.preventDefault();
+  };
+  var onEnterKey = function onEnterKey(event) {
+    var listElement = getListElement();
+    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;
+    });
+    onItemClick({
+      originalEvent: event,
+      value: visibleList[matchedOptionIndex],
+      index: matchedOptionIndex
+    });
+    event.preventDefault();
+  };
+  var onSpaceKey = function onSpaceKey(event) {
+    event.preventDefault();
+    var listElement = getListElement();
+    if (event.shiftKey && selectionState && selectionState.length > 0) {
+      var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+      var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectionState[0], _toConsumableArray(visibleList));
+      var focusedItem = utils.DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=".concat(focusedOptionIndex, "]"));
+      var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+        return item === focusedItem;
+      });
+      setSelectionState(_toConsumableArray(visibleList).slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1));
+    } else {
+      onEnterKey(event);
+    }
+  };
+  var findNextOptionIndex = function findNextOptionIndex(index) {
+    var listElement = getListElement();
+    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) {
+    var listElement = getListElement();
+    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) {
+    var listElement = getListElement();
+    var items = utils.DomHandler.find(listElement, '[data-pc-section="item"]');
+    var order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
+    var _focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
+    setFocusedOptionIndex(_focusedOptionIndex);
+    scrollInView(_focusedOptionIndex);
+  };
+  var scrollInView = function scrollInView(id) {
+    var listElement = getListElement();
+    var element = utils.DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=\"".concat(id, "\"]"));
+    if (element) {
+      element.scrollIntoView && element.scrollIntoView({
+        block: 'nearest',
+        inline: 'start'
+      });
     }
   };
   var onFilter = function onFilter(event) {
@@ -719,22 +902,6 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       });
     }
   };
-  var getVisibleList = function getVisibleList() {
-    if (hasFilter) {
-      var filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
-      var searchFields = props.filterBy ? props.filterBy.split(',') : [];
-      return PrimeReact.FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
-    }
-    return props.value;
-  };
-  var findNextItem = function findNextItem(item) {
-    var nextItem = item.nextElementSibling;
-    return nextItem ? !utils.DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item' ? findNextItem(nextItem) : nextItem : null;
-  };
-  var findPrevItem = function findPrevItem(item) {
-    var prevItem = item.previousElementSibling;
-    return prevItem ? !utils.DomHandler.getAttribute(prevItem, 'data-pc-section') === 'item' ? findPrevItem(prevItem) : prevItem : null;
-  };
   var onReorder = function onReorder(event) {
     if (props.onChange) {
       props.onChange({
@@ -744,32 +911,9 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
     reorderDirection.current = event.direction;
   };
-  var updateListScroll = function updateListScroll() {
-    var list = utils.DomHandler.findSingle(elementRef.current, '.p-orderlist-list');
-    var listItems = utils.DomHandler.find(list, '.p-orderlist-item.p-highlight');
-    if (listItems && listItems.length) {
-      switch (reorderDirection.current) {
-        case 'up':
-          utils.DomHandler.scrollInView(list, listItems[0]);
-          break;
-        case 'top':
-          list.scrollTop = 0;
-          break;
-        case 'down':
-          utils.DomHandler.scrollInView(list, listItems[listItems.length - 1]);
-          break;
-        case 'bottom':
-          /* TODO: improve this code block */
-          setTimeout(function () {
-            return list.scrollTop = list.scrollHeight;
-          }, 100);
-          break;
-      }
-    }
-  };
   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-orderlist[").concat(attributeSelectorState, "] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[").concat(attributeSelectorState, "] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");
       styleElementRef.current.innerHTML = innerHTML;
     }
@@ -797,13 +941,15 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       destroyStyle();
     };
   }, [attributeSelectorState, props.breakpoint]);
+  hooks.useUpdateEffect(function () {
+    var _focusedOptionId = focusedOptionIndex !== -1 ? focusedOptionIndex : null;
+    setFocusedOptionId(_focusedOptionId);
+  }, [focusedOptionIndex]);
   hooks.useUpdateEffect(function () {
     if (reorderDirection.current) {
-      updateListScroll();
       reorderDirection.current = null;
     }
   });
-  var visibleList = getVisibleList();
   var rootProps = utils.mergeProps({
     ref: elementRef,
     id: props.id,
@@ -825,11 +971,19 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     unstyled: props.unstyled,
     metaData: metaData
   }), /*#__PURE__*/React__namespace.createElement(OrderListSubList, {
+    ref: listElementRef,
     hostName: "OrderList",
+    focused: focused,
+    ariaLabel: props.ariaLabel,
+    ariaLabelledBy: props.ariaLabelledBy,
     value: visibleList,
     selection: selectionState,
     onItemClick: onItemClick,
-    onItemKeyDown: onItemKeyDown,
+    onOptionMouseDown: onOptionMouseDown,
+    focusedOptionId: focusedOptionId,
+    onListKeyDown: onListKeyDown,
+    onListFocus: onListFocus,
+    onListBlur: onListBlur,
     onFilterInputChange: onFilterInputChange,
     itemTemplate: props.itemTemplate,
     filter: props.filter,
@@ -837,6 +991,7 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     resetFilter: resetFilter,
     filterTemplate: props.filterTemplate,
     header: props.header,
+    parentId: attributeSelectorState,
     listStyle: props.listStyle,
     dataKey: props.dataKey,
     dragdrop: props.dragdrop,

package/orderlist/orderlist.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),r=require("primereact/componentbase"),n=require("primereact/hooks"),o=require("primereact/utils"),i=require("primereact/button"),l=require("primereact/icons/angledoubledown"),a=require("primereact/icons/angledoubleup"),c=require("primereact/icons/angledown"),u=require("primereact/icons/angleup"),s=require("primereact/icons/search"),p=require("primereact/ripple");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function m(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var f=m(e),v=d(t);function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function y(e){if(Array.isArray(e))return g(e)}function b(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function h(e,t){if(e){if("string"==typeof e)return g(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?g(e,t):void 0}}function I(){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 E(e){return y(e)||b(e)||h(e)||I()}function O(e){if(Array.isArray(e))return e}function D(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,l,a=[],c=!0,u=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(a.push(n.value),a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(u)throw o}}return a}}function w(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function x(e,t){return O(e)||D(e,t)||h(e,t)||w()}var S=r.ComponentBase.extend({defaultProps:{__TYPE:"OrderList",id:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,filterIcon:null,moveUpIcon:null,moveTopIcon:null,moveDownIcon:null,moveBottomIcon:null,dataKey:null,breakpoint:"960px",onChange:null,itemTemplate:null,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,filterPlaceholder:null,filterTemplate:null,onFilter:null,children:void 0},css:{classes:{root:"p-orderlist p-component",controls:"p-orderlist-controls",droppoint:"p-orderlist-droppoint",header:"p-orderlist-header",list:"p-orderlist-list",icon:"p-orderlist-filter",filter:"p-orderlist-filter",filterInput:"p-orderlist-filter-input p-inputtext p-component",filterIcon:"p-orderlist-filter-icon",filterContainer:"p-orderlist-filter-container",container:"p-orderlist-list-container",item:function(e){return o.classNames("p-orderlist-item",{"p-highlight":(0,e.isSelected)(e.item)})}},styles:"\n@layer primereact {\n    .p-orderlist {\n        display: flex;\n    }\n    \n    .p-orderlist-controls {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n    \n    .p-orderlist-list-container {\n        flex: 1 1 auto;\n    }\n    \n    .p-orderlist-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-orderlist-item {\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-orderlist-filter {\n        position: relative;\n    }\n    \n    .p-orderlist-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-orderlist-filter-input {\n        width: 100%;\n    }\n    \n    .p-orderlist.p-state-disabled .p-orderlist-item,\n    .p-orderlist.p-state-disabled .p-button {\n        cursor: default;\n    }\n    \n    .p-orderlist.p-state-disabled .p-orderlist-list {\n        overflow: hidden;\n    }\n    \n    .p-orderlist .p-orderlist-droppoint {\n        height: 0.5rem;\n    }\n    \n    .p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {\n        background: var(--primary-color);\n    }\n}\n"}});function j(){return j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},j.apply(this,arguments)}var P=f.memo((function(e){var r=e.moveUpIcon||f.createElement(u.AngleUpIcon,null),n=e.moveTopIcon||f.createElement(a.AngleDoubleUpIcon,null),s=e.moveDownIcon||f.createElement(c.AngleDownIcon,null),p=e.moveBottomIcon||f.createElement(l.AngleDoubleDownIcon,null),d=e.ptm,m=e.unstyled,v=o.mergeProps({className:(0,e.cx)("controls")},d("controls",{hostName:e.hostName})),g=o.mergeProps({type:"button",unstyled:m,icon:r,onClick:function(t){if(e.selection){for(var r=E(e.value),n=0;n<e.selection.length;n++){var i=o.ObjectUtils.findIndexInList(e.selection[n],r,e.dataKey);if(0===i)break;var l=r[i-1];r[i-1]=r[i],r[i]=l}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"up"})}},"aria-label":t.ariaLabel("moveUp"),__parentMetadata:{parent:e.metaData}},d("moveUpButton")),y=o.mergeProps({type:"button",unstyled:m,icon:n,onClick:function(t){if(e.selection){for(var r=E(e.value),n=e.selection.length-1;n>=0;n--){var i=o.ObjectUtils.findIndexInList(e.selection[n],r,e.dataKey);if(0===i)break;var l=r.splice(i,1)[0];r.unshift(l)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"top"})}},"aria-label":t.ariaLabel("moveTop"),__parentMetadata:{parent:e.metaData}},d("moveTopButton")),b=o.mergeProps({type:"button",unstyled:m,icon:s,onClick:function(t){if(e.selection){for(var r=E(e.value),n=e.selection.length-1;n>=0;n--){var i=o.ObjectUtils.findIndexInList(e.selection[n],r,e.dataKey);if(i===r.length-1)break;var l=r[i+1];r[i+1]=r[i],r[i]=l}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"down"})}},"aria-label":t.ariaLabel("moveDown"),__parentMetadata:{parent:e.metaData}},d("moveDownButton")),h=o.mergeProps({type:"button",unstyled:m,icon:p,onClick:function(t){if(e.selection){for(var r=E(e.value),n=0;n<e.selection.length;n++){var i=o.ObjectUtils.findIndexInList(e.selection[n],r,e.dataKey);if(i===r.length-1)break;var l=r.splice(i,1)[0];r.push(l)}e.onReorder&&e.onReorder({originalEvent:t,value:r,direction:"bottom"})}},"aria-label":t.ariaLabel("moveBottom"),__parentMetadata:{parent:e.metaData}},d("moveBottomButton"));return f.createElement("div",v,f.createElement(i.Button,j({pt:d("moveUpButton")},g)),f.createElement(i.Button,j({pt:d("moveTopButton")},y)),f.createElement(i.Button,j({pt:d("moveDownButton")},b)),f.createElement(i.Button,j({pt:d("moveBottomButton")},h)))}));function C(e){return C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},C(e)}function N(e,t){if("object"!==C(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==C(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function T(e){var t=N(e,"string");return"symbol"===C(t)?t:String(t)}function k(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function U(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?k(Object(r),!0).forEach((function(t){var n,o,i;n=e,i=r[t],(o=T(o=t))in n?Object.defineProperty(n,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):k(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}P.displayName="OrderListControls";var L=f.memo((function(e){var t,r,n,i=e.ptm,l=e.cx,a=function(t,r){return i(t,U({hostName:e.hostName},r))},c=function(e,t){return a(t,{context:{selected:y(e)}})},u=f.useRef(null),d=f.useRef(null),m=f.useRef(null),v=f.useRef(null),g={filter:function(t){return e.onFilterInputChange(t)},reset:function(){return e.resetFilter()}},y=function(t){return-1!==o.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},b=function(t,r){d.current!==r&&d.current+1!==r&&(m.current=r,!e.isUnstyled()&&o.DomHandler.addClass(t.target,"p-orderlist-droppoint-highlight"),t.target.setAttribute("data-p-orderlist-droppoint-highlight",!0),t.preventDefault())},h=function(t){m.current=null,!e.isUnstyled()&&o.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),t.target.setAttribute("data-p-orderlist-droppoint-highlight",!1)},I=function(t){var r=d.current>m.current?m.current:0===m.current?0:m.current-1,n=E(e.value);o.ObjectUtils.reorderArray(n,d.current,r),m.current=null,!e.isUnstyled()&&o.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),t.target.setAttribute("data-p-orderlist-droppoint-highlight",!1),e.onChange&&e.onChange({originalEvent:t,value:n})},O=function(e){u.current=!1},D=function(e){if(u.current){var t=v.current.getBoundingClientRect().top+o.DomHandler.getWindowScrollTop(),r=t+v.current.clientHeight-e.pageY,n=e.pageY-t;r<25&&r>0?v.current.scrollTop+=15:n<25&&n>0&&(v.current.scrollTop-=15)}},w=function(e){13===e.which&&e.preventDefault()},x=function(e,t){var r=o.mergeProps({className:l("droppoint"),onDragOver:function(t){return b(t,e+1)},onDragLeave:h,onDrop:I},a("droppoint"));return f.createElement("li",j({key:t},r))},S=(t=o.mergeProps({className:l("header")},a("header")),e.header?f.createElement("div",t,e.header):null),P=function(){var t=o.mergeProps({className:l("icon")},a("icon")),r=o.IconUtils.getJSXIcon(e.filterIcon||f.createElement(s.SearchIcon,t),U({},t),{props:e});if(e.filter){var n=o.mergeProps({className:l("filter")},a("filter")),i=o.mergeProps({type:"text",value:e.filterValue,onChange:e.onFilter,onKeyDown:w,placeholder:e.placeholder,className:l("filterInput")},a("filterInput")),c=o.mergeProps({className:l("filterIcon")},a("filterIcon")),u=f.createElement("div",n,f.createElement("input",i),f.createElement("span",c,r));if(e.filterTemplate)u=o.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-orderlist-filter",inputProps:{inputClassName:"p-orderlist-filter-input p-inputtext p-component",onChange:e.onFilter,onKeyDown:w},filterOptions:g,iconClassName:"p-orderlist-filter-icon",element:u,props:e});var p=o.mergeProps({className:l("filterContainer")},a("filterContainer"));return f.createElement("div",p,u)}return null}(),C=(r=e.value?e.value.map((function(t,r){var n=e.itemTemplate?e.itemTemplate(t):t,i=JSON.stringify(t);if(e.dragdrop){var a=o.mergeProps({className:o.classNames(e.className,l("item",{item:t,isSelected:y})),onClick:function(n){return e.onItemClick({originalEvent:n,value:t,index:r})},onKeyDown:function(n){return e.onItemKeyDown({originalEvent:n,value:t,index:r})},role:"option","aria-selected":y(t),draggable:"true",onDragStart:function(e){return t=r,e.dataTransfer.setData("text","orderlist"),u.current=!0,void(d.current=t);var t},onDragEnd:O,tabIndex:e.tabIndex,"data-p-highlight":y(t)},c(t,"item")),s=[];return 0===r&&s.push(x(t,r)),s.push(f.createElement("li",j({key:i},a),n)),s.push(x(r,i+"_droppoint")),s}var m=o.mergeProps({role:"option",tabIndex:e.tabIndex,className:o.classNames(e.className,l("item",{item:t,isSelected:y})),onClick:function(n){return e.onItemClick({originalEvent:n,value:t,index:r})},onKeyDown:function(n){return e.onItemKeyDown({originalEvent:n,value:t,index:r})},"aria-selected":y(t),"data-p-highlight":y(t)},c(t,"item"));return f.createElement("li",j({key:i},m),n,f.createElement(p.Ripple,null))})):null,n=o.mergeProps({ref:v,className:l("list"),style:e.listStyle,onDragOver:D,role:"listbox","aria-multiselectable":!0},a("list")),f.createElement("ul",n,r)),N=o.mergeProps({className:l("container")},a("container"));return f.createElement("div",N,S,P,C)}));L.displayName="OrderListSubList";var B=f.memo(f.forwardRef((function(e,i){var l=f.useContext(t.PrimeReactContext),a=S.getProps(e,l),c=x(f.useState([]),2),u=c[0],s=c[1],p=x(f.useState(""),2),d=p[0],m=p[1],g=x(f.useState(null),2),y=g[0],b=g[1],h=o.ObjectUtils.isNotEmpty(d),I=f.useRef(null),O=f.useRef(null),D=f.useRef(null),w={props:a,state:{selection:u,filterValue:d,attributeSelector:y}},j=S.setMetaData(w),C=j.ptm,N=j.cx,T=j.isUnstyled;r.useHandleStyle(S.css.styles,T,{name:"orderlist"});var k=function(e){var t,r=e.originalEvent.metaKey||e.originalEvent.ctrlKey,n=o.ObjectUtils.findIndexInList(e.value,u,a.dataKey);t=-1!==n?r?u.filter((function(e,t){return t!==n})):[e.value]:r?[].concat(E(u),[e.value]):[e.value],s(t)},U=function e(t){var r=t.nextElementSibling;return r?"item"===!o.DomHandler.getAttribute(r,"data-pc-section")?e(r):r:null},B=function e(t){var r=t.previousElementSibling;return r?"item"===!o.DomHandler.getAttribute(r,"data-pc-section")?e(r):r:null},A=function(){var e=o.DomHandler.findSingle(I.current,".p-orderlist-list"),t=o.DomHandler.find(e,".p-orderlist-item.p-highlight");if(t&&t.length)switch(D.current){case"up":o.DomHandler.scrollInView(e,t[0]);break;case"top":e.scrollTop=0;break;case"down":o.DomHandler.scrollInView(e,t[t.length-1]);break;case"bottom":setTimeout((function(){return e.scrollTop=e.scrollHeight}),100)}},K=function(){if(!O.current){O.current=o.DomHandler.createInlineStyle(l&&l.nonce||v.default.nonce);var e="\n@media screen and (max-width: ".concat(a.breakpoint,") {\n    .p-orderlist[").concat(y,"] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[").concat(y,"] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[").concat(y,"] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[").concat(y,"] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");O.current.innerHTML=e}};f.useImperativeHandle(i,(function(){return{props:a,getElement:function(){return I.current}}})),n.useMountEffect((function(){!y&&b(o.UniqueComponentId())})),n.useUpdateEffect((function(){return y&&(I.current.setAttribute(y,""),K()),function(){O.current=o.DomHandler.removeInlineStyle(O.current)}}),[y,a.breakpoint]),n.useUpdateEffect((function(){D.current&&(A(),D.current=null)}));var R=function(){if(h){var e=d.trim().toLocaleLowerCase(a.filterLocale),r=a.filterBy?a.filterBy.split(","):[];return t.FilterService.filter(a.value,r,e,a.filterMatchMode,a.filterLocale)}return a.value}(),H=o.mergeProps({ref:I,id:a.id,className:o.classNames(a.className,N("root")),style:a.style},S.getOtherProps(a),C("root"));return f.createElement("div",H,f.createElement(P,{hostName:"OrderList",value:R,selection:u,onReorder:function(e){a.onChange&&a.onChange({event:e.originalEvent,value:e.value}),D.current=e.direction},dataKey:a.dataKey,moveUpIcon:a.moveUpIcon,moveTopIcon:a.moveTopIcon,moveDownIcon:a.moveDownIcon,moveBottomIcon:a.moveBottomIcon,ptm:C,cx:N,unstyled:a.unstyled,metaData:w}),f.createElement(L,{hostName:"OrderList",value:R,selection:u,onItemClick:k,onItemKeyDown:function(e){var t=e.originalEvent,r=t.currentTarget;switch(t.which){case 40:var n=U(r);n&&n.focus(),t.preventDefault();break;case 38:var o=B(r);o&&o.focus(),t.preventDefault();break;case 13:k(e),t.preventDefault()}},onFilterInputChange:function(e){var t=e.target.value;m(t),a.onFilter&&a.onFilter({originalEvent:e,filter:t})},itemTemplate:a.itemTemplate,filter:a.filter,onFilter:function(e){var t=e.target.value;m(t),a.onFilter&&a.onFilter({originalEvent:e,value:t})},resetFilter:function(){m(""),a.onFilter&&a.onFilter({filter:""})},filterTemplate:a.filterTemplate,header:a.header,listStyle:a.listStyle,dataKey:a.dataKey,dragdrop:a.dragdrop,onChange:a.onChange,tabIndex:a.tabIndex,filterIcon:a.filterIcon,isUnstyled:T,ptm:C,cx:N}))})));B.displayName="OrderList",exports.OrderList=B;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),r=require("primereact/hooks"),o=require("primereact/utils"),i=require("primereact/button"),l=require("primereact/icons/angledoubledown"),a=require("primereact/icons/angledoubleup"),c=require("primereact/icons/angledown"),u=require("primereact/icons/angleup"),s=require("primereact/icons/search"),d=require("primereact/ripple");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function f(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var m=f(e),v=p(t);function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function b(e){if(Array.isArray(e))return g(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function h(e,t){if(e){if("string"==typeof e)return g(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}function I(){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 D(e){return b(e)||y(e)||h(e)||I()}function O(e){if(Array.isArray(e))return e}function E(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,l,a=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(a.push(r.value),a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw o}}return a}}function w(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function x(e,t){return O(e)||E(e,t)||h(e,t)||w()}var S=n.ComponentBase.extend({defaultProps:{__TYPE:"OrderList",id:null,ariaLabel:null,ariaLabelledBy:null,value:null,header:null,style:null,className:null,listStyle:null,dragdrop:!1,tabIndex:0,filterIcon:null,moveUpIcon:null,moveTopIcon:null,moveDownIcon:null,moveBottomIcon:null,dataKey:null,breakpoint:"960px",onChange:null,itemTemplate:null,filter:!1,filterBy:null,filterMatchMode:"contains",filterLocale:void 0,filterPlaceholder:null,filterTemplate:null,onFilter:null,children:void 0},css:{classes:{root:"p-orderlist p-component",controls:"p-orderlist-controls",droppoint:"p-orderlist-droppoint",header:"p-orderlist-header",list:"p-orderlist-list",icon:"p-orderlist-filter",filter:"p-orderlist-filter",filterInput:"p-orderlist-filter-input p-inputtext p-component",filterIcon:"p-orderlist-filter-icon",filterContainer:"p-orderlist-filter-container",container:"p-orderlist-list-container",item:function(e){return o.classNames("p-orderlist-item",{"p-highlight":e.selected,"p-focus":e.focused})}},styles:"\n@layer primereact {\n    .p-orderlist {\n        display: flex;\n    }\n\n    .p-orderlist-controls {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n    }\n\n    .p-orderlist-list-container {\n        flex: 1 1 auto;\n    }\n\n    .p-orderlist-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-orderlist-item {\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-orderlist-filter {\n        position: relative;\n    }\n\n    .p-orderlist-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n\n    .p-orderlist-filter-input {\n        width: 100%;\n    }\n\n    .p-orderlist.p-state-disabled .p-orderlist-item,\n    .p-orderlist.p-state-disabled .p-button {\n        cursor: default;\n    }\n\n    .p-orderlist.p-state-disabled .p-orderlist-list {\n        overflow: hidden;\n    }\n\n    .p-orderlist .p-orderlist-droppoint {\n        height: 0.5rem;\n    }\n\n    .p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {\n        background: var(--primary-color);\n    }\n}\n"}});function j(){return j=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},j.apply(this,arguments)}var L=m.memo((function(e){var n=e.moveUpIcon||m.createElement(u.AngleUpIcon,null),r=e.moveTopIcon||m.createElement(a.AngleDoubleUpIcon,null),s=e.moveDownIcon||m.createElement(c.AngleDownIcon,null),d=e.moveBottomIcon||m.createElement(l.AngleDoubleDownIcon,null),p=e.ptm,f=e.cx,v=e.unstyled,g=o.ObjectUtils.isEmpty(e.value)||o.ObjectUtils.isEmpty(e.selection),b=o.mergeProps({className:f("controls")},p("controls",{hostName:e.hostName})),y=o.mergeProps({type:"button",unstyled:v,icon:n,onClick:function(t){if(e.selection){for(var n=D(e.value),r=0;r<e.selection.length;r++){var i=o.ObjectUtils.findIndexInList(e.selection[r],n,e.dataKey);if(0===i)break;var l=n[i-1];n[i-1]=n[i],n[i]=l}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"up"})}},disabled:g,"aria-label":t.ariaLabel("moveUp"),__parentMetadata:{parent:e.metaData}},p("moveUpButton")),h=o.mergeProps({type:"button",unstyled:v,icon:r,onClick:function(t){if(e.selection){for(var n=D(e.value),r=e.selection.length-1;r>=0;r--){var i=o.ObjectUtils.findIndexInList(e.selection[r],n,e.dataKey);if(0===i)break;var l=n.splice(i,1)[0];n.unshift(l)}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"top"})}},disabled:g,"aria-label":t.ariaLabel("moveTop"),__parentMetadata:{parent:e.metaData}},p("moveTopButton")),I=o.mergeProps({type:"button",unstyled:v,icon:s,onClick:function(t){if(e.selection){for(var n=D(e.value),r=e.selection.length-1;r>=0;r--){var i=o.ObjectUtils.findIndexInList(e.selection[r],n,e.dataKey);if(i===n.length-1)break;var l=n[i+1];n[i+1]=n[i],n[i]=l}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"down"})}},disabled:g,"aria-label":t.ariaLabel("moveDown"),__parentMetadata:{parent:e.metaData}},p("moveDownButton")),O=o.mergeProps({type:"button",unstyled:v,icon:d,onClick:function(t){if(e.selection){for(var n=D(e.value),r=0;r<e.selection.length;r++){var i=o.ObjectUtils.findIndexInList(e.selection[r],n,e.dataKey);if(i===n.length-1)break;var l=n.splice(i,1)[0];n.push(l)}e.onReorder&&e.onReorder({originalEvent:t,value:n,direction:"bottom"})}},disabled:g,"aria-label":t.ariaLabel("moveBottom"),__parentMetadata:{parent:e.metaData}},p("moveBottomButton"));return m.createElement("div",b,m.createElement(i.Button,j({pt:p("moveUpButton")},y)),m.createElement(i.Button,j({pt:p("moveTopButton")},h)),m.createElement(i.Button,j({pt:p("moveDownButton")},I)),m.createElement(i.Button,j({pt:p("moveBottomButton")},O)))}));function P(e){return P="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},P(e)}function C(e,t){if("object"!==P(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==P(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function N(e){var t=C(e,"string");return"symbol"===P(t)?t:String(t)}function U(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function B(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?U(Object(n),!0).forEach((function(t){var r,o,i;r=e,i=n[t],(o=N(o=t))in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):U(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}L.displayName="OrderListControls";var k=m.memo(m.forwardRef((function(e,t){var n=e.ptm,r=e.cx,i=function(t,r){return n(t,B({hostName:e.hostName},r))},l=function(e,t){return i(t,{context:{selected:v(e)}})},a=m.useRef(null),c=m.useRef(null),u=m.useRef(null),p=m.useRef(null),f={filter:function(t){return e.onFilterInputChange(t)},reset:function(){return e.resetFilter()}},v=function(t){return-1!==o.ObjectUtils.findIndexInList(t,e.selection,e.dataKey)},g=function(t,n){c.current!==n&&c.current+1!==n&&(u.current=n,!e.isUnstyled()&&o.DomHandler.addClass(t.target,"p-orderlist-droppoint-highlight"),t.target.setAttribute("data-p-orderlist-droppoint-highlight",!0),t.preventDefault())},b=function(t){u.current=null,!e.isUnstyled()&&o.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),t.target.setAttribute("data-p-orderlist-droppoint-highlight",!1)},y=function(t){var n=c.current>u.current?u.current:0===u.current?0:u.current-1,r=D(e.value);o.ObjectUtils.reorderArray(r,c.current,n),u.current=null,!e.isUnstyled()&&o.DomHandler.removeClass(t.target,"p-orderlist-droppoint-highlight"),t.target.setAttribute("data-p-orderlist-droppoint-highlight",!1),e.onChange&&e.onChange({originalEvent:t,value:r})},h=function(e){a.current=!1},I=function(e){if(a.current){var t=p.current.getBoundingClientRect().top+o.DomHandler.getWindowScrollTop(),n=t+p.current.clientHeight-e.pageY,r=e.pageY-t;n<25&&n>0?p.current.scrollTop+=15:r<25&&r>0&&(p.current.scrollTop-=15)}},O=function(e){13===e.which&&e.preventDefault()},E=function(e,t){var n=o.mergeProps({className:r("droppoint"),onDragOver:function(t){return g(t,e+1)},onDragLeave:b,onDrop:y},i("droppoint"));return m.createElement("li",j({key:t},n))};m.useImperativeHandle(t,(function(){return{getElement:function(){return p.current}}}));var w,x,S,L=(w=o.mergeProps({className:r("header")},i("header")),e.header?m.createElement("div",w,e.header):null),P=function(){var t=o.mergeProps({className:r("icon")},i("icon")),n=o.IconUtils.getJSXIcon(e.filterIcon||m.createElement(s.SearchIcon,t),B({},t),{props:e});if(e.filter){var l=o.mergeProps({className:r("filter")},i("filter")),a=o.mergeProps({type:"text",value:e.filterValue,onChange:e.onFilter,onKeyDown:O,placeholder:e.placeholder,className:r("filterInput")},i("filterInput")),c=o.mergeProps({className:r("filterIcon")},i("filterIcon")),u=m.createElement("div",l,m.createElement("input",a),m.createElement("span",c,n));if(e.filterTemplate)u=o.ObjectUtils.getJSXElement(e.filterTemplate,{className:"p-orderlist-filter",inputProps:{inputClassName:"p-orderlist-filter-input p-inputtext p-component",onChange:e.onFilter,onKeyDown:O},filterOptions:f,iconClassName:"p-orderlist-filter-icon",element:u,props:e});var d=o.mergeProps({className:r("filterContainer")},i("filterContainer"));return m.createElement("div",d,u)}return null}(),C=(x=e.value?e.value.map((function(t,n){var i=e.itemTemplate?e.itemTemplate(t):t,u=e.parentId+"_"+n,s=e.focused&&e.focusedOptionId===u,p=v(t);if(e.dragdrop){var f=o.mergeProps({id:u,role:"option",draggable:"true",onClick:function(r){return e.onItemClick({originalEvent:r,value:t,index:n})},onMouseDown:e.onOptionMouseDown,onDragStart:function(e){return t=n,e.dataTransfer.setData("text","orderlist"),a.current=!0,void(c.current=t);var t},onDragEnd:h,className:o.classNames(e.className,r("item",{selected:p,focused:s})),"aria-selected":p,"data-p-highlight":p,"data-p-focused":s},l(t,"item")),g=[];return 0===n&&g.push(E(t,n)),g.push(m.createElement("li",j({key:u},f),i)),g.push(E(n,u+"_droppoint")),g}var b=o.mergeProps({id:u,role:"option",onClick:function(r){return e.onItemClick({originalEvent:r,value:t,index:n})},onMouseDown:e.onOptionMouseDown,className:o.classNames(e.className,r("item",{selected:p,focused:s})),"aria-selected":p,"data-p-highlight":p,"data-p-focused":s},l(t,"item"));return m.createElement("li",j({key:u},b),i,m.createElement(d.Ripple,null))})):null,S=o.mergeProps({ref:p,className:r("list"),style:e.listStyle,onDragOver:I,role:"listbox",onFocus:e.onListFocus,onBlur:e.onListBlur,onKeyDown:e.onListKeyDown,tabIndex:e.tabIndex,"aria-activedescendant":e.focused?e.focusedOptionId:null,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-multiselectable":!0},i("list")),m.createElement("ul",S,x)),N=o.mergeProps({className:r("container")},i("container"));return m.createElement("div",N,L,P,C)})));k.displayName="OrderListSubList";var H=m.memo(m.forwardRef((function(e,i){var l=m.useContext(t.PrimeReactContext),a=S.getProps(e,l),c=x(m.useState([]),2),u=c[0],s=c[1],d=x(m.useState(""),2),p=d[0],f=d[1],g=x(m.useState(null),2),b=g[0],y=g[1],h=x(m.useState(!1),2),I=h[0],O=h[1],E=x(m.useState(null),2),w=E[0],j=E[1],P=x(m.useState(-1),2),C=P[0],N=P[1],U=o.ObjectUtils.isNotEmpty(p),B=m.useRef(null),H=m.useRef(null),K=m.useRef(null),T=m.useRef(null),A={props:a,state:{selection:u,filterValue:p,attributeSelector:b}},R=S.setMetaData(A),M=R.ptm,F=R.cx,_=R.isUnstyled;n.useHandleStyle(S.css.styles,_,{name:"orderlist"});var q=function(){if(U){var e=p.trim().toLocaleLowerCase(a.filterLocale),n=a.filterBy?a.filterBy.split(","):[];return t.FilterService.filter(a.value,n,e,a.filterMatchMode,a.filterLocale)}return a.value}(),V=function(){return T.current&&T.current.getElement()},Y=function(e){var t=e.originalEvent,n=e.value,r=e.index,i=o.ObjectUtils.findIndexInList(n,u),l=V(),a=o.DomHandler.find(l,'[data-pc-section="item"]')[r].getAttribute("id");N(a);var c,d=t.metaKey||t.ctrlKey;c=-1!==i?d?u.filter((function(e,t){return t!==i})):[n]:d?[].concat(D(u),[n]):[n],s(c)},J=function(e){var t=q[e],n=-1!==o.ObjectUtils.findIndexInList(t,u);s(n?u.filter((function(e){return e!==t})):[].concat(D(u),[t]))},X=function(e){var t=Z(C);te(t),e.shiftKey&&J(t),e.preventDefault()},z=function(e){var t=ee(C);te(t),e.shiftKey&&J(t),e.preventDefault()},W=function(e){if(e.ctrlKey&&e.shiftKey){var t=V(),n=o.DomHandler.find(t,'[data-pc-section="item"]'),r=o.DomHandler.findSingle(t,'[data-pc-section="item"][id='.concat(C,"]")),i=D(n).findIndex((function(e){return e===r}));s(D(q).slice(0,i+1))}else te(0);e.preventDefault()},$=function(e){var t=V();if(e.ctrlKey&&e.shiftKey){var n=o.DomHandler.find(t,'[data-pc-section="item"]'),r=o.DomHandler.findSingle(t,'[data-pc-section="item"][id='.concat(C,"]")),i=D(n).findIndex((function(e){return e===r}));s(D(q).slice(i,n.length))}else te(o.DomHandler.find(t,'[data-pc-section="item"]').length-1);e.preventDefault()},G=function(e){var t=V(),n=o.DomHandler.find(t,'[data-pc-section="item"]'),r=o.DomHandler.findSingle(t,'[data-pc-section="item"][id='.concat(C,"]")),i=D(n).findIndex((function(e){return e===r}));Y({originalEvent:e,value:q[i],index:i}),e.preventDefault()},Q=function(e){e.preventDefault();var t=V();if(e.shiftKey&&u&&u.length>0){var n=o.DomHandler.find(t,'[data-pc-section="item"]'),r=o.ObjectUtils.findIndexInList(u[0],D(q)),i=o.DomHandler.findSingle(t,'[data-pc-section="item"][id='.concat(C,"]")),l=D(n).findIndex((function(e){return e===i}));s(D(q).slice(Math.min(r,l),Math.max(r,l)+1))}else G(e)},Z=function(e){var t=V(),n=D(o.DomHandler.find(t,'[data-pc-section="item"]')).findIndex((function(t){return t.id===e}));return n>-1?n+1:0},ee=function(e){var t=V(),n=D(o.DomHandler.find(t,'[data-pc-section="item"]')).findIndex((function(t){return t.id===e}));return n>-1?n-1:0},te=function(e){var t=V(),n=o.DomHandler.find(t,'[data-pc-section="item"]'),r=e>=n.length?n.length-1:e<0?0:e,i=n[r]?n[r].getAttribute("id"):-1;N(i),ne(i)},ne=function(e){var t=V(),n=o.DomHandler.findSingle(t,'[data-pc-section="item"][id="'.concat(e,'"]'));n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest",inline:"start"})},re=function(){if(!H.current){H.current=o.DomHandler.createInlineStyle(l&&l.nonce||v.default.nonce,l&&l.styleContainer);var e="\n@media screen and (max-width: ".concat(a.breakpoint,") {\n    .p-orderlist[").concat(b,"] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[").concat(b,"] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[").concat(b,"] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[").concat(b,"] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");H.current.innerHTML=e}};m.useImperativeHandle(i,(function(){return{props:a,getElement:function(){return B.current}}})),r.useMountEffect((function(){!b&&y(o.UniqueComponentId())})),r.useUpdateEffect((function(){return b&&(B.current.setAttribute(b,""),re()),function(){H.current=o.DomHandler.removeInlineStyle(H.current)}}),[b,a.breakpoint]),r.useUpdateEffect((function(){j(-1!==C?C:null)}),[C]),r.useUpdateEffect((function(){K.current&&(K.current=null)}));var oe=o.mergeProps({ref:B,id:a.id,className:o.classNames(a.className,F("root")),style:a.style},S.getOtherProps(a),M("root"));return m.createElement("div",oe,m.createElement(L,{hostName:"OrderList",value:q,selection:u,onReorder:function(e){a.onChange&&a.onChange({event:e.originalEvent,value:e.value}),K.current=e.direction},dataKey:a.dataKey,moveUpIcon:a.moveUpIcon,moveTopIcon:a.moveTopIcon,moveDownIcon:a.moveDownIcon,moveBottomIcon:a.moveBottomIcon,ptm:M,cx:F,unstyled:a.unstyled,metaData:A}),m.createElement(k,{ref:T,hostName:"OrderList",focused:I,ariaLabel:a.ariaLabel,ariaLabelledBy:a.ariaLabelledBy,value:q,selection:u,onItemClick:Y,onOptionMouseDown:function(e){O(!0),N(e)},focusedOptionId:w,onListKeyDown:function(e){switch(e.code){case"ArrowDown":X(e);break;case"ArrowUp":z(e);break;case"Home":W(e);break;case"End":$(e);break;case"Enter":case"NumpadEnter":G(e);break;case"Space":Q(e);break;case"KeyA":e.ctrlKey&&(s(q),e.preventDefault())}},onListFocus:function(e){var t=V(),n=o.DomHandler.findSingle(t,'[data-p-highlight="true"]')||o.DomHandler.findSingle(t,'[data-pc-section="item"]'),r=t&&t.children?D(t.children):[];if(n&&r.length>0){var i=o.ObjectUtils.findIndexInList(n,r);O(!0),te(-1!==C?C:n?i:-1),a.onFocus&&a.onFocus(e)}},onListBlur:function(e){O(!1),N(-1),a.onBlur&&a.onBlur(e)},onFilterInputChange:function(e){var t=e.target.value;f(t),a.onFilter&&a.onFilter({originalEvent:e,filter:t})},itemTemplate:a.itemTemplate,filter:a.filter,onFilter:function(e){var t=e.target.value;f(t),a.onFilter&&a.onFilter({originalEvent:e,value:t})},resetFilter:function(){f(""),a.onFilter&&a.onFilter({filter:""})},filterTemplate:a.filterTemplate,header:a.header,parentId:b,listStyle:a.listStyle,dataKey:a.dataKey,dragdrop:a.dragdrop,onChange:a.onChange,tabIndex:a.tabIndex,filterIcon:a.filterIcon,isUnstyled:_,ptm:M,cx:F}))})));H.displayName="OrderList",exports.OrderList=H;

package/orderlist/orderlist.d.ts

@@ -180,6 +180,24 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @defaultValue false
      */
     dragdrop?: boolean | undefined;
+    /**
+     * Used to define a string that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
     /**
      * Name of the field that uniquely identifies the a record in the data.
      */