@kdcloudjs/table 1.1.5-canary.9 → 1.1.6-canary.1

package/es/table/base/styles.js

@@ -103,7 +103,7 @@ export var defaultCSSVariables = {
   '--row-height': '48px',
   '--color': '#333',
   '--bgcolor': 'white',
-  '--hover-bgcolor': 'var(--hover-color, #F2F6FF)',
+  '--hover-bgcolor': 'var(--hover-color, #f5f5f5)',
   '--highlight-bgcolor': '#eee',
   '--primary-color': '#5582F3',
   '--primary-color-level1': 'rgb(242, 248, 255)',

package/es/table/common-views.js

@@ -67,4 +67,4 @@ export var icons = {
   CaretRight: CaretRightIcon,
   Info: InfoIcon
 };
-export var ContextMenuStyleWrap = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &.", "{\n    border: 1px solid #e9ecf1;\n    border-radius: 2px;\n    background-color: #Fff;\n    box-shadow: 0px 0px 5px 0px rgb(154 154 154 / 50%);\n    cursor: default;\n    font-size: 13px;\n    position:absolute;\n    z-index: 1050;\n    width:120px;\n  }\n\n  .", "{\n    width:100%;\n    display: table;\n  }\n\n  .", " .", "{\n    display: table-row;\n    color: #666666;\n  }\n\n  .", " .", "{\n    background-color: #f5f5f5;\n  }\n\n  .", " .", " .", "{\n    display: table-cell;\n    padding: 5px 8px;\n  }\n  .", " .", ".", "{\n    opacity: .5;\n  }\n\n"])), MenuClasses.menu, MenuClasses.menuList, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuList, MenuClasses.menuOptionActive, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuOptionText, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuOptionDisable);
+export var ContextMenuStyleWrap = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &.", "{\n    border: 1px solid #e9ecf1;\n    border-radius: 2px;\n    background-color: #Fff;\n    box-shadow: 0px 0px 5px 0px rgb(154 154 154 / 50%);\n    cursor: default;\n    font-size: 12px;\n    position:absolute;\n    z-index: 1050;\n    max-width: 600px;\n    padding: 8px 0;\n  }\n\n  .", "{\n    width:100%;\n    display: table;\n  }\n\n  .", " .", "{\n    display: table-row;\n    color: #212121;\n  }\n\n  .", " .", "{\n    background-color: var(--hover-bgcolor);\n  }\n\n  .", " .", " .", "{\n    display: table-cell;\n    padding: 8px 12px;\n    max-width: 576px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    line-height: 16px;\n  }\n  .", " .", ".", "{\n    opacity: .5;\n  }\n\n"])), MenuClasses.menu, MenuClasses.menuList, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuList, MenuClasses.menuOptionActive, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuOptionText, MenuClasses.menuList, MenuClasses.menuOption, MenuClasses.menuOptionDisable);

package/es/table/pipeline/features/autoFill.js

@@ -1,69 +1,152 @@
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _Number$MAX_SAFE_INTEGER from "@babel/runtime-corejs3/core-js-stable/number/max-safe-integer";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+import _Map from "@babel/runtime-corejs3/core-js-stable/map";
 import { getLeftNestedLockCount } from '../../base/calculations';
 import { isLeafNode, makeRecursiveMapper } from '../../utils';
 import { Classes } from '../../base/styles';
+import { COLUMN_SIZE_KEY, RESIZED_COLUMN_KEY } from './columnResizeWidth';
 export var FILL_COLUMN_CODE = '$_fill_column_&';
 export var tableWidthKey = 'tableWidth';
-var fillColumnWidthKey = 'fillColumnWidth';
+
+var FLEX_COLUMN_COUNT = _Symbol('flexCount');
+
 export var autoFillTableWidth = function autoFillTableWidth() {
   return function (pipeline) {
-    var width = pipeline.getStateAtKey(fillColumnWidthKey, 0);
-    var columns = pipeline.getColumns();
+    var flexColumnResult = findFlexColumns(pipeline);
+    var flexCount = flexColumnResult.get(FLEX_COLUMN_COUNT);
+
+    if (flexCount) {
+      // 设置了flex宽度，flex列平分剩余宽度
+      var remainingWidth = getTableRemainingWidth(pipeline) || 0;
 
-    var fillColumns = _findInstanceProperty(columns).call(columns, function (col) {
-      return col.code === FILL_COLUMN_CODE;
-    });
+      if (remainingWidth > 0) {
+        // 保存剩余的flex总和和剩余宽度总和宽度
+        var residualFlexCount = flexCount;
+        var residualFlexWidth = remainingWidth;
+        var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY) || {};
+        pipeline.mapColumns(makeRecursiveMapper(function (col, recursiveFlatMapInfo) {
+          var isLeaf = recursiveFlatMapInfo.isLeaf;
 
-    if (fillColumns) {
-      fillColumns.width = width;
+          if (isLeaf && isValidFlexColumn(col, pipeline)) {
+            var code = col.code,
+                _col$features = col.features,
+                features = _col$features === void 0 ? {} : _col$features;
+            var flex = features.flex,
+                _features$minWidth = features.minWidth,
+                minWidth = _features$minWidth === void 0 ? 0 : _features$minWidth,
+                _features$maxWidth = features.maxWidth,
+                maxWidth = _features$maxWidth === void 0 ? _Number$MAX_SAFE_INTEGER : _features$maxWidth;
+            var usedRemainingWidth = Math.floor(remainingWidth * flex / flexCount);
+            var preColWidth = col.width; // 如果当前已经是最后一个flex列，将剩余的宽度添加到该列，其他计算相应的列
+
+            col.width = clamp(minWidth, preColWidth + (residualFlexCount === flex ? residualFlexWidth : usedRemainingWidth), maxWidth);
+            residualFlexCount -= flex;
+            residualFlexWidth -= col.width - preColWidth;
+            columnSize[code] = col.width;
+          }
+
+          return col;
+        }));
+        pipeline.setFeatureOptions(COLUMN_SIZE_KEY, columnSize);
+      }
     } else {
-      var rightNestedLockCount = getLeftNestedLockCount(_sliceInstanceProperty(columns).call(columns).reverse());
-      var spliceIndex = columns.length - rightNestedLockCount;
-      var _fillColumns = {
-        name: '',
-        code: FILL_COLUMN_CODE,
-        width: width,
-        features: {
-          resizeable: false
-        },
-        getCellProps: function getCellProps(value, record, rowIndex) {
-          return {
-            className: Classes.emptyColCell
-          };
-        }
-      };
-
-      _spliceInstanceProperty(columns).call(columns, spliceIndex || columns.length, 0, _fillColumns);
+      // 未设置了flex宽度，创建占位列
+      var columns = pipeline.getColumns();
+
+      var fillColumns = _findInstanceProperty(columns).call(columns, function (col) {
+        return col.code === FILL_COLUMN_CODE;
+      });
+
+      var width = getTableRemainingWidth(pipeline) || 0;
+
+      if (fillColumns) {
+        fillColumns.width = width;
+      } else {
+        var rightNestedLockCount = getLeftNestedLockCount(_sliceInstanceProperty(columns).call(columns).reverse());
+        var spliceIndex = columns.length - rightNestedLockCount;
+        var _fillColumns = {
+          name: '',
+          code: FILL_COLUMN_CODE,
+          width: width,
+          features: {
+            resizeable: false
+          },
+          getCellProps: function getCellProps(value, record, rowIndex) {
+            return {
+              className: Classes.emptyColCell
+            };
+          }
+        };
+
+        _spliceInstanceProperty(columns).call(columns, spliceIndex || columns.length, 0, _fillColumns);
+      }
+
+      pipeline.columns(columns);
     }
 
-    pipeline.columns(columns);
-    setAutoFillWidth(pipeline);
     return pipeline;
+
+    function findFlexColumns(pipeline) {
+      var result = new _Map([[FLEX_COLUMN_COUNT, 0]]);
+      dfs(pipeline.getColumns(), result);
+      return result;
+
+      function dfs(columns, result) {
+        columns.forEach(function (col) {
+          if (isLeafNode(col)) {
+            if (isValidFlexColumn(col, pipeline)) {
+              result.set(FLEX_COLUMN_COUNT, result.get(FLEX_COLUMN_COUNT) + col.features.flex);
+            }
+          } else {
+            dfs(col.children, result);
+          }
+        });
+      }
+    }
   };
 };
 
-var setAutoFillWidth = function setAutoFillWidth(pipeline) {
+function getColumnWidthSum(pipeline) {
+  return dfs(pipeline.getColumns());
+
+  function dfs(columns) {
+    return columns.reduce(function (acc, col) {
+      var width = col.width,
+          code = col.code;
+
+      if (isLeafNode(col) && code !== FILL_COLUMN_CODE) {
+        var resizeColumn = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
+        return acc + (resizeColumn && resizeColumn[code]) || width;
+      } else {
+        return acc + dfs(col.children);
+      }
+    }, 0);
+  }
+}
+
+function getTableRemainingWidth(pipeline) {
   var tableWidth = pipeline.getStateAtKey(tableWidthKey);
   if (!tableWidth) return;
-  var columnWidthSum = 0;
-  pipeline.mapColumns(makeRecursiveMapper(function (col) {
-    var width = col.width,
-        code = col.code;
-
-    if (isLeafNode(col) && code !== FILL_COLUMN_CODE) {
-      var resizeColumn = pipeline.getStateAtKey('columnResize');
-      columnWidthSum += resizeColumn && resizeColumn[code] || width;
-    }
+  var remainingWidth = Math.floor(tableWidth - getColumnWidthSum(pipeline));
+  return remainingWidth > 0 ? remainingWidth : 0;
+}
+
+function isValidFlexColumn(col, pipeline) {
+  var _a;
 
-    return col;
-  }));
-  var fillColumnWidth = Math.floor(tableWidth - columnWidthSum);
-  fillColumnWidth = fillColumnWidth > 0 ? fillColumnWidth : 0;
-  var preWidth = pipeline.getStateAtKey(fillColumnWidthKey, 0);
+  var resizeColumn = pipeline.getFeatureOptions(RESIZED_COLUMN_KEY); // 拖拽列自动禁止flex
 
-  if (preWidth !== fillColumnWidth) {
-    pipeline.setStateAtKey('fillColumnWidth', fillColumnWidth);
+  if (resizeColumn === null || resizeColumn === void 0 ? void 0 : resizeColumn.has(col.code)) {
+    return false;
   }
-};
+
+  var flex = (_a = col.features) === null || _a === void 0 ? void 0 : _a.flex;
+  return typeof flex === 'number' && flex > 0;
+}
+
+function clamp(min, x, max) {
+  return Math.max(min, Math.min(max, x));
+}

package/es/table/pipeline/features/columnResizeWidth.d.ts

@@ -20,5 +20,7 @@ export interface ColumnResizeOptions {
     onChangeSize?(nextSize: ColumnSize): void;
     afterChangeSize?(nextSize: ColumnSize, changedColumnSize: ChangedColumnSize[]): void;
 }
+export declare const COLUMN_SIZE_KEY = "columnResize";
+export declare const RESIZED_COLUMN_KEY = "resizedColumn";
 export declare function columnResize(opts?: ColumnResizeOptions): (pipeline: TablePipeline) => TablePipeline;
 export {};

package/es/table/pipeline/features/columnResizeWidth.js

@@ -3,8 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplat
 
 var _templateObject, _templateObject2;
 
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import styled from 'styled-components';
 import { fromEvent } from 'rxjs';
@@ -23,17 +24,19 @@ function disableSelect(event) {
   event.preventDefault();
 }
 
+var stateKey = 'columnResize';
+export var COLUMN_SIZE_KEY = 'columnResize';
+export var RESIZED_COLUMN_KEY = 'resizedColumn';
 export function columnResize() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var _a, _b, _c;
 
-  var stateKey = 'columnResize';
   var minSize = (_a = opts.minSize) !== null && _a !== void 0 ? _a : 60;
   var fallbackSize = (_b = opts.fallbackSize) !== null && _b !== void 0 ? _b : 150;
   var maxSize = (_c = opts.maxSize) !== null && _c !== void 0 ? _c : 1000;
   return function columnResizeFeature(pipeline) {
-    var _a, _b, _c;
+    var _a, _b;
 
     var columnSize = (_b = (_a = opts.columnSize) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : {};
     var leafColumns = collectNodes(pipeline.getColumns(), 'leaf-only');
@@ -48,15 +51,10 @@ export function columnResize() {
           columnSize[code] = fallbackSize;
         }
       }
-    }); // 初始化 || opts.columnSize发生变化（为了autofill时能取到最新值）
-
-    if (!pipeline.getStateAtKey(stateKey) || ((_c = pipeline.ref) === null || _c === void 0 ? void 0 : _c.current.lastOptColumnSize) !== opts.columnSize) {
-      pipeline.setStateAtKey(stateKey, columnSize);
-    }
+    }); // 实时存储一份最新的columnSize，与autoFill共用一份数据
+    // 存在state里可能存到取不到最新的
 
-    if (pipeline.ref) {
-      pipeline.ref.current.lastOptColumnSize = opts.columnSize;
-    }
+    pipeline.setFeatureOptions(COLUMN_SIZE_KEY, columnSize);
 
     var onChangeSize = function onChangeSize(nextColumnSize) {
       window.requestAnimationFrame(function () {
@@ -64,17 +62,13 @@ export function columnResize() {
 
         pipeline.setStateAtKey(stateKey, nextColumnSize);
         (_a = opts === null || opts === void 0 ? void 0 : opts.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(opts, nextColumnSize);
-
-        if (opts.columnSize) {
-          if (pipeline.ref) {
-            pipeline.ref.current.lastOptColumnSize = nextColumnSize; // 这里记录由列宽拖拽导致的opts.columnSize变化,避免重复渲染
-          }
-        }
       });
     };
 
     var handleDoubleClick = function handleDoubleClick(e, col) {
-      opts === null || opts === void 0 ? void 0 : opts.doubleClickCallback(e, col);
+      var _a;
+
+      (_a = opts.doubleClickCallback) === null || _a === void 0 ? void 0 : _a.call(opts, e, col);
     };
 
     var handleMouseDown = function handleMouseDown(e, col) {
@@ -82,7 +76,14 @@ export function columnResize() {
       var changedColumnSize = {};
       var startX = e.clientX;
       var children = col.children,
-          code = col.code;
+          code = col.code,
+          _col$features = col.features,
+          features = _col$features === void 0 ? {} : _col$features;
+      var minWidth = features.minWidth,
+          maxWidth = features.maxWidth;
+      var realMinSize = typeof minWidth === 'number' ? minWidth : minSize;
+      var realMaxSize = typeof maxWidth === 'number' ? maxWidth : maxSize;
+      var columnSize = pipeline.getFeatureOptions(COLUMN_SIZE_KEY);
       var recordColumnSize = columnSize;
       e.stopPropagation();
       var nextSize$ = fromEvent(window, 'mousemove').pipe(op.takeUntil(fromEvent(window, 'mouseup')), op.map(function (e) {
@@ -105,17 +106,17 @@ export function columnResize() {
             var currentDeltaWidth = Math.round(deltaSum * startSize / childrenWidthSum);
 
             if (index < leafChildColumns.length - 1) {
-              nextColumnSize[code] = clamp(minSize, startSize + currentDeltaWidth, maxSize);
+              nextColumnSize[code] = clamp(realMinSize, startSize + currentDeltaWidth, realMaxSize);
               changedColumnSize[code] = nextColumnSize[code];
               deltaRemaining -= currentDeltaWidth;
             } else {
-              nextColumnSize[code] = clamp(minSize, startSize + deltaRemaining, maxSize);
+              nextColumnSize[code] = clamp(realMinSize, startSize + deltaRemaining, realMaxSize);
               changedColumnSize[code] = nextColumnSize[code];
             }
           });
         } else {
           var startSize = columnSize[code];
-          nextColumnSize[code] = clamp(minSize, startSize + deltaSum, maxSize);
+          nextColumnSize[code] = clamp(realMinSize, startSize + deltaSum, realMaxSize);
           changedColumnSize[code] = nextColumnSize[code];
         }
 
@@ -123,7 +124,17 @@ export function columnResize() {
         return nextColumnSize;
       }));
       nextSize$.subscribe({
-        next: onChangeSize,
+        next: function next(nextColumnSize) {
+          onChangeSize(nextColumnSize); // 由于COLUMN_RESIZE_KEY记录的是全量的列宽，此处记录被改变过的列宽
+
+          var resizedColumnSet = pipeline.getFeatureOptions(RESIZED_COLUMN_KEY) || new _Set();
+
+          _Object$keys(changedColumnSize).forEach(function (code) {
+            resizedColumnSet.add(code, changedColumnSize[code]);
+          });
+
+          pipeline.setFeatureOptions(RESIZED_COLUMN_KEY, resizedColumnSet);
+        },
         complete: function complete() {
           var _context;
 

package/es/table/pipeline/features/multiSelect.js

@@ -44,28 +44,34 @@ export function multiSelect() {
     /** 所有有效的 keys（disable 状态为 false） */
 
     var allKeys = [];
+    var set = new _Set(value);
+    var isAllChecked = set.size !== 0; // 当前不存在选中则默认为false
+
+    var isAnyChecked = false;
     var flatDataSource = collectNodes(dataSource);
     flatDataSource.forEach(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
       fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
 
       if (!isDisabled(row, rowIndex)) {
-        allKeys.push(rowKey);
+        allKeys.push(rowKey); // 存在一个非选中，则不再进行判断
+
+        if (isAllChecked) {
+          isAllChecked = set.has(rowKey);
+        } // 存在一个选中，则不再进行判断
+
+
+        if (!isAnyChecked) {
+          isAnyChecked = set.has(rowKey);
+        }
       }
-    });
-    var set = new _Set(value); // todo: 暂使用hidden隐藏选择列 后续增加配置
+    }); // todo: 暂使用hidden隐藏选择列 后续增加配置
 
     var hiddenSelectColumn = opts.checkboxColumn && opts.checkboxColumn.hidden === true;
 
     if (!hiddenSelectColumn) {
       var _context;
 
-      var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {
-        return set.has(key);
-      });
-      var isAnyChecked = allKeys.some(function (key) {
-        return set.has(key);
-      });
       var defaultCheckboxColumnTitle = /*#__PURE__*/React.createElement(Checkbox, {
         checked: isAllChecked,
         indeterminate: !isAllChecked && isAnyChecked,

package/es/table/pipeline/features/rangeSelection.js

@@ -65,16 +65,16 @@ export function rangeSelection(opts) {
 
       if (clickCell) {
         if (event.shiftKey) {
-          var _lastClickCell = pipeline.getStateAtKey(lastClickCellKey);
+          var _lastClickCell = pipeline.getFeatureOptions(lastClickCellKey);
 
           if (_lastClickCell) {
             setRangeSelection(_lastClickCell, clickCell);
           } else {
             // 第一次进来就按住shift键，这时候要记住点击的单元格
-            pipeline.setStateAtKey(lastClickCellKey, clickCell);
+            pipeline.setFeatureOptions(lastClickCellKey, clickCell);
           }
         } else {
-          pipeline.setStateAtKey(lastClickCellKey, clickCell);
+          pipeline.setFeatureOptions(lastClickCellKey, clickCell);
           setRangeSelection(clickCell, clickCell);
         }
       }

package/es/table/pipeline/features/sort.js

@@ -171,6 +171,10 @@ export function sort() {
         return dataSource;
       }
 
+      if (sortMap.size === 0) {
+        return dataSource;
+      }
+
       var sortColumnsMap = new _Map(_mapInstanceProperty(_context = _filterInstanceProperty(_context2 = collectNodes(columns, 'leaf-only')).call(_context2, function (col) {
         var _a, _b;
 

package/es/table/pipeline/pipeline.js

@@ -300,8 +300,9 @@ export function useTablePipeline(ctx) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var ref = useRef({});
-  ref.current.featureOptions = {};
+  var ref = useRef({
+    featureOptions: {}
+  });
   return new TablePipeline({
     state: state,
     setState: setState,

package/lib/table/base/styles.js

@@ -128,7 +128,7 @@ var defaultCSSVariables = {
   '--row-height': '48px',
   '--color': '#333',
   '--bgcolor': 'white',
-  '--hover-bgcolor': 'var(--hover-color, #F2F6FF)',
+  '--hover-bgcolor': 'var(--hover-color, #f5f5f5)',
   '--highlight-bgcolor': '#eee',
   '--primary-color': '#5582F3',
   '--primary-color-level1': 'rgb(242, 248, 255)',

package/lib/table/common-views.js

@@ -85,6 +85,6 @@ var icons = {
 };
 exports.icons = icons;
 
-var ContextMenuStyleWrap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.", "{\n    border: 1px solid #e9ecf1;\n    border-radius: 2px;\n    background-color: #Fff;\n    box-shadow: 0px 0px 5px 0px rgb(154 154 154 / 50%);\n    cursor: default;\n    font-size: 13px;\n    position:absolute;\n    z-index: 1050;\n    width:120px;\n  }\n\n  .", "{\n    width:100%;\n    display: table;\n  }\n\n  .", " .", "{\n    display: table-row;\n    color: #666666;\n  }\n\n  .", " .", "{\n    background-color: #f5f5f5;\n  }\n\n  .", " .", " .", "{\n    display: table-cell;\n    padding: 5px 8px;\n  }\n  .", " .", ".", "{\n    opacity: .5;\n  }\n\n"])), _styles.MenuClasses.menu, _styles.MenuClasses.menuList, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOptionActive, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionText, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionDisable);
+var ContextMenuStyleWrap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.", "{\n    border: 1px solid #e9ecf1;\n    border-radius: 2px;\n    background-color: #Fff;\n    box-shadow: 0px 0px 5px 0px rgb(154 154 154 / 50%);\n    cursor: default;\n    font-size: 12px;\n    position:absolute;\n    z-index: 1050;\n    max-width: 600px;\n    padding: 8px 0;\n  }\n\n  .", "{\n    width:100%;\n    display: table;\n  }\n\n  .", " .", "{\n    display: table-row;\n    color: #212121;\n  }\n\n  .", " .", "{\n    background-color: var(--hover-bgcolor);\n  }\n\n  .", " .", " .", "{\n    display: table-cell;\n    padding: 8px 12px;\n    max-width: 576px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    line-height: 16px;\n  }\n  .", " .", ".", "{\n    opacity: .5;\n  }\n\n"])), _styles.MenuClasses.menu, _styles.MenuClasses.menuList, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOptionActive, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionText, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionDisable);
 
 exports.ContextMenuStyleWrap = ContextMenuStyleWrap;