rsuite 6.0.0-canary-20250416 → 6.0.0-canary-20250424

package/esm/PinInput/PinInput.js

@@ -0,0 +1,219 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Input from "../Input/index.js";
+import usePinInputRefs from "./hooks/usePinInputRefs.js";
+import usePinValue from "./hooks/usePinValue.js";
+import { Box } from "../internals/Box/index.js";
+import { HStack } from "../Stack/index.js";
+import { forwardRef } from "../internals/utils/index.js";
+import { useStyles, useCustom, useEventCallback } from "../internals/hooks/index.js";
+/**
+ * Map `type` prop to regex for allowed keys
+ */
+function getAllowedKeys(type) {
+  if (type instanceof RegExp) {
+    return type;
+  }
+  switch (type) {
+    case 'alphabetic':
+      return /[A-Za-z]/;
+    case 'alphanumeric':
+      return /[A-Za-z0-9]/;
+    default:
+      // number and any other fallback
+      return /\d/;
+  }
+}
+const PinInput = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('PinInput', props);
+  const {
+    type = 'number',
+    as,
+    autoFocus,
+    attached,
+    className,
+    classPrefix = 'pin-input',
+    defaultValue = '',
+    disabled,
+    length = 4,
+    mask,
+    name,
+    otp,
+    placeholder,
+    readOnly,
+    size = 'md',
+    value: controlValue,
+    onChange,
+    onComplete,
+    ...rest
+  } = propsWithDefaults;
+
+  // Regex for filtering input chars based on type prop
+  const allowedKeys = getAllowedKeys(type);
+
+  // Determine inputMode based on type prop
+  const inputModeValue = type === 'number' ? 'numeric' : 'text';
+
+  // Determine input type attribute based on type prop and mask
+  const inputTypeValue = mask ? 'password' : type === 'number' ? 'tel' : 'text';
+  const {
+    withPrefix,
+    prefix,
+    merge
+  } = useStyles(classPrefix);
+
+  // Use our custom hook for handling input refs and focus behavior
+  const {
+    focusInput,
+    focusNextInput,
+    focusPrevInput,
+    getRefSetter
+  } = usePinInputRefs(length, autoFocus);
+
+  // Use our custom hook for managing PIN values
+  const {
+    valueArray,
+    setDigit,
+    clearDigit,
+    updateValue
+  } = usePinValue(controlValue, defaultValue, length, onChange, onComplete);
+
+  // Handle input change
+  const handleInputChange = useEventCallback((inputValue, e, index) => {
+    // Safety check for event object
+    if (!e || !e.target) return;
+
+    // For single character input, use it directly
+    // For longer input (like paste or browser autofill), take the last character
+    const char = inputValue.length > 0 ? inputValue.charAt(inputValue.length - 1) : '';
+
+    // Filter by allowedKeys if provided
+    if (!allowedKeys.test(char)) {
+      return;
+    }
+
+    // Always allow overwriting the current value
+    // Update the value using our hook
+    setDigit(index, char);
+
+    // Focus the next input if we have a character and there's a next input
+    if (char && index < length - 1) {
+      // Use setTimeout to ensure the focus happens after the current event cycle
+      focusNextInput(index);
+    }
+
+    // If this is the last input and a character was entered, keep focus on it
+    if (char && index === length - 1) {
+      focusInput(index);
+    }
+  });
+
+  // Handle key down
+  const handleKeyDown = useEventCallback((e, index) => {
+    // Safety check for event object
+    if (!e) return;
+    const target = e.target;
+    const inputValue = (target === null || target === void 0 ? void 0 : target.value) || '';
+
+    // Handle backspace
+    if (e.key === 'Backspace') {
+      if (inputValue === '') {
+        // Focus the previous input if the current one is empty
+        if (index > 0) {
+          clearDigit(index - 1);
+          focusPrevInput(index);
+        }
+      } else {
+        // Clear the current input but keep focus on it
+        clearDigit(index);
+      }
+    }
+    // Handle arrow keys
+    else if (e.key === 'ArrowLeft') {
+      focusPrevInput(index);
+    } else if (e.key === 'ArrowRight') {
+      focusNextInput(index);
+    }
+    // Allow only keys matching allowedKeys
+    else if (allowedKeys.test(e.key)) {
+      setDigit(index, e.key);
+
+      // Move focus to the next input if there is one
+      if (index < length - 1) {
+        setTimeout(() => {
+          focusNextInput(index);
+        }, 10);
+      }
+    }
+  });
+
+  // Handle paste
+  const handlePaste = useEventCallback((e, index) => {
+    if (disabled || readOnly) return;
+
+    // Safety check for event object
+    if (!e || !e.clipboardData) return;
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text') || '';
+
+    // Filter pasted data by allowedKeys
+    const filteredData = pastedData.split('').filter(ch => allowedKeys.test(ch)).join('');
+    if (filteredData) {
+      // Create a new value with pasted characters
+      const newValueArray = [...valueArray];
+      for (let i = 0; i < filteredData.length && index + i < length; i++) {
+        newValueArray[index + i] = filteredData[i];
+      }
+
+      // Update value with our hook
+      updateValue(newValueArray.join(''));
+
+      // Focus the input after the last pasted character or the last input
+      // Use setTimeout to ensure focus happens after DOM updates
+      const nextIndex = Math.min(index + filteredData.length, length - 1);
+      setTimeout(() => {
+        focusInput(nextIndex);
+      }, 10);
+    }
+  });
+  const classes = merge(className, withPrefix({
+    attached
+  }));
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    ref: ref,
+    className: classes
+  }, rest), /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    value: valueArray.join(''),
+    name: name,
+    "aria-label": "Pin input"
+  }), /*#__PURE__*/React.createElement(HStack, {
+    spacing: attached ? 0 : 8
+  }, Array.from({
+    length
+  }).map((_, index) => /*#__PURE__*/React.createElement(Input, {
+    key: index,
+    className: prefix('segment', {
+      masked: mask
+    }),
+    size: size,
+    value: valueArray[index] || '',
+    onChange: (v, e) => handleInputChange(v, e, index),
+    onKeyDown: e => handleKeyDown(e, index),
+    onPaste: e => handlePaste(e, index),
+    disabled: disabled,
+    readOnly: readOnly,
+    maxLength: 1,
+    autoComplete: otp ? 'one-time-code' : 'off',
+    inputMode: inputModeValue,
+    placeholder: placeholder,
+    type: inputTypeValue,
+    ref: getRefSetter(index)
+  }))));
+});
+PinInput.displayName = 'PinInput';
+export default PinInput;

