rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250424

package/esm/CheckPicker/CheckPicker.js

@@ -8,8 +8,7 @@ import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import SearchBox from "../internals/SearchBox/index.js";
 import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useControlled, useCustom, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, shallowEqual, mergeRefs, getDataGroupBy } from "../internals/utils/index.js";
 import { Listbox, ListCheckItem, PickerToggle, PickerPopup, SelectedElement, PickerToggleTrigger, useFocusItemValue, useSearch, useToggleKeyDownEvent, usePickerRef, triggerPropKeys } from "../internals/Picker/index.js";
 const emptyArray = [];

package/esm/CheckTree/CheckTree.js

@@ -7,9 +7,8 @@ import useFlattenTree from "../Tree/hooks/useFlattenTree.js";
 import useTreeWithChildren from "../Tree/hooks/useTreeWithChildren.js";
 import useExpandTree from "../Tree/hooks/useExpandTree.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useEventCallback } from "../internals/hooks/index.js";
+import { useEventCallback, useCustom } from "../internals/hooks/index.js";
 import { TreeProvider } from "../internals/Tree/TreeProvider.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `CheckTree` component is used for selecting multiple options which are organized in a tree structure.
  * @see https://rsuitejs.com/components/check-tree

package/esm/CheckTree/CheckTreeNode.js

@@ -7,8 +7,7 @@ import { forwardRef, stringifyReactNode, mergeRefs } from "../internals/utils/in
 import { useTreeContextProps } from "../internals/Tree/TreeProvider.js";
 import { CHECK_STATE } from "../internals/constants/index.js";
 import { indentTreeNode } from "../Tree/utils/index.js";
