@hsu-react/ui 1.0.0 → 2.0.1

package/lib/hooks/useIsDark.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+/**
+ * Attributes that mark the document as dark. These are the same selectors the generated
+ * `tokens.scss` keys off, so the CSS-variable layer and the antd theme always agree on which
+ * palette is active — `data-theme` is what consuming apps toggle, the `prefers-color*` pair is
+ * what the dumi docs site sets.
+ */
+const DARK_ATTRS = ["data-theme", "data-prefers-color", "data-prefers-color-scheme"];
+const read = () => {
+  if (typeof document === "undefined") return false;
+  const root = document.documentElement;
+  for (const attr of DARK_ATTRS) {
+    const value = root.getAttribute(attr);
+    if (value === "dark") return true;
+    if (value === "light") return false;
+  }
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+};
+
+/**
+ * Whether the document is currently in dark mode.
+ *
+ * The CSS variables switch on their own — they are plain CSS. antd's theme cannot: its tokens are
+ * computed in JS, so the algorithm has to be swapped on re-render. This hook is that bridge, and
+ * `ConfigProvider` uses it to pick `darkAlgorithm`.
+ */
+const useIsDark = () => {
+  const [isDark, setIsDark] = (0, _react.useState)(read);
+  (0, _react.useEffect)(() => {
+    const update = () => setIsDark(read());
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: [...DARK_ATTRS]
+    });
+
+    // Only relevant while no explicit attribute is set, but harmless otherwise.
+    const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+    media?.addEventListener?.("change", update);
+    return () => {
+      observer.disconnect();
+      media?.removeEventListener?.("change", update);
+    };
+  }, []);
+  return isDark;
+};
+var _default = exports.default = useIsDark;

package/lib/hooks/usePointerType.d.ts

@@ -0,0 +1,22 @@
+export interface PointerType {
+    /** 主要输入设备是粗指针（手指、触控笔） */
+    isCoarse: boolean;
+    /** 设备具备真正的悬停能力（鼠标、触控板） */
+    canHover: boolean;
+    /** 粗指针且不能悬停 —— 通常意义上的「触屏设备」 */
+    isTouch: boolean;
+}
+/**
+ * 当前设备的指针能力。
+ *
+ * 刻意**不**做 UA 嗅探：二合一设备可以在触摸与鼠标之间来回切换，媒体查询会跟着变，UA 不会。
+ *
+ * 另外说明一个常见误解：不需要为了移动端把 `onClick` 换成 `onTouchStart`。触摸事件序列本来
+ * 就会合成 click，`onClick` 在触屏上一直是能用的；换成 touch 反而会丢掉键盘可访问性、在滚动
+ * 时误触发、并与合成的 click 重复触发。移动端真正要处理的是别的东西 —— 300ms 点击延迟
+ * （用 `touch-action: manipulation`）、点完粘住不消的 `:hover`（用 `_responsive.scss` 的
+ * `hover` mixin 包起来）、以及过小的点按目标。这个 hook 用于最后一类：需要按指针类型
+ * **改变结构或尺寸**的场合。
+ */
+declare const usePointerType: () => PointerType;
+export default usePointerType;

package/lib/hooks/usePointerType.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const QUERY_COARSE = "(pointer: coarse)";
+const QUERY_HOVER = "(hover: hover)";
+const read = () => {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return {
+      isCoarse: false,
+      canHover: true,
+      isTouch: false
+    };
+  }
+  const isCoarse = window.matchMedia(QUERY_COARSE).matches;
+  const canHover = window.matchMedia(QUERY_HOVER).matches;
+  return {
+    isCoarse,
+    canHover,
+    isTouch: isCoarse && !canHover
+  };
+};
+
+/**
+ * 当前设备的指针能力。
+ *
+ * 刻意**不**做 UA 嗅探：二合一设备可以在触摸与鼠标之间来回切换，媒体查询会跟着变，UA 不会。
+ *
+ * 另外说明一个常见误解：不需要为了移动端把 `onClick` 换成 `onTouchStart`。触摸事件序列本来
+ * 就会合成 click，`onClick` 在触屏上一直是能用的；换成 touch 反而会丢掉键盘可访问性、在滚动
+ * 时误触发、并与合成的 click 重复触发。移动端真正要处理的是别的东西 —— 300ms 点击延迟
+ * （用 `touch-action: manipulation`）、点完粘住不消的 `:hover`（用 `_responsive.scss` 的
+ * `hover` mixin 包起来）、以及过小的点按目标。这个 hook 用于最后一类：需要按指针类型
+ * **改变结构或尺寸**的场合。
+ */
+const usePointerType = () => {
+  const [state, setState] = (0, _react.useState)(read);
+  (0, _react.useEffect)(() => {
+    const update = () => setState(read());
+    update();
+    const coarse = window.matchMedia(QUERY_COARSE);
+    const hover = window.matchMedia(QUERY_HOVER);
+    coarse.addEventListener?.("change", update);
+    hover.addEventListener?.("change", update);
+    return () => {
+      coarse.removeEventListener?.("change", update);
+      hover.removeEventListener?.("change", update);
+    };
+  }, []);
+  return state;
+};
+var _default = exports.default = usePointerType;

