rsuite 5.0.0 → 5.1.0

package/cjs/SelectPicker/SelectPicker.js

@@ -33,43 +33,43 @@ var _Picker = require("../Picker");
 
 var _templateObject;
 
-var defaultProps = {
-  as: 'div',
-  appearance: 'default',
-  classPrefix: 'picker',
-  searchable: true,
-  cleanable: true,
-  data: [],
-  disabledItemValues: [],
-  valueKey: 'value',
-  labelKey: 'label',
-  placement: 'bottomStart',
-  menuAutoWidth: true,
-  menuMaxHeight: 320
-};
+var emptyArray = [];
 
 var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
-      data = props.data,
-      valueKey = props.valueKey,
-      labelKey = props.labelKey,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+      _props$data = props.data,
+      data = _props$data === void 0 ? emptyArray : _props$data,
+      _props$valueKey = props.valueKey,
+      valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
+      _props$labelKey = props.labelKey,
+      labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
       valueProp = props.value,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
       placeholder = props.placeholder,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
-      cleanable = props.cleanable,
-      placement = props.placement,
+      _props$cleanable = props.cleanable,
+      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
       menuClassName = props.menuClassName,
-      menuAutoWidth = props.menuAutoWidth,
-      menuMaxHeight = props.menuMaxHeight,
+      _props$menuAutoWidth = props.menuAutoWidth,
+      menuAutoWidth = _props$menuAutoWidth === void 0 ? true : _props$menuAutoWidth,
+      _props$menuMaxHeight = props.menuMaxHeight,
+      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
       menuStyle = props.menuStyle,
       groupBy = props.groupBy,
       overrideLocale = props.locale,
       toggleAs = props.toggleAs,
       style = props.style,
-      searchable = props.searchable,
-      disabledItemValues = props.disabledItemValues,
+      _props$searchable = props.searchable,
+      searchable = _props$searchable === void 0 ? true : _props$searchable,
+      _props$disabledItemVa = props.disabledItemValues,
+      disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
       virtualized = props.virtualized,
       listProps = props.listProps,
       id = props.id,
@@ -89,7 +89,7 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       renderMenuGroup = props.renderMenuGroup,
       renderMenuItem = props.renderMenuItem,
       renderExtraFooter = props.renderExtraFooter,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "data", "valueKey", "labelKey", "value", "classPrefix", "placeholder", "defaultValue", "disabled", "cleanable", "placement", "menuClassName", "menuAutoWidth", "menuMaxHeight", "menuStyle", "groupBy", "locale", "toggleAs", "style", "searchable", "disabledItemValues", "virtualized", "listProps", "id", "onGroupTitleClick", "searchBy", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "sort", "renderValue", "renderMenu", "renderMenuGroup", "renderMenuItem", "renderExtraFooter"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "appearance", "data", "valueKey", "labelKey", "value", "classPrefix", "placeholder", "defaultValue", "disabled", "cleanable", "placement", "menuClassName", "menuAutoWidth", "menuMaxHeight", "menuStyle", "groupBy", "locale", "toggleAs", "style", "searchable", "disabledItemValues", "virtualized", "listProps", "id", "onGroupTitleClick", "searchBy", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "sort", "renderValue", "renderMenu", "renderMenuGroup", "renderMenuItem", "renderExtraFooter"]);
   var triggerRef = (0, _react.useRef)();
   var targetRef = (0, _react.useRef)();
   var overlayRef = (0, _react.useRef)();
@@ -298,8 +298,11 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   };
 
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
+    classPrefix: classPrefix,
+    appearance: appearance,
     hasValue: hasValue,
-    name: 'select'
+    name: 'select',
+    cleanable: cleanable
   })),
       classes = _usePickerClassName[0],
       usedClassNamePropKeys = _usePickerClassName[1];
@@ -317,6 +320,7 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
     ref: targetRef,
+    appearance: appearance,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     onKeyDown: onPickerKeyDown,
     as: toggleAs,
@@ -330,7 +334,6 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 });
 
 SelectPicker.displayName = 'SelectPicker';
