@fluentui/react-table 9.0.0-alpha.1 → 9.0.0-alpha.2

package/lib/navigationModes/composite.js

@@ -0,0 +1,208 @@
+export function applyCompositeNavigation(element) {
+  const container = element;
+  let mode = 'row';
+  let movingOut = false;
+  const pre = document.createElement('div');
+  const post = document.createElement('div');
+
+  if (!pre || !post) {
+    return;
+  }
+
+  pre.tabIndex = 0;
+  post.tabIndex = 0;
+  pre.addEventListener('focus', () => {
+    if (movingOut) {
+      movingOut = false;
+      return;
+    } else {
+      treeWalker.currentNode = container;
+      mode = 'row';
+      const candidate = treeWalker.nextNode();
+
+      if (isHTMLElement(candidate)) {
+        candidate.focus();
+      }
+    }
+  });
+  post.addEventListener('focus', () => {
+    if (movingOut) {
+      movingOut = false;
+      return;
+    } else {
+      treeWalker.currentNode = post;
+      mode = 'row';
+      const candidate = treeWalker.previousNode();
+
+      if (isHTMLElement(candidate)) {
+        candidate.focus();
+      }
+    }
+  });
+  container.before(pre);
+  container.after(post);
+
+  const acceptNode = node => {
+    if (!isHTMLElement(node)) {
+      return NodeFilter.FILTER_SKIP;
+    }
+
+    if (!isCell(node) && !isRow(node)) {
+      return NodeFilter.FILTER_SKIP;
+    }
+
+    if (mode === 'column' && isRow(node)) {
+      return NodeFilter.FILTER_REJECT;
+    }
+
+    if (mode === 'row' && isCell(node)) {
+      return NodeFilter.FILTER_REJECT;
+    }
+
+    if (node.tabIndex < 0) {
+      return NodeFilter.FILTER_SKIP;
+    }
+
+    return NodeFilter.FILTER_ACCEPT;
+  };
+
+  const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode
+  });
+
+  const up = current => {
+    const prevMode = mode;
+    mode = 'row';
+    treeWalker.currentNode = current;
+
+    if (prevMode === 'column') {
+      treeWalker.previousNode();
+    }
+
+    const node = treeWalker.previousNode();
+
+    if (isHTMLElement(node)) {
+      return node;
+    }
+
+    return null;
+  };
+
+  const down = current => {
+    mode = 'row';
+    treeWalker.currentNode = current;
+    const node = treeWalker.nextNode();
+
+    if (isHTMLElement(node)) {
+      return node;
+    }
+
+    return null;
+  };
+
+  const left = current => {
+    treeWalker.currentNode = current;
+    const prevMode = mode;
+    mode = 'column';
+    let node = null;
+
+    if (prevMode === 'row') {
+      let tmp = null;
+
+      while (tmp = treeWalker.nextNode()) {
+        node = tmp;
+      }
+    } else {
+      node = treeWalker.previousNode();
+    }
+
+    if (isHTMLElement(node)) {
+      return node;
+    }
+
+    return null;
+  };
+
+  const right = current => {
+    mode = 'column';
+    treeWalker.currentNode = current;
+    const node = treeWalker.nextNode();
+
+    if (isHTMLElement(node)) {
+      return node;
+    }
+
+    return null;
+  };
+
+  const onKeyDown = e => {
+    const target = e.target;
+
+    if (!target || !isHTMLElement(target)) {
+      return;
+    }
+
+    let next = null;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        next = down(target);
+        break;
+
+      case 'ArrowUp':
+        next = up(target);
+        break;
+
+      case 'ArrowLeft':
+        next = left(target);
+        break;
+
+      case 'ArrowRight':
+        next = right(target);
+        break;
+
+      case 'Tab':
+        movingOut = true;
+
+        if (e.shiftKey) {
+          pre.focus();
+        } else {
+          post.focus();
+        }
+
+        break;
+
+      default:
+        break;
+    }
+
+    if (next) {
+      e.preventDefault();
+      next.focus();
+    }
+  };
+
+  container.addEventListener('keydown', onKeyDown);
+  return () => container.removeEventListener('keydown', onKeyDown);
+}
+
+function isHTMLElement(node) {
+  return node instanceof HTMLElement;
+}
+
+function isRow(element) {
+  if (element.getAttribute('role') === 'row' || element.tagName === 'TR') {
+    return true;
+  }
+
+  return false;
+}
+
+function isCell(element) {
+  if (element.getAttribute('role') === 'cell' || element.getAttribute('role') === 'gridcell' || element.tagName === 'TD') {
+    return true;
+  }
+
+  return false;
+}
+//# sourceMappingURL=composite.js.map

