@fluentui/react-table 9.2.12 → 9.4.0

package/lib/components/DataGrid/useDataGrid.js

@@ -13,93 +13,76 @@ import { End, Home } from '@fluentui/keyboard-keys';
  *
  * @param props - props from this instance of DataGrid
  * @param ref - reference to root HTMLElement of DataGrid
- */
-export const useDataGrid_unstable = (props, ref) => {
-  const {
-    items,
-    columns,
-    focusMode = 'cell',
-    selectionMode,
-    onSortChange,
-    onSelectionChange,
-    defaultSortState,
-    sortState,
-    selectedItems,
-    defaultSelectedItems,
-    subtleSelection = false,
-    selectionAppearance = 'brand',
-    getRowId,
-    resizableColumns,
-    columnSizingOptions,
-    onColumnResize
-  } = props;
-  const navigable = focusMode !== 'none';
-  const keyboardNavAttr = useArrowNavigationGroup({
-    axis: 'grid'
-  });
-  const tableState = useTableFeatures({
-    items,
-    columns,
-    getRowId
-  }, [useTableSort({
-    defaultSortState,
-    sortState,
-    onSortChange
-  }), useTableSelection({
-    defaultSelectedItems,
-    selectedItems,
-    onSelectionChange,
-    selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'
-  }), useTableColumnSizing_unstable({
-    onColumnResize,
-    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 ? -CELL_WIDTH : 0
-  })]);
-  const innerRef = React.useRef(null);
-  const {
-    findFirstFocusable,
-    findLastFocusable
-  } = useFocusFinders();
-  const onKeyDown = useEventCallback(e => {
-    var _props_onKeyDown;
-    (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);
-    if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {
-      return;
-    }
-    if (e.key === Home) {
-      const firstRow = innerRef.current.querySelector('[role="row"]');
-      if (firstRow) {
-        var _findFirstFocusable;
-        (_findFirstFocusable = findFirstFocusable(firstRow)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();
-      }
-    }
-    if (e.key === End) {
-      const rows = innerRef.current.querySelectorAll('[role="row"]');
-      if (rows.length) {
-        var _findLastFocusable;
-        const lastRow = rows.item(rows.length - 1);
-        (_findLastFocusable = findLastFocusable(lastRow)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
-      }
-    }
-  });
-  const baseTableState = useTable_unstable({
-    role: 'grid',
-    as: 'div',
-    noNativeElements: true,
-    ...(navigable && keyboardNavAttr),
-    ...props,
-    onKeyDown
-  }, useMergedRefs(ref, tableState.tableRef, innerRef));
-  return {
-    ...baseTableState,
-    focusMode,
-    tableState,
-    selectableRows: !!selectionMode,
-    subtleSelection,
-    selectionAppearance,
-    resizableColumns
-  };
+ */ export const useDataGrid_unstable = (props, ref)=>{
+    const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset  } = props;
+    const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;
+    const navigable = focusMode !== 'none';
+    const keyboardNavAttr = useArrowNavigationGroup({
+        axis: 'grid'
+    });
+    const tableState = useTableFeatures({
+        items,
+        columns,
+        getRowId
+    }, [
+        useTableSort({
+            defaultSortState,
+            sortState,
+            onSortChange
+        }),
+        useTableSelection({
+            defaultSelectedItems,
+            selectedItems,
+            onSelectionChange,
+            selectionMode: selectionMode !== null && selectionMode !== void 0 ? selectionMode : 'multiselect'
+        }),
+        useTableColumnSizing_unstable({
+            onColumnResize,
+            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: widthOffset
+        })
+    ]);
+    const innerRef = React.useRef(null);
+    const { findFirstFocusable , findLastFocusable  } = useFocusFinders();
+    const onKeyDown = useEventCallback((e)=>{
+        var _props_onKeyDown;
+        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);
+        if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {
+            return;
+        }
+        if (e.key === Home) {
+            const firstRow = innerRef.current.querySelector('[role="row"]');
+            if (firstRow) {
+                var _findFirstFocusable;
+                (_findFirstFocusable = findFirstFocusable(firstRow)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();
+            }
+        }
+        if (e.key === End) {
+            const rows = innerRef.current.querySelectorAll('[role="row"]');
+            if (rows.length) {
+                var _findLastFocusable;
+                const lastRow = rows.item(rows.length - 1);
+                (_findLastFocusable = findLastFocusable(lastRow)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+            }
+        }
+    });
+    const baseTableState = useTable_unstable({
+        role: 'grid',
+        as: 'div',
+        noNativeElements: true,
+        ...navigable && keyboardNavAttr,
+        ...props,
+        onKeyDown
+    }, useMergedRefs(ref, tableState.tableRef, innerRef));
+    return {
+        ...baseTableState,
+        focusMode,
+        tableState,
+        selectableRows: !!selectionMode,
+        subtleSelection,
+        selectionAppearance,
+        resizableColumns
+    };
 };
-//# sourceMappingURL=useDataGrid.js.map

package/lib/components/DataGrid/useDataGrid.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useArrowNavigationGroup","useFocusFinders","useTable_unstable","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","CELL_WIDTH","useEventCallback","useMergedRefs","End","Home","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","navigable","keyboardNavAttr","axis","tableState","containerWidthOffset","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","_props_onKeyDown","call","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","_findFirstFocusable","focus","rows","querySelectorAll","length","_findLastFocusable","lastRow","item","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"sources":["../../../src/components/DataGrid/useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n    resizableColumns,\n    columnSizingOptions,\n    onColumnResize,\n  } = props;\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({\n    axis: 'grid',\n  });\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n    useTableColumnSizing_unstable({\n      onColumnResize,\n      columnSizingOptions,\n      // The selection cell is not part of the columns, therefore its width needs to be subtracted\n      // from the container to make sure the columns don't overflow the table.\n      containerWidthOffset: selectionMode ? -CELL_WIDTH : 0,\n    }),\n  ]);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n    props.onKeyDown?.(e);\n    if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === Home) {\n      const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement | null;\n      if (firstRow) {\n        findFirstFocusable(firstRow)?.focus();\n      }\n    }\n\n    if (e.key === End) {\n      const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n      if (rows.length) {\n        const lastRow = rows.item(rows.length - 1);\n        findLastFocusable(lastRow as HTMLElement)?.focus();\n      }\n    }\n  });\n\n  const baseTableState = useTable_unstable(\n    {\n      role: 'grid',\n      as: 'div',\n      noNativeElements: true,\n      ...(navigable && keyboardNavAttr),\n      ...props,\n      onKeyDown,\n    },\n    useMergedRefs(ref, tableState.tableRef, innerRef),\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,EAAEC,eAAe,QAAQ;AAEzD,SAASC,iBAAiB,QAAQ;AAClC,SAASC,gBAAgB,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,6BAA6B,QAAQ;AACjG,SAASC,UAAU,QAAQ;AAC3B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ;AAChD,SAASC,GAAG,EAAEC,IAAI,QAAQ;AAE1B;;;;;;;;;AASA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAsBC,GAAA,KAA+C;EACxG,MAAM;IACJC,KAAA;IACAC,OAAA;IACAC,SAAA,GAAY;IACZC,aAAA;IACAC,YAAA;IACAC,iBAAA;IACAC,gBAAA;IACAC,SAAA;IACAC,aAAA;IACAC,oBAAA;IACAC,eAAA,GAAkB,KAAK;IACvBC,mBAAA,GAAsB;IACtBC,QAAA;IACAC,gBAAA;IACAC,mBAAA;IACAC;EAAc,CACf,GAAGjB,KAAA;EAEJ,MAAMkB,SAAA,GAAYd,SAAA,KAAc;EAChC,MAAMe,eAAA,GAAkBhC,uBAAA,CAAwB;IAC9CiC,IAAA,EAAM;EACR;EAEA,MAAMC,UAAA,GAAa/B,gBAAA,CAAiB;IAAEY,KAAA;IAAOC,OAAA;IAASW;EAAS,GAAG,CAChEvB,YAAA,CAAa;IACXiB,gBAAA;IACAC,SAAA;IACAH;EACF,IACAd,iBAAA,CAAkB;IAChBmB,oBAAA;IACAD,aAAA;IACAH,iBAAA;IACAF,aAAA,EAAeA,aAAA,aAAAA,aAAA,cAAAA,aAAA,GAAiB;EAClC,IACAZ,6BAAA,CAA8B;IAC5BwB,cAAA;IACAD,mBAAA;IACA;IACA;IACAM,oBAAA,EAAsBjB,aAAA,GAAgB,CAACX,UAAA,GAAa;EACtD,GACD;EAED,MAAM6B,QAAA,GAAWrC,KAAA,CAAMsC,MAAM,CAAiB,IAAI;EAClD,MAAM;IAAEC,kBAAA;IAAoBC;EAAiB,CAAE,GAAGtC,eAAA;EAClD,MAAMuC,SAAA,GAAYhC,gBAAA,CAAkBiC,CAAA,IAA6C;QAC/EC,gBAAA;IAAA,CAAAA,gBAAA,GAAA7B,KAAA,CAAM2B,SAAS,cAAfE,gBAAA,uBAAAA,gBAAA,CAAAC,IAAA,CAAA9B,KAAA,EAAkB4B,CAAA;IAClB,IAAI,CAACL,QAAA,CAASQ,OAAO,IAAI,CAACH,CAAA,CAAEI,OAAO,IAAIJ,CAAA,CAAEK,gBAAgB,EAAE;MACzD;IACF;IAEA,IAAIL,CAAA,CAAEM,GAAG,KAAKpC,IAAA,EAAM;MAClB,MAAMqC,QAAA,GAAWZ,QAAA,CAASQ,OAAO,CAACK,aAAa,CAAC;MAChD,IAAID,QAAA,EAAU;YACZE,mBAAA;QAAA,CAAAA,mBAAA,GAAAZ,kBAAA,CAAmBU,QAAA,eAAnBE,mBAAA,uBAAAA,mBAAA,CAA8BC,KAAA;MAChC;IACF;IAEA,IAAIV,CAAA,CAAEM,GAAG,KAAKrC,GAAA,EAAK;MACjB,MAAM0C,IAAA,GAAOhB,QAAA,CAASQ,OAAO,CAACS,gBAAgB,CAAC;MAC/C,IAAID,IAAA,CAAKE,MAAM,EAAE;YAEfC,kBAAA;QADA,MAAMC,OAAA,GAAUJ,IAAA,CAAKK,IAAI,CAACL,IAAA,CAAKE,MAAM,GAAG;QACxC,CAAAC,kBAAA,GAAAhB,iBAAA,CAAkBiB,OAAA,eAAlBD,kBAAA,uBAAAA,kBAAA,CAA2CJ,KAAA;MAC7C;IACF;EACF;EAEA,MAAMO,cAAA,GAAiBxD,iBAAA,CACrB;IACEyD,IAAA,EAAM;IACNC,EAAA,EAAI;IACJC,gBAAA,EAAkB,IAAI;IACtB,IAAI9B,SAAA,IAAaC,eAAe;IAChC,GAAGnB,KAAK;IACR2B;EACF,GACA/B,aAAA,CAAcK,GAAA,EAAKoB,UAAA,CAAW4B,QAAQ,EAAE1B,QAAA;EAG1C,OAAO;IACL,GAAGsB,cAAc;IACjBzC,SAAA;IACAiB,UAAA;IACA6B,cAAA,EAAgB,CAAC,CAAC7C,aAAA;IAClBO,eAAA;IACAC,mBAAA;IACAE;EACF;AACF"}
+{"version":3,"sources":["useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n  const {\n    items,\n    columns,\n    focusMode = 'cell',\n    selectionMode,\n    onSortChange,\n    onSelectionChange,\n    defaultSortState,\n    sortState,\n    selectedItems,\n    defaultSelectedItems,\n    subtleSelection = false,\n    selectionAppearance = 'brand',\n    getRowId,\n    resizableColumns,\n    columnSizingOptions,\n    onColumnResize,\n    containerWidthOffset,\n  } = props;\n\n  const widthOffset = containerWidthOffset ?? (selectionMode ? -CELL_WIDTH : 0);\n\n  const navigable = focusMode !== 'none';\n  const keyboardNavAttr = useArrowNavigationGroup({\n    axis: 'grid',\n  });\n\n  const tableState = useTableFeatures({ items, columns, getRowId }, [\n    useTableSort({\n      defaultSortState,\n      sortState,\n      onSortChange,\n    }),\n    useTableSelection({\n      defaultSelectedItems,\n      selectedItems,\n      onSelectionChange,\n      selectionMode: selectionMode ?? 'multiselect',\n    }),\n    useTableColumnSizing_unstable({\n      onColumnResize,\n      columnSizingOptions,\n      // The selection cell is not part of the columns, therefore its width needs to be subtracted\n      // from the container to make sure the columns don't overflow the table.\n      containerWidthOffset: widthOffset,\n    }),\n  ]);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n    props.onKeyDown?.(e);\n    if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === Home) {\n      const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement | null;\n      if (firstRow) {\n        findFirstFocusable(firstRow)?.focus();\n      }\n    }\n\n    if (e.key === End) {\n      const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n      if (rows.length) {\n        const lastRow = rows.item(rows.length - 1);\n        findLastFocusable(lastRow as HTMLElement)?.focus();\n      }\n    }\n  });\n\n  const baseTableState = useTable_unstable(\n    {\n      role: 'grid',\n      as: 'div',\n      noNativeElements: true,\n      ...(navigable && keyboardNavAttr),\n      ...props,\n      onKeyDown,\n    },\n    useMergedRefs(ref, tableState.tableRef, innerRef),\n  );\n\n  return {\n    ...baseTableState,\n    focusMode,\n    tableState,\n    selectableRows: !!selectionMode,\n    subtleSelection,\n    selectionAppearance,\n    resizableColumns,\n  };\n};\n"],"names":["React","useArrowNavigationGroup","useFocusFinders","useTable_unstable","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","CELL_WIDTH","useEventCallback","useMergedRefs","End","Home","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","navigable","keyboardNavAttr","axis","tableState","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","focus","rows","querySelectorAll","length","lastRow","item","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AAEnF,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,gBAAgB,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,6BAA6B,QAAQ,cAAc;AAC/G,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,SAASC,GAAG,EAAEC,IAAI,QAAQ,0BAA0B;AAEpD;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC,MAA+C;IACxG,MAAM,EACJC,MAAK,EACLC,QAAO,EACPC,WAAY,OAAM,EAClBC,cAAa,EACbC,aAAY,EACZC,kBAAiB,EACjBC,iBAAgB,EAChBC,UAAS,EACTC,cAAa,EACbC,qBAAoB,EACpBC,iBAAkB,KAAK,CAAA,EACvBC,qBAAsB,QAAO,EAC7BC,SAAQ,EACRC,iBAAgB,EAChBC,oBAAmB,EACnBC,eAAc,EACdC,qBAAoB,EACrB,GAAGlB;IAEJ,MAAMmB,cAAcD,iCAAAA,kCAAAA,uBAAyBb,gBAAgB,CAACX,aAAa,CAAC,AAAC;IAE7E,MAAM0B,YAAYhB,cAAc;IAChC,MAAMiB,kBAAkBlC,wBAAwB;QAC9CmC,MAAM;IACR;IAEA,MAAMC,aAAajC,iBAAiB;QAAEY;QAAOC;QAASW;IAAS,GAAG;QAChEvB,aAAa;YACXiB;YACAC;YACAH;QACF;QACAd,kBAAkB;YAChBmB;YACAD;YACAH;YACAF,eAAeA,0BAAAA,2BAAAA,gBAAiB,aAAa;QAC/C;QACAZ,8BAA8B;YAC5BwB;YACAD;YACA,4FAA4F;YAC5F,wEAAwE;YACxEE,sBAAsBC;QACxB;KACD;IAED,MAAMK,WAAWtC,MAAMuC,MAAM,CAAiB,IAAI;IAClD,MAAM,EAAEC,mBAAkB,EAAEC,kBAAiB,EAAE,GAAGvC;IAClD,MAAMwC,YAAYjC,iBAAiB,CAACkC,IAA6C;YAC/E7B;QAAAA,CAAAA,mBAAAA,MAAM4B,SAAS,cAAf5B,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkB6B;QAClB,IAAI,CAACL,SAASM,OAAO,IAAI,CAACD,EAAEE,OAAO,IAAIF,EAAEG,gBAAgB,EAAE;YACzD;QACF,CAAC;QAED,IAAIH,EAAEI,GAAG,KAAKnC,MAAM;YAClB,MAAMoC,WAAWV,SAASM,OAAO,CAACK,aAAa,CAAC;YAChD,IAAID,UAAU;oBACZR;gBAAAA,CAAAA,sBAAAA,mBAAmBQ,uBAAnBR,iCAAAA,KAAAA,IAAAA,oBAA8BU;YAChC,CAAC;QACH,CAAC;QAED,IAAIP,EAAEI,GAAG,KAAKpC,KAAK;YACjB,MAAMwC,OAAOb,SAASM,OAAO,CAACQ,gBAAgB,CAAC;YAC/C,IAAID,KAAKE,MAAM,EAAE;oBAEfZ;gBADA,MAAMa,UAAUH,KAAKI,IAAI,CAACJ,KAAKE,MAAM,GAAG;gBACxCZ,CAAAA,qBAAAA,kBAAkBa,sBAAlBb,gCAAAA,KAAAA,IAAAA,mBAA2CS;YAC7C,CAAC;QACH,CAAC;IACH;IAEA,MAAMM,iBAAiBrD,kBACrB;QACEsD,MAAM;QACNC,IAAI;QACJC,kBAAkB,IAAI;QACtB,GAAIzB,aAAaC,eAAe;QAChC,GAAGrB,KAAK;QACR4B;IACF,GACAhC,cAAcK,KAAKsB,WAAWuB,QAAQ,EAAEtB;IAG1C,OAAO;QACL,GAAGkB,cAAc;QACjBtC;QACAmB;QACAwB,gBAAgB,CAAC,CAAC1C;QAClBO;QACAC;QACAE;IACF;AACF,EAAE"}

package/lib/components/DataGrid/useDataGridContextValues.js

@@ -1,16 +1,15 @@
 import { useTableContextValues_unstable } from '../Table/useTableContextValues';
 export function useDataGridContextValues_unstable(state) {
-  const tableContextValues = useTableContextValues_unstable(state);
-  return {
-    ...tableContextValues,
-    dataGrid: {
-      ...state.tableState,
-      focusMode: state.focusMode,
-      selectableRows: state.selectableRows,
-      subtleSelection: state.subtleSelection,
-      selectionAppearance: state.selectionAppearance,
-      resizableColumns: state.resizableColumns
-    }
-  };
+    const tableContextValues = useTableContextValues_unstable(state);
+    return {
+        ...tableContextValues,
+        dataGrid: {
+            ...state.tableState,
+            focusMode: state.focusMode,
+            selectableRows: state.selectableRows,
+            subtleSelection: state.subtleSelection,
+            selectionAppearance: state.selectionAppearance,
+            resizableColumns: state.resizableColumns
+        }
+    };
 }
-//# sourceMappingURL=useDataGridContextValues.js.map

package/lib/components/DataGrid/useDataGridContextValues.js.map

@@ -1 +1 @@
-{"version":3,"names":["useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns"],"sources":["../../../src/components/DataGrid/useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n      resizableColumns: state.resizableColumns,\n    },\n  };\n}\n"],"mappings":"AAAA,SAASA,8BAA8B,QAAQ;AAG/C,OAAO,SAASC,kCAAkCC,KAAoB,EAAyB;EAC7F,MAAMC,kBAAA,GAAqBH,8BAAA,CAA+BE,KAAA;EAC1D,OAAO;IACL,GAAGC,kBAAkB;IACrBC,QAAA,EAAU;MACR,GAAGF,KAAA,CAAMG,UAAU;MACnBC,SAAA,EAAWJ,KAAA,CAAMI,SAAS;MAC1BC,cAAA,EAAgBL,KAAA,CAAMK,cAAc;MACpCC,eAAA,EAAiBN,KAAA,CAAMM,eAAe;MACtCC,mBAAA,EAAqBP,KAAA,CAAMO,mBAAmB;MAC9CC,gBAAA,EAAkBR,KAAA,CAAMQ;IAC1B;EACF;AACF"}
+{"version":3,"sources":["useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n  const tableContextValues = useTableContextValues_unstable(state);\n  return {\n    ...tableContextValues,\n    dataGrid: {\n      ...state.tableState,\n      focusMode: state.focusMode,\n      selectableRows: state.selectableRows,\n      subtleSelection: state.subtleSelection,\n      selectionAppearance: state.selectionAppearance,\n      resizableColumns: state.resizableColumns,\n    },\n  };\n}\n"],"names":["useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","dataGrid","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns"],"mappings":"AAAA,SAASA,8BAA8B,QAAQ,iCAAiC;AAGhF,OAAO,SAASC,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAMC,qBAAqBH,+BAA+BE;IAC1D,OAAO;QACL,GAAGC,kBAAkB;QACrBC,UAAU;YACR,GAAGF,MAAMG,UAAU;YACnBC,WAAWJ,MAAMI,SAAS;YAC1BC,gBAAgBL,MAAMK,cAAc;YACpCC,iBAAiBN,MAAMM,eAAe;YACtCC,qBAAqBP,MAAMO,mBAAmB;YAC9CC,kBAAkBR,MAAMQ,gBAAgB;QAC1C;IACF;AACF,CAAC"}

package/lib/components/DataGrid/useDataGridStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useTableStyles_unstable","dataGridClassNames","root","useDataGridStyles_unstable","state","className"],"sources":["../../../src/components/DataGrid/useDataGridStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridSlots, DataGridState } from './DataGrid.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableStyles_unstable } from '../Table/useTableStyles.styles';\n\nexport const dataGridClassNames: SlotClassNames<DataGridSlots> = {\n  root: 'fui-DataGrid',\n};\n\n/**\n * Apply styling to the DataGrid slots based on the state\n */\nexport const useDataGridStyles_unstable = (state: DataGridState): DataGridState => {\n  useTableStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridClassNames.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ;AAG7B,SAASC,uBAAuB,QAAQ;AAExC,OAAO,MAAMC,kBAAA,GAAoD;EAC/DC,IAAA,EAAM;AACR;AAEA;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAAwC;EACjFJ,uBAAA,CAAwBI,KAAA;EACxBA,KAAA,CAAMF,IAAI,CAACG,SAAS,GAAGN,YAAA,CAAaE,kBAAA,CAAmBC,IAAI,EAAEE,KAAA,CAAMF,IAAI,CAACG,SAAS;EAEjF,OAAOD,KAAA;AACT"}
+{"version":3,"names":["mergeClasses","useTableStyles_unstable","dataGridClassNames","root","useDataGridStyles_unstable","state","className"],"sources":["useDataGridStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useTableStyles_unstable } from '../Table/useTableStyles.styles';\nexport const dataGridClassNames = {\n    root: 'fui-DataGrid'\n};\n/**\n * Apply styling to the DataGrid slots based on the state\n */ export const useDataGridStyles_unstable = (state)=>{\n    useTableStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridClassNames.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnDJ,uBAAuB,CAACI,KAAK,CAAC;EAC9BA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGN,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EAClF,OAAOD,KAAK;AAChB,CAAC"}

package/lib/components/DataGridBody/DataGridBody.js

@@ -5,12 +5,10 @@ import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DataGridBody component
- */
-export const DataGridBody = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useDataGridBody_unstable(props, ref);
-  useDataGridBodyStyles_unstable(state);
-  useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);
-  return renderDataGridBody_unstable(state);
+ */ export const DataGridBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useDataGridBody_unstable(props, ref);
+    useDataGridBodyStyles_unstable(state);
+    useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);
+    return renderDataGridBody_unstable(state);
 });
 DataGridBody.displayName = 'DataGridBody';
