rsuite 5.40.0 → 5.42.0

package/esm/AutoComplete/AutoComplete.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useState, useRef, useCallback } from 'react';
@@ -9,78 +10,72 @@ import { useClassNames, useControlled, PLACEMENT, mergeRefs, useIsMounted, parti
 import { animationPropTypes } from '../Animation/utils';
 import { PickerToggleTrigger, onMenuKeyDown, DropdownMenu, DropdownMenuItem, PickerOverlay, useFocusItemValue, usePublicMethods, pickTriggerPropKeys } from '../Picker';
 import { transformData, shouldDisplay } from './utils';
-
 /**
  * TODO: Remove unnecessary .rs-auto-complete element
  * TODO: role=combobox and aria-autocomplete on input element
  */
 var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      disabled = props.disabled,
-      className = props.className,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      _props$selectOnEnter = props.selectOnEnter,
-      selectOnEnter = _props$selectOnEnter === void 0 ? true : _props$selectOnEnter,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'auto-complete' : _props$classPrefix,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
-      _props$menuAutoWidth = props.menuAutoWidth,
-      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
-      data = props.data,
-      valueProp = props.value,
-      open = props.open,
-      style = props.style,
-      size = props.size,
-      menuClassName = props.menuClassName,
-      id = props.id,
-      readOnly = props.readOnly,
-      renderMenu = props.renderMenu,
-      renderMenuItem = props.renderMenuItem,
-      onSelect = props.onSelect,
-      filterBy = props.filterBy,
-      onKeyDown = props.onKeyDown,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      onOpen = props.onOpen,
-      onFocus = props.onFocus,
-      onBlur = props.onBlur,
-      onMenuFocus = props.onMenuFocus,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "readOnly", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    disabled = props.disabled,
+    className = props.className,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    _props$selectOnEnter = props.selectOnEnter,
+    selectOnEnter = _props$selectOnEnter === void 0 ? true : _props$selectOnEnter,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'auto-complete' : _props$classPrefix,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
+    _props$menuAutoWidth = props.menuAutoWidth,
+    menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
+    data = props.data,
+    valueProp = props.value,
+    open = props.open,
+    style = props.style,
+    size = props.size,
+    menuClassName = props.menuClassName,
+    id = props.id,
+    readOnly = props.readOnly,
+    renderMenu = props.renderMenu,
+    renderMenuItem = props.renderMenuItem,
+    onSelect = props.onSelect,
+    filterBy = props.filterBy,
+    onKeyDown = props.onKeyDown,
+    onChange = props.onChange,
+    onClose = props.onClose,
+    onOpen = props.onOpen,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onMenuFocus = props.onMenuFocus,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "readOnly", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
   var datalist = transformData(data);
-
   var _useControlled = useControlled(valueProp, defaultValue),
-      value = _useControlled[0],
-      setValue = _useControlled[1];
-
+    value = _useControlled[0],
+    setValue = _useControlled[1];
   var _useState = useState(false),
-      focus = _useState[0],
-      setFocus = _useState[1];
-
+    focus = _useState[0],
+    setFocus = _useState[1];
   var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter(shouldDisplay(filterBy, value))) || [];
   var hasItems = items.length > 0;
   var overlayRef = useRef(null);
-  var isMounted = useIsMounted(); // Used to hover the focuse item  when trigger `onKeydown`
+  var isMounted = useIsMounted();
 
