@quadrats/react 1.0.0 → 1.1.0

package/table/table.scss

@@ -0,0 +1,393 @@
+$cell-action-z-index: 9;
+$toolbar-z-index: 10;
+
+@mixin add-btn {
+  position: absolute;
+  z-index: 0;
+  cursor: pointer;
+  padding: 0;
+  background-color: var(--qdr-block);
+  border-radius: var(--qdr-radius-1);
+  border: 1px solid var(--qdr-divider);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: var(--qdr-bg);
+
+    .qdr-table__btn-icon {
+      color: var(--qdr-text-secondary);
+    }
+  }
+
+  &:active {
+    background-color: var(--qdr-divider);
+    border: 1px solid var(--qdr-border);
+
+    .qdr-table__btn-icon {
+      color: var(--qdr-text-secondary);
+    }
+  }
+}
+
+@mixin cell-action {
+  position: absolute;
+  z-index: $cell-action-z-index;
+  width: 20px;
+  height: 24px;
+  padding: 0;
+  border-radius: var(--qdr-radius-1);
+  border: 1px solid var(--qdr-primary-active-bg);
+  background-color: var(--qdr-primary-hover-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+  cursor: pointer;
+  opacity: 1;
+}
+
+@mixin cell-selected($border-position) {
+  border-#{$border-position}: 2px solid var(--qdr-primary-light) !important;
+}
+
+@mixin title-bg {
+  background-color: var(--qdr-bg);
+}
+
+.qdr-table__table-toolbar {
+  right: unset;
+  left: 50%;
+  top: -4px;
+  transform: translate(-50%, -100%);
+}
+
+.qdr-table {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  gap: var(--qdr-spacing-4);
+  margin: var(--qdr-spacing-11) 0;
+  position: relative;
+
+  &__selection {
+    padding: 0;
+    position: absolute;
+    left: -22px;
+    top: 0;
+    z-index: 0;
+    width: 20px;
+    height: 20px;
+    color: var(--qdr-action-inactive);
+    border: none;
+    border-radius: var(--qdr-radius-1);
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--qdr-secondary-active-bg);
+      color: var(--qdr-action-active);
+    }
+  }
+
+  &__portal-container {
+    position: relative;
+    pointer-events: none;
+  }
+
+  &__title {
+    width: 100%;
+    display: block;
+    position: relative;
+    margin: 0;
+    font-size: var(--qdr-typography-article-h6-font-size);
+    line-height: var(--qdr-typography-article-h6-line-height);
+    letter-spacing: var(--qdr-typography-article-h6-letter-spacing);
+    font-weight: var(--qdr-typography-article-h6-font-weight);
+    color: var(--qdr-text-primary);
+    background-color: var(--qdr-surface-secondary);
+
+    &__placeholder {
+      position: absolute;
+      left: 0;
+      top: 0;
+      color: var(--qdr-text-secondary);
+      pointer-events: none;
+    }
+  }
+
+  &__header {
+    @include title-bg();
+
+    &--pinned {
+      position: sticky;
+      z-index: 2;
+      top: 0;
+      box-shadow: 0 2px 4px -2px #00000026;
+    }
+  }
+
+  &__scrollContainer {
+    width: 100%;
+    max-width: 100%;
+    max-height: 420px;
+    overflow: auto;
+    scrollbar-width: thin;
+    position: relative;
+  }
+
+  &__main {
+    margin: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+
+    th:not(:first-child),
+    td:not(:first-child) {
+      border-left: none;
+    }
+
+    thead tr:not(:last-child) th,
+    tbody tr:not(:last-child) td {
+      border-bottom: none;
+    }
+  }
+
+  &__inline-table-toolbar,
+  &__cell__inline-table-toolbar {
+    pointer-events: none;
+    top: -50px;
+    left: 0;
+    right: unset;
+  }
+
+  &__mainWrapper {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    position: relative;
+
+    &--selected {
+      .qdr-table__main {
+        border: 2px solid var(--qdr-primary);
+      }
+
+      .qdr-table__table-toolbar {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
+  &__body {
+    background-color: var(--qdr-surface-primary);
+  }
+
+  &__cell {
+    position: relative;
+    padding: var(--qdr-spacing-3) var(--qdr-spacing-4);
+    font-size: var(--qdr-typography-article-body1-font-size);
+    line-height: var(--qdr-typography-article-body1-line-height);
+    letter-spacing: var(--qdr-typography-article-body1-letter-spacing);
+    font-weight: var(--qdr-typography-article-body1-font-weight);
+    color: var(--qdr-text-primary);
+    text-align: left;
+    border-top: 1px solid var(--qdr-border);
+    border-right: 1px solid var(--qdr-border);
+    border-bottom: 1px solid var(--qdr-border);
+    border-left: 1px solid var(--qdr-border);
+    vertical-align: top;
+    word-break: break-all;
+
+    p,
+    ul,
+    ol {
+      margin: 0;
+    }
+
+    &--resizing {
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 2px;
+        height: 100%;
+        background-color: var(--qdr-primary-light);
+        pointer-events: none;
+        opacity: 1;
+      }
+    }
+
+    &__resize-handle {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 6px;
+      height: 100%;
+      transform: translateX(0);
+      cursor: col-resize;
+      z-index: 1;
+    }
+
+    &--header {
+      font-weight: var(--qdr-typography-article-h6-font-weight);
+      color: var(--qdr-text-primary);
+      @include title-bg();
+    }
+
+    &--pinned {
+      position: sticky;
+      z-index: 1;
+      left: 0;
+      box-shadow: 2px 0 4px -2px #00000026;
+    }
+
+    &--top-active {
+      @include cell-selected('top');
+    }
+
+    &--right-active {
+      @include cell-selected('right');
+    }
+
+    &--bottom-active {
+      @include cell-selected('bottom');
+    }
+
+    &--left-active {
+      @include cell-selected('left');
+    }
+  }
+
+  &__btn-icon {
+    color: var(--qdr-action-disabled);
+    pointer-events: none;
+  }
+
+  &__add-column {
+    @include add-btn();
+
+    right: -24px;
+    top: 0;
+    width: 20px;
+    height: 100%;
+  }
+
+  &__add-row {
+    @include add-btn();
+
+    bottom: -24px;
+    left: 0;
+    width: 100%;
+    height: 20px;
+  }
+
+  &__add-both {
+    @include add-btn();
+
+    right: -24px;
+    bottom: -24px;
+    width: 20px;
+    height: 20px;
+  }
+
+  &__delete {
+    color: var(--qdr-error);
+  }
+}
+
+// 為了解決 toolbar 顯示時，因為位置錯誤而導致的閃爍問題
+// 讓 toolbar 出現時稍晚一些
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.qdr-table__cell__focus-toolbar,
+.qdr-table__cell__inline-table-toolbar {
+  position: absolute;
+  right: unset;
+  transform: translate(-10%, -100%);
+  padding: 4px;
+  border-radius: 10px;
+  border: 1px solid var(--qdr-border);
+  background: var(--qdr-bg);
+  box-shadow:
+    0 4px 8px -2px #0000001a,
+    0 2px 4px -2px #0000000a;
+  animation-name: fade-in;
+  animation-duration: 0.1s;
+  animation-delay: 0.1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  pointer-events: auto;
+  z-index: $toolbar-z-index;
+}
+
+.qdr-table__cell-row-action {
+  @include cell-action();
+}
+
+.qdr-table__cell-column-action {
+  @include cell-action();
+
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
+.qdr-table__size-indicators {
+  display: none;
+  overflow: hidden;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 0;
+  pointer-events: none;
+  transform: translateY(-100%);
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.qdr-table__size-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.qdr-table__size {
+  background-color: var(--qdr-action-inactive);
+  color: var(--qdr-on-primary);
+  padding: 4px 8px;
+  font-size: 12px;
+  white-space: pre-wrap;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: '';
+    z-index: -1;
+    top: calc(100% - 2px);
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background-color: var(--qdr-action-inactive);
+    border-right: 1px solid var(--qdr-action-inactive);
+    border-bottom: 1px solid var(--qdr-action-inactive);
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  }
+}

package/table/toolbar/TableToolbarIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToolbarIconProps } from '@quadrats/react/toolbar';
+import { ReactTable } from '@quadrats/react/table';
+export interface TableToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
+    controller: ReactTable;
+}
+declare function TableToolbarIcon(props: TableToolbarIconProps): React.JSX.Element;
+export default TableToolbarIcon;

