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

package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.js

@@ -27,10 +27,16 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     Bnnss6s: "f1neuvcm",
     xawz: "fkjuxzh"
   },
+  rootTruncate: {
+    B68tc82: "f1p9o1ba"
+  },
   content: {
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62"
   },
+  contentTruncate: {
+    B68tc82: "f1p9o1ba"
+  },
   media: {
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59"
@@ -47,6 +53,11 @@ const useStyles = /*#__PURE__*/react_1.__styles({
   mainPrimary: {
     Bhrd7zp: "fl43uef"
   },
+  mainTruncate: {
+    B68tc82: "f1p9o1ba",
+    Huce71: "fz5stix",
+    ygn44y: "f1cmbuwj"
+  },
   description: {
     sj55zd: "fkfq4zb",
     Bahqtrf: "fk6fouc",
@@ -55,14 +66,17 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     Bg96gwp: "fwrc4pm"
   }
 }, {
-  d: [".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;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
+  d: [".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;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fz5stix{white-space:nowrap;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
 });
 /**
  * Apply styling to the TableCellLayout slots based on the state
  */
 const useTableCellLayoutStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.root, styles.root, state.root.className);
+  const {
+    truncate
+  } = state;
+  state.root.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);
   const primary = state.appearance === 'primary';
   if (state.media) {
     const mediaSizedStyles = {
@@ -73,13 +87,13 @@ const useTableCellLayoutStyles_unstable = state => {
     state.media.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
   }
   if (state.main) {
-    state.main.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.main, primary && styles.mainPrimary, state.main.className);
+    state.main.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
   }
   if (state.description) {
     state.description.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.description, styles.description, state.description.className);
   }
   if (state.content) {
-    state.content.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.content, styles.content, state.content.className);
+    state.content.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
   }
   return state;
 };

