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

package/esm/Textarea/Textarea.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { InputBaseCommonProps } from '../internals/InputBase';
+import type { SanitizedTextareaProps, PropsWithoutChange, FormControlBaseProps, Size } from '../internals/types';
+export interface TextareaProps extends InputBaseCommonProps, SanitizedTextareaProps, PropsWithoutChange<FormControlBaseProps> {
+    /**
+     * The size of the textarea.
+     * @default 'md'
+     */
+    size?: Size;
+    /** Enable auto resize of the textarea based on content */
+    autosize?: boolean;
+    /**
+     * Maximum number of rows up to which the textarea can grow
+     * Auto resize props for react-textarea-autosize
+     */
+    maxRows?: number;
+    /**
+     * Minimum number of rows up to which the textarea can shrink
+     * Auto resize props for react-textarea-autosize
+     */
+    minRows?: number;
+    /**
+     * Whether to allow the textarea to be resized
+     */
+    resize?: React.CSSProperties['resize'];
+    /**
+     * Called when Enter key is pressed
+     */
+    onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
+}
+declare const Textarea: import("../internals/types").InternalRefForwardingComponent<"textarea", TextareaProps, never> & Record<string, never>;
+export default Textarea;

package/esm/Textarea/Textarea.js

@@ -0,0 +1,46 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import ReactTextareaAutosize from 'react-textarea-autosize';
+import InputBase from "../internals/InputBase/index.js";
+import { forwardRef, mergeStyles } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { useCustom } from "../CustomProvider/index.js";
+const Textarea = forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = useCustom('Textarea', props);
+  const {
+    rows = 3,
+    classPrefix = 'textarea',
+    className,
+    size = 'md',
+    autosize,
+    maxRows,
+    minRows,
+    resize,
+    style,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withPrefix,
+    merge,
+    cssVar
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = mergeStyles(style, cssVar('resize', resize));
+  const autosizeProps = autosize ? {
+    maxRows,
+    minRows
+  } : {};
+  return /*#__PURE__*/React.createElement(InputBase, _extends({
+    as: autosize ? ReactTextareaAutosize : 'textarea',
+    ref: ref,
+    size: size,
+    rows: rows,
+    className: classes,
+    style: styles
+  }, autosizeProps, rest));
+});
+Textarea.displayName = 'Textarea';
+export default Textarea;

package/esm/Textarea/index.d.ts

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

package/esm/Textarea/index.js

@@ -0,0 +1,8 @@
+'use client';
+import Textarea from "./Textarea.js";
+
+// export types
+
+// export components
+export { Textarea };
+export default Textarea;

package/esm/Toggle/Toggle.d.ts

@@ -53,6 +53,7 @@ export interface ToggleProps extends BoxProps, SanitizedInputProps {
     label?: React.ReactNode;
     /**
      * The placement of the label
+     * @version 6.0.0
      */
     labelPlacement?: 'start' | 'end';
     /**

package/esm/index.d.ts

@@ -41,9 +41,12 @@ export * from './FormHelpText';
 export * from './FormControl';
 export * from './Toggle';
 export * from './Input';
+export * from './Textarea';
 export * from './MaskedInput';
 export * from './InputNumber';
 export * from './InputGroup';
+export * from './PasswordInput';
+export * from './PasswordStrengthMeter';
 export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './Radio';

package/esm/index.js

@@ -65,9 +65,12 @@ export * from "./FormControl/index.js";
 // --------------------------------------------------------
 export * from "./Toggle/index.js";
 export * from "./Input/index.js";
+export * from "./Textarea/index.js";
 export * from "./MaskedInput/index.js";
 export * from "./InputNumber/index.js";
 export * from "./InputGroup/index.js";
+export * from "./PasswordInput/index.js";
+export * from "./PasswordStrengthMeter/index.js";
 export * from "./Checkbox/index.js";
 export * from "./CheckboxGroup/index.js";
 export * from "./Radio/index.js";

package/esm/internals/InputBase/InputBase.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { BoxProps } from '../Box';
+import { PrependParameters } from '../types/utils';
+import type { PropsWithoutChange, FormControlBaseProps, Size } from '../types';
+export interface InputBaseLocaleType {
+    unfilled: string;
+}
+export interface InputBaseCommonProps extends BoxProps, PropsWithoutChange<FormControlBaseProps> {
+    /** A component can have different sizes */
+    size?: Size;
+    /** The HTML input id */
+    id?: string;
+    /** Ref of input element */
+    inputRef?: React.Ref<any>;
+    /** Is plaintext display mode */
+    plaintext?: boolean;
+    /** Input placeholder text */
+    placeholder?: string;
+}
+export interface InputBaseProps extends InputBaseCommonProps {
+    /** Component element type */
+    as?: React.ElementType;
+    /** Class prefix for component */
+    classPrefix?: string;
+    /** HTML input props */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Event handler for focus event */
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Event handler for blur event */
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Event handler for keydown event */
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** Input specific props like handling enter key for Input */
+    onPressEnter?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /** The callback function in which value is changed. */
+    onChange?: PrependParameters<React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>, [
+        value: string
+    ]>;
+}
+/**
+ * The `InputBase` component serves as the base for both Input and Textarea components.
+ * It provides common functionality for both components.
+ */
+declare const InputBase: import("../types").InternalRefForwardingComponent<"input" | "textarea", InputBaseProps, never> & Record<string, never>;
+export default InputBase;

package/esm/internals/InputBase/InputBase.js

@@ -0,0 +1,89 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from 'react';
+import Plaintext from "../Plaintext/index.js";
+import Box from "../Box/index.js";
+import { forwardRef, mergeRefs, createChainedFunction } from "../utils/index.js";
+import { useFormGroup } from "../../FormGroup/index.js";
+import { InputGroupContext } from "../../InputGroup/InputGroup.js";
+import { KEY_VALUES } from "../constants/index.js";
+import { useStyles } from "../hooks/index.js";
+/**
+ * The `InputBase` component serves as the base for both Input and Textarea components.
+ * It provides common functionality for both components.
+ */
+const InputBase = forwardRef((props, ref) => {
+  const {
+    as,
+    className,
+    classPrefix,
+    disabled,
+    value,
+    defaultValue,
+    inputRef,
+    id,
+    size,
+    plaintext,
+    placeholder,
+    readOnly,
+    inputProps,
+    onPressEnter,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = props;
+  const inputGroup = useContext(InputGroupContext);
+  const {
+    controlId
+  } = useFormGroup();
+  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 || 'input');
+  const classes = merge(className, withPrefix(size, {
+    plaintext
+  }));
+
+  // Make the 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,
+    ref: mergeRefs(ref, inputRef),
+    className: classes,
+    id: id || controlId,
+    value: value,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    readOnly: readOnly,
+    placeholder: placeholder
+  }, inputProps, eventProps, rest));
+});
+InputBase.displayName = 'InputBase';
+export default InputBase;

package/esm/internals/InputBase/index.d.ts

@@ -0,0 +1,3 @@
+import InputBase from './InputBase';
+export type { InputBaseProps, InputBaseCommonProps, InputBaseLocaleType } from './InputBase';
+export default InputBase;

package/esm/internals/InputBase/index.js

@@ -0,0 +1,3 @@
+'use client';
+import InputBase from "./InputBase.js";
+export default InputBase;