rsuite 5.0.2 → 5.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (252) hide show
  1. package/Button/styles/index.less +1 -1
  2. package/CHANGELOG.md +46 -0
  3. package/MaskedInput/package.json +7 -0
  4. package/Navbar/styles/index.less +8 -0
  5. package/Picker/styles/index.less +1 -1
  6. package/Picker/styles/mixin.less +1 -1
  7. package/README.md +4 -46
  8. package/Sidenav/styles/index.less +17 -16
  9. package/Slider/styles/index.less +20 -14
  10. package/Toggle/styles/index.less +53 -12
  11. package/Toggle/styles/mixin.less +25 -11
  12. package/Uploader/styles/index.less +0 -1
  13. package/cjs/@types/common.d.ts +8 -2
  14. package/cjs/Affix/Affix.js +3 -3
  15. package/cjs/Animation/Collapse.js +9 -7
  16. package/cjs/Animation/Transition.js +4 -2
  17. package/cjs/AutoComplete/AutoComplete.d.ts +2 -2
  18. package/cjs/AutoComplete/AutoComplete.js +7 -4
  19. package/cjs/Calendar/TimeDropdown.js +5 -3
  20. package/cjs/Cascader/Cascader.d.ts +1 -1
  21. package/cjs/Cascader/Cascader.js +1 -0
  22. package/cjs/Cascader/DropdownMenu.js +6 -5
  23. package/cjs/CheckTreePicker/CheckTreeNode.d.ts +1 -1
  24. package/cjs/CheckTreePicker/CheckTreePicker.d.ts +1 -1
  25. package/cjs/CheckTreePicker/utils.d.ts +1 -1
  26. package/cjs/CheckTreePicker/utils.js +7 -6
  27. package/cjs/Checkbox/Checkbox.d.ts +3 -3
  28. package/cjs/CheckboxGroup/CheckboxGroupContext.d.ts +1 -1
  29. package/cjs/DOMHelper/index.d.ts +13 -28
  30. package/cjs/DOMHelper/index.js +4 -3
  31. package/cjs/DOMHelper/isElement.d.ts +2 -0
  32. package/cjs/DOMHelper/isElement.js +11 -0
  33. package/cjs/DatePicker/DatePicker.d.ts +3 -3
  34. package/cjs/DatePicker/DatePicker.js +4 -2
  35. package/cjs/DateRangePicker/Calendar.d.ts +1 -1
  36. package/cjs/DateRangePicker/DateRangePicker.d.ts +2 -2
  37. package/cjs/DateRangePicker/DateRangePicker.js +4 -2
  38. package/cjs/Disclosure/Disclosure.d.ts +1 -1
  39. package/cjs/Disclosure/DisclosureContext.d.ts +1 -1
  40. package/cjs/Dropdown/DropdownItem.d.ts +1 -1
  41. package/cjs/Dropdown/DropdownItem.js +21 -18
  42. package/cjs/Dropdown/DropdownMenu.d.ts +2 -2
  43. package/cjs/Dropdown/useRenderDropdownItem.d.ts +2 -0
  44. package/cjs/Dropdown/useRenderDropdownItem.js +26 -0
  45. package/cjs/Form/Form.d.ts +1 -1
  46. package/cjs/FormControl/FormControl.d.ts +9 -3
  47. package/cjs/FormControl/FormControl.js +6 -2
  48. package/cjs/Input/Input.d.ts +2 -1
  49. package/cjs/InputNumber/InputNumber.js +2 -2
  50. package/cjs/InputPicker/InputPicker.js +2 -2
  51. package/cjs/List/helper/useSortHelper.js +11 -6
  52. package/cjs/MaskedInput/MaskedInput.d.ts +43 -0
  53. package/cjs/MaskedInput/MaskedInput.js +80 -0
  54. package/cjs/MaskedInput/adjustCaretPosition.d.ts +11 -0
  55. package/cjs/MaskedInput/adjustCaretPosition.js +218 -0
  56. package/cjs/MaskedInput/conformToMask.d.ts +8 -0
  57. package/cjs/MaskedInput/conformToMask.js +247 -0
  58. package/cjs/MaskedInput/createTextMaskInputElement.d.ts +7 -0
  59. package/cjs/MaskedInput/createTextMaskInputElement.js +226 -0
  60. package/cjs/MaskedInput/index.d.ts +3 -0
  61. package/cjs/MaskedInput/index.js +11 -0
  62. package/cjs/MaskedInput/types.d.ts +10 -0
  63. package/cjs/{@types/icons.js → MaskedInput/types.js} +0 -0
  64. package/cjs/MaskedInput/utilities.d.ts +7 -0
  65. package/cjs/MaskedInput/utilities.js +47 -0
  66. package/cjs/Menu/MenuItem.d.ts +1 -1
  67. package/cjs/Menu/Menubar.d.ts +1 -1
  68. package/cjs/Message/Message.js +13 -11
  69. package/cjs/Modal/Modal.js +5 -3
  70. package/cjs/Modal/utils.js +7 -5
  71. package/cjs/MultiCascader/MultiCascader.js +1 -0
  72. package/cjs/Notification/Notification.js +6 -3
  73. package/cjs/Overlay/Modal.js +14 -11
  74. package/cjs/Overlay/ModalManager.js +19 -7
  75. package/cjs/Overlay/OverlayTrigger.js +2 -2
  76. package/cjs/Overlay/Position.js +20 -13
  77. package/cjs/Overlay/positionUtils.js +16 -8
  78. package/cjs/Panel/Panel.d.ts +1 -1
  79. package/cjs/Picker/DropdownMenu.js +10 -6
  80. package/cjs/Picker/DropdownMenuCheckItem.d.ts +3 -3
  81. package/cjs/Picker/PickerOverlay.js +5 -3
  82. package/cjs/Picker/PickerToggle.d.ts +6 -0
  83. package/cjs/Picker/PickerToggle.js +17 -8
  84. package/cjs/Picker/SearchBar.d.ts +1 -1
  85. package/cjs/Picker/utils.d.ts +2 -2
  86. package/cjs/Picker/utils.js +1 -1
  87. package/cjs/Radio/Radio.d.ts +1 -1
  88. package/cjs/RadioGroup/RadioGroup.d.ts +1 -1
  89. package/cjs/RangeSlider/RangeSlider.js +9 -5
  90. package/cjs/Rate/Character.js +2 -2
  91. package/cjs/Ripple/Ripple.js +6 -7
  92. package/cjs/Sidenav/SidenavDropdownItem.d.ts +1 -1
  93. package/cjs/Sidenav/SidenavDropdownItem.js +17 -10
  94. package/cjs/Sidenav/SidenavDropdownMenu.d.ts +1 -1
  95. package/cjs/Slider/Graduated.js +1 -1
  96. package/cjs/Slider/Handle.js +10 -5
  97. package/cjs/Slider/ProgressBar.js +1 -1
  98. package/cjs/Slider/Slider.js +9 -5
  99. package/cjs/Toggle/Toggle.d.ts +5 -6
  100. package/cjs/Toggle/Toggle.js +42 -19
  101. package/cjs/Tree/Tree.d.ts +3 -3
  102. package/cjs/TreePicker/TreeNode.d.ts +1 -1
  103. package/cjs/TreePicker/TreeNode.js +2 -2
  104. package/cjs/TreePicker/TreePicker.d.ts +1 -1
  105. package/cjs/Uploader/UploadFileItem.d.ts +0 -1
  106. package/cjs/Uploader/UploadFileItem.js +3 -6
  107. package/cjs/Uploader/Uploader.d.ts +4 -4
  108. package/cjs/index.d.ts +2 -0
  109. package/cjs/index.js +5 -1
  110. package/cjs/locales/fa_IR.d.ts +105 -0
  111. package/cjs/locales/fa_IR.js +84 -0
  112. package/cjs/locales/index.d.ts +1 -0
  113. package/cjs/locales/index.js +6 -2
  114. package/cjs/utils/BrowserDetection.js +1 -1
  115. package/cjs/utils/index.d.ts +1 -0
  116. package/cjs/utils/index.js +7 -2
  117. package/cjs/utils/scrollTopAnimation.js +5 -5
  118. package/cjs/utils/treeUtils.d.ts +2 -2
  119. package/cjs/utils/useEventListener.js +4 -2
  120. package/cjs/utils/useIsMounted.d.ts +2 -0
  121. package/cjs/utils/useIsMounted.js +22 -0
  122. package/cjs/utils/usePortal.js +2 -2
  123. package/cjs/utils/useRootClose.js +10 -10
  124. package/dist/rsuite-rtl.css +220 -124
  125. package/dist/rsuite-rtl.min.css +1 -1
  126. package/dist/rsuite-rtl.min.css.map +1 -1
  127. package/dist/rsuite.css +220 -124
  128. package/dist/rsuite.js +780 -504
  129. package/dist/rsuite.js.map +1 -1
  130. package/dist/rsuite.min.css +1 -1
  131. package/dist/rsuite.min.css.map +1 -1
  132. package/dist/rsuite.min.js +1 -1
  133. package/dist/rsuite.min.js.map +1 -1
  134. package/esm/@types/common.d.ts +8 -2
  135. package/esm/Affix/Affix.js +1 -1
  136. package/esm/Animation/Collapse.js +2 -1
  137. package/esm/Animation/Transition.js +3 -2
  138. package/esm/AutoComplete/AutoComplete.d.ts +2 -2
  139. package/esm/AutoComplete/AutoComplete.js +8 -5
  140. package/esm/Calendar/TimeDropdown.js +2 -1
  141. package/esm/Cascader/Cascader.d.ts +1 -1
  142. package/esm/Cascader/Cascader.js +1 -0
  143. package/esm/Cascader/DropdownMenu.js +4 -3
  144. package/esm/CheckTreePicker/CheckTreeNode.d.ts +1 -1
  145. package/esm/CheckTreePicker/CheckTreePicker.d.ts +1 -1
  146. package/esm/CheckTreePicker/utils.d.ts +1 -1
  147. package/esm/CheckTreePicker/utils.js +7 -6
  148. package/esm/Checkbox/Checkbox.d.ts +3 -3
  149. package/esm/CheckboxGroup/CheckboxGroupContext.d.ts +1 -1
  150. package/esm/DOMHelper/index.d.ts +13 -28
  151. package/esm/DOMHelper/index.js +2 -3
  152. package/esm/DOMHelper/isElement.d.ts +2 -0
  153. package/esm/DOMHelper/isElement.js +5 -0
  154. package/esm/DatePicker/DatePicker.d.ts +3 -3
  155. package/esm/DatePicker/DatePicker.js +4 -2
  156. package/esm/DateRangePicker/Calendar.d.ts +1 -1
  157. package/esm/DateRangePicker/DateRangePicker.d.ts +2 -2
  158. package/esm/DateRangePicker/DateRangePicker.js +4 -2
  159. package/esm/Disclosure/Disclosure.d.ts +1 -1
  160. package/esm/Disclosure/DisclosureContext.d.ts +1 -1
  161. package/esm/Dropdown/DropdownItem.d.ts +1 -1
  162. package/esm/Dropdown/DropdownItem.js +20 -18
  163. package/esm/Dropdown/DropdownMenu.d.ts +2 -2
  164. package/esm/Dropdown/useRenderDropdownItem.d.ts +2 -0
  165. package/esm/Dropdown/useRenderDropdownItem.js +18 -0
  166. package/esm/Form/Form.d.ts +1 -1
  167. package/esm/FormControl/FormControl.d.ts +9 -3
  168. package/esm/FormControl/FormControl.js +6 -2
  169. package/esm/Input/Input.d.ts +2 -1
  170. package/esm/InputNumber/InputNumber.js +2 -2
  171. package/esm/InputPicker/InputPicker.js +1 -1
  172. package/esm/List/helper/useSortHelper.js +8 -4
  173. package/esm/MaskedInput/MaskedInput.d.ts +43 -0
  174. package/esm/MaskedInput/MaskedInput.js +67 -0
  175. package/esm/MaskedInput/adjustCaretPosition.d.ts +11 -0
  176. package/esm/MaskedInput/adjustCaretPosition.js +213 -0
  177. package/esm/MaskedInput/conformToMask.d.ts +8 -0
  178. package/esm/MaskedInput/conformToMask.js +239 -0
  179. package/esm/MaskedInput/createTextMaskInputElement.d.ts +7 -0
  180. package/esm/MaskedInput/createTextMaskInputElement.js +212 -0
  181. package/esm/MaskedInput/index.d.ts +3 -0
  182. package/esm/MaskedInput/index.js +2 -0
  183. package/esm/MaskedInput/types.d.ts +10 -0
  184. package/esm/{@types/icons.js → MaskedInput/types.js} +0 -0
  185. package/esm/MaskedInput/utilities.d.ts +7 -0
  186. package/esm/MaskedInput/utilities.js +38 -0
  187. package/esm/Menu/MenuItem.d.ts +1 -1
  188. package/esm/Menu/Menubar.d.ts +1 -1
  189. package/esm/Message/Message.js +15 -13
  190. package/esm/Modal/Modal.js +3 -2
  191. package/esm/Modal/utils.js +6 -5
  192. package/esm/MultiCascader/MultiCascader.js +1 -0
  193. package/esm/Notification/Notification.js +7 -4
  194. package/esm/Overlay/Modal.js +11 -8
  195. package/esm/Overlay/ModalManager.js +6 -1
  196. package/esm/Overlay/OverlayTrigger.js +1 -1
  197. package/esm/Overlay/Position.js +14 -8
  198. package/esm/Overlay/positionUtils.js +6 -2
  199. package/esm/Panel/Panel.d.ts +1 -1
  200. package/esm/Picker/DropdownMenu.js +3 -1
  201. package/esm/Picker/DropdownMenuCheckItem.d.ts +3 -3
  202. package/esm/Picker/PickerOverlay.js +2 -1
  203. package/esm/Picker/PickerToggle.d.ts +6 -0
  204. package/esm/Picker/PickerToggle.js +14 -6
  205. package/esm/Picker/SearchBar.d.ts +1 -1
  206. package/esm/Picker/utils.d.ts +2 -2
  207. package/esm/Picker/utils.js +1 -1
  208. package/esm/Radio/Radio.d.ts +1 -1
  209. package/esm/RadioGroup/RadioGroup.d.ts +1 -1
  210. package/esm/RangeSlider/RangeSlider.js +4 -2
  211. package/esm/Rate/Character.js +2 -2
  212. package/esm/Ripple/Ripple.js +4 -3
  213. package/esm/Sidenav/SidenavDropdownItem.d.ts +1 -1
  214. package/esm/Sidenav/SidenavDropdownItem.js +16 -10
  215. package/esm/Sidenav/SidenavDropdownMenu.d.ts +1 -1
  216. package/esm/Slider/Graduated.js +1 -1
  217. package/esm/Slider/Handle.js +5 -2
  218. package/esm/Slider/ProgressBar.js +1 -1
  219. package/esm/Slider/Slider.js +4 -2
  220. package/esm/Toggle/Toggle.d.ts +5 -6
  221. package/esm/Toggle/Toggle.js +43 -21
  222. package/esm/Tree/Tree.d.ts +3 -3
  223. package/esm/TreePicker/TreeNode.d.ts +1 -1
  224. package/esm/TreePicker/TreeNode.js +1 -1
  225. package/esm/TreePicker/TreePicker.d.ts +1 -1
  226. package/esm/Uploader/UploadFileItem.d.ts +0 -1
  227. package/esm/Uploader/UploadFileItem.js +3 -6
  228. package/esm/Uploader/Uploader.d.ts +4 -4
  229. package/esm/index.d.ts +2 -0
  230. package/esm/index.js +1 -0
  231. package/esm/locales/fa_IR.d.ts +105 -0
  232. package/esm/locales/fa_IR.js +74 -0
  233. package/esm/locales/index.d.ts +1 -0
  234. package/esm/locales/index.js +2 -1
  235. package/esm/utils/BrowserDetection.js +1 -1
  236. package/esm/utils/index.d.ts +1 -0
  237. package/esm/utils/index.js +2 -1
  238. package/esm/utils/scrollTopAnimation.js +2 -2
  239. package/esm/utils/treeUtils.d.ts +2 -2
  240. package/esm/utils/useEventListener.js +1 -1
  241. package/esm/utils/useIsMounted.d.ts +2 -0
  242. package/esm/utils/useIsMounted.js +16 -0
  243. package/esm/utils/usePortal.js +2 -2
  244. package/esm/utils/useRootClose.js +8 -6
  245. package/locales/fa_IR/package.json +7 -0
  246. package/package.json +5 -7
  247. package/styles/color-modes/dark.less +1 -0
  248. package/styles/color-modes/high-contrast.less +1 -0
  249. package/styles/color-modes/light.less +3 -0
  250. package/styles/plugins/palette.js +10 -1
  251. package/cjs/@types/icons.d.ts +0 -1
  252. package/esm/@types/icons.d.ts +0 -1
