@uxf/ui 1.0.0-beta.149 → 1.0.0-beta.151

package/_select-base/_select-base.js

@@ -67,7 +67,7 @@ const _SelectBase = (props) => {
                     props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })),
                     react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-sb__button-icon", renderProps.open && classes_1.CLASSES.IS_OPEN), name: iconName })),
                 props.rightAddon && react_1.default.createElement(input_1.Input.RightAddon, null, props.rightAddon)),
-            react_1.default.createElement(Options, { component: Component, emptyMessage: props.emptyMessage, forwardRef: dropdown.floating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement }),
+            react_1.default.createElement(Options, { component: Component, emptyMessage: props.emptyMessage, forwardRef: dropdown.floating, keyExtractor: props.keyExtractor, options: props.options, placement: dropdown.placement, renderOption: props.renderOption }),
             props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText)))))));
 };
 exports._SelectBase = _SelectBase;

package/modal/modal-dialog.d.ts

@@ -2,9 +2,10 @@ import React, { ReactNode } from "react";
 import { ModalWidths } from "@uxf/ui/modal/theme";
 export interface ModalDialogProps {
     children: ReactNode;
+    className?: string;
+    disableBackdropClose?: boolean;
     onClose: () => void;
     open: boolean;
     width?: keyof ModalWidths;
-    className?: string;
 }
 export declare const ModalDialog: React.NamedExoticComponent<ModalDialogProps>;

package/modal/modal-dialog.js

@@ -29,7 +29,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_2 = __importStar(require("react"));
 exports.ModalDialog = (0, react_2.memo)((props) => {
     var _a;
-    return (react_2.default.createElement(react_1.Dialog, { className: (0, cx_1.cx)("uxf-modal", "uxf-modal--width-" + ((_a = props.width) !== null && _a !== void 0 ? _a : "default"), props.className), open: props.open, onClose: props.onClose },
+    return (react_2.default.createElement(react_1.Dialog, { className: (0, cx_1.cx)("uxf-modal", "uxf-modal--width-" + ((_a = props.width) !== null && _a !== void 0 ? _a : "default"), props.className), open: props.open, onClose: props.disableBackdropClose ? () => null : props.onClose },
         react_2.default.createElement(react_1.Dialog.Overlay, { className: "uxf-modal__backdrop" }),
         react_2.default.createElement("div", { className: "uxf-modal__wrapper" },
             react_2.default.createElement("div", { className: "uxf-modal__body" },

package/modal/modal.d.ts

@@ -2,9 +2,10 @@ import React, { ReactNode } from "react";
 import type { ModalDialogProps } from "./modal-dialog";
 export interface ModalProps {
     children: ReactNode;
+    className?: ModalDialogProps["className"];
+    disableBackdropClose?: ModalDialogProps["disableBackdropClose"];
     onClose?: () => void;
     width?: ModalDialogProps["width"];
-    className?: ModalDialogProps["className"];
 }
 export interface ModalRef {
     close: () => void;

package/modal/modal.js

@@ -46,6 +46,6 @@ exports.Modal = (0, react_1.forwardRef)((props, ref) => {
             return null;
         });
     }, []);
-    return modal ? (react_1.default.createElement(modal_dialog_1.ModalDialog, { open: !!modal, onClose: onClose, width: modal.width, className: modal.className }, modal.children)) : null;
+    return modal ? (react_1.default.createElement(modal_dialog_1.ModalDialog, { className: modal.className, disableBackdropClose: modal.disableBackdropClose, onClose: onClose, open: !!modal, width: modal.width }, modal.children)) : null;
 });
 exports.Modal.displayName = "UxfUiModal";

package/modal/modal.stories.js

@@ -36,7 +36,13 @@ function Default() {
                     react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - dark"),
                     react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
                 className: "dark",
-            }) }, "Click to open modal - dark")));
+            }) }, "Click to open modal - dark"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - disable backdrop close"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+                disableBackdropClose: true,
+            }) }, "Click to open modal - disable backdrop close")));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyModals),
         react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyModals)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.149",
+  "version": "1.0.0-beta.151",
   "description": "",
   "publishConfig": {
     "access": "public"