rsuite 6.0.0-canary-2025032014 → 6.0.0-canary-20250403

package/esm/internals/Picker/PickerToggleTrigger.js

@@ -2,42 +2,89 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
 import pick from 'lodash/pick';
+import omit from 'lodash/omit';
+import Box from "../Box/index.js";
+import PickerDrawer from "./PickerDrawer.js";
 import OverlayTrigger from "../Overlay/OverlayTrigger.js";
 import { useUniqueId } from "../hooks/index.js";
-export const omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
-export const pickTriggerPropKeys = [...omitTriggerPropKeys, 'disabled', 'plaintext', 'readOnly', 'loading', 'label'];
+import { useStyles } from "../hooks/index.js";
+import { useBreakpointValue } from "../../useBreakpointValue/index.js";
+export const overlayPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
+export const pickerCommonPropKeys = ['disabled', 'plaintext', 'readOnly', 'loading', 'label'];
+export const triggerPropKeys = [...overlayPropKeys, ...pickerCommonPropKeys];
 export const ComboboxContext = /*#__PURE__*/React.createContext({
   popupType: 'listbox'
 });
-const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
-    pickerProps,
-    speaker,
-    placement,
-    trigger = 'click',
+    appearance,
+    as,
+    block,
+    children,
+    className,
+    classPrefix = 'picker',
+    disabled,
     id,
     multiple,
+    name,
+    triggerProps,
+    placement,
     popupType = 'listbox',
+    rootRef,
+    speaker,
+    style,
+    size,
+    trigger = 'click',
+    responsive = true,
+    onKeyDown,
+    onClick,
     ...rest
   } = props;
-  const pickerTriggerProps = pick(pickerProps, pickTriggerPropKeys);
+  const pickerTriggerProps = pick(triggerProps, triggerPropKeys);
   const pickerId = useUniqueId('rs-', id);
+  const breakpoint = useBreakpointValue({
+    xsOnly: 'xs'
+  }, {
+    enabled: responsive
+  });
+  // Only use the breakpoint value if not disabled
+  const effectiveBreakpoint = disabled ? undefined : breakpoint;
   const comboboxContext = useMemo(() => ({
     id: pickerId,
     hasLabel: typeof pickerTriggerProps.label !== 'undefined',
     multiple,
     placement,
+    breakpoint: effectiveBreakpoint,
     popupType
-  }), [pickerId, multiple, placement, popupType]);
+  }), [pickerId, multiple, placement, effectiveBreakpoint, popupType]);
+  const {
+    withPrefix,
+    merge
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
     value: comboboxContext
-  }, /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, pickerTriggerProps, rest, {
+  }, /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, pickerTriggerProps, {
     disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
     ref: ref,
     trigger: trigger,
     placement: placement,
-    speaker: speaker
-  })));
+    speaker: speaker,
+    overlayAs: effectiveBreakpoint === 'xs' ? PickerDrawer : undefined
+  }), /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    className: classes,
+    style: style,
+    ref: rootRef,
+    "data-picker": name,
+    "data-variant": appearance,
+    "data-size": size,
+    "data-disabled": disabled || undefined,
+    "data-block": block || undefined,
+    "data-testid": "picker",
+    onKeyDown: onKeyDown,
+    onClick: onClick
+  }, omit(rest, [...triggerPropKeys])), children)));
 });
 PickerToggleTrigger.displayName = 'PickerToggleTrigger';
 export default PickerToggleTrigger;

package/esm/internals/Picker/hooks/index.d.ts

@@ -3,4 +3,3 @@ export { default as useCombobox } from './useCombobox';
 export { default as useFocusItemValue } from './useFocusItemValue';
 export { default as useToggleKeyDownEvent } from './useToggleKeyDownEvent';
 export { default as useSearch } from './useSearch';
-export { default as usePickerClassName } from './usePickerClassName';

package/esm/internals/Picker/hooks/index.js

@@ -3,5 +3,4 @@ export { default as usePickerRef } from "./usePickerRef.js";
 export { default as useCombobox } from "./useCombobox.js";
 export { default as useFocusItemValue } from "./useFocusItemValue.js";
 export { default as useToggleKeyDownEvent } from "./useToggleKeyDownEvent.js";
-export { default as useSearch } from "./useSearch.js";
-export { default as usePickerClassName } from "./usePickerClassName.js";
+export { default as useSearch } from "./useSearch.js";

package/esm/internals/Picker/hooks/useCombobox.d.ts

@@ -3,6 +3,7 @@ declare function useCombobox(): {
     popupType: "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
     multiple: boolean | undefined;
     placement: import("../../types").Placement | undefined;
+    breakpoint: string | undefined;
     labelId: string | undefined;
 };
 export default useCombobox;

