primereact 9.0.0-rc.1 → 9.1.0

package/primereact.all.js

@@ -3331,6 +3331,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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) {
@@ -3349,11 +3362,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var bind = function bind() {
       bindDocumentClickListener();
       bindWindowResizeListener();
+      bindWindowOrientationChangeListener();
       bindOverlayScrollListener();
     };
     var unbind = function unbind() {
       unbindDocumentClickListener();
       unbindWindowResizeListener();
+      unbindWindowOrientationChangeListener();
       unbindOverlayScrollListener();
     };
     React__namespace.useEffect(function () {
@@ -4409,8 +4424,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -4427,6 +4449,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   };
 
   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 () {
@@ -4472,13 +4495,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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();
@@ -5434,6 +5462,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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();
@@ -10193,12 +10223,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -10427,10 +10459,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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({
@@ -10575,6 +10612,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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();
@@ -10587,10 +10628,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -10611,6 +10664,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       };
     });
+    useMountEffect(function () {
+      if (props.breakpoint) {
+        !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+      }
+    });
     React__namespace.useEffect(function () {
       ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
@@ -13850,7 +13908,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   };
   var JumpToPageInputBase = {
     defaultProps: {
-      __TYPE: 'JumbToPageInput',
+      __TYPE: 'JumpToPageInput',
       page: null,
       rows: null,
       pageCount: null,
@@ -23048,26 +23106,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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');
@@ -23091,6 +23154,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
+    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 = '';
@@ -23255,6 +23331,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
                 });
               }
             }
+            setUploadedFilesState(function (prevUploadedFiles) {
+              return [].concat(_toConsumableArray(prevUploadedFiles), _toConsumableArray(files));
+            });
             clear();
           }
         };
@@ -23394,27 +23473,37 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -23437,13 +23526,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }, 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) {
@@ -23461,7 +23564,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -23490,6 +23593,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         filesList = createFiles();
         progressBar = createProgressBarContent();
       }
+      if (hasUploadedFiles) {
+        uplaodedFilesList = createUploadedFiles();
+      }
       var header = /*#__PURE__*/React__namespace.createElement("div", {
         className: headerClassName,
         style: props.headerStyle
@@ -23519,7 +23625,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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;
@@ -29096,6 +29202,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       dragdrop: false,
       tabIndex: 0,
       dataKey: null,
+      breakpoint: '960px',
       onChange: null,
       itemTemplate: null,
       filter: false,
@@ -29443,8 +29550,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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;
@@ -29555,6 +29667,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       }
     };
+    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,
@@ -29563,6 +29685,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       };
     });
+    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();
@@ -29742,6 +29876,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         colSpan: colspan
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: nodeClassName,
+        style: node.style,
         onClick: function onClick(e) {
           return onNodeClick(e, node);
         }
@@ -29764,7 +29899,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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);
@@ -30995,6 +31130,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       showSourceControls: true,
       showTargetControls: true,
       metaKeySelection: true,
+      filter: false,
       filterBy: null,
       filterMatchMode: 'contains',
       filterLocale: undefined,
@@ -31008,6 +31144,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       targetFilterTemplate: null,
       tabIndex: 0,
       dataKey: null,
+      breakpoint: '960px',
       itemTemplate: null,
       sourceItemTemplate: null,
       targetItemTemplate: null,
@@ -31481,11 +31618,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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;
@@ -31644,6 +31786,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -31652,6 +31804,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       };
     });
+    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);