rsuite 5.75.0 → 5.76.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [5.76.0](https://github.com/rsuite/rsuite/compare/v5.75.0...v5.76.0) (2024-12-20)
+
+
+### Features
+
+* **Image:** add support for Image ([#4068](https://github.com/rsuite/rsuite/issues/4068)) ([46980f9](https://github.com/rsuite/rsuite/commit/46980f985094110925fa5e2ad5c69a46cd84e7eb))
+
+
+
 # [5.75.0](https://github.com/rsuite/rsuite/compare/v5.74.2...v5.75.0) (2024-12-06)
 
 

package/Image/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Image",
+  "private": true,
+  "main": "../cjs/Image/index.js",
+  "module": "../esm/Image/index.js",
+  "types": "../esm/Image/index.d.ts"
+}

package/Image/styles/index.css

@@ -0,0 +1,33 @@
+.rs-image {
+  --rs-object-fit: cover;
+  --rs-object-position: initial;
+  -o-object-fit: var(--rs-object-fit);
+     object-fit: var(--rs-object-fit);
+  -o-object-position: var(--rs-object-position);
+     object-position: var(--rs-object-position);
+  max-width: 100%;
+}
+.rs-image-rounded {
+  border-radius: 6px;
+}
+.rs-image-circle {
+  border-radius: 50%;
+}
+.rs-image-bordered {
+  border: 1px solid var(--rs-border-primary);
+}
+.rs-image-zoomed {
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  transition: -webkit-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+  cursor: pointer;
+}
+.rs-image-zoomed:hover {
+  -webkit-transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+          transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+}
+.rs-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}

package/Image/styles/index.less

@@ -0,0 +1,34 @@
+.rs-image {
+  --rs-object-fit: cover;
+  --rs-object-position: initial;
+
+  object-fit: var(--rs-object-fit);
+  object-position: var(--rs-object-position);
+  max-width: 100%;
+
+  &-rounded {
+    border-radius: 6px;
+  }
+
+  &-circle {
+    border-radius: 50%;
+  }
+
+  &-bordered {
+    border: 1px solid var(--rs-border-primary);
+  }
+
+  &-zoomed {
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+      transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+    }
+  }
+}
+
+.rs-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}

package/cjs/Carousel/Carousel.js

@@ -141,6 +141,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('content')
   }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "carousel-slider",
     className: prefix('slider'),
     style: sliderStyles,
     onTransitionEnd: handleTransitionEnd

package/cjs/CustomProvider/types.d.ts

@@ -53,6 +53,7 @@ import type { InputProps } from '../Input';
 import type { InputGroupProps } from '../InputGroup';
 import type { InputNumberProps } from '../InputNumber';
 import type { InputPickerProps } from '../InputPicker';
+import type { ImageProps } from '../Image';
 import type { ListProps } from '../List';
 import type { LoaderProps } from '../Loader';
 import type { MaskedInputProps } from '../MaskedInput';
@@ -164,6 +165,7 @@ export interface ReactSuiteComponents {
     InputGroup: ComponentProps<InputGroupProps>;
     InputNumber: ComponentProps<InputNumberProps>;
     InputPicker: ComponentProps<InputPickerProps>;
+    Image: ComponentProps<ImageProps>;
     List: ComponentProps<ListProps>;
     Loader: ComponentProps<LoaderProps>;
     MaskedInput: ComponentProps<MaskedInputProps>;

package/cjs/Image/Image.d.ts

@@ -0,0 +1,42 @@
+import React, { CSSProperties } from 'react';
+import type { WithAsProps, RsRefForwardingComponent } from '../internals/types';
+export interface ImageProps extends WithAsProps, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
+    /**
+     * An image may appear with border.
+     */
+    bordered?: boolean;
+    /**
+     * An image may appear circular.
+     */
+    circle?: boolean;
+    /**
+     * The fallback image when the src fails to load.
+     */
+    fallbackSrc?: string;
+    /**
+     * An image may appear rounded.
+     */
+    rounded?: boolean;
+    /**
+     * Whether there is a shadow.
+     */
+    shaded?: boolean;
+    /**
+     * It maps to css `object-fit` property.
+     */
+    fit?: CSSProperties['objectFit'];
+    /**
+     * It maps to css `object-position` property.
+     */
+    position?: CSSProperties['objectPosition'];
+    /**
+     * The placeholder to display when the image is loading.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * Whether the image should be zoomed when hovered.
+     */
+    zoomed?: boolean;
+}
+declare const Image: RsRefForwardingComponent<'img', ImageProps>;
+export default Image;