package/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;AAEaA,iCAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,IAAI,EAAE,2BAA2B;EACjCC,WAAW,EAAE,kCAAkC;EAC/CC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAqC1B;AAEF;;;AAGO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGJ,oBAAY,CAACP,iCAAyB,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EACtG,MAAMC,OAAO,GAAGH,KAAK,CAACI,UAAU,KAAK,SAAS;EAE9C,IAAIJ,KAAK,CAACP,KAAK,EAAE;IACf,MAAMY,gBAAgB,GAAG;MACvBC,KAAK,EAAEL,MAAM,CAACM,mBAAmB;MACjCC,MAAM,EAAEP,MAAM,CAACM,mBAAmB;MAClC,aAAa,EAAEN,MAAM,CAACQ;KACvB;IAEDT,KAAK,CAACP,KAAK,CAACS,SAAS,GAAGJ,oBAAY,CAClCP,iCAAyB,CAACE,KAAK,EAC/BQ,MAAM,CAACR,KAAK,EACZY,gBAAgB,CAACL,KAAK,CAACU,IAAI,CAAC,EAC5BP,OAAO,IAAIF,MAAM,CAACU,YAAY,EAC9BX,KAAK,CAACP,KAAK,CAACS,SAAS,CACtB;;EAGH,IAAIF,KAAK,CAACN,IAAI,EAAE;IACdM,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGJ,oBAAY,CACjCP,iCAAyB,CAACG,IAAI,EAC9BS,OAAO,IAAIF,MAAM,CAACW,WAAW,EAC7BZ,KAAK,CAACN,IAAI,CAACQ,SAAS,CACrB;;EAGH,IAAIF,KAAK,CAACL,WAAW,EAAE;IACrBK,KAAK,CAACL,WAAW,CAACO,SAAS,GAAGJ,oBAAY,CACxCP,iCAAyB,CAACI,WAAW,EACrCM,MAAM,CAACN,WAAW,EAClBK,KAAK,CAACL,WAAW,CAACO,SAAS,CAC5B;;EAGH,IAAIF,KAAK,CAACJ,OAAO,EAAE;IACjBI,KAAK,CAACJ,OAAO,CAACM,SAAS,GAAGJ,oBAAY,CAACP,iCAAyB,CAACK,OAAO,EAAEK,MAAM,CAACL,OAAO,EAAEI,KAAK,CAACJ,OAAO,CAACM,SAAS,CAAC;;EAGpH,OAAOF,KAAK;AACd,CAAC;AA1CYT,yCAAiC","names":["exports","root","media","main","description","content","useStyles","react_1","useTableCellLayoutStyles_unstable","state","styles","className","primary","appearance","mediaSizedStyles","small","mediaSmallAndMedium","medium","mediaExtraSmall","size","mediaPrimary","mainPrimary"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  content: 'fui-TableCellLayout__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaExtraSmall: {\n    fontSize: '16px',\n  },\n\n  mediaSmallAndMedium: {\n    fontSize: '20px',\n  },\n\n  mediaPrimary: {\n    fontSize: '24px',\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  description: {\n    color: tokens.colorNeutralForeground2,\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    const mediaSizedStyles = {\n      small: styles.mediaSmallAndMedium,\n      medium: styles.mediaSmallAndMedium,\n      'extra-small': styles.mediaExtraSmall,\n    };\n\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      mediaSizedStyles[state.size],\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, state.content.className);\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;AAEaA,iCAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,KAAK,EAAE,4BAA4B;EACnCC,IAAI,EAAE,2BAA2B;EACjCC,WAAW,EAAE,kCAAkC;EAC/CC,OAAO,EAAE;CACV;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAoD1B;AAEF;;;AAGO,MAAMC,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1B,MAAM;IAAEK;EAAQ,CAAE,GAAGF,KAAK;EAE1BA,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGL,oBAAY,CACjCP,iCAAyB,CAACC,IAAI,EAC9BS,MAAM,CAACT,IAAI,EACXU,QAAQ,IAAID,MAAM,CAACG,YAAY,EAC/BJ,KAAK,CAACR,IAAI,CAACW,SAAS,CACrB;EACD,MAAME,OAAO,GAAGL,KAAK,CAACM,UAAU,KAAK,SAAS;EAE9C,IAAIN,KAAK,CAACP,KAAK,EAAE;IACf,MAAMc,gBAAgB,GAAG;MACvBC,KAAK,EAAEP,MAAM,CAACQ,mBAAmB;MACjCC,MAAM,EAAET,MAAM,CAACQ,mBAAmB;MAClC,aAAa,EAAER,MAAM,CAACU;KACvB;IAEDX,KAAK,CAACP,KAAK,CAACU,SAAS,GAAGL,oBAAY,CAClCP,iCAAyB,CAACE,KAAK,EAC/BQ,MAAM,CAACR,KAAK,EACZc,gBAAgB,CAACP,KAAK,CAACY,IAAI,CAAC,EAC5BP,OAAO,IAAIJ,MAAM,CAACY,YAAY,EAC9Bb,KAAK,CAACP,KAAK,CAACU,SAAS,CACtB;;EAGH,IAAIH,KAAK,CAACN,IAAI,EAAE;IACdM,KAAK,CAACN,IAAI,CAACS,SAAS,GAAGL,oBAAY,CACjCP,iCAAyB,CAACG,IAAI,EAC9BQ,QAAQ,IAAID,MAAM,CAACa,YAAY,EAC/BT,OAAO,IAAIJ,MAAM,CAACc,WAAW,EAC7Bf,KAAK,CAACN,IAAI,CAACS,SAAS,CACrB;;EAGH,IAAIH,KAAK,CAACL,WAAW,EAAE;IACrBK,KAAK,CAACL,WAAW,CAACQ,SAAS,GAAGL,oBAAY,CACxCP,iCAAyB,CAACI,WAAW,EACrCM,MAAM,CAACN,WAAW,EAClBK,KAAK,CAACL,WAAW,CAACQ,SAAS,CAC5B;;EAGH,IAAIH,KAAK,CAACJ,OAAO,EAAE;IACjBI,KAAK,CAACJ,OAAO,CAACO,SAAS,GAAGL,oBAAY,CACpCP,iCAAyB,CAACK,OAAO,EACjCK,MAAM,CAACL,OAAO,EACdM,QAAQ,IAAID,MAAM,CAACe,eAAe,EAClChB,KAAK,CAACJ,OAAO,CAACO,SAAS,CACxB;;EAGH,OAAOH,KAAK;AACd,CAAC;AAvDYT,yCAAiC","names":["exports","root","media","main","description","content","useStyles","react_1","useTableCellLayoutStyles_unstable","state","styles","truncate","className","rootTruncate","primary","appearance","mediaSizedStyles","small","mediaSmallAndMedium","medium","mediaExtraSmall","size","mediaPrimary","mainTruncate","mainPrimary","contentTruncate"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  content: 'fui-TableCellLayout__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  rootTruncate: {\n    overflowX: 'hidden',\n  },\n\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  contentTruncate: {\n    overflowX: 'hidden',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaExtraSmall: {\n    fontSize: '16px',\n  },\n\n  mediaSmallAndMedium: {\n    fontSize: '20px',\n  },\n\n  mediaPrimary: {\n    fontSize: '24px',\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  mainTruncate: {\n    overflowX: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n  },\n\n  description: {\n    color: tokens.colorNeutralForeground2,\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  const { truncate } = state;\n\n  state.root.className = mergeClasses(\n    tableCellLayoutClassNames.root,\n    styles.root,\n    truncate && styles.rootTruncate,\n    state.root.className,\n  );\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    const mediaSizedStyles = {\n      small: styles.mediaSmallAndMedium,\n      medium: styles.mediaSmallAndMedium,\n      'extra-small': styles.mediaExtraSmall,\n    };\n\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      mediaSizedStyles[state.size],\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      truncate && styles.mainTruncate,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      tableCellLayoutClassNames.content,\n      styles.content,\n      truncate && styles.contentTruncate,\n      state.content.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-commonjs/components/TableHeaderCell/renderTableHeaderCell.js

@@ -20,7 +20,9 @@ const renderTableHeaderCell_unstable = state => {
     ...slotProps.button
   }, slotProps.root.children, slots.sortIcon && React.createElement(slots.sortIcon, {
     ...slotProps.sortIcon
-  })));
+  })), slots.aside && React.createElement(slots.aside, {
+    ...slotProps.aside
+  }));
 };
 exports.renderTableHeaderCell_unstable = renderTableHeaderCell_unstable;
 //# sourceMappingURL=renderTableHeaderCell.js.map

