primereact 9.0.0-rc.1 → 9.1.0

package/primereact.all.cjs.js

@@ -3336,6 +3336,19 @@ var useOverlayListener = function useOverlayListener(_ref) {
     _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
     bindWindowResizeListener = _useResizeListener2[0],
     unbindWindowResizeListener = _useResizeListener2[1];
+  var _useEventListener3 = useEventListener({
+      target: 'window',
+      type: 'orientationchange',
+      listener: function listener(event) {
+        _listener && _listener(event, {
+          type: 'orientationchange',
+          valid: true
+        });
+      }
+    }),
+    _useEventListener4 = _slicedToArray(_useEventListener3, 2),
+    bindWindowOrientationChangeListener = _useEventListener4[0],
+    unbindWindowOrientationChangeListener = _useEventListener4[1];
   var _useOverlayScrollList = useOverlayScrollListener({
       target: target,
       listener: function listener(event) {
@@ -3354,11 +3367,13 @@ var useOverlayListener = function useOverlayListener(_ref) {
   var bind = function bind() {
     bindDocumentClickListener();
     bindWindowResizeListener();
+    bindWindowOrientationChangeListener();
     bindOverlayScrollListener();
   };
   var unbind = function unbind() {
     unbindDocumentClickListener();
     unbindWindowResizeListener();
+    unbindWindowOrientationChangeListener();
     unbindOverlayScrollListener();
   };
   React__namespace.useEffect(function () {
@@ -4414,8 +4429,15 @@ var ButtonBase = {
     icon: null,
     iconPos: 'left',
     badge: null,
+    severity: null,
+    rounded: false,
+    raised: false,
+    outlined: false,
+    text: false,
+    link: false,
     badgeClassName: null,
     tooltip: null,
+    size: null,
     tooltipOptions: null,
     disabled: false,
     loading: false,
@@ -4432,6 +4454,7 @@ var ButtonBase = {
 };
 
 var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var _classNames2;
   var props = ButtonBase.getProps(inProps);
   var elementRef = React__namespace.useRef(ref);
   React__namespace.useEffect(function () {
@@ -4477,13 +4500,18 @@ var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
   var showTooltip = !disabled || props.tooltipOptions && props.tooltipOptions.showOnDisabled;
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
   var otherProps = ButtonBase.getOtherProps(props);
-  var className = classNames('p-button p-component', props.className, _defineProperty({
+  var className = classNames('p-button p-component', props.className, (_classNames2 = {
     'p-button-icon-only': (props.icon || props.loading && props.loadingIcon) && !props.label && !props.children,
     'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
     'p-disabled': disabled,
     'p-button-loading': props.loading,
+    'p-button-outlined': props.outlined,
+    'p-button-raised': props.raised,
+    'p-button-link': props.link,
+    'p-button-text': props.text,
+    'p-button-rounded': props.rounded,
     'p-button-loading-label-only': props.loading && !props.icon && props.label
-  }, "p-button-loading-".concat(props.iconPos), props.loading && props.loadingIcon && props.label));
+  }, _defineProperty(_classNames2, "p-button-loading-".concat(props.iconPos), props.loading && props.loadingIcon && props.label), _defineProperty(_classNames2, "p-button-".concat(props.size), props.size), _defineProperty(_classNames2, "p-button-".concat(props.severity), props.severity), _classNames2));
   var icon = createIcon();
   var label = createLabel();
   var badge = createBadge();
@@ -5439,6 +5467,8 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     var otherProps = VirtualScrollerBase.getOtherProps(props);
     var className = classNames('p-virtualscroller', {
       'p-both-scroll': both,
+      'p-virtualscroller-both': both,
+      'p-virtualscroller-horizontal': horizontal,
       'p-horizontal-scroll': horizontal
     }, props.className);
     var loader = createLoader();
@@ -10198,12 +10228,14 @@ var CascadeSelectBase = {
     itemTemplate: null,
     disabled: false,
     dataKey: null,
+    breakpoint: undefined,
     inputId: null,
     tabIndex: null,
     ariaLabelledBy: null,
     appendTo: null,
     transitionOptions: null,
     dropdownIcon: 'pi pi-chevron-down',
+    scrollHeight: '400px',
     onChange: null,
     onGroupChange: null,
     onBeforeShow: null,
@@ -10432,10 +10464,15 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     overlayVisibleState = _React$useState4[0],
     setOverlayVisibleState = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    attributeSelectorState = _React$useState6[0],
+    setAttributeSelectorState = _React$useState6[1];
   var elementRef = React__namespace.useRef(null);
   var overlayRef = React__namespace.useRef(null);
   var inputRef = React__namespace.useRef(null);
   var labelRef = React__namespace.useRef(null);
+  var styleElementRef = React__namespace.useRef(null);
   var dirty = React__namespace.useRef(false);
   var selectionPath = React__namespace.useRef(null);
   var _useOverlayListener = useOverlayListener({
@@ -10580,6 +10617,10 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
   var onOverlayEnter = function onOverlayEnter() {
     ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
     alignOverlay();
+    if (attributeSelectorState && props.breakpoint) {
+      overlayRef.current.setAttribute(attributeSelectorState + '_panel', '');
+      createStyle();
+    }
   };
   var onOverlayEntered = function onOverlayEntered() {
     bindOverlayListener();
@@ -10592,10 +10633,22 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
   var onOverlayExited = function onOverlayExited() {
     ZIndexUtils.clear(overlayRef.current);
     props.onHide && props.onHide();
+    destroyStyle();
   };
   var alignOverlay = function alignOverlay() {
     DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
   };
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      var selector = "".concat(attributeSelectorState, "_panel");
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-items-wrapper > ul {\n        max-height: ").concat(props.scrollHeight, ";\n        overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n    }\n\n    .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-sublist {\n        position: relative;\n    }\n\n    .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-item-active > .p-cascadeselect-sublist {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-cascadeselect-panel[").concat(selector, "] .p-cascadeselect-group-icon:before {\n        content: \"\\e930\";\n    }\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+  };
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -10616,6 +10669,11 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
       }
     };
   });
+  useMountEffect(function () {
+    if (props.breakpoint) {
+      !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+    }
+  });
   React__namespace.useEffect(function () {
     ObjectUtils.combinedRefs(inputRef, props.inputRef);
   }, [inputRef, props.inputRef]);
@@ -13855,7 +13913,7 @@ var FirstPageLinkBase = {
 };
 var JumpToPageInputBase = {
   defaultProps: {
-    __TYPE: 'JumbToPageInput',
+    __TYPE: 'JumpToPageInput',
     page: null,
     rows: null,
     pageCount: null,
@@ -23053,26 +23111,31 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   var props = FileUploadBase.getProps(inProps);
   var _React$useState = React__namespace.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    filesState = _React$useState2[0],
-    setFilesState = _React$useState2[1];
-  var _React$useState3 = React__namespace.useState(0),
+    uploadedFilesState = _React$useState2[0],
+    setUploadedFilesState = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState([]),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    progressState = _React$useState4[0],
-    setProgressState = _React$useState4[1];
-  var _React$useState5 = React__namespace.useState(false),
+    filesState = _React$useState4[0],
+    setFilesState = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(0),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    focusedState = _React$useState6[0],
-    setFocusedState = _React$useState6[1];
+    progressState = _React$useState6[0],
+    setProgressState = _React$useState6[1];
   var _React$useState7 = React__namespace.useState(false),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    uploadingState = _React$useState8[0],
-    setUploadingState = _React$useState8[1];
+    focusedState = _React$useState8[0],
+    setFocusedState = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    uploadingState = _React$useState10[0],
+    setUploadingState = _React$useState10[1];
   var fileInputRef = React__namespace.useRef(null);
   var messagesRef = React__namespace.useRef(null);
   var contentRef = React__namespace.useRef(null);
   var duplicateIEEvent = React__namespace.useRef(false);
   var uploadedFileCount = React__namespace.useRef(0);
   var hasFiles = ObjectUtils.isNotEmpty(filesState);
+  var hasUploadedFiles = ObjectUtils.isNotEmpty(uploadedFilesState);
   var disabled = props.disabled || uploadingState;
   var chooseButtonLabel = props.chooseLabel || props.chooseOptions.label || localeOption('choose');
   var uploadButtonLabel = props.uploadLabel || props.uploadOptions.label || localeOption('upload');
@@ -23096,6 +23159,19 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       });
     }
   };
+  var removeUploadedFiles = function removeUploadedFiles(event, index) {
+    clearInput();
+    var currentUploadedFiles = _toConsumableArray(uploadedFilesState);
+    var removedFile = filesState[index];
+    currentUploadedFiles.splice(index, 1);
+    setUploadedFilesState(currentUploadedFiles);
+    if (props.onRemove) {
+      props.onRemove({
+        originalEvent: event,
+        file: removedFile
+      });
+    }
+  };
   var clearInput = function clearInput() {
     if (fileInputRef.current) {
       fileInputRef.current.value = '';
@@ -23260,6 +23336,9 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
               });
             }
           }
+          setUploadedFilesState(function (prevUploadedFiles) {
+            return [].concat(_toConsumableArray(prevUploadedFiles), _toConsumableArray(files));
+          });
           clear();
         }
       };
@@ -23399,27 +23478,37 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       tabIndex: 0
     }, input, icon, label, /*#__PURE__*/React__namespace.createElement(Ripple, null));
   };
-  var createFile = function createFile(file, index) {
+  var onRemoveClick = function onRemoveClick(e, badgeOptions, index) {
+    if (badgeOptions.severity === 'warning') remove(e, index);else removeUploadedFiles(e, index);
+  };
+  var createFile = function createFile(file, index, badgeOptions) {
     var key = file.name + file.type + file.size;
-    var preview = isImage(file) ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("img", {
-      alt: file.name,
+    var preview = isImage(file) ? /*#__PURE__*/React__namespace.createElement("img", {
       role: "presentation",
+      className: "p-fileupload-file-thumbnail",
+      alt: file.name,
       src: file.objectURL,
       width: props.previewWidth
-    })) : null;
+    }) : null;
     var fileName = /*#__PURE__*/React__namespace.createElement("div", {
       className: "p-fileupload-filename"
     }, file.name);
     var size = /*#__PURE__*/React__namespace.createElement("div", null, formatSize(file.size));
+    var contentBody = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, " ", file.name), /*#__PURE__*/React__namespace.createElement("span", null, formatSize(file.size)), /*#__PURE__*/React__namespace.createElement(Badge, {
+      className: "p-fileupload-file-badge",
+      value: badgeOptions.value,
+      severity: badgeOptions.severity
+    }));
     var removeButton = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Button, {
       type: "button",
       icon: "pi pi-times",
+      className: "p-button-danger p-button-text p-button-rounded",
       onClick: function onClick(e) {
-        return remove(e, index);
+        return onRemoveClick(e, badgeOptions, index);
       },
       disabled: disabled
     }));