package/cjs/Image/Image.js

@@ -0,0 +1,102 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../internals/hooks");
+var _ImageWrapper = require("./ImageWrapper");
+var _useImage2 = require("./hooks/useImage");
+var _CustomProvider = require("../CustomProvider");
+var _excluded = ["as", "bordered", "classPrefix", "className", "circle", "crossOrigin", "fit", "fallbackSrc", "loading", "rounded", "srcSet", "sizes", "shaded", "src", "style", "position", "placeholder", "width", "height", "zoomed"];
+var Image = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _extends2;
+  var _useCustom = (0, _CustomProvider.useCustom)('Image', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'img' : _propsWithDefaults$as,
+    bordered = propsWithDefaults.bordered,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'image' : _propsWithDefaults$cl,
+    className = propsWithDefaults.className,
+    circle = propsWithDefaults.circle,
+    crossOrigin = propsWithDefaults.crossOrigin,
+    fit = propsWithDefaults.fit,
+    fallbackSrc = propsWithDefaults.fallbackSrc,
+    loading = propsWithDefaults.loading,
+    rounded = propsWithDefaults.rounded,
+    srcSet = propsWithDefaults.srcSet,
+    sizes = propsWithDefaults.sizes,
+    shaded = propsWithDefaults.shaded,
+    src = propsWithDefaults.src,
+    style = propsWithDefaults.style,
+    position = propsWithDefaults.position,
+    placeholder = propsWithDefaults.placeholder,
+    width = propsWithDefaults.width,
+    height = propsWithDefaults.height,
+    zoomed = propsWithDefaults.zoomed,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var classes = merge(className, withClassPrefix({
+    circle: circle,
+    bordered: bordered,
+    rounded: rounded,
+    shaded: shaded,
+    zoomed: zoomed
+  }));
+  var imgProps = {
+    crossOrigin: crossOrigin,
+    srcSet: srcSet,
+    sizes: sizes,
+    loading: loading
+  };
+  var _useImage = (0, _useImage2.useImage)((0, _extends3.default)({
+      src: src,
+      fallbackSrc: fallbackSrc
+    }, imgProps)),
+    imgSrc = _useImage.imgSrc,
+    isLoading = _useImage.isLoading;
+  var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2['--rs-object-fit'] = fit, _extends2['--rs-object-position'] = position, _extends2));
+  var wrapStyles = {
+    width: width,
+    height: height
+  };
+  var image = /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({
+    ref: ref,
+    src: imgSrc,
+    className: classes,
+    style: styles,
+    width: width,
+    height: height
+  }, imgProps, rest));
+  if (zoomed) {
+    return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
+      style: wrapStyles
+    }, image);
+  }
+  if (placeholder) {
+    return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
+      style: wrapStyles
+    }, isLoading && placeholder, image);
+  }
+  return image;
+});
+Image.displayName = 'Image';
+Image.propTypes = {
+  bordered: _propTypes.default.bool,
+  circle: _propTypes.default.bool,
+  fallbackSrc: _propTypes.default.string,
+  fit: _propTypes.default.string,
+  position: _propTypes.default.string,
+  rounded: _propTypes.default.bool,
+  shaded: _propTypes.default.bool,
+  placeholder: _propTypes.default.node,
+  zoomed: _propTypes.default.bool
+};
+var _default = exports.default = Image;

package/cjs/Image/ImageWrapper.d.ts

@@ -0,0 +1 @@
+export declare const ImageWrapper: import("../internals/types").RsRefForwardingComponent<"div", import("../internals/utils").ComponentProps>;

package/cjs/Image/ImageWrapper.js

@@ -0,0 +1,10 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.ImageWrapper = void 0;
+var _utils = require("../internals/utils");
+var ImageWrapper = exports.ImageWrapper = (0, _utils.createComponent)({
+  name: 'ImageWrapper',
+  componentAs: 'div'
+});

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

@@ -0,0 +1,14 @@
+interface UseImageProps {
+    src?: string;
+    fallbackSrc?: string;
+    crossOrigin?: string;
+    srcSet?: string;
+    sizes?: string;
+    loading?: 'lazy' | 'eager';
+}
+export declare const useImage: (props: UseImageProps) => {
+    imgSrc: string | null;
+    isLoading: boolean;
+    error: boolean;
+};
+export {};

