Merge branch 'master' into feature/issue-5644

components/doc/common/apidoc/index.json

@@ -47354,6 +47354,14 @@
                             "default": "0",
                             "description": "Active step index of stepper."
                         },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of end section."
+                        },
                         {
                             "name": "headerPosition",
                             "optional": true,
@@ -47394,6 +47402,14 @@
                             "default": "",
                             "description": "Used to configure passthrough(pt) options of the component."
                         },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of start section."
+                        },
                         {
                             "name": "unstyled",
                             "optional": true,
@@ -47477,6 +47493,20 @@
                             "type": "StepperPanelPassThroughOptionType",
                             "description": "Used to pass attributes to the end handler's DOM element."
                         },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the start's DOM element."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the right's DOM element."
+                        },
                         {
                             "name": "hooks",
                             "optional": true,
@@ -47542,6 +47572,9 @@
             "values": {
                 "StepperPassThroughOptionType": {
                     "values": "StepperPassThroughAttributes | Function | string | null | undefined"
+                },
+                "StepperPassThroughType": {
+                    "values": "PassThroughType<T, StepperPassThroughMethodOptions>"
                 }
             }
         }

components/doc/stepper/theming/styleddoc.js

@@ -67,6 +67,14 @@ export function StyledDoc() {
                             <td>p-stepper-content</td>
                             <td>Container element of stepper content.</td>
                         </tr>
+                        <tr>
+                            <td>p-stepper-start</td>
+                            <td>Start content container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-end</td>
+                            <td>End content container.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>

components/lib/breadcrumb/BreadCrumb.js

@@ -263,7 +263,7 @@ export const BreadCrumb = React.memo(
             <nav {...rootProps}>
                 <ol {...menuProps}>
                     {home}
-                    {home && separator}
+                    {home && !!items?.length && separator}
                     {items}
                 </ol>
             </nav>

components/lib/calendar/Calendar.js

@@ -1959,6 +1959,11 @@ export const Calendar = React.memo(
                     DomHandler.absolutePosition(overlayRef.current, inputRef.current);
                 }
             }
+
+            // #6093 Forcibly remove minWidth when in unstyled mode
+            if (isUnstyled()) {
+                overlayRef.current.style.minWidth = '';
+            }
         };
 
         const enableModality = () => {

components/lib/inputnumber/InputNumber.js

@@ -367,7 +367,12 @@ export const InputNumber = React.memo(
             }
 
             if (event.altKey || event.ctrlKey || event.metaKey) {
-                isSpecialChar.current = true;
+                // #7039 Treat cut as normal character
+                if (event.key.toLowerCase() === 'x' && (event.ctrlKey || event.metaKey)) {
+                    isSpecialChar.current = false;
+                } else {
+                    isSpecialChar.current = true;
+                }
 
                 return;
             }

components/lib/passthrough/tailwind/index.js

@@ -1224,9 +1224,9 @@ const Tailwind = {
             })
         },
         panel: ({ props }) => ({
-            className: classNames('bg-white dark:bg-gray-900', 'min-w-full', {
+            className: classNames('bg-white dark:bg-gray-900', 'top-0 left-0 w-auto min-w-min p-2 rounded-lg', {
                 'shadow-md border-0 absolute': !props.inline,
-                'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40 p-2 rounded-lg': props.inline
+                'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40': props.inline
             })
         }),
         header: {
@@ -1254,7 +1254,7 @@ const Tailwind = {
             )
         },
         table: {
-            className: classNames('border-collapse w-full', 'my-2')
+            className: classNames('border-collapse w-full', 'my-2 mx-0')
         },
         tableHeaderCell: 'p-2',
         weekDay: 'text-gray-600 dark:text-white/70',
@@ -1269,7 +1269,7 @@ const Tailwind = {
                     'cursor-pointer': !context.disabled
                 },
                 {
-                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
                     'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
                 }
             )
@@ -1280,7 +1280,7 @@ const Tailwind = {
                 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
                 'p-2 transition-shadow duration-200 rounded-lg',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
+                { 'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
             )
         }),
         yearPicker: {
@@ -1292,7 +1292,7 @@ const Tailwind = {
                 'p-2 transition-shadow duration-200 rounded-lg',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 {
-                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
                     'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
                 }
             )
@@ -1319,10 +1319,8 @@ const Tailwind = {
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        groupContainer: 'flex',
-        group: {
-            className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
-        },
+        groupContainer: '',
+        group: '',
         transition: TRANSITIONS.overlay
     },
     listbox: {

components/lib/stepper/Stepper.js

@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
-import { UniqueComponentId, classNames } from '../utils/Utils';
+import { UniqueComponentId, classNames, ObjectUtils } from '../utils/Utils';
 import { StepperBase } from './StepperBase';
 import { StepperContent } from './StepperContent';
 import { StepperHeader } from './StepperHeader';
@@ -14,6 +14,8 @@ export const Stepper = React.memo(
         const mergeProps = useMergeProps();
         const context = React.useContext(PrimeReactContext);
         const props = StepperBase.getProps(inProps, context);
+        const start = ObjectUtils.getJSXElement(props.start, props);
+        const end = ObjectUtils.getJSXElement(props.end, props);
         const { ptm, cx, isUnstyled, ptmo } = StepperBase.setMetaData({
             props
         });
@@ -23,6 +25,20 @@ export const Stepper = React.memo(
 
         useHandleStyle(StepperBase.css.styles, isUnstyled, { name: 'stepper' });
 
+        const startProps = mergeProps(
+            {
+                className: cx('start')
+            },
+            ptm('start')
+        );
+
+        const endProps = mergeProps(
+            {
+                className: cx('end')
+            },
+            ptm('end')
+        );
+
         useMountEffect(() => {
             if (!idState) {
                 setIdState(UniqueComponentId());
@@ -326,10 +342,10 @@ export const Stepper = React.memo(
 
         return (
             <div {...rootProps}>
-                {props.start && props.start()}
+                {start && <div {...startProps}>{start}</div>}
                 {props.orientation === 'horizontal' && createHorizontal()}
                 {props.orientation === 'vertical' && createVertical()}
-                {props.end && props.end()}
+                {end && <div {...endProps}>{end}</div>}
             </div>
         );
     })

components/lib/stepper/StepperBase.js

@@ -31,7 +31,9 @@ const classes = {
                 'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
             })
     },
-    panelContainer: 'p-stepper-panels'
+    panelContainer: 'p-stepper-panels',
+    start: 'p-stepper-start',
+    end: 'p-stepper-end'
 };
 
 const styles = `
@@ -134,7 +136,9 @@ export const StepperBase = ComponentBase.extend({
         orientation: 'horizontal',
         headerPosition: 'right',
         linear: false,
-        onChangeStep: null
+        onChangeStep: null,
+        start: null,
+        end: null
     },
     css: {
         classes,

components/lib/stepper/stepper.d.ts

@@ -11,8 +11,10 @@ import * as React from 'react';
 import { ComponentHooks } from '../componentbase/componentbase';
 import { PassThroughOptions } from '../passthrough';
 import { StepperPanelPassThroughOptionType } from '../stepperpanel/stepperpanel';
+import { PassThroughType } from '../utils';
 
 export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined;
+export declare type StepperPassThroughType<T> = PassThroughType<T, StepperPassThroughMethodOptions>;
 
 /**
  * Custom passthrough(pt) option method.
@@ -43,6 +45,14 @@ export interface StepperPassThroughOptions {
      * Used to pass attributes to the end handler's DOM element.
      */
     stepperpanel?: StepperPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the start's DOM element.
+     */
+    start?: StepperPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the right's DOM element.
+     */
+    end?: StepperPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Used to manage all lifecycle hooks
      * @see {@link ComponentHooks}
@@ -122,6 +132,14 @@ export interface StepperProps {
      * Callback to invoke when an active panel is changed.
      */
     onChangeStep?(event: StepperChangeEvent): void;
+    /**
+     * The template of start section.
+     */
+    start?: React.ReactNode | ((props: StepperProps) => React.ReactNode);
+    /**
+     * The template of end section.
+     */
+    end?: React.ReactNode | ((props: StepperProps) => React.ReactNode);
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {StepperPassThroughOptions}