rsuite 5.67.0 → 5.68.1

package/esm/Sidenav/Sidenav.d.ts

@@ -3,7 +3,7 @@ import SidenavBody from './SidenavBody';
 import SidenavHeader from './SidenavHeader';
 import SidenavToggle from './SidenavToggle';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
-export interface SidenavProps<T = string> extends WithAsProps {
+export interface SidenavProps<T = string | number> extends WithAsProps {
     /** Whether to expand the Sidenav */
     expanded?: boolean;
     /** Menu style */
@@ -25,8 +25,8 @@ export interface SidenavProps<T = string> extends WithAsProps {
      */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
-export declare const SidenavContext: React.Context<SidenavContextType<string> | null>;
-export interface SidenavContextType<T = string> {
+export declare const SidenavContext: React.Context<SidenavContextType<string | number> | null>;
+export interface SidenavContextType<T = string | number> {
     openKeys: T[];
     /**
      * @deprecated Use activeKey from NavContext instead

package/esm/Tabs/Tabs.d.ts

@@ -1,41 +1,44 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
 import Tab from './Tab';
+/**
+ * Props for the Tabs component.
+ */
 export interface TabsProps extends WithAsProps {
     /**
-     * The tabs appearance style.
+     * The appearance of the tabs.
+     * @default 'tabs'
+     * @version 'pills' is supported in version 5.68.0
      */
-    appearance?: 'tabs' | 'subtle';
+    appearance?: 'tabs' | 'subtle' | 'pills';
     /**
-     * Mark the Tab with a matching `eventKey` as active.
+     * The key of the active tab.
      */
-    activeKey?: string;
+    activeKey?: string | number;
     /**
-     * The default active tabKey.
+     * The default key of the active tab.
      */
-    defaultActiveKey?: string;
+    defaultActiveKey?: string | number;
     /**
-     * Reversed display.
-     * @default false
+     * Whether to reverse the order of the tabs.
      */
     reversed?: boolean;
     /**
-     * Vertical display.
-     * @default false
+     * Whether to display the tabs vertically.
      */
     vertical?: boolean;
     /**
-     * The HTML id attribute, which should be unique.
-     * @default use generated id
+     * The ID of the tabs.
+     * @default A unique ID is automatically generated.
      */
     id?: string;
     /**
-     * Callback fired when a Tab is selected.
-     * @param eventKey
-     * @param event
-     * @returns
+     * Callback function that is called when a tab is selected.
+     *
+     * @param eventKey - The key of the selected tab.
+     * @param event - The event object.
      */
-    onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
+    onSelect?: (eventKey: string | number | undefined, event: React.SyntheticEvent) => void;
 }
 interface TabsComponent extends RsRefForwardingComponent<'div', TabsProps> {
     Tab: typeof Tab;

package/esm/Tabs/Tabs.js

@@ -11,6 +11,11 @@ import { ReactChildren } from "../internals/utils/index.js";
 import Nav from "../Nav/index.js";
 import Tab from "./Tab.js";
 import TabPanel from "./TabPanel.js";
+
+/**
+ * Props for the Tabs component.
+ */
+
 function getFocusableTabs(tablist) {
   var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role=tab]');
   return Array.from(tabs).filter(function (tab) {
@@ -203,7 +208,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (props, ref) {
 Tabs.Tab = Tab;
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
-  appearance: PropTypes.oneOf(['tabs', 'subtle']),
+  appearance: PropTypes.oneOf(['tabs', 'subtle', 'pills']),
   activeKey: PropTypes.any,
   defaultActiveKey: PropTypes.any,
   reversed: PropTypes.bool,

package/esm/internals/Overlay/OverlayTrigger.d.ts

@@ -31,7 +31,7 @@ export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, An
     /** Whether mouse is allowed to enter the floating layer of popover, whose default value is false. */
     enterable?: boolean;
     /** For the monitored component, the event will be bound to this component. */
-    children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
+    children: React.ReactNode | ((props: any, ref: any) => React.ReactElement);
     /** Whether to allow clicking document to close the overlay */
     rootClose?: boolean;
     /** Once disabled, the event cannot be triggered. */
@@ -73,7 +73,7 @@ export declare enum OverlayCloseCause {
     ImperativeHandle = 1
 }
 export interface OverlayTriggerHandle {
-    root: HTMLElement | undefined;
+    root?: HTMLElement | null;
     updatePosition: () => void;
     open: (delay?: number) => void;
     close: (delay?: number) => void;

package/esm/internals/Overlay/OverlayTrigger.js

@@ -3,13 +3,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _isUndefined from "lodash/isUndefined";
 var _excluded = ["children", "container", "controlId", "defaultOpen", "trigger", "disabled", "followCursor", "readOnly", "plaintext", "open", "delay", "delayOpen", "delayClose", "enterable", "placement", "speaker", "rootClose", "onClick", "onMouseOver", "onMouseMove", "onMouseOut", "onContextMenu", "onFocus", "onBlur", "onOpen", "onClose", "onExited"];
-import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext, useState, useMemo } from 'react';
+import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext, useState, useMemo, isValidElement, cloneElement } from 'react';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import contains from 'dom-lib/contains';
 import Overlay from "./Overlay.js";
 import { usePortal, useControlled } from "../hooks/index.js";
 import { createChainedFunction, isOneOf } from "../utils/index.js";
+import { isFragment } from "../utils/ReactChildren.js";
 import OverlayContext from "./OverlayContext.js";
 function mergeEvents(events, props) {
   if (events === void 0) {
@@ -98,7 +99,7 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }),
     Portal = _usePortal.Portal,
     containerElement = _usePortal.target;
-  var triggerRef = useRef();
+  var triggerRef = useRef(null);
   var overlayRef = useRef();
   var _useControlled = useControlled(openProp, defaultOpen),
     open = _useControlled[0],
@@ -361,13 +362,21 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }), ref);
     } : speaker);
   };
-  if (typeof children === 'object' && children.type === React.Fragment || typeof children === 'string') {
-    console.error('[rsuite] The OverlayTrigger component does not accept strings or Fragments as child.');
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children(triggerEvents, triggerRef) : /*#__PURE__*/React.cloneElement(children, _extends({
-    ref: triggerRef,
-    'aria-describedby': controlId
-  }, mergeEvents(triggerEvents, children.props))), /*#__PURE__*/React.createElement(Portal, null, renderOverlay()));
+  var triggerElement = useMemo(function () {
+    if (typeof children === 'function') {
+      return children(triggerEvents, triggerRef);
+    } else if (isFragment(children) || ! /*#__PURE__*/isValidElement(children)) {
+      return /*#__PURE__*/React.createElement("span", _extends({
+        ref: triggerRef,
+        "aria-describedby": controlId
+      }, triggerEvents), children);
+    }
+    return /*#__PURE__*/cloneElement(children, _extends({
+      ref: triggerRef,
+      'aria-describedby': controlId
+    }, mergeEvents(triggerEvents, children.props)));
+  }, [children, controlId, triggerEvents]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement, /*#__PURE__*/React.createElement(Portal, null, renderOverlay()));
 });
 OverlayTrigger.displayName = 'OverlayTrigger';
 export default OverlayTrigger;

