@coreui/react-pro 5.22.0 → 5.23.1

package/dist/esm/components/one-time-password-input/COneTimePassword.js

@@ -0,0 +1,176 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef, useRef, useMemo, Children, useState, useEffect, useCallback, isValidElement, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../_virtual/index.js';
+import { CFormControlWrapper } from '../form/CFormControlWrapper.js';
+import { isValidInput, extractValidChars } from './utils.js';
+import getNextActiveElement from '../../utils/getNextActiveElement.js';
+import isRTL from '../../utils/isRTL.js';
+
+const COneTimePassword = forwardRef((_a, ref) => {
+    var { ariaLabel = (index, total) => `Digit ${index + 1} of ${total}`, autoSubmit = false, children, className, defaultValue, disabled = false, feedback, feedbackInvalid, feedbackValid, floatingClassName, floatingLabel, id, invalid, label, linear = true, masked = false, name, onChange, onComplete, placeholder, readOnly = false, required = false, size, text, tooltipFeedback, type = 'number', valid, value } = _a, rest = __rest(_a, ["ariaLabel", "autoSubmit", "children", "className", "defaultValue", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "floatingClassName", "floatingLabel", "id", "invalid", "label", "linear", "masked", "name", "onChange", "onComplete", "placeholder", "readOnly", "required", "size", "text", "tooltipFeedback", "type", "valid", "value"]);
+    const inputRefs = useRef([]);
+    const hiddenInputRef = useRef(null);
+    // Count valid OTP input children
+    const inputCount = useMemo(() => {
+        return Children.count(children);
+    }, [children]);
+    const [inputValues, setInputValues] = useState(() => {
+        var _a;
+        const initialValue = String((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : '');
+        return Array.from({ length: inputCount }, (_, i) => initialValue[i] || '');
+    });
+    // Update input values when value prop changes (controlled mode)
+    useEffect(() => {
+        if (value !== undefined) {
+            const valueString = String(value);
+            setInputValues(Array.from({ length: inputCount }, (_, i) => valueString[i] || ''));
+        }
+    }, [value, inputCount]);
+    // Update hidden input and trigger events
+    const updateValue = useCallback((newValues) => {
+        var _a;
+        const newValue = newValues.join('');
+        if (hiddenInputRef.current) {
+            hiddenInputRef.current.value = newValue;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        if (newValue.length === inputCount) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValue);
+            if (autoSubmit) {
+                const form = (_a = hiddenInputRef.current) === null || _a === void 0 ? void 0 : _a.closest('form');
+                if (form && typeof form.requestSubmit === 'function') {
+                    form.requestSubmit();
+                }
+            }
+        }
+    }, [autoSubmit, onChange, onComplete, inputCount]);
+    const handleInputChange = useCallback((index, event) => {
+        const inputValue = event.target.value;
+        if (inputValue.length === 1 && !isValidInput(inputValue, type)) {
+            return;
+        }
+        const newValues = [...inputValues];
+        newValues[index] = inputValue.length === 1 ? inputValue : '';
+        setInputValues(newValues);
+        updateValue(newValues);
+        if (inputValue.length === 1) {
+            const nextInput = getNextActiveElement(inputRefs.current, event.target, true, false);
+            nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
+        }
+    }, [inputValues, type, updateValue]);
+    const handleInputFocus = useCallback((event) => {
+        const { target } = event;
+        if (target.value) {
+            setTimeout(() => {
+                target.select();
+            }, 0);
+            return;
+        }
+        if (linear) {
+            const firstEmptyInput = inputRefs.current.find((input) => !(input === null || input === void 0 ? void 0 : input.value));
+            if (firstEmptyInput && firstEmptyInput !== target) {
+                firstEmptyInput.focus();
+            }
+        }
+    }, [linear]);
+    const handleKeyDown = useCallback((event) => {
+        const { key, target } = event;
+        if (key === 'Backspace' && target.value === '') {
+            const newValues = [...inputValues];
+            const prevInput = getNextActiveElement(inputRefs.current, target, false, false);
+            if (prevInput) {
+                const prevIndex = inputRefs.current.indexOf(prevInput);
+                if (prevIndex !== -1) {
+                    newValues[prevIndex] = '';
+                    setInputValues(newValues);
+                    updateValue(newValues);
+                    prevInput.focus();
+                }
+            }
+            return;
+        }
+        if (key === 'ArrowRight') {
+            if (linear && target.value === '') {
+                return;
+            }
+            const shouldMoveNext = !isRTL(target);
+            const nextInput = getNextActiveElement(inputRefs.current, target, shouldMoveNext, false);
+            nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
+            return;
+        }
+        if (key === 'ArrowLeft') {
+            const shouldMoveNext = isRTL(target);
+            const prevInput = getNextActiveElement(inputRefs.current, target, shouldMoveNext, false);
+            prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
+        }
+    }, [inputValues, linear, updateValue]);
+    const handlePaste = useCallback((index, event) => {
+        var _a, _b;
+        event.preventDefault();
+        const pastedData = event.clipboardData.getData('text');
+        const validChars = extractValidChars(pastedData, type);
+        if (!validChars)
+            return;
+        const newValues = [...inputValues];
+        const startIndex = index;
+        for (let i = 0; i < validChars.length && startIndex + i < inputCount; i++) {
+            newValues[startIndex + i] = validChars[i];
+        }
+        setInputValues(newValues);
+        updateValue(newValues);
+        // Focus the next empty input or the last filled input
+        const nextEmptyIndex = startIndex + validChars.length;
+        if (nextEmptyIndex < inputCount) {
+            (_a = inputRefs.current[nextEmptyIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = inputRefs.current.at(-1)) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [inputValues, type, updateValue, inputCount]);
+    let inputIndex = 0;
+    return (React.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, floatingClassName: floatingClassName, floatingLabel: floatingLabel, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
+        React.createElement("div", Object.assign({ className: classNames('form-otp', {
+                [`form-otp-${size}`]: size,
+            }, className), role: "group", ref: ref }, rest),
+            Children.map(children, (child, index) => {
+                var _a;
+                if (!isValidElement(child) ||
+                    ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) !== 'COneTimePasswordInput') {
+                    return child;
+                }
+                const inputChild = child;
+                const currentInputIndex = inputIndex++;
+                return cloneElement(inputChild, Object.assign(Object.assign({}, inputChild.props), { type: masked ? 'password' : 'text', className: classNames({
+                        'is-invalid': invalid,
+                        'is-valid': valid,
+                    }, inputChild.props.className), id: inputChild.props.id || (id ? `${id}-${currentInputIndex}` : undefined), name: inputChild.props.name || (name ? `${name}-${currentInputIndex}` : undefined), placeholder: inputChild.props.placeholder ||
+                        (placeholder && placeholder.length > 1
+                            ? placeholder[currentInputIndex]
+                            : placeholder), value: inputValues[currentInputIndex] || '', tabIndex: currentInputIndex === 0 ? 0 : inputValues[currentInputIndex - 1] ? 0 : -1, disabled: disabled || inputChild.props.disabled, readOnly: readOnly || inputChild.props.readOnly, required: required || inputChild.props.required, 'aria-label': inputChild.props['aria-label'] || ariaLabel(currentInputIndex, inputCount), inputMode: type === 'number' ? 'numeric' : 'text', pattern: type === 'number' ? '[0-9]*' : '.*', onInput: (event) => {
+                        var _a, _b;
+                        handleInputChange(currentInputIndex, event);
+                        (_b = (_a = inputChild.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                    }, onFocus: (event) => {
+                        var _a, _b;
+                        handleInputFocus(event);
+                        (_b = (_a = inputChild.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                    }, onKeyDown: (event) => {
+                        var _a, _b;
+                        handleKeyDown(currentInputIndex, event);
+                        (_b = (_a = inputChild.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                    }, onPaste: (event) => {
+                        var _a, _b;
+                        handlePaste(index, event);
+                        (_b = (_a = inputChild.props).onPaste) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                    }, ref: (el) => {
+                        inputRefs.current[currentInputIndex] = el;
+                    } }));
+            }),
+            React.createElement("input", { type: "hidden", id: id, name: name, value: inputValues.join(''), disabled: disabled, ref: hiddenInputRef }))));
+});
+COneTimePassword.propTypes = Object.assign({ ariaLabel: PropTypes.func, autoSubmit: PropTypes.bool, children: PropTypes.node, className: PropTypes.string, defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), disabled: PropTypes.bool, id: PropTypes.string, linear: PropTypes.bool, masked: PropTypes.bool, name: PropTypes.string, onChange: PropTypes.func, onComplete: PropTypes.func, placeholder: PropTypes.string, readOnly: PropTypes.bool, required: PropTypes.bool, size: PropTypes.oneOf(['sm', 'lg']), type: PropTypes.oneOf(['number', 'text']), value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }, CFormControlWrapper.propTypes);
+COneTimePassword.displayName = 'COneTimePassword';
+
+export { COneTimePassword };
+//# sourceMappingURL=COneTimePassword.js.map

package/dist/esm/components/one-time-password-input/COneTimePassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"COneTimePassword.js","sources":["../../../../src/components/one-time-password-input/COneTimePassword.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/components/one-time-password-input/COneTimePasswordInput.d.ts

@@ -0,0 +1,8 @@
+import React, { InputHTMLAttributes } from 'react';
+export interface COneTimePasswordInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+}
+export declare const COneTimePasswordInput: React.ForwardRefExoticComponent<COneTimePasswordInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/one-time-password-input/COneTimePasswordInput.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef } from 'react';
+import classNames from '../../_virtual/index.js';
+
+const COneTimePasswordInput = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement("input", Object.assign({ className: classNames('form-otp-control', className), maxLength: 1, autoComplete: "off", ref: ref }, rest)));
+});
+COneTimePasswordInput.displayName = 'COneTimePasswordInput';
+
+export { COneTimePasswordInput };
+//# sourceMappingURL=COneTimePasswordInput.js.map

package/dist/esm/components/one-time-password-input/COneTimePasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"COneTimePasswordInput.js","sources":["../../../../src/components/one-time-password-input/COneTimePasswordInput.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUO,MAAM,qBAAqB,GAAG,UAAU,CAC7C,CAAC,EAAsB,EAAE,GAAG,KAAI;AAA/B,IAAA,IAAA,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAA,MAAA,CAAA,EAAA,EAApB,aAAsB,CAAF;IACnB,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,EACpD,SAAS,EAAE,CAAC,EACZ,YAAY,EAAC,KAAK,EAClB,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,CAAA,CACR;AAEN,CAAC;AAGH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}

package/dist/esm/components/one-time-password-input/index.d.ts

@@ -0,0 +1,5 @@
+import { COneTimePassword } from './COneTimePassword';
+import { COneTimePasswordInput } from './COneTimePasswordInput';
+export { COneTimePassword, COneTimePasswordInput };
+export type { COneTimePasswordProps } from './COneTimePassword';
+export type { COneTimePasswordInputProps } from './COneTimePasswordInput';

package/dist/esm/components/one-time-password-input/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isValidInput: (inputValue: string, type: "number" | "text") => boolean;
+export declare const extractValidChars: (text: string, type: "number" | "text") => string;

package/dist/esm/components/one-time-password-input/utils.js

@@ -0,0 +1,25 @@
+const isValidInput = (inputValue, type) => {
+    if (inputValue.length !== 1)
+        return false;
+    switch (type) {
+        case 'number': {
+            return /^\d$/.test(inputValue);
+        }
+        default: {
+            return /^.$/.test(inputValue);
+        }
+    }
+};
+const extractValidChars = (text, type) => {
+    switch (type) {
+        case 'number': {
+            return text.replaceAll(/\D/g, '');
+        }
+        default: {
+            return text;
+        }
+    }
+};
+
+export { extractValidChars, isValidInput };
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/one-time-password-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/one-time-password-input/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"MAAa,YAAY,GAAG,CAAC,UAAkB,EAAE,IAAuB,KAAa;AACnF,IAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;IAEzC,QAAQ,IAAI;QACV,KAAK,QAAQ,EAAE;AACb,YAAA,OAAO,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;QAChC;QACA,SAAS;AACP,YAAA,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;QAC/B;;AAEJ;MAEa,iBAAiB,GAAG,CAAC,IAAY,EAAE,IAAuB,KAAY;IACjF,QAAQ,IAAI;QACV,KAAK,QAAQ,EAAE;YACb,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,CAAC;QACnC;QACA,SAAS;AACP,YAAA,OAAO,IAAI;QACb;;AAEJ;;;;"}

package/dist/esm/index.js

@@ -98,6 +98,8 @@ export { COffcanvas } from './components/offcanvas/COffcanvas.js';
 export { COffcanvasBody } from './components/offcanvas/COffcanvasBody.js';
 export { COffcanvasHeader } from './components/offcanvas/COffcanvasHeader.js';
 export { COffcanvasTitle } from './components/offcanvas/COffcanvasTitle.js';
+export { COneTimePassword } from './components/one-time-password-input/COneTimePassword.js';
+export { COneTimePasswordInput } from './components/one-time-password-input/COneTimePasswordInput.js';
 export { CPasswordInput } from './components/password-input/CPasswordInput.js';
 export { CPagination } from './components/pagination/CPagination.js';
 export { CPaginationItem } from './components/pagination/CPaginationItem.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "5.22.0",
+  "version": "5.23.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,34 +41,34 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.20.0",
+    "@coreui/coreui-pro": "^5.21.0",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
     "@types/prop-types": "15.7.15",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@types/react-transition-group": "^4.4.12",
     "classnames": "^2.5.1",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.50.2",
-    "ts-jest": "^29.4.2",
+    "rollup": "^4.52.4",
+    "ts-jest": "^29.4.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/autocomplete/CAutocomplete.tsx

@@ -749,23 +749,25 @@ export const CAutocomplete = forwardRef<HTMLDivElement, CAutocompleteProps>(
                     }}
                   ></button>
                 )}