-SelectPicker.defaultProps = defaultProps;
 SelectPicker.propTypes = (0, _extends2.default)({}, _Picker.listPickerPropTypes, {
   locale: _propTypes.default.any,
   appearance: _propTypes.default.oneOf(['default', 'subtle']),

package/cjs/Sidebar/Sidebar.js

@@ -19,18 +19,15 @@ var _utils = require("../utils");
 
 var _Container = require("../Container/Container");
 
-var defaultProps = {
-  as: 'aside',
-  classPrefix: 'sidebar',
-  width: 260
-};
-
 var Sidebar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
-      classPrefix = props.classPrefix,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'aside' : _props$as,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'sidebar' : _props$classPrefix,
       className = props.className,
       collapsible = props.collapsible,
-      width = props.width,
+      _props$width = props.width,
+      width = _props$width === void 0 ? 260 : _props$width,
       style = props.style,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "collapsible", "width", "style"]);
 
@@ -61,7 +58,6 @@ var Sidebar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 Sidebar.displayName = 'Sidebar';
-Sidebar.defaultProps = defaultProps;
 Sidebar.propTypes = {
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,

package/cjs/Sidenav/Sidenav.js

@@ -34,19 +34,17 @@ var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropT
 var SidenavContext = /*#__PURE__*/_react.default.createContext(null);
 
 exports.SidenavContext = SidenavContext;
-var defaultProps = {
-  as: 'nav',
-  classPrefix: 'sidenav',
-  appearance: 'default',
-  expanded: true
-};
 
 var Sidenav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'nav' : _props$as,
       className = props.className,
-      classPrefix = props.classPrefix,
-      appearance = props.appearance,
-      expanded = props.expanded,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'sidenav' : _props$classPrefix,
+      _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+      _props$expanded = props.expanded,
+      expanded = _props$expanded === void 0 ? true : _props$expanded,
       activeKey = props.activeKey,
       defaultOpenKeys = props.defaultOpenKeys,
       openKeysProp = props.openKeys,
@@ -113,7 +111,6 @@ Sidenav.Header = _SidenavHeader.default;
 Sidenav.Body = _SidenavBody.default;
 Sidenav.Toggle = _SidenavToggle.default;
 Sidenav.displayName = 'Sidenav';
-Sidenav.defaultProps = defaultProps;
 Sidenav.propTypes = {
   as: _propTypes.default.elementType,
   classPrefix: _propTypes.default.string,

package/cjs/Sidenav/SidenavDropdown.d.ts

@@ -27,8 +27,13 @@ export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.H
      * @deprecated
      */
     open?: boolean;
-    /** Custom title */
+    /**
+     * Custom title
+     * @deprecated Use `renderToggle` instead.
+     */
     renderTitle?: (children?: React.ReactNode) => React.ReactNode;
+    /** Custom Toggle */
+    renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
     /** The callback function that the menu closes */
     onClose?: () => void;
     /** Menu Pop-up callback function */

package/cjs/Sidenav/SidenavDropdown.js

@@ -15,8 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _isNil = _interopRequireDefault(require("lodash/isNil"));
-
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
@@ -35,22 +33,22 @@ var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
 
 var _DropdownContext = _interopRequireDefault(require("../Dropdown/DropdownContext"));
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'dropdown',
-  placement: 'bottomStart'
-};
+var _useInternalId = _interopRequireDefault(require("../utils/useInternalId"));
 
 var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
       title = props.title,
       children = props.children,
       className = props.className,
       menuStyle = props.menuStyle,
       disabled = props.disabled,
       renderTitle = props.renderTitle,
-      classPrefix = props.classPrefix,
-      placement = props.placement,
+      renderToggle = props.renderToggle,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown' : _props$classPrefix,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
       toggleClassName = props.toggleClassName,
       icon = props.icon,
       eventKey = props.eventKey,
@@ -61,7 +59,7 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onClose = props.onClose,
       openProp = props.open,
       onToggle = props.onToggle,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "classPrefix", "placement", "toggleClassName", "icon", "eventKey", "toggleAs", "noCaret", "style", "onOpen", "onClose", "open", "onToggle"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "title", "children", "className", "menuStyle", "disabled", "renderTitle", "renderToggle", "classPrefix", "placement", "toggleClassName", "icon", "eventKey", "toggleAs", "noCaret", "style", "onOpen", "onClose", "open", "onToggle"]);
 
   var _useContext = (0, _react.useContext)(_Sidenav.SidenavContext),
       _useContext$openKeys = _useContext.openKeys,