package/esm/PinInput/hooks/usePinInputRefs.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * A hook that manages the refs and focus behavior for a PIN input component
+ */
+export declare const usePinInputRefs: (length: number, autoFocus?: boolean) => {
+    inputRefs: import("react").RefObject<(HTMLInputElement | null)[]>;
+    focusInput: (index: number) => boolean;
+    focusNextInput: (currentIndex: number) => boolean;
+    focusPrevInput: (currentIndex: number) => boolean;
+    getRefSetter: (index: number) => (el: HTMLInputElement | null) => void;
+};
+export default usePinInputRefs;

package/esm/PinInput/hooks/usePinInputRefs.js

@@ -0,0 +1,58 @@
+'use client';
+import { useRef, useCallback, useEffect } from 'react';
+
+/**
+ * A hook that manages the refs and focus behavior for a PIN input component
+ */
+export const usePinInputRefs = (length, autoFocus) => {
+  // Create ref to store input elements
+  const inputRefs = useRef([]);
+
+  // Initialize the refs array when length changes
+  useEffect(() => {
+    inputRefs.current = inputRefs.current.slice(0, length);
+  }, [length]);
+
+  // Auto focus the first input on mount if autoFocus is true
+  useEffect(() => {
+    if (autoFocus && inputRefs.current[0]) {
+      var _inputRefs$current$;
+      (_inputRefs$current$ = inputRefs.current[0]) === null || _inputRefs$current$ === void 0 || _inputRefs$current$.focus();
+    }
+  }, [autoFocus]);
+
+  // Focus a specific input by index
+  const focusInput = useCallback(index => {
+    if (index >= 0 && index < length && inputRefs.current[index]) {
+      var _inputRefs$current$in;
+      (_inputRefs$current$in = inputRefs.current[index]) === null || _inputRefs$current$in === void 0 || _inputRefs$current$in.focus();
+      return true;
+    }
+    return false;
+  }, [length]);
+
+  // Focus the next input
+  const focusNextInput = useCallback(currentIndex => {
+    return focusInput(currentIndex + 1);
+  }, [focusInput]);
+
+  // Focus the previous input
+  const focusPrevInput = useCallback(currentIndex => {
+    return focusInput(currentIndex - 1);
+  }, [focusInput]);
+
+  // Get ref setter for an input
+  const getRefSetter = useCallback(index => {
+    return el => {
+      inputRefs.current[index] = el;
+    };
+  }, []);
+  return {
+    inputRefs,
+    focusInput,
+    focusNextInput,
+    focusPrevInput,
+    getRefSetter
+  };
+};
+export default usePinInputRefs;

