revdev-components 0.149.0 → 0.150.0

package/build/backSidebar/index.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { BackSidebarOption } from "./interfaces";
-import { AlfaNavigatorMapper } from "..";
+import { AlfaBreadcrumbMapper } from "..";
 export * from "./interfaces";
 export interface BackSidebarProps {
     className?: string;
     options: BackSidebarOption[];
-    mapper: AlfaNavigatorMapper;
+    mapper: AlfaBreadcrumbMapper;
     top?: React.ReactNode;
     shortMode?: boolean;
     activePathKey?: string;

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

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

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

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

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

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

package/build/breadcrumb/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { AlfaBreadcrumbMapper, AlfaBreadcrumbOption, AlfaBreadcrumbPath, AlfaBreadcrumbPathPart } from "src/interfaces";
+export interface AlfaNavigatorChangeEvent {
+    path?: string[];
+}
+export interface AlfaBreadcrumbProps {
+    root?: AlfaBreadcrumbOption | AlfaBreadcrumbPathPart;
+    options?: AlfaBreadcrumbOption[];
+    className?: string;
+    stepClassName?: string;
+    isMobile?: boolean;
+    mapper?: AlfaBreadcrumbMapper;
+    path?: AlfaBreadcrumbPath;
+    onChange?: (e: AlfaNavigatorChangeEvent) => void;
+    separator?: React.ReactNode;
+    maxStepTextLength?: number;
+}
+export declare const AlfaBreadcrumb: React.FC<AlfaBreadcrumbProps>;

package/build/index.d.ts

@@ -22,7 +22,7 @@ export * from "./headerActionPanel";
 export * from "./iconDivision";
 export * from "./tooltip";
 export * from "./popoverSelect";
-export * from "./navigator";
+export * from "./breadcrumb";
 export * from "./attributor";
 export * from "./optionsAutocomplete";
 export * from "./button";

package/build/index.js

@@ -5133,7 +5133,7 @@ var s$d = {"root":"index-module_root__AZ9HE","root__active":"index-module_root__
 var BackSidebarSubMenuItem = function (_a) {
     var _b;
     var isActive = _a.isActive, option = _a.option;
-    var icon = option.icon, label = option.label, path = option.path;
+    var icon = option.icon, label = option.label, path = option.href;
     return (React.createElement(AppLink, { className: classNames(s$d.root, (_b = {}, _b[s$d.root__active] = isActive, _b)), href: path },
         icon && React.createElement(RegularIcon, { name: icon }),
         React.createElement("span", null, label)));
@@ -5380,7 +5380,16 @@ var HeaderActionPanel = function (_a) {
     }))) : null;
 };
 
-var s$3 = {"root":"index-module_root__t3gxi"};
+var s$3 = {"root":"index-module_root__AUcgm","separator":"index-module_separator__eiPxa","step":"index-module_step__Qwm7C","image":"index-module_image__kUPE1"};
+
+var TextUtil = {
+    maxTextEllipsis: function (text, maxLength) {
+        if (text.length <= maxLength) {
+            return text;
+        }
+        return text.slice(0, maxLength - 3) + "...";
+    },
+};
 
 function getNavOption(mapper, part) {
     var _a = Array.isArray(part) ? part : [part, undefined], key = _a[0], param = _a[1];
@@ -5392,8 +5401,8 @@ function getNavOption(mapper, part) {
     }
     return undefined;
 }
