primereact 10.2.1 → 10.3.1

package/orderlist/orderlist.js

@@ -109,18 +109,21 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
     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,
@@ -267,6 +270,7 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
         }
       }
     };
+    var isMoveDisabled = utils.ObjectUtils.isEmpty(props.value) || utils.ObjectUtils.isEmpty(props.selection);
     var controlsProps = utils.mergeProps({
       className: cx('controls')
     }, ptm('controls', {
@@ -277,6 +281,7 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       unstyled: unstyled,
       icon: moveUpIcon,
       onClick: moveUp,
+      disabled: isMoveDisabled,
       'aria-label': PrimeReact.ariaLabel('moveUp'),
       __parentMetadata: {
         parent: props.metaData
@@ -287,6 +292,7 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       unstyled: unstyled,
       icon: moveTopIcon,
       onClick: moveTop,
+      disabled: isMoveDisabled,
       'aria-label': PrimeReact.ariaLabel('moveTop'),
       __parentMetadata: {
         parent: props.metaData
@@ -297,6 +303,7 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       unstyled: unstyled,
       icon: moveDownIcon,
       onClick: moveDown,
+      disabled: isMoveDisabled,
       'aria-label': PrimeReact.ariaLabel('moveDown'),
       __parentMetadata: {
         parent: props.metaData
@@ -307,6 +314,7 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       unstyled: unstyled,
       icon: moveBottomIcon,
       onClick: moveBottom,
+      disabled: isMoveDisabled,
       'aria-label': PrimeReact.ariaLabel('moveBottom'),
       __parentMetadata: {
         parent: props.metaData
@@ -367,7 +375,7 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
 
   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) {
@@ -465,17 +473,25 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       }, _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,
@@ -483,22 +499,18 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
                   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) {
@@ -511,12 +523,8 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
             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,
@@ -524,15 +532,14 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
                   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
@@ -550,6 +557,13 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
         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);
@@ -607,7 +621,7 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       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) {
@@ -625,10 +639,23 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       _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: {
@@ -644,39 +671,195 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
     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) {
@@ -705,22 +888,6 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
         });
       }
     };
-    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({
@@ -730,32 +897,9 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       }
       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;
       }
@@ -783,13 +927,15 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
         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,
@@ -811,11 +957,19 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       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,
@@ -823,6 +977,7 @@ this.primereact.orderlist = (function (exports, React, PrimeReact, componentbase
       resetFilter: resetFilter,
       filterTemplate: props.filterTemplate,
       header: props.header,
+      parentId: attributeSelectorState,
       listStyle: props.listStyle,
       dataKey: props.dataKey,
       dragdrop: props.dragdrop,

package/orderlist/orderlist.min.js

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

package/organizationchart/organizationchart.cjs.js

@@ -257,6 +257,12 @@ var OrganizationChartNode = /*#__PURE__*/React__namespace.memo(function (props)
     });
     event.preventDefault();
   };
+  var _onKeyDown = function onKeyDown(event, node) {
+    if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
+      toggleNode(event);
+      event.preventDefault();
+    }
+  };
   var createChildNodes = function createChildNodes() {
     var nodesProps = utils.mergeProps({
       className: cx('nodes'),
@@ -347,6 +353,10 @@ var OrganizationChartNode = /*#__PURE__*/React__namespace.memo(function (props)
       });
       var nodeTogglerProps = utils.mergeProps({
         className: cx('nodeToggler'),
+        tabIndex: 0,
+        onKeyDown: function onKeyDown(e) {
+          return _onKeyDown(e);
+        },
         onClick: function onClick(e) {
           return toggleNode(e);
         },