-//# sourceMappingURL=DataGridBody.js.map

package/lib/components/DataGridBody/DataGridBody.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDataGridBody_unstable","renderDataGridBody_unstable","useDataGridBodyStyles_unstable","useCustomStyleHook_unstable","DataGridBody","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/DataGridBody/DataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridBody_unstable } from './useDataGridBody';\nimport { renderDataGridBody_unstable } from './renderDataGridBody';\nimport { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';\nimport type { DataGridBodyProps } from './DataGridBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridBody component\n */\nexport const DataGridBody: ForwardRefComponent<DataGridBodyProps> &\n  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {\n  const state = useDataGridBody_unstable(props, ref);\n\n  useDataGridBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);\n\n  return renderDataGridBody_unstable(state);\n}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);\n\nDataGridBody.displayName = 'DataGridBody';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAG/C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,YAAA,gBACiDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC7F,MAAMC,KAAA,GAAQR,wBAAA,CAAyBM,KAAA,EAAOC,GAAA;EAE9CL,8BAAA,CAA+BM,KAAA;EAE/BL,2BAAA,CAA4B,kCAAkCK,KAAA;EAE9D,OAAOP,2BAAA,CAA4BO,KAAA;AACrC;AAEAJ,YAAA,CAAaK,WAAW,GAAG"}
+{"version":3,"sources":["DataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridBody_unstable } from './useDataGridBody';\nimport { renderDataGridBody_unstable } from './renderDataGridBody';\nimport { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';\nimport type { DataGridBodyProps } from './DataGridBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridBody component\n */\nexport const DataGridBody: ForwardRefComponent<DataGridBodyProps> &\n  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {\n  const state = useDataGridBody_unstable(props, ref);\n\n  useDataGridBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);\n\n  return renderDataGridBody_unstable(state);\n}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);\n\nDataGridBody.displayName = 'DataGridBody';\n"],"names":["React","useDataGridBody_unstable","renderDataGridBody_unstable","useDataGridBodyStyles_unstable","useCustomStyleHook_unstable","DataGridBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BACiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC7F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAyG;AAEzGJ,aAAaK,WAAW,GAAG"}

package/lib/components/DataGridBody/DataGridBody.types.js

@@ -1,2 +1 @@
 import * as React from 'react';
-//# sourceMappingURL=DataGridBody.types.js.map

package/lib/components/DataGridBody/DataGridBody.types.js.map

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/DataGridBody/DataGridBody.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableRowData } from '../../hooks';\nimport type { TableBodySlots, TableBodyProps, TableBodyState } from '../TableBody/TableBody.types';\n\nexport type DataGridBodySlots = TableBodySlots;\n\nexport type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React.ReactNode;\n\n/**\n * DataGridBody Props\n */\nexport type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {\n  /**\n   * Render function for rows\n   */\n  children: RowRenderFunction<TItem>;\n};\n\n/**\n * State used in rendering DataGridBody\n */\nexport type DataGridBodyState = TableBodyState & {\n  rows: TableRowData<unknown>[];\n\n  renderRow: RowRenderFunction;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
+{"version":3,"sources":["DataGridBody.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableRowData } from '../../hooks';\nimport type { TableBodySlots, TableBodyProps, TableBodyState } from '../TableBody/TableBody.types';\n\nexport type DataGridBodySlots = TableBodySlots;\n\nexport type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React.ReactNode;\n\n/**\n * DataGridBody Props\n */\nexport type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {\n  /**\n   * Render function for rows\n   */\n  children: RowRenderFunction<TItem>;\n};\n\n/**\n * State used in rendering DataGridBody\n */\nexport type DataGridBodyState = TableBodyState & {\n  rows: TableRowData<unknown>[];\n\n  renderRow: RowRenderFunction;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/DataGridBody/index.js

@@ -3,4 +3,3 @@ export * from './DataGridBody.types';
 export * from './renderDataGridBody';
 export * from './useDataGridBody';
 export * from './useDataGridBodyStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/DataGridBody/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DataGridBody/index.ts"],"sourcesContent":["export * from './DataGridBody';\nexport * from './DataGridBody.types';\nexport * from './renderDataGridBody';\nexport * from './useDataGridBody';\nexport * from './useDataGridBodyStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DataGridBody';\nexport * from './DataGridBody.types';\nexport * from './renderDataGridBody';\nexport * from './useDataGridBody';\nexport * from './useDataGridBodyStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}

package/lib/components/DataGridBody/renderDataGridBody.js

@@ -1,17 +1,12 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { TableRowIdContextProvider } from '../../contexts/rowIdContext';
 /**
  * Render the final JSX of DataGridBody
- */
-export const renderDataGridBody_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, state.rows.map(row => /*#__PURE__*/createElement(TableRowIdContextProvider, {
-    key: row.rowId,
-    value: row.rowId
-  }, state.renderRow(row))));
+ */ export const renderDataGridBody_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, state.rows.map((row)=>/*#__PURE__*/ createElement(TableRowIdContextProvider, {
+            key: row.rowId,
+            value: row.rowId
+        }, state.renderRow(row))));
 };