package/cjs/Image/hooks/useImage.js

@@ -0,0 +1,68 @@
+'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"));
+var useImage = exports.useImage = function useImage(props) {
+  var src = props.src,
+    fallbackSrc = props.fallbackSrc,
+    crossOrigin = props.crossOrigin,
+    srcSet = props.srcSet,
+    sizes = props.sizes,
+    loading = props.loading;
+  var _useState = (0, _react.useState)(src || fallbackSrc || null),
+    imgSrc = _useState[0],
+    setImgSrc = _useState[1];
+  var _useState2 = (0, _react.useState)(!!src),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    error = _useState3[0],
+    setError = _useState3[1];
+  var imageRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    setIsLoading(!!src); // true if src exists, false otherwise
+  }, [src]);
+  var flush = function flush() {
+    if (imageRef.current) {
+      imageRef.current.onload = null;
+      imageRef.current.onerror = null;
+    }
+  };
+  var loadImage = (0, _react.useCallback)(function () {
+    if (!src) return;
+    flush();
+    var 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 = function () {
+      flush();
+      setImgSrc(src);
+      setIsLoading(false);
+    };
+    image.onerror = function () {
+      flush();
+      setError(true);
+      setImgSrc(fallbackSrc || null);
+      setIsLoading(false);
+    };
+    imageRef.current = image;
+  }, [crossOrigin, fallbackSrc, loading, sizes, src, srcSet]);
+  (0, _useIsomorphicLayoutEffect.default)(function () {
+    loadImage();
+    return function () {
+      flush();
+    };
+  }, [loadImage]);
+  return {
+    imgSrc: imgSrc,
+    isLoading: isLoading,
+    error: error
+  };
+};

package/cjs/Image/index.d.ts

@@ -0,0 +1,3 @@
+import Image from './Image';
+export type { ImageProps } from './Image';
+export default Image;

package/cjs/Image/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Image = _interopRequireDefault(require("./Image"));
+var _default = exports.default = _Image.default;

package/cjs/index.d.ts

@@ -47,6 +47,8 @@ export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { default as AvatarGroup } from './AvatarGroup';
 export type { AvatarGroupProps } from './AvatarGroup';
+export { default as Image } from './Image';
+export type { ImageProps } from './Image';
 export { default as Nav } from './Nav';
 export type { NavProps, NavItemProps } from './Nav';
 export { default as Navbar } from './Navbar';

package/cjs/index.js

