@teamix/pro 1.2.21 → 1.2.22

package/es/actions/dialog.js

@@ -32,7 +32,7 @@ import classnames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { Dialog, Drawer } from '@alicloudfe/components';
 import PopConfirm from '@teamix/pop-confirm';
-import { getTargetValue, uuid, goToLink, getMessage } from '@teamix/utils';
+import { getTargetValue, uuid, getMessage } from '@teamix/utils';
 import ProForm, { createForm } from '../form';
 import { renderProMessage } from '../utils/message';
 import { eventHandler } from './base';
@@ -161,45 +161,34 @@ export function useDialogAction(action, actionContext) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
-                  if (!link) {
-                    _context.next = 5;
-                    break;
-                  }
-
-                  goToLink(link, history);
-                  onFinish && onFinish();
-                  resolve(true);
-                  return _context.abrupt("return");
-
-                case 5:
                   setLoading(true);
                   footerDescriptionValues = Object.assign({}, footerDescriptionRef === null || footerDescriptionRef === void 0 ? void 0 : (_footerDescriptionRef = footerDescriptionRef.current) === null || _footerDescriptionRef === void 0 ? void 0 : _footerDescriptionRef.values);
-                  _context.prev = 7;
+                  _context.prev = 2;
                   requestContext = Object.assign({
                     footer: footerDescriptionValues
                   }, context);
-                  _context.next = 11;
+                  _context.next = 6;
                   return doRequest(action, requestContext, history, footerDescriptionValues);
 
-                case 11:
+                case 6:
                   onFinish && onFinish();
                   resolve(true);
-                  _context.next = 20;
+                  _context.next = 15;
                   break;
 
-                case 15:
-                  _context.prev = 15;
-                  _context.t0 = _context["catch"](7);
+                case 10:
+                  _context.prev = 10;
+                  _context.t0 = _context["catch"](2);
                   setLoading(false);
                   resolve(false);
                   return _context.abrupt("return");
 
-                case 20:
+                case 15:
                 case "end":
                   return _context.stop();
               }
             }