-//# sourceMappingURL=renderDataGridBody.js.map

package/lib/components/DataGridBody/renderDataGridBody.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","TableRowIdContextProvider","renderDataGridBody_unstable","state","slots","slotProps","root","rows","map","row","key","rowId","value","renderRow"],"sources":["../../../src/components/DataGridBody/renderDataGridBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';\nimport { TableRowIdContextProvider } from '../../contexts/rowIdContext';\n\n/**\n * Render the final JSX of DataGridBody\n */\nexport const renderDataGridBody_unstable = (state: DataGridBodyState) => {\n  const { slots, slotProps } = getSlotsNext<DataGridBodySlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.rows.map(row => (\n        <TableRowIdContextProvider key={row.rowId} value={row.rowId}>\n          {state.renderRow(row)}\n        </TableRowIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAC9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,yBAAyB,QAAQ;AAE1C;;;AAGA,OAAO,MAAMC,2BAAA,GAA+BC,KAAA,IAA6B;EACvE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGL,YAAA,CAAgCG,KAAA;EAE7D,oBACEJ,aAdJ,CAcKK,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BH,KAAA,CAAMI,IAAI,CAACC,GAAG,CAACC,GAAA,iBACdV,aAhBR,CAgBSE,yBAAA;IAA0BS,GAAA,EAAKD,GAAA,CAAIE,KAAK;IAAEC,KAAA,EAAOH,GAAA,CAAIE;KACnDR,KAAA,CAAMU,SAAS,CAACJ,GAAA;AAK3B"}
+{"version":3,"sources":["renderDataGridBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';\nimport { TableRowIdContextProvider } from '../../contexts/rowIdContext';\n\n/**\n * Render the final JSX of DataGridBody\n */\nexport const renderDataGridBody_unstable = (state: DataGridBodyState) => {\n  const { slots, slotProps } = getSlotsNext<DataGridBodySlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.rows.map(row => (\n        <TableRowIdContextProvider key={row.rowId} value={row.rowId}>\n          {state.renderRow(row)}\n        </TableRowIdContextProvider>\n      ))}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","TableRowIdContextProvider","renderDataGridBody_unstable","state","slots","slotProps","root","rows","map","row","key","rowId","value","renderRow"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAAgCG;IAE7D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BH,MAAMI,IAAI,CAACC,GAAG,CAACC,CAAAA,oBACd,AAhBR,cAgBSR;YAA0BS,KAAKD,IAAIE,KAAK;YAAEC,OAAOH,IAAIE,KAAK;WACxDR,MAAMU,SAAS,CAACJ;AAK3B,EAAE"}

package/lib/components/DataGridBody/useDataGridBody.js

@@ -10,23 +10,19 @@ import { useTableContext } from '../../contexts/tableContext';
  *
  * @param props - props from this instance of DataGridBody
  * @param ref - reference to root HTMLElement of DataGridBody
- */
-export const useDataGridBody_unstable = (props, ref) => {
-  const {
-    sortable
-  } = useTableContext();
-  const getRows = useDataGridContext_unstable(ctx => ctx.getRows);
-  const sort = useDataGridContext_unstable(ctx => ctx.sort.sort);
-  const rows = sortable ? sort(getRows()) : getRows();
-  const baseState = useTableBody_unstable({
-    ...props,
-    children: null,
-    as: 'div'
-  }, ref);
-  return {
-    ...baseState,
-    rows,
-    renderRow: props.children
-  };
+ */ export const useDataGridBody_unstable = (props, ref)=>{
+    const { sortable  } = useTableContext();
+    const getRows = useDataGridContext_unstable((ctx)=>ctx.getRows);
+    const sort = useDataGridContext_unstable((ctx)=>ctx.sort.sort);
+    const rows = sortable ? sort(getRows()) : getRows();
+    const baseState = useTableBody_unstable({
+        ...props,
+        children: null,
+        as: 'div'
+    }, ref);
+    return {
+        ...baseState,
+        rows,
+        renderRow: props.children
+    };
 };
-//# sourceMappingURL=useDataGridBody.js.map

package/lib/components/DataGridBody/useDataGridBody.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableBody_unstable","useDataGridContext_unstable","useTableContext","useDataGridBody_unstable","props","ref","sortable","getRows","ctx","sort","rows","baseState","children","as","renderRow"],"sources":["../../../src/components/DataGridBody/useDataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';\nimport { useTableBody_unstable } from '../TableBody/useTableBody';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridBody.\n *\n * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable,\n * before being passed to renderDataGridBody_unstable.\n *\n * @param props - props from this instance of DataGridBody\n * @param ref - reference to root HTMLElement of DataGridBody\n */\nexport const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref<HTMLElement>): DataGridBodyState => {\n  const { sortable } = useTableContext();\n  const getRows = useDataGridContext_unstable(ctx => ctx.getRows);\n  const sort = useDataGridContext_unstable(ctx => ctx.sort.sort);\n  const rows = sortable ? sort(getRows()) : getRows();\n\n  const baseState = useTableBody_unstable({ ...props, children: null, as: 'div' }, ref);\n  return {\n    ...baseState,\n    rows,\n    renderRow: props.children,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,eAAe,QAAQ;AAEhC;;;;;;;;;AASA,OAAO,MAAMC,wBAAA,GAA2BA,CAACC,KAAA,EAA0BC,GAAA,KAAmD;EACpH,MAAM;IAAEC;EAAQ,CAAE,GAAGJ,eAAA;EACrB,MAAMK,OAAA,GAAUN,2BAAA,CAA4BO,GAAA,IAAOA,GAAA,CAAID,OAAO;EAC9D,MAAME,IAAA,GAAOR,2BAAA,CAA4BO,GAAA,IAAOA,GAAA,CAAIC,IAAI,CAACA,IAAI;EAC7D,MAAMC,IAAA,GAAOJ,QAAA,GAAWG,IAAA,CAAKF,OAAA,MAAaA,OAAA,EAAS;EAEnD,MAAMI,SAAA,GAAYX,qBAAA,CAAsB;IAAE,GAAGI,KAAK;IAAEQ,QAAA,EAAU,IAAI;IAAEC,EAAA,EAAI;EAAM,GAAGR,GAAA;EACjF,OAAO;IACL,GAAGM,SAAS;IACZD,IAAA;IACAI,SAAA,EAAWV,KAAA,CAAMQ;EACnB;AACF"}
+{"version":3,"sources":["useDataGridBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';\nimport { useTableBody_unstable } from '../TableBody/useTableBody';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridBody.\n *\n * The returned state can be modified with hooks such as useDataGridBodyStyles_unstable,\n * before being passed to renderDataGridBody_unstable.\n *\n * @param props - props from this instance of DataGridBody\n * @param ref - reference to root HTMLElement of DataGridBody\n */\nexport const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref<HTMLElement>): DataGridBodyState => {\n  const { sortable } = useTableContext();\n  const getRows = useDataGridContext_unstable(ctx => ctx.getRows);\n  const sort = useDataGridContext_unstable(ctx => ctx.sort.sort);\n  const rows = sortable ? sort(getRows()) : getRows();\n\n  const baseState = useTableBody_unstable({ ...props, children: null, as: 'div' }, ref);\n  return {\n    ...baseState,\n    rows,\n    renderRow: props.children,\n  };\n};\n"],"names":["React","useTableBody_unstable","useDataGridContext_unstable","useTableContext","useDataGridBody_unstable","props","ref","sortable","getRows","ctx","sort","rows","baseState","children","as","renderRow"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,SAAQ,EAAE,GAAGJ;IACrB,MAAMK,UAAUN,4BAA4BO,CAAAA,MAAOA,IAAID,OAAO;IAC9D,MAAME,OAAOR,4BAA4BO,CAAAA,MAAOA,IAAIC,IAAI,CAACA,IAAI;IAC7D,MAAMC,OAAOJ,WAAWG,KAAKF,aAAaA,SAAS;IAEnD,MAAMI,YAAYX,sBAAsB;QAAE,GAAGI,KAAK;QAAEQ,UAAU,IAAI;QAAEC,IAAI;IAAM,GAAGR;IACjF,OAAO;QACL,GAAGM,SAAS;QACZD;QACAI,WAAWV,MAAMQ,QAAQ;IAC3B;AACF,EAAE"}

package/lib/components/DataGridBody/useDataGridBodyStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useTableBodyStyles_unstable","dataGridBodyClassNames","root","useDataGridBodyStyles_unstable","state","className"],"sources":["../../../src/components/DataGridBody/useDataGridBodyStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridBodySlots, DataGridBodyState } from './DataGridBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles.styles';\n\nexport const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots> = {\n  root: 'fui-DataGridBody',\n};\n\n/**\n * Apply styling to the DataGridBody slots based on the state\n */\nexport const useDataGridBodyStyles_unstable = (state: DataGridBodyState): DataGridBodyState => {\n  useTableBodyStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridBodyClassNames.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ;AAG7B,SAASC,2BAA2B,QAAQ;AAE5C,OAAO,MAAMC,sBAAA,GAA4D;EACvEC,IAAA,EAAM;AACR;AAEA;;;AAGA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAAgD;EAC7FJ,2BAAA,CAA4BI,KAAA;EAC5BA,KAAA,CAAMF,IAAI,CAACG,SAAS,GAAGN,YAAA,CAAaE,sBAAA,CAAuBC,IAAI,EAAEE,KAAA,CAAMF,IAAI,CAACG,SAAS;EAErF,OAAOD,KAAA;AACT"}
+{"version":3,"names":["mergeClasses","useTableBodyStyles_unstable","dataGridBodyClassNames","root","useDataGridBodyStyles_unstable","state","className"],"sources":["useDataGridBodyStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useTableBodyStyles_unstable } from '../TableBody/useTableBodyStyles.styles';\nexport const dataGridBodyClassNames = {\n    root: 'fui-DataGridBody'\n};\n/**\n * Apply styling to the DataGridBody slots based on the state\n */ export const useDataGridBodyStyles_unstable = (state)=>{\n    useTableBodyStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridBodyClassNames.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvDJ,2BAA2B,CAACI,KAAK,CAAC;EAClCA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGN,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACtF,OAAOD,KAAK;AAChB,CAAC"}

package/lib/components/DataGridCell/DataGridCell.js

@@ -5,12 +5,10 @@ import { useDataGridCellStyles_unstable } from './useDataGridCellStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DataGridCell component
- */
-export const DataGridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useDataGridCell_unstable(props, ref);
-  useDataGridCellStyles_unstable(state);
-  useCustomStyleHook_unstable('useDataGridCellStyles_unstable')(state);
-  return renderDataGridCell_unstable(state);
+ */ export const DataGridCell = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useDataGridCell_unstable(props, ref);
+    useDataGridCellStyles_unstable(state);
+    useCustomStyleHook_unstable('useDataGridCellStyles_unstable')(state);
+    return renderDataGridCell_unstable(state);
 });
 DataGridCell.displayName = 'DataGridCell';
-//# sourceMappingURL=DataGridCell.js.map

package/lib/components/DataGridCell/DataGridCell.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDataGridCell_unstable","renderDataGridCell_unstable","useDataGridCellStyles_unstable","useCustomStyleHook_unstable","DataGridCell","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/DataGridCell/DataGridCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridCell_unstable } from './useDataGridCell';\nimport { renderDataGridCell_unstable } from './renderDataGridCell';\nimport { useDataGridCellStyles_unstable } from './useDataGridCellStyles.styles';\nimport type { DataGridCellProps } from './DataGridCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridCell component\n */\nexport const DataGridCell: ForwardRefComponent<DataGridCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridCell_unstable(props, ref);\n\n  useDataGridCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridCellStyles_unstable')(state);\n\n  return renderDataGridCell_unstable(state);\n});\n\nDataGridCell.displayName = 'DataGridCell';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAG/C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,YAAA,gBAAuDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnG,MAAMC,KAAA,GAAQR,wBAAA,CAAyBM,KAAA,EAAOC,GAAA;EAE9CL,8BAAA,CAA+BM,KAAA;EAE/BL,2BAAA,CAA4B,kCAAkCK,KAAA;EAE9D,OAAOP,2BAAA,CAA4BO,KAAA;AACrC;AAEAJ,YAAA,CAAaK,WAAW,GAAG"}
+{"version":3,"sources":["DataGridCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridCell_unstable } from './useDataGridCell';\nimport { renderDataGridCell_unstable } from './renderDataGridCell';\nimport { useDataGridCellStyles_unstable } from './useDataGridCellStyles.styles';\nimport type { DataGridCellProps } from './DataGridCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridCell component\n */\nexport const DataGridCell: ForwardRefComponent<DataGridCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridCell_unstable(props, ref);\n\n  useDataGridCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridCellStyles_unstable')(state);\n\n  return renderDataGridCell_unstable(state);\n});\n\nDataGridCell.displayName = 'DataGridCell';\n"],"names":["React","useDataGridCell_unstable","renderDataGridCell_unstable","useDataGridCellStyles_unstable","useCustomStyleHook_unstable","DataGridCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnG,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/DataGridCell/DataGridCell.types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=DataGridCell.types.js.map
+export { };

package/lib/components/DataGridCell/DataGridCell.types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DataGridCell/DataGridCell.types.ts"],"sourcesContent":["import { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types';\n\nexport type DataGridCellSlots = TableCellSlots;\n\n/**\n * DataGridCell Props\n */\nexport type DataGridCellProps = TableCellProps;\n\n/**\n * State used in rendering DataGridCell\n */\nexport type DataGridCellState = TableCellState;\n"],"mappings":"AAAA"}
+{"version":3,"sources":["DataGridCell.types.ts"],"sourcesContent":["import { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types';\n\nexport type DataGridCellSlots = TableCellSlots;\n\n/**\n * DataGridCell Props\n */\nexport type DataGridCellProps = TableCellProps & {\n  /**\n   * Used when there are nested focusble elements inside a focusable cell\n   * - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress\n   */\n  focusMode?: 'group';\n};\n\n/**\n * State used in rendering DataGridCell\n */\nexport type DataGridCellState = TableCellState;\n"],"names":[],"mappings":"AAAA,WAkB+C"}

package/lib/components/DataGridCell/index.js

@@ -3,4 +3,3 @@ export * from './DataGridCell.types';
 export * from './renderDataGridCell';
 export * from './useDataGridCell';
 export * from './useDataGridCellStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/DataGridCell/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DataGridCell/index.ts"],"sourcesContent":["export * from './DataGridCell';\nexport * from './DataGridCell.types';\nexport * from './renderDataGridCell';\nexport * from './useDataGridCell';\nexport * from './useDataGridCellStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './DataGridCell';\nexport * from './DataGridCell.types';\nexport * from './renderDataGridCell';\nexport * from './useDataGridCell';\nexport * from './useDataGridCellStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}

package/lib/components/DataGridCell/renderDataGridCell.js

@@ -1,8 +1,6 @@
 import { renderTableCell_unstable } from '../TableCell/renderTableCell';
 /**
  * Render the final JSX of DataGridCell
- */
-export const renderDataGridCell_unstable = state => {
-  return renderTableCell_unstable(state);
+ */ export const renderDataGridCell_unstable = (state)=>{
+    return renderTableCell_unstable(state);
 };
-//# sourceMappingURL=renderDataGridCell.js.map

package/lib/components/DataGridCell/renderDataGridCell.js.map

@@ -1 +1 @@
-{"version":3,"names":["renderTableCell_unstable","renderDataGridCell_unstable","state"],"sources":["../../../src/components/DataGridCell/renderDataGridCell.tsx"],"sourcesContent":["import type { DataGridCellState } from './DataGridCell.types';\nimport { renderTableCell_unstable } from '../TableCell/renderTableCell';\n\n/**\n * Render the final JSX of DataGridCell\n */\nexport const renderDataGridCell_unstable = (state: DataGridCellState) => {\n  return renderTableCell_unstable(state);\n};\n"],"mappings":"AACA,SAASA,wBAAwB,QAAQ;AAEzC;;;AAGA,OAAO,MAAMC,2BAAA,GAA+BC,KAAA,IAA6B;EACvE,OAAOF,wBAAA,CAAyBE,KAAA;AAClC"}
+{"version":3,"sources":["renderDataGridCell.tsx"],"sourcesContent":["import type { DataGridCellState } from './DataGridCell.types';\nimport { renderTableCell_unstable } from '../TableCell/renderTableCell';\n\n/**\n * Render the final JSX of DataGridCell\n */\nexport const renderDataGridCell_unstable = (state: DataGridCellState) => {\n  return renderTableCell_unstable(state);\n};\n"],"names":["renderTableCell_unstable","renderDataGridCell_unstable","state"],"mappings":"AACA,SAASA,wBAAwB,QAAQ,+BAA+B;AAExE;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,OAAOF,yBAAyBE;AAClC,EAAE"}

package/lib/components/DataGridCell/useDataGridCell.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useFocusableGroup } from '@fluentui/react-tabster';
 import { useTableCell_unstable } from '../TableCell/useTableCell';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
 import { useColumnIdContext } from '../../contexts/columnIdContext';
@@ -10,18 +11,21 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
  *
  * @param props - props from this instance of DataGridCell
  * @param ref - reference to root HTMLElement of DataGridCell
- */
-export const useDataGridCell_unstable = (props, ref) => {
-  const columnId = useColumnIdContext();
-  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');
-  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);
-  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);
-  return useTableCell_unstable({
-    as: 'div',
-    role: 'gridcell',
-    tabIndex: tabbable ? 0 : undefined,
-    ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),
-    ...props
-  }, ref);
+ */ export const useDataGridCell_unstable = (props, ref)=>{
+    const { focusMode  } = props;
+    const columnId = useColumnIdContext();
+    const tabbable = useDataGridContext_unstable((ctx)=>ctx.focusMode === 'cell');
+    const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
+    const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);
+    const focusableGroupAttr = useFocusableGroup({
+        tabBehavior: 'limited-trap-focus'
+    });
+    return useTableCell_unstable({
+        as: 'div',
+        role: 'gridcell',
+        ...focusMode && focusableGroupAttr,
+        tabIndex: tabbable ? 0 : undefined,
+        ...resizableColumns ? columnSizing.getTableCellProps(columnId) : {},
+        ...props
+    }, ref);
 };