@@ -3,7 +3,7 @@ import { WithAsProps, RsRefForwardingComponent, TypeAttributes, FormControlBaseP
3
3
  export interface LocaleType {
4
4
  unfilled: string;
5
5
  }
6
- export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps<string | number | ReadonlyArray<string>> {
6
+ export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>, FormControlBaseProps {
7
7
  /** The HTML input type */
8
8
  type?: string;
9
9
  /** The HTML input id */
@@ -12,6 +12,7 @@ export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<
12
12
  size?: TypeAttributes.Size;
13
13
  /** Ref of input element */
14
14
  inputRef?: React.Ref<any>;
15
+ onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
15
16
  /** Called on press enter */
16
17
  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
17
18
  }
@@ -21,7 +21,7 @@ var _AngleUp = _interopRequireDefault(require("@rsuite/icons/legacy/AngleUp"));
21
21
 
22
22
  var _AngleDown = _interopRequireDefault(require("@rsuite/icons/legacy/AngleDown"));
23
23
 
24
- var _DOMHelper = _interopRequireDefault(require("../DOMHelper"));
24
+ var _on = _interopRequireDefault(require("dom-lib/on"));
25
25
 
26
26
  var _InputGroup = _interopRequireDefault(require("../InputGroup/InputGroup"));
27
27
 
@@ -216,7 +216,7 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
216
216
  var wheelListener;
217
217
 
218
218
  if (inputRef.current && scrollable) {
219
- wheelListener = _DOMHelper.default.on(inputRef.current, 'wheel', handleWheel, {
219
+ wheelListener = (0, _on.default)(inputRef.current, 'wheel', handleWheel, {
220
220
  passive: false
221
221
  });
222
222
  }
@@ -33,7 +33,7 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
33
33
 
34
34
  var _pick = _interopRequireDefault(require("lodash/pick"));
35
35
 
36
- var _domLib = require("dom-lib");
36
+ var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
37
37
 
38
38
  var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
39
39
 
@@ -232,7 +232,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
232
232
 
233
233
  // In multiple selection, you need to set a maximum width for the input.
234
234
  if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {
235
- setMaxWidth((0, _domLib.getWidth)(triggerRef.current.root));
235
+ setMaxWidth((0, _getWidth.default)(triggerRef.current.root));
236
236
  }
237
237
  }, []); // Update the position of the menu when the search keyword and value change
238
238
 
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  exports.__esModule = true;
6
6
  exports.default = void 0;
7
7
 
8
- var _domLib = require("dom-lib");
8
+ var _on = _interopRequireDefault(require("dom-lib/on"));
9
9
 
10
10
  var _react = require("react");
11
11
 
@@ -13,6 +13,8 @@ var _AutoScroller = _interopRequireDefault(require("./AutoScroller"));
13
13
 
14
14
  var _utils = require("./utils");
15
15
 
16
+ var _utils2 = require("../../utils");
17
+
16
18
  var _useManager2 = _interopRequireDefault(require("./useManager"));
17
19
 
18
20
  function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -41,14 +43,16 @@ var useSortHelper = function useSortHelper(config) {
41
43
  listItemRegister = _useManager.listItemRegister,
42
44
  getManagedItem = _useManager.getManagedItem,
43
45
  getOrderedItems = _useManager.getOrderedItems;
46
+
47
+ var isMounted = (0, _utils2.useIsMounted)();
44
48
  /**
45
49
  * start dragging
46
50
  * */
47
51
 
48
-
49
52
  var handlePress = (0, _react.useCallback)(function (mouseDownEvent, targetNode, curManagedItem) {
50
53
  var _activeNodeHelper;
51
54
 
55
+ if (!isMounted()) return;
52
56
  var listItemBaseClassName = targetNode.classList[0]; // get list item base className
53
57
 
54
58
  var helperElementClass = listItemBaseClassName + "-helper";
@@ -108,7 +112,7 @@ var useSortHelper = function useSortHelper(config) {
108
112
  });
109
113
  };
110
114
 
111
- var sortMouseMoveListener = (0, _domLib.on)(window, 'mousemove', function (mouseOverEvent) {
115
+ var sortMouseMoveListener = (0, _on.default)(window, 'mousemove', function (mouseOverEvent) {
112
116
  // Update helper position
113
117
  var offset = {
114
118
  x: (mouseOverEvent === null || mouseOverEvent === void 0 ? void 0 : mouseOverEvent.pageX) || 0,
@@ -213,7 +217,7 @@ var useSortHelper = function useSortHelper(config) {
213
217
  }, {
214
218
  passive: false
215
219
  });
216
- var sortMouseEndListener = (0, _domLib.on)(window, 'mouseup', function (event) {
220
+ var sortMouseEndListener = (0, _on.default)(window, 'mouseup', function (event) {
217
221
  // Remove the event listeners
218
222
  sortMouseMoveListener.off();
219
223
  sortMouseEndListener.off();
@@ -228,7 +232,8 @@ var useSortHelper = function useSortHelper(config) {
228
232
  setTimeout(function () {
229
233
  var _activeNodeHelper2, _activeNodeHelper2$pa;
230
234
 
231
- // Remove the helper from the DOM
235
+ if (!isMounted()) return; // Remove the helper from the DOM
236
+
232
237
  (_activeNodeHelper2 = activeNodeHelper) === null || _activeNodeHelper2 === void 0 ? void 0 : (_activeNodeHelper2$pa = _activeNodeHelper2.parentNode) === null || _activeNodeHelper2$pa === void 0 ? void 0 : _activeNodeHelper2$pa.removeChild(activeNodeHelper);
233
238
  activeNodeHelper = null; // Remove redundant styles
234
239
 
@@ -271,7 +276,7 @@ var useSortHelper = function useSortHelper(config) {
271
276
  oldIndex: activeNodeOldIndex,
272
277
  newIndex: activeNodeNextIndex
273
278
  }, mouseDownEvent.nativeEvent);
274
- }, [autoScroll, getOrderedItems, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
279
+ }, [autoScroll, getOrderedItems, isMounted, onSort, onSortEnd, onSortMove, onSortStart, transitionDuration]);
275
280
  /**
276
281
  * Determine whether to start dragging
277
282
  * */
@@ -0,0 +1,43 @@
1
+ import React from 'react';
2
+ import { MaskType, MaskFunctionType, ConfigType } from './types';
3
+ /**
4
+ * https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide
5
+ */
6
+ interface TextMaskProps {
7
+ /**
8
+ * `guide` is a boolean that tells the component whether to be in guide or no guide mode.
9
+ */
10
+ guide?: boolean;
11
+ /**
12
+ * `mask` is an array or a function that defines how the user input is going to be masked.
13
+ */
14
+ mask?: MaskType | MaskFunctionType | boolean;
15
+ /**
16
+ * `showMask` is a boolean that tells the Text Mask component to display the mask as a placeholder
17
+ * in place of the regular placeholder when the input element value is empty.
18
+ */
19
+ showMask?: boolean;
20
+ /** The placeholder character represents the fillable spot in the mask. The default placeholder character is underscore, _. */
21
+ placeholderChar?: string;
22
+ /** `keepCharPositions` changes the general behavior of the Text Mask component. */
23
+ keepCharPositions?: boolean;
24
+ /** You can provide a `pipe` function that will give you the opportunity to modify the conformed value before it is displayed on the screen. */
25
+ pipe?: (conformedValue: string, config: ConfigType) => string;
26
+ }
27
+ export declare type MaskedInputProps = TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
28
+ /** Custom rendering DOM */
29
+ render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
30
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
31
+ value?: string | number;
32
+ readOnly?: boolean;
33
+ disabled?: boolean;
34
+ };
35
+ declare const MaskedInput: React.ForwardRefExoticComponent<TextMaskProps & React.HTMLAttributes<HTMLInputElement> & {
36
+ /** Custom rendering DOM */
37
+ render?: (ref: React.Ref<HTMLInputElement>, props: React.HTMLAttributes<HTMLInputElement>) => any;
38
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
39
+ value?: string | number;
40
+ readOnly?: boolean;
41
+ disabled?: boolean;
42
+ } & React.RefAttributes<HTMLInputElement>>;
43
+ export default MaskedInput;
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+
7
+ exports.__esModule = true;
8
+ exports.default = void 0;
9
+
10
+ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
+
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _omit = _interopRequireDefault(require("lodash/omit"));
17
+
18
+ var _propTypes = _interopRequireDefault(require("prop-types"));
19
+
20
+ var _createTextMaskInputElement = _interopRequireDefault(require("./createTextMaskInputElement"));
21
+
22
+ var _utils = require("../utils");
23
+
24
+ var defaultRender = function defaultRender(ref, props) {
25
+ return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
26
+ ref: ref
27
+ }, props));
28
+ };
29
+
30
+ var MaskedInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
31
+ var mask = props.mask,
32
+ _props$guide = props.guide,
33
+ guide = _props$guide === void 0 ? true : _props$guide,
34
+ placeholderChar = props.placeholderChar,
35
+ value = props.value,
36
+ showMask = props.showMask,
37
+ pipe = props.pipe,
38
+ _props$render = props.render,
39
+ render = _props$render === void 0 ? defaultRender : _props$render,
40
+ onChange = props.onChange,
41
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["mask", "guide", "placeholderChar", "value", "showMask", "pipe", "render", "onChange"]);
42
+ var inputRef = (0, _react.useRef)(null);
43
+ var textMaskInputElement = (0, _react.useRef)();
44
+ var initTextMask = (0, _react.useCallback)(function () {
45
+ var _textMaskInputElement;
46
+
47
+ textMaskInputElement.current = (0, _createTextMaskInputElement.default)((0, _extends2.default)({
48
+ inputElement: inputRef.current
49
+ }, props));
50
+ (_textMaskInputElement = textMaskInputElement.current) === null || _textMaskInputElement === void 0 ? void 0 : _textMaskInputElement.update(value);
51
+ }, [props, value]);
52
+ var handleChange = (0, _react.useCallback)(function (event) {
53
+ var _textMaskInputElement2;
54
+
55
+ (_textMaskInputElement2 = textMaskInputElement.current) === null || _textMaskInputElement2 === void 0 ? void 0 : _textMaskInputElement2.update();
56
+ onChange === null || onChange === void 0 ? void 0 : onChange(event);
57
+ }, [onChange]);
58
+ (0, _react.useEffect)(function () {
59
+ initTextMask();
60
+ }, [guide, placeholderChar, showMask, pipe, mask, value, initTextMask]);
61
+ return render((0, _utils.mergeRefs)(inputRef, ref), (0, _extends2.default)({
62
+ onChange: handleChange,
63
+ defaultValue: value
64
+ }, (0, _omit.default)(rest, ['keepCharPositions'])));
65
+ });
66
+
67
+ MaskedInput.displayName = 'MaskedInput';
68
+ MaskedInput.propTypes = {
69
+ render: _propTypes.default.func,
70
+ onChange: _propTypes.default.func,
71
+ mask: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.bool]).isRequired,
72
+ guide: _propTypes.default.bool,
73
+ value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
74
+ pipe: _propTypes.default.func,
75
+ placeholderChar: _propTypes.default.string,
76
+ keepCharPositions: _propTypes.default.bool,
77
+ showMask: _propTypes.default.bool
78
+ };
79
+ var _default = MaskedInput;
80
+ exports.default = _default;
@@ -0,0 +1,11 @@
1
+ export default function adjustCaretPosition({ previousConformedValue, previousPlaceholder, currentCaretPosition, conformedValue, rawValue, placeholderChar, placeholder, indexesOfPipedChars, caretTrapIndexes }: {
2
+ previousConformedValue?: string;
3
+ previousPlaceholder?: string;
4
+ currentCaretPosition?: number;
5
+ conformedValue: any;
6
+ rawValue: any;
7
+ placeholderChar: any;
8
+ placeholder: any;
9
+ indexesOfPipedChars?: any[];
10
+ caretTrapIndexes?: any[];
11
+ }): number;
@@ -0,0 +1,218 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.default = adjustCaretPosition;
5
+ var defaultArray = [];
6
+ var emptyString = '';
7
+
8
+ function adjustCaretPosition(_ref) {
9
+ var _ref$previousConforme = _ref.previousConformedValue,
10
+ previousConformedValue = _ref$previousConforme === void 0 ? emptyString : _ref$previousConforme,
11
+ _ref$previousPlacehol = _ref.previousPlaceholder,
12
+ previousPlaceholder = _ref$previousPlacehol === void 0 ? emptyString : _ref$previousPlacehol,
13
+ _ref$currentCaretPosi = _ref.currentCaretPosition,
14
+ currentCaretPosition = _ref$currentCaretPosi === void 0 ? 0 : _ref$currentCaretPosi,
15
+ conformedValue = _ref.conformedValue,
16
+ rawValue = _ref.rawValue,
17
+ placeholderChar = _ref.placeholderChar,
18
+ placeholder = _ref.placeholder,
19
+ _ref$indexesOfPipedCh = _ref.indexesOfPipedChars,
20
+ indexesOfPipedChars = _ref$indexesOfPipedCh === void 0 ? defaultArray : _ref$indexesOfPipedCh,
21
+ _ref$caretTrapIndexes = _ref.caretTrapIndexes,
22
+ caretTrapIndexes = _ref$caretTrapIndexes === void 0 ? defaultArray : _ref$caretTrapIndexes;
23
+
24
+ if (currentCaretPosition === 0 || !rawValue.length) {
25
+ return 0;
26
+ } // Store lengths for faster performance?
27
+
28
+
29
+ var rawValueLength = rawValue.length;
30
+ var previousConformedValueLength = previousConformedValue.length;
31
+ var placeholderLength = placeholder.length;
32
+ var conformedValueLength = conformedValue.length; // This tells us how long the edit is. If user modified input from `(2__)` to `(243__)`,
33
+ // we know the user in this instance pasted two characters
34
+
35
+ var editLength = rawValueLength - previousConformedValueLength; // If the edit length is positive, that means the user is adding characters, not deleting.
36
+
37
+ var isAddition = editLength > 0; // This is the first raw value the user entered that needs to be conformed to mask
38
+
39
+ var isFirstRawValue = previousConformedValueLength === 0; // A partial multi-character edit happens when the user makes a partial selection in their
40
+ // input and edits that selection. That is going from `(123) 432-4348` to `() 432-4348` by
41
+ // selecting the first 3 digits and pressing backspace.
42
+ //
43
+ // Such cases can also happen when the user presses the backspace while holding down the ALT
44
+ // key.
45
+
46
+ var isPartialMultiCharEdit = editLength > 1 && !isFirstRawValue; // This algorithm doesn't support all cases of multi-character edits, so we just return
47
+ // the current caret position.
48
+ //
49
+ // This works fine for most cases.
50
+
51
+ if (isPartialMultiCharEdit) {
52
+ return currentCaretPosition;
53
+ } // For a mask like (111), if the `previousConformedValue` is (1__) and user attempts to enter
54
+ // `f` so the `rawValue` becomes (1f__), the new `conformedValue` would be (1__), which is the
55
+ // same as the original `previousConformedValue`. We handle this case differently for caret
56
+ // positioning.
57
+
58
+
59
+ var possiblyHasRejectedChar = isAddition && (previousConformedValue === conformedValue || conformedValue === placeholder);
60
+ var startingSearchIndex = 0;
61
+ var trackRightCharacter;
62
+ var targetChar;
63
+
64
+ if (possiblyHasRejectedChar) {
65
+ startingSearchIndex = currentCaretPosition - editLength;
66
+ } else {
67
+ // At this point in the algorithm, we want to know where the caret is right before the raw input
68
+ // has been conformed, and then see if we can find that same spot in the conformed input.
69
+ //
70
+ // We do that by seeing what character lies immediately before the caret, and then look for that
71
+ // same character in the conformed input and place the caret there.
72
+ // First, we need to normalize the inputs so that letter capitalization between raw input and
73
+ // conformed input wouldn't matter.
74
+ var normalizedConformedValue = conformedValue.toLowerCase();
75
+ var normalizedRawValue = rawValue.toLowerCase(); // Then we take all characters that come before where the caret currently is.
76
+
77
+ var leftHalfChars = normalizedRawValue.substr(0, currentCaretPosition).split(emptyString); // Now we find all the characters in the left half that exist in the conformed input
78
+ // This step ensures that we don't look for a character that was filtered out or rejected by `conformToMask`.
79
+
80
+ var intersection = leftHalfChars.filter(function (char) {
81
+ return normalizedConformedValue.indexOf(char) !== -1;
82
+ }); // The last character in the intersection is the character we want to look for in the conformed
83
+ // value and the one we want to adjust the caret close to
84
+
85
+ targetChar = intersection[intersection.length - 1]; // Calculate the number of mask characters in the previous placeholder
86
+ // from the start of the string up to the place where the caret is
87
+
88
+ var previousLeftMaskChars = previousPlaceholder.substr(0, intersection.length).split(emptyString).filter(function (char) {
89
+ return char !== placeholderChar;
90
+ }).length; // Calculate the number of mask characters in the current placeholder
91
+ // from the start of the string up to the place where the caret is
92
+
93
+ var leftMaskChars = placeholder.substr(0, intersection.length).split(emptyString).filter(function (char) {
94
+ return char !== placeholderChar;
95
+ }).length; // Has the number of mask characters up to the caret changed?
96
+
97
+ var masklengthChanged = leftMaskChars !== previousLeftMaskChars; // Detect if `targetChar` is a mask character and has moved to the left
98
+
99
+ var targetIsMaskMovingLeft = previousPlaceholder[intersection.length - 1] !== undefined && placeholder[intersection.length - 2] !== undefined && previousPlaceholder[intersection.length - 1] !== placeholderChar && previousPlaceholder[intersection.length - 1] !== placeholder[intersection.length - 1] && previousPlaceholder[intersection.length - 1] === placeholder[intersection.length - 2]; // If deleting and the `targetChar` `is a mask character and `masklengthChanged` is true
100
+ // or the mask is moving to the left, we can't use the selected `targetChar` any longer
101
+ // if we are not at the end of the string.
102
+ // In this case, change tracking strategy and track the character to the right of the caret.
103
+
104
+ if (!isAddition && (masklengthChanged || targetIsMaskMovingLeft) && previousLeftMaskChars > 0 && placeholder.indexOf(targetChar) > -1 && rawValue[currentCaretPosition] !== undefined) {
105
+ trackRightCharacter = true;
106
+ targetChar = rawValue[currentCaretPosition];
107
+ } // It is possible that `targetChar` will appear multiple times in the conformed value.
108
+ // We need to know not to select a character that looks like our target character from the placeholder or
109
+ // the piped characters, so we inspect the piped characters and the placeholder to see if they contain
110
+ // characters that match our target character.
111
+ // If the `conformedValue` got piped, we need to know which characters were piped in so that when we look for
112
+ // our `targetChar`, we don't select a piped char by mistake
113
+
114
+
115
+ var pipedChars = indexesOfPipedChars.map(function (index) {
116
+ return normalizedConformedValue[index];
117
+ }); // We need to know how many times the `targetChar` occurs in the piped characters.
118
+
119
+ var countTargetCharInPipedChars = pipedChars.filter(function (char) {
120
+ return char === targetChar;
121
+ }).length; // We need to know how many times it occurs in the intersection
122
+
123
+ var countTargetCharInIntersection = intersection.filter(function (char) {
124
+ return char === targetChar;
125
+ }).length; // We need to know if the placeholder contains characters that look like
126
+ // our `targetChar`, so we don't select one of those by mistake.
127
+
128
+ var countTargetCharInPlaceholder = placeholder.substr(0, placeholder.indexOf(placeholderChar)).split(emptyString).filter(function (char, index) {
129
+ return (// Check if `char` is the same as our `targetChar`, so we account for it
130
+ char === targetChar && // but also make sure that both the `rawValue` and placeholder don't have the same character at the same
131
+ // index because if they are equal, that means we are already counting those characters in
132
+ // `countTargetCharInIntersection`
133
+ rawValue[index] !== char
134
+ );
135
+ }).length; // The number of times we need to see occurrences of the `targetChar` before we know it is the one we're looking
136
+ // for is:
137
+
138
+ var requiredNumberOfMatches = countTargetCharInPlaceholder + countTargetCharInIntersection + countTargetCharInPipedChars + ( // The character to the right of the caret isn't included in `intersection`
139
+ // so add one if we are tracking the character to the right
140
+ trackRightCharacter ? 1 : 0); // Now we start looking for the location of the `targetChar`.
141
+ // We keep looping forward and store the index in every iteration. Once we have encountered
142
+ // enough occurrences of the target character, we break out of the loop
143
+ // If are searching for the second `1` in `1214`, `startingSearchIndex` will point at `4`.
144
+
145
+ var numberOfEncounteredMatches = 0;
146
+
147
+ for (var i = 0; i < conformedValueLength; i++) {
148
+ var conformedValueChar = normalizedConformedValue[i];
149
+ startingSearchIndex = i + 1;
150
+
151
+ if (conformedValueChar === targetChar) {
152
+ numberOfEncounteredMatches++;
153
+ }
154
+
155
+ if (numberOfEncounteredMatches >= requiredNumberOfMatches) {
156
+ break;
157
+ }
158
+ }
159
+ } // At this point, if we simply return `startingSearchIndex` as the adjusted caret position,
160
+ // most cases would be handled. However, we want to fast forward or rewind the caret to the
161
+ // closest placeholder character if it happens to be in a non-editable spot. That's what the next
162
+ // logic is for.
163
+ // In case of addition, we fast forward.
164
+
165
+
166
+ if (isAddition) {
167
+ // We want to remember the last placeholder character encountered so that if the mask
168
+ // contains more characters after the last placeholder character, we don't forward the caret
169
+ // that far to the right. Instead, we stop it at the last encountered placeholder character.
170
+ var lastPlaceholderChar = startingSearchIndex;
171
+
172
+ for (var _i = startingSearchIndex; _i <= placeholderLength; _i++) {
173
+ if (placeholder[_i] === placeholderChar) {
174
+ lastPlaceholderChar = _i;
175
+ }
176
+
177
+ if ( // If we're adding, we can position the caret at the next placeholder character.
178
+ placeholder[_i] === placeholderChar || // If a caret trap was set by a mask function, we need to stop at the trap.
179
+ caretTrapIndexes.indexOf(_i) !== -1 || // This is the end of the placeholder. We cannot move any further. Let's put the caret there.
180
+ _i === placeholderLength) {
181
+ return lastPlaceholderChar;
182
+ }
183
+ }
184
+ } else {
185
+ // In case of deletion, we rewind.
186
+ if (trackRightCharacter) {
187
+ // Searching for the character that was to the right of the caret
188
+ // We start at `startingSearchIndex` - 1 because it includes one character extra to the right
189
+ for (var _i2 = startingSearchIndex - 1; _i2 >= 0; _i2--) {
190
+ // If tracking the character to the right of the cursor, we move to the left until
191
+ // we found the character and then place the caret right before it
192
+ if ( // `targetChar` should be in `conformedValue`, since it was in `rawValue`, just
193
+ // to the right of the caret
194
+ conformedValue[_i2] === targetChar || // If a caret trap was set by a mask function, we need to stop at the trap.
195
+ caretTrapIndexes.indexOf(_i2) !== -1 || // This is the beginning of the placeholder. We cannot move any further.
196
+ // Let's put the caret there.
197
+ _i2 === 0) {
198
+ return _i2;
199
+ }
200
+ }
201
+ } else {
202
+ // Searching for the first placeholder or caret trap to the left
203
+ for (var _i3 = startingSearchIndex; _i3 >= 0; _i3--) {
204
+ // If we're deleting, we stop the caret right before the placeholder character.
205
+ // For example, for mask `(111) 11`, current conformed input `(456) 86`. If user
206
+ // modifies input to `(456 86`. That is, they deleted the `)`, we place the caret
207
+ // right after the first `6`
208
+ if ( // If we're deleting, we can position the caret right before the placeholder character
209
+ placeholder[_i3 - 1] === placeholderChar || // If a caret trap was set by a mask function, we need to stop at the trap.
210
+ caretTrapIndexes.indexOf(_i3) !== -1 || // This is the beginning of the placeholder. We cannot move any further.
211
+ // Let's put the caret there.
212
+ _i3 === 0) {
213
+ return _i3;
214
+ }
215
+ }
216
+ }
217
+ }
218
+ }
@@ -0,0 +1,8 @@
1
+ import { MaskType, ConfigType, MaskFunctionType } from './types';
2
+ export declare function isArray(value: any): boolean;
3
+ export default function conformToMask(rawValue?: string, mask?: MaskType | MaskFunctionType, config?: ConfigType): {
4
+ conformedValue: string;
5
+ meta: {
6
+ someCharsRejected: boolean;
7
+ };
8
+ };