primereact 9.4.0 → 9.6.0

package/picklist/picklist.d.ts

@@ -8,7 +8,134 @@
  *
  */
 import * as React from 'react';
-import { IconType } from '../utils/utils';
+import { ButtonPassThroughOptions } from '../button/button';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type PickListPassThroughType<T> = PassThroughType<T, PickListPassThroughMethodOptions>;
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PickListPassThroughMethodOptions {
+    props: PickListProps;
+    state: PickListState;
+    context: PickListContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PickListProps.pt}
+ */
+export interface PickListPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the source controls' DOM element.
+     */
+    controls?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveUpButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveTopButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveDownButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveBottomButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the source wrapper's DOM element.
+     */
+    listWrapper?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the source header's DOM element.
+     */
+    header?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    buttons?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveToTargetButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveAllToTargetButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveToSourceButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveAllToSourceButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    filterIcon?: PickListPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    filter?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    filterInput?: PickListPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    filterContainer?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    item?: PickListPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    list?: PickListPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+}
+
+export interface PickListState {
+    /**
+     * Current source selection state as a [].
+     */
+    sourceSelection: [];
+    /**
+     * Current target selection state as a [].
+     */
+    targetSelection: [];
+    /**
+     * Current source filter state as a string.
+     */
+    sourceFilterValue: string;
+    /**
+     * Current source target filter state as a string.
+     */
+    targetFilterValue: string;
+    /**
+     * Current attribute selector state as a any.
+     */
+    attributeSelector: any;
+}
+
+/**
+ * Defines current options in PickList component.
+ */
+export interface PickListContext {
+    /**
+     * Current selection state of the item as a boolean.
+     */
+    selected: boolean;
+}
 
 /**
  * Custom picklist event.
@@ -331,6 +458,11 @@ export interface PickListProps {
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PickListPassThroughOptions}
+     */
+    pt?: PickListPassThroughOptions;
 }
 
 /**

package/picklist/picklist.esm.js

@@ -1,34 +1,20 @@
 import * as React from 'react';
-import PrimeReact, { FilterService } from 'primereact/api';
+import PrimeReact, { PrimeReactContext, FilterService } from 'primereact/api';
 import { useMatchMedia, useMountEffect, useUpdateEffect } from 'primereact/hooks';
-import { ObjectUtils, classNames, IconUtils, DomHandler, UniqueComponentId } from 'primereact/utils';
+import { classNames, mergeProps, ObjectUtils, IconUtils, DomHandler, UniqueComponentId } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { Button } from 'primereact/button';
-import { AngleDownIcon } from 'primereact/icons/angledown';
+import { AngleDoubleDownIcon } from 'primereact/icons/angledoubledown';
 import { AngleDoubleUpIcon } from 'primereact/icons/angledoubleup';
+import { AngleDownIcon } from 'primereact/icons/angledown';
 import { AngleUpIcon } from 'primereact/icons/angleup';
-import { AngleDoubleDownIcon } from 'primereact/icons/angledoubledown';
-import { Ripple } from 'primereact/ripple';
 import { SearchIcon } from 'primereact/icons/search';
-import { AngleLeftIcon } from 'primereact/icons/angleleft';
+import { Ripple } from 'primereact/ripple';
 import { AngleDoubleLeftIcon } from 'primereact/icons/angledoubleleft';
 import { AngleDoubleRightIcon } from 'primereact/icons/angledoubleright';
+import { AngleLeftIcon } from 'primereact/icons/angleleft';
 import { AngleRightIcon } from 'primereact/icons/angleright';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -84,7 +70,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var PickListBase = {
+var PickListBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'PickList',
     id: null,
@@ -139,14 +125,8 @@ var PickListBase = {
     onSourceFilterChange: null,
     onTargetFilterChange: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, PickListBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, PickListBase.defaultProps);
   }
-};
+});
 
 function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
@@ -267,33 +247,86 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var className = classNames('p-picklist-buttons', props.className);
-  return /*#__PURE__*/React.createElement("div", {
+  var controlsProps = mergeProps({
     className: className
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, props.ptm('controls'));
+  return /*#__PURE__*/React.createElement("div", controlsProps, /*#__PURE__*/React.createElement(Button, {
     disabled: moveDisabled,
     type: "button",
     icon: moveUpIcon,
-    onClick: moveUp
+    onClick: moveUp,
+    pt: props.ptm('moveUpButton')
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveDisabled,
     type: "button",
     icon: moveTopIcon,
-    onClick: moveTop
+    onClick: moveTop,
+    pt: props.ptm('moveTopButton')
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveDisabled,
     type: "button",
     icon: moveDownIcon,
-    onClick: moveDown
+    onClick: moveDown,
+    pt: props.ptm('moveDownButton')
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveDisabled,
     type: "button",
     icon: moveBottomIcon,
-    onClick: moveBottom
+    onClick: moveBottom,
+    pt: props.ptm('moveBottomButton')
   }));
 });
 PickListControls.displayName = 'PickListControls';
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
 var PickListItem = /*#__PURE__*/React.memo(function (props) {
+  var getPTOptions = function getPTOptions(key) {
+    return props.ptm(key, {
+      context: {
+        selected: props.selected
+      }
+    });
+  };
   var onClick = function onClick(event) {
     if (props.onClick) {
       props.onClick({
@@ -314,17 +347,20 @@ var PickListItem = /*#__PURE__*/React.memo(function (props) {
   var className = classNames('p-picklist-item', {
     'p-highlight': props.selected
   }, props.className);
-  return /*#__PURE__*/React.createElement("li", {
+  var itemProps = mergeProps({
     className: className,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: props.tabIndex,
-    role: "option",
-    "aria-selected": props.selected
-  }, content, /*#__PURE__*/React.createElement(Ripple, null));
+    role: 'option',
+    'aria-selected': props.selected
+  }, getPTOptions('item'));
+  return /*#__PURE__*/React.createElement("li", itemProps, content, /*#__PURE__*/React.createElement(Ripple, null));
 });
 PickListItem.displayName = 'PickListItem';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var listElementRef = React.useRef(null);
   var onItemClick = function onItemClick(event) {
@@ -411,10 +447,11 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     };
   });
   var createHeader = function createHeader() {
+    var headerProps = mergeProps({
+      className: 'p-picklist-header'
+    }, props.ptm('header'));
     if (props.header) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-picklist-header"
-      }, ObjectUtils.getJSXElement(props.header, props));
+      return /*#__PURE__*/React.createElement("div", headerProps, ObjectUtils.getJSXElement(props.header, props));
     }
     return null;
   };
@@ -430,7 +467,8 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
           selected: selected,
           onClick: onItemClick,
           onKeyDown: onItemKeyDown,
-          tabIndex: props.tabIndex
+          tabIndex: props.tabIndex,
+          ptm: props.ptm
         });
       });
     }