@@ -75,6 +73,8 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
+  var internalId = (0, _useInternalId.default)('SidenavDropdown');
+  var uniqueKey = eventKey !== null && eventKey !== void 0 ? eventKey : internalId;
   var handleToggleDisclosure = (0, _react.useCallback)(function (open, event) {
     if (open) {
       onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -83,11 +83,11 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);
-    if ((0, _isNil.default)(eventKey)) return;
-    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(eventKey, event);
-  }, [onClose, onOpen, onToggle, eventKey, onOpenChange]);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(uniqueKey, event);
+  }, [onClose, onOpen, onToggle, uniqueKey, onOpenChange]);
+  var open = openProp !== null && openProp !== void 0 ? openProp : openKeys.includes(uniqueKey);
   return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
-    open: openProp !== null && openProp !== void 0 ? openProp : !(0, _isNil.default)(eventKey) && openKeys.includes(eventKey),
+    open: open,
     onToggle: handleToggleDisclosure
   }, function (_ref, containerRef) {
     var _withClassPrefix;
@@ -103,10 +103,10 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (buttonProps, buttonRef) {
       return /*#__PURE__*/_react.default.createElement(_DropdownToggle.default, (0, _extends2.default)({
         ref: buttonRef,
-        as: renderTitle ? 'span' : toggleAs,
+        as: toggleAs,
         noCaret: noCaret,
         className: toggleClassName,
-        renderTitle: renderTitle,
+        renderToggle: renderToggle,
         icon: icon,
         placement: placement
       }, (0, _omit.default)(buttonProps, ['open'])), title);
@@ -121,7 +121,6 @@ var SidenavDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, re
 });
 
 SidenavDropdown.displayName = 'Sidenav.Dropdown';
-SidenavDropdown.defaultProps = defaultProps;
 SidenavDropdown.propTypes = {
   activeKey: _propTypes.default.any,
   classPrefix: _propTypes.default.string,
@@ -147,7 +146,8 @@ SidenavDropdown.propTypes = {
   onMouseLeave: _propTypes.default.func,
   onContextMenu: _propTypes.default.func,
   onClick: _propTypes.default.func,
-  renderTitle: _propTypes.default.func
+  renderTitle: (0, _deprecatePropType.default)(_propTypes.default.func),
+  renderToggle: _propTypes.default.func
 };
 var _default = SidenavDropdown;
 exports.default = _default;

package/cjs/Sidenav/SidenavDropdownCollapse.js

@@ -23,13 +23,10 @@ var _utils = require("../utils");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var defaultProps = {
-  classPrefix: 'dropdown-menu'
-};
-
 var SidenavDropdownCollapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var className = props.className,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,
       open = props.open,
       restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "open"]);
 
@@ -57,7 +54,6 @@ var SidenavDropdownCollapse = /*#__PURE__*/_react.default.forwardRef(function (p
 });
 
 SidenavDropdownCollapse.displayName = 'Sidenav.Dropdown.Collapse';
-SidenavDropdownCollapse.defaultProps = defaultProps;
 SidenavDropdownCollapse.propTypes = {
   className: _propTypes.default.string,
   children: _propTypes.default.node,

package/cjs/Sidenav/SidenavDropdownItem.js

@@ -29,17 +29,13 @@ var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
 var _DropdownContext = _interopRequireDefault(require("../Dropdown/DropdownContext"));
 
-var defaultProps = {
-  as: 'li',
-  classPrefix: 'dropdown-item'
-};
 /**
  * Tree View Node
  * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
  */
-
 var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'li' : _props$as,
       activeProp = props.active,
       children = props.children,
       disabled = props.disabled,
@@ -47,7 +43,8 @@ var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props
       panel = props.panel,
       className = props.className,
       style = props.style,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,
       icon = props.icon,
       eventKey = props.eventKey,
       onClick = props.onClick,
@@ -112,7 +109,6 @@ var SidenavDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props
 });
 
 SidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';
