@hi-ui/table 4.2.0 → 4.3.1

package/lib/esm/packages/hooks/use-merge-refs/lib/esm/index.js

@@ -0,0 +1,68 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useMemo } from 'react';
+/** @LICENSE
+ * @hi-ui/use-merge-refs
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-merge-refs#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A hook to merge multiple refs into a single function ref.
+ *
+ * @param refs
+ */
+
+var useMergeRefs = function useMergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return useMemo(function () {
+    return mergeRefs.apply(void 0, refs);
+  }, refs);
+};
+/**
+ * Merges multiple refs into a single function ref.
+ *
+ * @param refs
+ * @returns
+ */
+
+
+function mergeRefs() {
+  for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    refs[_key2] = arguments[_key2];
+  } // Empty check
+
+
+  if (refs.some(function (ref) {
+    return ref;
+  }) === false) return null;
+  return function (value) {
+    refs.forEach(function (ref) {
+      setRef(ref, value);
+    });
+  };
+}
+
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+export { mergeRefs, useMergeRefs };

package/lib/esm/packages/ui/scrollbar/lib/esm/Scrollbar.js

@@ -0,0 +1,162 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __rest } from 'tslib';
+import React__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useMemo } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { useMergeRefs } from '../../../../hooks/use-merge-refs/lib/esm/index.js';
+import PerfectScrollbar from '../../../../../node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js';
+import { ScrollbarEventToPsMap } from './utils/index.js';
+/** @LICENSE
+ * @hi-ui/scrollbar
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/scrollbar#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var SCROLLBAR_PREFIX = getPrefixCls('scrollbar');
+var Scrollbar = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _cx;
+
+  var _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? SCROLLBAR_PREFIX : _a$prefixCls,
+      _a$role = _a.role,
+      role = _a$role === void 0 ? 'scrollbar' : _a$role,
+      _a$position = _a.position,
+      position = _a$position === void 0 ? 'relative' : _a$position,
+      _a$axes = _a.axes,
+      axes = _a$axes === void 0 ? 'both' : _a$axes,
+      _a$keepVisible = _a.keepVisible,
+      keepVisible = _a$keepVisible === void 0 ? false : _a$keepVisible,
+      _a$onlyScrollVisible = _a.onlyScrollVisible,
+      onlyScrollVisible = _a$onlyScrollVisible === void 0 ? false : _a$onlyScrollVisible,
+      className = _a.className,
+      children = _a.children,
+      style = _a.style,
+      innerRef = _a.innerRef,
+      rest = __rest(_a, ["prefixCls", "role", "position", "axes", "keepVisible", "onlyScrollVisible", "className", "children", "style", "innerRef"]);
+
+  var cls = cx(prefixCls, className, 'priority', (_cx = {}, _cx[prefixCls + "--keep-visible"] = keepVisible, _cx[prefixCls + "--only-scroll-visible"] = !keepVisible && onlyScrollVisible, _cx));
+
+  var _useState = useState(undefined),
+      ps = _useState[0],
+      setPs = _useState[1];
+
+  var _useState2 = useState(null),
+      containerElement = _useState2[0],
+      setContainer = _useState2[1];
+
+  var _useState3 = useState(null),
+      wrapperElement = _useState3[0],
+      setWrapperElement = _useState3[1];
+
+  var eventPropsRef = useRef({});
+  useEffect(function () {
+    if (containerElement) {
+      setPs(new PerfectScrollbar(containerElement));
+    }
+  }, [containerElement]); // 轴定制
+
+  useEffect(function () {
+    if (ps) {
+      ps.settings.suppressScrollX = true;
+      ps.settings.suppressScrollY = true;
+
+      if (axes === 'both' || axes === 'x') {
+        ps.settings.suppressScrollX = false;
+      }
+
+      if (axes === 'both' || axes === 'y') {
+        ps.settings.suppressScrollY = false;
+      }
+
+      ps.update();
+    }
+  }, [ps, axes]); // 监听容器以及内容尺寸
+
+  useEffect(function () {
+    if (ps && wrapperElement && containerElement) {
+      var observer = new ResizeObserver(function (entries) {
+        ps.update();
+      });
+      observer.observe(containerElement);
+      observer.observe(wrapperElement);
+      return function () {
+        observer.disconnect();
+      };
+    }
+  }, [ps, wrapperElement, containerElement]);
+  useImperativeHandle(innerRef, function () {
+    return {
+      instance: ps,
+      containerElement: containerElement || undefined
+    };
+  }, [ps, containerElement]);
+
+  var _useMemo = useMemo(function () {
+    var eventProps = {};
+    var injectProps = {};
+    var eventNames = Object.keys(ScrollbarEventToPsMap);
+
+    for (var _i = 0, _Object$keys = Object.keys(rest); _i < _Object$keys.length; _i++) {
+      var propsName = _Object$keys[_i];
+
+      if (eventNames.includes(propsName)) {
+        eventProps[propsName] = rest[propsName];
+      } else {
+        injectProps[propsName] = rest[propsName];
+      }
+    }
+
+    return {
+      eventProps: eventProps,
+      injectProps: injectProps
+    };
+  }, [rest]),
+      eventProps = _useMemo.eventProps,
+      injectProps = _useMemo.injectProps; // 更新event props引用
+
+
+  useEffect(function () {
+    eventPropsRef.current = eventProps;
+  }, [eventProps]); // 注册监听事件
+
+  useEffect(function () {
+    if (containerElement) {
+      Object.keys(ScrollbarEventToPsMap).forEach(function (event) {
+        containerElement.addEventListener(ScrollbarEventToPsMap[event], function (e) {
+          var _a, _b;
+
+          (_b = (_a = eventPropsRef.current)[event]) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        });
+      });
+    }
+  }, [containerElement]);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+    ref: useMergeRefs(setContainer, ref),
+    role: role,
+    className: cls,
+    style: Object.assign(Object.assign({}, style), {
+      position: position
+    })
+  }, injectProps), /*#__PURE__*/React__default.createElement("div", {
+    className: prefixCls + "__wrapper",
+    ref: setWrapperElement
+  }, children));
+});
+
+if (__DEV__) {
+  Scrollbar.displayName = 'Scrollbar';
+}
+
+export { Scrollbar };

