@hsu-react/ui 0.0.22 → 0.0.24

package/es/components/Button/ChakraButton/index.js

@@ -12,6 +12,7 @@ import { Button } from "@chakra-ui/react";
 import usePermissions from "../../../hooks/usePermissions";
 import styles from "./index.module.scss";
 import classNames from "classnames";
+import ChakraRoot from "../../ChakraRoot";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,7 +33,23 @@ var ChakraButton = function ChakraButton(props) {
     return null;
   }
   if (reRender) {
-    return reRender( /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
+    return /*#__PURE__*/_jsx(ChakraRoot, {
+      children: reRender( /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
+        className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
+        children: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
+            className: styles.icon,
+            children: icon
+          }), children !== null && children !== void 0 ? children : title, iconPosition === "end" && icon && /*#__PURE__*/_jsx("span", {
+            className: styles.icon,
+            children: icon
+          })]
+        })
+      })))
+    });
+  }
+  return /*#__PURE__*/_jsx(ChakraRoot, {
+    children: /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
       className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
       children: /*#__PURE__*/_jsxs(_Fragment, {
         children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
@@ -43,19 +60,7 @@ var ChakraButton = function ChakraButton(props) {
           children: icon
         })]
       })
-    })));
-  }
-  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, buttonConfig), {}, {
-    className: classNames(className, styles.button, _defineProperty({}, styles[iconPosition], iconPosition)),
-    children: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [iconPosition === "start" && icon && /*#__PURE__*/_jsx("span", {
-        className: styles.icon,
-        children: icon
-      }), children !== null && children !== void 0 ? children : title, iconPosition === "end" && icon && /*#__PURE__*/_jsx("span", {
-        className: styles.icon,
-        children: icon
-      })]
-    })
-  }));
+    }))
+  });
 };
 export default ChakraButton;

package/es/components/ChakraRoot/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface ChakraRootProps {
+    children?: React.ReactNode;
+}
+declare const ChakraRoot: React.FC<ChakraRootProps>;
+export default ChakraRoot;

package/es/components/ChakraRoot/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+
+/**
+ * Provider shell for chakra.
+ *
+ * These two providers used to be mounted by the consumer at the application entry, wrapping
+ * the whole tree — which pulled `@chakra-ui/react` + `@emotion/*` + zag-js (about 570 KB in
+ * total) into the initial bundle unconditionally, even though Button.Chakra is the only thing
+ * that actually uses chakra.
+ *
+ * Changed to "whoever uses it wraps it": ChakraButton wraps itself (it is already a lazy chunk,
+ * so chakra travels with it), and the consumer entry no longer needs a global provider, which
+ * takes chakra out of the initial bundle entirely.
+ *
+ * Both system and cache are module-level singletons, so wrapping in several places does not
+ * create duplicates; nested wrapping passes the very same instance and is idempotent. The cache
+ * keeps `prepend: true` so chakra's style tags are inserted near the top of head — lower
+ * priority than antd — matching the previous behaviour.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+var cache = createCache({
+  key: "css",
+  prepend: true
+});
+var system = createSystem(defaultConfig, {
+  disableLayers: true,
+  preflight: false
+});
+var ChakraRoot = function ChakraRoot(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx(CacheProvider, {
+    value: cache,
+    children: /*#__PURE__*/_jsx(ChakraProvider, {
+      value: system,
+      children: children
+    })
+  });
+};
+export default ChakraRoot;

package/es/components/Slider/index.module.scss

@@ -4,7 +4,13 @@
   margin: 0px;
   padding-block: 0px;
 
-  overflow-x: hidden;
+  // 横向裁切用 clip 而不是 hidden：把手（36px 命中区）比轨道（32px）高 4px，靠
+  // overflow-y: visible 露出上下那点溢出。但按 CSS Overflow L3，visible 一旦与
+  // 「既非 visible 也非 clip」的值同时出现，就会被计算成 auto——写 hidden 时
+  // overflow-y 实际变成 auto，溢出的 4px 成了一条真能滚的区域：滚轮停在滑块上
+  // 滚的是它自己，把手还会跟着上下错位。
+  // clip 同样裁掉横向溢出，但不创建滚动容器，也不会把另一轴的 visible 拽下水。
+  overflow-x: clip;
   overflow-y: visible;
 
   :global(.ant-slider-step),

package/es/index.d.ts

@@ -10,6 +10,8 @@ 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/es/index.js

@@ -13,6 +13,8 @@ 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/components/Button/ChakraButton/index.js

