revdev-components 0.120.0 → 0.122.0

package/build/backLayout/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { BackSidebarProps } from "src/backSidebar";
-interface Props {
+export interface BackLayoutProps {
     loading?: boolean;
     contentLoading?: boolean;
     header?: React.ReactNode;
@@ -14,5 +14,4 @@ interface Props {
     loadingClassName?: string;
     sidebarProps: Omit<BackSidebarProps, "shortMode">;
 }
-export declare const BackLayout: React.FC<Props>;
-export {};
+export declare const BackLayout: React.FC<BackLayoutProps>;

package/build/backSidebar/hooks.d.ts

@@ -1,2 +1 @@
-import { BackSidebarSubOption } from "./interfaces";
-export declare function useIsOptionActive(activePath: string, options: BackSidebarSubOption[]): boolean;
+export declare function useIsOptionActive(activePath: string, keys: string[]): boolean;

package/build/backSidebar/index.d.ts

@@ -1,12 +1,14 @@
 import React from "react";
 import { BackSidebarOption } from "./interfaces";
+import { AlfaNavigatorMapper } from "..";
 export * from "./interfaces";
 export interface BackSidebarProps {
     className?: string;
     options: BackSidebarOption[];
+    mapper: AlfaNavigatorMapper;
     top?: React.ReactNode;
     shortMode?: boolean;
-    activePath?: string;
-    defaultPath?: string;
+    activePathKey?: string;
+    defaultPathKey?: string;
 }
 export declare const BackSidebar: React.FC<BackSidebarProps>;

package/build/backSidebar/interfaces.d.ts

@@ -1,12 +1,6 @@
-import { PagePath } from "page-path";
 import { RegularIconName } from "src/icon";
-export interface BackSidebarSubOption {
+export interface BackSidebarOption<TKey extends string = string> {
     label: string;
     icon?: RegularIconName;
-    path: PagePath;
-}
-export interface BackSidebarOption {
-    label: string;
-    icon?: RegularIconName;
-    options?: BackSidebarSubOption[];
+    keys?: TKey[];
 }

package/build/backSidebar/menuItem/index.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
 import { BackSidebarOption } from "../interfaces";
+import { AlfaNavigatorMapper } from "src/interfaces";
 interface Props {
     option: BackSidebarOption;
-    activePath?: string;
+    activePathKey?: string;
+    mapper: AlfaNavigatorMapper;
 }
 export declare const BackSidebarMenuItem: React.FC<Props>;
 export {};

package/build/backSidebar/shortMenuItem/index.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
 import { BackSidebarOption } from "../interfaces";
+import { AlfaNavigatorMapper } from "src/index";
 interface Props {
     option: BackSidebarOption;
-    activePath?: string;
+    activePathKey?: string;
+    mapper: AlfaNavigatorMapper;
 }
 export declare const BackSidebarShortMenuItem: React.FC<Props>;
 export {};

package/build/backSidebar/subMenuItem/index.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { BackSidebarSubOption } from "../interfaces";
+import { AlfaNavigatorOption } from "src/interfaces";
 interface Props {
-    option: BackSidebarSubOption;
-    activePath?: string;
+    option: AlfaNavigatorOption;
+    isActive: boolean;
 }
 export declare const BackSidebarSubMenuItem: React.FC<Props>;
 export {};

package/build/index.js

@@ -5088,28 +5088,27 @@ var s$f = {"root":"index-module_root__AZ9HE","root__active":"index-module_root__
 
 var BackSidebarSubMenuItem = function (_a) {
     var _b;
-    var _c = _a.activePath, activePath = _c === void 0 ? "" : _c, option = _a.option;
+    var isActive = _a.isActive, option = _a.option;
     var icon = option.icon, label = option.label, path = option.path;
-    var isActive = path.isActive(activePath);
-    return (React.createElement(AppLink, { className: classNames(s$f.root, (_b = {}, _b[s$f.root__active] = isActive, _b)), href: path.build() },
+    return (React.createElement(AppLink, { className: classNames(s$f.root, (_b = {}, _b[s$f.root__active] = isActive, _b)), href: path },
         icon && React.createElement(RegularIcon, { name: icon }),
         React.createElement("span", null, label)));
 };
 
-function useIsOptionActive(activePath, options) {
+function useIsOptionActive(activePath, keys) {
     if (activePath === void 0) { activePath = ""; }
     return React.useMemo(function () {
-        return !!options.find(function (x) {
-            return x.path.isActive(activePath);
+        return !!keys.find(function (x) {
+            return x === activePath;
         });
-    }, [activePath, options]);
+    }, [activePath, keys]);
 }
 
 var BackSidebarMenuItem = function (_a) {
     var _b, _c;
-    var option = _a.option, activePath = _a.activePath;
-    var icon = option.icon, label = option.label, _d = option.options, options = _d === void 0 ? [] : _d;
-    var isActive = useIsOptionActive(activePath, options);
+    var option = _a.option, activePathKey = _a.activePathKey, mapper = _a.mapper;
+    var icon = option.icon, label = option.label, _d = option.keys, keys = _d === void 0 ? [] : _d;
+    var isActive = useIsOptionActive(activePathKey, keys);
     var _e = React.useState(isActive), open = _e[0], setOpen = _e[1];
     React.useEffect(function () {
         if (isActive) {
@@ -5124,8 +5123,11 @@ var BackSidebarMenuItem = function (_a) {
             icon && React.createElement(RegularIcon, { name: icon }),
             React.createElement("span", { className: s$g.title__label }, label),
             React.createElement(RegularIcon, { name: open ? "keyboard-arrow-down" : "keyboard-arrow-right" })),
-        React.createElement("div", { className: classNames(s$g.list, (_c = {}, _c[s$g.list__open] = open, _c)) }, options.map(function (x, i) {
-            return React.createElement(BackSidebarSubMenuItem, { key: i, option: x, activePath: activePath });
+        React.createElement("div", { className: classNames(s$g.list, (_c = {}, _c[s$g.list__open] = open, _c)) }, keys.map(function (x) {
+            var option = mapper[x];
+            if (typeof option === "object") {
+                return React.createElement(BackSidebarSubMenuItem, { key: x, option: option, isActive: x === activePathKey });
+            }
         }))));
 };
 
@@ -5133,9 +5135,9 @@ var s$e = {"root":"index-module_root__yMCtx","list":"index-module_list__Xr6Z5","
 
 var BackSidebarShortMenuItem = function (_a) {
     var _b;
-    var option = _a.option, activePath = _a.activePath;
-    var icon = option.icon, _c = option.options, options = _c === void 0 ? [] : _c;
-    var isActive = useIsOptionActive(activePath, options);
+    var option = _a.option, activePathKey = _a.activePathKey, mapper = _a.mapper;
+    var icon = option.icon, _c = option.keys, keys = _c === void 0 ? [] : _c;
+    var isActive = useIsOptionActive(activePathKey, keys);
     var _d = React.useState(isActive), open = _d[0], setOpen = _d[1];
     React.useEffect(function () {
         if (isActive) {
@@ -5147,8 +5149,11 @@ var BackSidebarShortMenuItem = function (_a) {
     }, [open]);
     return (React.createElement("div", { className: s$e.root },
         React.createElement("div", { className: classNames(s$e.master, (_b = {}, _b[s$e.master__active] = isActive, _b)), onClick: handleClick }, icon && React.createElement(RegularIcon, { name: icon })),
-        React.createElement("div", { className: classNames(s$e.list) }, options.map(function (x, i) {
-            return React.createElement(BackSidebarSubMenuItem, { key: i, option: x });
+        React.createElement("div", { className: classNames(s$e.list) }, keys.map(function (x) {
+            var option = mapper[x];
+            if (typeof option === "object") {
+                return React.createElement(BackSidebarSubMenuItem, { key: x, option: option, isActive: x === activePathKey });
+            }
         }))));
 };
 
@@ -5156,12 +5161,11 @@ var s$d = {"root":"index-module_root__r4Egx"};
 
 // https://www.einfosoft.com/templates/admin/spice/source/edit_booking.html#
 var BackSidebar = function (_a) {
-    var className = _a.className, options = _a.options, top = _a.top, shortMode = _a.shortMode, activePath = _a.activePath, defaultPath = _a.defaultPath;
-    var path = (activePath || "").replace("/", "") ? activePath : defaultPath;
+    var className = _a.className, options = _a.options, mapper = _a.mapper, top = _a.top, shortMode = _a.shortMode, activePathKey = _a.activePathKey, defaultPathKey = _a.defaultPathKey;
     return (React.createElement("div", { className: classNames(s$d.root, className) },
         top ? React.createElement("div", { className: classNames(s$d.top) }, top) : null,
         React.createElement("div", { className: s$d.menu }, options.map(function (option, i) {
-            return shortMode ? (React.createElement(BackSidebarShortMenuItem, { key: i, option: option, activePath: path })) : (React.createElement(BackSidebarMenuItem, { key: i, option: option, activePath: path }));
+            return shortMode ? (React.createElement(BackSidebarShortMenuItem, { key: i, mapper: mapper, option: option, activePathKey: activePathKey || defaultPathKey })) : (React.createElement(BackSidebarMenuItem, { key: i, mapper: mapper, option: option, activePathKey: activePathKey || defaultPathKey }));
         }))));
 };
 
@@ -5432,7 +5436,7 @@ var AlfaNavigator = function (_a) {
         return result;
     }, [root, options, isMobile, mapper, path]);
     return innerOptions.length ? (React.createElement("div", { className: classNames(s$3.root, className) }, innerOptions.map(function (_a, index) {
-        var href = _a.href, label = _a.label;
+        var href = _a.path, label = _a.label;
         return (React.createElement(React.Fragment, { key: index },
             index > 0 ? React.createElement("span", null, "\u203A") : null,
             React.createElement(AppLink, { className: classNames(s$3.step, stepClassName), href: href }, label)));

package/build/interfaces/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./form";
 export * from "./option";
 export * from "./control";
+export * from "./nav";

package/build/interfaces/nav.d.ts

@@ -0,0 +1,9 @@
+import { RegularIconName } from "src/icon";
+export interface AlfaNavigatorOption {
+    path: string;
+    label: string;
+    icon?: RegularIconName;
+}
+export type AlfaNavigatorMapper = Record<string, AlfaNavigatorOption | ((param: any) => AlfaNavigatorOption)>;
+export type AlfaNavigatorPathPart<TKey extends string = string> = TKey | [TKey, any];
+export type AlfaNavigatorPath<TKey extends string = string> = AlfaNavigatorPathPart<TKey>[];

package/build/navigator/index.d.ts

@@ -1,11 +1,5 @@
 import React from "react";
-export interface AlfaNavigatorOption {
-    href: string;
-    label: string;
-}
-export type AlfaNavigatorMapper = Record<string, AlfaNavigatorOption | ((param: any) => AlfaNavigatorOption)>;
-export type AlfaNavigatorPathPart<TKey extends string = string> = TKey | [TKey, any];
-export type AlfaNavigatorPath<TKey extends string = string> = AlfaNavigatorPathPart<TKey>[];
+import { AlfaNavigatorMapper, AlfaNavigatorOption, AlfaNavigatorPath, AlfaNavigatorPathPart } from "src/interfaces";
 export interface AlfaNavigatorChangeEvent {
     path?: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revdev-components",
-  "version": "0.120.0",
+  "version": "0.122.0",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "scripts": {