+  // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = useFocusItemValue(value, {
-    data: datalist,
-    callback: onMenuFocus,
-    target: function target() {
-      return overlayRef.current;
-    }
-  }),
-      focusItemValue = _useFocusItemValue.focusItemValue,
-      setFocusItemValue = _useFocusItemValue.setFocusItemValue,
-      handleKeyDown = _useFocusItemValue.onKeyDown;
-
+      data: datalist,
+      callback: onMenuFocus,
+      target: function target() {
+        return overlayRef.current;
+      }
+    }),
+    focusItemValue = _useFocusItemValue.focusItemValue,
+    setFocusItemValue = _useFocusItemValue.setFocusItemValue,
+    handleKeyDown = _useFocusItemValue.onKeyDown;
   var handleKeyDownEvent = function handleKeyDownEvent(event) {
     if (!overlayRef.current) {
       return;
     }
-
     onMenuKeyDown(event, {
       enter: selectOnEnter ? selectFocusMenuItem : undefined,
       esc: handleClose
@@ -88,40 +83,33 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleKeyDown(event);
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
   };
-
   var selectFocusMenuItem = function selectFocusMenuItem(event) {
     if (!focusItemValue) {
       return;
     }
-
     var focusItem = datalist.find(function (item) {
       return (item === null || item === void 0 ? void 0 : item.value) === focusItemValue;
     });
     setValue(focusItemValue);
     setFocusItemValue(focusItemValue);
     handleSelect(focusItem, event);
-
     if (value !== focusItemValue) {
       handleChangeValue(focusItemValue, event);
     }
-
     handleClose();
   };
-
   var handleSelect = useCallback(function (item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);
   }, [onSelect]);
   var handleChangeValue = useCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
   }, [onChange]);
-
   var handleChange = function handleChange(value, event) {
     setFocusItemValue('');
     setValue(value);
     setFocus(true);
     handleChangeValue(value, event);
   };
-
   var handleClose = useCallback(function () {
     if (isMounted()) {
       setFocus(false);
@@ -136,11 +124,9 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setValue(nextItemValue);
     setFocusItemValue(nextItemValue);
     handleSelect(item, event);
-
     if (value !== nextItemValue) {
       handleChangeValue(nextItemValue, event);
     }
-
     handleClose();
   }, [value, setValue, handleSelect, handleChangeValue, handleClose, setFocusItemValue]);
   var handleInputFocus = useCallback(function (event) {
@@ -151,29 +137,24 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setTimeout(handleClose, 300);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }, [onBlur, handleClose]);
-
   var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
-
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({
     disabled: disabled
   }));
   var triggerRef = useRef(null);
-
   var _partitionHTMLProps = partitionHTMLProps(omit(rest, pickTriggerPropKeys)),
-      htmlInputProps = _partitionHTMLProps[0],
-      restProps = _partitionHTMLProps[1];
-
+    htmlInputProps = _partitionHTMLProps[0],
+    restProps = _partitionHTMLProps[1];
   usePublicMethods(ref, {
     triggerRef: triggerRef,
     overlayRef: overlayRef
   });
