rsuite 5.52.0 → 5.53.0

package/esm/CheckTreePicker/CheckTreeNode.js

@@ -126,7 +126,7 @@ var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: getTitle(),
     onSelect: handleSelect
   }, /*#__PURE__*/React.createElement("span", {
-    className: prefix('text-wrapper')
+    className: prefix('label-content')
   }, typeof renderTreeNode === 'function' ? renderTreeNode(nodeData) : label))) : null;
 });
 CheckTreeNode.displayName = 'CheckTreeNode';

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -72,28 +72,28 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
     /** Custom render for calendar title */
     renderTitle?: (date: Date) => React.ReactNode;
 }
-export interface DateRangePicker extends PickerComponent<DateRangePickerProps> {
+export interface DateRangePickerComponent extends PickerComponent<DateRangePickerProps> {
     /** Allow the maximum number of days specified, other dates are disabled */
-    allowedMaxDays?: (days: number) => DisabledDateFunction;
+    allowedMaxDays: (days: number) => DisabledDateFunction;
     /** Only allowed days are specified, other dates are disabled */
-    allowedDays?: (days: number) => DisabledDateFunction;
+    allowedDays: (days: number) => DisabledDateFunction;
     /** Allow specified date range, other dates are disabled */
-    allowedRange?: (startDate: string | Date, endDate: string | Date) => DisabledDateFunction;
+    allowedRange: (startDate: string | Date, endDate: string | Date) => DisabledDateFunction;
     /** Disable dates after the specified date */
-    before?: (beforeDate: string | Date) => DisabledDateFunction;
+    before: (beforeDate: string | Date) => DisabledDateFunction;
     /** Disable dates before the specified date */
-    after?: (afterDate: string | Date) => DisabledDateFunction;
+    after: (afterDate: string | Date) => DisabledDateFunction;
     /** Disable dates after today. */
-    beforeToday?: () => DisabledDateFunction;
+    beforeToday: () => DisabledDateFunction;
     /** Disable dates before today */
-    afterToday?: () => DisabledDateFunction;
+    afterToday: () => DisabledDateFunction;
     /** Used to combine multiple conditions */
-    combine?: (...args: any) => DisabledDateFunction;
+    combine: (...args: any) => DisabledDateFunction;
 }
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
  * @see https://rsuitejs.com/components/date-range-picker
  */
-declare const DateRangePicker: DateRangePicker;
+declare const DateRangePicker: DateRangePickerComponent;
 export default DateRangePicker;

package/esm/DateRangePicker/index.d.ts

@@ -1,4 +1,4 @@
 import DateRangePicker from './DateRangePicker';
-export type { DateRangePicker, DateRangePickerProps } from './DateRangePicker';
+export type { DateRangePickerComponent, DateRangePickerProps } from './DateRangePicker';
 export type { ValueType, DateRange, RangeType, DisabledDateFunction } from './types';
 export default DateRangePicker;

package/esm/Dropdown/DropdownItem.js

@@ -1,13 +1,13 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _pick from "lodash/pick";
 import React, { useCallback, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { deprecatePropType, deprecatePropTypeNew, oneOf } from '../internals/propTypes';
 import MenuItem from '../internals/Menu/MenuItem';
 import DropdownContext from './DropdownContext';
 import isNil from 'lodash/isNil';
+import pick from 'lodash/pick';
 import { mergeRefs, shallowEqual, useClassNames } from '../utils';
 import NavContext from '../Nav/NavContext';
 import useInternalId from '../utils/useInternalId';
@@ -83,7 +83,9 @@ var DropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, props));
   }
   if (divider) {
-    return /*#__PURE__*/React.createElement(DropdownSeparator, _pick(props, ['data-testid']));
+    return /*#__PURE__*/React.createElement(DropdownSeparator, _extends({
+      as: "li"
+    }, pick(props, ['data-testid'])));
   }
   if (panel) {
     return renderDropdownItem(_extends({

package/esm/Message/Message.d.ts

@@ -1,9 +1,23 @@
 import React from 'react';
 import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
 export interface MessageProps extends WithAsProps {
-    /** The type of the message box. */
+    /**
+     * The type of the message box.
+     */
     type?: TypeAttributes.Status;
-    /** Whether it is possible to close the message box */
+    /**
+     * Show a border around the message box.
+     * @version 5.53.0
+     */
+    bordered?: boolean;
+    /**
+     * Center the message vertically.
+     * @version 5.53.0
+     */
+    centered?: boolean;
+    /**
+     * Whether it is possible to close the message box
+     */
     closable?: boolean;
     /**
      * Delay automatic removal of messages.
@@ -15,13 +29,21 @@ export interface MessageProps extends WithAsProps {
      *
      */
     duration?: number;
-    /** The title of the message  */
+    /**
+     * The title of the message
+     */
     header?: React.ReactNode;
-    /** Whether to display an icon */
+    /**
+     * Whether to display an icon
+     */
     showIcon?: boolean;
-    /** Fill the container */
+    /**
+     * Fill the container
+     */
     full?: boolean;
-    /** Callback after the message is removed */
+    /**
+     * Callback after the message is removed
+     */
     onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**

package/esm/Message/Message.js

@@ -3,9 +3,9 @@ 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, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import React, { useState, useCallback, useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, STATUS, useIsMounted } from '../utils';
+import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, STATUS, useIsMounted, useEventCallback } from '../utils';
 import { oneOf } from '../internals/propTypes';
 import CloseButton from '../internals/CloseButton';
 import ToastContext from '../toaster/ToastContext';
@@ -17,6 +17,8 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _withClassPrefix;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
+    bordered = props.bordered,
+    centered = props.centered,
     className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'message' : _props$classPrefix,
@@ -30,7 +32,7 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
     type = _props$type === void 0 ? 'info' : _props$type,
     showIcon = props.showIcon,
     onClose = props.onClose,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "centered", "className", "classPrefix", "children", "closable", "duration", "full", "header", "type", "showIcon", "onClose"]);
   var _useState = useState('show'),
     display = _useState[0],
     setDisplay = _useState[1];
@@ -43,7 +45,7 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedToaster = _useContext.usedToaster; // Timed close message
   var _useTimeout = useTimeout(onClose, duration, usedToaster && duration > 0),
     clear = _useTimeout.clear;
-  var handleClose = useCallback(function (event) {
+  var handleClose = useEventCallback(function (event) {
     setDisplay('hiding');
     onClose === null || onClose === void 0 ? void 0 : onClose(event);
     clear();
@@ -52,12 +54,14 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
         setDisplay('hide');
       }
     }, 1000);
-  }, [clear, isMounted, onClose]);
+  });
   if (display === 'hide') {
     return null;
   }
   var classes = merge(className, withClassPrefix(type, display, (_withClassPrefix = {
-    full: full
+    full: full,
+    bordered: bordered,
+    centered: centered
   }, _withClassPrefix['has-title'] = header, _withClassPrefix['has-icon'] = showIcon, _withClassPrefix)));
   return /*#__PURE__*/React.createElement(Component, _extends({
     role: "alert"
@@ -69,7 +73,7 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, closable && /*#__PURE__*/React.createElement(CloseButton, {
     onClick: handleClose
   }), showIcon && /*#__PURE__*/React.createElement("div", {
-    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["icon-wrapper"])))
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["icon"])))
   }, MESSAGE_STATUS_ICONS[type]), /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["content"])))
   }, header && /*#__PURE__*/React.createElement("div", {
@@ -80,14 +84,16 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Message.displayName = 'Message';
 Message.propTypes = {
-  type: oneOf(STATUS),
-  className: PropTypes.string,
-  onClose: PropTypes.func,
+  bordered: PropTypes.bool,
+  centered: PropTypes.bool,
   closable: PropTypes.bool,
-  title: PropTypes.node,
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
   description: PropTypes.node,
-  showIcon: PropTypes.bool,
   full: PropTypes.bool,
-  classPrefix: PropTypes.string
+  onClose: PropTypes.func,
+  showIcon: PropTypes.bool,
+  title: PropTypes.node,
+  type: oneOf(STATUS)
 };
 export default Message;

package/esm/Nav/Nav.d.ts

@@ -16,6 +16,8 @@ export interface NavProps<T = any> extends WithAsProps, Omit<React.HTMLAttribute
     pullRight?: boolean;
     /** Active key, corresponding to eventkey in <Nav.item>. */
     activeKey?: T;
+    /** Default active key, corresponding to eventkey in <Nav.item>. */
+    defaultActiveKey?: T;
     /** Callback function triggered after selection */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }

package/esm/Nav/Nav.js

@@ -4,11 +4,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import NavItem from './NavItem';
-import { useClassNames } from '../utils';
+import { useClassNames, useEnsuredRef, useInternalId, useControlled } from '../utils';
 import { NavbarContext } from '../Navbar/Navbar';
 import { SidenavContext } from '../Sidenav/Sidenav';
 import NavContext from './NavContext';
-import useEnsuredRef from '../utils/useEnsuredRef';
 import Menubar from '../internals/Menu/Menubar';
 import { oneOf } from '../internals/propTypes';
 import NavDropdown from './NavDropdown';
@@ -20,7 +19,6 @@ import NavbarDropdownItem from '../Navbar/NavbarDropdownItem';
 import SidenavDropdownItem from '../Sidenav/SidenavDropdownItem';
 import NavbarItem from '../Navbar/NavbarItem';
 import SidenavItem from '../Sidenav/SidenavItem';
-import useInternalId from '../utils/useInternalId';
 /**
  * The `Nav` component is used to create navigation links.
  * @see https://rsuitejs.com/components/nav
@@ -39,8 +37,9 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className = props.className,
     children = props.children,
     activeKeyProp = props.activeKey,
+    defaultActiveKey = props.defaultActiveKey,
     onSelectProp = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "appearance", "vertical", "justified", "reversed", "pullRight", "className", "children", "activeKey", "onSelect"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "appearance", "vertical", "justified", "reversed", "pullRight", "className", "children", "activeKey", "defaultActiveKey", "onSelect"]);
   var sidenav = useContext(SidenavContext);
 
   // Whether inside a <Navbar>
@@ -65,13 +64,19 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
     activeKeyFromSidenav = _ref.activeKey,
     _ref$onSelect = _ref.onSelect,
     onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;
-  var activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav;
+  var _useControlled = useControlled(activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav, defaultActiveKey),
+    activeKey = _useControlled[0],
+    setActiveKey = _useControlled[1];
   var contextValue = useMemo(function () {
     return {
       activeKey: activeKey,
-      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
+      onSelect: function onSelect(eventKey, event) {
+        setActiveKey(eventKey);
+        onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(eventKey, event);
+        onSelectFromSidenav === null || onSelectFromSidenav === void 0 ? void 0 : onSelectFromSidenav(eventKey, event);
+      }
     };
-  }, [activeKey, onSelectFromSidenav, onSelectProp]);
+  }, [activeKey, onSelectFromSidenav, onSelectProp, setActiveKey]);
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/React.createElement(NavContext.Provider, {
       value: contextValue

package/esm/Tabs/Tab.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface TabProps {
+    /**
+     * The children of the tab.
+     */
+    children?: React.ReactNode;
+    /**
+     * The disabled state of the tab.
+     */
+    disabled?: boolean;
+    /**
+     * The event key of the tab.
+     */
+    eventKey?: string;
+    /**
+     * The icon of the tab.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Content for the tab title.
+     */
+    title: React.ReactNode;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/esm/Tabs/Tab.js

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+import PropTypes from 'prop-types';
+var Tab = function Tab() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+Tab.displayName = 'Tab';
+Tab.propTypes = {
+  disabled: PropTypes.bool,
+  eventKey: PropTypes.string,
+  title: PropTypes.node,
+  children: PropTypes.node,
+  icon: PropTypes.node
+};
+export default Tab;

package/esm/Tabs/TabPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WithAsProps } from '../@types/common';
+interface TabPanelProps extends WithAsProps {
+    /** The active state of the tab. */
+    active?: boolean;
+    /** The HTML id attribute, which should be unique. */
+    id?: string;
+}
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPanel;

