@paygreen/pgui 2.13.0 → 2.13.1

package/dist/cjs/index.js

@@ -47007,9 +47007,34 @@ var PaginationButtonNextPage = function (_a) {
 };
 var PaginationInfo = function (_a) {
     var rest = __rest$c(_a, []);
-    var _b = React.useContext(PaginationContext), isLoadingPage = _b.isLoadingPage, page = _b.page, lastPage = _b.lastPage, setPage = _b.setPage;
+    var _b = React.useContext(PaginationContext), isLoadingPage = _b.isLoadingPage, page = _b.page, firstPage = _b.firstPage, lastPage = _b.lastPage, setPage = _b.setPage;
     var _c = React.useState(false), isEdit = _c[0], setIsEdit = _c[1];
+    var _d = React.useState(page), inputValue = _d[0], setInputValue = _d[1];
     var numberInputRef = React.useRef(null);
+    /**
+     * Handles the page change event.
+     *
+     * @param {string} value - The value from the input field.
+     * @returns {number} The new page number.
+     *
+     * The function first tries to parse the input value to an integer.
+     * If the input is not a number, it defaults to the `firstPage`.
+     * If the input exceeds the `lastPage`, it sets the page to the `lastPage`.
+     * If the input is less than `firstPage`, it sets the page to the `firstPage`.
+     */
+    var handlePageChange = function (value) {
+        var newPage = parseInt(value, 10);
+        if (isNaN(newPage)) {
+            newPage = firstPage; // default to first page if input is not a number
+        }
+        else if (newPage >= parseInt(lastPage, 10)) {
+            newPage = lastPage; // set to last page if input exceeds last page
+        }
+        else if (newPage < parseInt(firstPage, 10)) {
+            newPage = firstPage; // set to first page if input is less than first page
+        }
+        return newPage;
+    };
     React.useEffect(function () {
         var _a;
         if (isEdit) {
@@ -47023,14 +47048,23 @@ var PaginationInfo = function (_a) {
         }, cursor: "pointer", wrap: "nowrap" }, rest),
         React__default["default"].createElement(React__default["default"].Fragment, null, !isLoadingPage && (React__default["default"].createElement(React__default["default"].Fragment, null,
             !isEdit && (React__default["default"].createElement(react.Text, { as: "span", cursor: "pointer" }, page)),
-            isEdit && (React__default["default"].createElement(react.NumberInput, { w: 20, min: 1, max: lastPage, onChange: function (value) {
-                    var newPage = value
-                        ? parseInt(value, 10) >= parseInt(lastPage, 10)
-                            ? lastPage
-                            : value
-                        : 1;
-                    setPage(parseInt(newPage, 10));
-                }, defaultValue: page, size: "sm", onBlur: function () { return setIsEdit(false); } },
+            isEdit && (React__default["default"].createElement(react.NumberInput, { w: 20, min: 1, max: lastPage, onBlur: function (event) {
+                    var value = event.target.value;
+                    var newPage = handlePageChange(value);
+                    setPage(newPage);
+                    setIsEdit(false);
+                }, onChange: function (value) {
+                    var newPage = handlePageChange(value);
+                    setInputValue(newPage);
+                }, onKeyDown: function (event) {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        var value = inputValue;
+                        var newPage = handlePageChange(String(value));
+                        setPage(newPage);
+                        setIsEdit(false);
+                    }
+                }, defaultValue: page, size: "sm" },
                 React__default["default"].createElement(react.NumberInputField, { ref: numberInputRef }),
                 React__default["default"].createElement(react.NumberInputStepper, null,
                     React__default["default"].createElement(react.NumberIncrementStepper, null),
@@ -55800,7 +55834,10 @@ var SelectInner = function (_a, ref) {
     }); })), getComponentStyles('control', function (_a) {
         var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
         return (__assign$g(__assign$g(__assign$g({ color: fieldTextColor, fontSize: fieldFontSize, height: 'fit-content', minHeight: fieldHeight, borderRadius: fieldBorderRadius, borderColor: fieldBorderColor, backgroundColor: fieldBg, ':hover': {
-                borderColor: theme.colors.gray[300],
+                borderColor: !!isError && !isFocused ? fieldErrorBorderColor : fieldBorderColor,
+                backgroundColor: isLightMode
+                    ? theme.colors.gray['100']
+                    : theme.colors.gray['700'],
                 cursor: 'text'
             } }, getConditionalStyles(isFocused && fieldFocusBorderColor, {
             borderColor: fieldFocusBorderColor,
@@ -55810,9 +55847,13 @@ var SelectInner = function (_a, ref) {
             }
         })), getConditionalStyles(!!isError, {
             borderColor: fieldErrorBorderColor,
-            boxShadow: "0 0 0 1px ".concat(fieldErrorBorderColor),
+            boxShadow: "none",
+            borderWidth: '1px',
             '&:hover': {
-                borderColor: fieldErrorBorderColor
+                borderColor: fieldErrorBorderColor,
+                boxShadow: "none",
+                borderWidth: '1px',
+                borderStyle: 'solid'
             }
         })), getConditionalStyles(isDisabled, {
             opacity: 0.6
@@ -56349,6 +56390,9 @@ var Input = {
                 },
                 _focusVisible: {
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
+                },
+                _placeholder: {
+                    color: 'gray.500'
                 }
             },
             addon: {
@@ -56370,6 +56414,9 @@ var Input = {
                 _focusVisible: {
                     bg: props.colorMode === 'light' ? 'gray.200' : 'gray.800',
                     boxShadow: "0 0 0 1px ".concat(props.theme.colors.gray[300])
+                },
+                _placeholder: {
+                    color: 'gray.500'
                 }
             },
             addon: {
@@ -56506,6 +56553,14 @@ var textarea = {
     defaultProps: defaultProps
 };
 
+var tooltip = {
+    baseStyle: {
+        fontSize: 'sm',
+        borderRadius: 'md',
+        padding: '0.5rem'
+    }
+};
+
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Alert: alert,
@@ -56522,7 +56577,8 @@ var components = /*#__PURE__*/Object.freeze({
   Slider: slider,
   Switch: _switch,
   Tag: tag,
-  Textarea: textarea
+  Textarea: textarea,
+  Tooltip: tooltip
 });
 
 var colors = {