-SidenavDropdownItem.defaultProps = defaultProps;
 SidenavDropdownItem.propTypes = {
   as: _propTypes.default.elementType,
   expanded: _propTypes.default.bool,

package/cjs/Sidenav/SidenavDropdownMenu.js

@@ -39,22 +39,19 @@ var _Disclosure = _interopRequireDefault(require("../Disclosure/Disclosure"));
 
 var _templateObject, _templateObject2;
 
-var defaultProps = {
-  as: 'li',
-  classPrefix: 'dropdown-item'
-};
 /**
  * Tree View Node
  * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
  */
-
 var SidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'li' : _props$as,
       children = props.children,
       disabled = props.disabled,
       className = props.className,
       style = props.style,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-item' : _props$classPrefix,
       tabIndex = props.tabIndex,
       icon = props.icon,
       title = props.title,
@@ -123,7 +120,6 @@ var SidenavDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props
 });
 
 SidenavDropdownMenu.displayName = 'Sidenav.Dropdown.Menu';
-SidenavDropdownMenu.defaultProps = defaultProps;
 SidenavDropdownMenu.propTypes = {
   as: _propTypes.default.elementType,
   expanded: _propTypes.default.bool,

package/cjs/Sidenav/SidenavToggle.js

@@ -21,16 +21,13 @@ var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"
 
 var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'sidenav-toggle'
-};
-
 var SidenavToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
       expanded = props.expanded,
       className = props.className,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'sidenav-toggle' : _props$classPrefix,
       onToggle = props.onToggle,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "expanded", "className", "classPrefix", "onToggle"]);
 
@@ -58,7 +55,6 @@ var SidenavToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 });
 
 SidenavToggle.displayName = 'SidenavToggle';
-SidenavToggle.defaultProps = defaultProps;
 SidenavToggle.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,

package/cjs/Slider/Graduated.js

@@ -15,19 +15,16 @@ var _utils2 = require("./utils");
 
 var _Mark = _interopRequireDefault(require("./Mark"));
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'slider'
-};
-
 var Graduated = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
       step = props.step,
       min = props.min,
       max = props.max,
       count = props.count,
       value = props.value,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,
       className = props.className,
       renderMark = props.renderMark;
 
@@ -84,7 +81,6 @@ var Graduated = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 Graduated.displayName = 'Graduated';
-Graduated.defaultProps = defaultProps;
 Graduated.propTypes = {
   step: _propTypes.default.number,
   min: _propTypes.default.number,

package/cjs/Slider/Handle.d.ts

@@ -11,6 +11,8 @@ export interface HandleProps extends WithAsProps, React.HTMLAttributes<HTMLDivEl
     onDragMove?: (event: React.DragEvent, dataset?: DOMStringMap) => void;
     onDragStart?: (event: React.MouseEvent) => void;
     onDragEnd?: (event: React.MouseEvent, dataset?: DOMStringMap) => void;
+    'data-range'?: number[];
+    'data-key'?: string;
 }
 declare const Handle: RsRefForwardingComponent<'div', HandleProps>;
 export default Handle;

package/cjs/Slider/Handle.js

@@ -21,16 +21,15 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 
 var _utils = require("../utils");
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'slider'
-};
+var _Input = _interopRequireDefault(require("./Input"));
 
 var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _extends2;
 
-  var Component = props.as,
-      classPrefix = props.classPrefix,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'slider' : _props$classPrefix,
       className = props.className,
       disabled = props.disabled,
       style = props.style,
@@ -40,11 +39,16 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       tooltip = props.tooltip,
       rtl = props.rtl,
       value = props.value,
+      role = props.role,
+      tabIndex = props.tabIndex,
       renderTooltip = props.renderTooltip,
       onDragStart = props.onDragStart,
       onDragMove = props.onDragMove,
       onDragEnd = props.onDragEnd,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "disabled", "style", "children", "position", "vertical", "tooltip", "rtl", "value", "renderTooltip", "onDragStart", "onDragMove", "onDragEnd"]);
