pesona-ui 1.0.23 → 1.0.25

package/dist/index.cjs.js

@@ -7809,8 +7809,19 @@ const Popover = ({ className, children, text }) => {
 const ModalHeader = ({ children, className = '', ...rest }) => (React.createElement("div", { className: `modal-header ${className}`, ...rest }, children));
 const ModalBody = ({ children, className = '', ...rest }) => (React.createElement("div", { className: `modal-body ${className}`, ...rest }, children));
 const ModalFooter = ({ children, className = '', ...rest }) => (React.createElement("div", { className: `modal-footer ${className}`, ...rest }, children));
-const Modal = ({ children, className = '', ...rest }) => ReactDOM.createPortal(React.createElement("div", { className: "modal", ...rest },
-    React.createElement("div", { className: `modal-dialog ${className}` }, children)), document.body);
+const Modal = ({ children, className = '', ...rest }) => {
+    // Lock scroll on mount
+    React.useEffect(() => {
+        // Lock scroll
+        document.body.style.overflow = 'hidden';
+        // Cleanup on unmount
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, []);
+    return ReactDOM.createPortal(React.createElement("div", { className: "modal", ...rest },
+        React.createElement("div", { className: `modal-dialog ${className}` }, children)), document.body);
+};
 
 const Accordion = ({ defaultIndex = 0, children }) => {
     const [activeIndex, setActiveIndex] = React.useState(defaultIndex);
@@ -8312,6 +8323,22 @@ const Input = React.forwardRef(({ className, name, label, message, floatingLabel
         error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
 });
 
+const InputWithAction = React.forwardRef(({ className, name, label, message, floatingLabel, error, actionIcon, actionButtonLabel, actionButtonHandler, ...rest }, ref) => {
+    return (React.createElement(React.Fragment, null,
+        !floatingLabel && label && (React.createElement("label", { htmlFor: name },
+            label,
+            " ",
+            rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
+        React.createElement("div", { className: "input-group-icon" },
+            React.createElement("input", { type: "text", className: `form-control ${className}`, id: name, name: name, placeholder: !floatingLabel ? ' ' : '', ref: ref, ...rest }),
+            actionIcon && (React.createElement(Button, { role: "button", className: "icon", onClick: actionButtonHandler, tabIndex: 0, "aria-label": actionButtonLabel, disabled: rest.disabled }, actionIcon))),
+        floatingLabel && label && (React.createElement("label", { htmlFor: name },
+            label,
+            " ",
+            rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
+        error ? (React.createElement("small", { className: "form-message text-danger" }, error)) : (message && React.createElement("small", { className: "form-message text-muted" }, message))));
+});
+
 const InputDate = React.forwardRef(({ name, label, message, floatingLabel, value = '', error, ...rest }, ref) => {
     const [showDatePicker, setShowDatePicker] = React.useState(false);
     const [selectedDate, setSelectedDate] = React.useState(value ?? '');
@@ -8346,7 +8373,7 @@ const InputDate = React.forwardRef(({ name, label, message, floatingLabel, value
             rest.required && React.createElement("span", { className: "text-danger" }, "*"))),
         React.createElement("div", { className: "input-group-icon" },
             React.createElement(Input, { type: "text", className: "form-control", id: name, name: name, placeholder: !floatingLabel ? ' ' : '', ref: ref, value: selectedDate, ...rest }),
-            React.createElement("span", { role: "button", className: "icon", onClick: toggleDatePicker },
+            React.createElement(Button, { role: "button", className: "icon", onClick: toggleDatePicker, tabIndex: 0, "aria-label": "Open date picker", disabled: rest.disabled },
                 React.createElement(MdCalendarMonth, null)),
             showDatePicker && (React.createElement("div", { ref: datePickerRef },
                 React.createElement(DatePicker, { onSelect: handleDateSelect, defaultDate: selectedDate })))),
@@ -8784,6 +8811,7 @@ exports.InputDate = InputDate;
 exports.InputFile = InputFile;
 exports.InputImageSize = InputImageSize;
 exports.InputTextArea = InputTextArea;
+exports.InputWithAction = InputWithAction;
 exports.InputWysiwyg = InputWysiwyg;
 exports.LinearProgress = LinearProgress;
 exports.ListItem = ListItem;