package/esm/PinInput/hooks/usePinValue.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook for managing pin input value
+ * - Handles controlled/uncontrolled value
+ * - Normalizes value to array format
+ * - Manages array updates and modifications
+ */
+export declare const usePinValue: (controlValue: string | undefined, defaultValue: string, length: number, onChange?: ((value: string) => void) | undefined, onComplete?: ((value: string) => void) | undefined) => {
+    value: string;
+    valueArray: string[];
+    setDigit: (index: number, digit: string) => void;
+    clearDigit: (index: number) => void;
+    updateValue: (newValue: string) => void;
+};
+export default usePinValue;

package/esm/PinInput/hooks/usePinValue.js

@@ -0,0 +1,69 @@
+'use client';
+import { useMemo } from 'react';
+import { useControlled } from "../../internals/hooks/index.js";
+
+/**
+ * Hook for managing pin input value
+ * - Handles controlled/uncontrolled value
+ * - Normalizes value to array format
+ * - Manages array updates and modifications
+ */
+export const usePinValue = (controlValue, defaultValue, length, onChange, onComplete) => {
+  // Use controlled pattern for value management
+  const [value, setValue] = useControlled(controlValue, defaultValue);
+
+  // Convert string value to array of characters
+  const valueArray = useMemo(() => {
+    // Ensure value is a string and split it into an array of characters
+    const valueString = value || '';
+    const chars = valueString.split('');
+
+    // Pad the array with empty strings if needed
+    while (chars.length < length) {
+      chars.push('');
+    }
+
+    // Trim the array if it's too long
+    if (chars.length > length) {
+      chars.length = length;
+    }
+    return chars;
+  }, [value, length]);
+
+  // Update specific digit at index
+  const setDigit = (index, digit) => {
+    if (index < 0 || index >= length) return;
+    const newValueArray = [...valueArray];
+    newValueArray[index] = digit;
+    updateValue(newValueArray.join(''));
+  };
+
+  // Clear specific digit at index
+  const clearDigit = index => {
+    if (index < 0 || index >= length) return;
+    const newValueArray = [...valueArray];
+    newValueArray[index] = '';
+    updateValue(newValueArray.join(''));
+  };
+
+  // Set entire value at once
+  const updateValue = newValue => {
+    // Filter out any extra characters beyond length
+    const filteredValue = newValue.slice(0, length);
+    setValue(filteredValue);
+    onChange === null || onChange === void 0 || onChange(filteredValue);
+
+    // Call onComplete if the value is complete
+    if (filteredValue.length === length) {
+      onComplete === null || onComplete === void 0 || onComplete(filteredValue);
+    }
+  };
+  return {
+    value,
+    valueArray,
+    setDigit,
+    clearDigit,
+    updateValue
+  };
+};
+export default usePinValue;

