rsuite 5.59.2 → 5.60.0

package/cjs/InputPicker/hooks/useInput.js

@@ -0,0 +1,46 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _useMaxWidth = _interopRequireDefault(require("./useMaxWidth"));
+var _InputAutosize = _interopRequireDefault(require("../InputAutosize"));
+var INPUT_MARGIN_RIGHT = 60;
+function useInput(props) {
+  var multi = props.multi,
+    triggerRef = props.triggerRef;
+  var inputRef = (0, _react.useRef)();
+  var maxWidth = (0, _useMaxWidth.default)(triggerRef);
+  var getInput = (0, _react.useCallback)(function () {
+    var _inputRef$current;
+    return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;
+  }, [multi]);
+  var focus = (0, _react.useCallback)(function () {
+    var _getInput;
+    (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();
+  }, [getInput]);
+  var blur = (0, _react.useCallback)(function () {
+    var _getInput2;
+    (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();
+  }, [getInput]);
+  var inputProps = (0, _react.useMemo)(function () {
+    return multi ? {
+      inputStyle: {
+        maxWidth: maxWidth - INPUT_MARGIN_RIGHT
+      },
+      as: _InputAutosize.default
+    } : {
+      as: 'input'
+    };
+  }, [maxWidth, multi]);
+  return {
+    inputProps: inputProps,
+    inputRef: inputRef,
+    focus: focus,
+    blur: blur
+  };
+}
+var _default = useInput;
+exports.default = _default;

package/cjs/InputPicker/hooks/useMaxWidth.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { OverlayTriggerHandle } from '../../internals/Picker/PickerToggleTrigger';
+declare function useMaxWidth(triggerRef: React.RefObject<OverlayTriggerHandle>): number;
+export default useMaxWidth;

package/cjs/InputPicker/hooks/useMaxWidth.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
+function useMaxWidth(triggerRef) {
+  var _useState = (0, _react.useState)(100),
+    maxWidth = _useState[0],
+    setMaxWidth = _useState[1];
+  (0, _react.useEffect)(function () {
+    var _triggerRef$current;
+    // In multiple selection, you need to set a maximum width for the input.
+    if ((_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.root) {
+      var _triggerRef$current2;
+      setMaxWidth((0, _getWidth.default)((_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.root));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return maxWidth;
+}
+var _default = useMaxWidth;
+exports.default = _default;

package/cjs/InputPicker/index.d.ts

@@ -1,3 +1,4 @@
 import InputPicker from './InputPicker';
-export type { InputPickerProps, InputItemDataType } from './InputPicker';
+export type { InputItemDataType } from './hooks/useData';
+export type { InputPickerProps } from './InputPicker';
 export default InputPicker;

package/cjs/InputPicker/utils.d.ts

@@ -0,0 +1 @@
+export declare const convertSize: (size?: string) => "lg" | "md" | "sm";

package/cjs/InputPicker/utils.js

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.convertSize = void 0;
+var convertSize = function convertSize(size) {
+  switch (size) {
+    case 'lg':
+      return 'lg';
+    case 'sm':
+    case 'xs':
+      return 'sm';
+    default:
+      return 'md';
+  }
+};
+exports.convertSize = convertSize;

package/cjs/TagInput/index.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _InputPicker = _interopRequireDefault(require("../InputPicker/InputPicker"));
-var _InputPickerContext = _interopRequireDefault(require("../InputPicker/InputPickerContext"));
+var _InputPickerContext = require("../InputPicker/InputPickerContext");
 /**
  * The `TagInput` component is an enhancement of Input and supports input tags and management tags.
  *
@@ -41,7 +41,7 @@ var TagInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       };
     });
   }, [defaultValue, value]);
-  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.TagProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {
     "aria-haspopup": false,

package/cjs/TagPicker/index.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _InputPicker = _interopRequireDefault(require("../InputPicker/InputPicker"));
-var _InputPickerContext = _interopRequireDefault(require("../InputPicker/InputPickerContext"));
+var _InputPickerContext = require("../InputPicker/InputPickerContext");
 /**
  * `TagPicker` component enables multi-selection by tags and supports new options.
  *
@@ -32,7 +32,7 @@ var TagPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       renderCheckbox: renderMenuItemCheckbox
     };
   }, [onTagRemove, renderMenuItemCheckbox, tagProps, trigger]);
-  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.default.Provider, {
+  return /*#__PURE__*/_react.default.createElement(_InputPickerContext.TagProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_InputPicker.default, (0, _extends2.default)({}, rest, {
     ref: ref

package/dist/rsuite-no-reset-rtl.css

@@ -1466,7 +1466,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 }
 .rs-anim-fade.rs-anim-in {
   opacity: 1;
-  pointer-events: unset;
+  pointer-events: auto;
 }
 .rs-auto-complete-menu {
   overflow-y: auto;
@@ -14204,30 +14204,6 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-plaintext .rs-tag {
   margin: 0;
 }
-.rs-picker-tag-lg .rs-picker-textbox {
-  padding-bottom: 6px;
-}
-.rs-picker-tag-lg .rs-picker-textbox .rs-picker-search-input {
-  padding-right: 16px;
-  margin-top: 6px;
-  font-size: 16px;
-}
-.rs-picker-tag-lg .rs-picker-textbox input {
-  height: 20px;
-}
-.rs-picker-tag-lg .rs-picker-toggle {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.rs-picker-tag-lg .rs-picker-textbox {
-  min-height: 40px;
-}
-.rs-picker-tag-lg .rs-picker-tag-list .rs-tag-lg {
-  margin-top: 6px;
-  margin-right: 6px;
-}
 .rs-picker-tag .rs-picker-textbox,
 .rs-picker-tag-md .rs-picker-textbox {
   padding-bottom: 5px;
@@ -14254,6 +14230,30 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   margin-top: 5px;
   margin-right: 5px;
 }
+.rs-picker-tag-lg .rs-picker-textbox {
+  padding-bottom: 7px;
+}
+.rs-picker-tag-lg .rs-picker-textbox .rs-picker-search-input {
+  padding-right: 16px;
+  margin-top: 7px;
+  font-size: 16px;
+}
+.rs-picker-tag-lg .rs-picker-textbox input {
+  height: 20px;
+}
+.rs-picker-tag-lg .rs-picker-toggle {
+  padding-top: 9px;
+  padding-bottom: 9px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.rs-picker-tag-lg .rs-picker-textbox {
+  min-height: 40px;
+}
+.rs-picker-tag-lg .rs-picker-tag-list .rs-tag-lg {
+  margin-top: 6px;
+  margin-right: 6px;
+}
 .rs-picker-tag-sm .rs-picker-textbox {
   padding-bottom: 2px;
 }