rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/esm/internals/utils/ReactChildren.js

@@ -1,6 +1,5 @@
 'use client';
 import React from 'react';
-
 /**
  * Returns the type of the given object.
  * @param object - The object to check.

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

@@ -1,5 +1,15 @@
 import { Color } from '../types/colours';
+/**
+ * Checks if a color value matches the pattern like 'red', 'gray.50', etc.,
+ * and returns the appropriate CSS variable format.
+ * @param color The color value to check
+ * @returns The CSS variable if it's a valid color type, or the original value
+ */
+export declare const getColorVar: (color: Color | string | undefined) => string | undefined;
 export declare const isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
+export declare const getColorStyle: (value?: import("csstype").Property.Color | undefined, component?: string | undefined, prop?: string) => {
+    [x: string]: string | (string & {}) | undefined;
+} | undefined;
 /**
  * Convert short hex color to full hex color
  * e.g. #fff -> #ffffff

package/esm/internals/utils/colours.js

@@ -1,5 +1,33 @@
 'use client';
 import { Colours } from "../types/colours.js";
+import { createStyleGetter } from "./style-sheet/index.js";
+
+/**
+ * Checks if a color value matches the pattern like 'red', 'gray.50', etc.,
+ * and returns the appropriate CSS variable format.
+ * @param color The color value to check
+ * @returns The CSS variable if it's a valid color type, or the original value
+ */
+export const getColorVar = color => {
+  if (!color) return undefined;
+
+  // Check if color is a base color (e.g., 'red', 'blue')
+  const baseColorRegex = /^(red|orange|yellow|green|cyan|blue|violet|gray)$/;
+  if (baseColorRegex.test(color)) {
+    return `var(--rs-color-${color})`;
+  }
+
+  // Check if color is a color with shade (e.g., 'red.50', 'gray.900')
+  const colorWithShadeRegex = /^(red|orange|yellow|green|cyan|blue|violet|gray)\.([1-9]00|50)$/;
+  const match = color.match(colorWithShadeRegex);
+  if (match) {
+    const [, colorName, shade] = match;
+    return `var(--rs-${colorName}-${shade})`;
+  }
+
+  // Return the original value if it's not a recognized color pattern
+  return color;
+};
 export const isPresetColor = color => {
   if (!color) {
     return false;
@@ -9,6 +37,13 @@ export const isPresetColor = color => {
   }
   return Object.values(Colours).includes(color);
 };
+const colorConfig = {
+  prop: 'color',
+  useGlobalVar: true,
+  presetChecker: isPresetColor,
+  valueTransformer: getColorVar
+};
+export const getColorStyle = createStyleGetter(colorConfig);
 
 /**
  * Convert short hex color to full hex color

package/esm/internals/utils/createComponent.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import kebabCase from 'lodash/kebabCase';
-import { useClassNames } from "../hooks/index.js";
+import { useStyles } from "../hooks/index.js";
 import { forwardRef } from "./index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 /**
@@ -27,10 +27,10 @@ export function createComponent(_ref) {
       ...rest
     } = propsWithDefaults;
     const {
-      withClassPrefix,
+      withPrefix,
       merge
-    } = useClassNames(classPrefix);
-    const classes = merge(className, withClassPrefix());
+    } = useStyles(classPrefix);
+    const classes = merge(className, withPrefix());
     return /*#__PURE__*/React.createElement(Component, _extends({}, defaultProps, rest, {
       role: role,
       ref: ref,

package/esm/internals/utils/getDOMNode.js

@@ -1,10 +1,9 @@
 'use client';
-/* eslint-disable react/no-find-dom-node */
-import ReactDOM from 'react-dom';
 function safeFindDOMNode(componentOrElement) {
   if (componentOrElement && 'setState' in componentOrElement) {
-    var _ReactDOM$findDOMNode;
-    return (_ReactDOM$findDOMNode = ReactDOM.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(ReactDOM, componentOrElement);
+    var _ref$current, _ref;
+    // Access the underlying DOM node through ref if available
+    return (_ref$current = componentOrElement === null || componentOrElement === void 0 || (_ref = componentOrElement.ref) === null || _ref === void 0 ? void 0 : _ref.current) !== null && _ref$current !== void 0 ? _ref$current : null;
   }
   return componentOrElement !== null && componentOrElement !== void 0 ? componentOrElement : null;
 }
@@ -19,8 +18,6 @@ export function getDOMNode(elementOrRef) {
   if (element !== null && element !== void 0 && element.nodeType && typeof (element === null || element === void 0 ? void 0 : element.nodeName) === 'string') {
     return element;
   }
-
-  // If you can't get the native HTML element, you can only get it through findDOMNode.
   return safeFindDOMNode(element);
 }
 export default getDOMNode;

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

@@ -1,18 +1,17 @@
 export * from './BrowserDetection';
 export * from './htmlPropsUtils';
-export * from './css';
 export * from './colours';
-export type { ComponentProps } from './createComponent';
+export * from './sizes';
+export * from './style-sheet';
+export * from './placement';
 export { stringifyReactNode, reactToString } from './stringifyReactNode';
 export { getSafeRegExpString } from './getSafeRegExpString';
 export { getDOMNode } from './getDOMNode';
 export { guid } from './guid';
-export { prefix, defaultClassPrefix, getClassNamePrefix } from './prefix';
 export { createChainedFunction } from './createChainedFunction';
 export { isOneOf } from './isOneOf';
 export { ReactChildren } from './ReactChildren';
 export { tplTransform } from './tplTransform';
-export { placementPolyfill } from './placementPolyfill';
 export { mergeRefs } from './mergeRefs';
 export { shallowEqual, shallowEqualArray } from './shallowEqual';
 export { composeFunctions } from './composeFunctions';
@@ -26,3 +25,5 @@ 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,18 +1,18 @@
 'use client';
 export * from "./BrowserDetection.js";
 export * from "./htmlPropsUtils.js";
-export * from "./css.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 { guid } from "./guid.js";
-export { prefix, defaultClassPrefix, getClassNamePrefix } from "./prefix.js";
 export { createChainedFunction } from "./createChainedFunction.js";
 export { isOneOf } from "./isOneOf.js";
 export { ReactChildren } from "./ReactChildren.js";
 export { tplTransform } from "./tplTransform.js";
-export { placementPolyfill } from "./placementPolyfill.js";
 export { mergeRefs } from "./mergeRefs.js";
 export { shallowEqual, shallowEqualArray } from "./shallowEqual.js";
 export { composeFunctions } from "./composeFunctions.js";
@@ -25,4 +25,5 @@ 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 { forwardRef } from "./forwardRef.js";
+export { isPresetSize } from "./sizes.js";

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

@@ -0,0 +1,21 @@
+/**
+ * Replaces the placement string with its polyfilled counterpart based on the given RTL (Right-to-Left) value.
+ * @example
+ * ```
+ * placementPolyfill('bottomLeft');
+ * // 'bottomStart'
+ * ```
+ */
+export declare function placementPolyfill<T = string>(placement: T, rtl?: boolean): T;
+/**
+ * Converts a placement string to kebab-case and applies RTL polyfill if needed.
+ * @example
+ * ```
+ * kebabPlace('bottomLeft');
+ * // 'bottom-start'
+ *
+ * kebabPlace('topRight', true);
+ * // 'top-start'
+ * ```
+ */
+export declare function kebabPlace<T = string>(placement: T, rtl?: boolean): T;

package/esm/internals/utils/{placementPolyfill.js → placement.js}

@@ -1,4 +1,6 @@
 'use client';
+import kebabCase from 'lodash/kebabCase';
+
 /**
  * Replaces the placement string with its polyfilled counterpart based on the given RTL (Right-to-Left) value.
  * @example
@@ -19,4 +21,21 @@ export function placementPolyfill(placement, rtl) {
   }
   return placement;
 }
-export default placementPolyfill;
+
+/**
+ * Converts a placement string to kebab-case and applies RTL polyfill if needed.
+ * @example
+ * ```
+ * kebabPlace('bottomLeft');
+ * // 'bottom-start'
+ *
+ * kebabPlace('topRight', true);
+ * // 'top-start'
+ * ```
+ */
+export function kebabPlace(placement, rtl) {
+  if (typeof placement === 'string') {
+    return kebabCase(placementPolyfill(placement, rtl));
+  }
+  return placement;
+}

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

@@ -0,0 +1,5 @@
+import { SizeEnum } from '../types';
+export declare const isPresetSize: (size?: SizeEnum | number | string | null) => boolean;
+export declare const getSizeStyle: (value?: string | number | undefined, component?: string | undefined, prop?: string) => {
+    [x: string]: string | number | undefined;
+} | undefined;

package/esm/internals/utils/sizes.js

@@ -0,0 +1,16 @@
+'use client';
+import { SizeEnum } from "../types/index.js";
+import { createStyleGetter, getCssValue } from "./style-sheet/index.js";
+export const isPresetSize = size => {
+  if (!size) {
+    return false;
+  }
+  const presetSizes = [...Object.values(SizeEnum), 'full'];
+  return presetSizes.includes(size);
+};
+const sizeConfig = {
+  prop: 'size',
+  presetChecker: isPresetSize,
+  valueTransformer: getCssValue
+};
+export const getSizeStyle = createStyleGetter(sizeConfig);

package/{cjs/internals/utils → esm/internals/utils/style-sheet}/css.d.ts

@@ -1,16 +1,14 @@
 /// <reference types="react" />
+import type { StyleProperties } from '../../types';
 /**
  * Processes and returns a value suitable for CSS (with a unit).
  */
 export declare function getCssValue(value?: number | string | null, unit?: string): string;
-type CSSVariables = Partial<Record<`--${string}`, string>>;
-type StyleProperties = React.CSSProperties & CSSVariables;
 /**
  * Merge multiple style objects, filtering out undefined values
  */
-export declare function mergeStyles(...styles: (React.CSSProperties | undefined | null)[]): StyleProperties;
+export declare function mergeStyles(...styles: (StyleProperties | undefined | null)[]): React.CSSProperties;
 /**
  * Create CSS variables for offset positioning
  */
 export declare function createOffsetStyles(offset?: [number | string, number | string], prefix?: string): React.CSSProperties | undefined;
-export {};

package/esm/internals/utils/{css.js → style-sheet/css.js}

@@ -23,6 +23,7 @@ export function getCssValue(value, unit) {
   // Return string values as is
   return value.toString();
 }
+
 /**
  * Merge multiple style objects, filtering out undefined values
  */

package/esm/internals/utils/style-sheet/index.d.ts

@@ -0,0 +1,4 @@
+export * from './styles';
+export * from './css';
+export * from './prefix';
+export * from './responsive';

package/esm/internals/utils/style-sheet/index.js

@@ -0,0 +1,5 @@
+'use client';
+export * from "./styles.js";
+export * from "./css.js";
+export * from "./prefix.js";
+export * from "./responsive.js";

package/esm/internals/utils/style-sheet/responsive.d.ts

@@ -0,0 +1,2 @@
+import type { ResponsiveValue } from '../../types';
+export declare const getResponsiveClasses: <T = string>(prefix: (...classes: any[]) => string, value?: T | ResponsiveValue<T> | undefined) => string[];

package/esm/internals/utils/style-sheet/responsive.js

@@ -0,0 +1,15 @@
+'use client';
+import { BREAKPOINTS } from "../../constants/index.js";
+export const getResponsiveClasses = (prefix, value) => {
+  if (!value) {
+    return [];
+  }
+  if (typeof value !== 'object') {
+    return [prefix(value)];
+  }
+  return BREAKPOINTS.reduce((classes, breakpoint) => {
+    const breakpointValue = value[breakpoint];
+    if (!breakpointValue) return classes;
+    return [...classes, prefix(`${breakpoint}-${breakpointValue}`)];
+  }, []);
+};

package/esm/internals/utils/style-sheet/styles.d.ts

@@ -0,0 +1,16 @@
+import { Size } from '../../types';
+import { Color } from '../../types/colours';
+type StyleValue<T = Color | Size | number | string> = T;
+type PresetChecker<T = StyleValue> = (value: T) => boolean;
+type ValueTransformer<T = StyleValue> = (value: T) => string | undefined;
+interface StylePropConfig<T = StyleValue> {
+    prop: string;
+    useGlobalVar?: boolean;
+    presetChecker?: PresetChecker<T>;
+    valueTransformer?: ValueTransformer<T>;
+}
+export declare const createStyleValueSetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, component?: string, prop?: string) => string | T | undefined;
+export declare const createStyleGetter: <T = string | number>(config: StylePropConfig<T>) => (value?: T | undefined, component?: string, prop?: string) => {
+    [x: string]: string | T | undefined;
+} | undefined;
+export {};

package/esm/internals/utils/style-sheet/styles.js

@@ -0,0 +1,38 @@
+'use client';
+export const createStyleValueSetter = config => {
+  const {
+    valueTransformer: t,
+    presetChecker,
+    useGlobalVar
+  } = config;
+  return function (value, component, prop) {
+    if (prop === void 0) {
+      prop = config.prop;
+    }
+    if (typeof value === 'undefined' || !component) {
+      return;
+    }
+    if (presetChecker !== null && presetChecker !== void 0 && presetChecker(value)) {
+      return useGlobalVar ? `var(--rs-${prop}-${value})` : `var(--rs-${component}-${prop}-${value})`;
+    } else if (Array.isArray(value)) {
+      // If value is an array, join it with spaces,
+      // .eg, gap=[10, 20] -> '10px 20px'
+      return value.map(item => t ? t(item) : item).join(' ');
+    }
+    return t ? t(value) : value;
+  };
+};
+export const createStyleGetter = config => {
+  const setValue = createStyleValueSetter(config);
+  return function (value, component, prop) {
+    if (prop === void 0) {
+      prop = config.prop;
+    }
+    if (typeof value === 'undefined' || !component) {
+      return;
+    }
+    return {
+      [`--rs-${component}-${prop}`]: setValue(value, component, prop)
+    };
+  };
+};

package/esm/locales/index.d.ts

@@ -25,6 +25,7 @@ export { default as frFR } from './fr_FR';
 export { default as jaJP } from './ja_JP';
 export { default as neNP } from './ne_NP';
 export { default as csCZ } from './cs_CZ';
+export { default as plPL } from './pl_PL';
 type PickKeys<T> = {
     [keys in keyof T]?: T[keys];
 };

package/esm/locales/index.js

@@ -23,4 +23,5 @@ export { default as faIR } from "./fa_IR.js";
 export { default as frFR } from "./fr_FR.js";
 export { default as jaJP } from "./ja_JP.js";
 export { default as neNP } from "./ne_NP.js";
-export { default as csCZ } from "./cs_CZ.js";
+export { default as csCZ } from "./cs_CZ.js";
+export { default as plPL } from "./pl_PL.js";

package/esm/locales/pl_PL.d.ts

@@ -0,0 +1,151 @@
+declare const _default: {
+    code: string;
+    common: {
+        loading: string;
+        emptyMessage: string;
+        remove: string;
+        clear: string;
+    };
+    Plaintext: {
+        unfilled: string;
+        notSelected: string;
+        notUploaded: string;
+    };
+    Pagination: {
+        more: string;
+        prev: string;
+        next: string;
+        first: string;
+        last: string;
+        limit: string;
+        total: string;
+        skip: string;
+    };
+    DateTimeFormats: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    Calendar: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    DatePicker: {
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    DateRangePicker: {
+        last7Days: string;
+        sunday: string;
+        monday: string;
+        tuesday: string;
+        wednesday: string;
+        thursday: string;
+        friday: string;
+        saturday: string;
+        ok: string;
+        today: string;
+        yesterday: string;
+        now: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        formattedMonthPattern: string;
+        formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
+        dateLocale: any;
+    };
+    Combobox: {
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    InputPicker: {
+        newItem: string;
+        createOption: string;
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    TagPicker: {
+        newItem: string;
+        createOption: string;
+        noResultsText: string;
+        placeholder: string;
+        searchPlaceholder: string;
+        checkAll: string;
+    };
+    Uploader: {
+        inited: string;
+        progress: string;
+        error: string;
+        complete: string;
+        emptyFile: string;
+        upload: string;
+        removeFile: string;
+    };
+    CloseButton: {
+        closeLabel: string;
+    };
+    Breadcrumb: {
+        expandText: string;
+    };
+    Toggle: {
+        on: string;
+        off: string;
+    };
+};
+export default _default;

package/esm/locales/pl_PL.js

@@ -0,0 +1,87 @@
+'use client';
+import pl from 'date-fns/locale/pl';
+const DateTimeFormats = {
+  sunday: 'Ndz',
+  monday: 'Pon',
+  tuesday: 'Wt',
+  wednesday: 'Śr',
+  thursday: 'Czw',
+  friday: 'Pt',
+  saturday: 'Sob',
+  ok: 'OK',
+  today: 'Dzisiaj',
+  yesterday: 'Wczoraj',
+  now: 'Teraz',
+  hours: 'Godziny',
+  minutes: 'Minuty',
+  seconds: 'Sekundy',
+  formattedMonthPattern: 'MMM, yyyy',
+  formattedDayPattern: 'dd MMM, yyyy',
+  shortDateFormat: 'dd.MM.yyyy',
+  shortTimeFormat: 'HH:mm',
+  dateLocale: pl
+};
+const Combobox = {
+  noResultsText: 'Nie znaleziono',
+  placeholder: 'Wybierz',
+  searchPlaceholder: 'Szukaj',
+  checkAll: 'Wszystkie'
+};
+const CreatableComboBox = {
+  ...Combobox,
+  newItem: 'Nowy item',
+  createOption: 'Stwórz opcję "{0}"'
+};
+export default {
+  code: 'pl-PL',
+  common: {
+    loading: 'Ładowanie...',
+    emptyMessage: 'Nie znaleziono',
+    remove: 'Usuń',
+    clear: 'Wyczyść'
+  },
+  Plaintext: {
+    unfilled: 'Nie wypełnione',
+    notSelected: 'Nie wybrane',
+    notUploaded: 'Nie wysłane'
+  },
+  Pagination: {
+    more: 'Więcej',
+    prev: 'Poprzednie',
+    next: 'Następne',
+    first: 'Pierwsze',
+    last: 'Ostatnie',
+    limit: '{0} / stron',
+    total: 'Wierszy: {0}',
+    skip: 'Omiń{0}'
+  },
+  DateTimeFormats,
+  Calendar: DateTimeFormats,
+  DatePicker: DateTimeFormats,
+  DateRangePicker: {
+    ...DateTimeFormats,
+    last7Days: 'Ostatnie 7 dni'
+  },
+  Combobox,
+  InputPicker: CreatableComboBox,
+  TagPicker: CreatableComboBox,
+  Uploader: {
+    inited: 'Początkowy',
+    progress: 'Wysyłanie',
+    error: 'Błąd',
+    complete: 'Ukończone',
+    emptyFile: 'Pusty',
+    upload: 'Wyślij',
+    removeFile: 'Usuń plik'
+  },
+  CloseButton: {
+    closeLabel: 'Zamknij'
+  },
+  Breadcrumb: {
+    expandText: 'Pokaż ścieżkę'
+  },
+  Toggle: {
+    on: 'Otwórz',
+    off: 'Zamknij'
+  }
+};

package/esm/toaster/ToastContainer.d.ts

@@ -42,7 +42,7 @@ export type GetInstancePropsType = Omit<ToastContainerProps, 'container' | 'plac
     placement: PlacementType;
 };
 interface ToastContainerComponent extends InternalRefForwardingComponent<'div', ToastContainerProps> {
-    getInstance: (props: GetInstancePropsType) => Promise<[React.RefObject<ToastContainerInstance>, string]>;
+    getInstance: (props: GetInstancePropsType) => Promise<[React.RefObject<ToastContainerInstance | null>, string]>;
 }
 declare const ToastContainer: ToastContainerComponent;
 export default ToastContainer;

package/esm/toaster/ToastContainer.js

@@ -5,7 +5,7 @@ import kebabCase from 'lodash/kebabCase';
 import Transition from "../Animation/Transition.js";
 import ToastContext from "./ToastContext.js";
 import canUseDOM from 'dom-lib/canUseDOM';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { guid, createChainedFunction } from "../internals/utils/index.js";
 import { render } from "./render.js";
 export const defaultToasterContainer = () => {
@@ -80,11 +80,11 @@ const ToastContainer = /*#__PURE__*/forwardRef(function ToastContainer(props, re
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     rootPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(kebabCase(placement)));
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(kebabCase(placement)));
   const {
     push,
     clear,