package/lib/index.d.ts

@@ -2,16 +2,16 @@ export { default as ConfigProvider } from "./config-provider";
 export type { ConfigProviderProps } from "./config-provider";
 export { configureRequest, get, post, del, put, } from "./request";
 export type { RequestImpl, RequestConfig, ResType, ListRes, FileRes } from "./request";
-export { usePermissions, PermissionsContent, useLabelWidth } from "./hooks";
+export { usePermissions, PermissionsContent, useLabelWidth, useIsDark, useBreakpoint, usePointerType, } from "./hooks";
+export type { BreakpointName, BreakpointState, PointerType } from "./hooks";
 export { getUUID, supportsHasSelector, isLegacyHasSelectorBrowser } from "./utils";
-export { lightTokens, darkTokens, defaultPrimaryColor } from "./styles/tokens";
+export { lightTokens, darkTokens, defaultPrimaryColor, radius, fontTokens, controlTokens, modalWidth, breakpoints, toAntdTheme, } from "./styles/tokens";
 export type { HsuThemeTokens } from "./styles/tokens";
+export { message, notification } from "./feedback";
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as ChainGraph } from "./components/ChainGraph";
 export * from "./components/ChainGraph";
-export { default as ChakraRoot } from "./components/ChakraRoot";
-export * from "./components/ChakraRoot";
 export { default as Chart } from "./components/Chart";
 export * from "./components/Chart";
 export { default as Chat } from "./components/Chat";

package/lib/index.js

@@ -13,15 +13,25 @@ var _exportNames = {
   usePermissions: true,
   PermissionsContent: true,
   useLabelWidth: true,
+  useIsDark: true,
+  useBreakpoint: true,
+  usePointerType: true,
   getUUID: true,
   supportsHasSelector: true,
   isLegacyHasSelectorBrowser: true,
   lightTokens: true,
   darkTokens: true,
   defaultPrimaryColor: true,
+  radius: true,
+  fontTokens: true,
+  controlTokens: true,
+  modalWidth: true,
+  breakpoints: true,
+  toAntdTheme: true,
+  message: true,
+  notification: true,
   Button: true,
   ChainGraph: true,
-  ChakraRoot: true,
   Chart: true,
   Chat: true,
   Checkbox: true,
@@ -67,12 +77,6 @@ Object.defineProperty(exports, "ChainGraph", {
     return _ChainGraph.default;
   }
 });
