rsuite 5.60.1 → 5.60.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [5.60.2](https://github.com/rsuite/rsuite/compare/v5.60.1...v5.60.2) (2024-05-10)
+
+
+### Bug Fixes
+
+* **date-picker:** cursor pointer on icon hover ([#3789](https://github.com/rsuite/rsuite/issues/3789)) ([fb85faa](https://github.com/rsuite/rsuite/commit/fb85faa01695ab8a48a357e994a451c46c4d7ab3))
+* **DateInput,DateRangeInput:** fix the issue of incorrect cursor position in the input box ([#3785](https://github.com/rsuite/rsuite/issues/3785)) ([d606944](https://github.com/rsuite/rsuite/commit/d6069447aeb156974c7af18050e43ba9443fa4d3))
+* **Slider:** block pointer events when disabled ([#3788](https://github.com/rsuite/rsuite/issues/3788)) ([2470f77](https://github.com/rsuite/rsuite/commit/2470f77225078c2b65536808218286c1c737bee6))
+* **toggle:** center align inner text/icon ([#3787](https://github.com/rsuite/rsuite/issues/3787)) ([c2a8fb1](https://github.com/rsuite/rsuite/commit/c2a8fb13f700dd07b76628a200eb1a5236f21b5c))
+
+
+
 ## [5.60.1](https://github.com/rsuite/rsuite/compare/v5.60.0...v5.60.1) (2024-05-03)
 
 

package/DatePicker/styles/index.css

@@ -3842,6 +3842,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date .rs-input-group-addon {
   color: #8e8e93;
   color: var(--rs-text-secondary);
+  cursor: pointer;
 }
 .rs-picker-date .rs-input-group-addon .rs-btn-close {
   padding: 0;

package/DatePicker/styles/index.less

@@ -29,6 +29,7 @@
 
   .rs-input-group-addon {
     color: var(--rs-text-secondary);
+    cursor: pointer;
 
     .rs-btn-close {
       padding: 0;

package/DateRangePicker/styles/index.css

@@ -3837,6 +3837,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date .rs-input-group-addon {
   color: #8e8e93;
   color: var(--rs-text-secondary);
+  cursor: pointer;
 }
 .rs-picker-date .rs-input-group-addon .rs-btn-close {
   padding: 0;
@@ -3982,6 +3983,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-daterange .rs-input-group-addon {
   color: #8e8e93;
   color: var(--rs-text-secondary);
+  cursor: pointer;
 }
 .rs-picker-daterange .rs-input-group-addon .rs-btn-close {
   padding: 0;

package/DateRangePicker/styles/index.less

@@ -10,6 +10,7 @@
 .rs-picker-daterange {
   .rs-input-group-addon {
     color: var(--rs-text-secondary);
+    cursor: pointer;
 
     .rs-btn-close {
       padding: 0;

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) HYPERS, Inc. and its affiliates.
+Copyright (c) 2016-present React Suite Team.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -9,18 +9,13 @@ English | [中文版][readm-cn]
 [![npm][npm-svg]][npm-home]
 [![GitHub Actions][actions-svg]][actions-home]
 [![npm bundle size][npm-bundle-size-img]][npm-bundle-size]
-[![rsuite.min.js][rsuite-min-js-img]][rsuite-min-js]
 [![codecov][codecov-img]][codecov]
 [![Discord][discord-svg]][discord-invite]
 [![Gitter][gitter-svg]][gitter]
 [![Gitter][gitter-cn-svg]][gitter-cn]
 [![Gitpod ready-to-code][gitpod-img]][gitpod]
 
-React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework.
-
-### UI Design
-
-React Suite Design Prototype and specification, click to [view][rsuite-design].
+React Suite is a set of React components. It is committed to providing high-quality and comprehensive React components to help developers quickly build web applications.
 
 ## Supported Platforms
 
@@ -34,33 +29,28 @@ React Suite supports the latest, stable releases of all major browsers and platf
 
 ### Server
 
-React Suite supports server side rendering. Support [Next.js](https://github.com/zeit/next.js) to build applications.
-
-## Supported development environment
-
-- Supports React 16 +
-- Supports [TypeScript](http://www.typescriptlang.org/)
-- Supports [Electron](https://electronjs.org/)
-- Supports [Reason](https://github.com/shurygindv/bs-rsuite-ui-react)
+React Suite supports server side rendering. Support [Next.js](https://github.com/vercel/next.js) to build applications.
 
 ## Installation
 
 React Suite is available as an [npm package][npm-home].
 
 ```bash
-npm i rsuite --save
-```
-
-or if you prefer Yarn
+# with npm
+npm install rsuite
 
-```bash
+# with Yarn
 yarn add rsuite
+
+# with pnpm
+pnpm add rsuite
+
+# with Bun
+bun add rsuite
 ```
 
 ## Usage
 
-Here's a simple example
-
 ```jsx
 import { Button } from 'rsuite';
 import 'rsuite/styles/index.less'; // or 'rsuite/dist/rsuite.min.css'
@@ -70,54 +60,28 @@ function App() {
 }
 ```
 
-[**Live preview on CodeSandbox**][live-preview-on-codesandbox]
-
-### Documentation
-
-You can go through [full documentation][rsuite-doc-guide] or start with following sections
-
-- [Quick start][rsuite-doc-guide]
-- [Less Customization][rsuite-doc-guide-themes]
-- [Internationalization][rsuite-doc-guide-intl]
-- [Right-to-left][rsuite-doc-guide-rtl]
-- [Components][rsuite-components-overview]
-
-<details>
-<summary>More examples</summary>
-
-- [Management system][demo-admin]
-- [Use modularized][demo-modular-import]
-- [Use CDN][demo-cdn]
-- [Internationalization][demo-intl-app]
-- [Themes][demo-multiple-themes]
-- [RTL - RTLCSS][demo-rtlcss]
-- [RTL - PostCSS-RTL][demo-postcss-rtl]
-- [Use in create-react-app][demo-create-react-app]
-- [Use in Electron][demo-electron]
-- [Use in Flow][demo-flow-app]
-- [Use in TypeScript][demo-typescript-app]
-- [Use in Next.js (App)][demo-nextjs-app]
-- [Use in Next.js (Pages)][demo-nextjs-pages]
-- [Use in UmiJS][demo-umi-app]
-- [Use in Snowpack][demo-snowpack]
-- [Use in Vite][demo-vite]
-</details>
+More guides on how to get started are available [here](https://rsuitejs.com/guide/usage/).
 
-<a href="https://vercel.com?utm_source=rsuite&utm_campaign=oss" target="_blank">
-  <img src="https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg" alt="Vercel banner" />
-</a>
+## Documentation
 
-## Previous major versions
+It's the https://rsuitejs.com website for the latest version of React Suite. For older versions head over here
+
+- [4.x documentation](https://v4.rsuitejs.com/)
+- [3.x documentation](https://v3.rsuitejs.com/)
 
 The previous major version 4.x will no longer receive new features,
 and it is recommended to upgrade to the latest 5.x releases.
 Bug fixes for 4.x are still being supported for a period of time,
 and security fixes are supported until 6.x is in progress.
 
-### Documentations for previous major versions
+## Framework Guides
 
-- [4.x documentation](https://v4.rsuitejs.com/)
-- [3.x documentation](https://v3.rsuitejs.com/)
+React Suite can be used in your favorite framework. We have prepared step-by-step guides for these frameworks:
+
+- [Next.js (App)](https://rsuitejs.com/guide/use-next-app/)
+- [Next.js (Page)](https://rsuitejs.com/guide/use-next-pages)
+- [Create React App](https://rsuitejs.com/guide/use-with-create-react-app/)
+- [Vite](https://rsuitejs.com/guide/use-vite/)
 
 ## Changelog
 
@@ -127,6 +91,50 @@ Detailed changes for each release are documented in the [release notes][release-
 
 Make sure you've read the [guidelines][contributing] before you start contributing.
 
+## Sponsoring services
+
+These great services help us to build and maintain the project.
+
+### GitHub
+
+Github lets us host the Git repository and coordinate contributions.
+
+<a href="https://github.com/" target="_blank">
+ <img loading="lazy" alt="CodeCov logo" src="https://avatars.githubusercontent.com/u/9919?s=200&v=4" width="40" height="40">
+</a>
+
+### Vercel
+
+Vercel provides the hosting for the documentation site.
+
+<a href="https://vercel.com?utm_source=rsuite&utm_campaign=oss" target="_blank">
+  <img loading="lazy" alt="Vercel logo" src="https://avatars.githubusercontent.com/u/14985020?s=200&v=4"  width="40" height="40"/>
+</a>
+
+### CodeCov
+
+CodeCov lets us monitor test coverage.
+
+<a href="https://about.codecov.io/" target="_blank">
+  <img loading="lazy" alt="CodeCov logo" src="https://avatars.githubusercontent.com/u/8226205?s=200&v=4" width="40" height="40">
+</a>
+
+### CodeSandbox
+
+CodeSandbox lets us provide live previews of the components.
+
+<a href="https://codesandbox.io/" target="_blank">
+  <img loading="lazy" alt="CodeSandbox logo" src="https://avatars.githubusercontent.com/u/32880324?s=200&v=4" width="40" height="40">
+</a>
+
+### Stackblitz
+
+Stackblitz lets us provide live previews of the components.
+
+<a href="https://stackblitz.com/" target="_blank">
+  <img loading="lazy" alt="Stackblitz logo" src="https://avatars.githubusercontent.com/u/28635252?s=200&v=4" width="40" height="40">
+</a>
+
 ## Supporting React Suite
 
 If you like React Suite, you can show your support by either
@@ -138,61 +146,34 @@ If you like React Suite, you can show your support by either
 This project exists thanks to all the people who contribute.
 
 <a href="https://github.com/rsuite/rsuite/graphs/contributors" target="_blank">
-  <img src="https://contrib.rocks/image?repo=rsuite/rsuite" />
+  <img src="https://contrib.rocks/image?repo=rsuite/rsuite&max=600" />
 </a>
 
 [![opencollective-now][opencollective-svg]][opencollective-home]
 
 ## License
 
-React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
+React Suite is [MIT licensed][license].
 
 [readm-cn]: https://github.com/rsuite/rsuite/blob/main/README_zh.md
 [npm-svg]: https://img.shields.io/npm/v/rsuite
 [npm-home]: https://www.npmjs.com/package/rsuite
 [npm-bundle-size-img]: https://badgen.net/bundlephobia/minzip/rsuite?icon=npm
 [npm-bundle-size]: https://bundlephobia.com/package/rsuite
-[rsuite-min-js-img]: https://img.badgesize.io/https:/unpkg.com/rsuite/dist/rsuite.min.js?label=rsuite.min.js&compression=gzip
-[rsuite-min-js]: https://unpkg.com/browse/rsuite/dist/rsuite.min.js
 [actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=main
 [actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22
 [discord-svg]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
 [discord-invite]: https://discord.gg/R8mnjwh
-[rsuite-design]: https://rsuitejs.com/design/default
-[live-preview-on-codesandbox]: https://codesandbox.io/s/rsuite-template-5vq6zo2z5l
-[rsuite-doc-guide]: https://rsuitejs.com/en/guide/introduction
-[rsuite-doc-guide-themes]: https://rsuitejs.com/en/guide/customization-less
-[rsuite-doc-guide-intl]: https://rsuitejs.com/en/guide/intl
-[rsuite-doc-guide-rtl]: https://rsuitejs.com/en/guide/rtl
-[rsuite-components-overview]: https://rsuitejs.com/en/components/overview
 [release-notes]: https://github.com/rsuite/rsuite/releases
 [contributing]: https://github.com/rsuite/rsuite/blob/main/CONTRIBUTING.md
-[prettierrc]: https://github.com/rsuite/rsuite/wiki/.prettierrc
 [issues-11]: https://github.com/rsuite/rsuite/issues/11
 [opencollective-svg]: https://opencollective.com/rsuite/tiers/backer.svg?avatarHeight=36
 [opencollective-home]: https://opencollective.com/rsuite
 [license]: https://github.com/rsuite/rsuite/blob/main/LICENSE
-[rsuite-sample]: https://sample.rsuitejs.com/
 [gitter]: https://gitter.im/rsuite/rsuite?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
 [gitter-svg]: https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-english
 [gitter-cn]: https://gitter.im/rsuite/rsuite-CN?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
 [gitter-cn-svg]: https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-chinese
-[demo-admin]: https://github.com/rsuite/rsuite-management-system
-[demo-modular-import]: https://github.com/rsuite/rsuite/tree/main/examples/with-babel-preset-rsuite
-[demo-cdn]: https://github.com/rsuite/rsuite/tree/main/examples/cdn
-[demo-create-react-app]: https://github.com/rsuite/rsuite/tree/main/examples/create-react-app
-[demo-electron]: https://github.com/rsuite/rsuite/tree/main/examples/with-electron
-[demo-intl-app]: https://github.com/rsuite/rsuite/tree/main/examples/custom-i18n
-[demo-multiple-themes]: https://github.com/rsuite/rsuite/tree/main/examples/custom-multiple-themes
-[demo-flow-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-flow
-[demo-typescript-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-typescript
-[demo-nextjs-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-app
-[demo-nextjs-pages]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-pages
-[demo-umi-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-umi
-[demo-rtlcss]: https://github.com/rsuite/rsuite/tree/main/examples/with-rtlcss
-[demo-postcss-rtl]: https://github.com/rsuite/rsuite/tree/main/examples/with-postcss-rtl
-[demo-snowpack]: https://github.com/rsuite/rsuite/tree/main/examples/with-snowpack
-[demo-vite]: https://github.com/rsuite/rsuite/tree/main/examples/with-vite
 [codecov]: https://codecov.io/gh/rsuite/rsuite
 [codecov-img]: https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t
 [gitpod]: https://gitpod.io/#https://github.com/rsuite/rsuite

package/RangeSlider/styles/index.css

@@ -363,7 +363,7 @@
 }
 .rs-slider-disabled .rs-slider-bar,
 .rs-slider-disabled .rs-slider-handle::before {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .rs-slider-with-mark:not(.rs-slider-vertical) {
   margin-bottom: 29px;

package/Slider/styles/index.css

@@ -363,7 +363,7 @@
 }
 .rs-slider-disabled .rs-slider-bar,
 .rs-slider-disabled .rs-slider-handle::before {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .rs-slider-with-mark:not(.rs-slider-vertical) {
   margin-bottom: 29px;

package/Slider/styles/index.less

@@ -23,7 +23,7 @@
 
     .rs-slider-bar,
     .rs-slider-handle::before {
-      cursor: not-allowed;
+      pointer-events: none;
     }
   }
 

package/Toggle/styles/index.css

@@ -264,7 +264,12 @@
   display: none;
 }
 .rs-toggle-inner {
-  display: block;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   -webkit-transition: margin 0.15s ease-out;
   transition: margin 0.15s ease-out;
 }

package/Toggle/styles/index.less

@@ -99,7 +99,8 @@
 
 // Label text inside the switch
 .rs-toggle-inner {
-  display: block;
+  display: flex;
+  align-items: center;
   transition: margin @toggle-transition;
 
   .high-contrast-mode({

package/cjs/DateInput/DateField.js

@@ -132,7 +132,9 @@ var useDateField = function useDateField(format, localize, date) {
         if (typeof value === 'number') {
           value = padNumber(value, pattern.length);
         }
-        str = str.replace(pattern, value);
+        if (typeof value !== 'undefined') {
+          str = str.replace(pattern, value);
+        }
       }
     });
     return str;

package/cjs/DateInput/DateInput.js

@@ -12,9 +12,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _utils = require("../utils");
 var _utils2 = require("./utils");
-var _useDateInputState2 = _interopRequireDefault(require("./useDateInputState"));
-var _useKeyboardInputEvent = _interopRequireDefault(require("./useKeyboardInputEvent"));
-var _useIsFocused2 = _interopRequireDefault(require("./useIsFocused"));
+var _useDateInputState2 = _interopRequireDefault(require("./hooks/useDateInputState"));
+var _useKeyboardInputEvent = _interopRequireDefault(require("./hooks/useKeyboardInputEvent"));
+var _useIsFocused2 = _interopRequireDefault(require("./hooks/useIsFocused"));
+var _useFieldCursor2 = _interopRequireDefault(require("./hooks/useFieldCursor"));
+var _useSelectedState2 = _interopRequireDefault(require("./hooks/useSelectedState"));
 /**
  * The DateInput component lets users select a date with the keyboard.
  * @version 5.58.0
@@ -32,13 +34,9 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onFocus = props.onFocus,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
   var inputRef = (0, _react.useRef)();
-  var _useState = (0, _react.useState)({
-      selectedPattern: 'y',
-      selectionStart: 0,
-      selectionEnd: 0
-    }),
-    selectedState = _useState[0],
-    setSelectedState = _useState[1];
+  var _useSelectedState = (0, _useSelectedState2.default)(),
+    selectedState = _useSelectedState.selectedState,
+    setSelectedState = _useSelectedState.setSelectedState;
   var _useCustom = (0, _utils.useCustom)('Calendar'),
     locale = _useCustom.locale;
   var dateLocale = locale.dateLocale;
@@ -58,6 +56,10 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     getDateField = _useDateInputState.getDateField,
     toDateString = _useDateInputState.toDateString,
     isEmptyValue = _useDateInputState.isEmptyValue;
+  var _useFieldCursor = (0, _useFieldCursor2.default)(formatStr, valueProp),
+    isMoveCursor = _useFieldCursor.isMoveCursor,
+    increment = _useFieldCursor.increment,
+    reset = _useFieldCursor.reset;
   var dateString = toDateString();
   var keyPressOptions = (0, _react.useMemo)(function () {
     return {
@@ -80,8 +82,9 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       input: input,
       direction: direction
     }));
-    setSelectionRange(state.selectionStart, state.selectionEnd);
     setSelectedState(state);
+    setSelectionRange(state.selectionStart, state.selectionEnd);
+    reset();
   });
   var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
     var input = event.target;
@@ -104,6 +107,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (!pattern) {
       return;
     }
+    increment();
     var field = getDateField(pattern);
     var value = parseInt(key, 10);
     var padValue = parseInt("" + (field.value || '') + key, 10);
@@ -113,10 +117,6 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if ((0, _utils2.validateDateTime)(field.name, padValue)) {
       newValue = padValue;
     }
-    if (pattern === 'M') {
-      // Month cannot be less than 1.
-      newValue = Math.max(1, newValue);
-    }
     setDateField(pattern, newValue, function (date) {
       return handleChange(date, event);
     });
@@ -132,7 +132,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
 
     // If the field is full value, move the cursor to the next field
-    if ((0, _utils2.isFieldFullValue)(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
+    if (isMoveCursor(newValue, pattern) && input.selectionEnd !== input.value.length) {
       onSegmentChange(event, 'right');
     }
   });
@@ -148,6 +148,7 @@ var DateInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setDateField(selectedState.selectedPattern, null, function (date) {
         return handleChange(date, event);
       });
+      reset();
     }
   });
   var handleClick = (0, _utils.useEventCallback)(function (event) {

package/cjs/DateInput/{useDateInputState.d.ts → hooks/useDateInputState.d.ts}

@@ -1,4 +1,4 @@
-import { format } from '../utils/dateUtils';
+import { format } from '../../utils/dateUtils';
 import type { Locale } from 'date-fns';
 interface DateInputState {
     formatStr: string;

package/cjs/DateInput/{useDateInputState.js → hooks/useDateInputState.js}

@@ -7,8 +7,8 @@ exports.useDateInputState = useDateInputState;
 exports.default = void 0;
 var _react = require("react");
 var _startCase = _interopRequireDefault(require("lodash/startCase"));
-var _dateUtils = require("../utils/dateUtils");
-var _DateField = require("./DateField");
+var _dateUtils = require("../../utils/dateUtils");
+var _DateField = require("../DateField");
 function useDateInputState(_ref) {
   var formatStr = _ref.formatStr,
     locale = _ref.locale,

package/cjs/DateInput/hooks/useFieldCursor.d.ts

@@ -0,0 +1,6 @@
+export declare function useFieldCursor<V = Date | null>(format: string, value?: V): {
+    increment: () => void;
+    reset: () => void;
+    isMoveCursor: (value: number, pattern: string) => boolean;
+};
+export default useFieldCursor;

package/cjs/DateInput/hooks/useFieldCursor.js

@@ -0,0 +1,56 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useFieldCursor = useFieldCursor;
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
+function useFieldCursor(format, value) {
+  var typeCount = (0, _react.useRef)(0);
+  var increment = function increment() {
+    typeCount.current += 1;
+  };
+  var reset = function reset() {
+    typeCount.current = 0;
+  };
+  var isMoveCursor = (0, _react.useCallback)(function (value, pattern) {
+    var patternGroup = (0, _utils.getPatternGroups)(format, pattern);
+    if (value.toString().length === patternGroup.length) {
+      return true;
+    } else if (pattern === 'y' && typeCount.current === 4) {
+      return true;
+    } else if (pattern !== 'y' && typeCount.current === 2) {
+      return true;
+    }
+    switch (pattern) {
+      case 'M':
+        return parseInt(value + "0") > 12;
+      case 'd':
+        return parseInt(value + "0") > 31;
+      case 'H':
+        return parseInt(value + "0") > 23;
+      case 'h':
+        return parseInt(value + "0") > 12;
+      case 'm':
+      case 's':
+        return parseInt(value + "0") > 59;
+      default:
+        return false;
+    }
+  }, [format]);
+  (0, _useUpdateEffect.default)(function () {
+    if (!value) {
+      reset();
+    }
+  }, [value]);
+  return {
+    increment: increment,
+    reset: reset,
+    isMoveCursor: isMoveCursor
+  };
+}
+var _default = useFieldCursor;
+exports.default = _default;

package/cjs/DateInput/hooks/useSelectedState.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare function useSelectedState(): {
+    selectedState: {
+        selectedPattern: string;
+        selectionStart: number;
+        selectionEnd: number;
+    };
+    setSelectedState: import("react").Dispatch<import("react").SetStateAction<{
+        selectedPattern: string;
+        selectionStart: number;
+        selectionEnd: number;
+    }>>;
+};
+export default useSelectedState;

package/cjs/DateInput/hooks/useSelectedState.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useSelectedState = useSelectedState;
+exports.default = void 0;
+var _react = require("react");
+var defaultSelectedState = {
+  selectedPattern: 'y',
+  selectionStart: 0,
+  selectionEnd: 0
+};
+function useSelectedState() {
+  var _useState = (0, _react.useState)(defaultSelectedState),
+    selectedState = _useState[0],
+    setSelectedState = _useState[1];
+  return {
+    selectedState: selectedState,
+    setSelectedState: setSelectedState
+  };
+}
+var _default = useSelectedState;
+exports.default = _default;

package/cjs/DateInput/index.d.ts

@@ -1,7 +1,9 @@
 import DateInput from './DateInput';
-export { useDateInputState } from './useDateInputState';
-export { useKeyboardInputEvent } from './useKeyboardInputEvent';
-export { useIsFocused } from './useIsFocused';
+export { useDateInputState } from './hooks/useDateInputState';
+export { useKeyboardInputEvent } from './hooks/useKeyboardInputEvent';
+export { useIsFocused } from './hooks/useIsFocused';
+export { useSelectedState } from './hooks/useSelectedState';
+export { useFieldCursor } from './hooks/useFieldCursor';
 export * from './utils';
 export type { DateInputProps } from './DateInput';
 export default DateInput;

package/cjs/DateInput/index.js

@@ -6,16 +6,22 @@ exports.__esModule = true;
 var _exportNames = {
   useDateInputState: true,
   useKeyboardInputEvent: true,
-  useIsFocused: true
+  useIsFocused: true,
+  useSelectedState: true,
+  useFieldCursor: true
 };
-exports.default = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;
+exports.default = exports.useFieldCursor = exports.useSelectedState = exports.useIsFocused = exports.useKeyboardInputEvent = exports.useDateInputState = void 0;
 var _DateInput = _interopRequireDefault(require("./DateInput"));
-var _useDateInputState = require("./useDateInputState");
+var _useDateInputState = require("./hooks/useDateInputState");
 exports.useDateInputState = _useDateInputState.useDateInputState;
-var _useKeyboardInputEvent = require("./useKeyboardInputEvent");
+var _useKeyboardInputEvent = require("./hooks/useKeyboardInputEvent");
 exports.useKeyboardInputEvent = _useKeyboardInputEvent.useKeyboardInputEvent;
-var _useIsFocused = require("./useIsFocused");
+var _useIsFocused = require("./hooks/useIsFocused");
 exports.useIsFocused = _useIsFocused.useIsFocused;
+var _useSelectedState = require("./hooks/useSelectedState");
+exports.useSelectedState = _useSelectedState.useSelectedState;
+var _useFieldCursor = require("./hooks/useFieldCursor");
+exports.useFieldCursor = _useFieldCursor.useFieldCursor;
 var _utils = require("./utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/DateInput/utils.d.ts

@@ -58,6 +58,5 @@ export declare function getInputSelectedState(options: SelectedStateOptions): {
 };
 export declare function validateDateTime(type: string, value: number): boolean;
 export declare function modifyDate(date: Date, type: string, value: number): Date;
-export declare function isFieldFullValue(formatStr: string, value: number, pattern: string): boolean;
 export declare function useInputSelection(input: React.RefObject<any>): (selectionStart: number, selectionEnd: number) => void;
 export {};