pesona-ui 1.0.23 → 1.0.25

package/dist/index.esm.js

@@ -7807,8 +7807,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 }) => 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
+    useEffect(() => {
+        // Lock scroll
+        document.body.style.overflow = 'hidden';
+        // Cleanup on unmount
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, []);
+    return 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] = useState(defaultIndex);
@@ -8310,6 +8321,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] = useState(false);
     const [selectedDate, setSelectedDate] = useState(value ?? '');
@@ -8344,7 +8371,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 })))),
@@ -8742,5 +8769,5 @@ const TablePickSelectedItems = ({ count, selectedItem, selectedRows, }) => {
             " Gunakan")));
 };
 
-export { Accordion, AccordionSection, AccordionSectionBody, AccordionSectionFooter, Alert, Badge, Box, Button, Callout, Card, CardBody, CardFooter, CardHeader, Checkbox, CheckboxAgreement, CircularProgress, CircularProgressWithLabel, ClearInput, ConfirmationAlert, DatePicker, DivTable, DivTableBody, DivTableCell, DivTableFooter, DivTableHeader, DivTableRow, Dropdown, DropdownContent, DropdownDatePicker, DropdownMenu, DropdownToggle, FormCheckbox, FormContainer, FormGroup, FormRadio, Input, InputDate, InputFile, InputImageSize, InputTextArea, InputWysiwyg, LinearProgress, ListItem, ListView, LoadingBar, Modal, ModalBody, ModalFooter, ModalHeader, Popover, Radio, RadioButtonGroup, Select, SelectMultiple, SelectWithSearch, Spinner, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableDeleteSelectedItems, TableFooter, TableHeader, TablePaginating, TablePickSelectedItems, TableRow, Tabs, Tooltip };
+export { Accordion, AccordionSection, AccordionSectionBody, AccordionSectionFooter, Alert, Badge, Box, Button, Callout, Card, CardBody, CardFooter, CardHeader, Checkbox, CheckboxAgreement, CircularProgress, CircularProgressWithLabel, ClearInput, ConfirmationAlert, DatePicker, DivTable, DivTableBody, DivTableCell, DivTableFooter, DivTableHeader, DivTableRow, Dropdown, DropdownContent, DropdownDatePicker, DropdownMenu, DropdownToggle, FormCheckbox, FormContainer, FormGroup, FormRadio, Input, InputDate, InputFile, InputImageSize, InputTextArea, InputWithAction, InputWysiwyg, LinearProgress, ListItem, ListView, LoadingBar, Modal, ModalBody, ModalFooter, ModalHeader, Popover, Radio, RadioButtonGroup, Select, SelectMultiple, SelectWithSearch, Spinner, Switch, Tab, TabGroup, Table, TableBody, TableCell, TableDeleteSelectedItems, TableFooter, TableHeader, TablePaginating, TablePickSelectedItems, TableRow, Tabs, Tooltip };
 //# sourceMappingURL=index.esm.js.map