-Object.defineProperty(exports, "ChakraRoot", {
-  enumerable: true,
-  get: function () {
-    return _ChakraRoot.default;
-  }
-});
 Object.defineProperty(exports, "Chart", {
   enumerable: true,
   get: function () {
@@ -277,12 +281,24 @@ Object.defineProperty(exports, "Upload", {
     return _Upload.default;
   }
 });
+Object.defineProperty(exports, "breakpoints", {
+  enumerable: true,
+  get: function () {
+    return _tokens.breakpoints;
+  }
+});
 Object.defineProperty(exports, "configureRequest", {
   enumerable: true,
   get: function () {
     return _request.configureRequest;
   }
 });
+Object.defineProperty(exports, "controlTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.controlTokens;
+  }
+});
 Object.defineProperty(exports, "darkTokens", {
   enumerable: true,
   get: function () {
@@ -301,6 +317,12 @@ Object.defineProperty(exports, "del", {
     return _request.del;
   }
 });
+Object.defineProperty(exports, "fontTokens", {
+  enumerable: true,
+  get: function () {
+    return _tokens.fontTokens;
+  }
+});
 Object.defineProperty(exports, "get", {
   enumerable: true,
   get: function () {
@@ -325,6 +347,24 @@ Object.defineProperty(exports, "lightTokens", {
     return _tokens.lightTokens;
   }
 });
+Object.defineProperty(exports, "message", {
+  enumerable: true,
+  get: function () {
+    return _feedback.message;
+  }
+});
+Object.defineProperty(exports, "modalWidth", {
+  enumerable: true,
+  get: function () {
+    return _tokens.modalWidth;
+  }
+});
+Object.defineProperty(exports, "notification", {
+  enumerable: true,
+  get: function () {
+    return _feedback.notification;
+  }
+});
 Object.defineProperty(exports, "post", {
   enumerable: true,
   get: function () {
@@ -337,12 +377,36 @@ Object.defineProperty(exports, "put", {
     return _request.put;
   }
 });
+Object.defineProperty(exports, "radius", {
+  enumerable: true,
+  get: function () {
+    return _tokens.radius;
+  }
+});
 Object.defineProperty(exports, "supportsHasSelector", {
   enumerable: true,
   get: function () {
     return _utils.supportsHasSelector;
   }
 });
+Object.defineProperty(exports, "toAntdTheme", {
+  enumerable: true,
+  get: function () {
+    return _tokens.toAntdTheme;
+  }
+});
+Object.defineProperty(exports, "useBreakpoint", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useBreakpoint;
+  }
+});
+Object.defineProperty(exports, "useIsDark", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useIsDark;
+  }
+});
 Object.defineProperty(exports, "useLabelWidth", {
   enumerable: true,
   get: function () {
@@ -355,11 +419,18 @@ Object.defineProperty(exports, "usePermissions", {
     return _hooks.usePermissions;
   }
 });
+Object.defineProperty(exports, "usePointerType", {
+  enumerable: true,
+  get: function () {
+    return _hooks.usePointerType;
+  }
+});
 var _configProvider = _interopRequireDefault(require("./config-provider"));
 var _request = require("./request");
 var _hooks = require("./hooks");
 var _utils = require("./utils");
 var _tokens = require("./styles/tokens");
+var _feedback = require("./feedback");
 var _Button = _interopRequireWildcard(require("./components/Button"));
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -384,18 +455,6 @@ Object.keys(_ChainGraph).forEach(function (key) {
     }
   });
 });
-var _ChakraRoot = _interopRequireWildcard(require("./components/ChakraRoot"));
-Object.keys(_ChakraRoot).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ChakraRoot[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChakraRoot[key];
-    }
-  });
-});
 var _Chart = _interopRequireWildcard(require("./components/Chart"));
 Object.keys(_Chart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/layout/Breadcrumb/_components/BreadcrumbItemIcon/index.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+interface BreadcrumbItemIconProps {
+    icon?: ReactNode;
+    title?: ReactNode;
+}
+/**
+ * Breadcrumb item icon and title component
+ */
+declare const BreadcrumbItemIcon: React.FC<BreadcrumbItemIconProps>;
+export default BreadcrumbItemIcon;

package/lib/layout/Breadcrumb/_components/BreadcrumbItemIcon/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _Icon = _interopRequireDefault(require("../../../../components/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Breadcrumb item icon and title component
+ */
+const BreadcrumbItemIcon = ({
+  icon,
+  title
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+    size: 5,
+    children: [typeof icon === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: icon
+    }) : icon, title]
+  });
+};
+var _default = exports.default = BreadcrumbItemIcon;

package/lib/layout/Breadcrumb/_components/BreadcrumbMenuItem/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { BreadcrumbType } from "../..";
+interface BreadcrumbMenuItemProps {
+    item: BreadcrumbType;
+    navigate: (path: string) => void;
+}
+/**
+ * Breadcrumb menu item component
+ */
+declare const BreadcrumbMenuItem: React.FC<BreadcrumbMenuItemProps>;
+export default BreadcrumbMenuItem;