package/lib/navigationModes/composite.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["navigationModes/composite.ts"],"names":[],"mappings":"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","sourcesContent":["export function applyCompositeNavigation(element: HTMLElement) {\n  const container = element;\n  let mode: 'row' | 'column' = 'row';\n  let movingOut = false;\n\n  const pre = document.createElement('div');\n  const post = document.createElement('div');\n\n  if (!pre || !post) {\n    return;\n  }\n\n  pre.tabIndex = 0;\n  post.tabIndex = 0;\n\n  pre.addEventListener('focus', () => {\n    if (movingOut) {\n      movingOut = false;\n      return;\n    } else {\n      treeWalker.currentNode = container;\n      mode = 'row';\n      const candidate = treeWalker.nextNode();\n      if (isHTMLElement(candidate)) {\n        candidate.focus();\n      }\n    }\n  });\n\n  post.addEventListener('focus', () => {\n    if (movingOut) {\n      movingOut = false;\n      return;\n    } else {\n      treeWalker.currentNode = post;\n      mode = 'row';\n      const candidate = treeWalker.previousNode();\n      if (isHTMLElement(candidate)) {\n        candidate.focus();\n      }\n    }\n  });\n\n  container.before(pre);\n  container.after(post);\n\n  const acceptNode = (node: Node) => {\n    if (!isHTMLElement(node)) {\n      return NodeFilter.FILTER_SKIP;\n    }\n\n    if (!isCell(node) && !isRow(node)) {\n      return NodeFilter.FILTER_SKIP;\n    }\n\n    if (mode === 'column' && isRow(node)) {\n      return NodeFilter.FILTER_REJECT;\n    }\n\n    if (mode === 'row' && isCell(node)) {\n      return NodeFilter.FILTER_REJECT;\n    }\n\n    if (node.tabIndex < 0) {\n      return NodeFilter.FILTER_SKIP;\n    }\n\n    return NodeFilter.FILTER_ACCEPT;\n  };\n\n  const treeWalker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, { acceptNode });\n\n  const up = (current: HTMLElement) => {\n    const prevMode = mode;\n    mode = 'row';\n    treeWalker.currentNode = current;\n\n    if (prevMode === 'column') {\n      treeWalker.previousNode();\n    }\n\n    const node = treeWalker.previousNode();\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const down = (current: HTMLElement) => {\n    mode = 'row';\n    treeWalker.currentNode = current;\n    const node = treeWalker.nextNode();\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const left = (current: HTMLElement) => {\n    treeWalker.currentNode = current;\n    const prevMode = mode;\n    mode = 'column';\n    let node: Node | null = null;\n\n    if (prevMode === 'row') {\n      let tmp: Node | null = null;\n      while ((tmp = treeWalker.nextNode())) {\n        node = tmp;\n      }\n    } else {\n      node = treeWalker.previousNode();\n    }\n\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const right = (current: HTMLElement) => {\n    mode = 'column';\n    treeWalker.currentNode = current;\n    const node = treeWalker.nextNode();\n    if (isHTMLElement(node)) {\n      return node;\n    }\n    return null;\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    const target = e.target;\n    if (!target || !isHTMLElement(target)) {\n      return;\n    }\n\n    let next: HTMLElement | null = null;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        next = down(target);\n        break;\n      case 'ArrowUp':\n        next = up(target);\n        break;\n      case 'ArrowLeft':\n        next = left(target);\n        break;\n      case 'ArrowRight':\n        next = right(target);\n        break;\n      case 'Tab':\n        movingOut = true;\n        if (e.shiftKey) {\n          pre.focus();\n        } else {\n          post.focus();\n        }\n\n        break;\n      default:\n        break;\n    }\n\n    if (next) {\n      e.preventDefault();\n      next.focus();\n    }\n  };\n\n  container.addEventListener('keydown', onKeyDown);\n  return () => container.removeEventListener('keydown', onKeyDown);\n}\n\nfunction isHTMLElement(node: unknown): node is HTMLElement {\n  return node instanceof HTMLElement;\n}\n\nfunction isRow(element: HTMLElement) {\n  if (element.getAttribute('role') === 'row' || element.tagName === 'TR') {\n    return true;\n  }\n\n  return false;\n}\n\nfunction isCell(element: HTMLElement) {\n  if (\n    element.getAttribute('role') === 'cell' ||\n    element.getAttribute('role') === 'gridcell' ||\n    element.tagName === 'TD'\n  ) {\n    return true;\n  }\n\n  return false;\n}\n"],"sourceRoot":"../src/"}