-                <button
-                  type="button"
-                  className="autocomplete-indicator"
-                  disabled={
-                    !(searchNoResultsLabel || filteredOptions.length > 0) &&
-                    isExternalSearch(search)
-                  }
-                  onClick={(event) => {
-                    event.preventDefault()
-                    event.stopPropagation()
-                    if (_visible) {
-                      handleDropdownHide()
-                    } else {
-                      handleDropdownShow()
+                {indicator && (
+                  <button
+                    type="button"
+                    className="autocomplete-indicator"
+                    disabled={
+                      !(searchNoResultsLabel || filteredOptions.length > 0) &&
+                      isExternalSearch(search)
                     }
-                  }}
-                ></button>
+                    onClick={(event) => {
+                      event.preventDefault()
+                      event.stopPropagation()
+                      if (_visible) {
+                        handleDropdownHide()
+                      } else {
+                        handleDropdownShow()
+                      }
+                    }}
+                  ></button>
+                )}
               </div>
             )}
           </div>

package/src/components/focus-trap/CFocusTrap.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactElement, cloneElement, useEffect, useRef } from 'react'
-import { mergeRefs, focusableChildren } from './utils'
+import { mergeRefs, focusableChildren, getChildRef } from './utils'
 
 export interface CFocusTrapProps {
   /**
@@ -146,7 +146,10 @@ export const CFocusTrap: FC<CFocusTrapProps> = ({
 
       if (elements.length === 0) {
         container.focus({ preventScroll: true })
-      } else if (lastTabNavDirectionRef.current === 'backward') {
+        return
+      }
+
+      if (lastTabNavDirectionRef.current === 'backward') {
         elements.at(-1)?.focus({ preventScroll: true })
       } else {
         elements[0].focus({ preventScroll: true })
@@ -161,12 +164,8 @@ export const CFocusTrap: FC<CFocusTrapProps> = ({
       tabEventSourceRef.current = container
       lastTabNavDirectionRef.current = event.shiftKey ? 'backward' : 'forward'
 
-      if (!_additionalContainer) {
-        return
-      }
-
       const containerElements = focusableChildren(container)
-      const additionalElements = focusableChildren(_additionalContainer)
+      const additionalElements = _additionalContainer ? focusableChildren(_additionalContainer) : []
 
       if (containerElements.length === 0 && additionalElements.length === 0) {
         // No focusable elements, prevent tab
@@ -174,7 +173,28 @@ export const CFocusTrap: FC<CFocusTrapProps> = ({
         return
       }
 
+      const focusableElements = [...containerElements, ...additionalElements]
+
+      const firstFocusableElement = focusableElements[0] as HTMLElement
+      const lastFocusableElement = focusableElements.at(-1) as HTMLElement
       const activeElement = document.activeElement as HTMLElement
+
+      if (event.shiftKey && activeElement === firstFocusableElement) {
+        event.preventDefault()
+        lastFocusableElement.focus()
+        return
+      }
+
+      if (!event.shiftKey && activeElement === lastFocusableElement) {
+        event.preventDefault()
+        firstFocusableElement.focus()
+        return
+      }
+
+      if (!_additionalContainer) {
+        return
+      }
+
       const isInContainer = containerElements.includes(activeElement)
       const isInAdditional = additionalElements.includes(activeElement)
 
@@ -245,7 +265,12 @@ export const CFocusTrap: FC<CFocusTrapProps> = ({
 
   // Attach our ref to the ONLY child — no extra wrappers
   const onlyChild = React.Children.only(children)
-  const childRef = (onlyChild as React.ReactElement & { ref?: React.Ref<HTMLElement> }).ref
+
+  // Handle different ref access patterns between React versions
+  // React 19+: ref is accessed via element.props.ref
+  // React 18 and earlier: ref is accessed via element.ref
+  const childRef: React.Ref<HTMLElement> | undefined = getChildRef(onlyChild)
+
   const mergedRef = mergeRefs(childRef, (node: HTMLElement | null) => {
     containerRef.current = node
   })

package/src/components/focus-trap/utils.ts

@@ -23,6 +23,30 @@ export const focusableChildren = (element: HTMLElement): HTMLElement[] => {
   return elements.filter((el) => !isDisabled(el) && isVisible(el))
 }
 
+/**
+ * Extracts the ref from a React element, handling version differences between React 18 and 19+.
+ *
+ * In React 18 and earlier, refs are stored directly on the element object.
+ * In React 19+, refs are stored in the element's props object due to changes in React's internals.
+ * This function automatically detects the React version and uses the appropriate access pattern.
+ * @param child - The React element to extract the ref from
+ * @returns The ref attached to the element, or undefined if no ref is present
+ */
+export const getChildRef = (child: React.ReactElement): React.Ref<HTMLElement> | undefined => {
+  const major = Number(React.version?.split?.('.')[0] ?? 18)
+  // React 18 stores ref directly on the element
+  if (major <= 18 && 'ref' in child && child.ref !== undefined) {
+    return (child as React.ReactElement & { ref?: React.Ref<HTMLElement> }).ref
+  }
+
+  // React 19 stores ref in props
+  if (child.props && typeof child.props === 'object' && 'ref' in child.props) {
+    return (child.props as { ref?: React.Ref<HTMLElement> }).ref
+  }
+
+  return undefined
+}
+
 /**
  * Checks if an element is disabled.
  * Considers various ways an element can be disabled including CSS classes and attributes.

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from './multi-select'
 export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
+export * from './one-time-password-input'
 export * from './password-input'
 export * from './pagination'
 export * from './placeholder'

package/src/components/modal/CModal.tsx

@@ -120,7 +120,6 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     ref
   ) => {
     const modalRef = useRef<HTMLDivElement>(null)
-    const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
 
     const [_visible, setVisible] = useState(visible)
@@ -213,37 +212,37 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           {(state) => (
             <CConditionalPortal container={container} portal={portal}>
               <CModalContext.Provider value={contextValues}>
-                <div
-                  className={classNames(
-                    'modal',
-                    {
-                      'modal-static': staticBackdrop,
-                      fade: transition,
-                      show: state === 'entered',
-                    },
-                    className
-                  )}
-                  tabIndex={-1}
-                  {...(_visible
-                    ? { 'aria-modal': true, role: 'dialog' }
-                    : { 'aria-hidden': 'true' })}
-                  style={{
-                    ...(state !== 'exited' && { display: 'block' }),
-                  }}
-                  {...rest}
-                  ref={forkedRef}
-                >
-                  <CModalDialog
-                    alignment={alignment}
-                    fullscreen={fullscreen}
-                    scrollable={scrollable}
-                    size={size}
+                <CFocusTrap active={focus && state === 'entered'}>
+                  <div
+                    className={classNames(
+                      'modal',
+                      {
+                        'modal-static': staticBackdrop,
+                        fade: transition,
+                        show: state === 'entered',
+                      },
+                      className
+                    )}
+                    tabIndex={-1}
+                    {...(_visible
+                      ? { 'aria-modal': true, role: 'dialog' }
+                      : { 'aria-hidden': 'true' })}
+                    style={{
+                      ...(state !== 'exited' && { display: 'block' }),
+                    }}
+                    {...rest}
+                    ref={forkedRef}
                   >
-                    <CFocusTrap active={focus && state === 'entered'} restoreFocus>
-                      <CModalContent ref={modalContentRef}>{children}</CModalContent>
-                    </CFocusTrap>
-                  </CModalDialog>
-                </div>
+                    <CModalDialog
+                      alignment={alignment}
+                      fullscreen={fullscreen}
+                      scrollable={scrollable}
+                      size={size}
+                    >
+                      <CModalContent>{children}</CModalContent>
+                    </CModalDialog>
+                  </div>
+                </CFocusTrap>
               </CModalContext.Provider>
             </CConditionalPortal>
           )}