dry-ux 1.79.0 → 1.80.0

package/dist/provider.d.ts

@@ -21,6 +21,14 @@ interface IDryUXProviderProps {
      * The children elements to be rendered within the provider.
      */
     children: React.ReactNode;
+    /**
+     * Optional identifier for the provider.
+     */
+    id?: string;
+    /**
+     * If true, enables debug mode.
+     */
+    debug?: boolean;
 }
 /**
  * DryUXProvider component that provides UI utilities and optionally renders a UIUtilRenderer.

package/dist/provider.js

@@ -10,6 +10,6 @@ const UIUtilRenderer_1 = require("./ui-utils/UIUtilRenderer");
  * @param {IDryUXProviderProps} props - The props for the DryUXProvider component.
  * @returns {JSX.Element} The DryUXProvider component.
  */
-exports.DryUXProvider = React.memo(({ children, noRenderer = false, rendererProps, viewportDetect }) => (React.createElement(UIUtilProvider_1.UIUtilProvider, { viewportDetect: viewportDetect },
+exports.DryUXProvider = React.memo(({ children, noRenderer = false, rendererProps, viewportDetect, id, debug }) => (React.createElement(UIUtilProvider_1.UIUtilProvider, { viewportDetect: viewportDetect, id: id, debug: debug },
     children,
-    !noRenderer && React.createElement(UIUtilRenderer_1.UIUtilRenderer, Object.assign({}, rendererProps)))));
+    !noRenderer && React.createElement(UIUtilRenderer_1.UIUtilRenderer, Object.assign({}, rendererProps, { id: id, debug: debug })))));

package/dist/ui-utils/Modal.d.ts

@@ -40,6 +40,14 @@ export type ModalProps = {
          */
         onClose?: (modal: Pick<PopUpOptions, "title" | "trackingId">) => void;
     };
+    /**
+     * Provider ID
+     */
+    providerId?: string;
+    /**
+     * Debug flag
+     */
+    debug?: boolean;
 };
 /**
  * Modal component that renders a Bootstrap modal with custom configurations.

package/dist/ui-utils/Modal.js

@@ -11,7 +11,7 @@ const ActionsOverlay_1 = require("./ActionsOverlay");
  * @param {ModalProps} props - The props for the Modal component.
  * @returns {JSX.Element} The Modal component.
  */