-import { useStyles, useEventCallback, useFocusVirtualListItem } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useEventCallback, useFocusVirtualListItem } from "../internals/hooks/index.js";
 const CheckTreeNode = forwardRef((props, ref) => {
   const {
     as: Component = 'div',

package/esm/CheckTree/CheckTreeView.js

@@ -13,14 +13,13 @@ import useTreeCheckState from "./hooks/useTreeCheckState.js";
 import useTreeNodeProps from "./hooks/useTreeNodeProps.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { List, AutoSizer, defaultItemSize } from "../internals/Windowing/index.js";
-import { useStyles, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useEventCallback } from "../internals/hooks/index.js";
 import { getPathTowardsItem, getKeyParentMap } from "../internals/Tree/utils/index.js";
 import { onMenuKeyDown } from "../internals/Picker/index.js";
 import { TreeView } from "../internals/Tree/index.js";
 import { hasGrandchild, isEveryFirstLevelNodeUncheckable, getFormattedTree, isNodeUncheckable } from "./utils.js";
 import { hasVisibleChildren, getActiveItem, isExpand } from "../Tree/utils/index.js";
 import { useTreeContextProps } from "../internals/Tree/TreeProvider.js";
-import { useCustom } from "../CustomProvider/index.js";
 
 /**
  * Props for the CheckTreeView component.

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -11,12 +11,11 @@ import useFocusState from "./hooks/useFocusState.js";
 import isNil from 'lodash/isNil';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
-import { useStyles, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs } from "../internals/utils/index.js";
 import { PickerToggle, onMenuKeyDown, PickerPopup, SelectedElement, PickerToggleTrigger, useToggleKeyDownEvent, usePickerRef, triggerPropKeys } from "../internals/Picker/index.js";
 import { getSelectedItems } from "../CheckTree/utils.js";
 import { TreeProvider, useTreeImperativeHandle } from "../internals/Tree/TreeProvider.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `CheckTreePicker` component is used for selecting multiple options which are organized in a tree structure.
  *

package/esm/Checkbox/Checkbox.js

@@ -2,10 +2,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useMemo, useRef } from 'react';
 import Box from "../internals/Box/index.js";
-import { useControlled, useStyles, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
+import { useControlled, useStyles, useCustom, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { forwardRef, partitionHTMLProps, mergeRefs } from "../internals/utils/index.js";
 import { CheckboxGroupContext } from "../CheckboxGroup/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * The Checkbox component is used for selecting multiple options from a set.
  * @see https://rsuitejs.com/components/checkbox

package/esm/CheckboxGroup/CheckboxGroup.js

@@ -6,9 +6,8 @@ import remove from 'lodash/remove';
 import Plaintext from "../internals/Plaintext/index.js";
 import Box from "../internals/Box/index.js";
 import { forwardRef, shallowEqual } from "../internals/utils/index.js";
-import { useStyles, useControlled } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useCustom } from "../internals/hooks/index.js";
 import { CheckboxGroupContext } from "./CheckboxGroupContext.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * The `CheckboxGroup` component is used for selecting multiple options which are unrelated.
  * @see https://rsuitejs.com/components/checkbox/#checkbox-group

package/esm/Container/Container.js

@@ -3,8 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useMemo } from 'react';
 import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 export const ContainerContext = /*#__PURE__*/React.createContext({});
 /**
  * The Container component is used to wrap content in a themed container with a max-width.

package/esm/CustomProvider/CustomProvider.d.ts

@@ -1,275 +1,5 @@
 import React from 'react';
-import { Locale } from '../locales';
-import { ToastContainerInstance } from '../toaster/ToastContainer';
-import type { FormatDateOptions } from '../internals/utils/date/types';
-import type { ReactSuiteComponents } from './types';
-export interface CustomValue<T = Locale> {
-    /**
-     * The prefix of the component CSS class
-     */
-    classPrefix?: string;
-    /**
-     * The locale object that contains the language and formatting rules for the date.
-     */
-    locale: T;
-    /**
-     * Right-to-left text direction.
-     */
-    rtl: boolean;
-    /**
-     * Return the formatted date string in the given format. The result may vary by locale.
-     *
-     * Example:
-     *
-     *  import { format } from 'date-fns/format';
-     *  import { eo } from 'date-fns/locale/eo'
-     *
-     *  function formatDate(date, formatStr) {
-     *    return format(date, formatStr, { locale: eo });
-     *  }
-     *
-     */
-    formatDate: (date: Date | number, format: string, options?: FormatDateOptions) => string;
-    /**
-     * Return the date parsed from string using the given format string.
-     *
-     * Example:
-     *
-     *  import { parse } from 'date-fns/parse';
-     *  import { eo } from 'date-fns/locale/eo'
-     *
-     *  function parseDate(date, formatStr) {
-     *    return parse(date, formatStr, new Date(), { locale: eo });
-     *  }
-     *
-     */
-    parseDate: (dateString: string, formatString: string, referenceDate?: Date | number, options?: FormatDateOptions) => Date;
-    /**
-     * A Map of toast containers
-     */
-    toasters?: React.MutableRefObject<Map<string, ToastContainerInstance>>;
-    /**
-     * If true, the ripple effect is disabled.
-     * Affected components include: Button, Nav.Item, Pagination.
-     */
-    disableRipple?: boolean;
-}
-export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
-    /**
-     * Supported themes
-     */
-    theme?: 'light' | 'dark' | 'high-contrast';
-    /**
-     * The prefix of the icon CSS class
-     */
-    iconClassPrefix?: string;
-    /**
-     * Primary content
-     */
-    children?: React.ReactNode;
-    /**
-     * Sets a container for toast rendering
-     */
-    toastContainer?: HTMLElement | (() => HTMLElement | null) | null;
-    csp?: {
-        /**
-         * Content Security Policy nonce
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
-         */
-        nonce?: string;
-    };
-    /**
-     * Disable inline styles
-     * @default false
-     */
-    disableInlineStyles?: boolean;
-    /**
-     * components allows setting default props for specific components globally.
-     * It accepts an object where each key represents a component name (e.g., 'Button', 'Input'),
-     * and the corresponding value is an object containing the `defaultProps` object.
-     * The `defaultProps` object defines the default props for that component.
-     * These props will be automatically applied to the component unless overridden by specific props
-     * passed in an individual component instance.
-     *
-     * @example
-     * ```js
-     * components={{
-     *   Button: { defaultProps: { appearance: 'primary', size: 'lg' } },
-     *   Input: { defaultProps: { placeholder: 'Enter text', size: 'lg' } }
-     * }}
-     * ```
-     */
-    components?: Partial<ReactSuiteComponents>;
-}
-export declare const CustomContext: React.Context<CustomProviderProps<{
-    code?: string | undefined;
-    common?: {
-        loading: string;
-        emptyMessage: string;
-        remove: string;
-        clear: string;
-    } | undefined;
-    Plaintext?: {
-        unfilled: string;
-        notSelected: string;
-        notUploaded: string;
-    } | undefined;
-    Pagination?: {
-        more: string;
-        prev: string;
-        next: string;
-        first: string;
-        last: string;
-        limit: string;
-        total: string;
-        /**
-         * Return the date parsed from string using the given format string.
-         *
-         * Example:
-         *
-         *  import { parse } from 'date-fns/parse';
-         *  import { eo } from 'date-fns/locale/eo'
-         *
-         *  function parseDate(date, formatStr) {
-         *    return parse(date, formatStr, new Date(), { locale: eo });
-         *  }
-         *
-         */
-        skip: string;
-    } | undefined;
-    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;
-    } | undefined;
-    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;
-    } | undefined;
-    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;
-    } | undefined;
-    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;
-    } | undefined;
-    Combobox?: {
-        noResultsText: string;
-        placeholder: string;
-        searchPlaceholder: string;
-        checkAll: string;
-    } | undefined;
-    InputPicker?: {
-        /**
-         * Right-to-left text direction.
-         */
-        newItem: string;
-        createOption: string;
-        noResultsText: string;
-        placeholder: string;
-        searchPlaceholder: string;
-        checkAll: string;
-    } | undefined;
-    TagPicker?: {
-        /**
-         * Right-to-left text direction.
-         */
-        newItem: string;
-        createOption: string;
-        noResultsText: string;
-        placeholder: string;
-        searchPlaceholder: string;
-        checkAll: string;
-    } | undefined;
-    Uploader?: {
-        inited: string;
-        progress: string;
-        error: string;
-        complete: string;
-        emptyFile: string;
-        upload: string;
-        removeFile: string;
-    } | undefined;
-    CloseButton?: {
-        closeLabel: string;
-    } | undefined;
-    Breadcrumb?: {
-        expandText: string;
-    } | undefined;
-    Toggle?: {
-        on: string;
-        off: string;
-    } | undefined;
-}>>;
+import { CustomProviderProps } from '../internals/Provider/CustomContext';
 /**
  * CustomProvider is used to provide global configuration, such as language, theme, etc.
  *

package/esm/CustomProvider/CustomProvider.js

@@ -4,8 +4,8 @@ import IconProvider from '@rsuite/icons/IconProvider';
 import { usePortal, useIsomorphicLayoutEffect } from "../internals/hooks/index.js";
 import { getClassNamePrefix, prefix } from "../internals/utils/index.js";
 import { addClass, removeClass, canUseDOM } from "../DOMHelper/index.js";
+import { CustomContext } from "../internals/Provider/CustomContext.js";
 import ToastContainer, { toastPlacements, defaultToasterContainer } from "../toaster/ToastContainer.js";
-export const CustomContext = /*#__PURE__*/React.createContext({});
 const themes = ['light', 'dark', 'high-contrast'];
 
 /**

package/esm/CustomProvider/index.d.ts

@@ -1,9 +1,4 @@
 import CustomProvider from './CustomProvider';
-export type { CustomProviderProps } from './CustomProvider';
-export type { ReactSuiteComponents } from './types';
-export { useCustom } from './useCustom';
-export { FormattedDate } from './FormattedDate';
-export { FormattedNumber } from './FormattedNumber';
-export { CustomContext } from './CustomProvider';
+export type { CustomProviderProps } from '../internals/Provider/CustomContext';
 export { CustomProvider };
 export default CustomProvider;

package/esm/CustomProvider/index.js

@@ -3,12 +3,6 @@ import CustomProvider from "./CustomProvider.js";
 
 // export types
 
-// export hooks
-export { useCustom } from "./useCustom.js";
-
 // export components
-export { FormattedDate } from "./FormattedDate.js";
-export { FormattedNumber } from "./FormattedNumber.js";
-export { CustomContext } from "./CustomProvider.js";
 export { CustomProvider };
 export default CustomProvider;

package/esm/DateInput/DateInput.js

@@ -7,11 +7,10 @@ import useKeyboardInputEvent from "./hooks/useKeyboardInputEvent.js";
 import useIsFocused from "./hooks/useIsFocused.js";
 import useFieldCursor from "./hooks/useFieldCursor.js";
 import useSelectedState from "./hooks/useSelectedState.js";
-import { useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useControlled, useEventCallback, useCustom } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
 import { isValid } from "../internals/utils/date/index.js";
 import { getInputSelectedState, validateDateTime, useInputSelection } from "./utils.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * The DateInput component lets users select a date with the keyboard.
  * @version 5.58.0

package/esm/DateInput/hooks/useDateInputState.js

@@ -2,7 +2,7 @@
 import startCase from 'lodash/startCase';
 import { useCallback, useEffect } from 'react';
 import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, isLastDayOfMonth, lastDayOfMonth, isValid } from "../../internals/utils/date/index.js";
-import { useCustom } from "../../CustomProvider/index.js";
+import { useCustom } from "../../internals/hooks/index.js";
 import { useDateField, patternMap } from "../DateField.js";
 export function useDateInputState(_ref) {
   let {

package/esm/DatePicker/DatePicker.js

@@ -18,13 +18,12 @@ import Box from "../internals/Box/index.js";
 import { useCalendarDate } from "../Calendar/hooks/index.js";
 import { isEveryDateInMonth } from "../Calendar/utils/index.js";
 import { forwardRef, mergeRefs, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
-import { useStyles, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { isValid, copyTime, disableTime, DateMode, useDateMode, calendarOnlyProps } from "../internals/utils/date/index.js";
 import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, triggerPropKeys, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { OverlayCloseCause } from "../internals/Overlay/OverlayTrigger.js";
 import { splitRanges, getRestProps } from "./utils.js";
 import { startOfToday } from "../internals/utils/date/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 /**
  * A date picker allows users to select a date from a calendar.
  *
@@ -50,7 +49,7 @@ const DatePicker = forwardRef((props, ref) => {
     format,
     id: idProp,
     isoWeek,
-    weekStart = 0,
+    weekStart,
     limitEndYear = 1000,
     limitStartYear,
     locale,

package/esm/DatePicker/hooks/useFocus.js

@@ -2,8 +2,7 @@
 import delay from 'lodash/delay';
 import { addMonths } from 'date-fns/addMonths';
 import { addDays } from 'date-fns/addDays';
-import { useEventCallback } from "../../internals/hooks/index.js";
-import { useCustom } from "../../CustomProvider/index.js";
+import { useEventCallback, useCustom } from "../../internals/hooks/index.js";
 import { getAriaLabel } from "../../Calendar/utils/index.js";
 import { onMenuKeyDown } from "../../internals/Picker/utils.js";
 function useFocus(props) {

package/esm/DateRangeInput/DateRangeInput.js

@@ -3,10 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useRef, useMemo } from 'react';
 import Input from "../Input/index.js";
 import { isValid } from "../internals/utils/date/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useCustom, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
 import { validateDateTime, useDateInputState, useInputSelection, useKeyboardInputEvent, useIsFocused, useSelectedState, useFieldCursor } from "../DateInput/index.js";
-import { useCustom } from "../CustomProvider/index.js";
 import { getInputSelectedState, DateType, getDateType, isSwitchDateType } from "./utils.js";
 /**
  * The DateRangeInput component lets users select a date with the keyboard.

package/esm/DateRangePicker/DateRangePicker.js

@@ -20,8 +20,7 @@ import * as StaticMethods from "./disabledDateUtils.js";
 import { DateRangePickerProvider } from "./DateRangePickerProvider.js";
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from "./utils.js";
 import { DATERANGE_DISABLED_TARGET as TARGET } from "../internals/constants/index.js";
-import { useStyles, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { splitRanges } from "../DatePicker/utils.js";
 import { PickerPopup, PickerToggleTrigger, PickerIndicator, PickerLabel, triggerPropKeys, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { forwardRef, createChainedFunction, mergeRefs, partitionHTMLProps, getStringLength } from "../internals/utils/index.js";
@@ -59,7 +58,7 @@ const DateRangePicker = forwardRef((props, ref) => {
     hoverRange,
     id: idProp,
     isoWeek = false,
-    weekStart = 0,
+    weekStart,
     limitEndYear = 1000,
     limitStartYear,
     locale,

package/esm/DateRangePicker/Header.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { useStyles } from "../internals/hooks/index.js";
 import { compareAsc } from "../internals/utils/date/index.js";
-import { FormattedDate } from "../CustomProvider/index.js";
+import { FormattedDate } from "../internals/intl/FormattedDate.js";
 import Button from "../Button/index.js";
 function Header(props) {
   const {

package/esm/DateRangePicker/utils.d.ts

@@ -9,6 +9,6 @@ export declare const isSameRange: (source: DateRange | null, dest: DateRange | n
 export declare const getMonthHoverRange: (date: Date) => DateRange;
 export declare const getWeekHoverRange: (date: Date, options: {
     isoWeek: boolean;
-    weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     locale?: Locale;
 }) => DateRange;

package/esm/DateRangePicker/utils.js

@@ -46,7 +46,7 @@ export const getMonthHoverRange = date => [startOfMonth(date), endOfMonth(date)]
 export const getWeekHoverRange = (date, options) => {
   const {
     isoWeek,
-    weekStart,
+    weekStart = 0,
     locale
   } = options;
   if (isoWeek) {

package/esm/Divider/Divider.d.ts

@@ -11,9 +11,10 @@ export interface DividerProps extends BoxProps {
      */
     label?: React.ReactNode;
     /**
-     * The position of the label.
+     * The placement of the label.
+     * @version 6.0.0
      */
-    labelPosition?: 'left' | 'right' | 'center';
+    labelPlacement?: 'start' | 'center' | 'end';
     /**
      * Vertical dividing line. Cannot be used with label.
      */

package/esm/Divider/Divider.js

@@ -3,8 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import StyledBox from "../internals/StyledBox/index.js";
 import { forwardRef, getSizeStyle, mergeStyles } from "../internals/utils/index.js";
-import { useStyles } from "../internals/hooks/index.js";
-import { useCustom } from "../CustomProvider/index.js";
+import { useStyles, useCustom } from "../internals/hooks/index.js";
 /**
  * The Divider component is used to separate content.
  * @see https://rsuitejs.com/components/divider
@@ -21,7 +20,7 @@ const Divider = forwardRef((props, ref) => {
     children,
     color,
     label = children,
-    labelPosition,
+    labelPlacement,
     vertical,
     spacing,
     style,
@@ -46,7 +45,7 @@ const Divider = forwardRef((props, ref) => {
     "data-appearance": appearance,
     "data-orientation": vertical ? 'vertical' : 'horizontal',
     "data-with-label": label ? 'true' : undefined,
-    "data-position": labelPosition
+    "data-placement": labelPlacement
   }, rest), label);
 });
 Divider.displayName = 'Divider';