-          }, _callee, null, [[7, 15]]);
+          }, _callee, null, [[2, 10]]);
         }));
 
         return function (_x) {

package/es/actions/index.d.ts

@@ -46,11 +46,21 @@ export interface ProActionMenuButtonProps extends MenuButtonProps {
 export declare const ProActionMenuButton: (props: ProActionMenuButtonProps) => JSX.Element;
 export declare type ProActionProps = ProActionButtonProps | ProActionMenuButtonProps;
 export declare type ProActionGroupProps = {
+    /** 操作组类型：按钮、文字按钮 */
     type?: 'button' | 'text';
+    /** 上下文 */
     context?: any;
+    /** 操作项配置 */
     actions: ProActionProps[];
+    /** 操作按钮最长数量，超出后折叠，默认为4 */
     max?: number;
+    /**
+     * @deprecated 建议使用 more 代替
+     */
     moreText?: string;
+    /** 更多按钮的配置，只有在actions数量超过max时才有效 */
+    more?: string | ProActionButtonProps;
+    /** 是否有分割线，只有type="text"时生效，默认有分割线 */
     divider?: boolean;
 } & React.HTMLAttributes<HTMLElement>;
 export declare function ProActionGroup(props: ProActionGroupProps): JSX.Element;

package/es/actions/index.js

@@ -5,7 +5,7 @@ var _excluded = ["type"],
     _excluded5 = ["context", "text"],
     _excluded6 = ["key", "actions"],
     _excluded7 = ["key", "config"],
-    _excluded8 = ["type", "divider", "max", "moreText", "context", "actions", "className"];
+    _excluded8 = ["type", "divider", "max", "moreText", "more", "context", "actions", "className"];
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -287,25 +287,19 @@ function renderCommonActionButton(button, context, isTypeText) {
   return /*#__PURE__*/React.createElement(ProActionMenuButton, _objectSpread({}, buttonProps));
 }
 
-function getDefaultMoreButton(type, moreText) {
-  if (type === 'button') {
-    return {
-      label: moreText || getMessage('more')
-    };
-  }
-
-  if (moreText) {
-    return {
-      label: moreText
-    };
-  }
-
-  return {
+function getDefaultMoreButton(type, more) {
+  var moreConfig = typeof more === 'string' ? {
+    children: more
+  } : more;
+  var defaultConfig = type === 'button' ? {
+    children: getMessage('more')
+  } : {
     icon: 'more-line',
     // iconSize: 'small',
     autoWidth: false,
     className: 'teamix-pro-actions-text-menu-btn-no-arrow'
   };
+  return Object.assign(defaultConfig, moreConfig);
 }
 
 var MAX_ACTTIONS = 4;
@@ -350,6 +344,7 @@ export function ProActionGroup(props) {
       _props$max = props.max,
       max = _props$max === void 0 ? MAX_ACTTIONS : _props$max,
       moreText = props.moreText,
+      more = props.more,
       context = props.context,
       _props$actions = props.actions,
       actions = _props$actions === void 0 ? [] : _props$actions,
@@ -362,7 +357,7 @@ export function ProActionGroup(props) {
   }).filter(function (action) {
     return action.visible !== false;
   });
-  var formatedActions = formatGroupActions(filteredActions, max, getDefaultMoreButton(type, moreText));
+  var formatedActions = formatGroupActions(filteredActions, max, getDefaultMoreButton(type, more || moreText));
   return /*#__PURE__*/React.createElement("div", _objectSpread({
     className: cls('teamix-pro-actions', "teamix-pro-actions-type-".concat(type), className, {
       'teamix-pro-actions-divider': type === 'button' ? false : divider

package/es/form/Filter/AdvancedFilter.js

@@ -53,6 +53,7 @@ var AdvancedFilter = /*#__PURE__*/memo(function (props) {
       props: {
         breakpoints: [480, 720, 990, 1200, Infinity],
         maxColumns: [1, 2, 3, 3, 4],
+        maxWidth: [480, 360, 330, 330, 300],
         columnGap: 16,
         rowGap: 12
       },

package/es/form/ProForm/index.scss

@@ -186,13 +186,13 @@
 }
 
 // 数组类组件添加按钮
-.#{$css-prefix}formily-array-base-addition {
+.#{$form-array}-base-addition {
   .#{$css-prefix}formily-icon {
     margin-right: 4px;
   }
 }
 // 数组类ArrayItem Icon 居中
-.#{$css-prefix}formily-array-items-item-inner {
+.#{$form-array}-items-item-inner {
   > .#{$css-prefix}box {
     > .#{$css-prefix}space-item {
       > .#{$css-prefix}formily-icon {
@@ -209,7 +209,7 @@
 
 // 折叠面板
 .#{$css-prefix}formily-collapse,
-.#{$css-prefix}formily-array-collapse-item {
+.#{$form-array}-collapse-item {
   .#{$css-prefix}collapse-panel-hidden {
     .#{$css-prefix}collapse-panel-content {
       padding-top: 4px;
@@ -261,7 +261,7 @@
 }
 
 // ArrayItems
-.#{$css-prefix}formily-array-items {
+.#{$form-array}-items {
   .#{$css-prefix}formily-grid-layout {
     > div:last-child {
       display: flex;
@@ -269,8 +269,39 @@
       align-items: center;
     }
   }
-  .#{$css-prefix}formily-array-base-remove {
-    cursor: pointer;
+}
+.#{$form-array}-base-remove,
+.#{$form-array}-base-addition,
+.#{$form-array}-base-move-down,
+.#{$form-array}-base-move-up,
+.#{$form-array}-base-sort-handle,
+.form-array-base-icon {
+  color: var(--color-fill1-6, #848484);
+  &:hover {
+    color: var(--color-brand1-6, #0064c8);
+  }
+}
+.form-array-base-icon {
+  cursor: pointer;
+}
+
+// ArrayCard
+.#{$form-array}-cards-item {
+  .#{$css-prefix}card-head {
+    padding: 16px 20px;
+    background-color: var(--color-fill1-2, #f7f7f7);
+    .#{$css-prefix}card-head-main {
+      margin-top: 0;
+      border-bottom: 0;
+      height: 22px;
+      line-height: 22px;
+      .#{$css-prefix}card-title {
+        padding-left: 0;
+        &::before {
+          display: none;
+        }
+      }
+    }
   }
 }
 

package/es/form/global.scss

@@ -1,6 +1,7 @@
 @import '~@alicloudfe/components/lib/common-var.scss';
 
 $form-item-cls: #{$css-prefix}formily-item;
+$form-array: #{$css-prefix}formily-array;
 $teamix-pro-form: teamix-pro-form;
 $teamix-pro-field: teamix-pro-field;
 

package/es/index.d.ts

@@ -21,5 +21,5 @@ export * from './page-container';
 export * from './page-header';
 export * from './skeleton';
 export * from './table';
-declare const version = "1.2.20";
+declare const version = "1.2.21";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, hooks, nocode, templates, utils, };

package/es/index.js

@@ -27,7 +27,7 @@ export * from './page-header';
 export * from './skeleton';
 export * from './table'; // export * from './sidebar';
 
-var version = '1.2.20';
+var version = '1.2.21';
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, // ProLayout,
 ProPageContainer, ProPageHeader, ProSkeleton, ProTable, // ProSidebar,
 hooks, nocode, templates, utils };

package/es/table/components/Layout/index.js

@@ -24,7 +24,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, isValidElement } from 'react';
 import { Header, baseClass } from '@teamix/utils';
 import { Button, Badge } from '@alicloudfe/components';
 import TeamixIcon from '@teamix/icon';
@@ -48,7 +48,7 @@ var Layout = function Layout(props) {
       rowSelection = props.rowSelection,
       otherProps = _objectWithoutProperties(props, _excluded);
 
-  var mode = (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.mode) || 'inline';
+  var mode = dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.mode;
 
   var _useState = useState((dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.expand) || false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -107,17 +107,26 @@ var Layout = function Layout(props) {
 
 
   var renderPanelFilter = function renderPanelFilter() {
-    var _dataFilter$schema2;
+    if (dataFilter) {
+      var _dataFilter$schema2;
 
-    if (dataFilter && (dataFilter === null || dataFilter === void 0 ? void 0 : (_dataFilter$schema2 = dataFilter.schema) === null || _dataFilter$schema2 === void 0 ? void 0 : _dataFilter$schema2.length) >= 0) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: cls('panel-filter'),
-        style: {
-          display: expand ? 'block' : 'none'
-        }
-      }, /*#__PURE__*/React.createElement(AdvancedFilter, _objectSpread({
-        form: dataFilterForm
-      }, dataFilter)));
+      if ( /*#__PURE__*/isValidElement(dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.content)) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: cls('panel-filter'),
+          style: {
+            display: expand ? 'block' : 'none'
+          }
+        }, dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.content);
+      } else if ((dataFilter === null || dataFilter === void 0 ? void 0 : (_dataFilter$schema2 = dataFilter.schema) === null || _dataFilter$schema2 === void 0 ? void 0 : _dataFilter$schema2.length) >= 0) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: cls('panel-filter'),
+          style: {
+            display: expand ? 'block' : 'none'
+          }
+        }, /*#__PURE__*/React.createElement(AdvancedFilter, _objectSpread({
+          form: dataFilterForm
+        }, dataFilter)));
+      }
     }
   }; // 渲染过滤器按钮
 

