Port fixes2 (#5710)

* Fix #5349: PanelMenu fix from PrimeVue * Fix #5360: Cascade select popup not closing on escape * fix: #5363, Mention: Page Breaks when navigating to Mention component * fix: #5365 SplitButton popup not closing on escape button click * Fix #5367: SpeedDial close on escape * Fix #2666: Fix overlay components in cell editor * Fix #5363: Mention better fix * Fix #5379: Accordion tab header passthrough errors Fix #5546: AccordionTab Tailwind issues * Fix #5385: Password inputClassname missing * Fix #5390: Calendar only render navigator in first month of multiple months * Fix #5202: Calendar rendering performance increase * Fix #5535: Calendar update input on locale change * Fix #5533/#4147: Calendar respect viewDate * Fix Calendar Input Docs * fix:Calendar:currentView changed should invoke alignOverlay * Fix #5379: Accordion tab header passthrough errors Fix #5546: AccordionTab Tailwind issues
primefaces · Jan 9, 2024 · 24e22e0 · 24e22e0
1 parent 84e728a
commit 24e22e0
Show file tree

Hide file tree

Showing 15 changed files with 77 additions and 58 deletions.
diff --git a/components/doc/accordion/theming/tailwinddoc.js b/components/doc/accordion/theming/tailwinddoc.js
@@ -19,7 +19,7 @@ const TRANSITIONS = {
 const Tailwind = {  
     accordion: {
         root: 'mb-1',
-        accordiontab: {
+        tab: {
             root: 'mb-1',
             header: ({ props }) => ({
                 className: classNames(

diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
@@ -1,12 +1,12 @@
 import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect } from '../hooks/Hooks';
-import { DomHandler, classNames, IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils';
-import { AccordionBase, AccordionTabBase } from './AccordionBase';
-import { ChevronRightIcon } from '../icons/chevronright';
 import { ChevronDownIcon } from '../icons/chevrondown';
-import { PrimeReactContext, ariaLabel } from '../api/Api';
-import { useHandleStyle } from '../componentbase/ComponentBase';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils';
+import { AccordionBase, AccordionTabBase } from './AccordionBase';
 
 export const AccordionTab = () => {};
 
@@ -47,7 +47,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
             }
         };
 
-        return mergeProps(ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(tab.props, key, tabMetaData));
+        return mergeProps(ptm(`accordion.${key}`, { tab: tabMetaData }), ptm(`tab.${key}`, { accordiontab: tabMetaData }), ptm(`tab.${key}`, tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
     };
 
     const getTabProp = (tab, name) => AccordionTabBase.getCProp(tab, name);
@@ -205,7 +205,8 @@ export const Accordion = React.forwardRef((inProps, ref) => {
             },
             getTabPT(tab, 'headertitle', index)
         );
-        const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), AccordionTabBase.getCProps(tab)) : <span {...headerTitleProps}>{getTabProp(tab, 'header')}</span>;
+        const tabCProps = AccordionTabBase.getCProps(tab);
+        const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : <span {...headerTitleProps}>{ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps)}</span>;
         const headerIconProps = mergeProps(
             {
                 'aria-hidden': 'true',

diff --git a/components/lib/accordion/accordion.d.ts b/components/lib/accordion/accordion.d.ts
@@ -99,7 +99,7 @@ interface AccordionTabProps {
     /**
      * Used to define the header of the tab.
      */
-    header?: React.ReactNode | undefined;
+    header?: React.ReactNode | ((props: AccordionTabProps) => React.ReactNode) | undefined;
     /**
      * Style class of the tab header.
      */

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -892,7 +892,7 @@ export const Calendar = React.memo(
                 value.setFullYear(viewYear);
             }
 
-            if (props.monthNavigator && props.view !== 'month') {
+            if (renderMonthsNavigator(0)) {
                 let viewMonth = value.getMonth();
                 let viewMonthWithMinMax = parseInt((isInMinYear(value) && Math.max(props.minDate.getMonth(), viewMonth).toString()) || (isInMaxYear(value) && Math.min(props.maxDate.getMonth(), viewMonth).toString()) || viewMonth);
 
@@ -944,7 +944,7 @@ export const Calendar = React.memo(
         const updateViewDate = (event, value) => {
             validateDate(value);
 
-            if (props.onViewDateChange) {
+            if (props.onViewDateChange && event) {
                 props.onViewDateChange({
                     originalEvent: event,
                     value
@@ -1496,19 +1496,27 @@ export const Calendar = React.memo(
                 ZIndexUtils.set(key, overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex[key]) || PrimeReact.zIndex[key]);
             }
 
-            alignOverlay();
-        };
-
-        const onOverlayEntered = () => {
             if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
+                let inputWidth = DomHandler.getOuterWidth(inputRef.current);
+
+                // #5435 must have reasonable width if input is too small
+                if (inputWidth < 220) {
+                    inputWidth = 220;
+                }
+
                 if (props.view === 'date') {
                     overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
-                    overlayRef.current.style.minWidth = DomHandler.getOuterWidth(inputRef.current) + 'px';
+                    overlayRef.current.style.minWidth = inputWidth + 'px';
                 } else {
-                    overlayRef.current.style.width = DomHandler.getOuterWidth(inputRef.current) + 'px';
+                    overlayRef.current.style.minWidth = inputWidth + 'px';
+                    overlayRef.current.style.width = inputWidth + 'px';
                 }
             }
 
+            alignOverlay();
+        };
+
+        const onOverlayEntered = () => {
             bindOverlayListener();
             props.onShow && props.onShow();
             DomHandler.focusFirstElement(overlayRef.current);
@@ -2566,7 +2574,17 @@ export const Calendar = React.memo(
             if (!props.onViewDateChange && !viewStateChanged.current) {
                 setValue(props.value);
             }
-        }, [props.onViewDateChange, props.value]);
+
+            if (props.viewDate) {
+                updateViewDate(null, getViewDate(props.viewDate));
+            }
+        }, [props.onViewDateChange, props.value, props.viewDate]);
+
+        useUpdateEffect(() => {
+            if (overlayVisibleState || props.visible) {
+                alignOverlay();
+            }
+        }, [currentView, overlayVisibleState, props.visible]);
 
         useUpdateEffect(() => {
             const newDate = props.value;
@@ -2603,7 +2621,7 @@ export const Calendar = React.memo(
 
         useUpdateEffect(() => {
             updateInputfield(props.value);
-        }, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec, props.showTime]);
+        }, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec, props.showTime, props.locale]);
 
         useUpdateEffect(() => {
             if (overlayRef.current) {
@@ -2709,10 +2727,14 @@ export const Calendar = React.memo(
             );
         };
 
-        const createTitleMonthElement = (month) => {
+        const renderMonthsNavigator = (index) => {
+            return props.monthNavigator && props.view !== 'month' && (props.numberOfMonths === 1 || index === 0);
+        };
+
+        const createTitleMonthElement = (month, monthIndex) => {
             const monthNames = localeOption('monthNames', props.locale);
 
-            if (props.monthNavigator && props.view !== 'month') {
+            if (renderMonthsNavigator(monthIndex)) {
                 const viewDate = getViewDate();
                 const viewMonth = viewDate.getMonth();
                 const displayedMonthOptions = monthNames
@@ -2866,8 +2888,8 @@ export const Calendar = React.memo(
             return null;
         };
 
-        const createTitle = (monthMetaData) => {
-            const month = createTitleMonthElement(monthMetaData.month);
+        const createTitle = (monthMetaData, index) => {
+            const month = createTitleMonthElement(monthMetaData.month, index);
             const year = createTitleYearElement(monthMetaData.year);
             const decade = createTitleDecadeElement();
             const titleProps = mergeProps(
@@ -2948,12 +2970,7 @@ export const Calendar = React.memo(
                 })
             );
 
-            return (
-                <span {...dayLabelProps}>
-                    {content}
-                    <Ripple />
-                </span>
-            );
+            return <span {...dayLabelProps}>{content}</span>;
         };
 
         const createWeek = (weekDates, weekNumber, groupIndex) => {
@@ -3063,7 +3080,7 @@ export const Calendar = React.memo(
             const weekDays = createWeekDaysMeta();
             const backwardNavigator = createBackwardNavigator(index === 0);
             const forwardNavigator = createForwardNavigator(props.numberOfMonths === 1 || index === props.numberOfMonths - 1);
-            const title = createTitle(monthMetaData);
+            const title = createTitle(monthMetaData, index);
 
             const dateViewGrid = createDateViewGrid(monthMetaData, weekDays, index);
             const header = props.headerTemplate ? props.headerTemplate() : null;

diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
@@ -67,9 +67,8 @@ export interface CalendarPassThroughOptions {
     header?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
      */
-    previousButton?: ButtonPassThroughOptions;
+    previousButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the previous icon's DOM element.
      */
@@ -96,9 +95,8 @@ export interface CalendarPassThroughOptions {
     decadeTitleText?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
      */
-    nextButton?: ButtonPassThroughOptions;
+    nextButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
     /**
      * Uses to pass attributes to the next icon's DOM element.
      */

diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -2,14 +2,14 @@ import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useMountEffect, useOnEscapeKey, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { ChevronDownIcon } from '../icons/chevrondown';
+import { SpinnerIcon } from '../icons/spinner';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
 import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils';
 import { CascadeSelectBase } from './CascadeSelectBase';
 import { CascadeSelectSub } from './CascadeSelectSub';
-import { SpinnerIcon } from '../icons/spinner';
 
 export const CascadeSelect = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -28,6 +28,7 @@ export const CascadeSelect = React.memo(
         });
 
         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);

diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
@@ -58,7 +58,10 @@ export const BodyCell = React.memo((props) => {
         type: 'click',
         listener: (e) => {
             if (!selfClick.current && isOutsideClicked(e.target)) {
-                switchCellToViewMode(e, true);
+                // #2666 for overlay components and outside is clicked
+                setTimeout(() => {
+                    switchCellToViewMode(e, true);
+                }, 0);
             }
 
             selfClick.current = false;

diff --git a/components/lib/hooks/useStyle.js b/components/lib/hooks/useStyle.js
@@ -17,7 +17,7 @@ export const useStyle = (css, options = {}) => {
     };
 
     const load = () => {
-        if (!document) return;
+        if (!document || isLoaded) return;
 
         const styleContainer = context?.styleContainer || document.head;
 
@@ -33,8 +33,6 @@ export const useStyle = (css, options = {}) => {
             name && styleRef.current.setAttribute('data-primereact-style-id', name);
         }
 
-        if (isLoaded) return;
-
         styleRef.current.textContent = css;
 
         setIsLoaded(true);
@@ -52,7 +50,7 @@ export const useStyle = (css, options = {}) => {
 
         // return () => {if (!manual) unload()}; /* @todo */
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [manual]);
 
     return {
         id,

diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { InputTextarea } from '../inputtextarea/InputTextarea';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
@@ -352,10 +352,6 @@ export const Mention = React.memo(
             ObjectUtils.combinedRefs(inputRef, props.inputRef);
         }, [inputRef, props.inputRef]);
 
-        useMountEffect(() => {
-            alignOverlay();
-        });
-
         useUpdateEffect(() => {
             if (searchingState) {
                 props.suggestions && props.suggestions.length ? show() : hide();

diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
@@ -7,7 +7,7 @@ const classes = {
     headerLabel: 'p-menuitem-text',
     headerAction: 'p-panelmenu-header-link',
     panel: ({ item }) => classNames('p-panelmenu-panel', item.className),
-    header: ({ active, item }) => classNames('p-component p-panelmenu-header', { 'p-highlight': active, 'p-disabled': item.disabled }),
+    header: ({ active, item }) => classNames('p-component p-panelmenu-header', { 'p-highlight': active && !!item.items, 'p-disabled': item.disabled }),
     headerContent: 'p-panelmenu-header-content',
     menuContent: 'p-panelmenu-content',
     root: ({ props }) => classNames('p-panelmenu p-component', props.className),

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -129,7 +129,7 @@ const Tailwind = {
     },
     accordion: {
         root: 'mb-1',
-        accordiontab: {
+        tab: {
             root: 'mb-1',
             header: ({ context }) => {
                 return {
@@ -1149,10 +1149,10 @@ const Tailwind = {
             })
         }),
         input: {
-            root: ({ props }) => ({
+            root: ({ parent }) => ({
                 className: classNames('font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none', 'hover:border-blue-500', {
-                    'rounded-lg': !props.showIcon,
-                    'border-r-0 rounded-l-lg': props.showIcon
+                    'rounded-lg': !parent.props.showIcon,
+                    'border-r-0 rounded-l-lg': parent.props.showIcon
                 })
             })
         },

diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
-import { useMountEffect, useOverlayListener, useUnmountEffect, useOnEscapeKey } from '../hooks/Hooks';
+import { useMountEffect, useOnEscapeKey, useOverlayListener, useUnmountEffect } from '../hooks/Hooks';
 import { EyeIcon } from '../icons/eye';
 import { EyeSlashIcon } from '../icons/eyeslash';
 import { InputText } from '../inputtext/InputText';
@@ -401,7 +401,7 @@ export const Password = React.memo(
                 ref: inputRef,
                 id: props.inputId,
                 ...inputProps,
-                className: cx('input'),
+                className: classNames(props.inputClassName, cx('input')),
                 onBlur: onBlur,
                 onFocus: onFocus,
                 onInput: onInput,

diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
@@ -11,12 +11,13 @@ export const Ripple = React.memo(
         const targetRef = React.useRef(null);
         const context = React.useContext(PrimeReactContext);
         const props = RippleBase.getProps(inProps, context);
+        const isRippleActive = (context && context.ripple) || PrimeReact.ripple;
 
         const metaData = {
             props
         };
 
-        useStyle(RippleBase.css.styles, { name: 'ripple' });
+        useStyle(RippleBase.css.styles, { name: 'ripple', manual: !isRippleActive });
 
         const { ptm, cx } = RippleBase.setMetaData({
             ...metaData
@@ -107,6 +108,8 @@ export const Ripple = React.memo(
             }
         });
 
+        if (!isRippleActive) return null;
+
         const rootProps = mergeProps(
             {
                 'aria-hidden': true,
@@ -116,7 +119,7 @@ export const Ripple = React.memo(
             ptm('root')
         );
 
-        return (context && context.ripple) || PrimeReact.ripple ? <span role="presentation" ref={inkRef} {...rootProps} onAnimationEnd={onAnimationEnd}></span> : null;
+        return <span role="presentation" ref={inkRef} {...rootProps} onAnimationEnd={onAnimationEnd}></span>;
     })
 );
 

diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { Button } from '../button/Button';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useEventListener, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useEventListener, useMountEffect, useOnEscapeKey, useUpdateEffect } from '../hooks/Hooks';
 import { MinusIcon } from '../icons/minus';
 import { PlusIcon } from '../icons/plus';
 import { Ripple } from '../ripple/Ripple';
@@ -27,6 +27,7 @@ export const SpeedDial = React.memo(
         const { ptm, cx, sx, isUnstyled } = SpeedDialBase.setMetaData(metaData);
 
         useHandleStyle(SpeedDialBase.css.styles, isUnstyled, { name: 'speeddial' });
+        useOnEscapeKey(elementRef, visible, () => hide());
         const isItemClicked = React.useRef(false);
         const elementRef = React.useRef(null);
         const listRef = React.useRef(null);