package/esm/Tabs/TabPanel.js

@@ -0,0 +1,27 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import { useClassNames } from '../utils';
+var TabPanel = /*#__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 ? 'tab-panel' : _props$classPrefix,
+    children = props.children,
+    active = props.active,
+    className = props.className,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "children", "active", "className"]);
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    role: "tabpanel",
+    ref: ref,
+    tabIndex: 0,
+    hidden: !active,
+    className: merge(className, withClassPrefix())
+  }, rest), children);
+});
+TabPanel.displayName = 'TabPanel';
+export default TabPanel;

package/esm/Tabs/Tabs.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import Tab from './Tab';
+export interface TabsProps extends WithAsProps {
+    /**
+     * The tabs appearance style.
+     */
+    appearance?: 'tabs' | 'subtle';
+    /**
+     * Mark the Tab with a matching `eventKey` as active.
+     */
+    activeKey?: string;
+    /**
+     * The default active tabKey.
+     */
+    defaultActiveKey?: string;
+    /**
+     * Reversed display.
+     * @default false
+     */
+    reversed?: boolean;
+    /**
+     * Vertical display.
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * The HTML id attribute, which should be unique.
+     * @default use generated id
+     */
+    id?: string;
+    /**
+     * Callback fired when a Tab is selected.
+     * @param eventKey
+     * @param event
+     * @returns
+     */
+    onSelect?: (eventKey: string, event: React.MouseEvent) => void;
+}
+interface TabsComponent extends RsRefForwardingComponent<'div', TabsProps> {
+    Tab: typeof Tab;
+}
+/**
+ * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
+ *
+ * @version 5.53.0
+ * @see https://rsuitejs.com/components/tabs
+ */
+declare const Tabs: TabsComponent;
+export default Tabs;