package/es/table/components/Pagination/index.d.ts

@@ -1,3 +1,4 @@
 import { PaginationProps } from '@alicloudfe/components/types/pagination';
+import './index.scss';
 declare const _default: (props: PaginationProps) => JSX.Element;
 export default _default;

package/es/table/components/Pagination/index.js

@@ -6,14 +6,29 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 // 自适应宽度的翻页器
-import React from 'react';
-import { Pagination } from '@alicloudfe/components';
+import React, { useState } from 'react';
+import { Pagination, Balloon, Select, Button } from '@alicloudfe/components';
+import { getMessage, baseClass } from '@teamix/utils';
 import { useResponsiveProps } from '@teamix/hooks';
+import './index.scss';
+var cls = baseClass('teamix-pro-pagination');
 export default (function (props) {
   var className = props.className,
       onChange = props.onChange,
@@ -27,16 +42,20 @@ export default (function (props) {
       onPageSizeChange = props.onPageSizeChange,
       otherProps = _objectWithoutProperties(props, _excluded);
 
-  var _useResponsiveProps = useResponsiveProps([480, 580, 680], ['mini', 'small', 'simple', 'normal']),
+  var _useResponsiveProps = useResponsiveProps([480, 590, 700], ['mini', 'small', 'simple', 'normal']),
       responsiveProps = _useResponsiveProps.responsiveProps,
       paginationWrapperRef = _useResponsiveProps.ref;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
   var commonPaginationProps = {
     className: className,
     onChange: onChange,
     total: total,
     pageSize: pageSize,
-    current: current,
     shape: 'arrow-only',
     pageSizeList: pageSizeList,
     pageSizeSelector: pageSizeSelector,
@@ -44,26 +63,79 @@ export default (function (props) {
     onPageSizeChange: onPageSizeChange
   };
 
+  var customTotalRender = function customTotalRender(total) {
+    return /*#__PURE__*/React.createElement(Balloon, {
+      visible: visible,
+      closable: false,
+      onVisibleChange: function onVisibleChange(visible) {
+        return setVisible(visible);
+      },
+      align: "t",
+      // triggerType="click"
+      trigger: /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        onMouseEnter: function onMouseEnter() {
+          return setVisible(true);
+        }
+      }, getMessage('total', {
+        total: total
+      }))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls('custom-total-content')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "title"
+    }, getMessage('pageSize')), /*#__PURE__*/React.createElement(Select, {
+      className: cls('custom-page-size-selector'),
+      dataSource: pageSizeList,
+      defaultValue: pageSize,
+      followTrigger: true,
+      menuProps: {
+        hasSelectedIcon: false
+      },
+      onChange: function onChange(value) {
+        setVisible(false);
+        onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(value);
+      }
+    })));
+  };
+
   var renderPagination = function renderPagination() {
     switch (responsiveProps) {
       case 'normal':
-        return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), otherProps));
+        return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
+          totalRender: function totalRender(total) {
+            return getMessage('total', {
+              total: total
+            });
+          }
+        }, otherProps));
 
       case 'simple':
         return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