package/lib/navigationModes/index.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line deprecation/deprecation
+export { useNavigationMode } from './useNavigationMode';
+//# sourceMappingURL=index.js.map

package/lib/navigationModes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["navigationModes/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["// eslint-disable-next-line deprecation/deprecation\nexport { useNavigationMode } from './useNavigationMode';\n"]}

package/lib/navigationModes/useNavigationMode.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { applyCompositeNavigation } from './composite';
+import { applyCellNavigation } from './cell';
+/**
+ * THIS HOOK WILL NOT EXIST IN STABLE RELEASE
+ * Just a quick workaround before tabster fully supports these navigation modes with grid mode
+ * https://github.com/microsoft/fluentui/issues/24382
+ * @internal
+ * @deprecated
+ */
+
+export function useNavigationMode(mode) {
+  const rowNavigationAttr = useArrowNavigationGroup({
+    axis: 'vertical'
+  });
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    switch (mode) {
+      case 'cell':
+        applyCellNavigation(ref.current);
+        break;
+
+      case 'composite':
+        applyCompositeNavigation(ref.current);
+        break;
+
+      case 'row':
+        if (rowNavigationAttr['data-tabster']) {
+          ref.current.setAttribute('data-tabster', rowNavigationAttr['data-tabster']);
+        }
+
+        break;
+    }
+  }, [rowNavigationAttr, mode]);
+  return ref;
+}
+//# sourceMappingURL=useNavigationMode.js.map

package/lib/navigationModes/useNavigationMode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["navigationModes/useNavigationMode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,wBAAT,QAAyC,aAAzC;AACA,SAAS,mBAAT,QAAoC,QAApC;AAIA;;;;;;AAMG;;AACH,OAAM,SAAU,iBAAV,CAA0D,IAA1D,EAA8E;EAClF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;IAAE,IAAI,EAAE;EAAR,CAAD,CAAjD;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,CAAC,GAAG,CAAC,OAAT,EAAkB;MAChB;IACD;;IAED,QAAQ,IAAR;MACE,KAAK,MAAL;QACE,mBAAmB,CAAC,GAAG,CAAC,OAAL,CAAnB;QACA;;MACF,KAAK,WAAL;QACE,wBAAwB,CAAC,GAAG,CAAC,OAAL,CAAxB;QACA;;MACF,KAAK,KAAL;QACE,IAAI,iBAAiB,CAAC,cAAD,CAArB,EAAuC;UACrC,GAAG,CAAC,OAAJ,CAAY,YAAZ,CAAyB,cAAzB,EAAyC,iBAAiB,CAAC,cAAD,CAA1D;QACD;;QACD;IAXJ;EAaD,CAlBD,EAkBG,CAAC,iBAAD,EAAoB,IAApB,CAlBH;EAoBA,OAAO,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { applyCompositeNavigation } from './composite';\nimport { applyCellNavigation } from './cell';\n\nexport type NavigationMode = 'row' | 'cell' | 'composite';\n\n/**\n * THIS HOOK WILL NOT EXIST IN STABLE RELEASE\n * Just a quick workaround before tabster fully supports these navigation modes with grid mode\n * https://github.com/microsoft/fluentui/issues/24382\n * @internal\n * @deprecated\n */\nexport function useNavigationMode<TElement extends HTMLElement>(mode: NavigationMode) {\n  const rowNavigationAttr = useArrowNavigationGroup({ axis: 'vertical' });\n  const ref = React.useRef<TElement>(null);\n\n  React.useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    switch (mode) {\n      case 'cell':\n        applyCellNavigation(ref.current);\n        break;\n      case 'composite':\n        applyCompositeNavigation(ref.current);\n        break;\n      case 'row':\n        if (rowNavigationAttr['data-tabster']) {\n          ref.current.setAttribute('data-tabster', rowNavigationAttr['data-tabster']);\n        }\n        break;\n    }\n  }, [rowNavigationAttr, mode]);\n\n  return ref;\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/TableCellActions.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/TableCellActions/index"), exports);
+//# sourceMappingURL=TableCellActions.js.map