package/esm/PinInput/index.d.ts

@@ -0,0 +1,4 @@
+import PinInput from './PinInput';
+export type { PinInputProps } from './PinInput';
+export { PinInput };
+export default PinInput;

package/esm/PinInput/index.js

@@ -0,0 +1,4 @@
+'use client';
+import PinInput from "./PinInput.js";
+export { PinInput };
+export default PinInput;

package/esm/Placeholder/PlaceholderGraph.js

@@ -2,8 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import Box from "../internals/Box/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
 /**
  * The `Placeholder.Graph` component is used to display the loading state of the block.

package/esm/Placeholder/PlaceholderGrid.js

@@ -2,8 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import Box from "../internals/Box/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { forwardRef, getCssValue, mergeStyles } from "../internals/utils/index.js";
 /**
  * The `Placeholder.Grid` component is used to display the loading state of the block.

package/esm/Placeholder/PlaceholderParagraph.js

@@ -2,8 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import Box from "../internals/Box/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { forwardRef, mergeStyles, getCssValue } from "../internals/utils/index.js";
 /**
  * The `Placeholder.Paragraph` component is used to display the loading state of the block.

package/esm/Popover/Popover.js

@@ -4,8 +4,7 @@ import React, { useMemo } from 'react';
 import Heading from "../Heading/index.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef, mergeStyles } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  * The `Popover` component is used to display a popup window for a target component.
  * @see https://rsuitejs.com/components/popover

package/esm/Progress/ProgressCircle.js

@@ -4,8 +4,7 @@ import React, { useCallback } from 'react';
 import Box from "../internals/Box/index.js";
 import { PROGRESS_STATUS_ICON } from "../internals/constants/statusIcons.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  * The `Progress.Circle` component is used to display the progress of current operation.
  * @see https://rsuitejs.com/components/progress/#circle

package/esm/Progress/ProgressLine.js

@@ -4,8 +4,7 @@ import React from 'react';
 import Box from "../internals/Box/index.js";
 import { PROGRESS_STATUS_ICON } from "../internals/constants/statusIcons.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  * The `Progress.Line` component is used to display the progress of current operation.
  * @see https://rsuitejs.com/components/progress/#line

package/esm/Radio/Radio.js

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import Box from "../internals/Box/index.js";
 import { RadioContext } from "../RadioGroup/RadioGroup.js";
-import { useStyles, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { forwardRef, partitionHTMLProps } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `Radio` component is a simple radio button.
  * @see https://rsuitejs.com/components/radio

package/esm/RadioGroup/RadioGroup.js

@@ -4,8 +4,7 @@ import React, { useMemo } from 'react';
 import Box from "../internals/Box/index.js";
 import Plaintext from "../internals/Plaintext/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
 export const RadioContext = /*#__PURE__*/React.createContext(void 0);
 
 /**

package/esm/RadioTile/RadioTile.js

@@ -5,8 +5,7 @@ import CheckIcon from '@rsuite/icons/Check';
 import Box from "../internals/Box/index.js";
 import { RadioTileContext } from "../RadioTileGroup/RadioTileGroup.js";
 import { forwardRef, partitionHTMLProps } from "../internals/utils/index.js";
-import { useStyles, useControlled, useUniqueId } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useControlled, useUniqueId } from "../internals/hooks/index.js";
 /**
  * A series of selectable tile components that behave like Radio.
  * @version 5.35.0

package/esm/RadioTileGroup/RadioTileGroup.js

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback, useMemo } from 'react';
 import Stack from "../Stack/index.js";
 import Box from "../internals/Box/index.js";
-import { useStyles, useControlled } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 export const RadioTileContext = /*#__PURE__*/React.createContext({});
 
 /**

package/esm/RangeSlider/RangeSlider.js

@@ -10,9 +10,8 @@ import Graduated from "../Slider/Graduated.js";
 import Plaintext from "../internals/Plaintext/index.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { precisionMath, checkValue, getPosition } from "../Slider/utils.js";
-import { useCustom } from "../CustomProvider/index.js";
 const defaultDefaultValue = [0, 0];
 
 /**

package/esm/Rate/Rate.js

@@ -7,11 +7,10 @@ import Character from "./Character.js";
 import Plaintext from "../internals/Plaintext/index.js";
 import StyledBox from "../internals/StyledBox/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
-import { useControlled, useStyles, useEventCallback } from "../internals/hooks/index.js";
+import { useControlled, useStyles, useCustom, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, shallowEqualArray, mergeStyles } from "../internals/utils/index.js";
 import { transformStarStatusToValue, getFractionalValue } from "./utils.js";
 import { useRatingStates } from "./useRatingStates.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `Rate` component is used for rating. It can be used to evaluate the quality of the content.
  * @see https://rsuitejs.com/components/rate/

package/esm/SelectPicker/SelectPicker.js

@@ -5,10 +5,9 @@ import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import SearchBox from "../internals/SearchBox/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs, shallowEqual, getDataGroupBy } from "../internals/utils/index.js";
 import { Listbox, ListItem, PickerToggle, PickerToggleTrigger, PickerPopup, useFocusItemValue, useSearch, useToggleKeyDownEvent, usePickerRef, triggerPropKeys } from "../internals/Picker/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 const emptyArray = [];
 /**
  * The `SelectPicker` component is used to select an item from a list of data.

package/esm/Sidebar/Sidebar.js

@@ -2,9 +2,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useEffect } from 'react';
 import Box from "../internals/Box/index.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 import { ContainerContext } from "../Container/Container.js";
 /**
  * The `Sidebar` component for use with the `Container` component.

package/esm/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -10,9 +10,8 @@ import ArrowLeftLine from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLine from '@rsuite/icons/ArrowRightLine';
 import Box from "../internals/Box/index.js";
 import { forwardRef, createChainedFunction } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { SidenavContext } from "./Sidenav.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * Tree View Node
  * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView

package/esm/Sidenav/Sidenav.js

@@ -10,8 +10,7 @@ import SidenavToggle from "./SidenavToggle.js";
 import SidenavGroupLabel from "./SidenavGroupLabel.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef, mergeRefs, shallowEqual } from "../internals/utils/index.js";
-import { useStyles, useControlled } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useControlled } from "../internals/hooks/index.js";
 export const SidenavContext = /*#__PURE__*/React.createContext(null);
 const emptyArray = [];
 const Subcomponents = {

package/esm/Sidenav/SidenavDropdownMenu.js

@@ -8,10 +8,9 @@ import ArrowLeftLine from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLine from '@rsuite/icons/ArrowRightLine';
 import NavContext from "../Nav/NavContext.js";
 import ExpandedSidenavDropdownMenu from "./ExpandedSidenavDropdownMenu.js";
-import { useStyles } from "../internals/hooks/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
 import { SidenavContext } from "./Sidenav.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> within a <Sidenav>

package/esm/Slider/Slider.d.ts

@@ -44,16 +44,20 @@ export interface SliderProps<T = number> extends BoxProps, FormControlBaseProps<
     placeholder?: React.ReactNode;
     /** Vertical Slide */
     vertical?: boolean;
-    /** If true, tooltip will always be visible  even without hover */
+    /**
+     * If true, tooltip will always be visible  even without hover
+     */
     keepTooltipOpen?: boolean;
     /**
      * A slider can have different sizes.
      *
      * @default 'sm'
+     * @version 6.0.0
      */
     size?: Size;
     /**
      * Custom marks on the ruler
+     * @version 6.0.0
      */
     marks?: {
         value: number;