@@ -9,6 +9,7 @@ var _react2 = require("@chakra-ui/react");
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _ChakraRoot = _interopRequireDefault(require("../../ChakraRoot"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ChakraButton = props => {
@@ -30,7 +31,26 @@ const ChakraButton = props => {
     return null;
   }
   if (reRender) {
-    return reRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChakraRoot.default, {
+      children: reRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
+        ...buttonConfig,
+        className: (0, _classnames.default)(className, _indexModule.default.button, {
+          [_indexModule.default[iconPosition]]: iconPosition
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [iconPosition === "start" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: _indexModule.default.icon,
+            children: icon
+          }), children ?? title, iconPosition === "end" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: _indexModule.default.icon,
+            children: icon
+          })]
+        })
+      }))
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChakraRoot.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
       ...buttonConfig,
       className: (0, _classnames.default)(className, _indexModule.default.button, {
         [_indexModule.default[iconPosition]]: iconPosition
@@ -44,21 +64,6 @@ const ChakraButton = props => {
           children: icon
         })]
       })
-    }));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Button, {
-    ...buttonConfig,
-    className: (0, _classnames.default)(className, _indexModule.default.button, {
-      [_indexModule.default[iconPosition]]: iconPosition
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [iconPosition === "start" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: _indexModule.default.icon,
-        children: icon
-      }), children ?? title, iconPosition === "end" && icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: _indexModule.default.icon,
-        children: icon
-      })]
     })
   });
 };

package/lib/components/ChakraRoot/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface ChakraRootProps {
+    children?: React.ReactNode;
+}
+declare const ChakraRoot: React.FC<ChakraRootProps>;
+export default ChakraRoot;

