rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250416

package/esm/Image/hooks/useImage.js

@@ -1,59 +1,36 @@
 'use client';
-import { useState, useEffect, useRef, useCallback } from 'react';
-import useIsomorphicLayoutEffect from "../../internals/hooks/useIsomorphicLayoutEffect.js";
+import { useState, useEffect } from 'react';
 export const useImage = props => {
   const {
     src,
-    fallbackSrc,
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
+    fallbackSrc
   } = props;
   const [imgSrc, setImgSrc] = useState(src || fallbackSrc || null);
   const [isLoading, setIsLoading] = useState(!!src);
   const [error, setError] = useState(false);
-  const imageRef = useRef(null);
   useEffect(() => {
-    setIsLoading(!!src); // true if src exists, false otherwise
-  }, [src]);
-  const flush = () => {
-    if (imageRef.current) {
-      imageRef.current.onload = null;
-      imageRef.current.onerror = null;
+    if (!src) {
+      setIsLoading(false);
+      return;
     }
+    setImgSrc(src);
+    setIsLoading(true);
+    setError(false);
+  }, [src]);
+  const handleLoad = () => {
+    setIsLoading(false);
+    setError(false);
+  };
+  const handleError = () => {
+    setIsLoading(false);
+    setError(true);
+    setImgSrc(fallbackSrc || null);
   };
-  const loadImage = useCallback(() => {
-    if (!src) return;
-    flush();
-    const image = new Image();
-    image.src = src;
-    if (crossOrigin) image.crossOrigin = crossOrigin;
-    if (srcSet) image.srcset = srcSet;
-    if (sizes) image.sizes = sizes;
-    if (loading) image.loading = loading;
-    image.onload = () => {
-      flush();
-      setImgSrc(src);
-      setIsLoading(false);
-    };
-    image.onerror = () => {
-      flush();
-      setError(true);
-      setImgSrc(fallbackSrc || null);
-      setIsLoading(false);
-    };
-    imageRef.current = image;
-  }, [crossOrigin, fallbackSrc, loading, sizes, src, srcSet]);
-  useIsomorphicLayoutEffect(() => {
-    loadImage();
-    return () => {
-      flush();
-    };
-  }, [loadImage]);
   return {
     imgSrc,
     isLoading,
-    error
+    error,
+    onLoad: handleLoad,
+    onError: handleError
   };
 };

package/esm/InlineEdit/InlineEdit.js

