rsuite 5.76.2 → 6.0.0-canary-20250103

package/cjs/AutoComplete/AutoComplete.js

@@ -5,23 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _utils2 = require("../Animation/utils");
 var _Picker = require("../internals/Picker");
-var _constants = require("../internals/constants");
 var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
-var _propTypes2 = require("../internals/propTypes");
-var _utils3 = require("./utils");
+var _utils2 = require("./utils");
 var _CustomProvider = require("../CustomProvider");
 var _Combobox = _interopRequireDefault(require("./Combobox"));
-var _excluded = ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "readOnly", "plaintext", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
 /**
  * Autocomplete function of input field.
@@ -30,72 +24,65 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * TODO: Remove unnecessary .rs-auto-complete element
  * TODO: role=combobox and aria-autocomplete on input element
  */
-var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCustom = (0, _CustomProvider.useCustom)('AutoComplete', props),
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    disabled = propsWithDefaults.disabled,
-    className = propsWithDefaults.className,
-    _propsWithDefaults$pl = propsWithDefaults.placement,
-    placement = _propsWithDefaults$pl === void 0 ? 'bottomStart' : _propsWithDefaults$pl,
-    _propsWithDefaults$se = propsWithDefaults.selectOnEnter,
-    selectOnEnter = _propsWithDefaults$se === void 0 ? true : _propsWithDefaults$se,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'auto-complete' : _propsWithDefaults$cl,
-    _propsWithDefaults$de = propsWithDefaults.defaultValue,
-    defaultValue = _propsWithDefaults$de === void 0 ? '' : _propsWithDefaults$de,
-    _propsWithDefaults$me = propsWithDefaults.menuAutoWidth,
-    menuAutoWidth = _propsWithDefaults$me === void 0 ? true : _propsWithDefaults$me,
-    data = propsWithDefaults.data,
-    valueProp = propsWithDefaults.value,
-    open = propsWithDefaults.open,
-    style = propsWithDefaults.style,
-    size = propsWithDefaults.size,
-    menuClassName = propsWithDefaults.menuClassName,
-    id = propsWithDefaults.id,
-    readOnly = propsWithDefaults.readOnly,
-    plaintext = propsWithDefaults.plaintext,
-    renderMenu = propsWithDefaults.renderMenu,
-    renderMenuItem = propsWithDefaults.renderMenuItem,
-    onSelect = propsWithDefaults.onSelect,
-    filterBy = propsWithDefaults.filterBy,
-    onKeyDown = propsWithDefaults.onKeyDown,
-    onChange = propsWithDefaults.onChange,
-    onClose = propsWithDefaults.onClose,
-    onOpen = propsWithDefaults.onOpen,
-    onFocus = propsWithDefaults.onFocus,
-    onBlur = propsWithDefaults.onBlur,
-    onMenuFocus = propsWithDefaults.onMenuFocus,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var datalist = (0, _utils3.transformData)(data);
-  var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
-    value = _useControlled[0],
-    setValue = _useControlled[1];
-  var _useState = (0, _react.useState)(false),
-    focus = _useState[0],
-    setFocus = _useState[1];
-  var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils3.shouldDisplay)(filterBy, value))) || [];
-  var hasItems = items.length > 0;
-  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
-    trigger = _usePickerRef.trigger,
-    overlay = _usePickerRef.overlay,
-    root = _usePickerRef.root;
-  var isMounted = (0, _hooks.useIsMounted)();
+const AutoComplete = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('AutoComplete', props);
+  const {
+    as: Component = 'div',
+    disabled,
+    className,
+    placement = 'bottomStart',
+    selectOnEnter = true,
+    classPrefix = 'auto-complete',
+    defaultValue = '',
+    menuAutoWidth = true,
+    data,
+    value: valueProp,
+    open,
+    style,
+    size,
+    menuClassName,
+    id,
+    readOnly,
+    plaintext,
+    renderMenu,
+    renderMenuItem,
+    onSelect,
+    filterBy,
+    onKeyDown,
+    onChange,
+    onClose,
+    onOpen,
+    onFocus,
+    onBlur,
+    onMenuFocus,
+    ...rest
+  } = propsWithDefaults;
+  const datalist = (0, _utils2.transformData)(data);
+  const [value, setValue] = (0, _hooks.useControlled)(valueProp, defaultValue);
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils2.shouldDisplay)(filterBy, value))) || [];
+  const hasItems = items.length > 0;
+  const {
+    trigger,
+    overlay,
+    root
+  } = (0, _Picker.usePickerRef)(ref);
+  const isMounted = (0, _hooks.useIsMounted)();
 
   // Used to hover the focuse item  when trigger `onKeydown`