@@ -438,27 +476,26 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   };
   var createFilter = function createFilter() {
     var iconClassName = 'p-picklist-filter-icon';
-    var icon = props.type === 'source' ? props.sourceFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, {
-      className: iconClassName
-    }) : props.targetFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, {
-      className: iconClassName
-    });
-    var filterIcon = IconUtils.getJSXIcon(icon, {
+    var filterIconProps = mergeProps({
       className: iconClassName
-    }, {
+    }, props.ptm('filterIcon'));
+    var icon = props.type === 'source' ? props.sourceFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps) : props.targetFilterIcon || /*#__PURE__*/React.createElement(SearchIcon, filterIconProps);
+    var filterIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, filterIconProps), {
       props: props
     });
     if (props.showFilter) {
-      var content = /*#__PURE__*/React.createElement("div", {
-        className: "p-picklist-filter"
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "text",
+      var filterProps = mergeProps({
+        className: 'p-picklist-filter'
+      }, props.ptm('filter'));
+      var filterInputProps = mergeProps({
+        type: 'text',
         value: props.filterValue,
         onChange: onFilter,
         onKeyDown: onFilterInputKeyDown,
         placeholder: props.placeholder,
-        className: "p-picklist-filter-input p-inputtext p-component"
-      }), /*#__PURE__*/React.createElement("span", null, " ", filterIcon, " "));
+        className: 'p-picklist-filter-input p-inputtext p-component'
+      }, props.ptm('filterInput'));
+      var content = /*#__PURE__*/React.createElement("div", filterProps, /*#__PURE__*/React.createElement("input", filterInputProps), /*#__PURE__*/React.createElement("span", null, " ", filterIcon, " "));
       if (props.filterTemplate) {
         var defaultContentOptions = {
           className: 'p-picklist-filter',
@@ -473,30 +510,33 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
         };
         content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
       }