package/lib/layout/Breadcrumb/_components/BreadcrumbMenuItem/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _Icon = _interopRequireDefault(require("../../../../components/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Breadcrumb menu item component
+ */
+const BreadcrumbMenuItem = ({
+  item,
+  navigate
+}) => {
+  const handleClick = () => {
+    if ((!item.children || item.route?.index) && item.path) {
+      navigate(item.path);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+    size: 5,
+    onClick: handleClick,
+    children: [typeof item.icon === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      icon: item.icon
+    }) : item.icon, item.title]
+  });
+};
+var _default = exports.default = BreadcrumbMenuItem;

package/lib/layout/Breadcrumb/_hooks/useBreadcrumbPath.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbType } from "..";
+/**
+ * Hook that handles breadcrumb path matching
+ */
+export declare const useBreadcrumbPath: (_routes: BreadcrumbType[]) => BreadcrumbType[];

package/lib/layout/Breadcrumb/_hooks/useBreadcrumbPath.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBreadcrumbPath = void 0;
+var _react = require("react");
+var _reactRouter = require("react-router");
+var _pathMatch = require("../_utils/pathMatch");
+var _useSetTabTitle = require("../../_hooks/useSetTabTitle");
+/**
+ * Hook that handles breadcrumb path matching
+ */
+const useBreadcrumbPath = _routes => {
+  const location = (0, _reactRouter.useLocation)();
+  const {
+    tabTitles
+  } = (0, _react.useContext)(_useSetTabTitle.NavTabBarTitleContent);
+  const [breadcrumb, setBreadcrumb] = (0, _react.useState)([]);
+  const pathname = (0, _react.useMemo)(() => decodeURI(location.pathname), [location.pathname]);
+  (0, _react.useEffect)(() => {
+    const _setBreadcrumb = (routes, parents) => {
+      const checkPath = item => {
+        if (item.path) {
+          const isMatch = (0, _pathMatch.checkBreadcrumbPathMatch)(pathname, item.path, item.parent?.path);
+          if (isMatch) {
+            // If tabTitles has a title for the current path, apply the custom title
+            const finalItem = tabTitles && tabTitles[pathname] !== undefined ? {
+              ...item,
+              title: tabTitles[pathname]
+            } : item;
+            if (parents) {
+              return [...parents, finalItem];
+            } else {
+              return [finalItem];
+            }
+          }
+        }
+        return [];
+      };
+      routes?.forEach(item => {
+        if (item.children) {
+          if (item.route?.index) {
+            const _breadcrumb = checkPath(item);
+            if (_breadcrumb.length > 0) {
+              setBreadcrumb(_breadcrumb);
+            } else {
+              const _newParents = parents ? [...parents, item] : [item];
+              _setBreadcrumb(item.children, _newParents);
+            }
+          } else {
+            const _newParents = parents ? [...parents, item] : [item];
+            _setBreadcrumb(item.children, _newParents);
+          }
+        } else {
+          const _breadcrumb = checkPath(item);
+          if (_breadcrumb.length > 0) {
+            setBreadcrumb(_breadcrumb);
+          }
+        }
+      });
+    };
+    setBreadcrumb([]);
+    _setBreadcrumb(_routes);
+  }, [_routes, pathname, tabTitles]);
+
+  // When tabTitles changes, update the title of the last breadcrumb item
+  (0, _react.useEffect)(() => {
+    if (!pathname) return;
+    setBreadcrumb(prev => {
+      if (prev.length === 0) return prev;
+      const newBreadcrumb = [...prev];
+      const lastItem = newBreadcrumb[newBreadcrumb.length - 1];
+
+      // Check whether the current path matches the last breadcrumb item
+      const isPathMatch = lastItem.path === pathname || lastItem.path && (0, _pathMatch.checkBreadcrumbPathMatch)(pathname, lastItem.path, lastItem.parent?.path);
+      if (isPathMatch && tabTitles && tabTitles[pathname] !== undefined) {
+        // If tabTitles has a title for the current path, update it
+        newBreadcrumb[newBreadcrumb.length - 1] = {
+          ...lastItem,
+          title: tabTitles[pathname]
+        };
+      }
+      return newBreadcrumb;
+    });
+  }, [tabTitles, pathname]);
+  return breadcrumb;
+};
+exports.useBreadcrumbPath = useBreadcrumbPath;

