@fluentui/react-table 9.0.0-rc.4 → 9.0.0

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<TableRowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableSelectionOptions {\n  /**\n   * Can be multi or single select\n   */\n  selectionMode: SelectionMode;\n  /**\n   * Used in uncontrolled mode to set initial selected rows on mount\n   */\n  defaultSelectedItems?: Set<TableRowId>;\n  /**\n   * Used to control row selection\n   */\n  selectedItems?: Set<TableRowId>;\n  /**\n   * Called when selection changes\n   */\n  onSelectionChange?(e: React.SyntheticEvent, data: OnSelectionChangeData): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent<HTMLElement>) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (e: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (e: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  containerWidthOffset?: number;\n};\n"]}

package/lib/hooks/useMeasureElement.js

@@ -0,0 +1,48 @@
+import { canUseDOM } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * Provides a way of reporting element width.
+ * Returns
+ * `width` - current element width (0 by default),
+ * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure
+ */
+export function useMeasureElement() {
+  const [width, setWidth] = React.useState(0);
+  const container = React.useRef(undefined);
+  const {
+    targetDocument
+  } = useFluent();
+  // the handler for resize observer
+  const handleResize = React.useCallback(() => {
+    var _a;
+    const containerWidth = (_a = container.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+    setWidth(containerWidth || 0);
+  }, []);
+  // Keep the reference of ResizeObserver in the state, as it should live through renders
+  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);
+  const measureElementRef = React.useCallback(el => {
+    if (!targetDocument || !resizeObserver) {
+      return;
+    }
+    // cleanup previous container
+    if (container.current) {
+      resizeObserver.unobserve(container.current);
+      container.current.remove();
+    }
+    if (el) {
+      container.current = targetDocument.createElement('div');
+      el.insertAdjacentElement('beforebegin', container.current);
+      resizeObserver.observe(container.current);
+      handleResize();
+    }
+  }, [targetDocument, resizeObserver, handleResize]);
+  React.useEffect(() => {
+    return () => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+  }, [resizeObserver]);
+  return {
+    width,
+    measureElementRef
+  };
+}
+//# sourceMappingURL=useMeasureElement.js.map

package/lib/hooks/useMeasureElement.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,SAASA,SAAS,QAAQ,2BAA2B;AACrD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAEjF;;;;;;AAMA,OAAM,SAAUC,iBAAiB;EAC/B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,KAAK,CAACM,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAMC,SAAS,GAAGP,KAAK,CAACQ,MAAM,CAA0BC,SAAS,CAAC;EAElE,MAAM;IAAEC;EAAc,CAAE,GAAGR,SAAS,EAAE;EAEtC;EACA,MAAMS,YAAY,GAAGX,KAAK,CAACY,WAAW,CAAC,MAAK;;IAC1C,MAAMC,cAAc,GAAG,eAAS,CAACC,OAAO,0CAAEC,qBAAqB,GAAGX,KAAK;IACvEC,QAAQ,CAACQ,cAAc,IAAI,CAAC,CAAC;EAC/B,CAAC,EAAE,EAAE,CAAC;EAEN;EACA,MAAM,CAACG,cAAc,CAAC,GAAGhB,KAAK,CAACM,QAAQ,CAACP,SAAS,EAAE,GAAG,IAAIkB,cAAc,CAACN,YAAY,CAAC,GAAGF,SAAS,CAAC;EACnG,MAAMS,iBAAiB,GAAGlB,KAAK,CAACY,WAAW,CACxCO,EAAmB,IAAI;IACtB,IAAI,CAACT,cAAc,IAAI,CAACM,cAAc,EAAE;MACtC;;IAGF;IACA,IAAIT,SAAS,CAACO,OAAO,EAAE;MACrBE,cAAc,CAACI,SAAS,CAACb,SAAS,CAACO,OAAO,CAAC;MAC3CP,SAAS,CAACO,OAAO,CAACO,MAAM,EAAE;;IAG5B,IAAIF,EAAE,EAAE;MACNZ,SAAS,CAACO,OAAO,GAAGJ,cAAc,CAACY,aAAa,CAAC,KAAK,CAAC;MACvDH,EAAE,CAACI,qBAAqB,CAAC,aAAa,EAAEhB,SAAS,CAACO,OAAO,CAAC;MAC1DE,cAAc,CAACQ,OAAO,CAACjB,SAAS,CAACO,OAAO,CAAC;MACzCH,YAAY,EAAE;;EAElB,CAAC,EACD,CAACD,cAAc,EAAEM,cAAc,EAAEL,YAAY,CAAC,CAC/C;EAEDX,KAAK,CAACyB,SAAS,CAAC,MAAK;IACnB,OAAO,MAAMT,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEU,UAAU,EAAE;EAC3C,CAAC,EAAE,CAACV,cAAc,CAAC,CAAC;EAEpB,OAAO;IAAEZ,KAAK;IAAEc;EAAiB,CAAE;AACrC","names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n  const [width, setWidth] = React.useState(0);\n  const container = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n\n  // the handler for resize observer\n  const handleResize = React.useCallback(() => {\n    const containerWidth = container.current?.getBoundingClientRect().width;\n    setWidth(containerWidth || 0);\n  }, []);\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument || !resizeObserver) {\n        return;\n      }\n\n      // cleanup previous container\n      if (container.current) {\n        resizeObserver.unobserve(container.current);\n        container.current.remove();\n      }\n\n      if (el) {\n        container.current = targetDocument.createElement('div');\n        el.insertAdjacentElement('beforebegin', container.current);\n        resizeObserver.observe(container.current);\n        handleResize();\n      }\n    },\n    [targetDocument, resizeObserver, handleResize],\n  );\n\n  React.useEffect(() => {\n    return () => resizeObserver?.disconnect();\n  }, [resizeObserver]);\n\n  return { width, measureElementRef };\n}\n"]}

package/lib/hooks/useTableColumnResizeMouseHandler.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+export function useTableColumnResizeMouseHandler(columnResizeState) {
+  const mouseX = React.useRef(0);
+  const currentWidth = React.useRef(0);
+  const colId = React.useRef(undefined);
+  const {
+    targetDocument
+  } = useFluent();
+  const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+  const handleMouseMove = React.useCallback(e => {
+    const dx = e.clientX - mouseX.current;
+    // Update the local width for the column and set it
+    currentWidth.current += dx;
+    colId.current && columnResizeState.setColumnWidth(e, {
+      columnId: colId.current,
+      width: currentWidth.current
+    });
+    mouseX.current = e.clientX;
+  }, [columnResizeState]);
+  const onMouseMove = React.useCallback(e => {
+    // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
+    if (typeof (globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame) === 'function') {
+      requestAnimationFrame(() => handleMouseMove(e));
+    } else {
+      handleMouseMove(e);
+    }
+  }, [globalWin === null || globalWin === void 0 ? void 0 : globalWin.requestAnimationFrame, handleMouseMove]);
+  const onMouseUp = React.useCallback(e => {
+    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mouseup', onMouseUp);
+    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('mousemove', onMouseMove);
+  }, [onMouseMove, targetDocument]);
+  const getOnMouseDown = columnId => mouseDownEvent => {
+    // ignore other buttons than primary mouse button
+    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {
+      return;
+    }
+    // Keep the width locally so that we decouple the calculation of the next with from rendering.
+    // This makes the whole experience much faster and more precise
+    currentWidth.current = columnResizeState.getColumnWidth(columnId);
+    mouseX.current = mouseDownEvent.clientX;
+    colId.current = columnId;
+    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mouseup', onMouseUp);
+    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('mousemove', onMouseMove);
+  };
+  return {
+    getOnMouseDown: columnId => getOnMouseDown(columnId)
+  };
+}
+//# sourceMappingURL=useTableColumnResizeMouseHandler.js.map

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAEjF,OAAM,SAAUC,gCAAgC,CAACC,iBAAoC;EACnF,MAAMC,MAAM,GAAGL,KAAK,CAACM,MAAM,CAAC,CAAC,CAAC;EAC9B,MAAMC,YAAY,GAAGP,KAAK,CAACM,MAAM,CAAC,CAAC,CAAC;EACpC,MAAME,KAAK,GAAGR,KAAK,CAACM,MAAM,CAA4BG,SAAS,CAAC;EAEhE,MAAM;IAAEC;EAAc,CAAE,GAAGR,SAAS,EAAE;EACtC,MAAMS,SAAS,GAAGD,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEE,WAAW;EAE7C,MAAMC,eAAe,GAAGb,KAAK,CAACc,WAAW,CACtCC,CAAa,IAAI;IAChB,MAAMC,EAAE,GAAGD,CAAC,CAACE,OAAO,GAAGZ,MAAM,CAACa,OAAO;IAErC;IACAX,YAAY,CAACW,OAAO,IAAIF,EAAE;IAC1BR,KAAK,CAACU,OAAO,IAAId,iBAAiB,CAACe,cAAc,CAACJ,CAAC,EAAE;MAAEK,QAAQ,EAAEZ,KAAK,CAACU,OAAO;MAAEG,KAAK,EAAEd,YAAY,CAACW;IAAO,CAAE,CAAC;IAC9Gb,MAAM,CAACa,OAAO,GAAGH,CAAC,CAACE,OAAO;EAC5B,CAAC,EACD,CAACb,iBAAiB,CAAC,CACpB;EAED,MAAMkB,WAAW,GAAGtB,KAAK,CAACc,WAAW,CAClCC,CAAa,IAAI;IAChB;IACA,IAAI,QAAOJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,qBAAqB,MAAK,UAAU,EAAE;MAC1DA,qBAAqB,CAAC,MAAMV,eAAe,CAACE,CAAC,CAAC,CAAC;KAChD,MAAM;MACLF,eAAe,CAACE,CAAC,CAAC;;EAEtB,CAAC,EACD,CAACJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,qBAAqB,EAAEV,eAAe,CAAC,CACpD;EAED,MAAMW,SAAS,GAAGxB,KAAK,CAACc,WAAW,CAChCC,CAAa,IAAI;IAChBL,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEe,mBAAmB,CAAC,SAAS,EAAED,SAAS,CAAC;IACzDd,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEe,mBAAmB,CAAC,WAAW,EAAEH,WAAW,CAAC;EAC/D,CAAC,EACD,CAACA,WAAW,EAAEZ,cAAc,CAAC,CAC9B;EAED,MAAMgB,cAAc,GAAIN,QAAuB,IAAMO,cAA6C,IAAI;IACpG;IACA,IAAIA,cAAc,CAACC,MAAM,KAAKD,cAAc,CAACE,aAAa,IAAIF,cAAc,CAACG,MAAM,KAAK,CAAC,EAAE;MACzF;;IAEF;IACA;IACAvB,YAAY,CAACW,OAAO,GAAGd,iBAAiB,CAAC2B,cAAc,CAACX,QAAQ,CAAC;IACjEf,MAAM,CAACa,OAAO,GAAGS,cAAc,CAACV,OAAO;IACvCT,KAAK,CAACU,OAAO,GAAGE,QAAQ;IAExBV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEsB,gBAAgB,CAAC,SAAS,EAAER,SAAS,CAAC;IACtDd,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEsB,gBAAgB,CAAC,WAAW,EAAEV,WAAW,CAAC;EAC5D,CAAC;EAED,OAAO;IACLI,cAAc,EAAGN,QAAuB,IAAKM,cAAc,CAACN,QAAQ;GACrE;AACH","names":["React","useFluent_unstable","useFluent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","handleMouseMove","useCallback","e","dx","clientX","current","setColumnWidth","columnId","width","onMouseMove","requestAnimationFrame","onMouseUp","removeEventListener","getOnMouseDown","mouseDownEvent","target","currentTarget","button","getColumnWidth","addEventListener"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const handleMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      const dx = e.clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = e.clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => handleMouseMove(e));\n      } else {\n        handleMouseMove(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, handleMouseMove],\n  );\n\n  const onMouseUp = React.useCallback(\n    (e: MouseEvent) => {\n      targetDocument?.removeEventListener('mouseup', onMouseUp);\n      targetDocument?.removeEventListener('mousemove', onMouseMove);\n    },\n    [onMouseMove, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (mouseDownEvent: React.MouseEvent<HTMLElement>) => {\n    // ignore other buttons than primary mouse button\n    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {\n      return;\n    }\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = mouseDownEvent.clientX;\n    colId.current = columnId;\n\n    targetDocument?.addEventListener('mouseup', onMouseUp);\n    targetDocument?.addEventListener('mousemove', onMouseMove);\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}

package/lib/hooks/useTableColumnResizeState.js

@@ -0,0 +1,112 @@
+import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { columnDefinitionsToState, adjustColumnWidthsToFitContainer, getColumnById, setColumnProperty, getColumnWidth } from '../utils/columnResizeUtils';
+const createReducer = () => (state, action) => {
+  switch (action.type) {
+    case 'CONTAINER_WIDTH_UPDATED':
+      return {
+        ...state,
+        containerWidth: action.containerWidth,
+        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth)
+      };
+    case 'COLUMNS_UPDATED':
+      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);
+      return {
+        ...state,
+        columns: action.columns,
+        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth)
+      };
+    case 'COLUMN_SIZING_OPTIONS_UPDATED':
+      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);
+      return {
+        ...state,
+        columnSizingOptions: action.columnSizingOptions,
+        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth)
+      };
+    case 'SET_COLUMN_WIDTH':
+      const {
+        columnId,
+        width
+      } = action;
+      const {
+        containerWidth
+      } = state;
+      const column = getColumnById(state.columnWidthState, columnId);
+      let newColumnWidthState = [...state.columnWidthState];
+      if (!column) {
+        return state;
+      }
+      // Adjust the column width and measure the new total width
+      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);
+      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container
+      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);
+      // Adjust the widths to the container size
+      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);
+      return {
+        ...state,
+        columnWidthState: newColumnWidthState
+      };
+  }
+};
+export function useTableColumnResizeState(columns, containerWidth, params = {}) {
+  const {
+    onColumnResize,
+    columnSizingOptions
+  } = params;
+  const reducer = React.useMemo(() => createReducer(), []);
+  const [state, dispatch] = React.useReducer(reducer, {
+    columns,
+    containerWidth: 0,
+    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),
+    columnSizingOptions
+  });
+  useIsomorphicLayoutEffect(() => {
+    dispatch({
+      type: 'CONTAINER_WIDTH_UPDATED',
+      containerWidth
+    });
+  }, [containerWidth]);
+  useIsomorphicLayoutEffect(() => {
+    dispatch({
+      type: 'COLUMNS_UPDATED',
+      columns
+    });
+  }, [columns]);
+  useIsomorphicLayoutEffect(() => {
+    dispatch({
+      type: 'COLUMN_SIZING_OPTIONS_UPDATED',
+      columnSizingOptions
+    });
+  }, [columnSizingOptions]);
+  const setColumnWidth = useEventCallback((event, data) => {
+    let {
+      width
+    } = data;
+    const {
+      columnId
+    } = data;
+    const col = getColumnById(state.columnWidthState, columnId);
+    if (!col) {
+      return;
+    }
+    width = Math.max(col.minWidth || 0, width);
+    if (onColumnResize) {
+      onColumnResize(event, {
+        columnId,
+        width
+      });
+    }
+    dispatch({
+      type: 'SET_COLUMN_WIDTH',
+      columnId,
+      width
+    });
+  });
+  return {
+    getColumnById: colId => getColumnById(state.columnWidthState, colId),
+    getColumns: () => state.columnWidthState,
+    getColumnWidth: colId => getColumnWidth(state.columnWidthState, colId),
+    setColumnWidth
+  };
+}
+//# sourceMappingURL=useTableColumnResizeState.js.map