package/esm/Tabs/Tabs.js

@@ -0,0 +1,215 @@
+'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 from 'react';
+import PropTypes from 'prop-types';
+import { useClassNames, useControlled, ReactChildren, useEventCallback, useUniqueId, useCustom } from '../utils';
+import Nav from '../Nav';
+import Tab from './Tab';
+import TabPanel from './TabPanel';
+function getFocusableTabs(tablist) {
+  var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');
+  return Array.from(tabs).filter(function (tab) {
+    return !(tab.getAttribute('aria-disabled') === 'true');
+  });
+}
+function getFocusedTab(tablist) {
+  var tabs = getFocusableTabs(tablist);
+  return tabs.find(function (tab) {
+    return tab.getAttribute('aria-selected');
+  });
+}
+function nextItem(tablist) {
+  if (!tablist) {
+    return null;
+  }
+  var item = getFocusedTab(tablist);
+  var items = getFocusableTabs(tablist);
+  if (!item) {
+    return items[0];
+  }
+  var nextItem = items[items.indexOf(item) + 1];
+  if (!nextItem || nextItem.getAttribute('role') !== 'tab') {
+    return items[0];
+  }
+  return nextItem;
+}
+function previousItem(tablist) {
+  if (!tablist) {
+    return null;
+  }
+  var item = getFocusedTab(tablist);
+  var items = getFocusableTabs(tablist);
+  if (!item) {
+    return items[items.length - 1];
+  }
+  var previousItem = items[items.indexOf(item) - 1];
+  if (!previousItem || previousItem.getAttribute('role') !== 'tab') {
+    return items[items.length - 1];
+  }
+  return previousItem;
+}
+var renderPanels = function renderPanels(children, tabProps) {
+  var id = tabProps.id,
+    activeKey = tabProps.activeKey;
+  return ReactChildren.map(children, function (child) {
+    var _child$props = child.props,
+      eventKey = _child$props.eventKey,
+      children = _child$props.children;
+    var selected = eventKey === activeKey;
+    return /*#__PURE__*/React.createElement(TabPanel, {
+      "aria-labelledby": id + "-" + eventKey,
+      "aria-hidden": !selected,
+      id: id + "-panel-" + eventKey,
+      active: selected
+    }, children);
+  });
+};
+var renderTabs = function renderTabs(children, tabPanelProps) {
+  var id = tabPanelProps.id,
+    activeKey = tabPanelProps.activeKey;
+  return ReactChildren.map(children, function (child) {
+    var _child$props2 = child.props,
+      eventKey = _child$props2.eventKey,
+      title = _child$props2.title,
+      disabled = _child$props2.disabled,
+      icon = _child$props2.icon;
+    var selected = eventKey === activeKey;
+    return /*#__PURE__*/React.createElement(Nav.Item, {
+      role: "tab",
+      as: "button",
+      type: "button",
+      "aria-selected": selected,
+      "aria-controls": id + "-panel-" + eventKey,
+      "aria-disabled": disabled,
+      "data-event-key": eventKey,
+      disabled: disabled,
+      icon: icon,
+      id: id + "-" + eventKey,
+      tabIndex: selected ? undefined : -1,
+      eventKey: eventKey
+    }, title);
+  });
+};
+
+/**
+ * Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
+ *
+ * @version 5.53.0
+ * @see https://rsuitejs.com/components/tabs
+ */
+var Tabs = /*#__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 ? 'tabs' : _props$classPrefix,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'tabs' : _props$appearance,
+    className = props.className,
+    children = props.children,
+    activeKeyProp = props.activeKey,
+    defaultActiveKey = props.defaultActiveKey,
+    idProp = props.id,
+    reversed = props.reversed,
+    vertical = props.vertical,
+    onSelect = props.onSelect,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "appearance", "className", "children", "activeKey", "defaultActiveKey", "id", "reversed", "vertical", "onSelect"]);
+  var id = useUniqueId('tab-', idProp);
+  var _useCustom = useCustom(),
+    rtl = _useCustom.rtl;
+  var _useControlled = useControlled(activeKeyProp, defaultActiveKey),
+    activeKey = _useControlled[0],
+    setActiveKey = _useControlled[1];
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    prefix = _useClassNames.prefix,
+    merge = _useClassNames.merge;
+  var tablistRef = React.useRef(null);
+  var handleSelect = useEventCallback(function (eventKey, event) {
+    setActiveKey(eventKey);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
+  });
+  var handleKeyDown = useEventCallback(function (event) {
+    var _getFocusableTabs;
+    var target = event.target;
+    if (target.getAttribute('role') !== 'tab') {
+      return;
+    }
+    var previousItemKey = vertical ? 'ArrowUp' : 'ArrowLeft';
+    var nextItemKey = vertical ? 'ArrowDown' : 'ArrowRight';
+    if (!vertical && rtl) {
+      previousItemKey = 'ArrowRight';
+      nextItemKey = 'ArrowLeft';
+    }
+    var item = null;
+    switch (event.key) {
+      case previousItemKey:
+        item = previousItem(tablistRef.current);
+        event.preventDefault();
+        break;
+      case nextItemKey:
+        item = nextItem(tablistRef.current);
+        event.preventDefault();
+        break;
+      case 'Home':
+        item = (_getFocusableTabs = getFocusableTabs(tablistRef.current)) === null || _getFocusableTabs === void 0 ? void 0 : _getFocusableTabs[0];
+        event.preventDefault();
+        break;
+      case 'End':
+        var tabs = getFocusableTabs(tablistRef.current);
+        item = tabs[tabs.length - 1];
+        event.preventDefault();
+        break;
+    }
+    if (item) {
+      var _item;
+      var _item$dataset = (_item = item) === null || _item === void 0 ? void 0 : _item.dataset,
+        _eventKey = _item$dataset.eventKey;
+      handleSelect(_eventKey, event);
+      item.focus();
+    }
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: merge(className, withClassPrefix({
+      reversed: reversed,
+      vertical: vertical
+    }))
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Nav, {
+    role: "tablist",
+    "aria-orientation": vertical ? 'vertical' : 'horizontal',
+    reversed: reversed,
+    vertical: vertical,
+    appearance: appearance,
+    activeKey: activeKey,
+    onSelect: handleSelect,
+    onKeyDown: handleKeyDown,
+    ref: tablistRef
+  }, renderTabs(children, {
+    id: id,
+    activeKey: activeKey
+  })), /*#__PURE__*/React.createElement("div", {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["content"])))
+  }, renderPanels(children, {
+    id: id,
+    activeKey: activeKey
+  })));
+});
+Tabs.Tab = Tab;
+Tabs.displayName = 'Tabs';
+Tabs.propTypes = {
+  appearance: PropTypes.oneOf(['tabs', 'subtle']),
+  activeKey: PropTypes.any,
+  defaultActiveKey: PropTypes.any,
+  reversed: PropTypes.bool,
+  vertical: PropTypes.bool,
+  id: PropTypes.string,
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
+  children: PropTypes.node,
+  onSelect: PropTypes.func
+};
+export default Tabs;

package/esm/Tabs/index.d.ts

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

package/esm/Tabs/index.js

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

package/esm/index.d.ts

@@ -118,6 +118,8 @@ export { default as Accordion } from './Accordion';
 export type { AccordionProps } from './Accordion';
 export { default as PanelGroup } from './PanelGroup';
 export type { PanelGroupProps } from './PanelGroup';
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
 export { default as Table } from './Table';
 export type { TableProps, ColumnProps, ColumnGroupProps, CellProps, TableLocaleType } from './Table';
 export { default as Progress } from './Progress';

package/esm/index.js

@@ -63,6 +63,7 @@ export { default as CheckTree } from './CheckTree';
 export { default as Panel } from './Panel';
 export { default as Accordion } from './Accordion';
 export { default as PanelGroup } from './PanelGroup';
+export { default as Tabs } from './Tabs';
 export { default as Table } from './Table';
 export { default as Progress } from './Progress';
 export { default as Timeline } from './Timeline';