package/lib/esm/packages/ui/scrollbar/lib/esm/styles/index.scss.js

@@ -0,0 +1,25 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import __styleInject__ from 'style-inject';
+/** @LICENSE
+ * @hi-ui/scrollbar
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/scrollbar#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var css_248z = "/** Container style*/.ps {overflow: hidden !important;overflow-anchor: none;-ms-overflow-style: none;touch-action: auto;-ms-touch-action: auto;}/** Scrollbar rail styles*/.ps__rail-x {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;height: 15px;/* there must be 'bottom' or 'top' for ps__rail-x */bottom: 0px;/* please don't change 'position' */position: absolute;}.ps__rail-y {display: none;opacity: 0;transition: background-color 0.2s linear, opacity 0.2s linear;-webkit-transition: background-color 0.2s linear, opacity 0.2s linear;width: 15px;/* there must be 'right' or 'left' for ps__rail-y */right: 0;/* please don't change 'position' */position: absolute;}.ps--active-x > .ps__rail-x,.ps--active-y > .ps__rail-y {display: block;background-color: transparent;}.ps:hover > .ps__rail-x,.ps:hover > .ps__rail-y,.ps--focus > .ps__rail-x,.ps--focus > .ps__rail-y,.ps--scrolling-x > .ps__rail-x,.ps--scrolling-y > .ps__rail-y {opacity: 0.6;}.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus,.ps .ps__rail-x.ps--clicking,.ps .ps__rail-y.ps--clicking {background-color: #eee;opacity: 0.9;}/** Scrollbar thumb styles*/.ps__thumb-x {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, height 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out;height: 6px;/* there must be 'bottom' for ps__thumb-x */bottom: 2px;/* please don't change 'position' */position: absolute;}.ps__thumb-y {background-color: #aaa;border-radius: 6px;transition: background-color 0.2s linear, width 0.2s ease-in-out;-webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out;width: 6px;/* there must be 'right' for ps__thumb-y */right: 2px;/* please don't change 'position' */position: absolute;}.ps__rail-x:hover > .ps__thumb-x,.ps__rail-x:focus > .ps__thumb-x,.ps__rail-x.ps--clicking .ps__thumb-x {background-color: #999;height: 11px;}.ps__rail-y:hover > .ps__thumb-y,.ps__rail-y:focus > .ps__thumb-y,.ps__rail-y.ps--clicking .ps__thumb-y {background-color: #999;width: 11px;}/* MS supports */@supports (-ms-overflow-style: none) {.ps {overflow: auto !important;}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.ps {overflow: auto !important;}}.hi-v4-scrollbar {overflow: hidden;width: 100%;height: 100%;}.hi-v4-scrollbar__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;min-width: 100%;min-height: 100%;}.hi-v4-scrollbar--keep-visible.priority > .ps__rail-y, .hi-v4-scrollbar--keep-visible.priority > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar--keep-visible.priority .ps__thumb-y,.hi-v4-scrollbar--keep-visible.priority .ps__thumb-x {background-color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-scrollbar.priority:hover > .ps__rail-y, .hi-v4-scrollbar.priority:hover > .ps__rail-x, .hi-v4-scrollbar.priority:focus > .ps__rail-y, .hi-v4-scrollbar.priority:focus > .ps__rail-x {opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y,.hi-v4-scrollbar.priority .ps__thumb-y {width: 8px;border-radius: 4px;right: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-y:hover, .hi-v4-scrollbar.priority > .ps__rail-y:focus, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking {width: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-y:hover .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y:focus .ps__thumb-y, .hi-v4-scrollbar.priority > .ps__rail-y.ps--clicking .ps__thumb-y {width: 8px;right: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar.priority > .ps__rail-x,.hi-v4-scrollbar.priority .ps__thumb-x {height: 8px;border-radius: 4px;bottom: 0;-webkit-transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition: opacity var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1)), background-color var(--hi-v4-motion-duration-normal, 200ms) var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));}.hi-v4-scrollbar.priority > .ps__rail-x:hover, .hi-v4-scrollbar.priority > .ps__rail-x:focus, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking {height: 8px;background-color: var(--hi-v4-color-gray-200, #ebedf0);opacity: 0.8;}.hi-v4-scrollbar.priority > .ps__rail-x:hover .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x:focus .ps__thumb-x, .hi-v4-scrollbar.priority > .ps__rail-x.ps--clicking .ps__thumb-x {height: 8px;bottom: 0;background-color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-y) > .ps__rail-y:not(:hover):not(:focus), .hi-v4-scrollbar--only-scroll-visible.priority:not(.ps--scrolling-x) > .ps__rail-x:not(:hover):not(:focus) {opacity: 0;}";
+
+__styleInject__(css_248z);
+
+export { css_248z as default };

package/lib/esm/packages/ui/scrollbar/lib/esm/utils/index.js

@@ -0,0 +1,76 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @LICENSE
+ * @hi-ui/scrollbar
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/scrollbar#readme
+ *
+ * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ScrollbarPsToEventMatch = {
+  /**
+   * This event fires when the y-axis is scrolled in either direction
+   */
+  'ps-scroll-y': 'onScrollY',
+
+  /**
+   * This event fires when the x-axis is scrolled in either direction.
+   */
+  'ps-scroll-x': 'onScrollX',
+
+  /**
+   * This event fires when scrolling upwards.
+   */
+  'ps-scroll-up': 'onScrollUp',
+
+  /**
+   * This event fires when scrolling downwards.
+   */
+  'ps-scroll-down': 'onScrollDown',
+
+  /**
+   * This event fires when scrolling to the left.
+   */
+  'ps-scroll-left': 'onScrollLeft',
+
+  /**
+   * This event fires when scrolling to the right.
+   */
+  'ps-scroll-right': 'onScrollRight',
+
+  /**
+   * This event fires when scrolling reaches the start of the y-axis.
+   */
+  'ps-y-reach-start': 'onYReachStart',
+
+  /**
+   * This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll).
+   */
+  'ps-y-reach-end': 'onYReachEnd',
+
+  /**
+   * This event fires when scrolling reaches the start of the x-axis.
+   */
+  'ps-x-reach-start': 'onXReachStart',
+
+  /**
+   * This event fires when scrolling reaches the end of the x-axis.
+   */
+  'ps-x-reach-end': 'onXReachEnd'
+};
+var ScrollbarEventToPsMap = Object.keys(ScrollbarPsToEventMatch).reduce(function (acc, key) {
+  var value = ScrollbarPsToEventMatch[key];
+  acc[value] = key;
+  return acc;
+}, {});
+export { ScrollbarEventToPsMap };

package/lib/esm/styles/index.scss.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from 'style-inject';
-var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body {position: relative;overflow: auto;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
+var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
 
 __styleInject__(css_248z);
 

package/lib/esm/use-table.js

@@ -8,21 +8,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import { cloneTree, flattenTree, getLeafChildren, getNodeRootParent, flattedTreeSort } from '@hi-ui/tree-utils';
 import React__default, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { cloneTree, flattenTree, getLeafChildren, getNodeRootParent, flattedTreeSort } from '@hi-ui/tree-utils';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
-import { useColWidth } from './hooks/use-col-width.js';
-import { setColumnsDefaultWidth, parseFixedColumns } from './utils/index.js';
 import { isNullish, isArrayNonEmpty } from '@hi-ui/type-assertion';
 import { useCheck, useSelect } from '@hi-ui/use-check';
 import { invariant } from '@hi-ui/env';
+import { setAttrStatus } from '@hi-ui/dom-utils';
+import { useCache } from '@hi-ui/use-cache';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { setColumnsDefaultWidth, parseFixedColumns } from './utils/index.js';
 import { useAsyncSwitch } from './hooks/use-async-switch.js';
 import { useExpand } from './hooks/use-expand.js';
+import { useColWidth } from './hooks/use-col-width.js';
 import { useColumns } from './hooks/use-colgroup.js';
-import { setAttrStatus } from '@hi-ui/dom-utils';
-import { useCache } from '@hi-ui/use-cache';
 import { useTableDrag } from './hooks/use-drag.js';
-import { useLatestCallback } from '@hi-ui/use-latest';
 var DEFAULT_COLUMNS = [];
 var DEFAULT_DATA = [];
 var DEFAULT_ERROR_ROW_KEYS = [];
@@ -71,10 +71,12 @@ var useTable = function useTable(_a) {
       showColMenu = _a.showColMenu,
       rowSelection = _a.rowSelection,
       cellRender = _a.cellRender,
+      footerRender = _a.footerRender,
       _a$fieldKey = _a.fieldKey,
       fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
       virtual = _a.virtual,
-      rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "fieldKey", "virtual"]);
+      scrollbar = _a.scrollbar,
+      rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "footerRender", "fieldKey", "virtual", "scrollbar"]);
   /**
    * 获取 key 字段值
    */