package/lib-commonjs/TableCellActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TableCellActions.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/TableCellActions/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/TableCellLayout.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/TableCellLayout/index"), exports);
+//# sourceMappingURL=TableCellLayout.js.map

package/lib-commonjs/TableCellLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TableCellLayout.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/TableCellLayout/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/TableCellPrimaryLayout.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/TableCellLayout/index"), exports);
+//# sourceMappingURL=TableCellPrimaryLayout.js.map

package/lib-commonjs/TableCellPrimaryLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TableCellPrimaryLayout.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/TableCellLayout/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/TableSelectionCell.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/TableSelectionCell/index"), exports);
+//# sourceMappingURL=TableSelectionCell.js.map

package/lib-commonjs/TableSelectionCell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TableSelectionCell.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/TableSelectionCell/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Table/useTableContextValues.js

@@ -5,18 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTableContextValues_unstable = void 0;
 
+const React = /*#__PURE__*/require("react");
+
 function useTableContextValues_unstable(state) {
   const {
     size,
     noNativeElements,
     sortable
   } = state;
+  const tableContext = React.useMemo(() => ({
+    noNativeElements,
+    size,
+    sortable
+  }), [noNativeElements, size, sortable]);
   return {
-    table: {
-      noNativeElements,
-      size,
-      sortable
-    }
+    table: tableContext
   };
 }
 