-const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, actions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, onOpen, onClose: globalOnClose }, }) => {
+const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, actions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, onOpen, onClose: globalOnClose }, providerId, debug, }) => {
     const isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
     const applyStyles = React.useCallback(() => {
         document.querySelectorAll(".modal-dialog").forEach((el) => {
@@ -27,10 +27,12 @@ const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, opt
     }, [width, styles]);
     React.useEffect(() => {
         if (shown) {
+            debug && console.log(`[Modal] Opened modal`, { id, providerId });
             applyStyles();
             onOpen === null || onOpen === void 0 ? void 0 : onOpen({ title, trackingId });
         }
         else {
+            debug && console.log(`[Modal] Closed modal`, { id, providerId });
             globalOnClose === null || globalOnClose === void 0 ? void 0 : globalOnClose({ title, trackingId });
         }
     }, [shown, width, defaultModalStyles]);

package/dist/ui-utils/UIUtilProvider.d.ts

@@ -52,8 +52,11 @@ type ModalId = (typeof modalId)[keyof typeof modalId];
  */
 export declare class UIUtilProvider extends React.PureComponent<{
     viewportDetect?: boolean;
+    id?: string;
+    debug?: boolean;
 }, IUIUtilProviderState> {
     private readonly loader;
+    private log;
     constructor(props: any);
     /**
      * Default modal utility methods.

package/dist/ui-utils/UIUtilProvider.js

@@ -63,6 +63,11 @@ class UIUtilProvider extends React.PureComponent {
     constructor(props) {
         super(props);
         this.loader = Loader_1.Loader.getInstance();
+        this.log = (message, data) => {
+            if (this.props.debug) {
+                console.log(`[UIUtilProvider:${this.props.id || "default"}] ${message}`, data || "");
+            }
+        };
         /**
          * Toggles the visibility of a modal instance.
          *
@@ -72,9 +77,11 @@ class UIUtilProvider extends React.PureComponent {
          */
         this.toggleModalInstance = (id, shown, destroyOnClose = false) => {
             var _a, _b;
+            this.log("toggleModalInstance", { id, shown, destroyOnClose });
             const { modal: { instances }, } = this.state;
             const instance = instances[id];
             if (!instance) {
+                this.log("toggleModalInstance: instance not found", { id });
                 return;
             }
             // Hide all other instances
@@ -99,12 +106,16 @@ class UIUtilProvider extends React.PureComponent {
          * @param {Content} [content] - The content to display in the overlay.
          */
         this.toggleModalOverlay = (id, content) => {
+            this.log("toggleModalOverlay", { id, hasContent: !!content });
             const { modal: { instances }, } = this.state;
             instances[id].overlay = content;
             this.setState({
                 modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
             });
         };
+        if (props.debug) {
+            console.log(`[UIUtilProvider:${props.id || "default"}] Initializing`, { id: props.id, debug: props.debug });
+        }
         this.state = Object.assign(Object.assign({}, defaultState), { modal: this.modalDefaults, customLoader: this.customLoaderDefaults, loader: this.loaderDefaults, prompt: this.promptDefaults });
     }
     /**
@@ -135,17 +146,29 @@ class UIUtilProvider extends React.PureComponent {
      * Default custom loader utility methods.
      */
     get customLoaderDefaults() {
-        return Object.assign(Object.assign({}, defaultState.customLoader), { show: () => this.setState({
-                customLoader: Object.assign(Object.assign({}, this.state.customLoader), { shown: true }),
-            }), hide: () => this.setState({
-                customLoader: Object.assign(Object.assign({}, this.state.customLoader), { shown: false }),
-            }) });
+        return Object.assign(Object.assign({}, defaultState.customLoader), { show: () => {
+                this.log("customLoader.show()");
+                this.setState({
+                    customLoader: Object.assign(Object.assign({}, this.state.customLoader), { shown: true }),
+                });
+            }, hide: () => {
+                this.log("customLoader.hide()");
+                this.setState({
+                    customLoader: Object.assign(Object.assign({}, this.state.customLoader), { shown: false }),
+                });
+            } });
     }
     /**
      * Default loader utility methods.
      */
     get loaderDefaults() {
-        return Object.assign(Object.assign({}, defaultState.loader), { show: () => this.loader.show(), hide: () => this.loader.hide() });
+        return Object.assign(Object.assign({}, defaultState.loader), { show: () => {
+                this.log("loader.show()");
+                this.loader.show();
+            }, hide: () => {
+                this.log("loader.hide()");
+                this.loader.hide();
+            } });
     }
     /**
      * Default prompt utility methods.
@@ -164,6 +187,7 @@ class UIUtilProvider extends React.PureComponent {
      */
     removeModalInstance(id) {
         var _a, _b;
+        this.log("removeModalInstance", { id });
         const { modal: { instances }, } = this.state;
         const instance = instances[id];
         (_b = (_a = instance.options).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -219,6 +243,7 @@ class UIUtilProvider extends React.PureComponent {
      * @returns {PopUp} The created modal instance.
      */
     createModal(id, options) {
+        this.log("createModal", { id, options });
         const { modal: { instances }, } = this.state;
         instances[id] = {
             options,
@@ -238,6 +263,10 @@ class UIUtilProvider extends React.PureComponent {
      * @returns {JSX.Element} The rendered component.
      */
     render() {
+        this.log("render", {
+            modalInstances: Object.keys(this.state.modal.instances),
+            customLoaderShown: this.state.customLoader.shown,
+        });
         return (React.createElement(exports.UIUtilContext.Provider, { value: this.state },
             this.props.children,
             this.props.viewportDetect && React.createElement(ViewportDetect_1.ViewportDetect, { onChange: viewport => this.setState({ viewport }) })));

package/dist/ui-utils/UIUtilRenderer.d.ts

@@ -15,4 +15,7 @@ export type UIUtilRendererProps = {
  * @param {UIUtilRendererProps} props - The props for the UIUtilRenderer component.
  * @returns {JSX.Element} The UIUtilRenderer component.
  */
-export declare const UIUtilRenderer: React.FC<UIUtilRendererProps>;
+export declare const UIUtilRenderer: React.FC<UIUtilRendererProps & {
+    id?: string;
+    debug?: boolean;
+}>;

package/dist/ui-utils/UIUtilRenderer.js

@@ -10,7 +10,8 @@ const Modal_1 = require("./Modal");
  * @param {UIUtilRendererProps} props - The props for the UIUtilRenderer component.
  * @returns {JSX.Element} The UIUtilRenderer component.
  */
-exports.UIUtilRenderer = React.memo(({ modalConfig = {} }) => {
+exports.UIUtilRenderer = React.memo(({ modalConfig = {}, id: providerId, debug }) => {
     const { modal: { instances }, } = (0, UIUtilProvider_1.useUIUtilContext)();
-    return (React.createElement(React.Fragment, null, Object.keys(instances).map(id => (React.createElement(Modal_1.default, { key: id, id: id, instance: instances[id], config: modalConfig })))));
+    debug && console.log(`[UIUtilRenderer${providerId ? `:${providerId}` : ""}] Rendering modals`, instances);
+    return (React.createElement(React.Fragment, null, Object.keys(instances).map(id => (React.createElement(Modal_1.default, { key: id, id: id, instance: instances[id], config: modalConfig, providerId: providerId, debug: debug })))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.79.0",
+  "version": "1.80.0",
   "description": "",
   "main": "dist/index",
   "scripts": {