-    var content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, preview, fileName, size, removeButton);
+    var content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, preview, contentBody, removeButton);
     if (props.itemTemplate) {
       var defaultContentOptions = {
         onRemove: function onRemove(event) {
@@ -23442,13 +23531,27 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     }, content);
   };
   var createFiles = function createFiles() {
-    var content = filesState.map(createFile);
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-fileupload-files"
-    }, content);
+    var badgeOptions = {
+      severity: 'warning',
+      value: 'Pending'
+    };
+    var content = filesState.map(function (file, index) {
+      return createFile(file, index, badgeOptions);
+    });
+    return /*#__PURE__*/React__namespace.createElement("div", null, content);
+  };
+  var createUploadedFiles = function createUploadedFiles() {
+    var badgeOptions = {
+      severity: 'success',
+      value: 'Completed'
+    };
+    var content = uploadedFilesState && uploadedFilesState.map(function (file, index) {
+      return createFile(file, index, badgeOptions);
+    });
+    return /*#__PURE__*/React__namespace.createElement("div", null, content);
   };
   var createEmptyContent = function createEmptyContent() {
-    return props.emptyTemplate && !hasFiles ? ObjectUtils.getJSXElement(props.emptyTemplate, props) : null;
+    return props.emptyTemplate && !hasFiles && !hasUploadedFiles ? ObjectUtils.getJSXElement(props.emptyTemplate, props) : null;
   };
   var createProgressBarContent = function createProgressBarContent() {
     if (props.progressBarTemplate) {
@@ -23466,7 +23569,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     var contentClassName = classNames('p-fileupload-content', props.contentClassName);
     var chooseButton = createChooseButton();
     var emptyContent = createEmptyContent();
-    var uploadButton, cancelButton, filesList, progressBar;
+    var uploadButton, cancelButton, filesList, uplaodedFilesList, progressBar;
     if (!props.auto) {
       var uploadOptions = props.uploadOptions;
       var cancelOptions = props.cancelOptions;
@@ -23495,6 +23598,9 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       filesList = createFiles();
       progressBar = createProgressBarContent();
     }
+    if (hasUploadedFiles) {
+      uplaodedFilesList = createUploadedFiles();
+    }
     var header = /*#__PURE__*/React__namespace.createElement("div", {
       className: headerClassName,
       style: props.headerStyle
@@ -23524,7 +23630,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       onDrop: onDrop
     }, progressBar, /*#__PURE__*/React__namespace.createElement(Messages, {
       ref: messagesRef
-    }), filesList, emptyContent));
+    }), hasFiles ? filesList : null, hasUploadedFiles ? uplaodedFilesList : null, emptyContent));
   };
   var createBasic = function createBasic() {
     var chooseOptions = props.chooseOptions;
@@ -29101,6 +29207,7 @@ var OrderListBase = {
     dragdrop: false,
     tabIndex: 0,
     dataKey: null,
+    breakpoint: '960px',
     onChange: null,
     itemTemplate: null,
     filter: false,
@@ -29448,8 +29555,13 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     filterValueState = _React$useState4[0],
     setFilterValueState = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    attributeSelectorState = _React$useState6[0],
+    setAttributeSelectorState = _React$useState6[1];
   var hasFilter = ObjectUtils.isNotEmpty(filterValueState);
   var elementRef = React__namespace.useRef(null);
+  var styleElementRef = React__namespace.useRef(null);
   var reorderDirection = React__namespace.useRef(null);
   var onItemClick = function onItemClick(event) {
     var metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
@@ -29560,6 +29672,16 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       }
     }
   };
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      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;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+  };
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -29568,6 +29690,18 @@ var OrderList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       }
     };
   });