-//# sourceMappingURL=useDataGridCell.js.map

package/lib/components/DataGridCell/useDataGridCell.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","columnId","tabbable","ctx","focusMode","resizableColumns","columnSizing","columnSizing_unstable","as","role","tabIndex","undefined","getTableCellProps"],"sources":["../../../src/components/DataGridCell/useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const columnId = useColumnIdContext();\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n  return useTableCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      tabIndex: tabbable ? 0 : undefined,\n      ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n      ...props,\n    },\n    ref,\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;;AASA,OAAO,MAAMC,wBAAA,GAA2BA,CAACC,KAAA,EAA0BC,GAAA,KAAmD;EACpH,MAAMC,QAAA,GAAWJ,kBAAA;EACjB,MAAMK,QAAA,GAAWN,2BAAA,CAA4BO,GAAA,IAAOA,GAAA,CAAIC,SAAS,KAAK;EACtE,MAAMC,gBAAA,GAAmBT,2BAAA,CAA4BO,GAAA,IAAOA,GAAA,CAAIE,gBAAgB;EAChF,MAAMC,YAAA,GAAeV,2BAAA,CAA4BO,GAAA,IAAOA,GAAA,CAAII,qBAAqB;EACjF,OAAOZ,qBAAA,CACL;IACEa,EAAA,EAAI;IACJC,IAAA,EAAM;IACNC,QAAA,EAAUR,QAAA,GAAW,IAAIS,SAAS;IAClC,IAAIN,gBAAA,GAAmBC,YAAA,CAAaM,iBAAiB,CAACX,QAAA,IAAY,CAAC,CAAC;IACpE,GAAGF;EACL,GACAC,GAAA;AAEJ"}
+{"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n  const { focusMode } = props;\n  const columnId = useColumnIdContext();\n  const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n  const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n  const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n  const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n  return useTableCell_unstable(\n    {\n      as: 'div',\n      role: 'gridcell',\n      ...(focusMode && focusableGroupAttr),\n      tabIndex: tabbable ? 0 : undefined,\n      ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n      ...props,\n    },\n    ref,\n  );\n};\n"],"names":["React","useFocusableGroup","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","focusMode","columnId","tabbable","ctx","resizableColumns","columnSizing","columnSizing_unstable","focusableGroupAttr","tabBehavior","as","role","tabIndex","undefined","getTableCellProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,UAAS,EAAE,GAAGF;IACtB,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BAA4BQ,CAAAA,MAAOA,IAAIH,SAAS,KAAK;IACtE,MAAMI,mBAAmBT,4BAA4BQ,CAAAA,MAAOA,IAAIC,gBAAgB;IAChF,MAAMC,eAAeV,4BAA4BQ,CAAAA,MAAOA,IAAIG,qBAAqB;IACjF,MAAMC,qBAAqBd,kBAAkB;QAAEe,aAAa;IAAqB;IACjF,OAAOd,sBACL;QACEe,IAAI;QACJC,MAAM;QACN,GAAIV,aAAaO,kBAAkB;QACnCI,UAAUT,WAAW,IAAIU,SAAS;QAClC,GAAIR,mBAAmBC,aAAaQ,iBAAiB,CAACZ,YAAY,CAAC,CAAC;QACpE,GAAGH,KAAK;IACV,GACAC;AAEJ,EAAE"}