package/lib/hooks/useTableColumnResizeState.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,SAASA,gBAAgB,EAAEC,yBAAyB,QAAQ,2BAA2B;AACvF,OAAO,KAAKC,KAAK,MAAM,OAAO;AAS9B,SACEC,wBAAwB,EACxBC,gCAAgC,EAChCC,aAAa,EACbC,iBAAiB,EACjBC,cAAc,QACT,4BAA4B;AA4BnC,MAAMC,aAAa,GAAG,MAAS,CAACC,KAAwB,EAAEC,MAAkC,KAAuB;EACjH,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAK,yBAAyB;MAC5B,OAAO;QACL,GAAGF,KAAK;QACRG,cAAc,EAAEF,MAAM,CAACE,cAAc;QACrCC,gBAAgB,EAAET,gCAAgC,CAACK,KAAK,CAACI,gBAAgB,EAAEH,MAAM,CAACE,cAAc;OACjG;IAEH,KAAK,iBAAiB;MACpB,MAAME,IAAI,GAAGX,wBAAwB,CAACO,MAAM,CAACK,OAAO,EAAEN,KAAK,CAACI,gBAAgB,EAAEJ,KAAK,CAACO,mBAAmB,CAAC;MACxG,OAAO;QACL,GAAGP,KAAK;QACRM,OAAO,EAAEL,MAAM,CAACK,OAAO;QACvBF,gBAAgB,EAAET,gCAAgC,CAACU,IAAI,EAAEL,KAAK,CAACG,cAAc;OAC9E;IAEH,KAAK,+BAA+B;MAClC,MAAMK,QAAQ,GAAGd,wBAAwB,CAACM,KAAK,CAACM,OAAO,EAAEN,KAAK,CAACI,gBAAgB,EAAEH,MAAM,CAACM,mBAAmB,CAAC;MAC5G,OAAO;QACL,GAAGP,KAAK;QACRO,mBAAmB,EAAEN,MAAM,CAACM,mBAAmB;QAC/CH,gBAAgB,EAAET,gCAAgC,CAACa,QAAQ,EAAER,KAAK,CAACG,cAAc;OAClF;IAEH,KAAK,kBAAkB;MACrB,MAAM;QAAEM,QAAQ;QAAEC;MAAK,CAAE,GAAGT,MAAM;MAClC,MAAM;QAAEE;MAAc,CAAE,GAAGH,KAAK;MAEhC,MAAMW,MAAM,GAAGf,aAAa,CAACI,KAAK,CAACI,gBAAgB,EAAEK,QAAQ,CAAC;MAC9D,IAAIG,mBAAmB,GAAG,CAAC,GAAGZ,KAAK,CAACI,gBAAgB,CAAC;MAErD,IAAI,CAACO,MAAM,EAAE;QACX,OAAOX,KAAK;;MAGd;MACAY,mBAAmB,GAAGf,iBAAiB,CAACe,mBAAmB,EAAEH,QAAQ,EAAE,OAAO,EAAEC,KAAK,CAAC;MACtF;MACAE,mBAAmB,GAAGf,iBAAiB,CAACe,mBAAmB,EAAEH,QAAQ,EAAE,YAAY,EAAEC,KAAK,CAAC;MAC3F;MACAE,mBAAmB,GAAGjB,gCAAgC,CAACiB,mBAAmB,EAAET,cAAc,CAAC;MAE3F,OAAO;QAAE,GAAGH,KAAK;QAAEI,gBAAgB,EAAEQ;MAAmB,CAAE;EAAC;AAEjE,CAAC;AAED,OAAM,SAAUC,yBAAyB,CACvCP,OAAmC,EACnCH,cAAsB,EACtBW,SAAqC,EAAE;EAEvC,MAAM;IAAEC,cAAc;IAAER;EAAmB,CAAE,GAAGO,MAAM;EAEtD,MAAME,OAAO,GAAGvB,KAAK,CAACwB,OAAO,CAAC,MAAMlB,aAAa,EAAK,EAAE,EAAE,CAAC;EAE3D,MAAM,CAACC,KAAK,EAAEkB,QAAQ,CAAC,GAAGzB,KAAK,CAAC0B,UAAU,CAACH,OAAO,EAAE;IAClDV,OAAO;IACPH,cAAc,EAAE,CAAC;IACjBC,gBAAgB,EAAEV,wBAAwB,CAACY,OAAO,EAAEc,SAAS,EAAEb,mBAAmB,CAAC;IACnFA;GACD,CAAC;EAEFf,yBAAyB,CAAC,MAAK;IAC7B0B,QAAQ,CAAC;MAAEhB,IAAI,EAAE,yBAAyB;MAAEC;IAAc,CAAE,CAAC;EAC/D,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpBX,yBAAyB,CAAC,MAAK;IAC7B0B,QAAQ,CAAC;MAAEhB,IAAI,EAAE,iBAAiB;MAAEI;IAAO,CAAE,CAAC;EAChD,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEbd,yBAAyB,CAAC,MAAK;IAC7B0B,QAAQ,CAAC;MAAEhB,IAAI,EAAE,+BAA+B;MAAEK;IAAmB,CAAE,CAAC;EAC1E,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,MAAMc,cAAc,GAAG9B,gBAAgB,CACrC,CAAC+B,KAA6B,EAAEC,IAAgD,KAAI;IAClF,IAAI;MAAEb;IAAK,CAAE,GAAGa,IAAI;IACpB,MAAM;MAAEd;IAAQ,CAAE,GAAGc,IAAI;IACzB,MAAMC,GAAG,GAAG5B,aAAa,CAACI,KAAK,CAACI,gBAAgB,EAAEK,QAAQ,CAAC;IAC3D,IAAI,CAACe,GAAG,EAAE;MACR;;IAGFd,KAAK,GAAGe,IAAI,CAACC,GAAG,CAACF,GAAG,CAACG,QAAQ,IAAI,CAAC,EAAEjB,KAAK,CAAC;IAE1C,IAAIK,cAAc,EAAE;MAClBA,cAAc,CAACO,KAAK,EAAE;QAAEb,QAAQ;QAAEC;MAAK,CAAE,CAAC;;IAE5CQ,QAAQ,CAAC;MAAEhB,IAAI,EAAE,kBAAkB;MAAEO,QAAQ;MAAEC;IAAK,CAAE,CAAC;EACzD,CAAC,CACF;EAED,OAAO;IACLd,aAAa,EAAGgC,KAAoB,IAAKhC,aAAa,CAACI,KAAK,CAACI,gBAAgB,EAAEwB,KAAK,CAAC;IACrFC,UAAU,EAAE,MAAM7B,KAAK,CAACI,gBAAgB;IACxCN,cAAc,EAAG8B,KAAoB,IAAK9B,cAAc,CAACE,KAAK,CAACI,gBAAgB,EAAEwB,KAAK,CAAC;IACvFP;GACD;AACH","names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}