package/esm/internals/Picker/hooks/useCombobox.js

@@ -7,13 +7,15 @@ function useCombobox() {
     hasLabel,
     popupType,
     multiple,
-    placement
+    placement,
+    breakpoint
   } = useContext(ComboboxContext);
   return {
     id,
     popupType,
     multiple,
     placement,
+    breakpoint,
     labelId: hasLabel ? `${id}-label` : undefined
   };
 }

package/esm/internals/Picker/index.d.ts

@@ -1,3 +1,4 @@
+export * from './PickerToggleTrigger';
 export { default as Listbox } from './Listbox';
 export { default as ListItem } from './ListItem';
 export { default as ListItemGroup } from './ListItemGroup';
@@ -6,9 +7,7 @@ export { default as PickerPopup } from './PickerPopup';
 export { default as PickerToggle } from './PickerToggle';
 export { default as PickerLabel } from './PickerLabel';
 export { default as PickerIndicator } from './PickerIndicator';
-export { default as PickerToggleTrigger } from './PickerToggleTrigger';
 export { default as SelectedElement } from './SelectedElement';
-export { pickTriggerPropKeys, omitTriggerPropKeys } from './PickerToggleTrigger';
 export * from './hooks';
 export * from './utils';
 export type { OverlayTriggerHandle, PositionChildProps } from '../Overlay/types';

package/esm/internals/Picker/index.js

@@ -1,5 +1,6 @@
 'use client';
 // export components
+export * from "./PickerToggleTrigger.js";
 export { default as Listbox } from "./Listbox.js";
 export { default as ListItem } from "./ListItem.js";
 export { default as ListItemGroup } from "./ListItemGroup.js";
@@ -8,11 +9,9 @@ export { default as PickerPopup } from "./PickerPopup.js";
 export { default as PickerToggle } from "./PickerToggle.js";
 export { default as PickerLabel } from "./PickerLabel.js";
 export { default as PickerIndicator } from "./PickerIndicator.js";
-export { default as PickerToggleTrigger } from "./PickerToggleTrigger.js";
 export { default as SelectedElement } from "./SelectedElement.js";
 
 // export hooks and utils
-export { pickTriggerPropKeys, omitTriggerPropKeys } from "./PickerToggleTrigger.js";
 export * from "./hooks/index.js";
 export * from "./utils.js";
 

package/{cjs → esm/internals}/SafeAnchor/SafeAnchor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { BoxProps } from '../Box';
 export interface SafeAnchorProps extends BoxProps, React.HTMLAttributes<HTMLElement> {
     /** Link specified url */
     href?: string;
@@ -10,5 +10,5 @@ export interface SafeAnchorProps extends BoxProps, React.HTMLAttributes<HTMLElem
  * A SafeAnchor is a wrapper around the `<a>` HTML element.
  * @private
  */
-declare const SafeAnchor: import("../internals/types").InternalRefForwardingComponent<"a", SafeAnchorProps, never> & Record<string, never>;
+declare const SafeAnchor: import("../types").InternalRefForwardingComponent<"a", SafeAnchorProps, never> & Record<string, never>;
 export default SafeAnchor;

package/esm/{SafeAnchor → internals/SafeAnchor}/SafeAnchor.js

@@ -1,9 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback } from 'react';
-import Box from "../internals/Box/index.js";
-import { useCustom } from "../CustomProvider/index.js";
-import { forwardRef } from "../internals/utils/index.js";
+import Box from "../Box/index.js";
+import { useCustom } from "../../CustomProvider/index.js";
+import { forwardRef } from "../utils/index.js";
 function isTrivialHref(href) {
   return !href || href.trim() === '#';
 }

package/esm/internals/Tree/TreeView.js

@@ -5,7 +5,7 @@ import useCombobox from "../Picker/hooks/useCombobox.js";
 import ScrollView from "../ScrollView/index.js";
 import Box from "../Box/index.js";
 import { useTreeContextProps } from "./TreeProvider.js";
