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

package/lib/hooks/useTableColumnResizeMouseHandler.js

@@ -12,7 +12,10 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
     const dx = e.clientX - mouseX.current;
     // Update the local width for the column and set it
     currentWidth.current += dx;
-    colId.current && columnResizeState.setColumnWidth(colId.current, currentWidth.current);
+    colId.current && columnResizeState.setColumnWidth(e, {
+      columnId: colId.current,
+      width: currentWidth.current
+    });
     mouseX.current = e.clientX;
   }, [columnResizeState]);
   const onMouseMove = React.useCallback(e => {

package/lib/hooks/useTableColumnResizeMouseHandler.js.map

@@ -1 +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,CAACX,KAAK,CAACU,OAAO,EAAEX,YAAY,CAACW,OAAO,CAAC;IACtFb,MAAM,CAACa,OAAO,GAAGH,CAAC,CAACE,OAAO;EAC5B,CAAC,EACD,CAACb,iBAAiB,CAAC,CACpB;EAED,MAAMgB,WAAW,GAAGpB,KAAK,CAACc,WAAW,CAClCC,CAAa,IAAI;IAChB;IACA,IAAI,QAAOJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEU,qBAAqB,MAAK,UAAU,EAAE;MAC1DA,qBAAqB,CAAC,MAAMR,eAAe,CAACE,CAAC,CAAC,CAAC;KAChD,MAAM;MACLF,eAAe,CAACE,CAAC,CAAC;;EAEtB,CAAC,EACD,CAACJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEU,qBAAqB,EAAER,eAAe,CAAC,CACpD;EAED,MAAMS,SAAS,GAAGtB,KAAK,CAACc,WAAW,CAChCC,CAAa,IAAI;IAChBL,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEa,mBAAmB,CAAC,SAAS,EAAED,SAAS,CAAC;IACzDZ,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEa,mBAAmB,CAAC,WAAW,EAAEH,WAAW,CAAC;EAC/D,CAAC,EACD,CAACA,WAAW,EAAEV,cAAc,CAAC,CAC9B;EAED,MAAMc,cAAc,GAAIC,QAAuB,IAAMC,cAA6C,IAAI;IACpG;IACA,IAAIA,cAAc,CAACC,MAAM,KAAKD,cAAc,CAACE,aAAa,IAAIF,cAAc,CAACG,MAAM,KAAK,CAAC,EAAE;MACzF;;IAEF;IACA;IACAtB,YAAY,CAACW,OAAO,GAAGd,iBAAiB,CAAC0B,cAAc,CAACL,QAAQ,CAAC;IACjEpB,MAAM,CAACa,OAAO,GAAGQ,cAAc,CAACT,OAAO;IACvCT,KAAK,CAACU,OAAO,GAAGO,QAAQ;IAExBf,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEqB,gBAAgB,CAAC,SAAS,EAAET,SAAS,CAAC;IACtDZ,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEqB,gBAAgB,CAAC,WAAW,EAAEX,WAAW,CAAC;EAC5D,CAAC;EAED,OAAO;IACLI,cAAc,EAAGC,QAAuB,IAAKD,cAAc,CAACC,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","onMouseMove","requestAnimationFrame","onMouseUp","removeEventListener","getOnMouseDown","columnId","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(colId.current, 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"]}
+{"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

@@ -78,14 +78,23 @@ export function useTableColumnResizeState(columns, containerWidth, params = {})
       columnSizingOptions
     });
   }, [columnSizingOptions]);