package/lib/hooks/useTableColumnSizing.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { useTableColumnResizeState } from './useTableColumnResizeState';
+import { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';
+import { useMeasureElement } from './useMeasureElement';
+import { TableResizeHandle } from '../TableResizeHandle';
+export const defaultColumnSizingState = {
+  getColumnWidths: () => [],
+  getOnMouseDown: () => () => null,
+  setColumnWidth: () => null,
+  getTableHeaderCellProps: () => ({
+    style: {},
+    columnId: ''
+  }),
+  getTableCellProps: () => ({
+    style: {},
+    columnId: ''
+  })
+};
+export function useTableColumnSizing_unstable(params) {
+  // False positive, these plugin hooks are intended to be run on every render
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return tableState => useTableColumnSizingState(tableState, params);
+}
+function getColumnStyles(column) {
+  const width = column.width;
+  return {
+    // native styles
+    width,
+    // non-native element styles (flex layout)
+    minWidth: width,
+    maxWidth: width
+  };
+}
+function useTableColumnSizingState(tableState, params) {
+  const {
+    columns
+  } = tableState;
+  // Gets the container width
+  const {
+    width,
+    measureElementRef
+  } = useMeasureElement();
+  // Creates the state based on columns and available containerWidth
+  const columnResizeState = useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);
+  // Creates the mouse handler and attaches the state to it
+  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);
+  return {
+    ...tableState,
+    tableRef: measureElementRef,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    columnSizing_unstable: {
+      getOnMouseDown: mouseHandler.getOnMouseDown,
+      setColumnWidth: (columnId, w) => columnResizeState.setColumnWidth(undefined, {
+        columnId,
+        width: w
+      }),
+      getColumnWidths: columnResizeState.getColumns,
+      getTableHeaderCellProps: columnId => {
+        const col = columnResizeState.getColumnById(columnId);
+        const aside = /*#__PURE__*/React.createElement(TableResizeHandle, {
+          onMouseDown: mouseHandler.getOnMouseDown(columnId)
+        });
+        return col ? {
+          style: getColumnStyles(col),
+          aside
+        } : {};
+      },
+      getTableCellProps: columnId => {
+        const col = columnResizeState.getColumnById(columnId);
+        return col ? {
+          style: getColumnStyles(col)
+        } : {};
+      }
+    }
+  };
+}
+//# sourceMappingURL=useTableColumnSizing.js.map