package/lib-commonjs/components/TableHeaderCell/renderTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAuBH,KAAK,CAAC;EAElE,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,GAC/BJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,QAAQ,IAAIJ,oBAACH,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,CAChD,CACJ;AAEjB,CAAC;AAXYC,sCAA8B","names":["renderTableHeaderCell_unstable","state","slots","slotProps","react_utilities_1","React","root","button","children","sortIcon","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,8BAA8B,GAAIC,KAA2B,IAAI;EAC5E,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAuBH,KAAK,CAAC;EAElE,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,GAC/BJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,QAAQ,IAAIJ,oBAACH,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,CAChD,EACdP,KAAK,CAACQ,KAAK,IAAIL,oBAACH,KAAK,CAACQ,KAAK;IAAA,GAAKP,SAAS,CAACO;EAAK,EAAI,CACzC;AAEjB,CAAC;AAZYC,sCAA8B","names":["renderTableHeaderCell_unstable","state","slots","slotProps","react_utilities_1","React","root","button","children","sortIcon","aside","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n      {slots.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js

@@ -38,7 +38,8 @@ const useTableHeaderCell_unstable = (props, ref) => {
     components: {
       root: rootComponent,
       button: 'button',
-      sortIcon: 'span'
+      sortIcon: 'span',
+      aside: 'span'
     },
     root: react_utilities_1.getNativeElementProps(rootComponent, {
       ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusWithin()),
@@ -46,6 +47,7 @@ const useTableHeaderCell_unstable = (props, ref) => {
       'aria-sort': sortable ? (_b = props.sortDirection) !== null && _b !== void 0 ? _b : 'none' : undefined,
       ...props
     }),
+    aside: react_utilities_1.resolveShorthand(props.aside),
     sortIcon: react_utilities_1.resolveShorthand(props.sortIcon, {
       required: !!props.sortDirection,
       defaultProps: {

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAMA,SAAS,GAAG;EAChBC,SAAS,eAAEC,oBAACC,4BAAc;IAACC,QAAQ,EAAE;EAAE,EAAI;EAC3CC,UAAU,eAAEH,oBAACC,8BAAgB;IAACC,QAAQ,EAAE;EAAE;CAC3C;AAED;;;;;;;;;AASO,MAAME,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;;EACxB,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGC,8BAAe,EAAE;EAExD,MAAMC,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIJ,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,OAAO;IACLK,UAAU,EAAE;MACVC,IAAI,EAAEH,aAAa;MACnBI,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE;KACX;IACDF,IAAI,EAAEG,uCAAqB,CAACN,aAAa,EAAE;MACzCJ,GAAG,EAAEU,+BAAa,CAACV,GAAG,EAAEW,8BAAc,EAAE,CAAC;MACzCC,IAAI,EAAER,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGS,SAAS;MAC1D,WAAW,EAAEX,QAAQ,GAAG,WAAK,CAACY,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGd;KACJ,CAAC;IACFU,QAAQ,EAAEC,kCAAgB,CAACX,KAAK,CAACU,QAAQ,EAAE;MACzCM,QAAQ,EAAE,CAAC,CAAChB,KAAK,CAACe,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAElB,KAAK,CAACe,aAAa,GAAGtB,SAAS,CAACO,KAAK,CAACe,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFL,MAAM,EAAEU,mCAAsB,CAACnB,KAAK,CAACS,MAAM,EAAE;MAC3CO,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBO,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAIlB,QAAQ,IAAI;UACdU,IAAI,EAAEC,SAAS;UACfM,QAAQ,EAAEN;SACX;;KAEJ,CAAC;IACFX,QAAQ;IACRD;GACD;AACH,CAAC;AAtCYoB,mCAA2B","names":["sortIcons","ascending","React","react_icons_1","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","tableContext_1","rootComponent","as","components","root","button","sortIcon","react_utilities_1","react_tabster_1","role","undefined","sortDirection","required","defaultProps","children","react_aria_1","tabIndex","type","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n      ...props,\n    }),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAMA,SAAS,GAAG;EAChBC,SAAS,eAAEC,oBAACC,4BAAc;IAACC,QAAQ,EAAE;EAAE,EAAI;EAC3CC,UAAU,eAAEH,oBAACC,8BAAgB;IAACC,QAAQ,EAAE;EAAE;CAC3C;AAED;;;;;;;;;AASO,MAAME,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;;EACxB,MAAM;IAAEC,gBAAgB;IAAEC;EAAQ,CAAE,GAAGC,8BAAe,EAAE;EAExD,MAAMC,aAAa,GAAG,YAAK,CAACC,EAAE,mCAAIJ,gBAAgB,IAAG,KAAK,GAAG,IAAI;EACjE,OAAO;IACLK,UAAU,EAAE;MACVC,IAAI,EAAEH,aAAa;MACnBI,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE,MAAM;MAChBC,KAAK,EAAE;KACR;IACDH,IAAI,EAAEI,uCAAqB,CAACP,aAAa,EAAE;MACzCJ,GAAG,EAAEW,+BAAa,CAACX,GAAG,EAAEY,8BAAc,EAAE,CAAC;MACzCC,IAAI,EAAET,aAAa,KAAK,KAAK,GAAG,cAAc,GAAGU,SAAS;MAC1D,WAAW,EAAEZ,QAAQ,GAAG,WAAK,CAACa,aAAa,mCAAI,MAAM,GAAGD,SAAS;MACjE,GAAGf;KACJ,CAAC;IACFW,KAAK,EAAEC,kCAAgB,CAACZ,KAAK,CAACW,KAAK,CAAC;IACpCD,QAAQ,EAAEE,kCAAgB,CAACZ,KAAK,CAACU,QAAQ,EAAE;MACzCO,QAAQ,EAAE,CAAC,CAACjB,KAAK,CAACgB,aAAa;MAC/BE,YAAY,EAAE;QAAEC,QAAQ,EAAEnB,KAAK,CAACgB,aAAa,GAAGvB,SAAS,CAACO,KAAK,CAACgB,aAAa,CAAC,GAAGD;MAAS;KAC3F,CAAC;IACFN,MAAM,EAAEW,mCAAsB,CAACpB,KAAK,CAACS,MAAM,EAAE;MAC3CQ,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZJ,IAAI,EAAE,cAAc;QACpBO,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAE,QAAQ;QACd,IAAInB,QAAQ,IAAI;UACdW,IAAI,EAAEC,SAAS;UACfM,QAAQ,EAAEN;SACX;;KAEJ,CAAC;IACFZ,QAAQ;IACRD;GACD;AACH,CAAC;AAxCYqB,mCAA2B","names":["sortIcons","ascending","React","react_icons_1","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","tableContext_1","rootComponent","as","components","root","button","sortIcon","aside","react_utilities_1","react_tabster_1","role","undefined","sortDirection","required","defaultProps","children","react_aria_1","tabIndex","type","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n      aside: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n      ...props,\n    }),\n    aside: resolveShorthand(props.aside),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"]}

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js

@@ -11,7 +11,8 @@ exports.tableHeaderCellClassName = 'fui-TableHeaderCell';
 exports.tableHeaderCellClassNames = {
   root: 'fui-TableHeaderCell',
   button: 'fui-TableHeaderCell__button',
-  sortIcon: 'fui-TableHeaderCell__sortIcon'
+  sortIcon: 'fui-TableHeaderCell__sortIcon',
+  aside: 'fui-TableHeaderCell__aside'
 };
 const useTableLayoutStyles = /*#__PURE__*/react_1.__styles({
   root: {
@@ -47,7 +48,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     pehzd3: ["fs9qmxf", "f187m4uq"],
     B8osjzx: ["f187m4uq", "fs9qmxf"],
     u7xebq: ["f145mzao", "f1uha7eq"],
-    Blsv9te: ["f1uha7eq", "f145mzao"]
+    Blsv9te: ["f1uha7eq", "f145mzao"],
+    qhf8xq: "f10pi13n"
   },
   rootInteractive: {
     Jwef8y: "f1t94bn6",
@@ -95,9 +97,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
     mc9l5x: "f22iagw",
     Bt984gj: "f122n59",
     z8tnut: "fclwglc"
-  }
+  },
+  resizeHandle: {}
 }, {
-  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".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;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
+  d: [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".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;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
   h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
   a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
 });
@@ -115,6 +118,9 @@ const useTableHeaderCellStyles_unstable = state => {
   if (state.sortIcon) {
     state.sortIcon.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
   }
+  if (state.aside) {
+    state.aside.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+  }
   return state;
 };
 exports.useTableHeaderCellStyles_unstable = useTableHeaderCellStyles_unstable;

package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAGaA,gCAAwB,GAAG,qBAAqB;AAChDA,iCAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE;CACX;AAED,MAAMC,oBAAoB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKrC;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAMpC;AAEF;;;AAGA,MAAME,SAAS,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAwD1B;AAEF;;;AAGO,MAAMG,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAER,oBAAoB,EAAE;IAC7BS,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGT,oBAAY,CACjCL,iCAAyB,CAACC,IAAI,EAC9BS,MAAM,CAACT,IAAI,EACXQ,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACZ,IAAI,GAAGU,YAAY,CAACC,KAAK,CAACX,IAAI,EACzEQ,KAAK,CAACR,IAAI,CAACa,SAAS,CACrB;EACDL,KAAK,CAACP,MAAM,CAACY,SAAS,GAAGT,oBAAY,CACnCL,iCAAyB,CAACE,MAAM,EAChCQ,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACR,MAAM,EACbO,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACP,MAAM,CAACY,SAAS,CACvB;EAED,IAAIL,KAAK,CAACN,QAAQ,EAAE;IAClBM,KAAK,CAACN,QAAQ,CAACW,SAAS,GAAGT,oBAAY,CACrCL,iCAAyB,CAACG,QAAQ,EAClCO,MAAM,CAACP,QAAQ,EACfM,KAAK,CAACN,QAAQ,CAACW,SAAS,CACzB;;EAGH,OAAOL,KAAK;AACd,CAAC;AA9BYT,yCAAiC","names":["exports","root","button","sortIcon","useTableLayoutStyles","react_1","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAGaA,gCAAwB,GAAG,qBAAqB;AAChDA,iCAAyB,GAAyC;EAC7EC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE,+BAA+B;EACzCC,KAAK,EAAE;CACR;AAED,MAAMC,oBAAoB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKrC;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAMpC;AAEF;;;AAGA,MAAME,SAAS,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EA6D1B;AAEF;;;AAGO,MAAMG,iCAAiC,GAAIC,KAA2B,IAA0B;EACrG,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAER,oBAAoB,EAAE;IAC7BS,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACT,IAAI,CAACc,SAAS,GAAGT,oBAAY,CACjCN,iCAAyB,CAACC,IAAI,EAC9BU,MAAM,CAACV,IAAI,EACXS,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACM,eAAe,EACxCP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACb,IAAI,GAAGW,YAAY,CAACC,KAAK,CAACZ,IAAI,EACzES,KAAK,CAACT,IAAI,CAACc,SAAS,CACrB;EACDL,KAAK,CAACR,MAAM,CAACa,SAAS,GAAGT,oBAAY,CACnCN,iCAAyB,CAACE,MAAM,EAChCS,MAAM,CAACQ,WAAW,EAClBR,MAAM,CAACT,MAAM,EACbQ,KAAK,CAACM,QAAQ,IAAIL,MAAM,CAACK,QAAQ,EACjCN,KAAK,CAACR,MAAM,CAACa,SAAS,CACvB;EAED,IAAIL,KAAK,CAACP,QAAQ,EAAE;IAClBO,KAAK,CAACP,QAAQ,CAACY,SAAS,GAAGT,oBAAY,CACrCN,iCAAyB,CAACG,QAAQ,EAClCQ,MAAM,CAACR,QAAQ,EACfO,KAAK,CAACP,QAAQ,CAACY,SAAS,CACzB;;EAGH,IAAIL,KAAK,CAACN,KAAK,EAAE;IACfM,KAAK,CAACN,KAAK,CAACW,SAAS,GAAGT,oBAAY,CAACN,iCAAyB,CAACI,KAAK,EAAEO,MAAM,CAACS,YAAY,EAAEV,KAAK,CAACN,KAAK,CAACW,SAAS,CAAC;;EAGnH,OAAOL,KAAK;AACd,CAAC;AAlCYV,yCAAiC","names":["exports","root","button","sortIcon","aside","useTableLayoutStyles","react_1","useFlexLayoutStyles","useStyles","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","sortable","rootInteractive","noNativeElements","resetButton","resizeHandle"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n  aside: 'fui-TableHeaderCell__aside',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n    position: 'relative',\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n\n  resizeHandle: {},\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n  }\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableResizeHandle = void 0;
+const React = /*#__PURE__*/require("react");
+const useTableResizeHandle_1 = /*#__PURE__*/require("./useTableResizeHandle");
+const renderTableResizeHandle_1 = /*#__PURE__*/require("./renderTableResizeHandle");
+const useTableResizeHandleStyles_1 = /*#__PURE__*/require("./useTableResizeHandleStyles");
+/**
+ * TableResizeHandle component - TODO: add more docs
+ */
+exports.TableResizeHandle = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTableResizeHandle_1.useTableResizeHandle_unstable(props, ref);
+  useTableResizeHandleStyles_1.useTableResizeHandleStyles_unstable(state);
+  return renderTableResizeHandle_1.renderTableResizeHandle_unstable(state);
+});
+exports.TableResizeHandle.displayName = 'TableResizeHandle';
+//# sourceMappingURL=TableResizeHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,yBAAiB,gBAAgDC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC5G,MAAMC,KAAK,GAAGC,oDAA6B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEvDG,gEAAmC,CAACF,KAAK,CAAC;EAC1C,OAAOG,0DAAgC,CAACH,KAAK,CAAC;AAChD,CAAC,CAAC;AAEFL,yBAAiB,CAACS,WAAW,GAAG,mBAAmB","names":["exports","React","forwardRef","props","ref","state","useTableResizeHandle_1","useTableResizeHandleStyles_1","renderTableResizeHandle_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableResizeHandle_unstable } from './useTableResizeHandle';\nimport { renderTableResizeHandle_unstable } from './renderTableResizeHandle';\nimport { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles';\nimport type { TableResizeHandleProps } from './TableResizeHandle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableResizeHandle component - TODO: add more docs\n */\nexport const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps> = React.forwardRef((props, ref) => {\n  const state = useTableResizeHandle_unstable(props, ref);\n\n  useTableResizeHandleStyles_unstable(state);\n  return renderTableResizeHandle_unstable(state);\n});\n\nTableResizeHandle.displayName = 'TableResizeHandle';\n"]}

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

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