-  const setColumnWidth = useEventCallback((columnId, width) => {
+  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(columnId, width);
+      onColumnResize(event, {
+        columnId,
+        width
+      });
     }
     dispatch({
       type: 'SET_COLUMN_WIDTH',

package/lib/hooks/useTableColumnResizeState.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","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","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((columnId: TableColumnId, width: number) => {\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(columnId, width);\n    }\n    dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\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"]}
+{"version":3,"mappings":"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","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

@@ -41,7 +41,7 @@ function useTableColumnSizingState(tableState, params) {
     measureElementRef
   } = useMeasureElement();
   // Creates the state based on columns and available containerWidth
-  const columnResizeState = useTableColumnResizeState(columns, width, params);
+  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 {
@@ -50,7 +50,10 @@ function useTableColumnSizingState(tableState, params) {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     columnSizing_unstable: {
       getOnMouseDown: mouseHandler.getOnMouseDown,
-      setColumnWidth: columnResizeState.setColumnWidth,
+      setColumnWidth: (columnId, w) => columnResizeState.setColumnWidth(undefined, {
+        columnId,
+        width: w
+      }),
       getColumnWidths: columnResizeState.getColumns,
       getTableHeaderCellProps: columnId => {
         const col = columnResizeState.getColumnById(columnId);

package/lib/hooks/useTableColumnSizing.js.map

@@ -1 +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,EAAEL,MAAM,CAAC;EAC3E;EACA,MAAMW,YAAY,GAAGvB,gCAAgC,CAACsB,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGT,UAAU;IACbW,QAAQ,EAAEH,iBAAiB;IAC3B;IACAI,qBAAqB,EAAE;MACrBpB,cAAc,EAAEkB,YAAY,CAAClB,cAAc;MAC3CC,cAAc,EAAEgB,iBAAiB,CAAChB,cAAc;MAChDF,eAAe,EAAEkB,iBAAiB,CAACI,UAAU;MAC7CnB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMkB,GAAG,GAAGL,iBAAiB,CAACM,aAAa,CAACnB,QAAQ,CAAC;QACrD,MAAMoB,KAAK,gBAAG/B,oBAACI,iBAAiB;UAAC4B,WAAW,EAAEP,YAAY,CAAClB,cAAc,CAACI,QAAQ;QAAC,EAAI;QACvF,OAAOkB,GAAG,GAAG;UAAEnB,KAAK,EAAEO,eAAe,CAACY,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDnB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMkB,GAAG,GAAGL,iBAAiB,CAACM,aAAa,CAACnB,QAAQ,CAAC;QACrD,OAAOkB,GAAG,GAAG;UAAEnB,KAAK,EAAEO,eAAe,CAACY,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","mouseHandler","tableRef","columnSizing_unstable","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);\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: columnResizeState.setColumnWidth,\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"]}
+{"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/utils/columnResizeUtils.js

@@ -14,7 +14,7 @@ export function columnDefinitionsToState(columns, state = [], columnSizingOption
   let updated = false;
   const stateMap = new Map(state.map(s => [s.columnId, s]));
   const updatedState = columns.map(column => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const existingColumnState = stateMap.get(column.columnId);
     if (existingColumnState) {
       const {
@@ -36,16 +36,16 @@ export function columnDefinitionsToState(columns, state = [], columnSizingOption
     }
     const {
       defaultWidth,
-      idealWidth,
-      minWidth,
+      idealWidth = DEFAULT_WIDTH,
+      minWidth = DEFAULT_MIN_WIDTH,
       padding
     } = (_b = columnSizingOptions[column.columnId]) !== null && _b !== void 0 ? _b : {};
     updated = true;
     return {
       columnId: column.columnId,
-      width: (_c = defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : idealWidth) !== null && _c !== void 0 ? _c : DEFAULT_WIDTH,
-      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : DEFAULT_MIN_WIDTH,
-      idealWidth: (_d = defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : idealWidth) !== null && _d !== void 0 ? _d : DEFAULT_WIDTH,
+      width: Math.max(defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : idealWidth, minWidth),
+      minWidth,
+      idealWidth: Math.max(defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : idealWidth, minWidth),
       padding: padding !== null && padding !== void 0 ? padding : 16
     };
   });

package/lib/utils/columnResizeUtils.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","length","find","col","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","Math","min","lastCol","j"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/utils/columnResizeUtils.ts"],"sourcesContent":["import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n *  - It uses existing state for existing columns.\n *  - It removes any state for columns no longer present.\n *  - It checks if any column has been replaced and returns updated state if so\n *  - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n  columns: TableColumnDefinition<T>[],\n  state: ColumnWidthState[] = [],\n  columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n  let updated = false;\n  const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n  const updatedState = columns.map(column => {\n    const existingColumnState = stateMap.get(column.columnId);\n\n    if (existingColumnState) {\n      const {\n        idealWidth = existingColumnState.idealWidth,\n        minWidth = existingColumnState.minWidth,\n        padding = existingColumnState.padding,\n      } = columnSizingOptions[column.columnId] ?? {};\n\n      if (\n        idealWidth !== existingColumnState.idealWidth ||\n        minWidth !== existingColumnState.minWidth ||\n        padding !== existingColumnState.padding\n      ) {\n        updated = true;\n        return {\n          ...existingColumnState,\n          idealWidth,\n          width: idealWidth,\n          minWidth,\n          padding,\n        };\n      }\n      return existingColumnState;\n    }\n\n    const { defaultWidth, idealWidth, minWidth, padding } = columnSizingOptions[column.columnId] ?? {};\n\n    updated = true;\n    return {\n      columnId: column.columnId,\n      width: defaultWidth ?? idealWidth ?? DEFAULT_WIDTH,\n      minWidth: minWidth ?? DEFAULT_MIN_WIDTH,\n      idealWidth: defaultWidth ?? idealWidth ?? DEFAULT_WIDTH,\n      padding: padding ?? 16,\n    };\n  });\n\n  // If the length of the new state changed (column was added or removed) or any of\n  // the individual states has a new reference (column was replaced),\n  // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n  // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n  if (updatedState.length !== state.length || updated) {\n    const column = updatedState.find(col => col.width > col.idealWidth);\n    if (column) {\n      column.width = column.idealWidth;\n    }\n\n    updated = true;\n  }\n\n  return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId) {\n  return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number) {\n  return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n  return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]) {\n  return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n  const column = getColumnById(state, columnId);\n  return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n  localState: ColumnWidthState[],\n  columnId: TableColumnId,\n  property: keyof ColumnWidthState,\n  value: number,\n) {\n  const currentColumn = getColumnById(localState, columnId);\n\n  if (!currentColumn || currentColumn?.[property] === value) {\n    return localState;\n  }\n\n  const updatedColumn = { ...currentColumn, [property]: value };\n\n  const newState = localState.reduce((acc, current) => {\n    if (current.columnId === updatedColumn.columnId) {\n      return [...acc, updatedColumn];\n    }\n    return [...acc, current];\n  }, [] as ColumnWidthState[]);\n\n  return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(state: ColumnWidthState[], containerWidth: number) {\n  let newState = state;\n  const totalWidth = getTotalWidth(newState);\n\n  // The total width is smaller, we are expanding columns\n  if (totalWidth < containerWidth) {\n    let difference = containerWidth - totalWidth;\n    let i = 0;\n    // We start at the beginning and assign the columns their ideal width\n    while (i < newState.length && difference > 0) {\n      const currentCol = getColumnByIndex(newState, i);\n      const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n      newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n      difference -= colAdjustment;\n\n      // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n      if (i === newState.length - 1 && difference !== 0) {\n        const lastCol = getColumnByIndex(newState, i);\n        newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n      }\n\n      i++;\n    }\n  }\n\n  // The total width is larger than container, we need to squash the columns\n  else if (totalWidth >= containerWidth) {\n    let difference = totalWidth - containerWidth;\n    // We start with the last column\n    let j = newState.length - 1;\n    while (j >= 0 && difference > 0) {\n      const currentCol = getColumnByIndex(newState, j);\n      if (currentCol.width > currentCol.minWidth) {\n        const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n        difference -= colAdjustment;\n        newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n      }\n      j--;\n    }\n  }\n\n  return newState;\n}\n"]}
+{"version":3,"mappings":"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","names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","Math","max","length","find","col","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","min","lastCol","j"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/utils/columnResizeUtils.ts"],"sourcesContent":["import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n *  - It uses existing state for existing columns.\n *  - It removes any state for columns no longer present.\n *  - It checks if any column has been replaced and returns updated state if so\n *  - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n  columns: TableColumnDefinition<T>[],\n  state: ColumnWidthState[] = [],\n  columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n  let updated = false;\n  const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n  const updatedState = columns.map(column => {\n    const existingColumnState = stateMap.get(column.columnId);\n\n    if (existingColumnState) {\n      const {\n        idealWidth = existingColumnState.idealWidth,\n        minWidth = existingColumnState.minWidth,\n        padding = existingColumnState.padding,\n      } = columnSizingOptions[column.columnId] ?? {};\n\n      if (\n        idealWidth !== existingColumnState.idealWidth ||\n        minWidth !== existingColumnState.minWidth ||\n        padding !== existingColumnState.padding\n      ) {\n        updated = true;\n        return {\n          ...existingColumnState,\n          idealWidth,\n          width: idealWidth,\n          minWidth,\n          padding,\n        };\n      }\n      return existingColumnState;\n    }\n\n    const { defaultWidth, idealWidth = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, padding } =\n      columnSizingOptions[column.columnId] ?? {};\n\n    updated = true;\n    return {\n      columnId: column.columnId,\n      width: Math.max(defaultWidth ?? idealWidth, minWidth),\n      minWidth,\n      idealWidth: Math.max(defaultWidth ?? idealWidth, minWidth),\n      padding: padding ?? 16,\n    };\n  });\n\n  // If the length of the new state changed (column was added or removed) or any of\n  // the individual states has a new reference (column was replaced),\n  // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n  // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n  if (updatedState.length !== state.length || updated) {\n    const column = updatedState.find(col => col.width > col.idealWidth);\n    if (column) {\n      column.width = column.idealWidth;\n    }\n\n    updated = true;\n  }\n\n  return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId) {\n  return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number) {\n  return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n  return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]) {\n  return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n  const column = getColumnById(state, columnId);\n  return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n  localState: ColumnWidthState[],\n  columnId: TableColumnId,\n  property: keyof ColumnWidthState,\n  value: number,\n) {\n  const currentColumn = getColumnById(localState, columnId);\n\n  if (!currentColumn || currentColumn?.[property] === value) {\n    return localState;\n  }\n\n  const updatedColumn = { ...currentColumn, [property]: value };\n\n  const newState = localState.reduce((acc, current) => {\n    if (current.columnId === updatedColumn.columnId) {\n      return [...acc, updatedColumn];\n    }\n    return [...acc, current];\n  }, [] as ColumnWidthState[]);\n\n  return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(state: ColumnWidthState[], containerWidth: number) {\n  let newState = state;\n  const totalWidth = getTotalWidth(newState);\n\n  // The total width is smaller, we are expanding columns\n  if (totalWidth < containerWidth) {\n    let difference = containerWidth - totalWidth;\n    let i = 0;\n    // We start at the beginning and assign the columns their ideal width\n    while (i < newState.length && difference > 0) {\n      const currentCol = getColumnByIndex(newState, i);\n      const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n      newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n      difference -= colAdjustment;\n\n      // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n      if (i === newState.length - 1 && difference !== 0) {\n        const lastCol = getColumnByIndex(newState, i);\n        newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n      }\n\n      i++;\n    }\n  }\n\n  // The total width is larger than container, we need to squash the columns\n  else if (totalWidth >= containerWidth) {\n    let difference = totalWidth - containerWidth;\n    // We start with the last column\n    let j = newState.length - 1;\n    while (j >= 0 && difference > 0) {\n      const currentCol = getColumnByIndex(newState, j);\n      if (currentCol.width > currentCol.minWidth) {\n        const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n        difference -= colAdjustment;\n        newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n      }\n      j--;\n    }\n  }\n\n  return newState;\n}\n"]}

package/lib-amd/DataGrid.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/DataGrid/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=DataGrid.js.map

package/lib-amd/DataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/DataGrid.ts"],"names":[],"mappings":";;;IAAA,uCAA4C","sourcesContent":["export * from './components/DataGrid/index';\n"]}

package/lib-amd/DataGridBody.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/DataGridBody/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=DataGridBody.js.map

package/lib-amd/DataGridBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridBody.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/DataGridBody.ts"],"names":[],"mappings":";;;IAAA,uCAAgD","sourcesContent":["export * from './components/DataGridBody/index';\n"]}

package/lib-amd/DataGridCell.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/DataGridCell/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=DataGridCell.js.map

package/lib-amd/DataGridCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridCell.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/DataGridCell.ts"],"names":[],"mappings":";;;IAAA,uCAAgD","sourcesContent":["export * from './components/DataGridCell/index';\n"]}

package/lib-amd/DataGridHeader.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/DataGridHeader/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=DataGridHeader.js.map

package/lib-amd/DataGridHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridHeader.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/DataGridHeader.ts"],"names":[],"mappings":";;;IAAA,uCAAkD","sourcesContent":["export * from './components/DataGridHeader/index';\n"]}

package/lib-amd/DataGridHeaderCell.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/DataGridHeaderCell/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=DataGridHeaderCell.js.map

package/lib-amd/DataGridHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridHeaderCell.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/DataGridHeaderCell.ts"],"names":[],"mappings":";;;IAAA,uCAAsD","sourcesContent":["export * from './components/DataGridHeaderCell/index';\n"]}

package/lib-amd/DataGridRow.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/DataGridRow/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=DataGridRow.js.map

package/lib-amd/DataGridRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridRow.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/DataGridRow.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/DataGridRow/index';\n"]}

package/lib-amd/DataGridSelectionCell.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/DataGridSelectionCell/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=DataGridSelectionCell.js.map

package/lib-amd/DataGridSelectionCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridSelectionCell.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/DataGridSelectionCell.ts"],"names":[],"mappings":";;;IAAA,uCAAyD","sourcesContent":["export * from './components/DataGridSelectionCell/index';\n"]}

package/lib-amd/Table.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Table/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Table.js.map

package/lib-amd/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/Table.ts"],"names":[],"mappings":";;;IAAA,uCAAyC","sourcesContent":["export * from './components/Table/index';\n"]}

package/lib-amd/TableBody.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableBody/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableBody.js.map

package/lib-amd/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableBody.ts"],"names":[],"mappings":";;;IAAA,uCAA6C","sourcesContent":["export * from './components/TableBody/index';\n"]}

package/lib-amd/TableCell.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableCell/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableCell.js.map

package/lib-amd/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableCell.ts"],"names":[],"mappings":";;;IAAA,uCAA6C","sourcesContent":["export * from './components/TableCell/index';\n"]}

package/lib-amd/TableCellActions.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableCellActions/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableCellActions.js.map

package/lib-amd/TableCellActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellActions.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableCellActions.ts"],"names":[],"mappings":";;;IAAA,uCAAoD","sourcesContent":["export * from './components/TableCellActions/index';\n"]}

package/lib-amd/TableCellLayout.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableCellLayout/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableCellLayout.js.map

package/lib-amd/TableCellLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellLayout.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableCellLayout.ts"],"names":[],"mappings":";;;IAAA,uCAAmD","sourcesContent":["export * from './components/TableCellLayout/index';\n"]}

package/lib-amd/TableHeader.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableHeader/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableHeader.js.map

package/lib-amd/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableHeader.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/TableHeader/index';\n"]}

package/lib-amd/TableHeaderCell.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableHeaderCell/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableHeaderCell.js.map

package/lib-amd/TableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableHeaderCell.ts"],"names":[],"mappings":";;;IAAA,uCAAmD","sourcesContent":["export * from './components/TableHeaderCell/index';\n"]}

package/lib-amd/TableResizeHandle.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableResizeHandle/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableResizeHandle.js.map

package/lib-amd/TableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableResizeHandle.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableResizeHandle.ts"],"names":[],"mappings":";;;IAAA,uCAAqD","sourcesContent":["export * from './components/TableResizeHandle/index';\n"]}

package/lib-amd/TableRow.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableRow/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableRow.js.map

package/lib-amd/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableRow.ts"],"names":[],"mappings":";;;IAAA,uCAA4C","sourcesContent":["export * from './components/TableRow/index';\n"]}

package/lib-amd/TableSelectionCell.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/TableSelectionCell/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=TableSelectionCell.js.map

package/lib-amd/TableSelectionCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelectionCell.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-table/src/TableSelectionCell.ts"],"names":[],"mappings":";;;IAAA,uCAAsD","sourcesContent":["export * from './components/TableSelectionCell/index';\n"]}

package/lib-amd/components/DataGrid/DataGrid.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useDataGrid", "./renderDataGrid", "./useDataGridStyles", "./useDataGridContextValues"], function (require, exports, React, useDataGrid_1, renderDataGrid_1, useDataGridStyles_1, useDataGridContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DataGrid = void 0;
+    /**
+     * DataGrid component
+     */
+    exports.DataGrid = React.forwardRef(function (props, ref) {
+        var state = useDataGrid_1.useDataGrid_unstable(props, ref);
+        useDataGridStyles_1.useDataGridStyles_unstable(state);
+        return renderDataGrid_1.renderDataGrid_unstable(state, useDataGridContextValues_1.useDataGridContextValues_unstable(state));
+    });
+    exports.DataGrid.displayName = 'DataGrid';
+});
+//# sourceMappingURL=DataGrid.js.map

package/lib-amd/components/DataGrid/DataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,kCAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE/C,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,OAAO,wCAAuB,CAAC,KAAK,EAAE,4DAAiC,CAAC,KAAK,CAAC,CAAC,CAAC;IAClF,CAAC,CAAC,CAAC;IAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import * as React from 'react';\nimport { useDataGrid_unstable } from './useDataGrid';\nimport { renderDataGrid_unstable } from './renderDataGrid';\nimport { useDataGridStyles_unstable } from './useDataGridStyles';\nimport type { DataGridProps } from './DataGrid.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useDataGridContextValues_unstable } from './useDataGridContextValues';\n\n/**\n * DataGrid component\n */\nexport const DataGrid: ForwardRefComponent<DataGridProps> = React.forwardRef((props, ref) => {\n  const state = useDataGrid_unstable(props, ref);\n\n  useDataGridStyles_unstable(state);\n  return renderDataGrid_unstable(state, useDataGridContextValues_unstable(state));\n});\n\nDataGrid.displayName = 'DataGrid';\n"]}

package/lib-amd/components/DataGrid/DataGrid.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=DataGrid.types.js.map

package/lib-amd/components/DataGrid/DataGrid.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n  SortState,\n  TableFeaturesState,\n  UseTableSortOptions,\n  SelectionMode,\n  UseTableSelectionOptions,\n  OnSelectionChangeData,\n  TableColumnSizingOptions,\n  TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';\n\nexport type DataGridContextValues = TableContextValues & {\n  dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n  /**\n   * How focus navigation will work in the datagrid\n   * @default cell\n   */\n  focusMode: DataGridFocusMode;\n\n  /**\n   * Lets child components know if rows selection is enabled\n   * @see selectionMode prop enables row selection on the component\n   */\n  selectableRows: boolean;\n\n  /**\n   * Enables subtle selection style\n   * @default false\n   */\n  subtleSelection: boolean;\n\n  /**\n   * Row appearance when selected\n   * @default brand\n   */\n  selectionAppearance: TableRowProps['appearance'];\n\n  /**\n   * Enables column resizing\n   */\n  resizableColumns?: boolean;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n  Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n  Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n  Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n  Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {\n    onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n    onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n    /**\n     * Enables row selection and sets the selection mode\n     * @default false\n     */\n    selectionMode?: SelectionMode;\n    /**\n     * Options for column resizing\n     */\n    columnSizingOptions?: TableColumnSizingOptions;\n    /**\n     * A callback triggered when a column is resized.\n     */\n    onColumnResize?: (event: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => void;\n  };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n    DataGridContextValue,\n    'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n  >;\n"]}

package/lib-amd/components/DataGrid/index.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "./DataGrid", "./DataGrid.types", "./renderDataGrid", "./useDataGrid", "./useDataGridStyles", "./useDataGridContextValues"], function (require, exports, tslib_1, DataGrid_1, DataGrid_types_1, renderDataGrid_1, useDataGrid_1, useDataGridStyles_1, useDataGridContextValues_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(DataGrid_1, exports);
+    tslib_1.__exportStar(DataGrid_types_1, exports);
+    tslib_1.__exportStar(renderDataGrid_1, exports);
+    tslib_1.__exportStar(useDataGrid_1, exports);
+    tslib_1.__exportStar(useDataGridStyles_1, exports);
+    tslib_1.__exportStar(useDataGridContextValues_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/DataGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGrid/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,gDAAiC;IACjC,gDAAiC;IACjC,6CAA8B;IAC9B,mDAAoC;IACpC,0DAA2C","sourcesContent":["export * from './DataGrid';\nexport * from './DataGrid.types';\nexport * from './renderDataGrid';\nexport * from './useDataGrid';\nexport * from './useDataGridStyles';\nexport * from './useDataGridContextValues';\n"]}

package/lib-amd/components/DataGrid/renderDataGrid.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "react", "../Table/renderTable", "../../contexts/dataGridContext"], function (require, exports, React, renderTable_1, dataGridContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderDataGrid_unstable = void 0;
+    /**
+     * Render the final JSX of DataGrid
+     */
+    var renderDataGrid_unstable = function (state, contextValues) {
+        return (React.createElement(dataGridContext_1.DataGridContextProvider, { value: contextValues.dataGrid }, renderTable_1.renderTable_unstable(state, contextValues)));
+    };
+    exports.renderDataGrid_unstable = renderDataGrid_unstable;
+});
+//# sourceMappingURL=renderDataGrid.js.map

package/lib-amd/components/DataGrid/renderDataGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderDataGrid.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/DataGrid/renderDataGrid.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAoB,EAAE,aAAoC;QAChG,OAAO,CACL,oBAAC,yCAAuB,IAAC,KAAK,EAAE,aAAa,CAAC,QAAQ,IACnD,kCAAoB,CAAC,KAAK,EAAE,aAAa,CAAC,CACnB,CAC3B,CAAC;IACJ,CAAC,CAAC;IANW,QAAA,uBAAuB,2BAMlC","sourcesContent":["import * as React from 'react';\nimport type { DataGridContextValues, DataGridState } from './DataGrid.types';\nimport { renderTable_unstable } from '../Table/renderTable';\nimport { DataGridContextProvider } from '../../contexts/dataGridContext';\n\n/**\n * Render the final JSX of DataGrid\n */\nexport const renderDataGrid_unstable = (state: DataGridState, contextValues: DataGridContextValues) => {\n  return (\n    <DataGridContextProvider value={contextValues.dataGrid}>\n      {renderTable_unstable(state, contextValues)}\n    </DataGridContextProvider>\n  );\n};\n"]}

package/lib-amd/components/DataGrid/useDataGrid.js

@@ -0,0 +1,43 @@
+define(["require", "exports", "tslib", "@fluentui/react-tabster", "../Table/useTable", "../../hooks", "../TableSelectionCell", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_tabster_1, useTable_1, hooks_1, TableSelectionCell_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useDataGrid_unstable = void 0;
+    /**
+     * Create the state required to render DataGrid.
+     *
+     * The returned state can be modified with hooks such as useDataGridStyles_unstable,
+     * before being passed to renderDataGrid_unstable.
+     *
+     * @param props - props from this instance of DataGrid
+     * @param ref - reference to root HTMLElement of DataGrid
+     */
+    var useDataGrid_unstable = function (props, ref) {
+        var items = props.items, columns = props.columns, _a = props.focusMode, focusMode = _a === void 0 ? 'cell' : _a, selectionMode = props.selectionMode, onSortChange = props.onSortChange, onSelectionChange = props.onSelectionChange, defaultSortState = props.defaultSortState, sortState = props.sortState, selectedItems = props.selectedItems, defaultSelectedItems = props.defaultSelectedItems, _b = props.subtleSelection, subtleSelection = _b === void 0 ? false : _b, _c = props.selectionAppearance, selectionAppearance = _c === void 0 ? 'brand' : _c, getRowId = props.getRowId, resizableColumns = props.resizableColumns, columnSizingOptions = props.columnSizingOptions, onColumnResize = props.onColumnResize;
+        var navigable = focusMode !== 'none';
+        var keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({ axis: 'grid' });
+        var tableState = hooks_1.useTableFeatures({ items: items, columns: columns, getRowId: getRowId }, [
+            hooks_1.useTableSort({
+                defaultSortState: defaultSortState,
+                sortState: sortState,
+                onSortChange: onSortChange,
+            }),
+            hooks_1.useTableSelection({
+                defaultSelectedItems: defaultSelectedItems,
+                selectedItems: selectedItems,
+                onSelectionChange: onSelectionChange,
+                selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect',
+            }),
+            hooks_1.useTableColumnSizing_unstable({
+                onColumnResize: onColumnResize,
+                columnSizingOptions: columnSizingOptions,
+                // The selection cell is not part of the columns, therefore its width needs to be subtracted
+                // from the container to make sure the columns don't overflow the table.
+                containerWidthOffset: selectionMode ? -TableSelectionCell_1.CELL_WIDTH : 0,
+            }),
+        ]);
+        var baseTableState = useTable_1.useTable_unstable(tslib_1.__assign(tslib_1.__assign({ role: 'grid', as: 'div', noNativeElements: true }, (navigable && keyboardNavAttr)), props), react_utilities_1.useMergedRefs(ref, tableState.tableRef));
+        return tslib_1.__assign(tslib_1.__assign({}, baseTableState), { focusMode: focusMode, tableState: tableState, selectableRows: !!selectionMode, subtleSelection: subtleSelection, selectionAppearance: selectionAppearance, resizableColumns: resizableColumns });
+    };
+    exports.useDataGrid_unstable = useDataGrid_unstable;
+});
+//# sourceMappingURL=useDataGrid.js.map