bs-unified-ui 1.0.909 → 1.0.911

package/components/Table/TablePagination.d.ts

@@ -5,5 +5,6 @@ export interface TablePaginationProps {
     page?: number;
     onPageChange?: (page: number) => void;
     dataTestId?: string;
+    enablePageInput?: boolean;
 }
-export declare const TablePagination: ({ pageStart, pageCount, page, onPageChange, dataTestId, }: TablePaginationProps) => React.JSX.Element;
+export declare const TablePagination: ({ pageStart, pageCount, page, onPageChange, dataTestId, enablePageInput, }: TablePaginationProps) => React.JSX.Element;

package/index.js

@@ -20437,40 +20437,115 @@ var TableHeadCell = function (_a) {
     return (React.createElement(material.TableCell, __assign({ align: titleAlign || align, sx: { borderBottom: 'none', px: 2, py: 1, width: width } }, props), renderContent()));
 };
 
+var StyledTextField = material.styled(material.TextField)(function () { return ({
+    '& .MuiOutlinedInput-root': {
+        padding: 0,
+    },
+    '& .MuiInputAdornment-root': {
+        marginTop: 2,
+    },
+    '& .MuiInputAdornment-positionStart': {
+        marginRight: 0,
+        marginLeft: 10,
+    },
+    '& .MuiInputAdornment-positionEnd': {
+        marginRight: 10,
+    },
+}); });
+var NumberInput = function (_a) {
+    var label = _a.label, disableValueMutationByArrowKeys = _a.disableValueMutationByArrowKeys, startAdornment = _a.startAdornment, _b = _a.isCurrency, isCurrency = _b === void 0 ? false : _b, endAdornment = _a.endAdornment, dataTestId = _a.dataTestId, fullWidth = _a.fullWidth, min = _a.min, max = _a.max, props = __rest(_a, ["label", "disableValueMutationByArrowKeys", "startAdornment", "isCurrency", "endAdornment", "dataTestId", "fullWidth", "min", "max"]);
+    var handleKeyDown = function (event) {
+        if (disableValueMutationByArrowKeys && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            event.preventDefault();
+        }
+    };
+    var handlePaste = function (event) {
+        var paste = (event.clipboardData).getData('text');
+        var regexNumber = /^(\d*\.)?\d+$/;
+        if (!regexNumber.test(paste)) {
+            event.preventDefault();
+        }
+    };
+    return (React.createElement(material.FormControl, { fullWidth: fullWidth },
+        label && (React.createElement(material.FormLabel, { sx: { mb: 1.25 } }, typeof label === 'string' ? (React.createElement(material.Typography, { variant: 'fs14', color: function (theme) { return theme.foreground.black; } }, label)) : (label))),
+        React.createElement(StyledTextField, __assign({}, props, { InputProps: __assign(__assign({}, ((startAdornment || isCurrency)
+                ? {
+                    startAdornment: isCurrency ? (React.createElement(material.InputAdornment, { position: 'start', sx: { '& p': { color: "#ADAFB1" } } }, "$")) : (React.createElement(material.InputAdornment, { position: 'start' }, startAdornment)),
+                }
+                : {})), (endAdornment
+                ? {
+                    endAdornment: (React.createElement(material.InputAdornment, { position: 'end' }, endAdornment)),
+                }
+                : {})), 
+            // eslint-disable-next-line react/jsx-no-duplicate-props
+            inputProps: __assign(__assign(__assign({ onKeyDown: handleKeyDown, onPaste: handlePaste }, (!isNullOrUndefined(min) ? { min: min } : {})), (!isNullOrUndefined(max) ? { max: max } : {})), props.inputProps), "data-testid": dataTestId, type: 'number' }))));
+};
+
 var TablePagination = function (_a) {
-    var _b = _a.pageStart, pageStart = _b === void 0 ? 0 : _b, _c = _a.pageCount, pageCount = _c === void 0 ? 0 : _c, _d = _a.page, page = _d === void 0 ? 0 : _d, onPageChange = _a.onPageChange, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'pagination' : _e;
+    var _b = _a.pageStart, pageStart = _b === void 0 ? 0 : _b, _c = _a.pageCount, pageCount = _c === void 0 ? 0 : _c, _d = _a.page, page = _d === void 0 ? 0 : _d, onPageChange = _a.onPageChange, _e = _a.dataTestId, dataTestId = _e === void 0 ? 'pagination' : _e, _f = _a.enablePageInput, enablePageInput = _f === void 0 ? false : _f;
     var theme = material.useTheme();
     var pageIdx = Math.max(0, page - pageStart);
     var pageVal = pageIdx + pageStart;
-    return (React.createElement(material.Box, { sx: {
-            'py': 1.5,
-            'display': 'flex',
-            'justifyContent': 'center',
-            'gap': 1,
-            '.MuiButton-root': {
-                'padding': 0,
-                'minWidth': 24,
-                'minHeight': 24,
-                'color': theme.foreground.black4,
-                'bgcolor': theme.background.sectionBg,
-                'borderRadius': '4px',
-                '>div': { color: 'inherit !important' },
-                '&.Mui-disabled': {
-                    color: theme.background.outlineDivider,
-                    bgcolor: theme.background.pageBg,
+    var _g = React.useState(pageVal), currentPage = _g[0], setCurrentPage = _g[1];
+    return (React.createElement(material.Box, { sx: { display: 'flex', alignItems: 'center', px: 2 } },
+        React.createElement(material.Box, { sx: {
+                'py': 1.5,
+                'display': 'flex',
+                'justifyContent': 'center',
+                'gap': 1,
+                'flex': 1,
+                '.MuiButton-root': {
+                    'padding': 0,
+                    'minWidth': 24,
+                    'minHeight': 24,
+                    'color': theme.foreground.black4,
+                    'bgcolor': theme.background.sectionBg,
+                    'borderRadius': '4px',
+                    '>div': { color: 'inherit !important' },
+                    '&.Mui-disabled': {
+                        color: theme.background.outlineDivider,
+                        bgcolor: theme.background.pageBg,
+                    },
                 },
-            },
-        }, "data-testid": "pagination-".concat(dataTestId) },
-        React.createElement(Button, { iconOnly: true, variant: 'text', disabled: pageIdx <= 0, onClick: function () {
-                if (pageIdx)
-                    onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(pageVal - 1);
-            }, "data-testid": "btn-pagination-prev-".concat(dataTestId) },
-            React.createElement(Icon, { name: 'arrow-left-s', size: 20 })),
-        React.createElement(Button, { iconOnly: true, variant: 'text', disabled: pageIdx >= pageCount - 1, onClick: function () {
-                if (pageIdx < pageCount - 1)
-                    onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(pageVal + 1);
-            }, "data-testid": "btn-pagination-next-".concat(dataTestId) },
-            React.createElement(Icon, { name: 'arrow-right-s', size: 20 }))));
+            }, "data-testid": "pagination-".concat(dataTestId) },
+            React.createElement(Button, { iconOnly: true, variant: 'text', disabled: pageIdx <= 0, onClick: function () {
+                    if (pageIdx) {
+                        if (enablePageInput) {
+                            setCurrentPage(pageVal - 1);
+                        }
+                        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(pageVal - 1);
+                    }
+                }, "data-testid": "btn-pagination-prev-".concat(dataTestId) },
+                React.createElement(Icon, { name: 'arrow-left-s', size: 20 })),
+            React.createElement(Button, { iconOnly: true, variant: 'text', disabled: pageIdx >= pageCount - 1, onClick: function () {
+                    if (pageIdx < pageCount - 1) {
+                        if (enablePageInput) {
+                            setCurrentPage(pageVal + 1);
+                        }
+                        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(pageVal + 1);
+                    }
+                }, "data-testid": "btn-pagination-next-".concat(dataTestId) },
+                React.createElement(Icon, { name: 'arrow-right-s', size: 20 }))),
+        enablePageInput ? React.createElement(material.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, marginLeft: 'auto' } },
+            React.createElement(material.Typography, { variant: 'fs14', color: theme.foreground.black4 }, "Page"),
+            React.createElement(NumberInput, { sx: {
+                    width: 52,
+                    'input::-webkit-inner-spin-button': {
+                        display: 'none'
+                    }
+                }, value: currentPage.toString(), onChange: function (event) {
+                    var val = Number(event.target.value);
+                    setCurrentPage(val);
+                }, onKeyDown: function (event) {
+                    if (event.key === 'Enter') {
+                        var target = event.target;
+                        var val = Number(target.value);
+                        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(val);
+                    }
+                }, min: 1, max: pageCount, disableValueMutationByArrowKeys: true }),
+            React.createElement(material.Typography, { variant: 'fs14', color: theme.foreground.black4 },
+                "of ",
+                pageCount)) : null));
 };
 
 var CustomUnchecked = material.createSvgIcon(React.createElement(React.Fragment, null,
@@ -40694,50 +40769,6 @@ var Dialog = function (props) {
         renderFooter ? React.createElement(material.DialogActions, null, renderFooter) : null));
 };
 