package/lib-commonjs/components/TableResizeHandle/TableResizeHandle.types.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/TableResizeHandle/index.js

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

package/lib-commonjs/components/TableResizeHandle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/index.ts"],"sourcesContent":["export * from './TableResizeHandle';\nexport * from './TableResizeHandle.types';\nexport * from './renderTableResizeHandle';\nexport * from './useTableResizeHandle';\nexport * from './useTableResizeHandleStyles';\n"]}

package/lib-commonjs/components/TableResizeHandle/renderTableResizeHandle.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderTableResizeHandle_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of TableResizeHandle
+ */
+const renderTableResizeHandle_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  });
+};
+exports.renderTableResizeHandle_unstable = renderTableResizeHandle_unstable;
+//# sourceMappingURL=renderTableResizeHandle.js.map

package/lib-commonjs/components/TableResizeHandle/renderTableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,gCAAgC,GAAIC,KAA6B,IAAI;EAChF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAyBH,KAAK,CAAC;EACpE,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,EAAI;AAC3C,CAAC;AAHYC,wCAAgC","names":["renderTableResizeHandle_unstable","state","slots","slotProps","react_utilities_1","React","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/renderTableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableResizeHandleState, TableResizeHandleSlots } from './TableResizeHandle.types';\n\n/**\n * Render the final JSX of TableResizeHandle\n */\nexport const renderTableResizeHandle_unstable = (state: TableResizeHandleState) => {\n  const { slots, slotProps } = getSlots<TableResizeHandleSlots>(state);\n  return <slots.root {...slotProps.root} />;\n};\n"]}

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandle.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableResizeHandle_unstable = void 0;
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Create the state required to render TableResizeHandle.
+ *
+ * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,
+ * before being passed to renderTableResizeHandle_unstable.
+ *
+ * @param props - props from this instance of TableResizeHandle
+ * @param ref - reference to root HTMLElement of TableResizeHandle
+ */
+const useTableResizeHandle_unstable = (props, ref) => {
+  const onClick = react_utilities_1.useEventCallback(event => {
+    var _a;
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    event.stopPropagation();
+  });
+  return {
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref,
+      ...props,
+      onClick
+    })
+  };
+};
+exports.useTableResizeHandle_unstable = useTableResizeHandle_unstable;
+//# sourceMappingURL=useTableResizeHandle.js.map

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,6BAA6B,GAAG,CAC3CC,KAA6B,EAC7BC,GAA2B,KACD;EAC1B,MAAMC,OAAO,GAAGC,kCAAgB,CAAEC,KAAuC,IAAI;;IAC3E,WAAK,CAACF,OAAO,+CAAbF,KAAK,EAAWI,KAAK,CAAC;IACtBA,KAAK,CAACC,eAAe,EAAE;EACzB,CAAC,CAAC;EACF,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IACDA,IAAI,EAAEJ,uCAAqB,CAAC,KAAK,EAAE;MACjCF,GAAG;MACH,GAAGD,KAAK;MACRE;KACD;GACF;AACH,CAAC;AAlBYM,qCAA6B","names":["useTableResizeHandle_unstable","props","ref","onClick","react_utilities_1","event","stopPropagation","components","root","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';\n\n/**\n * Create the state required to render TableResizeHandle.\n *\n * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,\n * before being passed to renderTableResizeHandle_unstable.\n *\n * @param props - props from this instance of TableResizeHandle\n * @param ref - reference to root HTMLElement of TableResizeHandle\n */\nexport const useTableResizeHandle_unstable = (\n  props: TableResizeHandleProps,\n  ref: React.Ref<HTMLElement>,\n): TableResizeHandleState => {\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    props.onClick?.(event);\n    event.stopPropagation();\n  });\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n      onClick,\n    }),\n  };\n};\n"]}

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableResizeHandleStyles_unstable = exports.tableResizeHandleClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+exports.tableResizeHandleClassNames = {
+  root: 'fui-TableResizeHandle'
+  // TODO: add class names for all slots on TableResizeHandleSlots.
+  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    qhf8xq: "f1euv43f",
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    Bhzewxz: "f15twtuk",
+    B5kzvoi: "f1yab3r1",
+    a9b677: "fjw5fx7",
+    B6of3ja: "f1hu3pq6",
+    t21cq0: ["fn2i5td", "f1eybr6b"],
+    jrapky: "f19f4twv",
+    Frg6f3: ["f1eybr6b", "fn2i5td"],
+    Bceei9c: "fc3en1c",
+    abs64n: "fk73vx1",
+    Bmy1vo4: "f13u1uyl",
+    B3o57yi: "fezquic",
+    Bj3rh1h: "f19g0ac",
+    B7zu5sd: "f15pjodv",
+    Bs6t6z0: "ftgrb5f",
+    Fdvyjd: "f2df6js",
+    Biobvvw: "fshsryb",
+    Hdbjpj: "f11ef69",
+    jc51t6: ["f12lb1dx", "f13tbxeo"],
+    u6d25: "fu4ulse",
+    Bj55yzk: "fw2wsqs",
+    Bkbwdz4: "f1swzn7y"
+  }
+}, {
+  d: [".f1euv43f{position:absolute;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fjw5fx7{width:16px;}", ".f1hu3pq6{margin-top:0;}", ".fn2i5td{margin-right:-8px;}", ".f1eybr6b{margin-left:-8px;}", ".f19f4twv{margin-bottom:0;}", ".fc3en1c{cursor:col-resize;}", ".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".fezquic{transition-duration:.2s;}", ".f19g0ac{z-index:1;}", ".ftgrb5f:after{content:\" \";}", ".f2df6js:after{display:block;}", ".fshsryb:after{width:1px;}", ".f11ef69:after{position:absolute;}", ".f12lb1dx:after{left:50%;}", ".f13tbxeo:after{right:50%;}", ".fu4ulse:after{top:0;}", ".fw2wsqs:after{bottom:0;}", ".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}"],
+  h: [".f15pjodv:hover{opacity:1;}"]
+});
+/**
+ * Apply styling to the TableResizeHandle slots based on the state
+ */
+const useTableResizeHandleStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.tableResizeHandleClassNames.root, styles.root, state.root.className);
+  return state;
+};
+exports.useTableResizeHandleStyles_unstable = useTableResizeHandleStyles_unstable;
+//# sourceMappingURL=useTableResizeHandleStyles.js.map