+  useMountEffect(function () {
+    !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+  });
+  useUpdateEffect(function () {
+    if (attributeSelectorState) {
+      elementRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   useUpdateEffect(function () {
     if (reorderDirection.current) {
       updateListScroll();
@@ -29747,6 +29881,7 @@ var OrganizationChartNode = /*#__PURE__*/React__namespace.memo(function (props)
       colSpan: colspan
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: nodeClassName,
+      style: node.style,
       onClick: function onClick(e) {
         return onNodeClick(e, node);
       }
@@ -29769,7 +29904,7 @@ var OrganizationChart = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
   var onNodeClick = function onNodeClick(event, node) {
     if (props.selectionMode) {
       var target = event.target;
-      if (node.selectable === false || !DomHandler.hasClass(target, 'p-node-toggler') || !DomHandler.hasClass(target, 'p-node-toggler-icon')) {
+      if (node.selectable === false || DomHandler.hasClass(target, 'p-node-toggler') || DomHandler.hasClass(target, 'p-node-toggler-icon')) {
         return;
       }
       var index = findIndexInSelection(node);
@@ -31000,6 +31135,7 @@ var PickListBase = {
     showSourceControls: true,
     showTargetControls: true,
     metaKeySelection: true,
+    filter: false,
     filterBy: null,
     filterMatchMode: 'contains',
     filterLocale: undefined,
@@ -31013,6 +31149,7 @@ var PickListBase = {
     targetFilterTemplate: null,
     tabIndex: 0,
     dataKey: null,
+    breakpoint: '960px',
     itemTemplate: null,
     sourceItemTemplate: null,
     targetItemTemplate: null,
@@ -31486,11 +31623,16 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     targetFilterValueState = _React$useState8[0],
     setTargetFilterValueState = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    attributeSelectorState = _React$useState10[0],
+    setAttributeSelectorState = _React$useState10[1];
   var elementRef = React__namespace.useRef(null);
   var sourceListElementRef = React__namespace.useRef(null);
   var targetListElementRef = React__namespace.useRef(null);
   var reorderedListElementRef = React__namespace.useRef(null);
   var reorderDirection = React__namespace.useRef(null);
+  var styleElementRef = React__namespace.useRef(null);
   var sourceSelection = props.sourceSelection ? props.sourceSelection : sourceSelectionState;
   var targetSelection = props.targetSelection ? props.targetSelection : targetSelectionState;
   var sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
@@ -31649,6 +31791,16 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
     return FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
   };
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = DomHandler.createInlineStyle(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    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-right:before {\n        content: \"\\e930\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-right:before {\n        content: \"\\e92c\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-left:before {\n        content: \"\\e933\"\n    }\n\n    .p-picklist[").concat(attributeSelectorState, "] .pi-angle-double-left:before {\n        content: \"\\e92f\"\n    }\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+  };
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -31657,6 +31809,18 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }
     };
   });
+  useMountEffect(function () {
+    !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+  });
+  useUpdateEffect(function () {
+    if (attributeSelectorState) {
+      elementRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   useUpdateEffect(function () {
     if (reorderedListElementRef.current) {
       handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);