@@ -38,6 +38,7 @@ const InlineEdit = forwardRef((props, ref) => {
     onChange,
     onKeyDown,
     onClick,
+    onFocus,
     htmlProps
   } = useEditState({
     ...rest,
@@ -70,7 +71,8 @@ const InlineEdit = forwardRef((props, ref) => {
       disabled
     })),
     onClick: onClick,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onFocus: onFocus
   }, htmlProps), renderChildren(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/React.createElement(EditableControls, {
     className: prefix('controls'),
     onSave: onSave,

package/esm/InlineEdit/useEditState.d.ts

@@ -8,12 +8,14 @@ interface EditStateProps {
     onCancel?: (event?: React.MouseEvent) => void;
     onSave?: (event?: React.MouseEvent) => void;
     onClick?: (event: React.SyntheticEvent) => void;
+    onFocus?: (event?: React.FocusEvent) => void;
 }
 declare const useEditState: (props: EditStateProps) => {
     isEditing: boolean;
     value: any;
     onClick: (...args: any[]) => any;
     onChange: (...args: any[]) => any;
+    onFocus: (...args: any[]) => any;
     onCancel: (...args: any[]) => any;
     onSave: (...args: any[]) => any;
     onKeyDown: (...args: any[]) => any;

package/esm/InlineEdit/useEditState.js

@@ -11,6 +11,7 @@ const useEditState = props => {
     onCancel,
     onSave,
     onClick,
+    onFocus,
     ...htmlProps
   } = props;
   const [isEditing, setIsEditing] = useState(false);
@@ -27,6 +28,12 @@ const useEditState = props => {
     setIsEditing(true);
     setResetValue(value);
   });
+  const handleFocus = useEventCallback(event => {
+    if (disabled) return;
+    onFocus === null || onFocus === void 0 || onFocus(event);
+    setIsEditing(true);
+    setResetValue(value);
+  });
   const handleChange = useEventCallback((value, event) => {
     setValue(value);
     onChange === null || onChange === void 0 || onChange(value, event);
@@ -64,6 +71,7 @@ const useEditState = props => {
     value,
     onClick: handleClick,
     onChange: handleChange,
+    onFocus: handleFocus,
     onCancel: handleCancel,
     onSave: handleSave,
     onKeyDown: handleKeyDown,

package/esm/Input/Input.d.ts

@@ -1,19 +1,10 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { InputBaseCommonProps } from '../internals/InputBase';
 import { PrependParameters } from '../internals/types/utils';
-import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, Size } from '../internals/types';
-export interface LocaleType {
-    unfilled: string;
-}
-export interface InputProps extends BoxProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
+import type { SanitizedInputProps, PropsWithoutChange, FormControlBaseProps } from '../internals/types';
+export interface InputProps extends InputBaseCommonProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
     /** The HTML input type */
     type?: string;
-    /** The HTML input id */
-    id?: string;
-    /** A component can have different sizes */
-    size?: Size;
-    /** Ref of input element */
-    inputRef?: React.Ref<any>;
     /**
      * The htmlSize attribute defines the width of the <input> element.
      *

package/esm/Input/Input.js

@@ -1,14 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
-import Plaintext from "../internals/Plaintext/index.js";
-import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useFormGroup } from "../FormGroup/index.js";
+import InputBase from "../internals/InputBase/index.js";
 import { InputGroupContext } from "../InputGroup/InputGroup.js";
-import { KEY_VALUES } from "../internals/constants/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `<Input>` component is used to get user input in a text field.
@@ -21,79 +16,22 @@ const Input = forwardRef((props, ref) => {
   } = useCustom('Input', props);
   const inputGroup = useContext(InputGroupContext);
   const {
-    as = 'input',
-    className,
-    classPrefix = 'input',
     type = 'text',
-    disabled,
-    value,
-    defaultValue,
-    inputRef,
-    id,
-    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
     htmlSize,
-    plaintext,
-    placeholder,
-    readOnly,
-    onPressEnter,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    onChange,
+    size = (inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.size) || 'md',
+    classPrefix = 'input',
     ...rest
   } = propsWithDefaults;
-  const handleKeyDown = event => {
-    if (event.key === KEY_VALUES.ENTER) {
-      onPressEnter === null || onPressEnter === void 0 || onPressEnter(event);
-    }
-    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-  };
-  const handleChange = event => {
-    var _event$target;
-    onChange === null || onChange === void 0 || onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
-  };
-  const {
-    withPrefix,
-    merge
-  } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    plaintext
-  }));
-  const {
-    controlId
-  } = useFormGroup();
-
-  // Make the Input component display in plain text,
-  // and display default characters when there is no value.
-  if (plaintext) {
-    return /*#__PURE__*/React.createElement(Plaintext, {
-      ref: ref,
-      localeKey: "unfilled",
-      placeholder: placeholder
-    }, typeof value === 'undefined' ? defaultValue : value);
-  }
-  const inputable = !disabled && !readOnly;
-  const eventProps = {};
-  if (inputable) {
-    eventProps.onChange = handleChange;
-    eventProps.onKeyDown = handleKeyDown;
-    eventProps.onFocus = createChainedFunction(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
-    eventProps.onBlur = createChainedFunction(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
-  }
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: as
-  }, rest, eventProps, {
-    ref: mergeRefs(ref, inputRef),
-    className: classes,
+  return /*#__PURE__*/React.createElement(InputBase, _extends({
+    as: "input",
+    ref: ref,
+    classPrefix: classPrefix,
+    size: size,
     type: type,
-    id: id || controlId,
-    value: value,
-    defaultValue: defaultValue,
-    disabled: disabled,
-    readOnly: readOnly,
-    size: htmlSize,
-    placeholder: placeholder
-  }));
+    inputProps: {
+      size: htmlSize
+    }
+  }, rest));
 });
 Input.displayName = 'Input';
 export default Input;

package/esm/Nav/NavMegaMenu.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import { NavbarMegaMenuProps } from '../Navbar/NavbarMegaMenu';
 export type NavMegaMenuProps = NavbarMegaMenuProps;
+/**
+ * The `Nav.MegaMenu` component is used to create a mega menu.
+ * @see https://rsuitejs.com/components/navbar/#mega-menu
+ * @version 6.0.0
+ */
 declare const NavMegaMenu: React.ForwardRefExoticComponent<NavbarMegaMenuProps & React.RefAttributes<any>>;
 export default NavMegaMenu;

package/esm/Nav/NavMegaMenu.js

@@ -3,6 +3,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import NavbarMegaMenu from "../Navbar/NavbarMegaMenu.js";
 import { NavbarContext } from "../Navbar/index.js";
+/**
+ * The `Nav.MegaMenu` component is used to create a mega menu.
+ * @see https://rsuitejs.com/components/navbar/#mega-menu
+ * @version 6.0.0
+ */
 const NavMegaMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const navbar = useContext(NavbarContext);
   if (!navbar) {

package/esm/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputProps } from '../Input';
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'plaintext'> {
+    /** Controls whether the password is visible */
+    visible?: boolean;
+    /** Default visibility state of the password */
+    defaultVisible?: boolean;
+    /** Custom icon for visibility toggle */
+    renderVisibilityIcon?: (visible: boolean) => React.ReactNode;
+    /** Callback function triggered when the password visibility changes */
+    onVisibleChange?: (visible: boolean) => void;
+}
+declare const PasswordInput: import("../internals/types").InternalRefForwardingComponent<"input", PasswordInputProps, never> & Record<string, never>;
+export default PasswordInput;

package/esm/PasswordInput/PasswordInput.js

@@ -0,0 +1,66 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Input from "../Input/index.js";
+import InputGroup from "../InputGroup/index.js";
+import EyeCloseIcon from '@rsuite/icons/EyeClose';
+import VisibleIcon from '@rsuite/icons/Visible';
+import { forwardRef } from "../internals/utils/index.js";
+import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+const PasswordInput = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('PasswordInput', props);
+  const {
+    classPrefix = 'password-input',
+    className,
+    visible: controlVisible,
+    size,
+    defaultVisible,
+    value,
+    defaultValue,
+    placeholder,
+    id,
+    name,
+    readOnly,
+    inputRef,
+    onChange,
+    onVisibleChange,
+    renderVisibilityIcon,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge
+  } = useStyles(classPrefix);
+  const [visible, setVisible] = useControlled(controlVisible, defaultVisible);
+  const classes = merge(className, withPrefix());
+  const handleToggleVisibility = useEventCallback(() => {
+    setVisible(!visible);
+    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(!visible);
+  });
+  return /*#__PURE__*/React.createElement(InputGroup, _extends({
+    inside: true,
+    ref: ref,
+    size: size,
+    className: classes
+  }, rest), /*#__PURE__*/React.createElement(Input, {
+    type: visible ? 'text' : 'password',
+    value: value,
+    defaultValue: defaultValue,
+    onChange: onChange,
+    autoComplete: "off",
+    placeholder: placeholder,
+    readOnly: readOnly,
+    name: name,
+    id: id,
+    inputRef: inputRef
+  }), /*#__PURE__*/React.createElement(InputGroup.Button, {
+    tabIndex: -1,
+    onClick: handleToggleVisibility,
+    "aria-label": "Toggle password visibility"
+  }, (renderVisibilityIcon === null || renderVisibilityIcon === void 0 ? void 0 : renderVisibilityIcon(visible !== null && visible !== void 0 ? visible : false)) || (visible ? /*#__PURE__*/React.createElement(EyeCloseIcon, null) : /*#__PURE__*/React.createElement(VisibleIcon, null))));
+});
+PasswordInput.displayName = 'PasswordInput';
+export default PasswordInput;

package/esm/PasswordInput/index.d.ts

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