dry-ux 1.70.0 → 1.71.0

package/dist/enhanced-inputs/interface.d.ts

@@ -1,5 +1,11 @@
 import { InputHTMLAttributes } from "react";
+/**
+ * Type alias for validation, which can be a boolean or a string.
+ */
 export type IValidation = boolean | string;
+/**
+ * Interface representing a value validation with an optional message.
+ */
 export interface IValueValidation<T> {
     /**
      * The value to be validated.
@@ -10,6 +16,9 @@ export interface IValueValidation<T> {
      */
     message?: string;
 }
+/**
+ * Interface representing various validation rules for a field.
+ */
 export interface IValidations {
     /**
      * Indicates if the field is required.
@@ -80,6 +89,9 @@ export interface IValidations {
      */
     errorRef?: string;
 }
+/**
+ * Interface representing enhanced properties for an input field.
+ */
 export interface IEnhancedProps {
     /**
      * Validation rules for the field.
@@ -106,4 +118,7 @@ export interface IEnhancedProps {
      */
     validateOnChange?: boolean;
 }
+/**
+ * Type alias for input attributes, extending HTML input, select, and textarea attributes.
+ */
 export type InputAttributes = InputHTMLAttributes<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;

package/dist/helpers/logger.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Interface representing a logger with various logging methods.
+ */
 export interface ILogger {
     /**
      * Logs a message with the info level.
@@ -20,6 +23,18 @@ export interface ILogger {
      */
     warn(...message: any[]): void;
 }
+/**
+ * Initializes a logger factory with the specified path.
+ *
+ * @param {string} path - The endpoint to which log messages will be sent.
+ * @returns {Object} An object containing a useLogger method to create logger instances.
+ */
 export declare const initLoggerFactory: (path: string) => {
+    /**
+     * Creates a logger instance with the specified name.
+     *
+     * @param {string} name - The name of the logger.
+     * @returns {ILogger} The logger instance with methods to log messages at different levels.
+     */
     useLogger: (name: string) => ILogger;
 };

package/dist/helpers/logger.js