package/table/toolbar/TableToolbarIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { ToolbarIcon } from '@quadrats/react/toolbar';
+import { useTableTool } from './useTableTool.js';
+
+function TableToolbarIcon(props) {
+    const { controller } = props, rest = __rest(props, ["controller"]);
+    const { insert } = useTableTool(controller);
+    return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: insert }));
+}
+
+export { TableToolbarIcon as default };

package/table/toolbar/index.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+var toolbar = require('@quadrats/react/toolbar');
+
+function useTableTool(table) {
+    const editor = react.useQuadrats();
+    const insert = React.useCallback(() => {
+        // Insert a 3x3 table
+        table.insertTable(editor, 3, 3);
+    }, [editor, table]);
+    return { insert };
+}
+
+function TableToolbarIcon(props) {
+    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
+    const { insert } = useTableTool(controller);
+    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: insert }));
+}
+
+exports.TableToolbarIcon = TableToolbarIcon;
+exports.useTableTool = useTableTool;

package/table/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { useTableTool } from './useTableTool';
+export { default as TableToolbarIcon } from './TableToolbarIcon';

package/table/toolbar/index.js

@@ -0,0 +1,2 @@
+export { useTableTool } from './useTableTool.js';
+export { default as TableToolbarIcon } from './TableToolbarIcon.js';