package/esm/internals/utils/BrowserDetection.js

@@ -41,6 +41,12 @@ export var getSafariVersion = function getSafariVersion() {
  * @see https://caniuse.com/flexbox-gap
  */
 export var isSupportFlexGap = function isSupportFlexGap() {
+  // Check if the browser supports the `gap` property
+  if (typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined') {
+    return CSS.supports('(gap: 1px)');
+  }
+
+  // IE does not support flex-gap
   if (isIE()) {
     return false;
   }

package/esm/internals/utils/ReactChildren.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
+/**
+ * Checks if the given children is a React fragment.
+ * @param children - The children to check.
+ * @returns True if the children is a React fragment, false otherwise.
+ */
+export declare function isFragment(children: React.ReactNode): boolean;
 /**
  * Finds the first child that satisfies the given condition.
  * @param children - The children to search.

package/esm/internals/utils/ReactChildren.js

@@ -18,7 +18,7 @@ function typeOf(object) {
  * @param children - The children to check.
  * @returns True if the children is a React fragment, false otherwise.
  */
-function isFragment(children) {
+export function isFragment(children) {
   return React.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.67.0",
+  "version": "5.68.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/dark.less

@@ -201,6 +201,13 @@
   --rs-navs-subtle-border: var(--rs-gray-600);
   --rs-navs-selected: var(--rs-primary-500);
 
+  // Nav Pills
+  --rs-navs-pills-bg: var(--rs-gray-700);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-600);
+  --rs-navs-pills-item-active-color: var(--rs-gray-0);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
+
   // Navbar
   --rs-navbar-default-bg: var(--rs-gray-800);
   --rs-navbar-default-text: var(--rs-gray-200);

package/styles/color-modes/high-contrast.less

@@ -206,6 +206,13 @@
   --rs-navs-subtle-border: var(--rs-gray-600);
   --rs-navs-selected: var(--rs-primary-500);
 
+  // Nav Pills
+  --rs-navs-pills-bg: var(--rs-gray-700);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-600);
+  --rs-navs-pills-item-active-color: var(--rs-primary-500);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
+
   // Navbar
   --rs-navbar-default-bg: var(--rs-gray-800);
   --rs-navbar-default-text: var(--rs-gray-50);

package/styles/color-modes/light.less

@@ -220,6 +220,14 @@
   --rs-navs-subtle-border: var(--rs-gray-50);
   --rs-navs-selected: var(--rs-primary-700);
 
+  // Nav Pills
+  --rs-navs-pills-bg: var(--rs-gray-100);
+  --rs-navs-pills-item-color: var(--rs-text-secondary);
+  --rs-navs-pills-item-active-bg: var(--rs-gray-0);
+  --rs-navs-pills-item-active-color: var(--rs-gray-900);
+  --rs-navs-pills-item-disabled-color: var(--rs-gray-400);
+  --rs-navs-pills-item-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+
   // Navbar
   --rs-navbar-default-bg: var(--rs-gray-50);
   --rs-navbar-default-text: var(--rs-gray-800);

package/styles/plugins/palette.js

@@ -1345,7 +1345,39 @@ function calculateBrightness(originalBrightness, index) {
   );
 }
 
+function generatePalette(colorStr, name) {
+  const { _r, _g, _b, _a } = tinycolor(colorStr);
+  const color = {
+    rgb: [_r, _g, _b],
+    alpha: _a
+  };
+
+  return COLOR_NUMBER_SET.map((level, index) => {
+    const {
+      rgb: [r, g, b],
+      alpha: a
+    } = color;
+
+    const hsv = tinycolor({ r, g, b, a }).toHsv();
+    const tiny = tinycolor({
+      h: calculateHue(hsv.h, index),
+      s: calculateSaturation(hsv.s, index),
+      v: calculateBrightness(hsv.v, index)
+    });
+
+    return {
+      level,
+      hex: tiny.toHexString(),
+      rgb: tiny.toRgbString(),
+      hls: tiny.toHslString(),
+      cssVar: `--rs-${name}-${level}`
+    };
+  });
+}
+
 module.exports = {
+  tinycolor,
+  generatePalette,
   install: function (less, pluginManager, functions) {
     /**
      * Calculate color
@@ -1357,12 +1389,8 @@ module.exports = {
         rgb: [r, g, b],
         alpha: a
       } = color;
-      const hsv = tinycolor({
-        r,
-        g,
-        b,
-        a
-      }).toHsv();
+
+      const hsv = tinycolor({ r, g, b, a }).toHsv();
       const index = COLOR_NUMBER_SET.indexOf('' + colorNumber.value);
       if (index === -1 || index === PRIMARY_INDEX) {
         return less.color(color.rgb);