package/lib/components/DataGridCell/useDataGridCellStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","useTableCellStyles_unstable","dataGridCellClassNames","root","useDataGridCellStyles_unstable","state","className"],"sources":["../../../src/components/DataGridCell/useDataGridCellStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridCellSlots, DataGridCellState } from './DataGridCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles.styles';\n\nexport const dataGridCellClassNames: SlotClassNames<DataGridCellSlots> = {\n  root: 'fui-DataGridCell',\n};\n\n/**\n * Apply styling to the DataGridCell slots based on the state\n */\nexport const useDataGridCellStyles_unstable = (state: DataGridCellState): DataGridCellState => {\n  useTableCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridCellClassNames.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ;AAG7B,SAASC,2BAA2B,QAAQ;AAE5C,OAAO,MAAMC,sBAAA,GAA4D;EACvEC,IAAA,EAAM;AACR;AAEA;;;AAGA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAAgD;EAC7FJ,2BAAA,CAA4BI,KAAA;EAC5BA,KAAA,CAAMF,IAAI,CAACG,SAAS,GAAGN,YAAA,CAAaE,sBAAA,CAAuBC,IAAI,EAAEE,KAAA,CAAMF,IAAI,CAACG,SAAS;EAErF,OAAOD,KAAA;AACT"}
+{"version":3,"names":["mergeClasses","useTableCellStyles_unstable","dataGridCellClassNames","root","useDataGridCellStyles_unstable","state","className"],"sources":["useDataGridCellStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles.styles';\nexport const dataGridCellClassNames = {\n    root: 'fui-DataGridCell'\n};\n/**\n * Apply styling to the DataGridCell slots based on the state\n */ export const useDataGridCellStyles_unstable = (state)=>{\n    useTableCellStyles_unstable(state);\n    state.root.className = mergeClasses(dataGridCellClassNames.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvDJ,2BAA2B,CAACI,KAAK,CAAC;EAClCA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGN,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACtF,OAAOD,KAAK;AAChB,CAAC"}