@coreui/react-pro 5.15.0 → 5.17.0

package/src/components/stepper/CStepper.tsx

@@ -22,9 +22,23 @@ export interface CStepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onR
    * Controls the currently active step in the React Stepper component (Controlled mode).
    *
    * Use this prop when you want full control over the active step from the parent component.
+   *
+   * Use `activeStepNumber` instead. This prop uses 0-based indexing which can be confusing.
+   *
+   * @deprecated 5.16.0
    */
   activeStepIndex?: number
 
+  /**
+   * Controls the currently active step number in the React Stepper component (Controlled mode).
+   *
+   * Use this prop when you want full control over the active step from the parent component.
+   * Step numbers are 1-based (1, 2, 3, ...).
+   *
+   * @since 5.16.0
+   */
+  activeStepNumber?: number
+
   /**
    * Custom CSS class name applied to the main React Stepper container.
    */
@@ -34,9 +48,23 @@ export interface CStepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onR
    * Sets the initial active step index for the Form Wizard when the React Stepper is used in Uncontrolled mode.
    *
    * Useful when you want the Stepper to manage its own state internally.
+   *
+   * Use `defaultActiveStepNumber` instead. This prop uses 0-based indexing which can be confusing.
+   *
+   * @deprecated 5.16.0
    */
   defaultActiveStepIndex?: number
 
+  /**
+   * Sets the initial active step number for the Form Wizard when the React Stepper is used in Uncontrolled mode.
+   *
+   * Useful when you want the Stepper to manage its own state internally.
+   * Step numbers are 1-based (1, 2, 3, ...).
+   *
+   * @since 5.16.0
+   */
+  defaultActiveStepNumber?: number
+
   /**
    * Defines the overall layout orientation of the React Stepper component.
    *
@@ -71,6 +99,8 @@ export interface CStepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onR
 
   /**
    * Callback fired when the active step changes in the React Stepper component.
+   *
+   * @param stepNumber The new active step number (1-based)
    */
   onStepChange?: (stepNumber: number) => void
 
@@ -84,11 +114,13 @@ export interface CStepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onR
   onStepValidationComplete?: ({ stepNumber, isValid }: StepperStepValidationResult) => void
 
   /**
-   * Defines the steps for the React Sxtepper component.
+   * Defines the steps for the React Stepper component.
    *
-   * Each step is an object containing a label, optional content, and an optional `formRef` for validation.
+   * Each step can be either:
+   * - A string (simplified format): `['Step 1', 'Step 2', 'Step 3']`
+   * - An object (full format): containing a label, optional content, and an optional `formRef` for validation.
    */