-          pageShowCount: 3
+          pageShowCount: 3,
+          totalRender: function totalRender(total) {
+            return getMessage('total', {
+              total: total
+            });
+          }
         }, otherProps));
 
       case 'small':
         return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
+          pageShowCount: 3,
           pageSizeSelector: false,
-          type: "simple"
+          totalRender: function totalRender(total) {
+            return customTotalRender(total);
+          }
         }, otherProps));
 
       case 'mini':
         return /*#__PURE__*/React.createElement(Pagination, _objectSpread(_objectSpread({}, commonPaginationProps), {}, {
           pageSizeSelector: false,
-          type: "mini"
+          totalRender: function totalRender(total) {
+            return customTotalRender(total);
+          },
+          type: "simple"
         }, otherProps));
 
       default:
@@ -76,7 +148,7 @@ export default (function (props) {
     // 用于获取翻页器响应式 ref
     React.createElement("div", {
       ref: paginationWrapperRef,
-      className: "pagination-wrapper"
+      className: cls('wrapper')
     }, renderPagination())
   );
 });

package/es/table/components/Pagination/index.scss

@@ -0,0 +1,22 @@
+$prefix: 'teamix-pro-pagination';
+
+.#{$prefix} {
+  &-custom-total {
+    &-content {
+      display: flex;
+      align-items: center;
+      .next-menu {
+        min-width: 56px !important;
+        .next-menu-item.next-select-menu-item {
+          padding: 0 8px !important;
+        }
+      }
+    }
+  }
+  &-custom-page-size-selector.next-select-trigger {
+    min-width: 56px;
+    .next-select-inner {
+      min-width: 56px;
+    }
+  }
+}