-var StyledTextField = material.styled(material.TextField)(function () { return ({
-    '& .MuiOutlinedInput-root': {
-        padding: 0,
-    },
-    '& .MuiInputAdornment-root': {
-        marginTop: 2,
-    },
-    '& .MuiInputAdornment-positionStart': {
-        marginRight: 0,
-        marginLeft: 10,
-    },
-    '& .MuiInputAdornment-positionEnd': {
-        marginRight: 10,
-    },
-}); });
-var NumberInput = function (_a) {
-    var label = _a.label, disableValueMutationByArrowKeys = _a.disableValueMutationByArrowKeys, startAdornment = _a.startAdornment, _b = _a.isCurrency, isCurrency = _b === void 0 ? false : _b, endAdornment = _a.endAdornment, dataTestId = _a.dataTestId, fullWidth = _a.fullWidth, min = _a.min, max = _a.max, props = __rest(_a, ["label", "disableValueMutationByArrowKeys", "startAdornment", "isCurrency", "endAdornment", "dataTestId", "fullWidth", "min", "max"]);
-    var handleKeyDown = function (event) {
-        if (disableValueMutationByArrowKeys && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
-            event.preventDefault();
-        }
-    };
-    var handlePaste = function (event) {
-        var paste = (event.clipboardData).getData('text');
-        var regexNumber = /^(\d*\.)?\d+$/;
-        if (!regexNumber.test(paste)) {
-            event.preventDefault();
-        }
-    };
-    return (React.createElement(material.FormControl, { fullWidth: fullWidth },
-        label && (React.createElement(material.FormLabel, { sx: { mb: 1.25 } }, typeof label === 'string' ? (React.createElement(material.Typography, { variant: 'fs14', color: function (theme) { return theme.foreground.black; } }, label)) : (label))),
-        React.createElement(StyledTextField, __assign({}, props, { InputProps: __assign(__assign({}, ((startAdornment || isCurrency)
-                ? {
-                    startAdornment: isCurrency ? (React.createElement(material.InputAdornment, { position: 'start', sx: { '& p': { color: "#ADAFB1" } } }, "$")) : (React.createElement(material.InputAdornment, { position: 'start' }, startAdornment)),
-                }
-                : {})), (endAdornment
-                ? {
-                    endAdornment: (React.createElement(material.InputAdornment, { position: 'end' }, endAdornment)),
-                }
-                : {})), 
-            // eslint-disable-next-line react/jsx-no-duplicate-props
-            inputProps: __assign(__assign(__assign({ onKeyDown: handleKeyDown, onPaste: handlePaste }, (!isNullOrUndefined(min) ? { min: min } : {})), (!isNullOrUndefined(max) ? { max: max } : {})), props.inputProps), "data-testid": dataTestId, type: 'number' }))));
-};
-
 var rootClass = 'bs-dp';
 var DatePicker = function (_a) {
     var _b = _a.position, position = _b === void 0 ? 'bottom-start' : _b, _c = _a.openOnTextFieldClick, openOnTextFieldClick = _c === void 0 ? false : _c, props = __rest(_a, ["position", "openOnTextFieldClick"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bs-unified-ui",
-  "version": "1.0.909",
+  "version": "1.0.911",
   "license": "MIT",
   "author": "Advesa",
   "description": "UI Components for Unified Breadstack UI",