package/lib/layout/Breadcrumb/_utils/formatMenu.d.ts

@@ -0,0 +1,9 @@
+import { BreadcrumbType } from "..";
+import { ItemType as MenuItemType } from "antd/es/menu/interface";
+/**
+ * Format the breadcrumb submenu
+ * @param children Child breadcrumb items
+ * @param navigate Navigation function
+ * @returns Array of menu items
+ */
+export declare const formatBreadcrumbMenu: (children: BreadcrumbType[], navigate: (path: string) => void) => Omit<MenuItemType, "null">[];

package/lib/layout/Breadcrumb/_utils/formatMenu.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatBreadcrumbMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BreadcrumbMenuItem = _interopRequireDefault(require("../_components/BreadcrumbMenuItem"));
+var _lodash = require("lodash");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Format the breadcrumb submenu
+ * @param children Child breadcrumb items
+ * @param navigate Navigation function
+ * @returns Array of menu items
+ */
+const formatBreadcrumbMenu = (children, navigate) => {
+  return children?.map(item => {
+    const children = item.children?.filter(i => !i.path?.includes(":"));
+    const childrenBreadcrumb = formatBreadcrumbMenu((0, _lodash.cloneDeep)(children || []), navigate);
+    return {
+      key: decodeURI(item.path ?? ""),
+      label: /*#__PURE__*/_react.default.createElement(_BreadcrumbMenuItem.default, {
+        item,
+        navigate
+      }),
+      children: childrenBreadcrumb.length > 0 ? childrenBreadcrumb : undefined
+    };
+  });
+};
+exports.formatBreadcrumbMenu = formatBreadcrumbMenu;

package/lib/layout/Breadcrumb/_utils/formatRoutes.d.ts

@@ -0,0 +1,9 @@
+import { RouteType } from "../../types";
+import { BreadcrumbType } from "..";
+/**
+ * Format routes into breadcrumb items
+ * @param router Route configuration
+ * @param parent Parent route
+ * @returns Array of breadcrumb items
+ */
+export declare const formatRoutes: (router: RouteType[], parent?: RouteType) => BreadcrumbType[];

package/lib/layout/Breadcrumb/_utils/formatRoutes.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatRoutes = void 0;
+var _lodash = require("lodash");
+/**
+ * Format routes into breadcrumb items
+ * @param router Route configuration
+ * @param parent Parent route
+ * @returns Array of breadcrumb items
+ */
+const formatRoutes = (router, parent) => {
+  const newRoutes = [];
+  router?.forEach(route => {
+    let children = undefined;
+    if (route.children) {
+      children = formatRoutes(route.children, (0, _lodash.cloneDeep)(route));
+    }
+    const {
+      meta
+    } = route;
+    if (meta?.menu || !meta?.noTabsView) {
+      let path = "";
+      if (route.path) {
+        path = decodeURI(route.path);
+      }
+      if (route.index) {
+        newRoutes.push({
+          path: parent?.path,
+          title: meta?.name,
+          children: (children?.length || 0) > 0 ? children : undefined,
+          icon: meta?.icon,
+          parent: parent,
+          route: route,
+          index: true
+        });
+      } else {
+        const indexChild = children?.find(child => child?.index);
+        const newChildren = children?.filter(child => !child?.index);
+        if (indexChild) {
+          newRoutes.push({
+            ...indexChild,
+            index: false,
+            parent: parent,
+            children: (newChildren?.length || 0) > 0 ? newChildren : undefined
+          });
+        } else {
+          newRoutes.push({
+            path,
+            title: meta?.name,
+            children: (children?.length || 0) > 0 ? children : undefined,
+            icon: meta?.icon,
+            parent: parent
+          });
+        }
+      }
+    } else {
+      if (children) {
+        newRoutes.push(...children);
+      }
+    }
+  });
+  return newRoutes;
+};
+exports.formatRoutes = formatRoutes;

package/lib/layout/Breadcrumb/_utils/pathMatch.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Check whether a path matches (used by the breadcrumb)
+ * @param pathname Current path
+ * @param itemPath Route path
+ * @param parentPath Parent path
+ * @returns Whether it matches
+ */
+export declare const checkBreadcrumbPathMatch: (pathname: string, itemPath: string, parentPath?: string) => boolean;