-var AlfaNavigator = function (_a) {
-    var className = _a.className, stepClassName = _a.stepClassName, root = _a.root, _b = _a.options, options = _b === void 0 ? [] : _b, isMobile = _a.isMobile, mapper = _a.mapper, path = _a.path, onChange = _a.onChange;
+var AlfaBreadcrumb = function (_a) {
+    var className = _a.className, stepClassName = _a.stepClassName, root = _a.root, _b = _a.options, options = _b === void 0 ? [] : _b, isMobile = _a.isMobile, mapper = _a.mapper, path = _a.path, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? "/" : _c, _d = _a.maxStepTextLength, maxStepTextLength = _d === void 0 ? 30 : _d;
     var isMount = useDidMount();
     React.useEffect(function () {
         if (isMount) {
@@ -5442,10 +5451,13 @@ 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.path, label = _a.label;
-        return (React.createElement(React.Fragment, { key: href },
-            index > 0 ? React.createElement("span", null, "\u203A") : null,
-            React.createElement(AppLink, { className: classNames(s$3.step, stepClassName), href: href }, label)));
+        var href = _a.href, label = _a.label, imageUrl = _a.imageUrl;
+        var labelContent = (React.createElement(React.Fragment, null,
+            imageUrl && React.createElement("img", { className: s$3.image, src: imageUrl, alt: label }),
+            React.createElement("span", null, TextUtil.maxTextEllipsis(label, maxStepTextLength))));
+        return (React.createElement(React.Fragment, { key: href || label || index },
+            index > 0 ? React.createElement("span", { className: s$3.separator }, separator) : null,
+            href ? (React.createElement(AppLink, { className: classNames(s$3.step, s$3.link, stepClassName), href: href, title: label }, labelContent)) : (React.createElement("span", { className: classNames(s$3.step, s$3.label, stepClassName), title: label }, labelContent))));
     }))) : null;
 };
 
@@ -5539,7 +5551,7 @@ var AudioPlayer = function (_a) {
 };
 
 exports.AlfaAttributor = AlfaAttributor;
-exports.AlfaNavigator = AlfaNavigator;
+exports.AlfaBreadcrumb = AlfaBreadcrumb;
 exports.AppForm = AppForm;
 exports.AppLink = AppLink;
 exports.AppLinkButton = AppLinkButton;

package/build/interfaces/nav.d.ts

@@ -1,9 +1,10 @@
 import { RegularIconName } from "src/icon";
-export interface AlfaNavigatorOption {
-    path: string;
+export interface AlfaBreadcrumbOption {
+    href?: string;
     label: string;
     icon?: RegularIconName;
+    imageUrl?: 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>[];
+export type AlfaBreadcrumbMapper = Record<string, AlfaBreadcrumbOption | ((param: any) => AlfaBreadcrumbOption)>;
+export type AlfaBreadcrumbPathPart<TKey extends string = string> = TKey | [TKey, any];
+export type AlfaBreadcrumbPath<TKey extends string = string> = AlfaBreadcrumbPathPart<TKey>[];

package/build/styles.css

@@ -547,14 +547,28 @@ body {
 .index-module_button__UVt6a:hover {
   color: var(--color);
 }
-.index-module_root__t3gxi {
+.index-module_root__AUcgm {
   --linkColor: var(--passiveColor);
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 0.5em;
+}
+
+.index-module_separator__eiPxa {
+  user-select: none;
   color: var(--passiveColor);
-  font-size: 0.8em;
+}
+
+.index-module_step__Qwm7C {
+  display: flex;
+  align-items: center;
+}
+
+.index-module_image__kUPE1 {
+  width: 1.25em;
+  height: 1.25em;
+  margin-right: 0.3em;
 }
 .index-module_root__UuWET {
   font-size: 0.8em;

package/build/utils/text.d.ts

@@ -0,0 +1,3 @@
+export declare const TextUtil: {
+    maxTextEllipsis: (text: string, maxLength: number) => string;
+};

package/package.json

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

package/build/navigator/index.d.ts

@@ -1,16 +0,0 @@
-import React from "react";
-import { AlfaNavigatorMapper, AlfaNavigatorOption, AlfaNavigatorPath, AlfaNavigatorPathPart } from "src/interfaces";
-export interface AlfaNavigatorChangeEvent {
-    path?: string[];
-}
-export interface AlfaNavigatorProps {
-    root?: AlfaNavigatorOption | AlfaNavigatorPathPart;
-    options?: AlfaNavigatorOption[];
-    className?: string;
-    stepClassName?: string;
-    isMobile?: boolean;
-    mapper?: AlfaNavigatorMapper;
-    path?: AlfaNavigatorPath;
-    onChange?: (e: AlfaNavigatorChangeEvent) => void;
-}
-export declare const AlfaNavigator: React.FC<AlfaNavigatorProps>;