primereact 10.2.1 → 10.3.0

package/orderlist/orderlist.esm.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PrimeReact, { ariaLabel, PrimeReactContext, FilterService } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { useMountEffect, useUpdateEffect } from 'primereact/hooks';
-import { classNames, mergeProps, ObjectUtils, IconUtils, DomHandler, UniqueComponentId } from 'primereact/utils';
+import { classNames, ObjectUtils, mergeProps, IconUtils, DomHandler, UniqueComponentId } from 'primereact/utils';
 import { Button } from 'primereact/button';
 import { AngleDoubleDownIcon } from 'primereact/icons/angledoubledown';
 import { AngleDoubleUpIcon } from 'primereact/icons/angledoubleup';
@@ -96,18 +96,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 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.extend({
   defaultProps: {
     __TYPE: 'OrderList',
     id: null,
+    ariaLabel: null,
+    ariaLabelledBy: null,
     value: null,
     header: null,
     style: null,
@@ -254,6 +257,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
       }
     }
   };
+  var isMoveDisabled = ObjectUtils.isEmpty(props.value) || ObjectUtils.isEmpty(props.selection);
   var controlsProps = mergeProps({
     className: cx('controls')
   }, ptm('controls', {
@@ -264,6 +268,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
     unstyled: unstyled,
     icon: moveUpIcon,
     onClick: moveUp,
+    disabled: isMoveDisabled,
     'aria-label': ariaLabel('moveUp'),
     __parentMetadata: {
       parent: props.metaData
@@ -274,6 +279,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
     unstyled: unstyled,
     icon: moveTopIcon,
     onClick: moveTop,
+    disabled: isMoveDisabled,
     'aria-label': ariaLabel('moveTop'),
     __parentMetadata: {
       parent: props.metaData
@@ -284,6 +290,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
     unstyled: unstyled,
     icon: moveDownIcon,
     onClick: moveDown,
+    disabled: isMoveDisabled,
     'aria-label': ariaLabel('moveDown'),
     __parentMetadata: {
       parent: props.metaData
@@ -294,6 +301,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
     unstyled: unstyled,
     icon: moveBottomIcon,
     onClick: moveBottom,
+    disabled: isMoveDisabled,
     'aria-label': ariaLabel('moveBottom'),
     __parentMetadata: {
       parent: props.metaData
@@ -354,7 +362,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.memo(function (props) {
+var OrderListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var ptm = props.ptm,
     cx = props.cx;
   var _ptm = function _ptm(key, options) {
@@ -452,17 +460,25 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
     }, _ptm('header'));
     return props.header ? /*#__PURE__*/React.createElement("div", headerProps, props.header) : null;
   };
+  React.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 = mergeProps({
-            className: classNames(props.className, cx('item', {
-              item: item,
-              isSelected: isSelected
-            })),
+            id: key,
+            role: 'option',
+            draggable: 'true',
             onClick: function onClick(e) {
               return props.onItemClick({
                 originalEvent: e,
@@ -470,22 +486,18 @@ var OrderListSubList = /*#__PURE__*/React.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: 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) {
@@ -498,12 +510,8 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
           return items;
         } else {
           var _itemProps = mergeProps({
+            id: key,
             role: 'option',
-            tabIndex: props.tabIndex,
-            className: classNames(props.className, cx('item', {
-              item: item,
-              isSelected: isSelected
-            })),
             onClick: function onClick(e) {
               return props.onItemClick({
                 originalEvent: e,
@@ -511,15 +519,14 @@ var OrderListSubList = /*#__PURE__*/React.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: 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.createElement("li", _extends({
             key: key
@@ -537,6 +544,13 @@ var OrderListSubList = /*#__PURE__*/React.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.createElement("ul", listProps, items);
@@ -594,7 +608,7 @@ var OrderListSubList = /*#__PURE__*/React.memo(function (props) {
     className: cx('container')
   }, _ptm('container'));
   return /*#__PURE__*/React.createElement("div", containerProps, header, filter, list);
-});
+}));
 OrderListSubList.displayName = 'OrderListSubList';
 
 var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
@@ -612,10 +626,23 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     attributeSelectorState = _React$useState6[0],
     setAttributeSelectorState = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    focused = _React$useState8[0],
+    setFocused = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focusedOptionId = _React$useState10[0],
+    setFocusedOptionId = _React$useState10[1];
+  var _React$useState11 = React.useState(-1),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    focusedOptionIndex = _React$useState12[0],
+    setFocusedOptionIndex = _React$useState12[1];
   var hasFilter = ObjectUtils.isNotEmpty(filterValueState);
   var elementRef = React.useRef(null);
   var styleElementRef = React.useRef(null);
   var reorderDirection = React.useRef(null);
+  var listElementRef = React.useRef(null);
   var metaData = {
     props: props,
     state: {
@@ -631,39 +658,195 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   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 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 = ObjectUtils.findIndexInList(event.value, selectionState, props.dataKey);
-    var selected = index !== -1;
+    var originalEvent = event.originalEvent,
+      value = event.value,
+      index = event.index;
+    var selectedIndex = ObjectUtils.findIndexInList(value, selectionState);
+    var listElement = getListElement();
+    var selectedId = 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 = 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 = DomHandler.findSingle(listElement, '[data-p-highlight="true"]') || DomHandler.findSingle(listElement, '[data-pc-section="item"]');
+    var itemList = listElement && listElement.children ? _toConsumableArray(listElement.children) : [];
+    if (selectedFirstItem && itemList.length > 0) {
+      var findIndex = 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 = 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;
+      });
+      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 = 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;
+      });
+      setSelectionState(_toConsumableArray(visibleList).slice(matchedOptionIndex, items.length));
+    } else {
+      changeFocusedOptionIndex(DomHandler.find(listElement, '[data-pc-section="item"]').length - 1);
+    }
+    event.preventDefault();
+  };
+  var onEnterKey = function onEnterKey(event) {
+    var listElement = getListElement();
+    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;
+    });
+    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 = DomHandler.find(listElement, '[data-pc-section="item"]');
+      var selectedItemIndex = ObjectUtils.findIndexInList(selectionState[0], _toConsumableArray(visibleList));
+      var focusedItem = 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 = 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 = 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 = 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 = 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) {
@@ -692,22 +875,6 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-  var getVisibleList = function getVisibleList() {
-    if (hasFilter) {
-      var filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
-      var searchFields = props.filterBy ? props.filterBy.split(',') : [];
-      return FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
-    }
-    return props.value;
-  };
-  var findNextItem = function findNextItem(item) {
-    var nextItem = item.nextElementSibling;
-    return nextItem ? !DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item' ? findNextItem(nextItem) : nextItem : null;
-  };
-  var findPrevItem = function findPrevItem(item) {
-    var prevItem = item.previousElementSibling;
-    return prevItem ? !DomHandler.getAttribute(prevItem, 'data-pc-section') === 'item' ? findPrevItem(prevItem) : prevItem : null;
-  };
   var onReorder = function onReorder(event) {
     if (props.onChange) {
       props.onChange({
@@ -717,29 +884,6 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
     reorderDirection.current = event.direction;
   };
-  var updateListScroll = function updateListScroll() {
-    var list = DomHandler.findSingle(elementRef.current, '.p-orderlist-list');
-    var listItems = DomHandler.find(list, '.p-orderlist-item.p-highlight');
-    if (listItems && listItems.length) {
-      switch (reorderDirection.current) {
-        case 'up':
-          DomHandler.scrollInView(list, listItems[0]);
-          break;
-        case 'top':
-          list.scrollTop = 0;
-          break;
-        case 'down':
-          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 = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
@@ -770,13 +914,15 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       destroyStyle();
     };
   }, [attributeSelectorState, props.breakpoint]);
+  useUpdateEffect(function () {
+    var _focusedOptionId = focusedOptionIndex !== -1 ? focusedOptionIndex : null;
+    setFocusedOptionId(_focusedOptionId);
+  }, [focusedOptionIndex]);
   useUpdateEffect(function () {
     if (reorderDirection.current) {
-      updateListScroll();
       reorderDirection.current = null;
     }
   });
-  var visibleList = getVisibleList();
   var rootProps = mergeProps({
     ref: elementRef,
     id: props.id,
@@ -798,11 +944,19 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     unstyled: props.unstyled,
     metaData: metaData
   }), /*#__PURE__*/React.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,
@@ -810,6 +964,7 @@ var OrderList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     resetFilter: resetFilter,
     filterTemplate: props.filterTemplate,
     header: props.header,
+    parentId: attributeSelectorState,
     listStyle: props.listStyle,
     dataKey: props.dataKey,
     dragdrop: props.dragdrop,

package/orderlist/orderlist.esm.min.js

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