rsuite 5.62.1 → 5.63.0-alpha.2

package/esm/Toggle/Toggle.js

@@ -1,10 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "disabled", "readOnly", "loading", "plaintext", "className", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"];
-import React, { useCallback, useRef } from 'react';
+var _excluded = ["as", "disabled", "readOnly", "loading", "plaintext", "children", "className", "color", "checkedChildren", "unCheckedChildren", "classPrefix", "checked", "defaultChecked", "size", "locale", "onChange"];
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useControlled, useCustom } from "../internals/hooks/index.js";
+import { useClassNames, useControlled, useCustom, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { partitionHTMLProps } from "../internals/utils/index.js";
 import { oneOf } from "../internals/propTypes/index.js";
 import Plaintext from "../internals/Plaintext/index.js";
@@ -22,7 +22,9 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$loading = props.loading,
     loading = _props$loading === void 0 ? false : _props$loading,
     plaintext = props.plaintext,
+    children = props.children,
     className = props.className,
+    color = props.color,
     checkedChildren = props.checkedChildren,
     unCheckedChildren = props.unCheckedChildren,
     _props$classPrefix = props.classPrefix,
@@ -43,24 +45,27 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
-  var classes = merge(className, withClassPrefix(size, {
+  var classes = merge(className, withClassPrefix(size, color, {
     checked: checked,
     disabled: disabled,
     loading: loading
   }));
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
+  var labelId = useUniqueId('rs-label');
+  var innerId = inner ? labelId + '-inner' : undefined;
+  var labelledby = children ? labelId : innerId;
   var _partitionHTMLProps = partitionHTMLProps(rest),
     htmlInputProps = _partitionHTMLProps[0],
     restProps = _partitionHTMLProps[1];
-  var handleInputChange = useCallback(function (e) {
+  var handleInputChange = useEventCallback(function (e) {
     if (disabled || readOnly || loading) {
       return;
     }
     var checked = e.target.checked;
     setChecked(checked);
     onChange === null || onChange === void 0 ? void 0 : onChange(checked, e);
-  }, [disabled, readOnly, loading, setChecked, onChange]);
+  });
   if (plaintext) {
     return /*#__PURE__*/React.createElement(Plaintext, null, inner || label);
   }
@@ -79,15 +84,20 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     role: "switch",
     "aria-checked": checked,
     "aria-disabled": disabled,
-    "aria-label": typeof inner === 'string' ? inner : label,
+    "aria-labelledby": labelledby,
+    "aria-label": labelledby ? undefined : label,
     "aria-busy": loading || undefined
   })), /*#__PURE__*/React.createElement(Component, {
     className: prefix('presentation')
   }, /*#__PURE__*/React.createElement("span", {
-    className: prefix('inner')
+    className: prefix('inner'),
+    id: innerId
   }, inner), loading && /*#__PURE__*/React.createElement(Loader, {
     className: prefix('loader')
-  })));
+  })), children && /*#__PURE__*/React.createElement("span", {
+    className: prefix('label'),
+    id: labelId
+  }, children));
 });
 Toggle.displayName = 'Toggle';
 Toggle.propTypes = {
@@ -101,6 +111,7 @@ Toggle.propTypes = {
   loading: PropTypes.bool,
   classPrefix: PropTypes.string,
   className: PropTypes.string,
+  children: PropTypes.node,
   onChange: PropTypes.func,
   as: PropTypes.elementType,
   size: oneOf(['sm', 'md', 'lg']),

package/esm/index.d.ts

@@ -180,6 +180,7 @@ export type { CustomProviderProps } from './CustomProvider';
 export type { Locale, CalendarLocale, PlaintextLocale, PaginationLocale, TableLocale, DatePickerLocale, DateRangePickerLocale, PickerLocale, InputPickerLocale, UploaderLocale, BreadcrumbLocale, ToggleLocale } from './locales';
 export type { PickerHandle } from './internals/Picker';
 export { default as useMediaQuery } from './useMediaQuery';
+export { default as useBreakpointValue } from './useBreakpointValue';
 export { default as VisuallyHidden } from './VisuallyHidden';
 export type { VisuallyHiddenProps } from './VisuallyHidden';
 export { default as Tabs } from './Tabs';

package/esm/index.js

@@ -105,14 +105,17 @@ export { default as Sidebar } from "./Sidebar/index.js";
 export { default as Footer } from "./Footer/index.js";
 export { default as Divider } from "./Divider/index.js";
 export { default as Stack } from "./Stack/index.js";
-// Utils and Hooks
+// Utils
 // --------------------------------------------------------
 export { default as Schema } from "./Schema/index.js";
 export { default as Animation } from "./Animation/index.js";
 export { default as DOMHelper } from "./DOMHelper/index.js";
 export { default as Affix } from "./Affix/index.js";
 export { default as CustomProvider } from "./CustomProvider/index.js";
+// Hooks
+
 export { default as useMediaQuery } from "./useMediaQuery/index.js";
+export { default as useBreakpointValue } from "./useBreakpointValue/index.js";
 
 // Disclosure
 // --------------------------------------------------------

package/esm/useBreakpointValue/index.d.ts

@@ -0,0 +1,2 @@
+import useBreakpointValue from './useBreakpointValue';
+export default useBreakpointValue;

package/esm/useBreakpointValue/index.js

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

package/esm/useBreakpointValue/useBreakpointValue.d.ts

@@ -0,0 +1,22 @@
+import { Query } from '../useMediaQuery';
+interface UseBreakpointValueOptions<T = any> {
+    /**
+     * The default value to return if no screen size matches.
+     */
+    defaultValue: T;
+}
+/**
+ * A React Hook that returns different values based on different screen sizes in responsive design.
+ * @version 5.63.0
+ * @unstable Please note that this API is not stable and may change in the future.
+ * @see https://rsuitejs.com/components/use-breakpoint-value
+ *
+ * @example
+ * ```ts
+ * const fontSize = useBreakpointValue({ sm: "14px", lg: "24px" }, { defaultValue: "16px" });
+ * const direction = useBreakpointValue({ sm: 'row' }, { defaultValue:'column' });
+ * ```
+ *
+ */
+export declare function useBreakpointValue<T = any>(breakpoints: Record<Query, T>, options?: UseBreakpointValueOptions<T>): T | undefined;
+export default useBreakpointValue;

package/esm/useBreakpointValue/useBreakpointValue.js

@@ -0,0 +1,25 @@
+'use client';
+import useMediaQuery from "../useMediaQuery/index.js";
+/**
+ * A React Hook that returns different values based on different screen sizes in responsive design.
+ * @version 5.63.0
+ * @unstable Please note that this API is not stable and may change in the future.
+ * @see https://rsuitejs.com/components/use-breakpoint-value
+ *
+ * @example
+ * ```ts
+ * const fontSize = useBreakpointValue({ sm: "14px", lg: "24px" }, { defaultValue: "16px" });
+ * const direction = useBreakpointValue({ sm: 'row' }, { defaultValue:'column' });
+ * ```
+ *
+ */
+export function useBreakpointValue(breakpoints, options) {
+  var _ref = options || {},
+    defaultValue = _ref.defaultValue;
+  var keys = Object.keys(breakpoints);
+  var values = Object.values(breakpoints);
+  var matches = useMediaQuery(keys);
+  var index = matches.indexOf(true);
+  return index !== -1 ? values[index] : defaultValue;
+}
+export default useBreakpointValue;

package/esm/useMediaQuery/index.d.ts

@@ -1,2 +1,3 @@
 import useMediaQuery from './useMediaQuery';
+export type { Query } from './useMediaQuery';
 export default useMediaQuery;

package/esm/useMediaQuery/useMediaQuery.d.ts

@@ -6,18 +6,21 @@ export declare const mediaQuerySizeMap: {
     xl: string;
     xxl: string;
 };
+/**
+ * The type of the query parameter.
+ */
+export type Query = string | keyof typeof mediaQuerySizeMap;
 /**
  * React hook that tracks state of a CSS media query.
- * @deprecated Use useMediaQuery instead.
- *
  * @see https://rsuitejs.com/components/use-media-query
  */
-export declare function useMediaQueryLegacy(query: string | keyof typeof mediaQuerySizeMap | (string | keyof typeof mediaQuerySizeMap)[]): boolean[];
+export declare function useMediaQueryOld(query: Query | Query[]): boolean[];
 /**
  * React hook that tracks state of a CSS media query
  * @version 5.48.0
+ * @unstable Please note that this API is not stable and may change in the future.
  * @see https://rsuitejs.com/components/use-media-query
  */
-export declare function useMediaQuery(query: string | keyof typeof mediaQuerySizeMap | (string | keyof typeof mediaQuerySizeMap)[]): boolean[];
+export declare function useMediaQuery(query: Query | Query[]): boolean[];
 declare const _default: typeof useMediaQuery;
 export default _default;

package/esm/useMediaQuery/useMediaQuery.js

@@ -11,6 +11,11 @@ export var mediaQuerySizeMap = {
   xl: '(min-width: 1200px)',
   xxl: '(min-width: 1400px)'
 };
+
+/**
+ * The type of the query parameter.
+ */
+
 var matchMedia = function matchMedia(query) {
   if (canUseDOM) {
     return window.matchMedia(query);
@@ -23,11 +28,9 @@ var matchMedia = function matchMedia(query) {
 
 /**
  * React hook that tracks state of a CSS media query.
- * @deprecated Use useMediaQuery instead.
- *
  * @see https://rsuitejs.com/components/use-media-query
  */
-export function useMediaQueryLegacy(query) {
+export function useMediaQueryOld(query) {
   var queries = Array.isArray(query) ? query : [query];
   var mediaQueries = queries.map(function (query) {
     return mediaQuerySizeMap[query] || query;
@@ -69,6 +72,7 @@ export function useMediaQueryLegacy(query) {
 /**
  * React hook that tracks state of a CSS media query
  * @version 5.48.0
+ * @unstable Please note that this API is not stable and may change in the future.
  * @see https://rsuitejs.com/components/use-media-query
  */
 export function useMediaQuery(query) {
@@ -89,7 +93,10 @@ export function useMediaQuery(query) {
         return item.media === event.media;
       });
       if (index !== -1) {
-        mediaQueryArray.current[index] = event.matches;
+        // The store snapshot returned by getSnapshot must be immutable. So we need to create a new array.
+        var nextMediaQueryArray = mediaQueryArray.current.slice();
+        nextMediaQueryArray[index] = event.matches;
+        mediaQueryArray.current = nextMediaQueryArray;
       }
       callback();
     };
@@ -102,12 +109,12 @@ export function useMediaQuery(query) {
       });
     };
   }, [mediaQueries]);
-  var getSnapshot = function getSnapshot() {
+  var getSnapshot = useCallback(function () {
     return mediaQueryArray.current;
-  };
-  var getServerSnapshot = function getServerSnapshot() {
-    throw Error('useMediaQuery is a client-only hook');
-  };
+  }, []);
+  var getServerSnapshot = useCallback(function () {
+    return mediaQueryArray.current;
+  }, []);
   return (_React$useSyncExterna = React['useSyncExternalStore']) === null || _React$useSyncExterna === void 0 ? void 0 : _React$useSyncExterna.call(React, subscribe, getSnapshot, getServerSnapshot);
 }
-export default typeof React['useSyncExternalStore'] === 'function' ? useMediaQuery : useMediaQueryLegacy;
+export default typeof React['useSyncExternalStore'] === 'function' ? useMediaQuery : useMediaQueryOld;

package/package.json

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

package/useBreakpointValue/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/useBreakpointValue",
+  "private": true,
+  "main": "../cjs/useBreakpointValue/index.js",
+  "module": "../esm/useBreakpointValue/index.js",
+  "types": "../esm/useBreakpointValue/index.d.ts"
+}

package/internals/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "rsuite/internals",
-  "private": true,
-  "main": "../cjs/internals/index.js",
-  "module": "../esm/internals/index.js",
-  "types": "../esm/internals/index.d.ts"
-}