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

package/cjs/Divider/Divider.js

@@ -26,7 +26,7 @@ const Divider = (0, _utils.forwardRef)((props, ref) => {
     children,
     color,
     label = children,
-    labelPosition,
+    labelPlacement,
     vertical,
     spacing,
     style,
@@ -51,7 +51,7 @@ const Divider = (0, _utils.forwardRef)((props, ref) => {
     "data-appearance": appearance,
     "data-orientation": vertical ? 'vertical' : 'horizontal',
     "data-with-label": label ? 'true' : undefined,
-    "data-position": labelPosition
+    "data-placement": labelPlacement
   }, rest), label);
 });
 Divider.displayName = 'Divider';

package/cjs/Image/Image.js

@@ -50,19 +50,14 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
     shaded,
     zoomed
   }));
-  const imgProps = {
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
-  };
   const {
     imgSrc,
-    isLoading
+    isLoading,
+    onLoad,
+    onError
   } = (0, _useImage.useImage)({
     src,
-    fallbackSrc,
-    ...imgProps
+    fallbackSrc
   });
   const styles = {
     ...style,
@@ -76,8 +71,14 @@ const Image = (0, _utils.forwardRef)((props, ref) => {
     className: classes,
     style: styles,
     width: width,
-    height: height
-  }, imgProps, rest));
+    height: height,
+    loading: loading,
+    onLoad: onLoad,
+    onError: onError,
+    crossOrigin: crossOrigin,
+    srcSet: srcSet,
+    sizes: sizes
+  }, rest));
   if (zoomed) {
     return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
       w: width,

package/cjs/Image/hooks/useImage.d.ts

@@ -10,5 +10,7 @@ export declare const useImage: (props: UseImageProps) => {
     imgSrc: string | null;
     isLoading: boolean;
     error: boolean;
+    onLoad: () => void;
+    onError: () => void;
 };
 export {};

package/cjs/Image/hooks/useImage.js

@@ -1,65 +1,41 @@
 'use client';
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.useImage = void 0;
 var _react = require("react");
-var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../../internals/hooks/useIsomorphicLayoutEffect"));
 const useImage = props => {
   const {
     src,
-    fallbackSrc,
-    crossOrigin,
-    srcSet,
-    sizes,
-    loading
+    fallbackSrc
   } = props;
   const [imgSrc, setImgSrc] = (0, _react.useState)(src || fallbackSrc || null);
   const [isLoading, setIsLoading] = (0, _react.useState)(!!src);
   const [error, setError] = (0, _react.useState)(false);
-  const imageRef = (0, _react.useRef)(null);
   (0, _react.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 = (0, _react.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]);
-  (0, _useIsomorphicLayoutEffect.default)(() => {
-    loadImage();
-    return () => {
-      flush();
-    };
-  }, [loadImage]);
   return {
     imgSrc,
     isLoading,
-    error
+    error,
+    onLoad: handleLoad,
+    onError: handleError
   };
 };
 exports.useImage = useImage;

package/cjs/InlineEdit/InlineEdit.js

@@ -43,6 +43,7 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
     onChange,
     onKeyDown,
     onClick,
+    onFocus,
     htmlProps
   } = (0, _useEditState.default)({
     ...rest,
@@ -75,7 +76,8 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
       disabled
     })),
     onClick: onClick,
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onFocus: onFocus
   }, htmlProps), (0, _renderChildren.renderChildren)(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/_react.default.createElement(_EditableControls.default, {
     className: prefix('controls'),
     onSave: onSave,

package/cjs/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/cjs/InlineEdit/useEditState.js

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

package/cjs/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/cjs/Input/Input.js

@@ -6,13 +6,9 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
-var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
-var _FormGroup = require("../FormGroup");
+var _InputBase = _interopRequireDefault(require("../internals/InputBase"));
 var _InputGroup = require("../InputGroup/InputGroup");
-var _constants = require("../internals/constants");
-var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -27,79 +23,22 @@ const Input = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _CustomProvider.useCustom)('Input', props);
   const inputGroup = (0, _react.useContext)(_InputGroup.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 === _constants.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
-  } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    plaintext
-  }));
-  const {
-    controlId
-  } = (0, _FormGroup.useFormGroup)();
-
-  // Make the Input component display in plain text,
-  // and display default characters when there is no value.
-  if (plaintext) {
-    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
-      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 = (0, _utils.createChainedFunction)(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
-    eventProps.onBlur = (0, _utils.createChainedFunction)(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
-  }
-  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
-    as: as
-  }, rest, eventProps, {
-    ref: (0, _utils.mergeRefs)(ref, inputRef),
-    className: classes,
+  return /*#__PURE__*/_react.default.createElement(_InputBase.default, (0, _extends2.default)({
+    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';
 var _default = exports.default = Input;