package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AAEaA,mCAA2B,GAA2C;EACjFC,IAAI,EAAE;EACN;EACA;CACD;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;AAAA,EA6B1B;AAEF;;;AAGO,MAAMC,mCAAmC,GAAIC,KAA6B,IAA4B;EAC3G,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CAACH,mCAA2B,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EACxG,OAAOF,KAAK;AACd,CAAC;AAJYL,2CAAmC","names":["exports","root","useStyles","react_1","useTableResizeHandleStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandleStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots> = {\n  root: 'fui-TableResizeHandle',\n  // TODO: add class names for all slots on TableResizeHandleSlots.\n  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: '16px',\n    ...shorthands.margin(0, '-8px'),\n    cursor: 'col-resize',\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: '.2s',\n    zIndex: 1,\n\n    ':hover': {\n      opacity: 1,\n    },\n\n    ':after': {\n      content: '\" \"',\n      display: 'block',\n      width: '1px',\n      position: 'absolute',\n      left: '50%',\n      top: 0,\n      bottom: 0,\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n});\n\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = (state: TableResizeHandleState): TableResizeHandleState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"]}

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTableSelectionCellStyles_unstable = exports.tableSelectionCellClassNames = void 0;
+exports.useTableSelectionCellStyles_unstable = exports.tableSelectionCellClassNames = exports.CELL_WIDTH = void 0;
 const react_1 = /*#__PURE__*/require("@griffel/react");
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+exports.CELL_WIDTH = 44;
 exports.tableSelectionCellClassNames = {
   root: 'fui-TableSelectionCell',
   checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',

package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AAEaA,oCAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE;CACjB;AAED,MAAMC,oBAAoB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKrC;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAQpC;AAEF;;;AAGA,MAAME,SAAS,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAkC1B;AAEF;;;AAGO,MAAMG,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9G,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAER,oBAAoB,EAAE;IAC7BS,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGT,oBAAY,CACjCL,oCAA4B,CAACC,IAAI,EACjCS,MAAM,CAACT,IAAI,EACXQ,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACZ,IAAI,GAAGU,YAAY,CAACC,KAAK,CAACX,IAAI,EACzEQ,KAAK,CAACO,MAAM,IAAIP,KAAK,CAACQ,OAAO,KAAK,KAAK,IAAIP,MAAM,CAACM,MAAM,EACxDP,KAAK,CAACS,MAAM,IAAIR,MAAM,CAACQ,MAAM,EAC7BT,KAAK,CAACR,IAAI,CAACa,SAAS,CACrB;EACD,IAAIL,KAAK,CAACP,iBAAiB,EAAE;IAC3BO,KAAK,CAACP,iBAAiB,CAACY,SAAS,GAAGT,oBAAY,CAC9CL,oCAA4B,CAACE,iBAAiB,EAC9CO,KAAK,CAACP,iBAAiB,CAACY,SAAS,CAClC;;EAGH,IAAIL,KAAK,CAACN,cAAc,EAAE;IACxBM,KAAK,CAACN,cAAc,CAACW,SAAS,GAAGT,oBAAY,CAC3CL,oCAA4B,CAACG,cAAc,EAC3CO,MAAM,CAACP,cAAc,EACrBM,KAAK,CAACN,cAAc,CAACW,SAAS,CAC/B;;EAGH,OAAOL,KAAK;AACd,CAAC;AA9BYT,4CAAoC","names":["exports","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","react_1","useFlexLayoutStyles","useStyles","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","subtle","checked","hidden"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: '44px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '44px',\n    maxWidth: '44px',\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAGA;AACA;AAEaA,kBAAU,GAAG,EAAE;AAEfA,oCAA4B,GAA4C;EACnFC,IAAI,EAAE,wBAAwB;EAC9BC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE;CACjB;AAED,MAAMC,oBAAoB,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKrC;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAQpC;AAEF;;;AAGA,MAAME,SAAS,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAkC1B;AAEF;;;AAGO,MAAMG,oCAAoC,GAAIC,KAA8B,IAA6B;EAC9G,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,YAAY,GAAG;IACnBC,KAAK,EAAER,oBAAoB,EAAE;IAC7BS,IAAI,EAAEP,mBAAmB;GAC1B;EACDG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGT,oBAAY,CACjCL,oCAA4B,CAACC,IAAI,EACjCS,MAAM,CAACT,IAAI,EACXQ,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACZ,IAAI,GAAGU,YAAY,CAACC,KAAK,CAACX,IAAI,EACzEQ,KAAK,CAACO,MAAM,IAAIP,KAAK,CAACQ,OAAO,KAAK,KAAK,IAAIP,MAAM,CAACM,MAAM,EACxDP,KAAK,CAACS,MAAM,IAAIR,MAAM,CAACQ,MAAM,EAC7BT,KAAK,CAACR,IAAI,CAACa,SAAS,CACrB;EACD,IAAIL,KAAK,CAACP,iBAAiB,EAAE;IAC3BO,KAAK,CAACP,iBAAiB,CAACY,SAAS,GAAGT,oBAAY,CAC9CL,oCAA4B,CAACE,iBAAiB,EAC9CO,KAAK,CAACP,iBAAiB,CAACY,SAAS,CAClC;;EAGH,IAAIL,KAAK,CAACN,cAAc,EAAE;IACxBM,KAAK,CAACN,cAAc,CAACW,SAAS,GAAGT,oBAAY,CAC3CL,oCAA4B,CAACG,cAAc,EAC3CO,MAAM,CAACP,cAAc,EACrBM,KAAK,CAACN,cAAc,CAACW,SAAS,CAC/B;;EAGH,OAAOL,KAAK;AACd,CAAC;AA9BYT,4CAAoC","names":["exports","root","checkboxIndicator","radioIndicator","useTableLayoutStyles","react_1","useFlexLayoutStyles","useStyles","useTableSelectionCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","subtle","checked","hidden"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { TableSelectionCellSlots, TableSelectionCellState } from './TableSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const CELL_WIDTH = 44;\n\nexport const tableSelectionCellClassNames: SlotClassNames<TableSelectionCellSlots> = {\n  root: 'fui-TableSelectionCell',\n  checkboxIndicator: 'fui-TableSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-TableSelectionCell__radioIndicator',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    width: `${CELL_WIDTH}px`,\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: `${CELL_WIDTH}px`,\n    maxWidth: `${CELL_WIDTH}px`,\n    justifyContent: 'center',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    ...shorthands.padding(0),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus', enableOutline: true },\n    ),\n  },\n\n  radioIndicator: {\n    display: 'flex',\n    flexGrow: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n\n  subtle: {\n    opacity: 0,\n    ...createCustomFocusIndicatorStyle(\n      {\n        opacity: 1,\n      },\n      { selector: 'focus-within' },\n    ),\n  },\n\n  hidden: {\n    visibility: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the TableSelectionCell slots based on the state\n */\nexport const useTableSelectionCellStyles_unstable = (state: TableSelectionCellState): TableSelectionCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableSelectionCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.subtle && state.checked === false && styles.subtle,\n    state.hidden && styles.hidden,\n    state.root.className,\n  );\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      tableSelectionCellClassNames.radioIndicator,\n      styles.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-commonjs/hooks/index.js

@@ -9,4 +9,5 @@ tslib_1.__exportStar(require("./useTableFeatures"), exports);
 tslib_1.__exportStar(require("./useTableSort"), exports);
 tslib_1.__exportStar(require("./useTableSelection"), exports);
 tslib_1.__exportStar(require("./createColumn"), exports);
+tslib_1.__exportStar(require("./useTableColumnSizing"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\n"]}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\n"]}

package/lib-commonjs/hooks/useMeasureElement.js

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

package/lib-commonjs/hooks/useMeasureElement.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAEA;;;;;;AAMA,SAAgBA,iBAAiB;EAC/B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAMC,SAAS,GAAGF,KAAK,CAACG,MAAM,CAA0BC,SAAS,CAAC;EAElE,MAAM;IAAEC;EAAc,CAAE,GAAGC,0CAAS,EAAE;EAEtC;EACA,MAAMC,YAAY,GAAGP,KAAK,CAACQ,WAAW,CAAC,MAAK;;IAC1C,MAAMC,cAAc,GAAG,eAAS,CAACC,OAAO,0CAAEC,qBAAqB,GAAGb,KAAK;IACvEC,QAAQ,CAACU,cAAc,IAAI,CAAC,CAAC;EAC/B,CAAC,EAAE,EAAE,CAAC;EAEN;EACA,MAAM,CAACG,cAAc,CAAC,GAAGZ,KAAK,CAACC,QAAQ,CAACY,2BAAS,EAAE,GAAG,IAAIC,cAAc,CAACP,YAAY,CAAC,GAAGH,SAAS,CAAC;EACnG,MAAMW,iBAAiB,GAAGf,KAAK,CAACQ,WAAW,CACxCQ,EAAmB,IAAI;IACtB,IAAI,CAACX,cAAc,IAAI,CAACO,cAAc,EAAE;MACtC;;IAGF;IACA,IAAIV,SAAS,CAACQ,OAAO,EAAE;MACrBE,cAAc,CAACK,SAAS,CAACf,SAAS,CAACQ,OAAO,CAAC;MAC3CR,SAAS,CAACQ,OAAO,CAACQ,MAAM,EAAE;;IAG5B,IAAIF,EAAE,EAAE;MACNd,SAAS,CAACQ,OAAO,GAAGL,cAAc,CAACc,aAAa,CAAC,KAAK,CAAC;MACvDH,EAAE,CAACI,qBAAqB,CAAC,aAAa,EAAElB,SAAS,CAACQ,OAAO,CAAC;MAC1DE,cAAc,CAACS,OAAO,CAACnB,SAAS,CAACQ,OAAO,CAAC;MACzCH,YAAY,EAAE;;EAElB,CAAC,EACD,CAACF,cAAc,EAAEO,cAAc,EAAEL,YAAY,CAAC,CAC/C;EAEDP,KAAK,CAACsB,SAAS,CAAC,MAAK;IACnB,OAAO,MAAMV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEW,UAAU,EAAE;EAC3C,CAAC,EAAE,CAACX,cAAc,CAAC,CAAC;EAEpB,OAAO;IAAEd,KAAK;IAAEiB;EAAiB,CAAE;AACrC;AAzCAS","names":["useMeasureElement","width","setWidth","React","useState","container","useRef","undefined","targetDocument","react_shared_contexts_1","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","react_utilities_1","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n  const [width, setWidth] = React.useState(0);\n  const container = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n\n  // the handler for resize observer\n  const handleResize = React.useCallback(() => {\n    const containerWidth = container.current?.getBoundingClientRect().width;\n    setWidth(containerWidth || 0);\n  }, []);\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument || !resizeObserver) {\n        return;\n      }\n\n      // cleanup previous container\n      if (container.current) {\n        resizeObserver.unobserve(container.current);\n        container.current.remove();\n      }\n\n      if (el) {\n        container.current = targetDocument.createElement('div');\n        el.insertAdjacentElement('beforebegin', container.current);\n        resizeObserver.observe(container.current);\n        handleResize();\n      }\n    },\n    [targetDocument, resizeObserver, handleResize],\n  );\n\n  React.useEffect(() => {\n    return () => resizeObserver?.disconnect();\n  }, [resizeObserver]);\n\n  return { width, measureElementRef };\n}\n"]}