-
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
-        top = positionProps.top,
-        className = positionProps.className;
+      top = positionProps.top,
+      className = positionProps.className;
     var styles = {
       left: left,
       top: top
@@ -198,7 +179,6 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
-
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     ref: triggerRef,
     placement: placement,

package/esm/AutoComplete/index.js

@@ -1,2 +1,3 @@
+'use client';
 import AutoComplete from './AutoComplete';
 export default AutoComplete;

package/esm/AutoComplete/utils.js

@@ -1,9 +1,9 @@
+'use client';
 import trim from 'lodash/trim';
 export function transformData(data) {
   if (!data) {
     return [];
   }
-
   return data.map(function (item) {
     if (typeof item === 'string') {
       return {
@@ -11,7 +11,6 @@ export function transformData(data) {
         label: item
       };
     }
-
     if (typeof item === 'object') {
       return item;
     }
@@ -22,11 +21,9 @@ export var shouldDisplay = function shouldDisplay(filterBy, value) {
     if (typeof filterBy === 'function') {
       return filterBy(value, item);
     }
-
     if (!trim(value)) {
       return false;
     }
-
     var keyword = value.toLocaleLowerCase();
     return ("" + item.label).toLocaleLowerCase().indexOf(keyword) >= 0;
   };

package/esm/Avatar/Avatar.js

@@ -1,37 +1,33 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
 var _templateObject;
-
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 import { AvatarGroupContext } from '../AvatarGroup/AvatarGroup';
 var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'avatar' : _props$classPrefix,
-      _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      sizeProp = props.size,
-      className = props.className,
-      children = props.children,
-      src = props.src,
-      srcSet = props.srcSet,
-      sizes = props.sizes,
-      imgProps = props.imgProps,
-      circle = props.circle,
-      alt = props.alt,
-      rest = _objectWithoutPropertiesLoose(props, ["classPrefix", "as", "size", "className", "children", "src", "srcSet", "sizes", "imgProps", "circle", "alt"]);
-
+    classPrefix = _props$classPrefix === void 0 ? 'avatar' : _props$classPrefix,
+    _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    sizeProp = props.size,
+    className = props.className,
+    children = props.children,
+    src = props.src,
+    srcSet = props.srcSet,
+    sizes = props.sizes,
+    imgProps = props.imgProps,
+    circle = props.circle,
+    alt = props.alt,
+    rest = _objectWithoutPropertiesLoose(props, ["classPrefix", "as", "size", "className", "children", "src", "srcSet", "sizes", "imgProps", "circle", "alt"]);
   var _useContext = useContext(AvatarGroupContext),
-      size = _useContext.size;
-
+    size = _useContext.size;
   var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    withClassPrefix = _useClassNames.withClassPrefix,
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix(sizeProp || size, {
     circle: circle
   }));

package/esm/Avatar/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Avatar from './Avatar';
 export default Avatar;

package/esm/AvatarGroup/AvatarGroup.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useMemo } from 'react';
@@ -6,23 +7,20 @@ import { useClassNames, useCustom } from '../utils';
 export var AvatarGroupContext = /*#__PURE__*/React.createContext({});
 var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'avatar-group' : _props$classPrefix,
-      spacing = props.spacing,
-      className = props.className,
-      children = props.children,
-      stack = props.stack,
-      size = props.size,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'avatar-group' : _props$classPrefix,
+    spacing = props.spacing,
+    className = props.className,
+    children = props.children,
+    stack = props.stack,
+    size = props.size,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "spacing", "className", "children", "stack", "size"]);
   var _useCustom = useCustom('AvatarGroup'),
-      rtl = _useCustom.rtl;
-
+    rtl = _useCustom.rtl;
   var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
-
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({
     stack: stack
   }));
@@ -38,7 +36,6 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value: contextValue
   }, spacing ? React.Children.map(children, function (child) {
     var _extends2;
-
     return /*#__PURE__*/React.cloneElement(child, {
       style: _extends((_extends2 = {}, _extends2[rtl ? 'marginLeft' : 'marginRight'] = spacing, _extends2), child.props.style)
     });

package/esm/AvatarGroup/index.js

@@ -1,2 +1,3 @@
+'use client';
 import AvatarGroup from './AvatarGroup';
 export default AvatarGroup;

package/esm/Badge/Badge.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
@@ -5,44 +6,38 @@ import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      contentText = props.content,
-      color = props.color,
-      className = props.className,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'badge' : _props$classPrefix,
-      children = props.children,
-      _props$maxCount = props.maxCount,
-      maxCount = _props$maxCount === void 0 ? 99 : _props$maxCount,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "content", "color", "className", "classPrefix", "children", "maxCount"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    contentText = props.content,
+    color = props.color,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'badge' : _props$classPrefix,
+    children = props.children,
+    _props$maxCount = props.maxCount,
+    maxCount = _props$maxCount === void 0 ? 99 : _props$maxCount,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "content", "color", "className", "classPrefix", "children", "maxCount"]);
   var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge;
-
+    withClassPrefix = _useClassNames.withClassPrefix,
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
   var dot = contentText === undefined || contentText === null;
   var classes = merge(className, withClassPrefix(color, {
     independent: !children,
     wrapper: children,
     dot: dot
   }));
-
   if (contentText === false) {
     return /*#__PURE__*/React.cloneElement(children, {
       ref: ref
     });
   }
-
   var content = typeof contentText === 'number' && contentText > maxCount ? maxCount + "+" : contentText;
-
   if (!children) {
     return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
       ref: ref,
       className: classes
     }), content);
   }
-
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes

package/esm/Badge/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Badge from './Badge';
 export default Badge;

package/esm/Breadcrumb/Breadcrumb.js

@@ -1,40 +1,35 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-
 var _templateObject;
-
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useCustom } from '../utils';
 import BreadcrumbItem from './BreadcrumbItem';
 var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'nav' : _props$as,