@@ -186,7 +188,8 @@ var useTable = function useTable(_a) {
       measureRowElementRef = _useColWidth.measureRowElementRef,
       getColgroupProps = _useColWidth.getColgroupProps,
       onColumnResizable = _useColWidth.onColumnResizable,
-      colWidths = _useColWidth.colWidths; // ************************ 列冻结 ************************ //
+      colWidths = _useColWidth.colWidths,
+      setHeaderTableElement = _useColWidth.setHeaderTableElement; // ************************ 列冻结 ************************ //
 
 
   var bodyTableRef = useRef(null);
@@ -217,6 +220,14 @@ var useTable = function useTable(_a) {
   }, [setFixedToColumn]);
 
   var _React$useMemo = React__default.useMemo(function () {
+    if (!leftFreezeColumn && !rightFreezeColumn) {
+      return {
+        leftFrozenColKeys: [],
+        rightFrozenColKeys: [],
+        columns: mergedColumns2
+      };
+    }
+
     var leftFrozenColKey = leftFreezeColumn;
     var rightFrozenKey = rightFreezeColumn; // 获取左右冻结列的下标
     // 获取左右冻结列的下标
@@ -435,16 +446,18 @@ var useTable = function useTable(_a) {
       return !isArrayNonEmpty(col.children);
     });
   }, [mergedColumns1]);