-  var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
-      data: datalist,
-      focusToOption: false,
-      callback: onMenuFocus,
-      target: function target() {
-        return overlay.current;
-      }
-    }),
-    focusItemValue = _useFocusItemValue.focusItemValue,
-    setFocusItemValue = _useFocusItemValue.setFocusItemValue,
-    handleKeyDown = _useFocusItemValue.onKeyDown;
-  var handleKeyDownEvent = function handleKeyDownEvent(event) {
+  const {
+    focusItemValue,
+    setFocusItemValue,
+    onKeyDown: handleKeyDown
+  } = (0, _Picker.useFocusItemValue)(value, {
+    data: datalist,
+    focusToOption: false,
+    callback: onMenuFocus,
+    target: () => overlay.current
+  });
+  const handleKeyDownEvent = event => {
     if (!overlay.current) {
       return;
     }
@@ -106,13 +93,11 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     handleKeyDown(event);
     onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
   };
-  var selectFocusMenuItem = function selectFocusMenuItem(event) {
+  const selectFocusMenuItem = event => {
     if (!focusItemValue) {
       return;
     }
-    var focusItem = datalist.find(function (item) {
-      return (item === null || item === void 0 ? void 0 : item.value) === focusItemValue;
-    });
+    const focusItem = datalist.find(item => (item === null || item === void 0 ? void 0 : item.value) === focusItemValue);
     setValue(focusItemValue);
     setFocusItemValue(focusItemValue);
     handleSelect(focusItem, event);
@@ -121,29 +106,29 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     handleClose();
   };
-  var handleSelect = (0, _hooks.useEventCallback)(function (item, event) {
+  const handleSelect = (0, _hooks.useEventCallback)((item, event) => {
     onSelect === null || onSelect === void 0 || onSelect(item.value, item, event);
   });
-  var handleChangeValue = (0, _hooks.useEventCallback)(function (value, event) {
+  const handleChangeValue = (0, _hooks.useEventCallback)((value, event) => {
     onChange === null || onChange === void 0 || onChange(value, event);
   });
-  var handleChange = function handleChange(value, event) {
+  const handleChange = (value, event) => {
     setFocusItemValue('');
     setValue(value);
     setFocus(true);
     handleChangeValue(value, event);
   };
-  var handleClose = (0, _hooks.useEventCallback)(function () {
+  const handleClose = (0, _hooks.useEventCallback)(() => {
     if (isMounted()) {
       setFocus(false);
       onClose === null || onClose === void 0 || onClose();
     }
   });
-  var handleOpen = (0, _hooks.useEventCallback)(function () {
+  const handleOpen = (0, _hooks.useEventCallback)(() => {
     setFocus(true);
     onOpen === null || onOpen === void 0 || onOpen();
   });
-  var handleItemSelect = (0, _hooks.useEventCallback)(function (nextItemValue, item, event) {
+  const handleItemSelect = (0, _hooks.useEventCallback)((nextItemValue, item, event) => {
     setValue(nextItemValue);
     setFocusItemValue(nextItemValue);
     handleSelect(item, event);
@@ -152,32 +137,33 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     handleClose();
   });
-  var handleInputFocus = (0, _hooks.useEventCallback)(function (event) {
+  const handleInputFocus = (0, _hooks.useEventCallback)(event => {
     onFocus === null || onFocus === void 0 || onFocus(event);
     handleOpen();
   });
-  var handleInputBlur = (0, _hooks.useEventCallback)(function (event) {
+  const handleInputBlur = (0, _hooks.useEventCallback)(event => {
     setTimeout(handleClose, 300);
     onBlur === null || onBlur === void 0 || onBlur(event);
   });
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix({
-    disabled: disabled
+  const {
+    withClassPrefix,
+    merge
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const classes = merge(className, withClassPrefix({
+    disabled
   }));
-  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys)),
-    htmlInputProps = _partitionHTMLProps[0],
-    restProps = _partitionHTMLProps[1];
-  var renderPopup = function renderPopup(positionProps, speakerRef) {
-    var left = positionProps.left,
-      top = positionProps.top,
-      className = positionProps.className;
-    var styles = {
-      left: left,
-      top: top
+  const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys));
+  const renderPopup = (positionProps, speakerRef) => {
+    const {
+      left,
+      top,
+      className
+    } = positionProps;
+    const styles = {
+      left,
+      top
     };
-    var menu = /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
+    const menu = /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
       classPrefix: "auto-complete-menu",
       listItemClassPrefix: "auto-complete-item",
       listItemAs: _Picker.ListItem,
@@ -203,7 +189,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       localeKey: "unfilled"
     }, typeof value === 'undefined' ? defaultValue : value);
   }
-  var expanded = open || focus && hasItems;
+  const expanded = open || focus && hasItems;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     id: id,
     ref: trigger,
@@ -230,31 +216,4 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }))));
 });
 AutoComplete.displayName = 'AutoComplete';
-AutoComplete.propTypes = (0, _extends2.default)({}, _utils2.animationPropTypes, {
-  data: _propTypes.default.array,
-  disabled: _propTypes.default.bool,
-  onSelect: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  classPrefix: _propTypes.default.string,
-  value: _propTypes.default.string,
-  defaultValue: _propTypes.default.string,
-  className: _propTypes.default.string,
-  menuClassName: _propTypes.default.string,
-  menuAutoWidth: _propTypes.default.bool,
-  placement: (0, _propTypes2.oneOf)(_constants.PLACEMENT),
-  onFocus: _propTypes.default.func,
-  onMenuFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onOpen: _propTypes.default.func,
-  onClose: _propTypes.default.func,
-  readOnly: _propTypes.default.bool,
-  renderMenu: _propTypes.default.func,
-  renderMenuItem: _propTypes.default.func,
-  style: _propTypes.default.object,
-  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
-  open: _propTypes.default.bool,
-  selectOnEnter: _propTypes.default.bool,
-  filterBy: _propTypes.default.func
-});
 var _default = exports.default = AutoComplete;

package/cjs/AutoComplete/Combobox.js

@@ -5,24 +5,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _Picker = require("../internals/Picker");
 var _Input = _interopRequireDefault(require("../Input"));
-var _excluded = ["expanded", "focusItemValue"];
-var Combobox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useCombobox = (0, _Picker.useCombobox)(),
-    id = _useCombobox.id,
-    popupType = _useCombobox.popupType;
-  var expanded = props.expanded,
-    focusItemValue = props.focusItemValue,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+const Combobox = /*#__PURE__*/_react.default.forwardRef(function Combobox(props, ref) {
+  const {
+    id,
+    popupType
+  } = (0, _Picker.useCombobox)();
+  const {
+    expanded,
+    focusItemValue,
+    ...rest
+  } = props;
   return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
     role: "combobox",
     "aria-autocomplete": "list",
     "aria-haspopup": popupType,
     "aria-expanded": expanded,
-    "aria-activedescendant": focusItemValue ? id + "-opt-" + focusItemValue : undefined,
+    "aria-activedescendant": focusItemValue ? `${id}-opt-${focusItemValue}` : undefined,
     autoComplete: "off",
     id: id,
     ref: ref

package/cjs/AutoComplete/utils.js

@@ -10,7 +10,7 @@ function transformData(data) {
   if (!data) {
     return [];
   }
-  return data.map(function (item) {
+  return data.map(item => {
     if (typeof item === 'string') {
       return {
         value: item,
@@ -22,15 +22,16 @@ function transformData(data) {
     }
   });
 }
-var shouldDisplay = exports.shouldDisplay = function shouldDisplay(filterBy, value) {
-  return function (item) {
+const shouldDisplay = (filterBy, value) => {
+  return item => {
     if (typeof filterBy === 'function') {
       return filterBy(value, item);
     }
     if (!(0, _trim.default)(value)) {
       return false;
     }
-    var keyword = value.toLocaleLowerCase();
-    return ("" + item.label).toLocaleLowerCase().indexOf(keyword) >= 0;
+    const keyword = value.toLocaleLowerCase();
+    return `${item.label}`.toLocaleLowerCase().indexOf(keyword) >= 0;
   };
-};
+};
+exports.shouldDisplay = shouldDisplay;

package/cjs/Avatar/Avatar.js

@@ -4,72 +4,66 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../internals/hooks");
-var _utils = require("../internals/utils");
 var _AvatarGroup = require("../AvatarGroup/AvatarGroup");
-var _propTypes2 = require("../internals/propTypes");
 var _CustomProvider = require("../CustomProvider");
 var _AvatarIcon = _interopRequireDefault(require("./AvatarIcon"));
-var _useImage2 = _interopRequireDefault(require("./useImage"));
-var _templateObject, _templateObject2;
-var _excluded = ["as", "bordered", "alt", "className", "children", "circle", "color", "classPrefix", "size", "src", "srcSet", "sizes", "style", "imgProps", "onError"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+var _useImage = _interopRequireDefault(require("./useImage"));
+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; }
 /**
  * The Avatar component is used to represent user or brand.
  * @see https://rsuitejs.com/components/avatar
  */
-var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _extends2;
-  var _useContext = (0, _react.useContext)(_AvatarGroup.AvatarGroupContext),
-    groupSize = _useContext.size,
-    spacing = _useContext.spacing;
-  var _useCustom = (0, _CustomProvider.useCustom)('Avatar', props),
-    rtl = _useCustom.rtl,
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    bordered = propsWithDefaults.bordered,
-    alt = propsWithDefaults.alt,
-    className = propsWithDefaults.className,
-    children = propsWithDefaults.children,
-    circle = propsWithDefaults.circle,
-    color = propsWithDefaults.color,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'avatar' : _propsWithDefaults$cl,
-    _propsWithDefaults$si = propsWithDefaults.size,
-    size = _propsWithDefaults$si === void 0 ? groupSize : _propsWithDefaults$si,
-    src = propsWithDefaults.src,
-    srcSet = propsWithDefaults.srcSet,
-    sizes = propsWithDefaults.sizes,
-    style = propsWithDefaults.style,
-    imgProps = propsWithDefaults.imgProps,
-    onError = propsWithDefaults.onError,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
-    withClassPrefix = _useClassNames.withClassPrefix,
-    prefix = _useClassNames.prefix,
-    merge = _useClassNames.merge;
-  var classes = merge(className, withClassPrefix(size, color, {
-    circle: circle,
-    bordered: bordered
+const Avatar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    size: groupSize
+  } = (0, _react.useContext)(_AvatarGroup.AvatarGroupContext);
+  const {
+    propsWithDefaults
+  } = (0, _CustomProvider.useCustom)('Avatar', props);
+  const {
+    as: Component = 'div',
+    bordered,
+    alt,
+    className,
+    children,
+    circle,
+    color,
+    classPrefix = 'avatar',
+    size = groupSize,
+    src,
+    srcSet,
+    sizes,
+    imgProps,
+    onError,
+    ...rest
+  } = propsWithDefaults;
+  const {
+    withClassPrefix,
+    prefix,
+    merge
+  } = (0, _hooks.useClassNames)(classPrefix);
+  const classes = merge(className, withClassPrefix(size, color, {
+    circle,
+    bordered
   }));
-  var imageProps = (0, _extends3.default)({}, imgProps, {
-    alt: alt,
-    src: src,
-    srcSet: srcSet,
-    sizes: sizes
+  const imageProps = {
+    ...imgProps,
+    alt,
+    src,
+    srcSet,
+    sizes
+  };
+  const {
+    loaded
+  } = (0, _useImage.default)({
+    ...imageProps,
+    onError
   });
-  var _useImage = (0, _useImage2.default)((0, _extends3.default)({}, imageProps, {
-      onError: onError
-    })),
-    loaded = _useImage.loaded;
-  var altComponent = (0, _react.useMemo)(function () {
+  const altComponent = (0, _react.useMemo)(() => {
     if (alt) {
       return /*#__PURE__*/_react.default.createElement("span", {
         role: "img",
@@ -78,32 +72,16 @@ var Avatar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
     return null;
   }, [alt]);
-  var placeholder = children || altComponent || /*#__PURE__*/_react.default.createElement(_AvatarIcon.default, {
-    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["icon"])))
+  const placeholder = children || altComponent || /*#__PURE__*/_react.default.createElement(_AvatarIcon.default, {
+    className: prefix`icon`
   });
-  var image = loaded ? /*#__PURE__*/_react.default.createElement("img", (0, _extends3.default)({}, imageProps, {
-    className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["image"])))
+  const image = loaded ? /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({}, imageProps, {
+    className: prefix`image`
   })) : placeholder;
-  var margin = rtl ? 'marginLeft' : 'marginRight';
-  var insertStyles = (0, _utils.isIE)() && spacing ? (0, _extends3.default)((_extends2 = {}, _extends2[margin] = spacing, _extends2), style) : style;
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
-    className: classes,
-    style: insertStyles
+    className: classes
   }), src ? image : placeholder);
 });
 Avatar.displayName = 'Avatar';
-Avatar.propTypes = {
-  as: _propTypes.default.elementType,
-  classPrefix: _propTypes.default.string,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node,
-  size: (0, _propTypes2.oneOf)(['xxl', 'xl', 'lg', 'md', 'sm', 'xs']),
-  src: _propTypes.default.string,
-  sizes: _propTypes.default.string,
-  srcSet: _propTypes.default.string,
-  imgProps: _propTypes.default.object,
-  circle: _propTypes.default.bool,
-  alt: _propTypes.default.string
-};
 var _default = exports.default = Avatar;

package/cjs/Avatar/AvatarIcon.js

@@ -6,18 +6,16 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var AvatarIcon = function AvatarIcon(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
-    role: "img",
-    "aria-label": "Avatar",
-    stroke: "currentColor",
-    fill: "currentColor",
-    strokeWidth: "0",
-    viewBox: "0 0 448 512",
-    height: "60%",
-    width: "60%"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
-  }));
-};
+const AvatarIcon = props => /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
+  role: "img",
+  "aria-label": "Avatar",
+  stroke: "currentColor",
+  fill: "currentColor",
+  strokeWidth: "0",
+  viewBox: "0 0 448 512",
+  height: "60%",
+  width: "60%"
+}, props), /*#__PURE__*/_react.default.createElement("path", {
+  d: "M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
+}));
 var _default = exports.default = AvatarIcon;

package/cjs/Avatar/useImage.js

@@ -15,40 +15,40 @@ var _hooks = require("../internals/hooks");
  * return loaded ? <img src="https://example.com/image.jpg" /> : <Placeholder />;
  * ```
  */
-var useImage = function useImage(props) {
-  var src = props.src,
-    srcSet = props.srcSet,
-    sizes = props.sizes,
-    crossOrigin = props.crossOrigin,
-    onError = props.onError;
-  var _useState = (0, _react.useState)('pending'),
-    status = _useState[0],
-    setStatus = _useState[1];
-  var imgRef = (0, _react.useRef)(null);
-  var flush = function flush() {
+const useImage = props => {
+  const {
+    src,
+    srcSet,
+    sizes,
+    crossOrigin,
+    onError
+  } = props;
+  const [status, setStatus] = (0, _react.useState)('pending');
+  const imgRef = (0, _react.useRef)(null);
+  const flush = () => {
     if (imgRef.current) {
       imgRef.current.onload = null;
       imgRef.current.onerror = null;
       imgRef.current = null;
     }
   };
-  var handleLoad = (0, _react.useCallback)(function () {
+  const handleLoad = (0, _react.useCallback)(() => {
     setStatus('loaded');
     flush();
   }, []);
-  var handleError = (0, _react.useCallback)(function (event) {
+  const handleError = (0, _react.useCallback)(event => {
     setStatus('error');
     flush();
     onError === null || onError === void 0 || onError(event);
   }, [onError]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     setStatus(src ? 'loading' : 'pending');
   }, [src]);
-  var loadImge = (0, _react.useCallback)(function () {
+  const loadImge = (0, _react.useCallback)(() => {
     if (!src) {
       return;
     }
-    var img = new Image();
+    const img = new Image();
     img.onload = handleLoad;
     img.onerror = handleError;
     if (src) img.src = src;
@@ -57,17 +57,17 @@ var useImage = function useImage(props) {
     if (crossOrigin) img.crossOrigin = crossOrigin;
     imgRef.current = img;
   }, [crossOrigin, handleError, handleLoad, sizes, src, srcSet]);
-  (0, _hooks.useIsomorphicLayoutEffect)(function () {
+  (0, _hooks.useIsomorphicLayoutEffect)(() => {
     if (status === 'loading') {
       loadImge();
     }
   }, [loadImge, status]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     return flush;
   }, []);
   return {
     loaded: status === 'loaded',
-    status: status
+    status
   };
 };
 var _default = exports.default = useImage;