-      return /*#__PURE__*/React.createElement("div", {
-        className: "p-picklist-filter-container"
-      }, content);
+      var filterContainerProps = mergeProps({
+        className: 'p-picklist-filter-container'
+      }, props.ptm('filterContainer'));
+      return /*#__PURE__*/React.createElement("div", filterContainerProps, content);
     }
     return null;
   };
   var createList = function createList() {
     var items = createItems();
     var className = classNames('p-picklist-list', props.listClassName);
-    return /*#__PURE__*/React.createElement("ul", {
+    var listProps = mergeProps({
       className: className,
-      style: props.style,
-      role: "listbox",
-      "aria-multiselectable": true
-    }, items);
+      role: 'listbox',
+      'aria-multiselectable': true,
+      style: props.style
+    }, props.ptm('list'));
+    return /*#__PURE__*/React.createElement("ul", listProps, items);
   };
   var className = classNames('p-picklist-list-wrapper', props.className);
   var header = createHeader();
   var filter = createFilter();
   var list = createList();
-  return /*#__PURE__*/React.createElement("div", {
-    ref: listElementRef,
-    className: className
-  }, header, filter, list);
+  var listWrapperProps = mergeProps({
+    className: className,
+    ref: listElementRef
+  }, props.ptm('listWrapper'));
+  return /*#__PURE__*/React.createElement("div", listWrapperProps, header, filter, list);
 }));
 PickListSubList.displayName = 'PickListSubList';
 
@@ -615,34 +655,40 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var className = classNames('p-picklist-buttons p-picklist-transfer-buttons', props.className);
-  return /*#__PURE__*/React.createElement("div", {
+  var buttonsProps = mergeProps({
     className: className
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, props.ptm('buttons'));
+  return /*#__PURE__*/React.createElement("div", buttonsProps, /*#__PURE__*/React.createElement(Button, {
     disabled: moveRightDisabled,
     type: "button",
     icon: moveToTargetIcon,
-    onClick: moveRight
+    onClick: moveRight,
+    pt: props.ptm('moveToTargetButton')
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveAllRightDisabled,
     type: "button",
     icon: moveAllToTargetIcon,
-    onClick: moveAllRight
+    onClick: moveAllRight,
+    pt: props.ptm('moveAllToTargetButton')
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveLeftDisabled,
     type: "button",
     icon: moveToSourceIcon,
-    onClick: moveLeft
+    onClick: moveLeft,
+    pt: props.ptm('moveToSourceButton')
   }), /*#__PURE__*/React.createElement(Button, {
     disabled: moveAllLeftDisabled,
     type: "button",
     icon: moveAllToSourceIcon,
-    onClick: moveAllLeft
+    onClick: moveAllLeft,
+    pt: props.ptm('moveAllToSourceButton')
   }));
 });
 PickListTransferControls.displayName = 'PickListTransferControls';
 
 var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
-  var props = PickListBase.getProps(inProps);
+  var context = React.useContext(PrimeReactContext);
+  var props = PickListBase.getProps(inProps, context);
   var _React$useState = React.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     sourceSelectionState = _React$useState2[0],
@@ -663,6 +709,17 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     _React$useState10 = _slicedToArray(_React$useState9, 2),
     attributeSelectorState = _React$useState10[0],
     setAttributeSelectorState = _React$useState10[1];
+  var _PickListBase$setMeta = PickListBase.setMetaData({
+      props: props,
+      state: {
+        sourceSelection: sourceSelectionState,
+        targetSelection: targetSelectionState,
+        sourceFilterValue: sourceFilterValueState,
+        targetFilterValue: targetFilterValueState,
+        attributeSelector: attributeSelectorState
+      }
+    }),
+    ptm = _PickListBase$setMeta.ptm;
   var elementRef = React.useRef(null);
   var sourceListElementRef = React.useRef(null);
   var targetListElementRef = React.useRef(null);
@@ -741,6 +798,7 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
             value: selectedValue
           });
         }