-  var groupedColumns = mergedColumns1.reduce(function (acc, cur) {
-    var depth = cur.depth;
+  var groupedColumns = React__default.useMemo(function () {
+    return mergedColumns1.reduce(function (acc, cur) {
+      var depth = cur.depth;
 
-    if (!acc[depth]) {
-      acc[depth] = [];
-    }
+      if (!acc[depth]) {
+        acc[depth] = [];
+      }
 
-    acc[depth].push(cur);
-    return acc;
-  }, []);
+      acc[depth].push(cur);
+      return acc;
+    }, []);
+  }, [mergedColumns1]);
   var getStickyColProps = useLatestCallback(function (column) {
     var rightStickyWidth = column.rightStickyWidth,
         leftStickyWidth = column.leftStickyWidth,
@@ -593,8 +606,11 @@ var useTable = function useTable(_a) {
     onColumnResizable: onColumnResizable,
     isTree: isTreeView,
     cellRender: cellRender,
+    footerRender: footerRender,
     showColMenu: showColMenu,
-    onLoadChildren: onLoadChildren
+    onLoadChildren: onLoadChildren,
+    setHeaderTableElement: setHeaderTableElement,
+    scrollbar: scrollbar
   });
 };
 

package/lib/types/BaseTable.d.ts

@@ -43,4 +43,8 @@ export interface BaseTableProps extends Omit<HiBaseHTMLProps<'div'>, 'onDrop' |
      * 自定义冻结列触发展示行为
      */
     fixedColumnTrigger?: 'auto' | 'always';
+    /**
+     * 是否需要使用双表格
+     */
+    needDoubleTable?: boolean;
 }