package/es/table/components/ToolBar/FilterColumnIcon.js

@@ -31,7 +31,7 @@ import { Button, Dropdown, Menu, Dialog, Grid, Checkbox } from '@alicloudfe/comp
 import TeamixIcon from '@teamix/icon';
 import { baseClass, getMessage } from '@teamix/utils';
 import React, { useState, useEffect } from 'react';
-import { cloneDeep } from '../../utils';
+import { cloneDeep, off, on } from '../../utils';
 import './index.scss';
 import { Ellipsis } from '@teamix/utils';
 var CheckboxItem = Menu.CheckboxItem;
@@ -85,6 +85,26 @@ var FilterColumnIcon = function FilterColumnIcon(props) {
       dropdownVisible = _useState10[0],
       setDropdownVisible = _useState10[1];
 
+  useEffect(function () {
+    on === null || on === void 0 ? void 0 : on(function (stateFilterColumns) {
+      if (stateFilterColumns && stateFilterColumns.length > 0) {
+        var showDataIndex = stateFilterColumns.map(function (item) {
+          return item.dataIndex;
+        });
+        var stateColumns = cloneDeep(processColumns(columns)).map(function (item) {
+          if (!showDataIndex.includes(item.dataIndex)) {
+            item.columnFilters = false;
+          }
+
+          return item;
+        });
+        setNewColumns(stateColumns);
+      }
+    }, 'refreshFilterState');
+    return function () {
+      off('refreshFilterState');
+    };
+  });
   useEffect(function () {
     setNewColumns(processColumns(columns));
   }, [columns]); // 全选
@@ -196,7 +216,7 @@ var FilterColumnIcon = function FilterColumnIcon(props) {
 
     calculateSelectAllState(columns);
     setNewColumns(columns);
-    (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setColumn) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, columns);
+    (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setColumn) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, columns, false);
   }; // 计算全选状态
 
 
@@ -317,7 +337,8 @@ var FilterColumnIcon = function FilterColumnIcon(props) {
       onOk: onChangeColumnsForDialog,
       onCancel: dialogOnClose,
       onClose: dialogOnClose,
-      width: 480
+      width: 480,
+      className: cls('dialog')
     }, /*#__PURE__*/React.createElement(Row, {
       gutter: 20,
       wrap: true,

package/es/table/components/ToolBar/index.scss

@@ -20,6 +20,12 @@
   min-width: 180px;
   box-shadow: var(--popup-local-shadow, 0px 6px 24px 0px rgba(0, 0, 0, 0.1));
   background: var(--menu-background);
+
+  &-dialog {
+    .next-checkbox-label {
+      line-height: var(--checkbox-size,16px);
+    }
+  }
   &-reset {
     position: absolute;
     right: 16px;
@@ -38,7 +44,6 @@
         visibility: visible;
         cursor: pointer;
       }
-
     }
   }
   .next-menu-item-text {
@@ -94,7 +99,7 @@
   background-color: var(--balloon-tooltip-color-bg, #292929);
   border-color: var(--balloon-tooltip-color-border, transparent);
   box-shadow: var(--balloon-tooltip-shadow, none);
-  color: var(--balloon-tooltip-color, #FFFFFF);
+  color: var(--balloon-tooltip-color, #ffffff);
   display: flex;
   align-items: center;
   height: 36px;
@@ -105,7 +110,7 @@
     display: none;
   }
   .next-message-content {
-    color: var(--balloon-tooltip-color, #FFFFFF);
+    color: var(--balloon-tooltip-color, #ffffff);
     padding: 0;
   }
   .teamix-pro-table-full-screen-message-esc {
@@ -114,7 +119,7 @@
     padding: 0 2px;
     position: relative;
     // box-shadow: inset 0 0 1px 1px var(--color-fill1-1);
-    border: 1px solid var(--balloon-tooltip-color, #FFFFFF);
+    border: 1px solid var(--balloon-tooltip-color, #ffffff);
     display: inline-block;
     line-height: 1;
     &-title {