+      onKeyDown = props.onKeyDown,
+      dataRange = props['data-range'],
+      dateKey = props['data-key'],
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "disabled", "style", "children", "position", "vertical", "tooltip", "rtl", "value", "role", "tabIndex", "renderTooltip", "onDragStart", "onDragMove", "onDragEnd", "onKeyDown", "data-range", "data-key"]);
 
   var _useState = (0, _react.useState)(false),
       active = _useState[0],
@@ -115,20 +119,27 @@ var Handle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       releaseMouseMoves();
     };
   }, [releaseMouseMoves]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    role: role,
+    tabIndex: tabIndex,
     ref: (0, _utils.mergeRefs)(ref, rootRef),
     className: handleClasses,
     onMouseDown: handleMouseDown,
     onMouseEnter: handleMouseEnter,
-    style: styles
-  }), tooltip && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    onKeyDown: onKeyDown,
+    style: styles,
+    "data-range": dataRange,
+    "data-key": dateKey
+  }, tooltip && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    "aria-hidden": "true",
     ref: tooltipRef,
     className: merge(prefix('tooltip'), 'placement-top')
-  }, renderTooltip ? renderTooltip(value) : value), children);
+  }, renderTooltip ? renderTooltip(value) : value), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends3.default)({
+    value: value
+  }, rest)), children);
 });
 
 Handle.displayName = 'Handle';
-Handle.defaultProps = defaultProps;
 Handle.propTypes = {
   as: _propTypes.default.elementType,
   className: _propTypes.default.string,

package/cjs/Slider/Input.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/cjs/Slider/Input.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var rangeStyles = {
+  position: 'absolute',
+  overflow: 'hidden',
+  width: '100%',
+  height: '100%',
+  clip: 'rect(0, 0, 0, 0)'
+};
+
+var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var style = props.style,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["style"]);
+  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    type: "range",
+    readOnly: true,
+    ref: ref,
+    style: (0, _extends2.default)({}, rangeStyles, style)
+  }, rest));
+});
+
+Input.displayName = 'Input';
+var _default = Input;
+exports.default = _default;

package/cjs/Slider/Mark.js

@@ -11,16 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var defaultProps = {
-  as: 'span',
-  classPrefix: 'slider-mark'
-};
-
 var Mark = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var Component = props.as,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'span' : _props$as,
       mark = props.mark,
       last = props.last,
-      classPrefix = props.classPrefix,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'slider-mark' : _props$classPrefix,
       className = props.className,
       renderMark = props.renderMark;
 
@@ -46,7 +43,6 @@ var Mark = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 Mark.displayName = 'Mark';
-Mark.defaultProps = defaultProps;
 Mark.propTypes = {
   as: _propTypes.default.elementType,
   classPrefix: _propTypes.default.string,

package/cjs/Slider/ProgressBar.js

@@ -13,16 +13,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
-var defaultProps = {
-  as: 'div',
-  classPrefix: 'slider-progress-bar'
-};
-
 var ProgressBar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _extends2;
 
-  var Component = props.as,
-      classPrefix = props.classPrefix,
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? 'div' : _props$as,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'slider-progress-bar' : _props$classPrefix,
       vertical = props.vertical,
       rtl = props.rtl,
       _props$end = props.end,
@@ -49,7 +46,6 @@ var ProgressBar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 
 ProgressBar.displayName = 'ProgressBar';
-ProgressBar.defaultProps = defaultProps;
 ProgressBar.propTypes = {
   as: _propTypes.default.elementType,
   classPrefix: _propTypes.default.string,

package/cjs/Slider/Slider.d.ts

@@ -76,8 +76,5 @@ export declare const sliderPropTypes: {
     renderTooltip: PropTypes.Requireable<(...args: any[]) => any>;
     getAriaValueText: PropTypes.Requireable<(...args: any[]) => any>;
 };
-/**
- * fixme: Should contain an input
- */
 declare const Slider: React.ForwardRefExoticComponent<SliderProps<number> & React.RefAttributes<unknown>>;
 export default Slider;