package/lib/types/ColGroupContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const ColGroupContent: React.ForwardRefExoticComponent<TableColgroupProps & React.RefAttributes<HTMLTableColElement | null>>;
+export interface TableColgroupProps {
+    /**
+     * 组件默认的选择器类
+     */
+    prefixCls?: string;
+}

package/lib/types/TbodyContent.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+export declare const TbodyContent: React.ForwardRefExoticComponent<TbodyContentProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface TbodyContentProps extends HiBaseHTMLProps<'div'> {
+    /**
+     *  数据为空时的展示内容
+     */
+    emptyContent?: React.ReactNode;
+}
+/**
+ * 负责空状态渲染
+ */
+export declare const renderEmptyContent: ({ className, colSpan, emptyContent, scrollBodyWidth, }: {
+    colSpan?: number | undefined;
+    className?: string | undefined;
+    emptyContent: React.ReactNode;
+    scrollBodyWidth?: string | number | undefined;
+}) => JSX.Element;

package/lib/types/TheadContent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+export declare const TheadContent: React.ForwardRefExoticComponent<TheadContentProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface TheadContentProps extends HiBaseHTMLProps<'thead'> {
+    /**
+     * 组件默认的选择器类
+     */
+    prefixCls?: string;
+}

package/lib/types/context.d.ts

@@ -37,8 +37,11 @@ export declare const TableProvider: import("react").Provider<(Omit<{
     onColumnResizable: (_: any, { size }: any, index: number) => void;
     isTree: boolean;
     cellRender: ((text: any) => import("react").ReactNode) | undefined;
+    footerRender: ((...nodes: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[]) => import("react").ReactNode) | undefined;
     showColMenu: boolean | undefined;
     onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
+    setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
+    scrollbar: boolean | import("packages/ui/scrollbar/lib/types").ScrollbarProps | undefined;
     scrollLeft: number;
     scrollRight: number;
     measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
@@ -82,10 +85,10 @@ export declare const TableProvider: import("react").Provider<(Omit<{
         scrollLeft: number;
         scrollRight: number;
     };
-    leftFrozenColKeys: any[];
-    rightFrozenColKeys: any[];
-    leftFixedColumnsWidth: number;
-    rightFixedColumnsWidth: number;
+    leftFrozenColKeys: any[] | never[];
+    rightFrozenColKeys: any[] | never[];
+    leftFixedColumnsWidth: number | undefined;
+    rightFixedColumnsWidth: number | undefined;
 }, "rootProps"> & {
     embedExpandable: boolean | {
         rowExpandable: true | ((row: import("./types").TableColumnItem) => import("react").ReactNode);
@@ -142,8 +145,11 @@ export declare const useTableContext: () => Omit<{
     onColumnResizable: (_: any, { size }: any, index: number) => void;
     isTree: boolean;
     cellRender: ((text: any) => import("react").ReactNode) | undefined;
+    footerRender: ((...nodes: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[]) => import("react").ReactNode) | undefined;
     showColMenu: boolean | undefined;
     onLoadChildren: ((item: import("./types").TableRowEventData) => void | Promise<void | any[]>) | undefined;
+    setHeaderTableElement: import("react").Dispatch<import("react").SetStateAction<HTMLTableRowElement | null>>;
+    scrollbar: boolean | import("packages/ui/scrollbar/lib/types").ScrollbarProps | undefined;
     scrollLeft: number;
     scrollRight: number;
     measureRowElementRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
@@ -187,10 +193,10 @@ export declare const useTableContext: () => Omit<{
         scrollLeft: number;
         scrollRight: number;
     };
-    leftFrozenColKeys: any[];
-    rightFrozenColKeys: any[];
-    leftFixedColumnsWidth: number;
-    rightFixedColumnsWidth: number;
+    leftFrozenColKeys: any[] | never[];
+    rightFrozenColKeys: any[] | never[];
+    leftFixedColumnsWidth: number | undefined;
+    rightFixedColumnsWidth: number | undefined;
 }, "rootProps"> & {
     embedExpandable: boolean | {
         rowExpandable: true | ((row: import("./types").TableColumnItem) => import("react").ReactNode);

package/lib/types/hooks/use-col-width.d.ts

@@ -14,6 +14,6 @@ export declare const useColWidth: ({ resizable, data, columns, virtual, }: {
             minWidth: number | undefined;
         };
     };
-    setHeaderTableElement: React.Dispatch<React.SetStateAction<HTMLTableElement | null>>;
+    setHeaderTableElement: React.Dispatch<React.SetStateAction<HTMLTableRowElement | null>>;
     colWidths: number[];
 };