@@ -1,6 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.initLoggerFactory = void 0;
+/**
+ * Creates a logger instance with the specified path and name.
+ *
+ * @param {string} path - The endpoint to which log messages will be sent.
+ * @param {string} name - The name of the logger.
+ * @returns {ILogger} The logger instance with methods to log messages at different levels.
+ */
 const useLogger = (path, name) => {
     const convertMessage = (message) => message
         .map(m => {
@@ -35,7 +42,19 @@ const useLogger = (path, name) => {
         warn: (...message) => log("warn", message),
     };
 };
+/**
+ * Initializes a logger factory with the specified path.
+ *
+ * @param {string} path - The endpoint to which log messages will be sent.
+ * @returns {Object} An object containing a useLogger method to create logger instances.
+ */
 const initLoggerFactory = (path) => ({
+    /**
+     * Creates a logger instance with the specified name.
+     *
+     * @param {string} name - The name of the logger.
+     * @returns {ILogger} The logger instance with methods to log messages at different levels.
+     */
     useLogger: (name) => useLogger(path, name),
 });
 exports.initLoggerFactory = initLoggerFactory;

package/dist/provider.d.ts

@@ -1,9 +1,12 @@
 import * as React from "react";
 import { UIUtilRendererProps } from "./ui-utils/UIUtilRenderer";
+/**
+ * Props for the DryUXProvider component.
+ */
 interface IDryUXProviderProps {
     /**
      * Does not render the renderer for this provider. If this is set to true, then the renderer needs to be mounted
-     * by explicitly.
+     * explicitly.
      */
     noRenderer?: boolean;
     /**
@@ -14,7 +17,16 @@ interface IDryUXProviderProps {
      * If true, the viewport detection will be enabled.
      */
     viewportDetect?: boolean;
+    /**
+     * The children elements to be rendered within the provider.
+     */
     children: React.ReactNode;
 }
+/**
+ * DryUXProvider component that provides UI utilities and optionally renders a UIUtilRenderer.
+ *
+ * @param {IDryUXProviderProps} props - The props for the DryUXProvider component.
+ * @returns {JSX.Element} The DryUXProvider component.
+ */
 export declare const DryUXProvider: React.FC<IDryUXProviderProps>;
 export {};

package/dist/provider.js

@@ -4,6 +4,12 @@ exports.DryUXProvider = void 0;
 const React = require("react");
 const UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
 const UIUtilRenderer_1 = require("./ui-utils/UIUtilRenderer");
+/**
+ * DryUXProvider component that provides UI utilities and optionally renders a 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 },
     children,
     !noRenderer && React.createElement(UIUtilRenderer_1.UIUtilRenderer, Object.assign({}, rendererProps)))));

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

@@ -1,6 +1,16 @@
 import * as React from "react";
 import { Content, PopUpAction } from "./UIUtil.interface";
 import { Omit } from "react-bootstrap";
+/**
+ * ActionsOverlay component that displays a title, content, and a set of actions as buttons.
+ *
+ * @param {Object} props - The props for the ActionsOverlay component.
+ * @param {Content} props.title - The title to be displayed in the overlay.
+ * @param {Content} props.content - The content to be displayed in the overlay.
+ * @param {Function} props.hide - The function to hide the overlay.
+ * @param {Array<Omit<PopUpAction, "confirm">>} props.actions - The actions to be displayed as buttons.
+ * @returns {JSX.Element} The ActionsOverlay component.
+ */
 export declare const ActionsOverlay: React.FC<{
     title: Content;
     content: Content;

package/dist/ui-utils/ActionsOverlay.js

@@ -3,20 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionsOverlay = void 0;
 const React = require("react");
 const react_bootstrap_1 = require("react-bootstrap");
-const ActionsOverlay = ({ title, content, actions, hide }) => {
-    return (React.createElement("div", { style: { minWidth: 200 } },
-        React.createElement("div", { style: {
-                fontWeight: "bold",
-                fontSize: 18,
-                paddingLeft: 5,
-            } }, title),
-        React.createElement("hr", { style: { margin: 5 } }),
-        React.createElement("div", null, typeof content == "string" ? (React.createElement("h4", { className: "text-center", style: { margin: 10 } }, content)) : (content)),
-        React.createElement("hr", { style: { margin: 5 } }),
-        React.createElement("div", { style: { textAlign: "right" } }, actions.map((action, index) => (React.createElement(react_bootstrap_1.Button, { key: index, bsClass: `btn btn-${action.type} btn-sm`, style: { marginRight: 10 }, onClick: () => {
-                var _a;
-                (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
-                action.closeOnClick && hide();
-            } }, action.content))))));
-};
+/**
+ * ActionsOverlay component that displays a title, content, and a set of actions as buttons.
+ *
+ * @param {Object} props - The props for the ActionsOverlay component.
+ * @param {Content} props.title - The title to be displayed in the overlay.
+ * @param {Content} props.content - The content to be displayed in the overlay.
+ * @param {Function} props.hide - The function to hide the overlay.
+ * @param {Array<Omit<PopUpAction, "confirm">>} props.actions - The actions to be displayed as buttons.
+ * @returns {JSX.Element} The ActionsOverlay component.
+ */
+const ActionsOverlay = ({ title, content, actions, hide }) => (React.createElement("div", { style: { minWidth: 200 } },
+    React.createElement("div", { style: {
+            fontWeight: "bold",
+            fontSize: 18,
+            paddingLeft: 5,
+        } }, title),
+    React.createElement("hr", { style: { margin: 5 } }),
+    React.createElement("div", null, typeof content == "string" ? (React.createElement("h4", { className: "text-center", style: { margin: 10 } }, content)) : (content)),
+    React.createElement("hr", { style: { margin: 5 } }),
+    React.createElement("div", { style: { textAlign: "right" } }, actions.map((action, index) => (React.createElement(react_bootstrap_1.Button, { key: index, bsClass: `btn btn-${action.type} btn-sm`, style: { marginRight: 10 }, onClick: () => {
+            var _a;
+            (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+            action.closeOnClick && hide();
+        } }, action.content))))));
 exports.ActionsOverlay = ActionsOverlay;

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

@@ -1,18 +1,51 @@
 import * as React from "react";
 import { PopUpInstance, PopUpOptions } from "./UIUtil.interface";
 import "../styles/modal.css";
+/**
+ * Props for the Modal component.
+ */
 export type ModalProps = {
+    /**
+     * The id of the modal.
+     */
     id: string;
+    /**
+     * The instance of the PopUp.
+     */
     instance: PopUpInstance;
+    /**
+     * Configuration options for the modal.
+     */
     config: {
+        /**
+         * Custom styles for the modal.
+         */
         styles?: {
             [selector: string]: React.CSSProperties;
         };
+        /**
+         * If true, applies default modal styles.
+         */
         defaultModalStyles?: boolean;
+        /**
+         * If true, centers the modal vertically.
+         */
         centered?: boolean;
+        /**
+         * Callback function to be called when the modal is opened.
+         */
         onOpen?: (modal: Pick<PopUpOptions, "title" | "trackingId">) => void;
+        /**
+         * Callback function to be called when the modal is closed.
+         */
         onClose?: (modal: Pick<PopUpOptions, "title" | "trackingId">) => void;
     };
 };
+/**
+ * Modal component that renders a Bootstrap modal with custom configurations.
+ *
+ * @param {ModalProps} props - The props for the Modal component.
+ * @returns {JSX.Element} The Modal component.
+ */
 declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/ui-utils/Modal.js

@@ -5,6 +5,12 @@ const react_bootstrap_1 = require("react-bootstrap");
 require("../styles/modal.css");
 const classSet_1 = require("../helpers/classSet");
 const ActionsOverlay_1 = require("./ActionsOverlay");
+/**
+ * Modal component that renders a Bootstrap modal with custom configurations.
+ *
+ * @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 isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
     const applyStyles = React.useCallback(() => {

package/dist/ui-utils/UIUtil.interface.d.ts

@@ -1,5 +1,11 @@
 import { Omit } from "react-bootstrap";
+/**
+ * Type alias for content, which can be a JSX element or a string.
+ */
 export type Content = JSX.Element | string;
+/**
+ * Represents a PopUp with methods to control its visibility and content.
+ */
 export type PopUp = {
     /**
      * Hides the modal.
@@ -15,6 +21,7 @@ export type PopUp = {
     remove: () => void;
     /**
      * Updates the modal options.
+     * @param {Partial<PopUpOptions>} options - The options to update.
      */
     update: (options: Partial<PopUpOptions>) => void;
     /**
@@ -23,14 +30,21 @@ export type PopUp = {
     overlay: {
         /**
          * Shows the overlay.
+         * @param {Content} content - The content to display in the overlay.
          */
         show: (content: Content) => void;
         /**
          * Shows the overlay with yes/no buttons.
+         * @param {Content} content - The content to display in the overlay.
+         * @param {() => void} onYes - The function to call when the yes button is clicked.
+         * @param {() => void} [onNo] - The function to call when the no button is clicked.
          */
         showConfirm: (content: Content, onYes: () => void, onNo?: () => void) => void;
         /**
          * Shows the overlay with custom actions.
+         * @param {Content} title - The title of the overlay.
+         * @param {Content} content - The content to display in the overlay.
+         * @param {Omit<PopUpAction, "confirm">[]} actions - The actions to display in the overlay.
          */
         showActions: (title: Content, content: Content, actions: Omit<PopUpAction, "confirm">[]) => void;
         /**
@@ -39,14 +53,43 @@ export type PopUp = {
         hide: () => void;
     };
 };
+/**
+ * Type alias for button types.
+ */
 export type ButtonType = "primary" | "secondary" | "info" | "success" | "warning" | "danger";
+/**
+ * Represents an instance of a PopUp.
+ */
 export type PopUpInstance = {
+    /**
+     * The options for the PopUp.
+     */
     options: PopUpOptions;
+    /**
+     * Indicates whether the PopUp is shown.
+     */
     shown: boolean;
+    /**
+     * The overlay content for the PopUp.
+     */
     overlay?: Content;
+    /**
+     * Handles closing the PopUp.
+     * @param {string} id - The id of the PopUp.
+     * @param {boolean} shown - Indicates whether the PopUp is shown.
+     * @param {boolean} [destroyOnClose] - If true, the PopUp will be destroyed when closed.
+     */
     handleClose: (id: string, shown: boolean, destroyOnClose?: boolean) => void;
+    /**
+     * Toggles the overlay content for the PopUp.
+     * @param {string} id - The id of the PopUp.
+     * @param {Content} [content] - The content to display in the overlay.
+     */
     toggleOverlay: (id: string, content?: Content) => void;
 };
+/**
+ * Represents an action for a PopUp.
+ */
 export type PopUpAction = {
     /**
      * The content to display in the modal.
@@ -69,6 +112,9 @@ export type PopUpAction = {
      */
     confirm?: Content;
 };
+/**
+ * Represents the options for a PopUp.
+ */
 export type PopUpOptions = {
     /**
      * The content of the modal.
@@ -119,16 +165,21 @@ export type PopUpOptions = {
      */
     actions?: PopUpAction[];
 };
+/**
+ * Represents a utility for managing UI modals.
+ */
 export type UIUtilModal = {
     /**
      * Creates a non-unique modal.
-     * @param options The options for the modal.
+     * @param {PopUpOptions} options - The options for the modal.
+     * @returns {PopUp} The created PopUp.
      */
     show: (options: PopUpOptions) => PopUp;
     /**
-     * Creates a unique (by id) modal
-     * @param id The id of the modal.
-     * @param options The options for the modal.
+     * Creates a unique (by id) modal.
+     * @param {string} id - The id of the modal.
+     * @param {PopUpOptions} options - The options for the modal.
+     * @returns {PopUp} The created PopUp.
      */
     create: (id: string, options: PopUpOptions) => PopUp;
     /**
@@ -139,27 +190,35 @@ export type UIUtilModal = {
     };
     /**
      * Gets the current modal instance.
+     * @returns {PopUp} The current PopUp.
      */
     getCurrent: () => PopUp;
     /**
      * Shows an alert style modal.
-     * @param content The content to display in the modal.
+     * @param {Content} content - The content to display in the modal.
+     * @param {() => void} [onClose] - Function to call when the modal is closed.
+     * @returns {PopUp} The created PopUp.
      */
     showAlert: (content: Content, onClose?: PopUpOptions["onClose"]) => PopUp;
     /**
      * Shows a confirm style modal.
-     * @param options The options for the modal.
-     * @param onYes The function to call when the yes button is clicked.
-     * @param onNo The function to call when the no button is clicked.
+     * @param {Omit<PopUpOptions, "actions">} options - The options for the modal.
+     * @param {() => void} onYes - The function to call when the yes button is clicked.
+     * @param {() => void} [onNo] - The function to call when the no button is clicked.
+     * @returns {PopUp} The created PopUp.
      */
     showConfirm: (options: Omit<PopUpOptions, "actions">, onYes: () => void, onNo?: () => void) => PopUp;
     /**
      * Shows a modal with custom actions.
-     * @param options The options for the modal.
-     * @param actions The actions to display in the modal.
+     * @param {Omit<PopUpOptions, "actions">} options - The options for the modal.
+     * @param {PopUpAction[]} actions - The actions to display in the modal.
+     * @returns {PopUp} The created PopUp.
      */
     showActions: (options: Omit<PopUpOptions, "actions">, actions: PopUpAction[]) => PopUp;
 };
+/**
+ * Represents a loader utility.
+ */
 export interface IUIUtilLoader {
     /**
      * Status of the loader.
@@ -174,4 +233,7 @@ export interface IUIUtilLoader {
      */
     hide: () => void;
 }
+/**
+ * Type alias for UIUtilPrompt, which includes specific methods from UIUtilModal.
+ */
 export type UIUtilPrompt = Pick<UIUtilModal, "showConfirm" | "showActions" | "instances" | "getCurrent">;

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

@@ -2,15 +2,44 @@ import * as React from "react";
 import { Content, IUIUtilLoader, PopUp, PopUpAction, PopUpInstance, PopUpOptions, UIUtilModal, UIUtilPrompt } from "./UIUtil.interface";
 import "../types";
 import { CurrentViewport } from "./ViewportDetect";
+/**
+ * Interface representing the state of the UIUtilProvider.
+ */
 export interface IUIUtilProviderState {
+    /**
+     * Modal utility for managing modals.
+     */
     modal: UIUtilModal;
+    /**
+     * Prompt utility for managing prompts.
+     */
     prompt: UIUtilPrompt;
+    /**
+     * Custom loader utility.
+     */
     customLoader: IUIUtilLoader;
+    /**
+     * Loader utility with show and hide methods.
+     */
     loader: Pick<IUIUtilLoader, "show" | "hide">;
+    /**
+     * Current viewport information.
+     */
     viewport: CurrentViewport;
 }
+/**
+ * React context for UI utilities.
+ */
 export declare const UIUtilContext: React.Context<IUIUtilProviderState>;
+/**
+ * Hook to use the UIUtil context.
+ *
+ * @returns {IUIUtilProviderState} The current state of the UIUtil context.
+ */
 export declare const useUIUtilContext: () => IUIUtilProviderState;
+/**
+ * Object containing modal IDs.
+ */
 declare const modalId: {
     actions: string;
     confirm: string;
@@ -18,11 +47,17 @@ declare const modalId: {
     modal: string;
 };
 type ModalId = (typeof modalId)[keyof typeof modalId];
+/**
+ * UIUtilProvider component that provides UI utilities to its children.
+ */
 export declare class UIUtilProvider extends React.PureComponent<{
     viewportDetect?: boolean;
 }, IUIUtilProviderState> {
     private readonly loader;
     constructor(props: any);
+    /**
+     * Default modal utility methods.
+     */
     get modalDefaults(): {
         create: any;
         show: (options: PopUpOptions) => PopUp;
@@ -34,15 +69,24 @@ export declare class UIUtilProvider extends React.PureComponent<{
             [id: string]: PopUpInstance;
         };
     };
+    /**
+     * Default custom loader utility methods.
+     */
     get customLoaderDefaults(): {
         show: () => void;
         hide: () => void;
         shown: boolean;
     };
+    /**
+     * Default loader utility methods.
+     */
     get loaderDefaults(): {
         show: () => void;
         hide: () => void;
     };
+    /**
+     * Default prompt utility methods.
+     */
     get promptDefaults(): {
         getCurrent: () => PopUp;
         showConfirm: (options: import("react-bootstrap").Omit<PopUpOptions, "actions">, onYes: () => void, onNo?: () => void) => PopUp;
@@ -51,11 +95,47 @@ export declare class UIUtilProvider extends React.PureComponent<{
             [id: string]: PopUpInstance;
         };
     };
+    /**
+     * Toggles the visibility of a modal instance.
+     *
+     * @param {ModalId} id - The ID of the modal.
+     * @param {boolean} shown - Whether the modal should be shown.
+     * @param {boolean} [destroyOnClose=false] - Whether to destroy the modal on close.
+     */
     toggleModalInstance: PopUpInstance["handleClose"];
+    /**
+     * Toggles the overlay content of a modal instance.
+     *
+     * @param {ModalId} id - The ID of the modal.
+     * @param {Content} [content] - The content to display in the overlay.
+     */
     toggleModalOverlay: PopUpInstance["toggleOverlay"];
+    /**
+     * Removes a modal instance.
+     *
+     * @param {ModalId} id - The ID of the modal.
+     */
     removeModalInstance(id: ModalId): void;
+    /**
+     * Gets the current modal instance.
+     *
+     * @param {ModalId} id - The ID of the modal.
+     * @returns {PopUp} The current modal instance.
+     */
     getCurrentModal(id: ModalId): PopUp;
+    /**
+     * Creates a new modal instance.
+     *
+     * @param {ModalId} id - The ID of the modal.
+     * @param {PopUpOptions} options - The options for the modal.
+     * @returns {PopUp} The created modal instance.
+     */
     createModal(id: ModalId, options: PopUpOptions): PopUp;
+    /**
+     * Renders the UIUtilProvider component.
+     *
+     * @returns {JSX.Element} The rendered component.
+     */
     render(): React.JSX.Element;
 }
 export {};

package/dist/ui-utils/UIUtilProvider.js

@@ -6,6 +6,9 @@ require("../types");
 const Loader_1 = require("./Loader");
 const ActionsOverlay_1 = require("./ActionsOverlay");
 const ViewportDetect_1 = require("./ViewportDetect");
+/**
+ * Default state for the UIUtilProvider.
+ */
 const defaultState = {
     modal: {
         show: null,
@@ -33,19 +36,40 @@ const defaultState = {
     },
     viewport: new ViewportDetect_1.CurrentViewport(undefined),
 };
+/**
+ * React context for UI utilities.
+ */
 exports.UIUtilContext = React.createContext(defaultState);
+/**
+ * Hook to use the UIUtil context.
+ *
+ * @returns {IUIUtilProviderState} The current state of the UIUtil context.
+ */
 const useUIUtilContext = () => React.useContext(exports.UIUtilContext);
 exports.useUIUtilContext = useUIUtilContext;
+/**
+ * Object containing modal IDs.
+ */
 const modalId = {
     actions: "actions",
     confirm: "confirm",
     alert: "alert",
     modal: "modal",
 };
+/**
+ * UIUtilProvider component that provides UI utilities to its children.
+ */
 class UIUtilProvider extends React.PureComponent {
     constructor(props) {
         super(props);
         this.loader = Loader_1.Loader.getInstance();
+        /**
+         * Toggles the visibility of a modal instance.
+         *
+         * @param {ModalId} id - The ID of the modal.
+         * @param {boolean} shown - Whether the modal should be shown.
+         * @param {boolean} [destroyOnClose=false] - Whether to destroy the modal on close.
+         */
         this.toggleModalInstance = (id, shown, destroyOnClose = false) => {
             var _a, _b;
             const { modal: { instances }, } = this.state;
@@ -68,6 +92,12 @@ class UIUtilProvider extends React.PureComponent {
                 });
             }
         };
+        /**
+         * Toggles the overlay content of a modal instance.
+         *
+         * @param {ModalId} id - The ID of the modal.
+         * @param {Content} [content] - The content to display in the overlay.
+         */
         this.toggleModalOverlay = (id, content) => {
             const { modal: { instances }, } = this.state;
             instances[id].overlay = content;
@@ -77,6 +107,9 @@ class UIUtilProvider extends React.PureComponent {
         };
         this.state = Object.assign(Object.assign({}, defaultState), { modal: this.modalDefaults, customLoader: this.customLoaderDefaults, loader: this.loaderDefaults, prompt: this.promptDefaults });
     }
+    /**
+     * Default modal utility methods.
+     */
     get modalDefaults() {
         return Object.assign(Object.assign({}, defaultState.modal), { create: this.createModal.bind(this), show: (options) => this.createModal(modalId.modal, options), getCurrent: () => {
                 const { modal: { instances }, } = this.state;
@@ -98,6 +131,9 @@ class UIUtilProvider extends React.PureComponent {
                     },
                 ] })), showActions: (options, actions) => this.createModal(modalId.actions, Object.assign(Object.assign({}, options), { actions })) });
     }
+    /**
+     * 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 }),
@@ -105,9 +141,15 @@ class UIUtilProvider extends React.PureComponent {
                 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() });
     }
+    /**
+     * Default prompt utility methods.
+     */
     get promptDefaults() {
         return Object.assign(Object.assign({}, defaultState.prompt), { getCurrent: () => {
                 const { prompt: { instances }, } = this.state;
@@ -115,6 +157,11 @@ class UIUtilProvider extends React.PureComponent {
                 return this.getCurrentModal(id);
             } });
     }
+    /**
+     * Removes a modal instance.
+     *
+     * @param {ModalId} id - The ID of the modal.
+     */
     removeModalInstance(id) {
         var _a, _b;
         const { modal: { instances }, } = this.state;
@@ -125,6 +172,12 @@ class UIUtilProvider extends React.PureComponent {
             modal: Object.assign(Object.assign({}, this.state.modal), { instances }),
         });
     }
+    /**
+     * Gets the current modal instance.
+     *
+     * @param {ModalId} id - The ID of the modal.
+     * @returns {PopUp} The current modal instance.
+     */
     getCurrentModal(id) {
         return {
             show: () => this.toggleModalInstance(id, true),
@@ -158,6 +211,13 @@ class UIUtilProvider extends React.PureComponent {
             },
         };
     }
+    /**
+     * Creates a new modal instance.
+     *
+     * @param {ModalId} id - The ID of the modal.
+     * @param {PopUpOptions} options - The options for the modal.
+     * @returns {PopUp} The created modal instance.
+     */
     createModal(id, options) {
         const { modal: { instances }, } = this.state;
         instances[id] = {
@@ -172,6 +232,11 @@ class UIUtilProvider extends React.PureComponent {
         this.toggleModalInstance(id, true);
         return this.getCurrentModal(id);
     }
+    /**
+     * Renders the UIUtilProvider component.
+     *
+     * @returns {JSX.Element} The rendered component.
+     */
     render() {
         return (React.createElement(exports.UIUtilContext.Provider, { value: this.state },
             this.props.children,

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

@@ -1,6 +1,18 @@
 import * as React from "react";
 import { ModalProps } from "./Modal";
+/**
+ * Props for the UIUtilRenderer component.
+ */
 export type UIUtilRendererProps = {
+    /**
+     * Configuration for the modal.
+     */
     modalConfig?: ModalProps["config"];
 };
+/**
+ * UIUtilRenderer component that renders modals based on the UIUtil context.
+ *
+ * @param {UIUtilRendererProps} props - The props for the UIUtilRenderer component.
+ * @returns {JSX.Element} The UIUtilRenderer component.
+ */
 export declare const UIUtilRenderer: React.FC<UIUtilRendererProps>;

package/dist/ui-utils/UIUtilRenderer.js

@@ -4,6 +4,12 @@ exports.UIUtilRenderer = void 0;
 const React = require("react");
 const UIUtilProvider_1 = require("./UIUtilProvider");
 const Modal_1 = require("./Modal");
+/**
+ * UIUtilRenderer component that renders modals based on the UIUtil context.
+ *
+ * @param {UIUtilRendererProps} props - The props for the UIUtilRenderer component.
+ * @returns {JSX.Element} The UIUtilRenderer component.
+ */
 exports.UIUtilRenderer = React.memo(({ modalConfig = {} }) => {
     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 })))));

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

@@ -1,20 +1,60 @@
 import * as React from "react";
 import "../styles/viewport.css";
+/**
+ * Enum representing different viewport sizes.
+ */
 export declare enum Viewport {
+    /** Extra small viewport size. (phones with smaller display) */
     XS = "xs",
+    /** Small viewport size. (phones) */
     SM = "sm",
+    /** Medium viewport size. (tablets) */
     MD = "md",
+    /** Large viewport size. (desktops) */
     LG = "lg"
 }
+/**
+ * Class representing the current viewport.
+ */
 export declare class CurrentViewport {
     private _current;
+    /**
+     * Creates an instance of CurrentViewport.
+     * @param {Viewport} _current - The current viewport size.
+     */
     constructor(_current: Viewport);
+    /**
+     * Checks if the current viewport is extra small.
+     * @returns {boolean} True if the current viewport is extra small, otherwise false.
+     */
     get isXS(): boolean;
+    /**
+     * Checks if the current viewport is small.
+     * @returns {boolean} True if the current viewport is small, otherwise false.
+     */
     get isSM(): boolean;
+    /**
+     * Checks if the current viewport is medium.
+     * @returns {boolean} True if the current viewport is medium, otherwise false.
+     */
     get isMD(): boolean;
+    /**
+     * Checks if the current viewport is large.
+     * @returns {boolean} True if the current viewport is large, otherwise false.
+     */
     get isLG(): boolean;
+    /**
+     * Gets the current viewport size.
+     * @returns {Viewport} The current viewport size.
+     */
     get current(): Viewport;
 }
+/**
+ * Component that detects the current viewport and triggers a callback on change.
+ * @param {Object} props - The component props.
+ * @param {function(CurrentViewport): void} props.onChange - Callback function to handle viewport change.
+ * @returns {JSX.Element} The viewport detection component.
+ */
 export declare const ViewportDetect: React.FC<{
     onChange: (current: CurrentViewport) => void;
 }>;

package/dist/ui-utils/ViewportDetect.js

@@ -4,34 +4,75 @@ exports.ViewportDetect = exports.CurrentViewport = exports.Viewport = void 0;
 const React = require("react");
 require("../styles/viewport.css");
 const utilities_1 = require("../helpers/utilities");
+/**
+ * Enum representing different viewport sizes.
+ */
 var Viewport;
 (function (Viewport) {
+    /** Extra small viewport size. (phones with smaller display) */
     Viewport["XS"] = "xs";
+    /** Small viewport size. (phones) */
     Viewport["SM"] = "sm";
+    /** Medium viewport size. (tablets) */
     Viewport["MD"] = "md";
+    /** Large viewport size. (desktops) */
     Viewport["LG"] = "lg";
 })(Viewport || (exports.Viewport = Viewport = {}));
+/**
+ * Class representing the current viewport.
+ */
 class CurrentViewport {
+    /**
+     * Creates an instance of CurrentViewport.
+     * @param {Viewport} _current - The current viewport size.
+     */
     constructor(_current) {
         this._current = _current;
     }
+    /**
+     * Checks if the current viewport is extra small.
+     * @returns {boolean} True if the current viewport is extra small, otherwise false.
+     */
     get isXS() {
         return this._current === Viewport.XS;
     }
+    /**
+     * Checks if the current viewport is small.
+     * @returns {boolean} True if the current viewport is small, otherwise false.
+     */
     get isSM() {
         return this._current === Viewport.SM;
     }
+    /**
+     * Checks if the current viewport is medium.
+     * @returns {boolean} True if the current viewport is medium, otherwise false.
+     */
     get isMD() {
         return this._current === Viewport.MD;
     }
+    /**
+     * Checks if the current viewport is large.
+     * @returns {boolean} True if the current viewport is large, otherwise false.
+     */
     get isLG() {
         return this._current === Viewport.LG;
     }
+    /**
+     * Gets the current viewport size.
+     * @returns {Viewport} The current viewport size.
+     */
     get current() {
         return this._current;
     }
 }
 exports.CurrentViewport = CurrentViewport;
+/**
+ * Component that detects the visibility of a viewport element.
+ * @param {Object} props - The component props.
+ * @param {Viewport} props.viewport - The viewport size.
+ * @param {function(boolean): void} props.onVisibilityChange - Callback function to handle visibility change.
+ * @returns {JSX.Element} The detection element.
+ */
 const DetectionElement = ({ viewport, onVisibilityChange, }) => {
     const ref = React.useRef(null);
     const isVisible = (0, utilities_1.useIsVisible)(ref);
@@ -40,6 +81,12 @@ const DetectionElement = ({ viewport, onVisibilityChange, }) => {
     }, [isVisible]);
     return React.createElement("div", { ref: ref, className: `dry-visible-${viewport}` });
 };
+/**
+ * Component that detects the current viewport and triggers a callback on change.
+ * @param {Object} props - The component props.
+ * @param {function(CurrentViewport): void} props.onChange - Callback function to handle viewport change.
+ * @returns {JSX.Element} The viewport detection component.
+ */
 exports.ViewportDetect = React.memo(({ onChange }) => {
     const onVisibilityChange = (viewport, isVisible) => {
         if (isVisible) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.70.0",
+  "version": "1.71.0",
   "description": "",
   "main": "dist/index",
   "scripts": {
@@ -11,7 +11,8 @@
     "update:version": "npm version minor --no-git-tag-version",
     "prepub:npm": "npm run format && npm run build && npm run update:version",
     "publish:npm": "npm run prepub:npm && npm publish",
-    "pack": "npm run build && npm pack --pack-destination pack/"
+    "pack": "npm run build && npm pack --pack-destination pack/",
+    "docs": "typedoc --options typedoc.json && cd test && npm run build:test && cp -r proddist ../htmldocs/demo"
   },
   "repository": {
     "type": "git",
@@ -24,13 +25,16 @@
   "author": "Naved Rangwala",
   "license": "ISC",
   "devDependencies": {
-    "copyfiles": "^2.4.1",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2",
     "@types/react": "^17.0.0",
     "@types/react-bootstrap": "^0.32.25",
+    "copyfiles": "^2.4.1",
+    "jsdoc": "^4.0.4",
     "prettier": "^2.2.1",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
     "rimraf": "^3.0.2",
+    "typedoc": "^0.27.9",
+    "typedoc-plugin-markdown": "^4.4.2",
     "typescript": "*"
   },
   "dependencies": {