package/lib/hooks/useTableColumnSizing.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAQ9B,SAASC,yBAAyB,QAAQ,6BAA6B;AACvE,SAASC,gCAAgC,QAAQ,oCAAoC;AACrF,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,OAAO,MAAMC,wBAAwB,GAA2B;EAC9DC,eAAe,EAAE,MAAM,EAAE;EACzBC,cAAc,EAAE,MAAM,MAAM,IAAI;EAChCC,cAAc,EAAE,MAAM,IAAI;EAC1BC,uBAAuB,EAAE,OAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAE,OAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,OAAM,SAAUE,6BAA6B,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAEA,SAASG,eAAe,CAACC,MAAwB;EAC/C,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;EAE1B,OAAO;IACL;IACAA,KAAK;IACL;IACAC,QAAQ,EAAED,KAAK;IACfE,QAAQ,EAAEF;GACX;AACH;AAEA,SAASH,yBAAyB,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGpB,iBAAiB,EAAE;EACxD;EACA,MAAMqB,iBAAiB,GAAGvB,yBAAyB,CAACqB,OAAO,EAAEH,KAAK,IAAI,OAAM,aAANL,MAAM,uBAANA,MAAM,CAAEW,oBAAoB,KAAI,CAAC,CAAC,EAAEX,MAAM,CAAC;EACjH;EACA,MAAMY,YAAY,GAAGxB,gCAAgC,CAACsB,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGT,UAAU;IACbY,QAAQ,EAAEJ,iBAAiB;IAC3B;IACAK,qBAAqB,EAAE;MACrBrB,cAAc,EAAEmB,YAAY,CAACnB,cAAc;MAC3CC,cAAc,EAAE,CAACG,QAAuB,EAAEkB,CAAS,KACjDL,iBAAiB,CAAChB,cAAc,CAACsB,SAAS,EAAE;QAAEnB,QAAQ;QAAEQ,KAAK,EAAEU;MAAC,CAAE,CAAC;MACrEvB,eAAe,EAAEkB,iBAAiB,CAACO,UAAU;MAC7CtB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMqB,GAAG,GAAGR,iBAAiB,CAACS,aAAa,CAACtB,QAAQ,CAAC;QACrD,MAAMuB,KAAK,gBAAGlC,oBAACI,iBAAiB;UAAC+B,WAAW,EAAET,YAAY,CAACnB,cAAc,CAACI,QAAQ;QAAC,EAAI;QACvF,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDtB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMqB,GAAG,GAAGR,iBAAiB,CAACS,aAAa,CAACtB,QAAQ,CAAC;QACrD,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG;QAAC,CAAE,GAAG,EAAE;MACnD;;GAEH;AACH","names":["React","useTableColumnResizeState","useTableColumnResizeMouseHandler","useMeasureElement","TableResizeHandle","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","onMouseDown"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = <TableResizeHandle onMouseDown={mouseHandler.getOnMouseDown(columnId)} />;\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}

package/lib/hooks/useTableFeatures.js

@@ -1,5 +1,7 @@
+import * as React from 'react';
 import { defaultTableSelectionState } from './useTableSelection';
 import { defaultTableSortState } from './useTableSort';
