Port fixes5 (#5713)

* Fix #5485: Messages restore close animation

* Fix #5490: useDebounce fixed

* Fix #5492: Listbox passthrough fixes

* Fix #5493: Multiselect passthrough fixes

* Fix #5485: Messages restore close animation

* Fix #5499: Autocomplete/Chips PT fixes

* Fix #5479: CascadeSelect PT fixes

* Fix #5509: Button loadingIcon Tailwind fix

* Fix #5512: Dropdown add tabindex for Tailwind

* Support roundingMode for InputNumber

* Fix #5523: BlockUI return activeElement focus

* Fix #5530: Chip onRemove event pass value

* DataTable:converted to data- lookups instead of className lookups

* Fix #5543: OverlayPanel Tailwind close icon

* Fix #5546: prop type error in console

* Fix #5555: BodyCell frozen issue

* Fix #5561: Inplace respect active prop

* Fix #5568: MultiSelect filterInput PT

* Fix #5572: Multselect selectAllLabel was being added to DOM

* Tooltip fix Tailwind CSS

* Dialog Breakpoints

* Calendar disabled date handling

* Fix #5609: ToggleButton focusedState

* Fix #5610: Radio/Checkbox always fire onClick

* fix: #5613, TreeSelect: TreeSelect component is not supporting tooltips and is an issue in multiple select mode

* Fix #5623 - Otherprops not working for InputSwitch

* fix:Calendar not showing correctly in Table

* fix:Image preview zoom in bug

* Fix #5637: Sidebar aria-label close

* Accept array as PT value

* Datatable breakpoints

* fix:ConfirmDialog: acceptButton's pt don't respect button

components/lib/accordion/Accordion.js

@@ -176,7 +176,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
     };
 
     const isSelected = (index) => {
-        return props.multiple ? activeIndex && activeIndex.some((i) => i === index) : activeIndex === index;
+        return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some((i) => i === index) : activeIndex === index;
     };
 
     React.useImperativeHandle(ref, () => ({

components/lib/autocomplete/AutoCompletePanel.js

@@ -21,7 +21,8 @@ export const AutoCompletePanel = React.memo(
         const getPTOptions = (item, key) => {
             return _ptm(key, {
                 context: {
-                    selected: props.selectedItem.current === item
+                    selected: props.selectedItem.current === item,
+                    disabled: item.disabled
                 }
             });
         };
@@ -107,7 +108,7 @@ export const AutoCompletePanel = React.memo(
                         className: cx('item', { suggestion }),
                         style,
                         onClick: (e) => props.onItemClick(e, suggestion),
-                        'aria-selected': props.selectedItem === suggestion,
+                        'aria-selected': props.selectedItem.current === suggestion,
                         'data-p-disabled': suggestion.disabled
                     },
                     getPTOptions(suggestion, 'item')

components/lib/autocomplete/autocomplete.d.ts

@@ -216,6 +216,11 @@ export interface AutoCompleteContext {
      * @defaultValue false
      */
     selected: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
 }
 
 /**

components/lib/blockui/BlockUI.js

@@ -13,6 +13,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
     const [visibleState, setVisibleState] = React.useState(props.blocked);
     const elementRef = React.useRef(null);
     const maskRef = React.useRef(null);
+    const activeElementRef = React.useRef(null);
 
     const { ptm, cx, isUnstyled } = BlockUIBase.setMetaData({
         props
@@ -22,13 +23,18 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
 
     const block = () => {
         setVisibleState(true);
+        activeElementRef.current = document.activeElement;
     };
 
     const unblock = () => {
         const callback = () => {
             setVisibleState(false);
 
-            props.fullScreen && DomHandler.unblockBodyScroll();
+            if (props.fullScreen) {
+                DomHandler.unblockBodyScroll();
+                activeElementRef.current && activeElementRef.current.focus();
+            }
+
             props.onUnblocked && props.onUnblocked();
         };
 
@@ -46,7 +52,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
     const onPortalMounted = () => {
         if (props.fullScreen) {
             DomHandler.blockBodyScroll();
-            document.activeElement.blur();
+            activeElementRef.current && activeElementRef.current.blur();
         }
 
         if (props.autoZIndex) {
@@ -67,9 +73,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
     }, [props.blocked]);
 
     useUnmountEffect(() => {
-        if (props.fullScreen) {
-            DomHandler.unblockBodyScroll();
-        }
+        props.fullScreen && DomHandler.unblockBodyScroll();
 
         ZIndexUtils.clear(maskRef.current);
     });

components/lib/calendar/Calendar.js

@@ -1839,11 +1839,7 @@ export const Calendar = React.memo(
                 }
             }
 
-            if (props.disabledDates || props.enabledDates) {
-                validDate = !isDateDisabled(day, month, year);
-            }
-
-            if (props.disabledDays && currentView === 'date') {
+            if (props.disabledDates || props.enabledDates || props.disabledDays) {
                 validDay = !isDayDisabled(day, month, year);
             }
 
@@ -1993,27 +1989,46 @@ export const Calendar = React.memo(
             return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
         };
 
-        const isDateDisabled = (day, month, year) => {
+        const isDayDisabled = (day, month, year) => {
             if (props.disabledDates) {
-                return props.disabledDates.some((d) => d.getFullYear() === year && d.getMonth() === month && d.getDate() === day);
+                if (props.disabledDates.some((d) => d.getFullYear() === year && d.getMonth() === month && d.getDate() === day)) {
+                    return true;
+                }
+            } else if (props.enabledDates) {
+                if (!props.enabledDates.some((d) => d.getFullYear() === year && d.getMonth() === month && d.getDate() === day)) {
+                    return true;
+                }
             }
 
-            if (props.enabledDates) {
-                return !props.enabledDates.some((d) => d.getFullYear() === year && d.getMonth() === month && d.getDate() === day);
+            if (props.disabledDays && currentView === 'date') {
+                let weekday = new Date(year, month, day);
+                let weekdayNumber = weekday.getDay();
+
+                if (props.disabledDays.indexOf(weekdayNumber) !== -1) {
+                    return true;
+                }
             }
 
             return false;
         };
 
-        const isDayDisabled = (day, month, year) => {
-            if (props.disabledDays) {
-                let weekday = new Date(year, month, day);
-                let weekdayNumber = weekday.getDay();
+        const isMonthYearDisabled = (month, year) => {
+            const daysCountInAllMonth = month === -1 ? new Array(12).fill(0).map((_, i) => getDaysCountInMonth(i, year)) : [getDaysCountInMonth(month, year)];
+
+            for (let i = 0; i < daysCountInAllMonth.length; i++) {
+                const monthDays = daysCountInAllMonth[i];
+                const _month = month === -1 ? i : month;
+
+                for (let day = 1; day <= monthDays; day++) {
+                    let isDateSelectable = isSelectable(day, _month, year);
 
-                return props.disabledDays.indexOf(weekdayNumber) !== -1;
+                    if (isDateSelectable) {
+                        return false;
+                    }
+                }
             }
 
-            return false;
+            return true;
         };
 
         const updateInputfield = (value) => {
@@ -2582,7 +2597,10 @@ export const Calendar = React.memo(
 
         useUpdateEffect(() => {
             if (overlayVisibleState || props.visible) {
-                alignOverlay();
+                // Github #5529
+                setTimeout(() => {
+                    alignOverlay();
+                });
             }
         }, [currentView, overlayVisibleState, props.visible]);
 
@@ -3654,18 +3672,18 @@ export const Calendar = React.memo(
                         {monthPickerValues().map((m, i) => {
                             const monthProps = mergeProps(
                                 {
-                                    className: cx('month', { isMonthSelected, isSelectable, i, currentYear }),
+                                    className: cx('month', { isMonthSelected, isMonthYearDisabled, i, currentYear }),
                                     onClick: (event) => onMonthSelect(event, i),
                                     onKeyDown: (event) => onMonthCellKeydown(event, i),
-                                    'data-p-disabled': !m.selectable,
+                                    'data-p-disabled': isMonthYearDisabled(i, currentYear),
                                     'data-p-highlight': isMonthSelected(i)
                                 },
                                 ptm('month', {
                                     context: {
                                         month: m,
                                         monthIndex: i,
                                         selected: isMonthSelected(i),
-                                        disabled: !m.selectable
+                                        disabled: isMonthYearDisabled(i, currentYear)
                                     }
                                 })
                             );
@@ -3697,17 +3715,17 @@ export const Calendar = React.memo(
                         {yearPickerValues().map((y, i) => {
                             const yearProps = mergeProps(
                                 {
-                                    className: cx('year', { isYearSelected, isSelectable, y }),
+                                    className: cx('year', { isYearSelected, isMonthYearDisabled, y }),
                                     onClick: (event) => onYearSelect(event, y),
                                     'data-p-highlight': isYearSelected(y),
-                                    'data-p-disabled': !isSelectable(0, -1, y)
+                                    'data-p-disabled': isMonthYearDisabled(-1, y)
                                 },
                                 ptm('year', {
                                     context: {
                                         year: y,
                                         yearIndex: i,
                                         selected: isYearSelected(i),
-                                        disabled: !y.selectable
+                                        disabled: isMonthYearDisabled(-1, y)
                                     }
                                 })
                             );

components/lib/calendar/Calendar.spec.js

@@ -0,0 +1,93 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { PrimeReactProvider } from '../api/Api';
+import { Calendar } from './Calendar';
+
+describe('Calendar', () => {
+    function getAllDatesOfYear(year) {
+        let startDate = new Date(year, 0, 1);
+        let endDate = new Date(year, 11, 31);
+
+        let dates = [];
+        let currentDate = startDate;
+
+        while (currentDate <= endDate) {
+            dates.push(new Date(currentDate));
+            currentDate.setDate(currentDate.getDate() + 1);
+        }
+
+        return dates;
+    }
+
+    test('When the days of the year are disabled, then the years and month should be disabled', async () => {
+        const { container } = render(
+            <PrimeReactProvider>
+                <Calendar value={new Date(2023, 11, 15)} inline view="year" disabledDates={getAllDatesOfYear(2023)} />
+            </PrimeReactProvider>
+        );
+
+        const years = container.querySelectorAll('.p-yearpicker-year');
+
+        for (const year of years) {
+            if (year.innerHTML === '2023') {
+                expect(year).toHaveAttribute('data-p-disabled', 'true');
+                expect(year).toHaveClass('p-disabled');
+            } else {
+                expect(year).toHaveAttribute('data-p-disabled', 'false');
+                expect(year).not.toHaveClass('p-disabled');
+            }
+        }
+
+        const { container: monthContainer } = render(
+            <PrimeReactProvider>
+                <Calendar value={new Date(2023, 11, 15)} inline view="month" disabledDates={getAllDatesOfYear(2023)} />
+            </PrimeReactProvider>
+        );
+
+        const months = monthContainer.querySelectorAll('.p-monthpicker-month');
+
+        for (const month of months) {
+            expect(month).toHaveAttribute('data-p-disabled', 'true');
+            expect(month).toHaveClass('p-disabled');
+        }
+    });
+
+    test('If any day of the month is not disabled, then both the year and month can be selected', async () => {
+        const disabledDates = getAllDatesOfYear(2023);
+
+        // January and December are not disabled.
+        disabledDates.shift();
+        disabledDates.pop();
+
+        const { container: yearContainer } = render(
+            <PrimeReactProvider>
+                <Calendar value={new Date(2023, 11, 15)} inline view="year" disabledDates={disabledDates} />
+            </PrimeReactProvider>
+        );
+        const years = yearContainer.querySelectorAll('.p-yearpicker-year');
+
+        for (const year of years) {
+            expect(year).toHaveAttribute('data-p-disabled', 'false');
+            expect(year).not.toHaveClass('p-disabled');
+        }
+
+        // month
+        const { container: monthContainer } = render(
+            <PrimeReactProvider>
+                <Calendar value={new Date(2023, 11, 15)} inline view="month" disabledDates={disabledDates} />
+            </PrimeReactProvider>
+        );
+
+        const months = monthContainer.querySelectorAll('.p-monthpicker-month');
+
+        Array.from(months).forEach((month, index) => {
+            if (index === 0 || index === 11) {
+                expect(month).toHaveAttribute('data-p-disabled', 'false');
+                expect(month).not.toHaveClass('p-disabled');
+            } else {
+                expect(month).toHaveAttribute('data-p-disabled', 'true');
+                expect(month).toHaveClass('p-disabled');
+            }
+        });
+    });
+});

components/lib/calendar/CalendarBase.js

@@ -190,9 +190,9 @@ const classes = {
     clearButton: 'p-button-text',
     footer: 'p-datepicker-footer',
     yearPicker: 'p-yearpicker',
-    year: ({ isYearSelected, isSelectable, y }) => classNames('p-yearpicker-year', { 'p-highlight': isYearSelected(y), 'p-disabled': !isSelectable(0, -1, y) }),
+    year: ({ isYearSelected, y, isMonthYearDisabled }) => classNames('p-yearpicker-year', { 'p-highlight': isYearSelected(y), 'p-disabled': isMonthYearDisabled(-1, y) }),
     monthPicker: 'p-monthpicker',
-    month: ({ isMonthSelected, isSelectable, i, currentYear }) => classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(i), 'p-disabled': !isSelectable(0, i, currentYear) }),
+    month: ({ isMonthSelected, isMonthYearDisabled, i, currentYear }) => classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(i), 'p-disabled': isMonthYearDisabled(i, currentYear) }),
     hourPicker: 'p-hour-picker',
     secondPicker: 'p-second-picker',
     minutePicker: 'p-minute-picker',

components/lib/cascadeselect/CascadeSelect.js

@@ -24,11 +24,14 @@ export const CascadeSelect = React.memo(
                 focused: focusedState,
                 overlayVisible: overlayVisibleState,
                 attributeSelector: attributeSelectorState
+            },
+            context: {
+                ...context
             }
         });
 
         useHandleStyle(CascadeSelectBase.css.styles, isUnstyled, { name: 'cascadeselect' });
-        useOnEscapeKey(overlayRef, overlayVisibleState, () => hide());
+
         const elementRef = React.useRef(null);
         const overlayRef = React.useRef(null);
         const inputRef = React.useRef(null);
@@ -46,6 +49,8 @@ export const CascadeSelect = React.memo(
             when: overlayVisibleState
         });
 
+        useOnEscapeKey(overlayRef, overlayVisibleState, () => hide());
+
         const onOptionSelect = (event) => {
             if (props.onChange) {
                 props.onChange({
@@ -330,7 +335,7 @@ export const CascadeSelect = React.memo(
                     ref: labelRef,
                     className: cx('label', { label })
                 },
-                ptm('label')
+                ptm('label', { context: { label, ...context } })
             );
 
             return <span {...labelProps}>{label}</span>;

components/lib/cascadeselect/CascadeSelectBase.js

@@ -25,10 +25,10 @@ const classes = {
             'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
         }),
     sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
-    item: ({ option, isOptionGroup, activeOptionState }) =>
+    item: ({ option, isGroup, isSelected }) =>
         classNames('p-cascadeselect-item', {
-            'p-cascadeselect-item-group': isOptionGroup(option),
-            'p-cascadeselect-item-active p-highlight': activeOptionState === option
+            'p-cascadeselect-item-group': isGroup,
+            'p-cascadeselect-item-active p-highlight': isSelected
         }),
     dropdownIcon: 'p-cascadeselect-trigger-icon',
     loadingIcon: 'p-cascadeselect-trigger-icon',