-import { forwardRef } from "../utils/index.js";
+import { forwardRef, mergeStyles, getCssValue } from "../utils/index.js";
 const ScrollShadowView = forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(ScrollView, _extends({
     scrollShadow: true,
@@ -36,10 +36,9 @@ const TreeView = forwardRef((props, ref) => {
   const treeAs = scrollShadow && !virtualized ? ScrollShadowView : as;
 
   // If the tree is virtualized, the height is not needed.
-  const viewStyles = {
-    height: virtualized ? undefined : height,
-    ...style
-  };
+  const viewStyles = mergeStyles(style, {
+    '--rs-tree-view-height': virtualized ? undefined : getCssValue(height)
+  });
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: treeAs,
     role: "tree",

package/esm/internals/hooks/useRootClose.js

@@ -3,7 +3,7 @@ import { useEffect, useCallback } from 'react';
 import contains from 'dom-lib/contains';
 import ownerDocument from 'dom-lib/ownerDocument';
 import on from 'dom-lib/on';
-import getDOMNode from "../utils/getDOMNode.js";
+import { getDOMNode } from "../utils/index.js";
 import { KEY_VALUES } from "../constants/index.js";
 function isLeftClickEvent(event) {
   return (event === null || event === void 0 ? void 0 : event.button) === 0;

package/esm/internals/utils/{dom.d.ts → html/dom.d.ts}

@@ -1 +1,2 @@
 export declare function isFocusableElement(element: Element): boolean;
+export declare function isDisableableElement(element: any): boolean;

package/esm/internals/utils/{dom.js → html/dom.js}

@@ -10,4 +10,11 @@ selector => `${selector}:not([tabindex='-1']):not([style*='display: none'])` : s
 export function isFocusableElement(element) {
   if (element === document.body) return false;
   return element.matches(focusableSelector);
+}
+const disableableElements = ['button', 'fieldset', 'optgroup', 'option', 'select', 'textarea', 'input'];
+export function isDisableableElement(element) {
+  if (typeof element === 'string') {
+    return disableableElements.includes(element);
+  }
+  return false;
 }

package/esm/internals/utils/html/index.d.ts

@@ -0,0 +1,4 @@
+export * from './htmlPropsUtils';
+export * from './events';
+export * from './dom';
+export * from './safeSetSelection';

package/esm/internals/utils/html/index.js

@@ -0,0 +1,5 @@
+'use client';
+export * from "./htmlPropsUtils.js";
+export * from "./events.js";
+export * from "./dom.js";
+export * from "./safeSetSelection.js";

package/esm/internals/utils/{safeSetSelection.js → html/safeSetSelection.js}

@@ -1,5 +1,5 @@
 'use client';
-import { isAndroid } from "./BrowserDetection.js";
+import { isAndroid } from "../BrowserDetection.js";
 const strNone = 'none';
 
 /**

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

@@ -1,29 +1,17 @@
 export * from './BrowserDetection';
-export * from './htmlPropsUtils';
+export * from './html';
 export * from './colours';
 export * from './sizes';
 export * from './style-sheet';
 export * from './placement';
-export { stringifyReactNode, reactToString } from './stringifyReactNode';
-export { getSafeRegExpString } from './getSafeRegExpString';
-export { getDOMNode } from './getDOMNode';
+export * from './string';
+export * from './react';
 export { guid } from './guid';
 export { createChainedFunction } from './createChainedFunction';
 export { isOneOf } from './isOneOf';
-export { ReactChildren } from './ReactChildren';
-export { tplTransform } from './tplTransform';
-export { mergeRefs } from './mergeRefs';
 export { shallowEqual, shallowEqualArray } from './shallowEqual';
 export { composeFunctions } from './composeFunctions';
-export { safeSetSelection } from './safeSetSelection';
-export { getStringLength } from './getStringLength';
 export { getDataGroupBy } from './getDataGroupBy';
-export { deprecateComponent } from './deprecateComponent';
 export { warnOnce } from './warnOnce';
-export { createComponent } from './createComponent';
 export { attachParent } from './attachParent';
-export { isFocusEntering, isFocusLeaving } from './events';
-export { isFocusableElement } from './dom';
-export { forwardRef } from './forwardRef';
 export { isPresetSize } from './sizes';
-export type { ComponentProps } from './createComponent';

package/esm/internals/utils/index.js

@@ -1,29 +1,18 @@
 'use client';
 export * from "./BrowserDetection.js";
-export * from "./htmlPropsUtils.js";
+export * from "./html/index.js";
 export * from "./colours.js";
 export * from "./sizes.js";
 export * from "./style-sheet/index.js";
 export * from "./placement.js";
-export { stringifyReactNode, reactToString } from "./stringifyReactNode.js";
-export { getSafeRegExpString } from "./getSafeRegExpString.js";
-export { getDOMNode } from "./getDOMNode.js";
+export * from "./string/index.js";
+export * from "./react/index.js";
 export { guid } from "./guid.js";
 export { createChainedFunction } from "./createChainedFunction.js";
 export { isOneOf } from "./isOneOf.js";
-export { ReactChildren } from "./ReactChildren.js";
-export { tplTransform } from "./tplTransform.js";
-export { mergeRefs } from "./mergeRefs.js";
 export { shallowEqual, shallowEqualArray } from "./shallowEqual.js";
 export { composeFunctions } from "./composeFunctions.js";
-export { safeSetSelection } from "./safeSetSelection.js";
-export { getStringLength } from "./getStringLength.js";
 export { getDataGroupBy } from "./getDataGroupBy.js";
-export { deprecateComponent } from "./deprecateComponent.js";
 export { warnOnce } from "./warnOnce.js";
-export { createComponent } from "./createComponent.js";
 export { attachParent } from "./attachParent.js";
-export { isFocusEntering, isFocusLeaving } from "./events.js";
-export { isFocusableElement } from "./dom.js";
-export { forwardRef } from "./forwardRef.js";
 export { isPresetSize } from "./sizes.js";

package/esm/internals/utils/{ReactChildren.d.ts → react/ReactChildren.d.ts}

@@ -1,10 +1,4 @@
 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.
@@ -53,7 +47,7 @@ declare function some(children: React.ReactNode, func: any, context?: any): bool
 /**
  * Utility functions for working with React children.
  */
-export declare const ReactChildren: {
+export declare const rch: {
     /**
      * Maps over the children and clones each child element with the provided props.
      */
@@ -79,4 +73,4 @@ export declare const ReactChildren: {
      */
     find: typeof find;
 };
-export default ReactChildren;
+export default rch;

package/esm/internals/utils/{ReactChildren.js → react/ReactChildren.js}

@@ -1,24 +1,6 @@
 'use client';
 import React from 'react';
-/**
- * Returns the type of the given object.
- * @param object - The object to check.
- * @returns The type of the object.
- */
-function typeOf(object) {
-  if (typeof object === 'object' && object !== null) {
-    return object.type || object.$$typeof;
-  }
-}
-
-/**
- * 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 function isFragment(children) {
-  return React.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
-}
+import { isFragment } from "./ReactIs.js";
 
 /**
  * Flattens the given children into an array.
@@ -143,7 +125,7 @@ function some(children, func, context) {
 /**
  * Utility functions for working with React children.
  */
-export const ReactChildren = {
+export const rch = {
   /**
    * Maps over the children and clones each child element with the provided props.
    */
@@ -169,4 +151,4 @@ export const ReactChildren = {
    */
   find
 };
-export default ReactChildren;
+export default rch;

package/esm/internals/utils/react/ReactIs.d.ts

@@ -0,0 +1,7 @@
+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;

package/esm/internals/utils/react/ReactIs.js

@@ -0,0 +1,22 @@
+'use client';
+import React from 'react';
+
+/**
+ * Returns the type of the given object.
+ * @param object - The object to check.
+ * @returns The type of the object.
+ */
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    return object.type || object.$$typeof;
+  }
+}
+
+/**
+ * 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 function isFragment(children) {
+  return React.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
+}

package/{cjs/internals/utils → esm/internals/utils/react}/createComponent.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import Box, { BoxProps } from '../Box/Box';
+import Box, { BoxProps } from '../../Box/Box';
 export type ComponentProps = BoxProps & React.HTMLAttributes<HTMLDivElement>;
 interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
@@ -10,5 +10,5 @@ interface Props<T extends React.ElementType> extends React.HTMLAttributes<HTMLDi
  * Create a component with `classPrefix` and `as` attributes.
  * By default, the component is based on Box component and inherits all Box props.
  */
-export declare function createComponent<T extends React.ElementType = typeof Box, P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
+export declare function createComponent<T extends React.ElementType = typeof Box, P = ComponentProps>({ name, componentAs, componentClassPrefix, ...defaultProps }: Props<T> & Partial<P>): import("../../types").InternalRefForwardingComponent<T, Partial<P>, never> & Record<string, never>;
 export default createComponent;

package/esm/internals/utils/{createComponent.js → react/createComponent.js}

@@ -2,10 +2,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
-import Box from "../Box/Box.js";
-import { useStyles } from "../hooks/index.js";
+import Box from "../../Box/Box.js";
+import { useStyles } from "../../hooks/index.js";
 import { forwardRef } from "./forwardRef.js";
-import { useCustom } from "../../CustomProvider/index.js";
+import { useCustom } from "../../../CustomProvider/index.js";
 /**
  * Create a component with `classPrefix` and `as` attributes.
  * By default, the component is based on Box component and inherits all Box props.

package/esm/internals/utils/{deprecateComponent.js → react/deprecateComponent.js}

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import warnOnce from "./warnOnce.js";
+import warnOnce from "../warnOnce.js";
 
 /**
  * HOC for display a deprecation message from a deprecated component

package/esm/internals/utils/{forwardRef.d.ts → react/forwardRef.d.ts}

@@ -1,5 +1,5 @@
 import { ElementType, PropsWithoutRef, ForwardRefRenderFunction } from 'react';
-import type { InternalRefForwardingComponent } from '../types';
+import type { InternalRefForwardingComponent } from '../../types';
 /**
  * A utility function to wrap components with `React.forwardRef`.
  * It extends the type signature for better integration with custom components.