+        selectedValue = [];
         break;
       case 'toSource':
         selectedValue = targetSelection;
@@ -759,6 +817,7 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
             value: selectedValue
           });
         }
+        selectedValue = [];
         break;
     }
     _onSelectionChange({
@@ -829,7 +888,7 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
   var createStyle = function createStyle() {
     if (!styleElementRef.current) {
-      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      styleElementRef.current = DomHandler.createInlineStyle(context && context.nonce || PrimeReact.nonce);
       var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-picklist[").concat(attributeSelectorState, "] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");
       styleElementRef.current.innerHTML = innerHTML;
     }
@@ -864,18 +923,18 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       reorderDirection.current = null;
     }
   });
-  var otherProps = PickListBase.getOtherProps(props);
   var className = classNames('p-picklist p-component', props.className);
   var sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
   var targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
   var sourceList = getVisibleList(props.source, 'source');
   var targetList = getVisibleList(props.target, 'target');
-  return /*#__PURE__*/React.createElement("div", _extends({
+  var rootProps = mergeProps({
     id: props.id,
     ref: elementRef,
     className: className,
     style: props.style
-  }, otherProps), props.showSourceControls && /*#__PURE__*/React.createElement(PickListControls, {
+  }, PickListBase.getOtherProps(props), ptm('root'));
+  return /*#__PURE__*/React.createElement("div", rootProps, props.showSourceControls && /*#__PURE__*/React.createElement(PickListControls, {
     list: props.source,
     selection: sourceSelection,
     onReorder: onSourceReorder,
@@ -884,7 +943,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     moveUpIcon: props.moveUpIcon,
     moveTopIcon: props.moveTopIcon,
     moveDownIcon: props.moveDownIcon,
-    moveBottomIcon: props.moveBottomIcon
+    moveBottomIcon: props.moveBottomIcon,
+    ptm: ptm
   }), /*#__PURE__*/React.createElement(PickListSubList, {
     ref: sourceListElementRef,
     type: "source",
@@ -906,7 +966,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     showFilter: showSourceFilter,
     placeholder: props.sourceFilterPlaceholder,
     filterTemplate: props.sourceFilterTemplate,
-    sourceFilterIcon: props.sourceFilterIcon
+    sourceFilterIcon: props.sourceFilterIcon,
+    ptm: ptm
   }), /*#__PURE__*/React.createElement(PickListTransferControls, {
     onTransfer: onTransfer,
     source: props.source,
@@ -920,7 +981,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     moveToTargetIcon: props.moveToTargetIcon,
     moveAllToTargetIcon: props.moveAllToTargetIcon,
     moveToSourceIcon: props.moveToSourceIcon,
-    moveAllToSourceIcon: props.moveAllToSourceIcon
+    moveAllToSourceIcon: props.moveAllToSourceIcon,
+    ptm: ptm
   }), /*#__PURE__*/React.createElement(PickListSubList, {
     ref: targetListElementRef,
     type: "target",
@@ -942,7 +1004,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     showFilter: showTargetFilter,
     placeholder: props.targetFilterPlaceholder,
     filterTemplate: props.targetFilterTemplate,
-    targetFilterIcon: props.targetFilterIcon
+    targetFilterIcon: props.targetFilterIcon,
+    ptm: ptm
   }), props.showTargetControls && /*#__PURE__*/React.createElement(PickListControls, {
     list: props.target,
     selection: targetSelection,
@@ -952,7 +1015,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     moveUpIcon: props.moveUpIcon,
     moveTopIcon: props.moveTopIcon,
     moveDownIcon: props.moveDownIcon,
-    moveBottomIcon: props.moveBottomIcon
+    moveBottomIcon: props.moveBottomIcon,
+    ptm: ptm
   }));
 }));
 PickList.displayName = 'PickList';