@@ -3,8 +3,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.Whisper = exports.VisuallyHidden = exports.VStack = exports.Uploader = exports.TreePicker = exports.Tree = exports.Tooltip = exports.Toggle = exports.Timeline = exports.TimeRangePicker = exports.TimePicker = exports.Text = exports.TagPicker = exports.TagInput = exports.TagGroup = exports.Tag = exports.Tabs = exports.Table = exports.Steps = exports.StatGroup = exports.Stat = exports.Stack = exports.Slider = exports.Sidenav = exports.Sidebar = exports.SelectPicker = exports.Schema = exports.SafeAnchor = exports.Row = exports.Rate = exports.RangeSlider = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.Progress = exports.Popover = exports.Placeholder = exports.PanelGroup = exports.Panel = exports.Pagination = exports.Notification = exports.Navbar = exports.Nav = exports.MultiCascader = exports.MultiCascadeTree = exports.Modal = exports.Message = exports.MaskedInput = exports.Loader = exports.List = exports.InputPicker = exports.InputNumber = exports.InputGroup = exports.Input = exports.InlineEdit = exports.IconButton = exports.Highlight = exports.HeadingGroup = exports.Heading = exports.Header = exports.HStack = exports.Grid = exports.Form = exports.Footer = exports.FlexboxGrid = exports.Dropdown = exports.Drawer = exports.Divider = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.DOMHelper = exports.CustomProvider = exports.Content = exports.Container = exports.Col = exports.CheckboxGroup = exports.Checkbox = exports.CheckTreePicker = exports.CheckTree = exports.CheckPicker = exports.Cascader = exports.CascadeTree = exports.Carousel = exports.CardGroup = exports.Card = exports.Calendar = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = exports.Breadcrumb = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoComplete = exports.Animation = exports.Affix = exports.Accordion = void 0;
-exports.useToaster = exports.useMediaQuery = exports.useFormClassNames = exports.useBreakpointValue = exports.toaster = void 0;
+exports.VisuallyHidden = exports.VStack = exports.Uploader = exports.TreePicker = exports.Tree = exports.Tooltip = exports.Toggle = exports.Timeline = exports.TimeRangePicker = exports.TimePicker = exports.Text = exports.TagPicker = exports.TagInput = exports.TagGroup = exports.Tag = exports.Tabs = exports.Table = exports.Steps = exports.StatGroup = exports.Stat = exports.Stack = exports.Slider = exports.Sidenav = exports.Sidebar = exports.SelectPicker = exports.Schema = exports.SafeAnchor = exports.Row = exports.Rate = exports.RangeSlider = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.Progress = exports.Popover = exports.Placeholder = exports.PanelGroup = exports.Panel = exports.Pagination = exports.Notification = exports.Navbar = exports.Nav = exports.MultiCascader = exports.MultiCascadeTree = exports.Modal = exports.Message = exports.MaskedInput = exports.Loader = exports.List = exports.InputPicker = exports.InputNumber = exports.InputGroup = exports.Input = exports.InlineEdit = exports.Image = exports.IconButton = exports.Highlight = exports.HeadingGroup = exports.Heading = exports.Header = exports.HStack = exports.Grid = exports.Form = exports.Footer = exports.FlexboxGrid = exports.Dropdown = exports.Drawer = exports.Divider = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.DOMHelper = exports.CustomProvider = exports.Content = exports.Container = exports.Col = exports.CheckboxGroup = exports.Checkbox = exports.CheckTreePicker = exports.CheckTree = exports.CheckPicker = exports.Cascader = exports.CascadeTree = exports.Carousel = exports.CardGroup = exports.Card = exports.Calendar = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = exports.Breadcrumb = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoComplete = exports.Animation = exports.Affix = exports.Accordion = void 0;
+exports.useToaster = exports.useMediaQuery = exports.useFormClassNames = exports.useBreakpointValue = exports.toaster = exports.Whisper = void 0;
 var _Text = _interopRequireDefault(require("./Text"));
 exports.Text = _Text.default;
 var _Heading = _interopRequireDefault(require("./Heading"));
@@ -55,6 +55,8 @@ var _Avatar = _interopRequireDefault(require("./Avatar"));
 exports.Avatar = _Avatar.default;
 var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup"));
 exports.AvatarGroup = _AvatarGroup.default;
+var _Image = _interopRequireDefault(require("./Image"));
+exports.Image = _Image.default;
 var _Nav = _interopRequireDefault(require("./Nav"));
 exports.Nav = _Nav.default;
 var _Navbar = _interopRequireDefault(require("./Navbar"));

package/cjs/internals/utils/getDOMNode.js

@@ -8,8 +8,9 @@ exports.getDOMNode = getDOMNode;
 var _reactDom = _interopRequireDefault(require("react-dom"));
 function safeFindDOMNode(componentOrElement) {
   if (componentOrElement && 'setState' in componentOrElement) {
+    var _ReactDOM$findDOMNode;
     // eslint-disable-next-line react/no-find-dom-node
-    return _reactDom.default.findDOMNode(componentOrElement);
+    return (_ReactDOM$findDOMNode = _reactDom.default.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(_reactDom.default, componentOrElement);
   }
   return componentOrElement !== null && componentOrElement !== void 0 ? componentOrElement : null;
 }

package/dist/rsuite-no-reset-rtl.css

@@ -8254,6 +8254,40 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-btn-icon-circle {
   border-radius: 50% !important;
 }
+.rs-image {
+  --rs-object-fit: cover;
+  --rs-object-position: initial;
+  -o-object-fit: var(--rs-object-fit);
+     object-fit: var(--rs-object-fit);
+  -o-object-position: var(--rs-object-position);
+     object-position: var(--rs-object-position);
+  max-width: 100%;
+}
+.rs-image-rounded {
+  border-radius: 6px;
+}
+.rs-image-circle {
+  border-radius: 50%;
+}
+.rs-image-bordered {
+  border: 1px solid #e5e5ea;
+  border: 1px solid var(--rs-border-primary);
+}
+.rs-image-zoomed {
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  transition: -webkit-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+  cursor: pointer;
+}
+.rs-image-zoomed:hover {
+  -webkit-transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+          transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+}
+.rs-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}
 .rs-input {
   display: block;
   width: 100%;