-  steps: StepperStepData[]
+  steps: string[] | StepperStepData[]
 
   /**
    * Controls the internal layout of the step indicator (icon and label) inside each step when using a horizontal layout.
@@ -113,8 +145,10 @@ export interface CStepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onR
 export const CStepper = forwardRef<StepperRef, CStepperProps>(
   (
     {
+      activeStepNumber: controlledActiveStepNumber,
       activeStepIndex: controlledActiveStepIndex,
       className,
+      defaultActiveStepNumber,
       defaultActiveStepIndex = 0,
       layout = 'horizontal',
       linear = true,
@@ -134,20 +168,42 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
     const stepButtonRefs = useRef<(HTMLButtonElement | null)[]>([])
     const uniqueId = useId()
 
-    const isControlled = controlledActiveStepIndex !== undefined
+    // Handle backward compatibility and determine controlled vs uncontrolled mode
+    const isControlledByNumber = controlledActiveStepNumber !== undefined
+    const isControlledByIndex = controlledActiveStepIndex !== undefined
+    const isControlled = isControlledByNumber || isControlledByIndex
+
+    // Convert between step numbers (1-based) and indices (0-based)
+    const getDefaultActiveStepIndex = () => {
+      if (defaultActiveStepNumber !== undefined) {
+        return Math.max(0, defaultActiveStepNumber - 1)
+      }
+      return defaultActiveStepIndex
+    }
+
+    const getControlledActiveStepIndex = () => {
+      if (isControlledByNumber) {
+        return Math.max(0, controlledActiveStepNumber! - 1)
+      }
+      if (isControlledByIndex) {
+        return controlledActiveStepIndex!
+      }
+      return 0
+    }
+
     const [internalActiveStepIndex, setInternalActiveStepIndex] = useState(
-      isControlled ? controlledActiveStepIndex : defaultActiveStepIndex
+      isControlled ? getControlledActiveStepIndex() : getDefaultActiveStepIndex()
     )
     const [isFinished, setIsFinished] = useState(false)
 
-    const activeStepIndex = isControlled ? controlledActiveStepIndex : internalActiveStepIndex
+    const activeStepIndex = isControlled ? getControlledActiveStepIndex() : internalActiveStepIndex
 
     // Sync state if controlled prop changes
     useEffect(() => {
       if (isControlled) {
-        setInternalActiveStepIndex(controlledActiveStepIndex)
+        setInternalActiveStepIndex(getControlledActiveStepIndex())
       }
-    }, [controlledActiveStepIndex, isControlled])
+    }, [controlledActiveStepNumber, controlledActiveStepIndex, isControlled])
 
     // Ensure stepButtonRefs array has the correct size
     useEffect(() => {
@@ -160,7 +216,9 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
           return true
         }
 
-        const currentStepData = steps[index]
+        const currentStep = steps[index]
+        const currentStepData =
+          typeof currentStep === 'string' ? { label: currentStep } : currentStep
         const form = currentStepData?.formRef?.current
 
         if (form) {
@@ -171,14 +229,17 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
           })
 
           if (form && !isValid) {
-            form.reportValidity()
+            if (!form.noValidate) {
+              form.reportValidity()
+            }
+
             return false
           }
         }
 
         return true
       },
-      [steps, validation]
+      [steps, validation, onStepValidationComplete]
     )
 
     const setActiveStep = useCallback(
@@ -195,7 +256,7 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
         if (!isControlled) {
           setInternalActiveStepIndex(index)
         }
-        onStepChange?.(index + 1)
+        onStepChange?.(index + 1) // Always call with step number (1-based)
       },
       [steps.length, activeStepIndex, isStepValid, isControlled, onStepChange]
     )
@@ -232,17 +293,21 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
 
     const handleReset = () => {
       if (validation) {
-        steps.forEach((step) => step.formRef?.current?.reset())
+        steps.forEach((step) => {
+          const stepData = typeof step === 'string' ? { label: step } : step
+          stepData.formRef?.current?.reset()
+        })
       }
 
+      const resetIndex = getDefaultActiveStepIndex()
       if (!isControlled) {
-        setInternalActiveStepIndex(defaultActiveStepIndex)
+        setInternalActiveStepIndex(resetIndex)
       }
 
       setIsFinished(false)
-      onStepChange?.(defaultActiveStepIndex)
+      onStepChange?.(resetIndex + 1) // Call with step number (1-based)
       onReset?.()
-      stepButtonRefs.current[defaultActiveStepIndex]?.focus()
+      stepButtonRefs.current[resetIndex]?.focus()
     }
 
     const handleKeyDown = (event: KeyboardEvent<HTMLOListElement>) => {
@@ -319,6 +384,7 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
           role="tablist"
         >
           {steps.map((step, index) => {
+            const stepData = typeof step === 'string' ? { label: step } : step
             const isActive = !isFinished && index === activeStepIndex
             const isComplete = isFinished || index < activeStepIndex
             const isDisabled = isFinished || (linear && index > activeStepIndex + 1)
@@ -341,9 +407,11 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
                   id={stepId}
                   role="tab"
                   onClick={() => handleStepClick(index)}
-                  ref={(el) => (stepButtonRefs.current[index] = el)}
+                  ref={(el) => {
+                    stepButtonRefs.current[index] = el
+                  }}
                   aria-selected={isActive}
-                  {...(step.content && {
+                  {...(stepData.content && {
                     'aria-controls': panelId,
                   })}
                   tabIndex={isActive ? 0 : -1}
@@ -353,14 +421,14 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
                       <span className="stepper-step-indicator-icon" />
                     ) : (
                       <span className="stepper-step-indicator-text">
-                        {step.indicator ?? index + 1}
+                        {stepData.indicator ?? index + 1}
                       </span>
                     )}
                   </span>
-                  <span className="stepper-step-label">{step.label}</span>
+                  <span className="stepper-step-label">{stepData.label}</span>
                 </button>
                 {index < steps.length - 1 && <div className="stepper-step-connector" />}
-                {step.content && isVertical && (
+                {stepData.content && isVertical && (
                   <CCollapse
                     className="stepper-step-content"
                     id={panelId}
@@ -370,7 +438,7 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
                     aria-labelledby={stepId}
                     aria-live="polite"
                   >
-                    {step.content}
+                    {stepData.content}
                   </CCollapse>
                 )}
               </li>
@@ -378,9 +446,13 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
           })}
         </ol>
         {!isVertical &&
-          steps.some((step) => step.content !== undefined && step.content !== null) && (
+          steps.some((step) => {
+            const stepData = typeof step === 'string' ? { label: step } : step
+            return stepData.content !== undefined && stepData.content !== null
+          }) && (
             <div className="stepper-content">
               {steps.map((step, index) => {
+                const stepData = typeof step === 'string' ? { label: step } : step
                 const isActive = !isFinished && index === activeStepIndex
                 const stepId = `stepper-${rest.id || uniqueId}-step-${index}`
                 const panelId = `stepper-${rest.id || uniqueId}-panel-${index}`
@@ -397,7 +469,7 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
                     aria-labelledby={stepId}
                     aria-live="polite"
                   >
-                    {step.content}
+                    {stepData.content}
                   </div>
                 )
               })}
@@ -411,8 +483,10 @@ export const CStepper = forwardRef<StepperRef, CStepperProps>(
 CStepper.displayName = 'CStepper'
 
 CStepper.propTypes = {
+  activeStepNumber: PropTypes.number,
   activeStepIndex: PropTypes.number,
   className: PropTypes.string,
+  defaultActiveStepNumber: PropTypes.number,
   defaultActiveStepIndex: PropTypes.number,
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   linear: PropTypes.bool,
@@ -421,11 +495,14 @@ CStepper.propTypes = {
   onStepChange: PropTypes.func,
   onStepValidationComplete: PropTypes.func,
   steps: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node.isRequired,
-      content: PropTypes.node,
-      formRef: PropTypes.object, // Check for object shape might be better
-    }).isRequired
+    PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        label: PropTypes.node.isRequired,
+        content: PropTypes.node,
+        formRef: PropTypes.object, // Check for object shape might be better
+      }).isRequired,
+    ])
   ).isRequired,
   stepButtonLayout: PropTypes.oneOf(['horizontal', 'vertical']),
   validation: PropTypes.bool,

package/src/components/stepper/types.ts

@@ -11,7 +11,7 @@ export interface StepperStepData {
   indicator?: ReactNode
   label: ReactNode
   content?: ReactNode
-  formRef?: React.RefObject<HTMLFormElement> // Optional ref for validation
+  formRef?: React.RefObject<HTMLFormElement | null> // Optional ref for validation
 }
 
 export type StepperStepValidationResult = {

package/dist/cjs/components/accordion/CAccordionCollapse.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CCollapseProps } from '../collapse/CCollapse';
-export declare const CAccordionCollapse: React.ForwardRefExoticComponent<Omit<CCollapseProps, "horizontal"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/smart-table/CSmartTableFilter.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-interface CSmartTableFilterProps extends HTMLAttributes<HTMLInputElement> {
-    filterLabel?: string;
-    filterPlaceholder?: string;
-    value?: string | number;
-}
-export declare const CSmartTableFilter: React.ForwardRefExoticComponent<CSmartTableFilterProps & React.RefAttributes<HTMLInputElement>>;
-export {};

package/dist/cjs/components/smart-table/CSmartTableItemsPerPageSelector.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-interface CSmartTableItemsPerPageSelectorProps extends HTMLAttributes<HTMLSelectElement> {
-    itemsPerPage?: number;
-    itemsPerPageLabel?: string;
-    itemsPerPageOptions?: number[];
-}
-export declare const CSmartTableItemsPerPageSelector: React.ForwardRefExoticComponent<CSmartTableItemsPerPageSelectorProps & React.RefAttributes<HTMLSelectElement>>;
-export {};

package/dist/esm/components/accordion/CAccordionCollapse.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CCollapseProps } from '../collapse/CCollapse';
-export declare const CAccordionCollapse: React.ForwardRefExoticComponent<Omit<CCollapseProps, "horizontal"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/smart-table/CSmartTableFilter.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-interface CSmartTableFilterProps extends HTMLAttributes<HTMLInputElement> {
-    filterLabel?: string;
-    filterPlaceholder?: string;
-    value?: string | number;
-}
-export declare const CSmartTableFilter: React.ForwardRefExoticComponent<CSmartTableFilterProps & React.RefAttributes<HTMLInputElement>>;
-export {};

package/dist/esm/components/smart-table/CSmartTableItemsPerPageSelector.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-interface CSmartTableItemsPerPageSelectorProps extends HTMLAttributes<HTMLSelectElement> {
-    itemsPerPage?: number;
-    itemsPerPageLabel?: string;
-    itemsPerPageOptions?: number[];
-}
-export declare const CSmartTableItemsPerPageSelector: React.ForwardRefExoticComponent<CSmartTableItemsPerPageSelectorProps & React.RefAttributes<HTMLSelectElement>>;
-export {};