package/table/toolbar/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/table/toolbar",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/table/toolbar/useTableTool.d.ts

@@ -0,0 +1,4 @@
+import { ReactTable } from '@quadrats/react/table';
+export declare function useTableTool(table: ReactTable): {
+    insert: () => void;
+};

package/table/toolbar/useTableTool.js

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { useQuadrats } from '@quadrats/react';
+
+function useTableTool(table) {
+    const editor = useQuadrats();
+    const insert = useCallback(() => {
+        // Insert a 3x3 table
+        table.insertTable(editor, 3, 3);
+    }, [editor, table]);
+    return { insert };
+}
+
+export { useTableTool };

package/table/typings.d.ts

@@ -0,0 +1,66 @@
+import { Editor } from '@quadrats/core';
+import { Table, TableElement, TableTypeKey, TableTitleTypeKey, TableMainTypeKey, TableHeaderTypeKey, TableRowTypeKey, TableCellTypeKey, TableBodyTypeKey } from '@quadrats/common/table';
+import { WithCreateHandlers, WithCreateRenderElement, RenderElementProps, ReactWithable } from '@quadrats/react';
+import { Dispatch, SetStateAction, RefObject } from 'react';
+export type TableHeaderContextType = {
+    isHeader: boolean;
+};
+export type TableContextType = {
+    tableElement: TableElement;
+    columnCount: number;
+    rowCount: number;
+    portalContainerRef: RefObject<HTMLDivElement | null>;
+    pinnedColumns: Set<number>;
+    pinnedRows: Set<number>;
+    cellPositions: Map<TableElement, {
+        columnIndex: number;
+        rowIndex: number;
+    }>;
+    addColumn: (options?: {
+        position?: 'left' | 'right';
+        columnIndex?: number;
+    }) => void;
+    addRow: (options?: {
+        position?: 'top' | 'bottom';
+        rowIndex?: number;
+    }) => void;
+    addColumnAndRow: VoidFunction;
+    deleteRow: (rowIndex: number) => void;
+    deleteColumn: (columnIndex: number) => void;
+    moveRowToBody: (rowIndex: number) => void;
+    moveRowToHeader: (rowIndex: number, customProps?: Pick<TableElement, 'pinned'>) => void;
+    unsetColumnAsTitle: (columnIndex: number) => void;
+    setColumnAsTitle: (columnIndex: number, customProps?: Pick<TableElement, 'pinned'>) => void;
+    pinColumn: (columnIndex: number) => void;
+    unpinColumn: () => void;
+    pinRow: (rowIndex: number) => void;
+    unpinRow: () => void;
+    isColumnPinned: (columnIndex: number) => boolean;
+    isRowPinned: (rowIndex: number) => boolean;
+    isReachMaximumColumns: boolean;
+    isReachMaximumRows: boolean;
+    isReachMinimumNormalColumns: boolean;
+    isReachMinimumBodyRows: boolean;
+    tableSelectedOn: {
+        region: 'table' | 'header' | 'row' | 'column';
+        index?: number;
+    } | undefined;
+    setTableSelectedOn: Dispatch<SetStateAction<TableContextType['tableSelectedOn']>>;
+    tableHoveredOn: {
+        columnIndex: number;
+        rowIndex: number;
+    } | undefined;
+    setTableHoveredOn: Dispatch<SetStateAction<TableContextType['tableHoveredOn']>>;
+};
+export type TableScrollContextType = {
+    scrollRef: RefObject<HTMLDivElement | null>;
+    scrollTop: number;
+    scrollLeft: number;
+};
+export type RenderTableElementProps = RenderElementProps<TableElement>;
+export type TableRenderElements = Record<TableTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableTitleTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableMainTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableHeaderTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableBodyTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableRowTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined> & Record<TableCellTypeKey, (props: RenderElementProps<TableElement>) => JSX.Element | null | undefined>;
+export type ReactTableCreateRenderElementOptions = {
+    [K in TableTypeKey | TableTitleTypeKey | TableMainTypeKey | TableHeaderTypeKey | TableBodyTypeKey | TableRowTypeKey | TableCellTypeKey]?: TableRenderElements[K];
+};
+export interface ReactTable extends Omit<Table<Editor>, 'with'>, WithCreateHandlers, WithCreateRenderElement<[ReactTableCreateRenderElementOptions?]>, ReactWithable {
+}