+import { defaultColumnSizingState } from './useTableColumnSizing';
 const defaultRowEnhancer = row => row;
 export const defaultTableState = {
   selection: defaultTableSelectionState,
@@ -7,7 +9,10 @@ export const defaultTableState = {
   getRows: () => [],
   getRowId: () => '',
   items: [],
-  columns: []
+  columns: [],
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  columnSizing_unstable: defaultColumnSizingState,
+  tableRef: /*#__PURE__*/React.createRef()
 };
 export function useTableFeatures(options, plugins = []) {
   const {
@@ -28,7 +33,10 @@ export function useTableFeatures(options, plugins = []) {
     columns,
     getRows,
     selection: defaultTableSelectionState,
-    sort: defaultTableSortState
+    sort: defaultTableSortState,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    columnSizing_unstable: defaultColumnSizingState,
+    tableRef: /*#__PURE__*/React.createRef()
   };
   return plugins.reduce((state, plugin) => plugin(state), initialState);
 }

package/lib/hooks/useTableFeatures.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAQA,SAASA,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,qBAAqB,QAAQ,gBAAgB;AAEtD,MAAMC,kBAAkB,GAAgDC,GAAG,IAAIA,GAAG;AAElF,OAAO,MAAMC,iBAAiB,GAAgC;EAC5DC,SAAS,EAAEL,0BAA0B;EACrCM,IAAI,EAAEL,qBAAqB;EAC3BM,OAAO,EAAE,MAAM,EAAE;EACjBC,QAAQ,EAAE,MAAM,EAAE;EAClBC,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE;CACV;AAED,OAAM,SAAUC,gBAAgB,CAC9BC,OAAuC,EACvCC,UAAgC,EAAE;EAElC,MAAM;IAAEJ,KAAK;IAAED,QAAQ;IAAEE;EAAO,CAAE,GAAGE,OAAO;EAE5C,MAAML,OAAO,GAAG,CACdO,cAAcZ,kBAAmD,KAC9DO,KAAK,CAACM,GAAG,CAAC,CAACC,IAAI,EAAEC,CAAC,KAAI;IAAA;IAAC,kBAAW,CAAC;MAAED,IAAI;MAAEE,KAAK,EAAE,cAAQ,aAARV,QAAQ,uBAARA,QAAQ,CAAGQ,IAAI,CAAC,mCAAIC;IAAC,CAAE,CAAC;EAAA,EAAC;EAEhF,MAAME,YAAY,GAA8B;IAC9CX,QAAQ;IACRC,KAAK;IACLC,OAAO;IACPH,OAAO;IACPF,SAAS,EAAEL,0BAA0B;IACrCM,IAAI,EAAEL;GACP;EAED,OAAOY,OAAO,CAACO,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,KAAKA,MAAM,CAACD,KAAK,CAAC,EAAEF,YAAY,CAAC;AACvE","names":["defaultTableSelectionState","defaultTableSortState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","useTableFeatures","options","plugins","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableFeatures.ts"],"sourcesContent":["import type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends TableRowData<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"]}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAS9B,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,wBAAwB,QAAQ,wBAAwB;AAEjE,MAAMC,kBAAkB,GAAgDC,GAAG,IAAIA,GAAG;AAElF,OAAO,MAAMC,iBAAiB,GAAgC;EAC5DC,SAAS,EAAEN,0BAA0B;EACrCO,IAAI,EAAEN,qBAAqB;EAC3BO,OAAO,EAAE,MAAM,EAAE;EACjBC,QAAQ,EAAE,MAAM,EAAE;EAClBC,KAAK,EAAE,EAAE;EACTC,OAAO,EAAE,EAAE;EACX;EACAC,qBAAqB,EAAEV,wBAAwB;EAC/CW,QAAQ,eAAEd,KAAK,CAACe,SAAS;CAC1B;AAED,OAAM,SAAUC,gBAAgB,CAC9BC,OAAuC,EACvCC,UAAgC,EAAE;EAElC,MAAM;IAAEP,KAAK;IAAED,QAAQ;IAAEE;EAAO,CAAE,GAAGK,OAAO;EAE5C,MAAMR,OAAO,GAAG,CACdU,cAAcf,kBAAmD,KAC9DO,KAAK,CAACS,GAAG,CAAC,CAACC,IAAI,EAAEC,CAAC,KAAI;IAAA;IAAC,kBAAW,CAAC;MAAED,IAAI;MAAEE,KAAK,EAAE,cAAQ,aAARb,QAAQ,uBAARA,QAAQ,CAAGW,IAAI,CAAC,mCAAIC;IAAC,CAAE,CAAC;EAAA,EAAC;EAEhF,MAAME,YAAY,GAA8B;IAC9Cd,QAAQ;IACRC,KAAK;IACLC,OAAO;IACPH,OAAO;IACPF,SAAS,EAAEN,0BAA0B;IACrCO,IAAI,EAAEN,qBAA8C;IACpD;IACAW,qBAAqB,EAAEV,wBAAwB;IAC/CW,QAAQ,eAAEd,KAAK,CAACe,SAAS;GAC1B;EAED,OAAOG,OAAO,CAACO,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,KAAKA,MAAM,CAACD,KAAK,CAAC,EAAEF,YAAY,CAAC;AACvE","names":["React","defaultTableSelectionState","defaultTableSortState","defaultColumnSizingState","defaultRowEnhancer","row","defaultTableState","selection","sort","getRows","getRowId","items","columns","columnSizing_unstable","tableRef","createRef","useTableFeatures","options","plugins","rowEnhancer","map","item","i","rowId","initialState","reduce","state","plugin"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableFeatures.ts"],"sourcesContent":["import * as React from 'react';\nimport type {\n  UseTableFeaturesOptions,\n  TableFeaturesState,\n  TableRowData,\n  RowEnhancer,\n  TableFeaturePlugin,\n  TableSortState,\n} from './types';\nimport { defaultTableSelectionState } from './useTableSelection';\nimport { defaultTableSortState } from './useTableSort';\nimport { defaultColumnSizingState } from './useTableColumnSizing';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, TableRowData<unknown>> = row => row;\n\nexport const defaultTableState: TableFeaturesState<unknown> = {\n  selection: defaultTableSelectionState,\n  sort: defaultTableSortState,\n  getRows: () => [],\n  getRowId: () => '',\n  items: [],\n  columns: [],\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: defaultColumnSizingState,\n  tableRef: React.createRef<HTMLDivElement>(),\n};\n\nexport function useTableFeatures<TItem>(\n  options: UseTableFeaturesOptions<TItem>,\n  plugins: TableFeaturePlugin[] = [],\n): TableFeaturesState<TItem> {\n  const { items, getRowId, columns } = options;\n\n  const getRows = <TRowState extends TableRowData<TItem>>(\n    rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n  ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n  const initialState: TableFeaturesState<TItem> = {\n    getRowId,\n    items,\n    columns,\n    getRows,\n    selection: defaultTableSelectionState,\n    sort: defaultTableSortState as TableSortState<TItem>,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: defaultColumnSizingState,\n    tableRef: React.createRef(),\n  };\n\n  return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"]}

package/lib/index.js

@@ -1,10 +1,11 @@
-export { useTableFeatures, useTableSelection, useTableSort, createTableColumn } from './hooks';
+export { useTableFeatures, useTableSelection, useTableSort, createTableColumn, useTableColumnSizing_unstable } from './hooks';
 export { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable } from './TableCell';
 export { TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable } from './TableRow';
 export { TableBody, tableBodyClassName, tableBodyClassNames, useTableBodyStyles_unstable, useTableBody_unstable, renderTableBody_unstable } from './TableBody';
 export { Table, tableClassName, tableClassNames, useTableStyles_unstable, useTable_unstable, renderTable_unstable } from './Table';
 export { TableHeader, tableHeaderClassNames, tableHeaderClassName, useTableHeaderStyles_unstable, useTableHeader_unstable, renderTableHeader_unstable } from './TableHeader';
 export { TableHeaderCell, tableHeaderCellClassName, tableHeaderCellClassNames, useTableHeaderCellStyles_unstable, useTableHeaderCell_unstable, renderTableHeaderCell_unstable } from './TableHeaderCell';
+export { TableResizeHandle, tableResizeHandleClassNames, useTableResizeHandleStyles_unstable, useTableResizeHandle_unstable, renderTableResizeHandle_unstable } from './TableResizeHandle';
 export { TableContextProvider, useTableContext } from './contexts/tableContext';
 export { useTableRowIdContext, TableRowIdContextProvider } from './contexts/rowIdContext';
 export { TableSelectionCell, useTableSelectionCellStyles_unstable, useTableSelectionCell_unstable, renderTableSelectionCell_unstable, tableSelectionCellClassNames } from './TableSelectionCell';
@@ -13,7 +14,7 @@ export { TableCellLayout, tableCellLayoutClassNames, useTableCellLayoutStyles_un
 export { DataGridCell, dataGridCellClassNames, useDataGridCellStyles_unstable, useDataGridCell_unstable, renderDataGridCell_unstable } from './DataGridCell';
 export { DataGridRow, dataGridRowClassNames, useDataGridRowStyles_unstable, useDataGridRow_unstable, renderDataGridRow_unstable } from './DataGridRow';
 export { DataGridBody, dataGridBodyClassNames, useDataGridBodyStyles_unstable, useDataGridBody_unstable, renderDataGridBody_unstable } from './DataGridBody';
-export { DataGrid, dataGridClassNames, useDataGridStyles_unstable, useDataGrid_unstable, renderDataGrid_unstable } from './DataGrid';
+export { DataGrid, dataGridClassNames, useDataGridStyles_unstable, useDataGrid_unstable, renderDataGrid_unstable, useDataGridContextValues_unstable } from './DataGrid';
 export { DataGridHeader, dataGridHeaderClassNames, useDataGridHeaderStyles_unstable, useDataGridHeader_unstable, renderDataGridHeader_unstable } from './DataGridHeader';
 export { DataGridHeaderCell, dataGridHeaderCellClassNames, useDataGridHeaderCellStyles_unstable, useDataGridHeaderCell_unstable, renderDataGridHeaderCell_unstable } from './DataGridHeaderCell';
 export { DataGridSelectionCell, useDataGridSelectionCellStyles_unstable, useDataGridSelectionCell_unstable, renderDataGridSelectionCell_unstable, dataGridSelectionCellClassNames } from './DataGridSelectionCell';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SAASA,gBAAgB,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,iBAAiB,QAAQ,SAAS;AAc9F,SACEC,SAAS,EACTC,mBAAmB,EACnBC,kBAAkB,EAClBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,wBAAwB,QACnB,aAAa;AAGpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,iBAAiB,EACjBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,QAClB,YAAY;AAGnB,SACEC,SAAS,EACTC,kBAAkB,EAClBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,wBAAwB,QACnB,aAAa;AAGpB,SACEC,KAAK,EACLC,cAAc,EACdC,eAAe,EACfC,uBAAuB,EACvBC,iBAAiB,EACjBC,oBAAoB,QACf,SAAS;AAGhB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,0BAA0B,QACrB,eAAe;AAGtB,SACEC,eAAe,EACfC,wBAAwB,EACxBC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,QACzB,mBAAmB;AAG1B,SAASC,oBAAoB,EAAEC,eAAe,QAAQ,yBAAyB;AAC/E,SAASC,oBAAoB,EAAEC,yBAAyB,QAAQ,yBAAyB;AACzF,SACEC,kBAAkB,EAClBC,oCAAoC,EACpCC,8BAA8B,EAC9BC,iCAAiC,EACjCC,4BAA4B,QACvB,sBAAsB;AAG7B,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,kCAAkC,EAClCC,4BAA4B,EAC5BC,+BAA+B,QAC1B,oBAAoB;AAG3B,SACEC,eAAe,EACfC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,QACzB,mBAAmB;AAG1B,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,QACtB,gBAAgB;AAGvB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,0BAA0B,QACrB,eAAe;AAGtB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,QACtB,gBAAgB;AAGvB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,QAClB,YAAY;AAUnB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,6BAA6B,QACxB,kBAAkB;AAGzB,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,oCAAoC,EACpCC,8BAA8B,EAC9BC,iCAAiC,QAC5B,sBAAsB;AAG7B,SACEC,qBAAqB,EACrBC,uCAAuC,EACvCC,iCAAiC,EACjCC,oCAAoC,EACpCC,+BAA+B,QAC1B,yBAAyB","names":["useTableFeatures","useTableSelection","useTableSort","createTableColumn","TableCell","tableCellClassNames","tableCellClassName","useTableCellStyles_unstable","useTableCell_unstable","renderTableCell_unstable","TableRow","tableRowClassNames","tableRowClassName","useTableRowStyles_unstable","useTableRow_unstable","renderTableRow_unstable","TableBody","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","useTableBody_unstable","renderTableBody_unstable","Table","tableClassName","tableClassNames","useTableStyles_unstable","useTable_unstable","renderTable_unstable","TableHeader","tableHeaderClassNames","tableHeaderClassName","useTableHeaderStyles_unstable","useTableHeader_unstable","renderTableHeader_unstable","TableHeaderCell","tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","TableContextProvider","useTableContext","useTableRowIdContext","TableRowIdContextProvider","TableSelectionCell","useTableSelectionCellStyles_unstable","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","tableSelectionCellClassNames","TableCellActions","tableCellActionsClassNames","useTableCellActionsStyles_unstable","useTableCellActions_unstable","renderTableCellActions_unstable","TableCellLayout","tableCellLayoutClassNames","useTableCellLayoutStyles_unstable","useTableCellLayout_unstable","renderTableCellLayout_unstable","DataGridCell","dataGridCellClassNames","useDataGridCellStyles_unstable","useDataGridCell_unstable","renderDataGridCell_unstable","DataGridRow","dataGridRowClassNames","useDataGridRowStyles_unstable","useDataGridRow_unstable","renderDataGridRow_unstable","DataGridBody","dataGridBodyClassNames","useDataGridBodyStyles_unstable","useDataGridBody_unstable","renderDataGridBody_unstable","DataGrid","dataGridClassNames","useDataGridStyles_unstable","useDataGrid_unstable","renderDataGrid_unstable","DataGridHeader","dataGridHeaderClassNames","useDataGridHeaderStyles_unstable","useDataGridHeader_unstable","renderDataGridHeader_unstable","DataGridHeaderCell","dataGridHeaderCellClassNames","useDataGridHeaderCellStyles_unstable","useDataGridHeaderCell_unstable","renderDataGridHeaderCell_unstable","DataGridSelectionCell","useDataGridSelectionCellStyles_unstable","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","dataGridSelectionCellClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/index.ts"],"sourcesContent":["export { useTableFeatures, useTableSelection, useTableSort, createTableColumn } from './hooks';\nexport type {\n  CreateTableColumnOptions,\n  UseTableFeaturesOptions,\n  TableColumnDefinition,\n  TableColumnId,\n  TableFeaturesState,\n  TableRowData,\n  TableRowId,\n  TableSelectionState,\n  TableSortState,\n  TableFeaturePlugin,\n} from './hooks';\n\nexport {\n  TableCell,\n  tableCellClassNames,\n  tableCellClassName,\n  useTableCellStyles_unstable,\n  useTableCell_unstable,\n  renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n  TableRow,\n  tableRowClassNames,\n  tableRowClassName,\n  useTableRowStyles_unstable,\n  useTableRow_unstable,\n  renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n  TableBody,\n  tableBodyClassName,\n  tableBodyClassNames,\n  useTableBodyStyles_unstable,\n  useTableBody_unstable,\n  renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n  Table,\n  tableClassName,\n  tableClassNames,\n  useTableStyles_unstable,\n  useTable_unstable,\n  renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n  TableHeader,\n  tableHeaderClassNames,\n  tableHeaderClassName,\n  useTableHeaderStyles_unstable,\n  useTableHeader_unstable,\n  renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n  TableHeaderCell,\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n  useTableHeaderCell_unstable,\n  renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport { useTableRowIdContext, TableRowIdContextProvider } from './contexts/rowIdContext';\nexport {\n  TableSelectionCell,\n  useTableSelectionCellStyles_unstable,\n  useTableSelectionCell_unstable,\n  renderTableSelectionCell_unstable,\n  tableSelectionCellClassNames,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n  TableCellActions,\n  tableCellActionsClassNames,\n  useTableCellActionsStyles_unstable,\n  useTableCellActions_unstable,\n  renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n  TableCellLayout,\n  tableCellLayoutClassNames,\n  useTableCellLayoutStyles_unstable,\n  useTableCellLayout_unstable,\n  renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n\nexport {\n  DataGridCell,\n  dataGridCellClassNames,\n  useDataGridCellStyles_unstable,\n  useDataGridCell_unstable,\n  renderDataGridCell_unstable,\n} from './DataGridCell';\nexport type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell';\n\nexport {\n  DataGridRow,\n  dataGridRowClassNames,\n  useDataGridRowStyles_unstable,\n  useDataGridRow_unstable,\n  renderDataGridRow_unstable,\n} from './DataGridRow';\nexport type { DataGridRowProps, DataGridRowState, DataGridRowSlots, CellRenderFunction } from './DataGridRow';\n\nexport {\n  DataGridBody,\n  dataGridBodyClassNames,\n  useDataGridBodyStyles_unstable,\n  useDataGridBody_unstable,\n  renderDataGridBody_unstable,\n} from './DataGridBody';\nexport type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots, RowRenderFunction } from './DataGridBody';\n\nexport {\n  DataGrid,\n  dataGridClassNames,\n  useDataGridStyles_unstable,\n  useDataGrid_unstable,\n  renderDataGrid_unstable,\n} from './DataGrid';\nexport type {\n  DataGridProps,\n  DataGridSlots,\n  DataGridState,\n  DataGridContextValues,\n  DataGridContextValue,\n  DataGridFocusMode,\n} from './DataGrid';\n\nexport {\n  DataGridHeader,\n  dataGridHeaderClassNames,\n  useDataGridHeaderStyles_unstable,\n  useDataGridHeader_unstable,\n  renderDataGridHeader_unstable,\n} from './DataGridHeader';\nexport type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader';\n\nexport {\n  DataGridHeaderCell,\n  dataGridHeaderCellClassNames,\n  useDataGridHeaderCellStyles_unstable,\n  useDataGridHeaderCell_unstable,\n  renderDataGridHeaderCell_unstable,\n} from './DataGridHeaderCell';\nexport type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell';\n\nexport {\n  DataGridSelectionCell,\n  useDataGridSelectionCellStyles_unstable,\n  useDataGridSelectionCell_unstable,\n  renderDataGridSelectionCell_unstable,\n  dataGridSelectionCellClassNames,\n} from './DataGridSelectionCell';\n\nexport type {\n  DataGridSelectionCellProps,\n  DataGridSelectionCellState,\n  DataGridSelectionCellSlots,\n} from './DataGridSelectionCell';\n"]}
+{"version":3,"mappings":"AAAA,SACEA,gBAAgB,EAChBC,iBAAiB,EACjBC,YAAY,EACZC,iBAAiB,EACjBC,6BAA6B,QACxB,SAAS;AAgBhB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,kBAAkB,EAClBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,wBAAwB,QACnB,aAAa;AAGpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,iBAAiB,EACjBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,QAClB,YAAY;AAGnB,SACEC,SAAS,EACTC,kBAAkB,EAClBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,wBAAwB,QACnB,aAAa;AAGpB,SACEC,KAAK,EACLC,cAAc,EACdC,eAAe,EACfC,uBAAuB,EACvBC,iBAAiB,EACjBC,oBAAoB,QACf,SAAS;AAGhB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,oBAAoB,EACpBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,0BAA0B,QACrB,eAAe;AAGtB,SACEC,eAAe,EACfC,wBAAwB,EACxBC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,QACzB,mBAAmB;AAG1B,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,mCAAmC,EACnCC,6BAA6B,EAC7BC,gCAAgC,QAC3B,qBAAqB;AAG5B,SAASC,oBAAoB,EAAEC,eAAe,QAAQ,yBAAyB;AAC/E,SAASC,oBAAoB,EAAEC,yBAAyB,QAAQ,yBAAyB;AACzF,SACEC,kBAAkB,EAClBC,oCAAoC,EACpCC,8BAA8B,EAC9BC,iCAAiC,EACjCC,4BAA4B,QACvB,sBAAsB;AAG7B,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,kCAAkC,EAClCC,4BAA4B,EAC5BC,+BAA+B,QAC1B,oBAAoB;AAG3B,SACEC,eAAe,EACfC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,8BAA8B,QACzB,mBAAmB;AAG1B,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,QACtB,gBAAgB;AAGvB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,EACvBC,0BAA0B,QACrB,eAAe;AAGtB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,2BAA2B,QACtB,gBAAgB;AAGvB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,uBAAuB,EACvBC,iCAAiC,QAC5B,YAAY;AAUnB,SACEC,cAAc,EACdC,wBAAwB,EACxBC,gCAAgC,EAChCC,0BAA0B,EAC1BC,6BAA6B,QACxB,kBAAkB;AAGzB,SACEC,kBAAkB,EAClBC,4BAA4B,EAC5BC,oCAAoC,EACpCC,8BAA8B,EAC9BC,iCAAiC,QAC5B,sBAAsB;AAG7B,SACEC,qBAAqB,EACrBC,uCAAuC,EACvCC,iCAAiC,EACjCC,oCAAoC,EACpCC,+BAA+B,QAC1B,yBAAyB","names":["useTableFeatures","useTableSelection","useTableSort","createTableColumn","useTableColumnSizing_unstable","TableCell","tableCellClassNames","tableCellClassName","useTableCellStyles_unstable","useTableCell_unstable","renderTableCell_unstable","TableRow","tableRowClassNames","tableRowClassName","useTableRowStyles_unstable","useTableRow_unstable","renderTableRow_unstable","TableBody","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","useTableBody_unstable","renderTableBody_unstable","Table","tableClassName","tableClassNames","useTableStyles_unstable","useTable_unstable","renderTable_unstable","TableHeader","tableHeaderClassNames","tableHeaderClassName","useTableHeaderStyles_unstable","useTableHeader_unstable","renderTableHeader_unstable","TableHeaderCell","tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","TableResizeHandle","tableResizeHandleClassNames","useTableResizeHandleStyles_unstable","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","TableContextProvider","useTableContext","useTableRowIdContext","TableRowIdContextProvider","TableSelectionCell","useTableSelectionCellStyles_unstable","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","tableSelectionCellClassNames","TableCellActions","tableCellActionsClassNames","useTableCellActionsStyles_unstable","useTableCellActions_unstable","renderTableCellActions_unstable","TableCellLayout","tableCellLayoutClassNames","useTableCellLayoutStyles_unstable","useTableCellLayout_unstable","renderTableCellLayout_unstable","DataGridCell","dataGridCellClassNames","useDataGridCellStyles_unstable","useDataGridCell_unstable","renderDataGridCell_unstable","DataGridRow","dataGridRowClassNames","useDataGridRowStyles_unstable","useDataGridRow_unstable","renderDataGridRow_unstable","DataGridBody","dataGridBodyClassNames","useDataGridBodyStyles_unstable","useDataGridBody_unstable","renderDataGridBody_unstable","DataGrid","dataGridClassNames","useDataGridStyles_unstable","useDataGrid_unstable","renderDataGrid_unstable","useDataGridContextValues_unstable","DataGridHeader","dataGridHeaderClassNames","useDataGridHeaderStyles_unstable","useDataGridHeader_unstable","renderDataGridHeader_unstable","DataGridHeaderCell","dataGridHeaderCellClassNames","useDataGridHeaderCellStyles_unstable","useDataGridHeaderCell_unstable","renderDataGridHeaderCell_unstable","DataGridSelectionCell","useDataGridSelectionCellStyles_unstable","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","dataGridSelectionCellClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/index.ts"],"sourcesContent":["export {\n  useTableFeatures,\n  useTableSelection,\n  useTableSort,\n  createTableColumn,\n  useTableColumnSizing_unstable,\n} from './hooks';\n\nexport type {\n  CreateTableColumnOptions,\n  UseTableFeaturesOptions,\n  TableColumnDefinition,\n  TableColumnId,\n  TableFeaturesState,\n  TableRowData,\n  TableRowId,\n  TableSelectionState,\n  TableSortState,\n  TableFeaturePlugin,\n  TableColumnSizingOptions,\n} from './hooks';\n\nexport {\n  TableCell,\n  tableCellClassNames,\n  tableCellClassName,\n  useTableCellStyles_unstable,\n  useTableCell_unstable,\n  renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n  TableRow,\n  tableRowClassNames,\n  tableRowClassName,\n  useTableRowStyles_unstable,\n  useTableRow_unstable,\n  renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n  TableBody,\n  tableBodyClassName,\n  tableBodyClassNames,\n  useTableBodyStyles_unstable,\n  useTableBody_unstable,\n  renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n  Table,\n  tableClassName,\n  tableClassNames,\n  useTableStyles_unstable,\n  useTable_unstable,\n  renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n  TableHeader,\n  tableHeaderClassNames,\n  tableHeaderClassName,\n  useTableHeaderStyles_unstable,\n  useTableHeader_unstable,\n  renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n  TableHeaderCell,\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n  useTableHeaderCell_unstable,\n  renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport {\n  TableResizeHandle,\n  tableResizeHandleClassNames,\n  useTableResizeHandleStyles_unstable,\n  useTableResizeHandle_unstable,\n  renderTableResizeHandle_unstable,\n} from './TableResizeHandle';\nexport type { TableResizeHandleProps, TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport { useTableRowIdContext, TableRowIdContextProvider } from './contexts/rowIdContext';\nexport {\n  TableSelectionCell,\n  useTableSelectionCellStyles_unstable,\n  useTableSelectionCell_unstable,\n  renderTableSelectionCell_unstable,\n  tableSelectionCellClassNames,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n  TableCellActions,\n  tableCellActionsClassNames,\n  useTableCellActionsStyles_unstable,\n  useTableCellActions_unstable,\n  renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n  TableCellLayout,\n  tableCellLayoutClassNames,\n  useTableCellLayoutStyles_unstable,\n  useTableCellLayout_unstable,\n  renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n\nexport {\n  DataGridCell,\n  dataGridCellClassNames,\n  useDataGridCellStyles_unstable,\n  useDataGridCell_unstable,\n  renderDataGridCell_unstable,\n} from './DataGridCell';\nexport type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell';\n\nexport {\n  DataGridRow,\n  dataGridRowClassNames,\n  useDataGridRowStyles_unstable,\n  useDataGridRow_unstable,\n  renderDataGridRow_unstable,\n} from './DataGridRow';\nexport type { DataGridRowProps, DataGridRowState, DataGridRowSlots, CellRenderFunction } from './DataGridRow';\n\nexport {\n  DataGridBody,\n  dataGridBodyClassNames,\n  useDataGridBodyStyles_unstable,\n  useDataGridBody_unstable,\n  renderDataGridBody_unstable,\n} from './DataGridBody';\nexport type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots, RowRenderFunction } from './DataGridBody';\n\nexport {\n  DataGrid,\n  dataGridClassNames,\n  useDataGridStyles_unstable,\n  useDataGrid_unstable,\n  renderDataGrid_unstable,\n  useDataGridContextValues_unstable,\n} from './DataGrid';\nexport type {\n  DataGridProps,\n  DataGridSlots,\n  DataGridState,\n  DataGridContextValues,\n  DataGridContextValue,\n  DataGridFocusMode,\n} from './DataGrid';\n\nexport {\n  DataGridHeader,\n  dataGridHeaderClassNames,\n  useDataGridHeaderStyles_unstable,\n  useDataGridHeader_unstable,\n  renderDataGridHeader_unstable,\n} from './DataGridHeader';\nexport type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader';\n\nexport {\n  DataGridHeaderCell,\n  dataGridHeaderCellClassNames,\n  useDataGridHeaderCellStyles_unstable,\n  useDataGridHeaderCell_unstable,\n  renderDataGridHeaderCell_unstable,\n} from './DataGridHeaderCell';\nexport type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell';\n\nexport {\n  DataGridSelectionCell,\n  useDataGridSelectionCellStyles_unstable,\n  useDataGridSelectionCell_unstable,\n  renderDataGridSelectionCell_unstable,\n  dataGridSelectionCellClassNames,\n} from './DataGridSelectionCell';\n\nexport type {\n  DataGridSelectionCellProps,\n  DataGridSelectionCellState,\n  DataGridSelectionCellSlots,\n} from './DataGridSelectionCell';\n"]}