elseware-ui 2.20.4 → 2.20.6

package/build/components/navigation/breadcrumb/Breadcrumb.d.ts

@@ -2,10 +2,17 @@ export interface I_ItemType {
     title: string;
     href: string;
 }
+export interface RouteConfig {
+    path: string;
+    name: string;
+}
 export interface BreadcrumbProps {
     gap?: number;
     seperator?: string;
     data?: I_ItemType[];
+    routes?: RouteConfig[];
+    currentPath?: string;
+    navigate?: (path: string) => void;
     styles?: string;
 }
-export declare const Breadcrumb: ({ gap, seperator, data, styles }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Breadcrumb: ({ gap, seperator, data, routes, currentPath, navigate, styles, }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;

package/build/components/navigation/breadcrumb/BreadcrumbItem.d.ts

@@ -1,7 +1,9 @@
+import React from "react";
 export interface BreadcrumbItemProps {
     title: string;
     href: string;
     active: boolean;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }
-declare function BreadcrumbItem({ title, href, active }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ title, href, active, onClick, }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
 export default BreadcrumbItem;

package/build/index.es.js

@@ -39422,7 +39422,17 @@ var UnsavedChangesGuard = function (_a) {
 
 var Form = function (_a) {
     var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit, onChange = _a.onChange, _c = _a.warnOnUnsavedChanges, warnOnUnsavedChanges = _c === void 0 ? false : _c, onDirtyChange = _a.onDirtyChange;
-    return (jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) { return (jsxs(Form$1, { children: [jsx(UnsavedChangesGuard, { formik: formik, enabled: warnOnUnsavedChanges }), jsx(DirtyObserver, { formik: formik, onDirtyChange: onDirtyChange }), jsx(FormObserver, { formik: formik, onChange: onChange }), jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
+    return (jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: function (values, helpers) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, onSubmit(values)];
+                    case 1:
+                        _a.sent();
+                        helpers.resetForm({ values: values });
+                        return [2 /*return*/];
+                }
+            });
+        }); } }, { children: function (formik) { return (jsxs(Form$1, { children: [jsx(UnsavedChangesGuard, { formik: formik, enabled: warnOnUnsavedChanges }), jsx(DirtyObserver, { formik: formik, onDirtyChange: onDirtyChange }), jsx(FormObserver, { formik: formik, onChange: onChange }), jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
 };
 
 var Backdrop = function (_a) {
@@ -141606,34 +141616,84 @@ function MarkdownViewer(_a) {
 }
 
 function BreadcrumbItem(_a) {
-    var title = _a.title, _b = _a.href, href = _b === void 0 ? "#" : _b, _c = _a.active, active = _c === void 0 ? true : _c;
-    return (jsx("a", __assign$1({ href: href, className: classnames({
-            "text-lg font-semibold ": true,
-            "text-gray-400 hover:text-gray-600": !active,
+    var title = _a.title, _b = _a.href, href = _b === void 0 ? "#" : _b, _c = _a.active, active = _c === void 0 ? true : _c, onClick = _a.onClick;
+    return (jsx("a", __assign$1({ href: href, onClick: onClick, className: classnames({
+            "text-lg font-semibold": true,
+            "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
             "text-eui-light-800": active,
             "hover:underline": true,
             "transition-all ease-in-out": true,
         }) }, { children: title })));
 }
 
+// ----------------------
+// Utils
+// ----------------------
+var matchRoute = function (routePath, currentPath) {
+    var routeParts = routePath.split("/").filter(Boolean);
+    var pathParts = currentPath.split("/").filter(Boolean);
+    if (routeParts.length !== pathParts.length)
+        return false;
+    return routeParts.every(function (part, index) {
+        return part.startsWith(":") || part === pathParts[index];
+    });
+};
+var buildFromRoutes = function (routes, currentPath) {
+    var pathParts = currentPath.split("/").filter(Boolean);
+    var items = [];
+    var _loop_1 = function (i) {
+        var subPath = "/" + pathParts.slice(0, i).join("/");
+        var matched = routes.find(function (r) { return matchRoute(r.path, subPath); });
+        if (matched) {
+            items.push({
+                title: matched.name,
+                href: subPath || "/",
+            });
+        }
+    };
+    for (var i = 0; i <= pathParts.length; i++) {
+        _loop_1(i);
+    }
+    return items;
+};
+// ----------------------
+// Component
+// ----------------------
 var Breadcrumb = function (_a) {
     var _b;
-    var _c = _a.gap, gap = _c === void 0 ? 1 : _c, _d = _a.seperator, seperator = _d === void 0 ? "/" : _d, _e = _a.data, data = _e === void 0 ? [] : _e, styles = _a.styles;
-    var splitData = __spreadArray([], data, true);
+    var _c = _a.gap, gap = _c === void 0 ? 1 : _c, _d = _a.seperator, seperator = _d === void 0 ? "/" : _d, _e = _a.data, data = _e === void 0 ? [] : _e, routes = _a.routes, currentPath = _a.currentPath, navigate = _a.navigate, styles = _a.styles;
+    var pathname = currentPath ||
+        (typeof window !== "undefined" ? window.location.pathname : "/");
+    // 🔥 Decide source of truth
+    var resolvedData = useMemo$1(function () {
+        if (routes && routes.length > 0) {
+            return buildFromRoutes(routes, pathname);
+        }
+        return data;
+    }, [routes, data, pathname]);
     var childrenContent;
-    if (splitData.length > 0) {
-        var items = splitData.map(function (item, index) {
+    if (resolvedData.length > 0) {
+        var items = resolvedData.map(function (item, index) {
             var _a;
-            return (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { title: item.title, href: item.href, active: index == splitData.length - 1 }), index < splitData.length - 1 && (jsx("span", __assign$1({ className: classnames((_a = {
+            var isLast = index === resolvedData.length - 1;
+            var handleClick = function (e) {
+                if (isLast)
+                    return;
+                if (navigate) {
+                    e.preventDefault();
+                    navigate(item.href);
+                }
+            };
+            return (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { title: item.title, href: item.href, active: isLast, onClick: handleClick }), index < resolvedData.length - 1 && (jsx("span", __assign$1({ className: classnames((_a = {
                                 "text-lg font-semibold text-gray-500": true
                             },
                             _a["px-".concat(gap)] = gap,
                             _a)) }, { children: seperator })))] }, index));
         });
-        childrenContent = jsx("div", { children: items });
+        childrenContent = jsx("div", __assign$1({ className: "flex items-center" }, { children: items }));
     }
     return (jsx("div", __assign$1({ className: classnames((_b = {
-                "inline-flex gap-3": true
+                "inline-flex": true
             },
             _b["".concat(styles)] = styles,
             _b)) }, { children: childrenContent })));

package/build/index.js

@@ -39449,7 +39449,17 @@ var UnsavedChangesGuard = function (_a) {
 
 var Form = function (_a) {
     var _b = _a.initialValues, initialValues = _b === void 0 ? {} : _b, validationSchema = _a.validationSchema, enableReinitialize = _a.enableReinitialize, children = _a.children, styles = _a.styles, onSubmit = _a.onSubmit, onChange = _a.onChange, _c = _a.warnOnUnsavedChanges, warnOnUnsavedChanges = _c === void 0 ? false : _c, onDirtyChange = _a.onDirtyChange;
-    return (jsxRuntime.jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: onSubmit }, { children: function (formik) { return (jsxRuntime.jsxs(Form$1, { children: [jsxRuntime.jsx(UnsavedChangesGuard, { formik: formik, enabled: warnOnUnsavedChanges }), jsxRuntime.jsx(DirtyObserver, { formik: formik, onDirtyChange: onDirtyChange }), jsxRuntime.jsx(FormObserver, { formik: formik, onChange: onChange }), jsxRuntime.jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
+    return (jsxRuntime.jsx(Formik, __assign$1({ initialValues: initialValues, validationSchema: validationSchema, enableReinitialize: enableReinitialize, onSubmit: function (values, helpers) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, onSubmit(values)];
+                    case 1:
+                        _a.sent();
+                        helpers.resetForm({ values: values });
+                        return [2 /*return*/];
+                }
+            });
+        }); } }, { children: function (formik) { return (jsxRuntime.jsxs(Form$1, { children: [jsxRuntime.jsx(UnsavedChangesGuard, { formik: formik, enabled: warnOnUnsavedChanges }), jsxRuntime.jsx(DirtyObserver, { formik: formik, onDirtyChange: onDirtyChange }), jsxRuntime.jsx(FormObserver, { formik: formik, onChange: onChange }), jsxRuntime.jsx("div", __assign$1({ className: classnames(styles) }, { children: children }))] })); } })));
 };
 
 var Backdrop = function (_a) {
@@ -141633,34 +141643,84 @@ function MarkdownViewer(_a) {
 }
 
 function BreadcrumbItem(_a) {
-    var title = _a.title, _b = _a.href, href = _b === void 0 ? "#" : _b, _c = _a.active, active = _c === void 0 ? true : _c;
-    return (jsxRuntime.jsx("a", __assign$1({ href: href, className: classnames({
-            "text-lg font-semibold ": true,
-            "text-gray-400 hover:text-gray-600": !active,
+    var title = _a.title, _b = _a.href, href = _b === void 0 ? "#" : _b, _c = _a.active, active = _c === void 0 ? true : _c, onClick = _a.onClick;
+    return (jsxRuntime.jsx("a", __assign$1({ href: href, onClick: onClick, className: classnames({
+            "text-lg font-semibold": true,
+            "text-gray-400 hover:text-gray-600 cursor-pointer": !active,
             "text-eui-light-800": active,
             "hover:underline": true,
             "transition-all ease-in-out": true,
         }) }, { children: title })));
 }
 
+// ----------------------
+// Utils
+// ----------------------
+var matchRoute = function (routePath, currentPath) {
+    var routeParts = routePath.split("/").filter(Boolean);
+    var pathParts = currentPath.split("/").filter(Boolean);
+    if (routeParts.length !== pathParts.length)
+        return false;
+    return routeParts.every(function (part, index) {
+        return part.startsWith(":") || part === pathParts[index];
+    });
+};
+var buildFromRoutes = function (routes, currentPath) {
+    var pathParts = currentPath.split("/").filter(Boolean);
+    var items = [];
+    var _loop_1 = function (i) {
+        var subPath = "/" + pathParts.slice(0, i).join("/");
+        var matched = routes.find(function (r) { return matchRoute(r.path, subPath); });
+        if (matched) {
+            items.push({
+                title: matched.name,
+                href: subPath || "/",
+            });
+        }
+    };
+    for (var i = 0; i <= pathParts.length; i++) {
+        _loop_1(i);
+    }
+    return items;
+};
+// ----------------------
+// Component
+// ----------------------
 var Breadcrumb = function (_a) {
     var _b;
-    var _c = _a.gap, gap = _c === void 0 ? 1 : _c, _d = _a.seperator, seperator = _d === void 0 ? "/" : _d, _e = _a.data, data = _e === void 0 ? [] : _e, styles = _a.styles;
-    var splitData = __spreadArray([], data, true);
+    var _c = _a.gap, gap = _c === void 0 ? 1 : _c, _d = _a.seperator, seperator = _d === void 0 ? "/" : _d, _e = _a.data, data = _e === void 0 ? [] : _e, routes = _a.routes, currentPath = _a.currentPath, navigate = _a.navigate, styles = _a.styles;
+    var pathname = currentPath ||
+        (typeof window !== "undefined" ? window.location.pathname : "/");
+    // 🔥 Decide source of truth
+    var resolvedData = React.useMemo(function () {
+        if (routes && routes.length > 0) {
+            return buildFromRoutes(routes, pathname);
+        }
+        return data;
+    }, [routes, data, pathname]);
     var childrenContent;
-    if (splitData.length > 0) {
-        var items = splitData.map(function (item, index) {
+    if (resolvedData.length > 0) {
+        var items = resolvedData.map(function (item, index) {
             var _a;
-            return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { title: item.title, href: item.href, active: index == splitData.length - 1 }), index < splitData.length - 1 && (jsxRuntime.jsx("span", __assign$1({ className: classnames((_a = {
+            var isLast = index === resolvedData.length - 1;
+            var handleClick = function (e) {
+                if (isLast)
+                    return;
+                if (navigate) {
+                    e.preventDefault();
+                    navigate(item.href);
+                }
+            };
+            return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { title: item.title, href: item.href, active: isLast, onClick: handleClick }), index < resolvedData.length - 1 && (jsxRuntime.jsx("span", __assign$1({ className: classnames((_a = {
                                 "text-lg font-semibold text-gray-500": true
                             },
                             _a["px-".concat(gap)] = gap,
                             _a)) }, { children: seperator })))] }, index));
         });
-        childrenContent = jsxRuntime.jsx("div", { children: items });
+        childrenContent = jsxRuntime.jsx("div", __assign$1({ className: "flex items-center" }, { children: items }));
     }
     return (jsxRuntime.jsx("div", __assign$1({ className: classnames((_b = {
-                "inline-flex gap-3": true
+                "inline-flex": true
             },
             _b["".concat(styles)] = styles,
             _b)) }, { children: childrenContent })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "2.20.4",
+  "version": "2.20.6",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "keywords": [