dry-ux 1.52.0 → 1.54.0

package/dist/helpers/utilities.js

@@ -111,8 +111,15 @@ const fnWithAuthCheck = (fn, authCheckUrl, authRedirectUrl) => fetch(authCheckUr
     }
 });
 exports.fnWithAuthCheck = fnWithAuthCheck;
-exports.StorageUtils = {
-    isStorageAvailable: function () {
+/**
+ * Utility class for storage-related operations.
+ */
+class StorageUtils {
+    /**
+     * Checks if the storage is available.
+     * @returns A boolean indicating if the storage is available.
+     */
+    static isStorageAvailable() {
         let available = typeof Storage !== "undefined";
         try {
             if (available)
@@ -122,8 +129,14 @@ exports.StorageUtils = {
             available = false;
         }
         return available;
-    },
-};
+    }
+}
+exports.StorageUtils = StorageUtils;
+/**
+ * Converts a string to a hash code.
+ * @param input The string to convert.
+ * @returns The hash code of the input string.
+ */
 const toHashCode = (input) => {
     let hash = 0;
     if (input.length === 0)
@@ -135,6 +148,11 @@ const toHashCode = (input) => {
     return hash;
 };
 exports.toHashCode = toHashCode;
+/**
+ * Inserts a URL parameter.
+ * @param key The key of the parameter.
+ * @param value The value of the parameter.
+ */
 const insertUrlParam = (key, value) => {
     if (history.pushState) {
         let searchParams = new URLSearchParams(window.location.search);
@@ -149,8 +167,16 @@ const insertUrlParam = (key, value) => {
     }
 };
 exports.insertUrlParam = insertUrlParam;
+/**
+ * Inserts multiple URL parameters.
+ * @param params An object containing key-value pairs of parameters.
+ */
 const insertUrlParams = (params) => Object.keys(params).forEach(key => (0, exports.insertUrlParam)(key, params[key]));
 exports.insertUrlParams = insertUrlParams;
+/**
+ * Retrieves URL parameters as an object.
+ * @returns An object containing the URL parameters.
+ */
 const getUrlParams = () => {
     const searchParams = new URLSearchParams(window.location.search);
     const params = {};
@@ -160,6 +186,9 @@ const getUrlParams = () => {
     return params;
 };
 exports.getUrlParams = getUrlParams;
+/**
+ * A class representing a deferred promise.
+ */
 class Deferred {
     constructor() {
         this.promise = new Promise((resolve, reject) => {
@@ -167,14 +196,26 @@ class Deferred {
             this._reject = reject;
         });
     }
+    /**
+     * Resolves the promise with the given result.
+     */
     get resolve() {
         return this._resolve;
     }
+    /**
+     * Rejects the promise with the given error.
+     */
     get reject() {
         return this._reject;
     }
 }
 exports.Deferred = Deferred;
+/**
+ * Parses a JSON string and returns the corresponding object.
+ * @param json The JSON string to parse.
+ * @param errorValue The value to return if parsing fails.
+ * @returns The parsed object or the error value.
+ */
 const tryParseJson = (json, errorValue = {}) => {
     try {
         return JSON.parse(json);
@@ -184,6 +225,11 @@ const tryParseJson = (json, errorValue = {}) => {
     }
 };
 exports.tryParseJson = tryParseJson;
+/**
+ * Hook to check if an element is visible in the viewport.
+ * @param ref The reference to the element.
+ * @returns A boolean indicating if the element is visible.
+ */
 const useIsVisible = (ref) => {
     const [isIntersecting, setIntersecting] = React.useState(false);
     React.useEffect(() => {
@@ -196,13 +242,32 @@ const useIsVisible = (ref) => {
     return isIntersecting;
 };
 exports.useIsVisible = useIsVisible;
+/**
+ * Hook to publish and subscribe to custom events.
+ * @returns An object containing the usePub and useSub hooks.
+ */
 const usePubSub = () => {
     const getEventName = (event) => `dry-ux-event-${event}`;
+    /**
+     * Publishes a custom event with the specified name and data.
+     * @template TName The type of the event name.
+     * @template TPayload The type of the event payload.
+     * @param event The name of the event to publish.
+     * @param data The data to include in the event payload.
+     */
     const usePub = () => (event, data) => {
         document.dispatchEvent(new CustomEvent(getEventName(event), {
             detail: data,
         }));
     };
+    /**
+     * Subscribes to a custom event with the specified name and calls the callback when the event is triggered.
+     * @template TName The type of the event name.
+     * @template TPayload The type of the event payload.
+     * @param event The name of the event to subscribe to.
+     * @param callback The function to call when the event is triggered.
+     * @returns A function to unsubscribe from the event.
+     */
     const useSub = (event, callback) => {
         const controller = new AbortController();
         const unsubscribe = () => controller.abort();

package/dist/index.d.ts

@@ -14,3 +14,6 @@ export { ErrorScreen } from "./error/ErrorScreen";
 export { Loader } from "./ui-utils/Loader";
 export { Spinner } from "./ui-utils/Spinner";
 export { RenderWhenVisible } from "./ui-utils/RenderWhenVisible";
+export { Validation, Element } from "./enhanced-inputs/Validaition";
+export * from "./enhanced-inputs/HTMLInputs";
+export * from "./enhanced-inputs/interface";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
+exports.Element = exports.Validation = exports.RenderWhenVisible = exports.Spinner = exports.Loader = exports.ErrorScreen = exports.ErrorBoundary = exports.DajaxiceProxy = exports.unflatten = exports.flatten = exports.classSet = exports.DryUXProvider = exports.Money = exports.DryUXRenderer = exports.DryUXContext = exports.useDryUxContext = void 0;
 var UIUtilProvider_1 = require("./ui-utils/UIUtilProvider");
 Object.defineProperty(exports, "useDryUxContext", { enumerable: true, get: function () { return UIUtilProvider_1.useUIUtilContext; } });
 Object.defineProperty(exports, "DryUXContext", { enumerable: true, get: function () { return UIUtilProvider_1.UIUtilContext; } });
@@ -44,3 +44,8 @@ var Spinner_1 = require("./ui-utils/Spinner");
 Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
 var RenderWhenVisible_1 = require("./ui-utils/RenderWhenVisible");
 Object.defineProperty(exports, "RenderWhenVisible", { enumerable: true, get: function () { return RenderWhenVisible_1.RenderWhenVisible; } });
+var Validaition_1 = require("./enhanced-inputs/Validaition");
+Object.defineProperty(exports, "Validation", { enumerable: true, get: function () { return Validaition_1.Validation; } });
+Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return Validaition_1.Element; } });
+__exportStar(require("./enhanced-inputs/HTMLInputs"), exports);
+__exportStar(require("./enhanced-inputs/interface"), exports);

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

@@ -1,11 +1,31 @@
+/**
+ * A singleton class that manages the display of a fullscreen loader spinner.
+ */
 export declare class Loader {
     private readonly spinnerStyles;
     private readonly elementId;
     private static instance;
     private constructor();
+    /**
+     * Returns the singleton instance of the Loader class.
+     * @returns The Loader instance.
+     */
     static getInstance(): Loader;
+    /**
+     * Gets the loader element from the DOM.
+     * @returns The loader element.
+     */
     get element(): HTMLElement;
+    /**
+     * Shows the loader by setting its visibility to visible.
+     */
     show(): void;
+    /**
+     * Hides the loader by setting its visibility to hidden.
+     */
     hide(): void;
+    /**
+     * Adds the loader elements to the DOM if they do not already exist.
+     */
     private addElementsIfNotExists;
 }

package/dist/ui-utils/Loader.js

@@ -2,29 +2,49 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
 const SpinnerStyles_1 = require("./SpinnerStyles");
+/**
+ * A singleton class that manages the display of a fullscreen loader spinner.
+ */
 class Loader {
     constructor() {
         this.spinnerStyles = SpinnerStyles_1.SpinnerStyles.getInstance();
         this.elementId = "dry-ux-loader";
     }
+    /**
+     * Returns the singleton instance of the Loader class.
+     * @returns The Loader instance.
+     */
     static getInstance() {
         if (!Loader.instance) {
             Loader.instance = new Loader();
         }
         return Loader.instance;
     }
+    /**
+     * Gets the loader element from the DOM.
+     * @returns The loader element.
+     */
     get element() {
         return document.getElementById(this.elementId);
     }
+    /**
+     * Shows the loader by setting its visibility to visible.
+     */
     show() {
         this.addElementsIfNotExists();
         this.element.style.visibility = "visible";
     }
+    /**
+     * Hides the loader by setting its visibility to hidden.
+     */
     hide() {
         if (this.element) {
             this.element.style.visibility = "hidden";
         }
     }
+    /**
+     * Adds the loader elements to the DOM if they do not already exist.
+     */
     addElementsIfNotExists() {
         this.spinnerStyles.add();
         if (!this.element) {

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

@@ -10,6 +10,7 @@ export interface IModalProps {
         };
         defaultModalStyles?: boolean;
         setBackdropHeight?: boolean;
+        centered?: boolean;
     };
 }
 declare const Modal: React.FC<IModalProps & {

package/dist/ui-utils/Modal.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
 const react_bootstrap_1 = require("react-bootstrap");
-const Modal = React.memo(({ handleClose, shown, options: { content, footerContent, cssClass, closeBtn, title, width, onClose, titleCloseBtn = true }, config: { defaultModalStyles = false, styles = {}, setBackdropHeight = true }, }) => {
+const Modal = React.memo(({ handleClose, shown, options: { content, footerContent, cssClass, closeBtn, title, width, onClose, titleCloseBtn = true, centered }, config: { defaultModalStyles = false, styles = {}, setBackdropHeight = true, centered: globalCentered }, }) => {
+    const isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
     const applyStyles = React.useCallback(() => {
         document.querySelectorAll(".modal-dialog").forEach((el) => {
             el.style.width = typeof width == "number" ? `${width}px` : width;
@@ -12,6 +13,13 @@ const Modal = React.memo(({ handleClose, shown, options: { content, footerConten
                 el.querySelectorAll(".modal-header").forEach((el) => (el.style.display = "block"));
                 el.querySelectorAll(".modal-title").forEach((el) => (el.style.marginTop = "0"));
             }
+            if (isCentered) {
+                el.style.position = "absolute";
+                el.style.transform = "translate(-50%, -50%)";
+                el.style.top = "50%";
+                el.style.left = "50%";
+                el.style.marginTop = "unset";
+            }
         });
         document.querySelectorAll("[role=dialog]").forEach((el) => (el.style.opacity = "1"));
         if (setBackdropHeight) {
@@ -26,24 +34,24 @@ const Modal = React.memo(({ handleClose, shown, options: { content, footerConten
                 });
             });
         });
-    }, [width, defaultModalStyles]);
+    }, [width, defaultModalStyles, isCentered, styles, setBackdropHeight]);
     React.useEffect(() => {
         if (shown) {
             applyStyles();
         }
     }, [shown, width, defaultModalStyles]);
-    const hide = () => {
+    const onHide = () => {
         handleClose();
         onClose && onClose();
     };
     const contentToRender = typeof content == "string" ? React.createElement("div", { dangerouslySetInnerHTML: { __html: content } }) : content;
     const showFooter = closeBtn || footerContent;
-    return (React.createElement(react_bootstrap_1.Modal, { onHide: hide, show: shown, animation: true, autoFocus: true, keyboard: false, className: cssClass, backdropStyle: { zIndex: 1040, opacity: 0.5 }, backdrop: "static" },
-        !!title && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: titleCloseBtn, onHide: hide },
+    return (React.createElement(react_bootstrap_1.Modal, { onHide: onHide, show: shown, animation: true, autoFocus: true, keyboard: false, className: cssClass, backdropStyle: { zIndex: 1040, opacity: 0.5 }, backdrop: "static" },
+        !!title && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: titleCloseBtn, onHide: onHide },
             React.createElement(react_bootstrap_1.Modal.Title, null, title))),
         React.createElement(react_bootstrap_1.Modal.Body, null, contentToRender),
         showFooter && (React.createElement(react_bootstrap_1.Modal.Footer, null,
             footerContent,
-            closeBtn && (React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: hide }, "Close"))))));
+            closeBtn && (React.createElement(react_bootstrap_1.Button, { bsClass: "btn btn-danger", onClick: onHide }, "Close"))))));
 });
 exports.default = Modal;

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

@@ -1,4 +1,11 @@
 import * as React from "react";
+/**
+ * A React component that renders its children only when they become visible in the viewport.
+ * @param children The JSX element to render when visible.
+ * @param onLoad An optional callback function to call when the children are loaded.
+ * @param minHeight An optional minimum height for the container to ensure visibility.
+ * @returns A JSX element that conditionally renders its children based on visibility.
+ */
 export declare const RenderWhenVisible: React.FC<{
     children: JSX.Element;
     onLoad?: () => void;

package/dist/ui-utils/RenderWhenVisible.js

@@ -3,6 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderWhenVisible = void 0;
 const React = require("react");
 const utilities_1 = require("../helpers/utilities");
+/**
+ * A React component that renders its children only when they become visible in the viewport.
+ * @param children The JSX element to render when visible.
+ * @param onLoad An optional callback function to call when the children are loaded.
+ * @param minHeight An optional minimum height for the container to ensure visibility.
+ * @returns A JSX element that conditionally renders its children based on visibility.
+ */
 exports.RenderWhenVisible = React.memo(({ children, minHeight, onLoad }) => {
     const [isLoaded, setIsLoaded] = React.useState(false);
     const ref = React.useRef(null);

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

@@ -1,2 +1,7 @@
 import * as React from "react";
+/**
+ * A React component that renders a spinner.
+ * The spinner styles are added when the component is mounted.
+ * @returns A JSX element representing the spinner.
+ */
 export declare const Spinner: React.MemoExoticComponent<() => React.JSX.Element>;

package/dist/ui-utils/Spinner.js

@@ -3,6 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = void 0;
 const React = require("react");
 const SpinnerStyles_1 = require("./SpinnerStyles");
+/**
+ * A React component that renders a spinner.
+ * The spinner styles are added when the component is mounted.
+ * @returns A JSX element representing the spinner.
+ */
 exports.Spinner = React.memo(() => {
     React.useEffect(() => {
         const spinnerStyles = SpinnerStyles_1.SpinnerStyles.getInstance();

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

@@ -49,6 +49,10 @@ export type PopUpOptions = {
      * If true, the modal will be destroyed when it is closed.
      */
     destroyOnClose?: boolean;
+    /**
+     * If true, the modal will be centered vertically.
+     */
+    centered?: boolean;
 };
 export type ButtonType = "primary" | "info" | "success" | "warning" | "danger";
 export type PopUpAction = {

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "dry-ux",
-  "version": "1.52.0",
+  "version": "1.54.0",
   "description": "",
   "main": "dist/index",
   "scripts": {
-    "build": "rimraf dist/ && tsc",
+    "copy-css": "copyfiles -u 2 \"./src/enhanced-inputs/styles.css\" \"./dist/enhanced-inputs\"",
+    "build": "rimraf dist/ && tsc && npm run copy-css",
     "watch": "rimraf dist/ && tsc --watch",
     "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "update:version": "npm version minor --no-git-tag-version",
@@ -23,6 +24,7 @@
   "author": "Naved Rangwala",
   "license": "ISC",
   "devDependencies": {
+    "copyfiles": "^2.4.1",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
     "@types/react": "^17.0.0",