package/lib/components/ChakraRoot/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+var _react3 = require("@emotion/react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Provider shell for chakra.
+ *
+ * These two providers used to be mounted by the consumer at the application entry, wrapping
+ * the whole tree — which pulled `@chakra-ui/react` + `@emotion/*` + zag-js (about 570 KB in
+ * total) into the initial bundle unconditionally, even though Button.Chakra is the only thing
+ * that actually uses chakra.
+ *
+ * Changed to "whoever uses it wraps it": ChakraButton wraps itself (it is already a lazy chunk,
+ * so chakra travels with it), and the consumer entry no longer needs a global provider, which
+ * takes chakra out of the initial bundle entirely.
+ *
+ * Both system and cache are module-level singletons, so wrapping in several places does not
+ * create duplicates; nested wrapping passes the very same instance and is idempotent. The cache
+ * keeps `prepend: true` so chakra's style tags are inserted near the top of head — lower
+ * priority than antd — matching the previous behaviour.
+ */const cache = (0, _cache.default)({
+  key: "css",
+  prepend: true
+});
+const system = (0, _react2.createSystem)(_react2.defaultConfig, {
+  disableLayers: true,
+  preflight: false
+});
+const ChakraRoot = ({
+  children
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react3.CacheProvider, {
+  value: cache,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ChakraProvider, {
+    value: system,
+    children: children
+  })
+});
+var _default = exports.default = ChakraRoot;

package/lib/components/Slider/index.module.scss

@@ -4,7 +4,13 @@
   margin: 0px;
   padding-block: 0px;
 
-  overflow-x: hidden;
+  // 横向裁切用 clip 而不是 hidden：把手（36px 命中区）比轨道（32px）高 4px，靠
+  // overflow-y: visible 露出上下那点溢出。但按 CSS Overflow L3，visible 一旦与
+  // 「既非 visible 也非 clip」的值同时出现，就会被计算成 auto——写 hidden 时
+  // overflow-y 实际变成 auto，溢出的 4px 成了一条真能滚的区域：滚轮停在滑块上
+  // 滚的是它自己，把手还会跟着上下错位。
+  // clip 同样裁掉横向溢出，但不创建滚动容器，也不会把另一轴的 visible 拽下水。
+  overflow-x: clip;
   overflow-y: visible;
 
   :global(.ant-slider-step),

package/lib/index.d.ts

@@ -10,6 +10,8 @@ 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

@@ -21,6 +21,7 @@ var _exportNames = {
   defaultPrimaryColor: true,
   Button: true,
   ChainGraph: true,
+  ChakraRoot: true,
   Chart: true,
   Chat: true,
   Checkbox: true,
@@ -65,6 +66,12 @@ 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 () {
@@ -370,6 +377,18 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/components/Button/ChakraButton/index.tsx

@@ -3,6 +3,7 @@ import { Button, ButtonProps } from "@chakra-ui/react";
 import usePermissions from "../../../hooks/usePermissions";
 import styles from "./index.module.scss";
 import classNames from "classnames";
+import ChakraRoot from "../../ChakraRoot";
 
 export interface ChakraButtonProps extends ButtonProps {
   hasPermi?: string[];
@@ -31,7 +32,33 @@ const ChakraButton: React.FC<ChakraButtonProps> = (props) => {
   }
 
   if (reRender) {
-    return reRender(
+    return (
+      <ChakraRoot>
+        {reRender(
+          <Button
+            {...buttonConfig}
+            className={classNames(className, styles.button, {
+              [styles[iconPosition]]: iconPosition,
+            })}
+            children={
+              <>
+                {iconPosition === "start" && icon && (
+                  <span className={styles.icon}>{icon}</span>
+                )}
+                {children ?? title}
+                {iconPosition === "end" && icon && (
+                  <span className={styles.icon}>{icon}</span>
+                )}
+              </>
+            }
+          />,
+        )}
+      </ChakraRoot>
+    );
+  }
+
+  return (
+    <ChakraRoot>
       <Button
         {...buttonConfig}
         className={classNames(className, styles.button, {
@@ -48,28 +75,8 @@ const ChakraButton: React.FC<ChakraButtonProps> = (props) => {
             )}
           </>
         }
-      />,
-    );
-  }
-
-  return (
-    <Button
-      {...buttonConfig}
-      className={classNames(className, styles.button, {
-        [styles[iconPosition]]: iconPosition,
-      })}
-      children={
-        <>
-          {iconPosition === "start" && icon && (
-            <span className={styles.icon}>{icon}</span>
-          )}
-          {children ?? title}
-          {iconPosition === "end" && icon && (
-            <span className={styles.icon}>{icon}</span>
-          )}
-        </>
-      }
-    />
+      />
+    </ChakraRoot>
   );
 };
 

package/src/components/Button/index.md

@@ -37,7 +37,11 @@ export default () => (
 
 ## Chakra 按钮
 
-基于 Chakra UI 的按钮，支持 `hasPermi`、`hidden`、`iconPosition`、`icon` 等扩展属性（Chakra system 由文档站全局提供）。
+基于 Chakra UI 的按钮，支持 `hasPermi`、`hidden`、`iconPosition`、`icon` 等扩展属性。
+
+Chakra 的 system 与 emotion cache 由组件**自带**（内部包了一层 `ChakraRoot`），消费方**不需要**在应用入口挂全局 `ChakraProvider` / `CacheProvider`。这样 `@chakra-ui/react` + `@emotion/*` + zag-js（合计约 570 KB）只存在于 `Button.Chakra` 的异步 chunk 里，不进首屏。
+
+> 从 `0.0.23` 起：入口若仍留着全局 Provider，不会出错，但那 570 KB 会照旧留在首屏——要拿到收益需把它删掉。若页面要**直接**使用 chakra 组件（不经 `Button.Chakra`），用库导出的 `ChakraRoot` 自行包一层即可。
 
 ```tsx
 import React from "react";

package/src/components/ChakraRoot/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { ChakraProvider, createSystem, defaultConfig } from "@chakra-ui/react";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+
+/**
+ * Provider shell for chakra.
+ *
+ * These two providers used to be mounted by the consumer at the application entry, wrapping
+ * the whole tree — which pulled `@chakra-ui/react` + `@emotion/*` + zag-js (about 570 KB in
+ * total) into the initial bundle unconditionally, even though Button.Chakra is the only thing
+ * that actually uses chakra.
+ *
+ * Changed to "whoever uses it wraps it": ChakraButton wraps itself (it is already a lazy chunk,
+ * so chakra travels with it), and the consumer entry no longer needs a global provider, which
+ * takes chakra out of the initial bundle entirely.
+ *
+ * Both system and cache are module-level singletons, so wrapping in several places does not
+ * create duplicates; nested wrapping passes the very same instance and is idempotent. The cache
+ * keeps `prepend: true` so chakra's style tags are inserted near the top of head — lower
+ * priority than antd — matching the previous behaviour.
+ */
+const cache = createCache({
+  key: "css",
+  prepend: true,
+});
+
+const system = createSystem(defaultConfig, {
+  disableLayers: true,
+  preflight: false,
+});
+
+export interface ChakraRootProps {
+  children?: React.ReactNode;
+}
+
+const ChakraRoot: React.FC<ChakraRootProps> = ({ children }) => (
+  <CacheProvider value={cache}>
+    <ChakraProvider value={system}>{children}</ChakraProvider>
+  </CacheProvider>
+);
+
+export default ChakraRoot;

package/src/components/Slider/index.module.scss

@@ -4,7 +4,13 @@
   margin: 0px;
   padding-block: 0px;
 
-  overflow-x: hidden;
+  // 横向裁切用 clip 而不是 hidden：把手（36px 命中区）比轨道（32px）高 4px，靠
+  // overflow-y: visible 露出上下那点溢出。但按 CSS Overflow L3，visible 一旦与
+  // 「既非 visible 也非 clip」的值同时出现，就会被计算成 auto——写 hidden 时
+  // overflow-y 实际变成 auto，溢出的 4px 成了一条真能滚的区域：滚轮停在滑块上
+  // 滚的是它自己，把手还会跟着上下错位。
+  // clip 同样裁掉横向溢出，但不创建滚动容器，也不会把另一轴的 visible 拽下水。
+  overflow-x: clip;
   overflow-y: visible;
 
   :global(.ant-slider-step),

package/src/index.ts

@@ -25,6 +25,8 @@ 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";