-      className = props.className,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'breadcrumb' : _props$classPrefix,
-      children = props.children,
-      _props$maxItems = props.maxItems,
-      maxItems = _props$maxItems === void 0 ? 5 : _props$maxItems,
-      _props$separator = props.separator,
-      separator = _props$separator === void 0 ? '/' : _props$separator,
-      overrideLocale = props.locale,
-      onExpand = props.onExpand,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "children", "maxItems", "separator", "locale", "onExpand"]);
-
+    Component = _props$as === void 0 ? 'nav' : _props$as,
+    className = props.className,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'breadcrumb' : _props$classPrefix,
+    children = props.children,
+    _props$maxItems = props.maxItems,
+    maxItems = _props$maxItems === void 0 ? 5 : _props$maxItems,
+    _props$separator = props.separator,
+    separator = _props$separator === void 0 ? '/' : _props$separator,
+    overrideLocale = props.locale,
+    onExpand = props.onExpand,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "children", "maxItems", "separator", "locale", "onExpand"]);
   var _useClassNames = useClassNames(classPrefix),
-      merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix,
-      withClassPrefix = _useClassNames.withClassPrefix;
-
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix,
+    withClassPrefix = _useClassNames.withClassPrefix;
   var _useState = useState(true),
-      ellipsis = _useState[0],
-      setEllipsis = _useState[1];
-
+    ellipsis = _useState[0],
+    setEllipsis = _useState[1];
   var _useCustom = useCustom('Breadcrumb', overrideLocale),
-      locale = _useCustom.locale;
-
+    locale = _useCustom.locale;
   var renderSeparator = function renderSeparator(key) {
     return /*#__PURE__*/React.createElement("span", {
       key: "breadcrumb-separator-" + key,
@@ -42,24 +37,20 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["separator"])))
     }, separator);
   };
-
   var handleClickEllipsis = useCallback(function (event) {
     setEllipsis(false);
     onExpand === null || onExpand === void 0 ? void 0 : onExpand(event);
   }, [onExpand]);
   var items = [];
   var count = React.Children.count(children);
-
   if (count) {
     React.Children.forEach(children, function (item, index) {
       items.push(item);
-
       if (index < count - 1) {
         items.push(renderSeparator(index));
       }
     });
   }
-
   var renderCollapseItems = function renderCollapseItems() {
     if (count > maxItems && count > 2 && ellipsis) {
       return [].concat(items.slice(0, 2), [[/*#__PURE__*/React.createElement(BreadcrumbItem, {
@@ -72,10 +63,8 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function (props, ref) {
         "aria-hidden": true
       }, "..."))]], items.slice(items.length - 2, items.length));
     }
-
     return items;
   };
-
   var classes = merge(className, withClassPrefix());
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,

package/esm/Breadcrumb/BreadcrumbItem.js

@@ -1,3 +1,4 @@
+'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
@@ -6,26 +7,23 @@ import SafeAnchor from '../SafeAnchor';
 import { useClassNames } from '../utils';
 var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-      Component = _props$as === void 0 ? props.href ? SafeAnchor : 'span' : _props$as,
-      href = props.href,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'breadcrumb-item' : _props$classPrefix,
-      title = props.title,
-      target = props.target,
-      className = props.className,
-      style = props.style,
-      active = props.active,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "href", "classPrefix", "title", "target", "className", "style", "active", "children"]);
-
+    Component = _props$as === void 0 ? props.href ? SafeAnchor : 'span' : _props$as,
+    href = props.href,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'breadcrumb-item' : _props$classPrefix,
+    title = props.title,
+    target = props.target,
+    className = props.className,
+    style = props.style,
+    active = props.active,
+    children = props.children,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "href", "classPrefix", "title", "target", "className", "style", "active", "children"]);
   var _useClassNames = useClassNames(classPrefix),
-      merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix;
-
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
   var classes = merge(className, withClassPrefix({
     active: active
   }));
-
   if (active) {
     return /*#__PURE__*/React.createElement("span", _extends({
       ref: ref
@@ -34,7 +32,6 @@ var BreadcrumbItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: classes
     }), children);
   }
-
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     href: href,
     title: title,

package/esm/Breadcrumb/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Breadcrumb from './Breadcrumb';
 export default Breadcrumb;