package/lib-commonjs/components/Table/useTableContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Table/useTableContextValues.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,8BAAhB,CAA+C,KAA/C,EAAgE;EAC9D,MAAM;IAAE,IAAF;IAAQ,gBAAR;IAA0B;EAA1B,IAAuC,KAA7C;EAEA,OAAO;IACL,KAAK,EAAE;MACL,gBADK;MAEL,IAFK;MAGL;IAHK;EADF,CAAP;AAOD;;AAVD,OAAA,CAAA,8BAAA,GAAA,8BAAA","sourcesContent":["import { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  return {\n    table: {\n      noNativeElements,\n      size,\n      sortable,\n    },\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Table/useTableContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,8BAAhB,CAA+C,KAA/C,EAAgE;EAC9D,MAAM;IAAE,IAAF;IAAQ,gBAAR;IAA0B;EAA1B,IAAuC,KAA7C;EAEA,MAAM,YAAY,GAAG,KAAK,CAAC,OAAN,CACnB,OAAO;IACL,gBADK;IAEL,IAFK;IAGL;EAHK,CAAP,CADmB,EAMnB,CAAC,gBAAD,EAAmB,IAAnB,EAAyB,QAAzB,CANmB,CAArB;EASA,OAAO;IACL,KAAK,EAAE;EADF,CAAP;AAGD;;AAfD,OAAA,CAAA,8BAAA,GAAA,8BAAA","sourcesContent":["import * as React from 'react';\nimport { TableContextValues, TableState } from './Table.types';\n\nexport function useTableContextValues_unstable(state: TableState): TableContextValues {\n  const { size, noNativeElements, sortable } = state;\n\n  const tableContext = React.useMemo(\n    () => ({\n      noNativeElements,\n      size,\n      sortable,\n    }),\n    [noNativeElements, size, sortable],\n  );\n\n  return {\n    table: tableContext,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Table/useTableStyles.js

@@ -7,6 +7,8 @@ exports.useTableStyles_unstable = exports.tableClassNames = exports.tableClassNa
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
 exports.tableClassName = 'fui-Table';
 exports.tableClassNames = {
   root: 'fui-Table'
@@ -17,10 +19,14 @@ exports.tableClassNames = {
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
-    "a9b677": "fly5x3f"
+    "ha4doy": "fmrv4ls",
+    "po53p8": "fgkb47j",
+    "a9b677": "fly5x3f",
+    "mc9l5x": "f1w4nmp0",
+    "De3pzq": "fxugw4r"
   }
 }, {
-  "d": [".fly5x3f{width:100%;}"]
+  "d": [".fmrv4ls{vertical-align:middle;}", ".fgkb47j{border-collapse:collapse;}", ".fly5x3f{width:100%;}", ".f1w4nmp0{display:table;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}"]
 });
 /**
  * Apply styling to the Table slots based on the state

package/lib-commonjs/components/Table/useTableStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Table/useTableStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AACA,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE;AADmD,CAA9C;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAMA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,cAAb,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Table/useTableStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AACA,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE;AADmD,CAA9C;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAUA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,cAAb,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    verticalAlign: 'middle',\n    borderCollapse: 'collapse',\n    width: '100%',\n    display: 'table',\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableBody/useTableBody.js

@@ -22,7 +22,9 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 const useTableBody_unstable = (props, ref) => {
   var _a;
 
-  const noNativeElements = tableContext_1.useTableContext(ctx => ctx.noNativeElements);
+  const {
+    noNativeElements
+  } = tableContext_1.useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'tbody';
   return {
     components: {

package/lib-commonjs/components/TableBody/useTableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableBody/useTableBody.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM,gBAAgB,GAAG,cAAA,CAAA,eAAA,CAAgB,GAAG,IAAI,GAAG,CAAC,gBAA3B,CAAzB;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,OAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,GAAG;IAHsC,CAArC;EAJD,CAAP;AAUD,CAdM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableBodyProps, TableBodyState } from './TableBody.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableBody.\n *\n * The returned state can be modified with hooks such as useTableBodyStyles_unstable,\n * before being passed to renderTableBody_unstable.\n *\n * @param props - props from this instance of TableBody\n * @param ref - reference to root HTMLElement of TableBody\n */\nexport const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTMLElement>): TableBodyState => {\n  const noNativeElements = useTableContext(ctx => ctx.noNativeElements);\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tbody';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableBody/useTableBody.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM;IAAE;EAAF,IAAuB,cAAA,CAAA,eAAA,EAA7B;EACA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,OAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,GAAG;IAHsC,CAArC;EAJD,CAAP;AAUD,CAdM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableBodyProps, TableBodyState } from './TableBody.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableBody.\n *\n * The returned state can be modified with hooks such as useTableBodyStyles_unstable,\n * before being passed to renderTableBody_unstable.\n *\n * @param props - props from this instance of TableBody\n * @param ref - reference to root HTMLElement of TableBody\n */\nexport const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTMLElement>): TableBodyState => {\n  const { noNativeElements } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tbody';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableBody/useTableBodyStyles.js

@@ -7,6 +7,14 @@ exports.useTableBodyStyles_unstable = exports.tableBodyClassNames = exports.tabl
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
+const useStyles = /*#__PURE__*/react_1.__styles({
+  "root": {
+    "mc9l5x": "f1tp1avn"
+  }
+}, {
+  "d": [".f1tp1avn{display:table-row-group;}"]
+});
+
 exports.tableBodyClassName = 'fui-TableBody';
 exports.tableBodyClassNames = {
   root: 'fui-TableBody'
@@ -16,7 +24,8 @@ exports.tableBodyClassNames = {
  */
 
 const useTableBodyStyles_unstable = state => {
-  state.root.className = react_1.mergeClasses(exports.tableBodyClassName, state.root.className);
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.tableBodyClassName, styles.root, state.root.className);
   return state;
 };
 

package/lib-commonjs/components/TableBody/useTableBodyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableBody/useTableBodyStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAqB,eAArB;AACA,OAAA,CAAA,mBAAA,GAAsD;EACjE,IAAI,EAAE;AAD2D,CAAtD;AAIb;;AAEG;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAb,EAAiC,KAAK,CAAC,IAAN,CAAW,SAA5C,CAAvB;EAEA,OAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { TableBodySlots, TableBodyState } from './TableBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames: SlotClassNames<TableBodySlots> = {\n  root: 'fui-TableBody',\n};\n\n/**\n * Apply styling to the TableBody slots based on the state\n */\nexport const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {\n  state.root.className = mergeClasses(tableBodyClassName, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableBody/useTableBodyStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAMa,OAAA,CAAA,kBAAA,GAAqB,eAArB;AACA,OAAA,CAAA,mBAAA,GAAsD;EACjE,IAAI,EAAE;AAD2D,CAAtD;AAIb;;AAEG;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAb,EAAiC,MAAM,CAAC,IAAxC,EAA8C,KAAK,CAAC,IAAN,CAAW,SAAzD,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableBodySlots, TableBodyState } from './TableBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames: SlotClassNames<TableBodySlots> = {\n  root: 'fui-TableBody',\n};\n\n/**\n * Apply styling to the TableBody slots based on the state\n */\nexport const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableBodyClassName, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCell/renderTableCell.js

@@ -17,11 +17,9 @@ const renderTableCell_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state); // TODO Add additional slots in the appropriate place
-
+  } = react_utilities_1.getSlots(state);
   return React.createElement(slots.root, { ...slotProps.root
-  }, slots.media && React.createElement(slots.media, { ...slotProps.media
-  }), " ", slotProps.root.children);
+  });
 };
 
 exports.renderTableCell_unstable = renderTableCell_unstable;