package/table/utils/helper.d.ts

@@ -0,0 +1,160 @@
+import { Element } from '@quadrats/core';
+import { TableElement, ColumnWidth } from '@quadrats/common/table';
+import { QuadratsReactEditor } from '@quadrats/react';
+import { AlignValue } from '@quadrats/common/align';
+export interface TableElements {
+    tableMainElement: TableElement | null;
+    tableBodyElement: TableElement | null;
+    tableHeaderElement: TableElement | null;
+}
+export interface TablePaths {
+    tableMainPath: number[];
+    tableBodyPath: number[];
+    tableHeaderPath: number[] | null;
+}
+export interface TableStructure extends TableElements, TablePaths {
+    headerRowCount: number;
+    columnCount: number;
+    firstRow: Element | null;
+}
+/**
+ * 提取表格的所有基本元素
+ */
+export declare function getTableElements(element: TableElement): TableElements;
+/**
+ * 獲取表格的完整結構
+ */
+export declare function getTableStructure(editor: QuadratsReactEditor, element: TableElement): TableStructure | null;
+/**
+ * 檢查列是否有 pinned cells
+ */
+export declare function hasColumnPinnedCells(tableStructure: TableStructure, columnIndex: number): boolean;
+/**
+ * 檢查是否有任何 pinned columns
+ */
+export declare function hasAnyPinnedColumns(tableStructure: TableStructure): boolean;
+/**
+ * 檢查是否有任何 pinned rows
+ */
+export declare function hasAnyPinnedRows(tableStructure: TableStructure): boolean;
+/**
+ * 創建新的 table cell
+ */
+export declare function createTableCell(referenceCell?: TableElement, overrideProps?: Partial<TableElement>): TableElement;
+/**
+ * 獲取參考 row
+ */
+export declare function getReferenceRowFromHeaderOrBody(HeaderOrBodyContainer: TableElement, rowIndex: number): TableElement | undefined;
+/**
+ * 收集指定範圍的 cells
+ * @param tableStructure - 表格結構
+ * @param scope - 'table' | 'column'
+ * @param columnIndex - 當 scope 為 'column' 時需要指定
+ * @returns cells 陣列
+ */
+export declare function collectCells(tableStructure: TableStructure, scope: 'table' | 'column', columnIndex?: number): Element[];
+/**
+ * 設定指定 cells 的 align
+ * @param editor - Slate editor
+ * @param cells - 要設定 align 的 cell 元素陣列
+ * @param alignValue - align 值
+ */
+export declare function setAlignForCells(editor: QuadratsReactEditor, cells: Element[], alignValue: AlignValue): void;
+/**
+ * 獲取指定 cells 的 align 狀態
+ * @param cells - 要檢查的 cell 元素陣列
+ * @returns 如果所有 cell 的 align 都相同則返回該值，否則返回 'left'
+ */
+export declare function getAlignFromCells(cells: Element[]): AlignValue;
+/**
+ * 獲取釘選欄位的資訊
+ * @param tableElement - 表格最外層元素
+ * @returns 釘選欄位的索引陣列和總寬度百分比
+ */
+export declare function getPinnedColumnsInfo(tableElement: TableElement): {
+    pinnedColumnIndices: number[];
+    totalPinnedPercentage: number;
+};
+/**
+ * 強制調整釘選欄位寬度以符合最大限制
+ * @param columnWidths - 當前欄位寬度陣列
+ * @param pinnedColumnIndices - 釘選欄位索引陣列
+ * @returns 調整後的欄位寬度陣列
+ */
+export declare function enforcePinnedColumnsMaxWidth(columnWidths: ColumnWidth[], pinnedColumnIndices: number[]): ColumnWidth[];
+/**
+ * 獲取表格的欄位寬度陣列
+ * 當有釘選欄位時：
+ * - 釘選欄位使用 percentage
+ * - 未釘選欄位使用 pixel（基於剩餘空間平均分配）
+ * @param tableElement - 表格最外層元素
+ * @param tableWidth - 表格容器的實際寬度（pixel），用於計算 pixel 寬度
+ * @returns 欄位寬度陣列
+ */
+export declare function getColumnWidths(tableElement: TableElement, tableWidth?: number): ColumnWidth[];
+/**
+ * 設定表格的欄位寬度
+ * @param editor - Slate editor
+ * @param tableElement - 表格最外層元素
+ * @param columnWidths - 欄位寬度陣列
+ */
+export declare function setColumnWidths(editor: QuadratsReactEditor, tableElement: TableElement, columnWidths: ColumnWidth[]): void;
+/**
+ * 計算新增欄位後的欄位寬度
+ * - 如果所有欄位都是 percentage：按比例縮減現有欄位，新欄位佔平均寬度
+ * - 如果有混合模式（percentage + pixel）：
+ *   * percentage 欄位（pinned）保持不變
+ *   * 新欄位使用 pixel（與其他 pixel 欄位平均分配剩餘空間）
+ *
+ * @param currentWidths - 當前的欄位寬度陣列
+ * @param insertIndex - 新欄位插入的位置（0-based）
+ * @returns 新的欄位寬度陣列
+ */
+export declare function calculateColumnWidthsAfterAdd(currentWidths: ColumnWidth[], insertIndex: number): ColumnWidth[];
+/**
+ * 計算刪除欄位後的欄位寬度
+ * 此函數會智慧處理欄位寬度的重新分配：
+ * - 如果所有欄位都是 percentage：按比例放大剩餘欄位
+ * - 如果有 pixel 欄位：保持 pixel 欄位不變，只調整 percentage 欄位
+ *
+ * @param currentWidths - 當前的欄位寬度陣列
+ * @param deleteIndex - 要刪除的欄位索引（0-based）
+ * @returns 新的欄位寬度陣列
+ */
+export declare function calculateColumnWidthsAfterDelete(currentWidths: ColumnWidth[], deleteIndex: number): ColumnWidth[];
+/**
+ * 計算拖曳後的欄位寬度
+ * 處理釘選欄位的特殊邏輯：
+ * - 情況 1：未釘選欄位（pixel）與未釘選欄位（pixel）之間：直接改變 pixel 值，允許超出容器
+ * - 情況 2：釘選欄位（percentage）與釘選欄位（percentage）之間：互相調整，且總和不超過 40%
+ * - 情況 3：釘選欄位（percentage）與未釘選欄位（pixel）之間：
+ *   * 只調整釘選欄位的百分比（不超過 40% 總限制）
+ *   * 當 table 未溢出（寬度 < container）時，重新計算所有未釘選欄位的 pixel 值以維持 100%
+ *   * 當 table 已溢出時，只調整下一個欄位的 pixel 值
+ *   * 當達到 40% 上限時，停止調整
+ * - 預設情況：兩個都是 percentage 但都不是釘選欄位（正常模式）
+ *
+ * @param currentWidths - 當前的欄位寬度陣列
+ * @param columnIndex - 被調整的欄位索引
+ * @param deltaPercentage - 寬度變化量（百分比）
+ * @param deltaPixel - 寬度變化量（pixel）
+ * @param pinnedColumnIndices - 釘選欄位的索引陣列
+ * @returns 新的欄位寬度陣列
+ */
+export declare function calculateResizedColumnWidths(currentWidths: ColumnWidth[], columnIndex: number, deltaPercentage: number, deltaPixel: number, pinnedColumnIndices?: number[]): ColumnWidth[];
+/**
+ * 移動 columnWidths 陣列中的元素位置
+ * @param currentWidths - 當前的欄位寬度陣列
+ * @param fromIndex - 來源索引
+ * @param toIndex - 目標索引
+ * @returns 新的欄位寬度陣列
+ */
+export declare function moveColumnWidth(currentWidths: ColumnWidth[], fromIndex: number, toIndex: number): ColumnWidth[];
+/**
+ * 將 columnWidths 轉換為混合模式（釘選欄位用 percentage，未釘選欄位用 pixel）
+ * @param currentWidths - 當前的欄位寬度陣列
+ * @param pinnedColumnIndices - 釘選欄位的索引陣列
+ * @param tableWidth - 表格的實際寬度（pixel）
+ * @returns 轉換後的欄位寬度陣列
+ */
+export declare function convertToMixedWidthMode(currentWidths: ColumnWidth[], pinnedColumnIndices: number[], tableWidth: number): ColumnWidth[];