package/lib-commonjs/components/TableCell/renderTableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableCell/renderTableCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAI,KAAD,IAA0B;EAChE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAyB,KAAzB,CAA7B,CADgE,CAGhE;;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,E,GAAA,EACyD,SAAS,CAAC,IAAV,CAAe,QADxE,CADF;AAKD,CATM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableCellState, TableCellSlots } from './TableCell.types';\n\n/**\n * Render the final JSX of TableCell\n */\nexport const renderTableCell_unstable = (state: TableCellState) => {\n  const { slots, slotProps } = getSlots<TableCellSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.media && <slots.media {...slotProps.media} />} {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableCell/renderTableCell.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAI,KAAD,IAA0B;EAChE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAyB,KAAzB,CAA7B;EAEA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableCellState, TableCellSlots } from './TableCell.types';\n\n/**\n * Render the final JSX of TableCell\n */\nexport const renderTableCell_unstable = (state: TableCellState) => {\n  const { slots, slotProps } = getSlots<TableCellSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCell/useTableCell.js

@@ -22,14 +22,14 @@ const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
 const useTableCell_unstable = (props, ref) => {
   var _a;
 
-  const noNativeElements = tableContext_1.useTableContext(ctx => ctx.noNativeElements);
+  const {
+    noNativeElements
+  } = tableContext_1.useTableContext();
   const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'td';
   return {
     components: {
-      root: rootComponent,
-      media: 'span'
+      root: rootComponent
     },
-    media: react_utilities_1.resolveShorthand(props.media),
     root: react_utilities_1.getNativeElementProps(rootComponent, {
       ref,
       role: rootComponent === 'div' ? 'cell' : undefined,

package/lib-commonjs/components/TableCell/useTableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableCell/useTableCell.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM,gBAAgB,GAAG,cAAA,CAAA,eAAA,CAAgB,GAAG,IAAI,GAAG,CAAC,gBAA3B,CAAzB;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,aADI;MAEV,KAAK,EAAE;IAFG,CADP;IAKL,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,CALF;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,MAA1B,GAAmC,SAFA;MAGzC,GAAG;IAHsC,CAArC;EAND,CAAP;AAYD,CAjBM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const noNativeElements = useTableContext(ctx => ctx.noNativeElements);\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n      media: 'span',\n    },\n    media: resolveShorthand(props.media),\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'cell' : undefined,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableCell/useTableCell.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAwB,GAAxB,KAAuE;;;EAC1G,MAAM;IAAE;EAAF,IAAuB,cAAA,CAAA,eAAA,EAA7B;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,MAA1B,GAAmC,SAFA;MAGzC,GAAG;IAHsC,CAArC;EAJD,CAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableCellProps, TableCellState } from './TableCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableCell.\n *\n * The returned state can be modified with hooks such as useTableCellStyles_unstable,\n * before being passed to renderTableCell_unstable.\n *\n * @param props - props from this instance of TableCell\n * @param ref - reference to root HTMLElement of TableCell\n */\nexport const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'cell' : undefined,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCell/useTableCellStyles.js

@@ -11,8 +11,7 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 exports.tableCellClassName = 'fui-TableCell';
 exports.tableCellClassNames = {
-  root: exports.tableCellClassName,
-  media: 'fui-TableCell__media'
+  root: exports.tableCellClassName
 };
 /**
  * Styles for the root slot
@@ -20,24 +19,16 @@ exports.tableCellClassNames = {
 
 const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
+    "qhf8xq": "f10pi13n",
+    "ha4doy": "fmrv4ls",
+    "mc9l5x": "f15pt5es",
     "z8tnut": "f1nbblvp",
     "z189sj": ["f1vdfbxk", "f1f5gg8d"],
     "Byoj8tv": "f1ov4xf1",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "i8kkvl": "fsnqrgy",
-    "Belr9w4": "fylz90v",
-    "Bh6795r": "fqerorx",
-    "Bnnss6s": "f1neuvcm",
-    "xawz": "fkjuxzh"
-  },
-  "media": {
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59"
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
   }
 }, {
-  "d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsnqrgy{-webkit-column-gap:var(--spacingHorizontalS);column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}"]
+  "d": [".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f15pt5es{display:table-cell;}", ".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}"]
 });
 /**
  * Apply styling to the TableCell slots based on the state
@@ -47,11 +38,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 const useTableCellStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = react_1.mergeClasses(exports.tableCellClassNames.root, styles.root, state.root.className);
-
-  if (state.media) {
-    state.media.className = react_1.mergeClasses(exports.tableCellClassNames.media, styles.media);
-  }
-
   return state;
 };
 

package/lib-commonjs/components/TableCell/useTableCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/TableCell/useTableCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAqB,eAArB;AACA,OAAA,CAAA,mBAAA,GAAsD;EACjE,IAAI,EAAE,OAAA,CAAA,kBAD2D;EAEjE,KAAK,EAAE;AAF0D,CAAtD;AAKb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAeA;;AAEG;;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAA,CAAoB,IAAjC,EAAuC,MAAM,CAAC,IAA9C,EAAoD,KAAK,CAAC,IAAN,CAAW,SAA/D,CAAvB;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAA,CAAoB,KAAjC,EAAwC,MAAM,CAAC,KAA/C,CAAxB;EACD;;EAED,OAAO,KAAP;AACD,CARM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n  media: 'fui-TableCell__media',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className);\n  if (state.media) {\n    state.media.className = mergeClasses(tableCellClassNames.media, styles.media);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/TableCell/useTableCellStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAqB,eAArB;AACA,OAAA,CAAA,mBAAA,GAAsD;EACjE,IAAI,EAAE,OAAA,CAAA;AAD2D,CAAtD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;AAEG;;;AACI,MAAM,2BAA2B,GAAI,KAAD,IAA0C;EACnF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,mBAAA,CAAoB,IAAjC,EAAuC,MAAM,CAAC,IAA9C,EAAoD,KAAK,CAAC,IAAN,CAAW,SAA/D,CAAvB;EACA,OAAO,KAAP;AACD,CAJM;;AAAM,OAAA,CAAA,2BAAA,GAA2B,2BAA3B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    verticalAlign: 'middle',\n    display: 'table-cell',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCellActions/TableCellActions.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableCellActions = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useTableCellActions_1 = /*#__PURE__*/require("./useTableCellActions");
+
+const renderTableCellActions_1 = /*#__PURE__*/require("./renderTableCellActions");
+
+const useTableCellActionsStyles_1 = /*#__PURE__*/require("./useTableCellActionsStyles");
+/**
+ * TableCellActions component - TODO: add more docs
+ */
+
+
+exports.TableCellActions = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTableCellActions_1.useTableCellActions_unstable(props, ref);
+  useTableCellActionsStyles_1.useTableCellActionsStyles_unstable(state);
+  return renderTableCellActions_1.renderTableCellActions_unstable(state);
+});
+exports.TableCellActions.displayName = 'TableCellActions';
+//# sourceMappingURL=TableCellActions.js.map

package/lib-commonjs/components/TableCellActions/TableCellActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TableCellActions/TableCellActions.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,gBAAA,gBAA+D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1G,MAAM,KAAK,GAAG,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,EAAoC,GAApC,CAAd;EAEA,2BAAA,CAAA,kCAAA,CAAmC,KAAnC;EACA,OAAO,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,CAAP;AACD,CAL2E,CAA/D;AAOb,OAAA,CAAA,gBAAA,CAAiB,WAAjB,GAA+B,kBAA/B","sourcesContent":["import * as React from 'react';\nimport { useTableCellActions_unstable } from './useTableCellActions';\nimport { renderTableCellActions_unstable } from './renderTableCellActions';\nimport { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles';\nimport type { TableCellActionsProps } from './TableCellActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableCellActions component - TODO: add more docs\n */\nexport const TableCellActions: ForwardRefComponent<TableCellActionsProps> = React.forwardRef((props, ref) => {\n  const state = useTableCellActions_unstable(props, ref);\n\n  useTableCellActionsStyles_unstable(state);\n  return renderTableCellActions_unstable(state);\n});\n\nTableCellActions.displayName = 'TableCellActions';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TableCellActions/TableCellActions.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=TableCellActions.types.js.map