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

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AACA;AAEA;AAEA,MAAMA,kBAAkB,GAAG;EACzBC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,EAAE;EACT,aAAa,EAAE;CACP;AAEV;;;;;;;;;AASO,MAAMC,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAM;IAAEC;EAAI,CAAE,GAAGC,8BAAe,EAAE;EAElC,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE,MAAM;MACnBC,OAAO,EAAE,KAAK;MACdC,KAAK,EAAE;KACR;IACDJ,IAAI,EAAEK,uCAAqB,CAAC,KAAK,EAAE;MAAET,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDW,UAAU,EAAEX,KAAK,CAACW,UAAU;IAC5BL,IAAI,EAAEI,kCAAgB,CAACV,KAAK,CAACM,IAAI,EAAE;MAAEM,QAAQ,EAAE;IAAI,CAAE,CAAC;IACtDH,KAAK,EAAEC,kCAAgB,CAACV,KAAK,CAACS,KAAK,CAAC;IACpCF,WAAW,EAAEG,kCAAgB,CAACV,KAAK,CAACO,WAAW,CAAC;IAChDC,OAAO,EAAEE,kCAAgB,CAACV,KAAK,CAACQ,OAAO,EAAE;MAAEI,QAAQ,EAAE,CAAC,CAACZ,KAAK,CAACO,WAAW,IAAI,CAAC,CAACP,KAAK,CAACa;IAAQ,CAAE,CAAC;IAC/FC,UAAU,EAAElB,kBAAkB,CAACM,IAAI,CAAC;IACpCA;GACD;AACH,CAAC;AAvBYa,mCAA2B","names":["tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","tableContext_1","components","root","main","description","content","media","react_utilities_1","appearance","required","children","avatarSize","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  'extra-small': 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      content: 'div',\n      media: 'span',\n    },\n    root: getNativeElementProps('div', { ref, ...props }),\n    appearance: props.appearance,\n    main: resolveShorthand(props.main, { required: true }),\n    media: resolveShorthand(props.media),\n    description: resolveShorthand(props.description),\n    content: resolveShorthand(props.content, { required: !!props.description || !!props.children }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"]}
+{"version":3,"mappings":";;;;;;AACA;AAEA;AAEA,MAAMA,kBAAkB,GAAG;EACzBC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,EAAE;EACT,aAAa,EAAE;CACP;AAEV;;;;;;;;;AASO,MAAMC,2BAA2B,GAAG,CACzCC,KAA2B,EAC3BC,GAA2B,KACH;EACxB,MAAM;IAAEC;EAAI,CAAE,GAAGC,8BAAe,EAAE;EAElC,OAAO;IACLC,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE,MAAM;MACnBC,OAAO,EAAE,KAAK;MACdC,KAAK,EAAE;KACR;IACDJ,IAAI,EAAEK,uCAAqB,CAAC,KAAK,EAAE;MAAET,GAAG;MAAE,GAAGD;IAAK,CAAE,CAAC;IACrDW,UAAU,EAAEX,KAAK,CAACW,UAAU;IAC5BC,QAAQ,EAAEZ,KAAK,CAACY,QAAQ;IACxBN,IAAI,EAAEI,kCAAgB,CAACV,KAAK,CAACM,IAAI,EAAE;MAAEO,QAAQ,EAAE;IAAI,CAAE,CAAC;IACtDJ,KAAK,EAAEC,kCAAgB,CAACV,KAAK,CAACS,KAAK,CAAC;IACpCF,WAAW,EAAEG,kCAAgB,CAACV,KAAK,CAACO,WAAW,CAAC;IAChDC,OAAO,EAAEE,kCAAgB,CAACV,KAAK,CAACQ,OAAO,EAAE;MAAEK,QAAQ,EAAE,CAAC,CAACb,KAAK,CAACO,WAAW,IAAI,CAAC,CAACP,KAAK,CAACc;IAAQ,CAAE,CAAC;IAC/FC,UAAU,EAAEnB,kBAAkB,CAACM,IAAI,CAAC;IACpCA;GACD;AACH,CAAC;AAxBYc,mCAA2B","names":["tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","tableContext_1","components","root","main","description","content","media","react_utilities_1","appearance","truncate","required","children","avatarSize","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  'extra-small': 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      content: 'div',\n      media: 'span',\n    },\n    root: getNativeElementProps('div', { ref, ...props }),\n    appearance: props.appearance,\n    truncate: props.truncate,\n    main: resolveShorthand(props.main, { required: true }),\n    media: resolveShorthand(props.media),\n    description: resolveShorthand(props.description),\n    content: resolveShorthand(props.content, { required: !!props.description || !!props.children }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"]}

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/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/useTableColumnResizeMouseHandler.js

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

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAEA;AAEA,SAAgBA,gCAAgC,CAACC,iBAAoC;EACnF,MAAMC,MAAM,GAAGC,KAAK,CAACC,MAAM,CAAC,CAAC,CAAC;EAC9B,MAAMC,YAAY,GAAGF,KAAK,CAACC,MAAM,CAAC,CAAC,CAAC;EACpC,MAAME,KAAK,GAAGH,KAAK,CAACC,MAAM,CAA4BG,SAAS,CAAC;EAEhE,MAAM;IAAEC;EAAc,CAAE,GAAGC,0CAAS,EAAE;EACtC,MAAMC,SAAS,GAAGF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,WAAW;EAE7C,MAAMC,eAAe,GAAGT,KAAK,CAACU,WAAW,CACtCC,CAAa,IAAI;IAChB,MAAMC,EAAE,GAAGD,CAAC,CAACE,OAAO,GAAGd,MAAM,CAACe,OAAO;IAErC;IACAZ,YAAY,CAACY,OAAO,IAAIF,EAAE;IAC1BT,KAAK,CAACW,OAAO,IAAIhB,iBAAiB,CAACiB,cAAc,CAACZ,KAAK,CAACW,OAAO,EAAEZ,YAAY,CAACY,OAAO,CAAC;IACtFf,MAAM,CAACe,OAAO,GAAGH,CAAC,CAACE,OAAO;EAC5B,CAAC,EACD,CAACf,iBAAiB,CAAC,CACpB;EAED,MAAMkB,WAAW,GAAGhB,KAAK,CAACU,WAAW,CAClCC,CAAa,IAAI;IAChB;IACA,IAAI,QAAOJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEU,qBAAqB,MAAK,UAAU,EAAE;MAC1DA,qBAAqB,CAAC,MAAMR,eAAe,CAACE,CAAC,CAAC,CAAC;KAChD,MAAM;MACLF,eAAe,CAACE,CAAC,CAAC;;EAEtB,CAAC,EACD,CAACJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEU,qBAAqB,EAAER,eAAe,CAAC,CACpD;EAED,MAAMS,SAAS,GAAGlB,KAAK,CAACU,WAAW,CAChCC,CAAa,IAAI;IAChBN,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEc,mBAAmB,CAAC,SAAS,EAAED,SAAS,CAAC;IACzDb,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEc,mBAAmB,CAAC,WAAW,EAAEH,WAAW,CAAC;EAC/D,CAAC,EACD,CAACA,WAAW,EAAEX,cAAc,CAAC,CAC9B;EAED,MAAMe,cAAc,GAAIC,QAAuB,IAAMC,cAA6C,IAAI;IACpG;IACA,IAAIA,cAAc,CAACC,MAAM,KAAKD,cAAc,CAACE,aAAa,IAAIF,cAAc,CAACG,MAAM,KAAK,CAAC,EAAE;MACzF;;IAEF;IACA;IACAvB,YAAY,CAACY,OAAO,GAAGhB,iBAAiB,CAAC4B,cAAc,CAACL,QAAQ,CAAC;IACjEtB,MAAM,CAACe,OAAO,GAAGQ,cAAc,CAACT,OAAO;IACvCV,KAAK,CAACW,OAAO,GAAGO,QAAQ;IAExBhB,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEsB,gBAAgB,CAAC,SAAS,EAAET,SAAS,CAAC;IACtDb,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEsB,gBAAgB,CAAC,WAAW,EAAEX,WAAW,CAAC;EAC5D,CAAC;EAED,OAAO;IACLI,cAAc,EAAGC,QAAuB,IAAKD,cAAc,CAACC,QAAQ;GACrE;AACH;AA1DAO","names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","targetDocument","react_shared_contexts_1","globalWin","defaultView","handleMouseMove","useCallback","e","dx","clientX","current","setColumnWidth","onMouseMove","requestAnimationFrame","onMouseUp","removeEventListener","getOnMouseDown","columnId","mouseDownEvent","target","currentTarget","button","getColumnWidth","addEventListener","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const handleMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      const dx = e.clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(colId.current, currentWidth.current);\n      mouseX.current = e.clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => handleMouseMove(e));\n      } else {\n        handleMouseMove(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, handleMouseMove],\n  );\n\n  const onMouseUp = React.useCallback(\n    (e: MouseEvent) => {\n      targetDocument?.removeEventListener('mouseup', onMouseUp);\n      targetDocument?.removeEventListener('mousemove', onMouseMove);\n    },\n    [onMouseMove, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (mouseDownEvent: React.MouseEvent<HTMLElement>) => {\n    // ignore other buttons than primary mouse button\n    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {\n      return;\n    }\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = mouseDownEvent.clientX;\n    colId.current = columnId;\n\n    targetDocument?.addEventListener('mouseup', onMouseUp);\n    targetDocument?.addEventListener('mousemove', onMouseMove);\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAEA;AAEA,SAAgBA,gCAAgC,CAACC,iBAAoC;EACnF,MAAMC,MAAM,GAAGC,KAAK,CAACC,MAAM,CAAC,CAAC,CAAC;EAC9B,MAAMC,YAAY,GAAGF,KAAK,CAACC,MAAM,CAAC,CAAC,CAAC;EACpC,MAAME,KAAK,GAAGH,KAAK,CAACC,MAAM,CAA4BG,SAAS,CAAC;EAEhE,MAAM;IAAEC;EAAc,CAAE,GAAGC,0CAAS,EAAE;EACtC,MAAMC,SAAS,GAAGF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,WAAW;EAE7C,MAAMC,eAAe,GAAGT,KAAK,CAACU,WAAW,CACtCC,CAAa,IAAI;IAChB,MAAMC,EAAE,GAAGD,CAAC,CAACE,OAAO,GAAGd,MAAM,CAACe,OAAO;IAErC;IACAZ,YAAY,CAACY,OAAO,IAAIF,EAAE;IAC1BT,KAAK,CAACW,OAAO,IAAIhB,iBAAiB,CAACiB,cAAc,CAACJ,CAAC,EAAE;MAAEK,QAAQ,EAAEb,KAAK,CAACW,OAAO;MAAEG,KAAK,EAAEf,YAAY,CAACY;IAAO,CAAE,CAAC;IAC9Gf,MAAM,CAACe,OAAO,GAAGH,CAAC,CAACE,OAAO;EAC5B,CAAC,EACD,CAACf,iBAAiB,CAAC,CACpB;EAED,MAAMoB,WAAW,GAAGlB,KAAK,CAACU,WAAW,CAClCC,CAAa,IAAI;IAChB;IACA,IAAI,QAAOJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,qBAAqB,MAAK,UAAU,EAAE;MAC1DA,qBAAqB,CAAC,MAAMV,eAAe,CAACE,CAAC,CAAC,CAAC;KAChD,MAAM;MACLF,eAAe,CAACE,CAAC,CAAC;;EAEtB,CAAC,EACD,CAACJ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,qBAAqB,EAAEV,eAAe,CAAC,CACpD;EAED,MAAMW,SAAS,GAAGpB,KAAK,CAACU,WAAW,CAChCC,CAAa,IAAI;IAChBN,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEgB,mBAAmB,CAAC,SAAS,EAAED,SAAS,CAAC;IACzDf,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEgB,mBAAmB,CAAC,WAAW,EAAEH,WAAW,CAAC;EAC/D,CAAC,EACD,CAACA,WAAW,EAAEb,cAAc,CAAC,CAC9B;EAED,MAAMiB,cAAc,GAAIN,QAAuB,IAAMO,cAA6C,IAAI;IACpG;IACA,IAAIA,cAAc,CAACC,MAAM,KAAKD,cAAc,CAACE,aAAa,IAAIF,cAAc,CAACG,MAAM,KAAK,CAAC,EAAE;MACzF;;IAEF;IACA;IACAxB,YAAY,CAACY,OAAO,GAAGhB,iBAAiB,CAAC6B,cAAc,CAACX,QAAQ,CAAC;IACjEjB,MAAM,CAACe,OAAO,GAAGS,cAAc,CAACV,OAAO;IACvCV,KAAK,CAACW,OAAO,GAAGE,QAAQ;IAExBX,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEuB,gBAAgB,CAAC,SAAS,EAAER,SAAS,CAAC;IACtDf,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEuB,gBAAgB,CAAC,WAAW,EAAEV,WAAW,CAAC;EAC5D,CAAC;EAED,OAAO;IACLI,cAAc,EAAGN,QAAuB,IAAKM,cAAc,CAACN,QAAQ;GACrE;AACH;AA1DAa","names":["useTableColumnResizeMouseHandler","columnResizeState","mouseX","React","useRef","currentWidth","colId","undefined","targetDocument","react_shared_contexts_1","globalWin","defaultView","handleMouseMove","useCallback","e","dx","clientX","current","setColumnWidth","columnId","width","onMouseMove","requestAnimationFrame","onMouseUp","removeEventListener","getOnMouseDown","mouseDownEvent","target","currentTarget","button","getColumnWidth","addEventListener","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n  const mouseX = React.useRef(0);\n  const currentWidth = React.useRef(0);\n  const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n  const globalWin = targetDocument?.defaultView;\n\n  const handleMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      const dx = e.clientX - mouseX.current;\n\n      // Update the local width for the column and set it\n      currentWidth.current += dx;\n      colId.current && columnResizeState.setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n      mouseX.current = e.clientX;\n    },\n    [columnResizeState],\n  );\n\n  const onMouseMove = React.useCallback(\n    (e: MouseEvent) => {\n      // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n      if (typeof globalWin?.requestAnimationFrame === 'function') {\n        requestAnimationFrame(() => handleMouseMove(e));\n      } else {\n        handleMouseMove(e);\n      }\n    },\n    [globalWin?.requestAnimationFrame, handleMouseMove],\n  );\n\n  const onMouseUp = React.useCallback(\n    (e: MouseEvent) => {\n      targetDocument?.removeEventListener('mouseup', onMouseUp);\n      targetDocument?.removeEventListener('mousemove', onMouseMove);\n    },\n    [onMouseMove, targetDocument],\n  );\n\n  const getOnMouseDown = (columnId: TableColumnId) => (mouseDownEvent: React.MouseEvent<HTMLElement>) => {\n    // ignore other buttons than primary mouse button\n    if (mouseDownEvent.target !== mouseDownEvent.currentTarget || mouseDownEvent.button !== 0) {\n      return;\n    }\n    // Keep the width locally so that we decouple the calculation of the next with from rendering.\n    // This makes the whole experience much faster and more precise\n    currentWidth.current = columnResizeState.getColumnWidth(columnId);\n    mouseX.current = mouseDownEvent.clientX;\n    colId.current = columnId;\n\n    targetDocument?.addEventListener('mouseup', onMouseUp);\n    targetDocument?.addEventListener('mousemove', onMouseMove);\n  };\n\n  return {\n    getOnMouseDown: (columnId: TableColumnId) => getOnMouseDown(columnId),\n  };\n}\n"]}

package/lib-commonjs/hooks/useTableColumnResizeState.js

@@ -84,14 +84,23 @@ function useTableColumnResizeState(columns, containerWidth, params = {}) {
       columnSizingOptions
     });
   }, [columnSizingOptions]);
-  const setColumnWidth = react_utilities_1.useEventCallback((columnId, width) => {
+  const setColumnWidth = react_utilities_1.useEventCallback((event, data) => {
+    let {
+      width
+    } = data;
+    const {
+      columnId
+    } = data;
     const col = columnResizeUtils_1.getColumnById(state.columnWidthState, columnId);
     if (!col) {
       return;
     }
     width = Math.max(col.minWidth || 0, width);
     if (onColumnResize) {
-      onColumnResize(columnId, width);
+      onColumnResize(event, {
+        columnId,
+        width
+      });
     }
     dispatch({
       type: 'SET_COLUMN_WIDTH',

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["createReducer","state","action","type","containerWidth","columnWidthState","columnResizeUtils_1","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","React","useMemo","dispatch","useReducer","undefined","react_utilities_1","setColumnWidth","col","Math","max","minWidth","getColumnById","colId","getColumns","getColumnWidth","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback((columnId: TableColumnId, width: number) => {\n    const col = getColumnById(state.columnWidthState, columnId);\n    if (!col) {\n      return;\n    }\n\n    width = Math.max(col.minWidth || 0, width);\n\n    if (onColumnResize) {\n      onColumnResize(columnId, width);\n    }\n    dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n  });\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}
+{"version":3,"mappings":"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","names":["createReducer","state","action","type","containerWidth","columnWidthState","columnResizeUtils_1","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","React","useMemo","dispatch","useReducer","undefined","react_utilities_1","setColumnWidth","event","data","col","Math","max","minWidth","getColumnById","colId","getColumns","getColumnWidth","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n  TableColumnDefinition,\n  TableColumnId,\n  ColumnResizeState,\n  ColumnWidthState,\n  UseTableColumnSizingParams,\n  TableColumnSizingOptions,\n} from './types';\nimport {\n  columnDefinitionsToState,\n  adjustColumnWidthsToFitContainer,\n  getColumnById,\n  setColumnProperty,\n  getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n  columns: TableColumnDefinition<T>[];\n  containerWidth: number;\n  columnWidthState: ColumnWidthState[];\n  columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n  | {\n      type: 'CONTAINER_WIDTH_UPDATED';\n      containerWidth: number;\n    }\n  | {\n      type: 'COLUMNS_UPDATED';\n      columns: TableColumnDefinition<T>[];\n    }\n  | {\n      type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n      columnSizingOptions: TableColumnSizingOptions | undefined;\n    }\n  | {\n      type: 'SET_COLUMN_WIDTH';\n      columnId: TableColumnId;\n      width: number;\n    };\n\nconst createReducer = <T>() => (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n  switch (action.type) {\n    case 'CONTAINER_WIDTH_UPDATED':\n      return {\n        ...state,\n        containerWidth: action.containerWidth,\n        columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n      };\n\n    case 'COLUMNS_UPDATED':\n      const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n      return {\n        ...state,\n        columns: action.columns,\n        columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n      };\n\n    case 'COLUMN_SIZING_OPTIONS_UPDATED':\n      const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n      return {\n        ...state,\n        columnSizingOptions: action.columnSizingOptions,\n        columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n      };\n\n    case 'SET_COLUMN_WIDTH':\n      const { columnId, width } = action;\n      const { containerWidth } = state;\n\n      const column = getColumnById(state.columnWidthState, columnId);\n      let newColumnWidthState = [...state.columnWidthState];\n\n      if (!column) {\n        return state;\n      }\n\n      // Adjust the column width and measure the new total width\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n      // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n      newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n      // Adjust the widths to the container size\n      newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n      return { ...state, columnWidthState: newColumnWidthState };\n  }\n};\n\nexport function useTableColumnResizeState<T>(\n  columns: TableColumnDefinition<T>[],\n  containerWidth: number,\n  params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n  const { onColumnResize, columnSizingOptions } = params;\n\n  const reducer = React.useMemo(() => createReducer<T>(), []);\n\n  const [state, dispatch] = React.useReducer(reducer, {\n    columns,\n    containerWidth: 0,\n    columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n    columnSizingOptions,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n  }, [containerWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMNS_UPDATED', columns });\n  }, [columns]);\n\n  useIsomorphicLayoutEffect(() => {\n    dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n  }, [columnSizingOptions]);\n\n  const setColumnWidth = useEventCallback(\n    (event: MouseEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n      let { width } = data;\n      const { columnId } = data;\n      const col = getColumnById(state.columnWidthState, columnId);\n      if (!col) {\n        return;\n      }\n\n      width = Math.max(col.minWidth || 0, width);\n\n      if (onColumnResize) {\n        onColumnResize(event, { columnId, width });\n      }\n      dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n    },\n  );\n\n  return {\n    getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n    getColumns: () => state.columnWidthState,\n    getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n    setColumnWidth,\n  };\n}\n"]}

package/lib-commonjs/hooks/useTableColumnSizing.js

@@ -48,7 +48,7 @@ function useTableColumnSizingState(tableState, params) {
     measureElementRef
   } = useMeasureElement_1.useMeasureElement();
   // Creates the state based on columns and available containerWidth
-  const columnResizeState = useTableColumnResizeState_1.useTableColumnResizeState(columns, width, params);
+  const columnResizeState = useTableColumnResizeState_1.useTableColumnResizeState(columns, width + ((params === null || params === void 0 ? void 0 : params.containerWidthOffset) || 0), params);
   // Creates the mouse handler and attaches the state to it
   const mouseHandler = useTableColumnResizeMouseHandler_1.useTableColumnResizeMouseHandler(columnResizeState);
   return {
@@ -57,7 +57,10 @@ function useTableColumnSizingState(tableState, params) {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     columnSizing_unstable: {
       getOnMouseDown: mouseHandler.getOnMouseDown,
-      setColumnWidth: columnResizeState.setColumnWidth,
+      setColumnWidth: (columnId, w) => columnResizeState.setColumnWidth(undefined, {
+        columnId,
+        width: w
+      }),
       getColumnWidths: columnResizeState.getColumns,
       getTableHeaderCellProps: columnId => {
         const col = columnResizeState.getColumnById(columnId);

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AAQA;AACA;AACA;AACA;AAEaA,gCAAwB,GAA2B;EAC9DC,eAAe,EAAE,MAAM,EAAE;EACzBC,cAAc,EAAE,MAAM,MAAM,IAAI;EAChCC,cAAc,EAAE,MAAM,IAAI;EAC1BC,uBAAuB,EAAE,OAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAE,OAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,SAAgBE,6BAA6B,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAJAT;AAMA,SAASY,eAAe,CAACC,MAAwB;EAC/C,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;EAE1B,OAAO;IACL;IACAA,KAAK;IACL;IACAC,QAAQ,EAAED,KAAK;IACfE,QAAQ,EAAEF;GACX;AACH;AAEA,SAASH,yBAAyB,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGC,qCAAiB,EAAE;EACxD;EACA,MAAMC,iBAAiB,GAAGC,qDAAyB,CAACJ,OAAO,EAAEH,KAAK,EAAEL,MAAM,CAAC;EAC3E;EACA,MAAMa,YAAY,GAAGC,mEAAgC,CAACH,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGV,UAAU;IACbc,QAAQ,EAAEN,iBAAiB;IAC3B;IACAO,qBAAqB,EAAE;MACrBvB,cAAc,EAAEoB,YAAY,CAACpB,cAAc;MAC3CC,cAAc,EAAEiB,iBAAiB,CAACjB,cAAc;MAChDF,eAAe,EAAEmB,iBAAiB,CAACM,UAAU;MAC7CtB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMqB,GAAG,GAAGP,iBAAiB,CAACQ,aAAa,CAACtB,QAAQ,CAAC;QACrD,MAAMuB,KAAK,GAAGC,oBAACC,qCAAiB;UAACC,WAAW,EAAEV,YAAY,CAACpB,cAAc,CAACI,QAAQ;QAAC,EAAI;QACvF,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDtB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMqB,GAAG,GAAGP,iBAAiB,CAACQ,aAAa,CAACtB,QAAQ,CAAC;QACrD,OAAOqB,GAAG,GAAG;UAAEtB,KAAK,EAAEO,eAAe,CAACe,GAAG;QAAC,CAAE,GAAG,EAAE;MACnD;;GAEH;AACH","names":["exports","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement_1","columnResizeState","useTableColumnResizeState_1","mouseHandler","useTableColumnResizeMouseHandler_1","tableRef","columnSizing_unstable","getColumns","col","getColumnById","aside","React","TableResizeHandle_1","onMouseDown"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width, params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: columnResizeState.setColumnWidth,\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = <TableResizeHandle onMouseDown={mouseHandler.getOnMouseDown(columnId)} />;\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}
+{"version":3,"mappings":";;;;;;AAAA;AAQA;AACA;AACA;AACA;AAEaA,gCAAwB,GAA2B;EAC9DC,eAAe,EAAE,MAAM,EAAE;EACzBC,cAAc,EAAE,MAAM,MAAM,IAAI;EAChCC,cAAc,EAAE,MAAM,IAAI;EAC1BC,uBAAuB,EAAE,OAAO;IAAEC,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE,CAAC;EAC5DC,iBAAiB,EAAE,OAAO;IAAEF,KAAK,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAE,CAAE;CACtD;AAED,SAAgBE,6BAA6B,CAAQC,MAAmC;EACtF;EACA;EACA,OAAQC,UAAqC,IAAKC,yBAAyB,CAACD,UAAU,EAAED,MAAM,CAAC;AACjG;AAJAT;AAMA,SAASY,eAAe,CAACC,MAAwB;EAC/C,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK;EAE1B,OAAO;IACL;IACAA,KAAK;IACL;IACAC,QAAQ,EAAED,KAAK;IACfE,QAAQ,EAAEF;GACX;AACH;AAEA,SAASH,yBAAyB,CAChCD,UAAqC,EACrCD,MAAmC;EAEnC,MAAM;IAAEQ;EAAO,CAAE,GAAGP,UAAU;EAE9B;EACA,MAAM;IAAEI,KAAK;IAAEI;EAAiB,CAAE,GAAGC,qCAAiB,EAAE;EACxD;EACA,MAAMC,iBAAiB,GAAGC,qDAAyB,CAACJ,OAAO,EAAEH,KAAK,IAAI,OAAM,aAANL,MAAM,uBAANA,MAAM,CAAEa,oBAAoB,KAAI,CAAC,CAAC,EAAEb,MAAM,CAAC;EACjH;EACA,MAAMc,YAAY,GAAGC,mEAAgC,CAACJ,iBAAiB,CAAC;EAExE,OAAO;IACL,GAAGV,UAAU;IACbe,QAAQ,EAAEP,iBAAiB;IAC3B;IACAQ,qBAAqB,EAAE;MACrBxB,cAAc,EAAEqB,YAAY,CAACrB,cAAc;MAC3CC,cAAc,EAAE,CAACG,QAAuB,EAAEqB,CAAS,KACjDP,iBAAiB,CAACjB,cAAc,CAACyB,SAAS,EAAE;QAAEtB,QAAQ;QAAEQ,KAAK,EAAEa;MAAC,CAAE,CAAC;MACrE1B,eAAe,EAAEmB,iBAAiB,CAACS,UAAU;MAC7CzB,uBAAuB,EAAGE,QAAuB,IAAI;QACnD,MAAMwB,GAAG,GAAGV,iBAAiB,CAACW,aAAa,CAACzB,QAAQ,CAAC;QACrD,MAAM0B,KAAK,GAAGC,oBAACC,qCAAiB;UAACC,WAAW,EAAEZ,YAAY,CAACrB,cAAc,CAACI,QAAQ;QAAC,EAAI;QACvF,OAAOwB,GAAG,GAAG;UAAEzB,KAAK,EAAEO,eAAe,CAACkB,GAAG,CAAC;UAAEE;QAAK,CAAE,GAAG,EAAE;MAC1D,CAAC;MACDzB,iBAAiB,EAAGD,QAAuB,IAAI;QAC7C,MAAMwB,GAAG,GAAGV,iBAAiB,CAACW,aAAa,CAACzB,QAAQ,CAAC;QACrD,OAAOwB,GAAG,GAAG;UAAEzB,KAAK,EAAEO,eAAe,CAACkB,GAAG;QAAC,CAAE,GAAG,EAAE;MACnD;;GAEH;AACH","names":["exports","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","useMeasureElement_1","columnResizeState","useTableColumnResizeState_1","containerWidthOffset","mouseHandler","useTableColumnResizeMouseHandler_1","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","React","TableResizeHandle_1","onMouseDown"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  TableColumnId,\n  ColumnWidthState,\n  TableColumnSizingState,\n  TableFeaturesState,\n  UseTableColumnSizingParams,\n} from './types';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useMeasureElement } from './useMeasureElement';\nimport { TableResizeHandle } from '../TableResizeHandle';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n  getColumnWidths: () => [],\n  getOnMouseDown: () => () => null,\n  setColumnWidth: () => null,\n  getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n  getTableCellProps: () => ({ style: {}, columnId: '' }),\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n  // False positive, these plugin hooks are intended to be run on every render\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n  const width = column.width;\n\n  return {\n    // native styles\n    width,\n    // non-native element styles (flex layout)\n    minWidth: width,\n    maxWidth: width,\n  };\n}\n\nfunction useTableColumnSizingState<TItem>(\n  tableState: TableFeaturesState<TItem>,\n  params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n  const { columns } = tableState;\n\n  // Gets the container width\n  const { width, measureElementRef } = useMeasureElement();\n  // Creates the state based on columns and available containerWidth\n  const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n  // Creates the mouse handler and attaches the state to it\n  const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n\n  return {\n    ...tableState,\n    tableRef: measureElementRef,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    columnSizing_unstable: {\n      getOnMouseDown: mouseHandler.getOnMouseDown,\n      setColumnWidth: (columnId: TableColumnId, w: number) =>\n        columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n      getColumnWidths: columnResizeState.getColumns,\n      getTableHeaderCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        const aside = <TableResizeHandle onMouseDown={mouseHandler.getOnMouseDown(columnId)} />;\n        return col ? { style: getColumnStyles(col), aside } : {};\n      },\n      getTableCellProps: (columnId: TableColumnId) => {\n        const col = columnResizeState.getColumnById(columnId);\n        return col ? { style: getColumnStyles(col) } : {};\n      },\n    },\n  };\n}\n"]}

package/lib-commonjs/utils/columnResizeUtils.js

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

package/lib-commonjs/utils/columnResizeUtils.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAEA,MAAMA,aAAa,GAAG,GAAG;AACzB,MAAMC,iBAAiB,GAAG,GAAG;AAE7B;;;;;;;;;;AAWA,SAAgBC,wBAAwB,CACtCC,OAAmC,EACnCC,QAA4B,EAAE,EAC9BC,sBAAgD,EAAE;EAElD,IAAIC,OAAO,GAAG,KAAK;EACnB,MAAMC,QAAQ,GAAG,IAAIC,GAAG,CAACJ,KAAK,CAACK,GAAG,CAACC,CAAC,IAAI,CAACA,CAAC,CAACC,QAAQ,EAAED,CAAC,CAAC,CAAC,CAAC;EAEzD,MAAME,YAAY,GAAGT,OAAO,CAACM,GAAG,CAACI,MAAM,IAAG;;IACxC,MAAMC,mBAAmB,GAAGP,QAAQ,CAACQ,GAAG,CAACF,MAAM,CAACF,QAAQ,CAAC;IAEzD,IAAIG,mBAAmB,EAAE;MACvB,MAAM;QACJE,UAAU,GAAGF,mBAAmB,CAACE,UAAU;QAC3CC,QAAQ,GAAGH,mBAAmB,CAACG,QAAQ;QACvCC,OAAO,GAAGJ,mBAAmB,CAACI;MAAO,CACtC,GAAG,yBAAmB,CAACL,MAAM,CAACF,QAAQ,CAAC,mCAAI,EAAE;MAE9C,IACEK,UAAU,KAAKF,mBAAmB,CAACE,UAAU,IAC7CC,QAAQ,KAAKH,mBAAmB,CAACG,QAAQ,IACzCC,OAAO,KAAKJ,mBAAmB,CAACI,OAAO,EACvC;QACAZ,OAAO,GAAG,IAAI;QACd,OAAO;UACL,GAAGQ,mBAAmB;UACtBE,UAAU;UACVG,KAAK,EAAEH,UAAU;UACjBC,QAAQ;UACRC;SACD;;MAEH,OAAOJ,mBAAmB;;IAG5B,MAAM;MAAEM,YAAY;MAAEJ,UAAU;MAAEC,QAAQ;MAAEC;IAAO,CAAE,GAAG,yBAAmB,CAACL,MAAM,CAACF,QAAQ,CAAC,mCAAI,EAAE;IAElGL,OAAO,GAAG,IAAI;IACd,OAAO;MACLK,QAAQ,EAAEE,MAAM,CAACF,QAAQ;MACzBQ,KAAK,EAAE,kBAAY,aAAZC,YAAY,cAAZA,YAAY,GAAIJ,UAAU,mCAAIhB,aAAa;MAClDiB,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIhB,iBAAiB;MACvCe,UAAU,EAAE,kBAAY,aAAZI,YAAY,cAAZA,YAAY,GAAIJ,UAAU,mCAAIhB,aAAa;MACvDkB,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI;KACrB;EACH,CAAC,CAAC;EAEF;EACA;EACA;EACA;EACA,IAAIN,YAAY,CAACS,MAAM,KAAKjB,KAAK,CAACiB,MAAM,IAAIf,OAAO,EAAE;IACnD,MAAMO,MAAM,GAAGD,YAAY,CAACU,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACJ,KAAK,GAAGI,GAAG,CAACP,UAAU,CAAC;IACnE,IAAIH,MAAM,EAAE;MACVA,MAAM,CAACM,KAAK,GAAGN,MAAM,CAACG,UAAU;;IAGlCV,OAAO,GAAG,IAAI;;EAGhB,OAAOA,OAAO,GAAGM,YAAY,GAAGR,KAAK;AACvC;AA7DAoB;AA+DA,SAAgBC,aAAa,CAACrB,KAAyB,EAAEO,QAAuB;EAC9E,OAAOP,KAAK,CAACkB,IAAI,CAACI,CAAC,IAAIA,CAAC,CAACf,QAAQ,KAAKA,QAAQ,CAAC;AACjD;AAFAa;AAIA,SAAgBG,gBAAgB,CAACvB,KAAyB,EAAEwB,KAAa;EACvE,OAAOxB,KAAK,CAACwB,KAAK,CAAC;AACrB;AAFAJ;AAIA,SAAgBK,aAAa,CAACzB,KAAyB;EACrD,OAAOA,KAAK,CAAC0B,MAAM,CAAC,CAACC,GAAG,EAAElB,MAAM,KAAKkB,GAAG,GAAGlB,MAAM,CAACM,KAAK,GAAGN,MAAM,CAACK,OAAO,EAAE,CAAC,CAAC;AAC9E;AAFAM;AAIA,SAAgBQ,SAAS,CAAC5B,KAAyB;EACjD,OAAOA,KAAK,CAACiB,MAAM;AACrB;AAFAG;AAIA,SAAgBS,cAAc,CAAC7B,KAAyB,EAAEO,QAAuB;;EAC/E,MAAME,MAAM,GAAGY,aAAa,CAACrB,KAAK,EAAEO,QAAQ,CAAC;EAC7C,OAAO,YAAM,aAANE,MAAM,uBAANA,MAAM,CAAEM,KAAK,mCAAI,CAAC;AAC3B;AAHAK;AAKA;;;;;;;;;;;;AAYA,SAAgBU,iBAAiB,CAC/BC,UAA8B,EAC9BxB,QAAuB,EACvByB,QAAgC,EAChCC,KAAa;EAEb,MAAMC,aAAa,GAAGb,aAAa,CAACU,UAAU,EAAExB,QAAQ,CAAC;EAEzD,IAAI,CAAC2B,aAAa,IAAI,cAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAGF,QAAQ,CAAC,MAAKC,KAAK,EAAE;IACzD,OAAOF,UAAU;;EAGnB,MAAMI,aAAa,GAAG;IAAE,GAAGD,aAAa;IAAE,CAACF,QAAQ,GAAGC;EAAK,CAAE;EAE7D,MAAMG,QAAQ,GAAGL,UAAU,CAACL,MAAM,CAAC,CAACW,GAAG,EAAEC,OAAO,KAAI;IAClD,IAAIA,OAAO,CAAC/B,QAAQ,KAAK4B,aAAa,CAAC5B,QAAQ,EAAE;MAC/C,OAAO,CAAC,GAAG8B,GAAG,EAAEF,aAAa,CAAC;;IAEhC,OAAO,CAAC,GAAGE,GAAG,EAAEC,OAAO,CAAC;EAC1B,CAAC,EAAE,EAAwB,CAAC;EAE5B,OAAOF,QAAQ;AACjB;AAtBAhB;AAwBA;;;;;;;;;AASA,SAAgBmB,gCAAgC,CAACvC,KAAyB,EAAEwC,cAAsB;EAChG,IAAIJ,QAAQ,GAAGpC,KAAK;EACpB,MAAMyC,UAAU,GAAGhB,aAAa,CAACW,QAAQ,CAAC;EAE1C;EACA,IAAIK,UAAU,GAAGD,cAAc,EAAE;IAC/B,IAAIE,UAAU,GAAGF,cAAc,GAAGC,UAAU;IAC5C,IAAIE,CAAC,GAAG,CAAC;IACT;IACA,OAAOA,CAAC,GAAGP,QAAQ,CAACnB,MAAM,IAAIyB,UAAU,GAAG,CAAC,EAAE;MAC5C,MAAME,UAAU,GAAGrB,gBAAgB,CAACa,QAAQ,EAAEO,CAAC,CAAC;MAChD,MAAME,aAAa,GAAGC,IAAI,CAACC,GAAG,CAACH,UAAU,CAAChC,UAAU,GAAGgC,UAAU,CAAC7B,KAAK,EAAE2B,UAAU,CAAC;MACpFN,QAAQ,GAAGN,iBAAiB,CAACM,QAAQ,EAAEQ,UAAU,CAACrC,QAAQ,EAAE,OAAO,EAAEqC,UAAU,CAAC7B,KAAK,GAAG8B,aAAa,CAAC;MACtGH,UAAU,IAAIG,aAAa;MAE3B;MACA,IAAIF,CAAC,KAAKP,QAAQ,CAACnB,MAAM,GAAG,CAAC,IAAIyB,UAAU,KAAK,CAAC,EAAE;QACjD,MAAMM,OAAO,GAAGzB,gBAAgB,CAACa,QAAQ,EAAEO,CAAC,CAAC;QAC7CP,QAAQ,GAAGN,iBAAiB,CAACM,QAAQ,EAAEY,OAAO,CAACzC,QAAQ,EAAE,OAAO,EAAEyC,OAAO,CAACjC,KAAK,GAAG2B,UAAU,CAAC;;MAG/FC,CAAC,EAAE;;;EAIP;EAAA,KACK,IAAIF,UAAU,IAAID,cAAc,EAAE;IACrC,IAAIE,UAAU,GAAGD,UAAU,GAAGD,cAAc;IAC5C;IACA,IAAIS,CAAC,GAAGb,QAAQ,CAACnB,MAAM,GAAG,CAAC;IAC3B,OAAOgC,CAAC,IAAI,CAAC,IAAIP,UAAU,GAAG,CAAC,EAAE;MAC/B,MAAME,UAAU,GAAGrB,gBAAgB,CAACa,QAAQ,EAAEa,CAAC,CAAC;MAChD,IAAIL,UAAU,CAAC7B,KAAK,GAAG6B,UAAU,CAAC/B,QAAQ,EAAE;QAC1C,MAAMgC,aAAa,GAAGC,IAAI,CAACC,GAAG,CAACH,UAAU,CAAC7B,KAAK,GAAG6B,UAAU,CAAC/B,QAAQ,EAAE6B,UAAU,CAAC;QAClFA,UAAU,IAAIG,aAAa;QAC3BT,QAAQ,GAAGN,iBAAiB,CAACM,QAAQ,EAAEQ,UAAU,CAACrC,QAAQ,EAAE,OAAO,EAAEqC,UAAU,CAAC7B,KAAK,GAAG8B,aAAa,CAAC;;MAExGI,CAAC,EAAE;;;EAIP,OAAOb,QAAQ;AACjB;AA1CAhB","names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","length","find","col","exports","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","Math","min","lastCol","j"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/utils/columnResizeUtils.ts"],"sourcesContent":["import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n *  - It uses existing state for existing columns.\n *  - It removes any state for columns no longer present.\n *  - It checks if any column has been replaced and returns updated state if so\n *  - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n  columns: TableColumnDefinition<T>[],\n  state: ColumnWidthState[] = [],\n  columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n  let updated = false;\n  const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n  const updatedState = columns.map(column => {\n    const existingColumnState = stateMap.get(column.columnId);\n\n    if (existingColumnState) {\n      const {\n        idealWidth = existingColumnState.idealWidth,\n        minWidth = existingColumnState.minWidth,\n        padding = existingColumnState.padding,\n      } = columnSizingOptions[column.columnId] ?? {};\n\n      if (\n        idealWidth !== existingColumnState.idealWidth ||\n        minWidth !== existingColumnState.minWidth ||\n        padding !== existingColumnState.padding\n      ) {\n        updated = true;\n        return {\n          ...existingColumnState,\n          idealWidth,\n          width: idealWidth,\n          minWidth,\n          padding,\n        };\n      }\n      return existingColumnState;\n    }\n\n    const { defaultWidth, idealWidth, minWidth, padding } = columnSizingOptions[column.columnId] ?? {};\n\n    updated = true;\n    return {\n      columnId: column.columnId,\n      width: defaultWidth ?? idealWidth ?? DEFAULT_WIDTH,\n      minWidth: minWidth ?? DEFAULT_MIN_WIDTH,\n      idealWidth: defaultWidth ?? idealWidth ?? DEFAULT_WIDTH,\n      padding: padding ?? 16,\n    };\n  });\n\n  // If the length of the new state changed (column was added or removed) or any of\n  // the individual states has a new reference (column was replaced),\n  // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n  // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n  if (updatedState.length !== state.length || updated) {\n    const column = updatedState.find(col => col.width > col.idealWidth);\n    if (column) {\n      column.width = column.idealWidth;\n    }\n\n    updated = true;\n  }\n\n  return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId) {\n  return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number) {\n  return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n  return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]) {\n  return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n  const column = getColumnById(state, columnId);\n  return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n  localState: ColumnWidthState[],\n  columnId: TableColumnId,\n  property: keyof ColumnWidthState,\n  value: number,\n) {\n  const currentColumn = getColumnById(localState, columnId);\n\n  if (!currentColumn || currentColumn?.[property] === value) {\n    return localState;\n  }\n\n  const updatedColumn = { ...currentColumn, [property]: value };\n\n  const newState = localState.reduce((acc, current) => {\n    if (current.columnId === updatedColumn.columnId) {\n      return [...acc, updatedColumn];\n    }\n    return [...acc, current];\n  }, [] as ColumnWidthState[]);\n\n  return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(state: ColumnWidthState[], containerWidth: number) {\n  let newState = state;\n  const totalWidth = getTotalWidth(newState);\n\n  // The total width is smaller, we are expanding columns\n  if (totalWidth < containerWidth) {\n    let difference = containerWidth - totalWidth;\n    let i = 0;\n    // We start at the beginning and assign the columns their ideal width\n    while (i < newState.length && difference > 0) {\n      const currentCol = getColumnByIndex(newState, i);\n      const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n      newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n      difference -= colAdjustment;\n\n      // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n      if (i === newState.length - 1 && difference !== 0) {\n        const lastCol = getColumnByIndex(newState, i);\n        newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n      }\n\n      i++;\n    }\n  }\n\n  // The total width is larger than container, we need to squash the columns\n  else if (totalWidth >= containerWidth) {\n    let difference = totalWidth - containerWidth;\n    // We start with the last column\n    let j = newState.length - 1;\n    while (j >= 0 && difference > 0) {\n      const currentCol = getColumnByIndex(newState, j);\n      if (currentCol.width > currentCol.minWidth) {\n        const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n        difference -= colAdjustment;\n        newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n      }\n      j--;\n    }\n  }\n\n  return newState;\n}\n"]}
+{"version":3,"mappings":"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","names":["DEFAULT_WIDTH","DEFAULT_MIN_WIDTH","columnDefinitionsToState","columns","state","columnSizingOptions","updated","stateMap","Map","map","s","columnId","updatedState","column","existingColumnState","get","idealWidth","minWidth","padding","width","defaultWidth","Math","max","length","find","col","exports","getColumnById","c","getColumnByIndex","index","getTotalWidth","reduce","sum","getLength","getColumnWidth","setColumnProperty","localState","property","value","currentColumn","updatedColumn","newState","acc","current","adjustColumnWidthsToFitContainer","containerWidth","totalWidth","difference","i","currentCol","colAdjustment","min","lastCol","j"],"sourceRoot":"../src/","sources":["packages/react-components/react-table/src/utils/columnResizeUtils.ts"],"sourcesContent":["import { TableColumnDefinition, ColumnWidthState, TableColumnId, TableColumnSizingOptions } from '../hooks';\n\nconst DEFAULT_WIDTH = 150;\nconst DEFAULT_MIN_WIDTH = 100;\n\n/**\n * This function takes the column definitions and the curent ColumnWidthState and returns new state.\n *  - It uses existing state for existing columns.\n *  - It removes any state for columns no longer present.\n *  - It checks if any column has been replaced and returns updated state if so\n *  - It returns old state if no changes in the state have been made (so that react doesn't call effects)\n * @param columns\n * @param state\n * @returns\n */\n\nexport function columnDefinitionsToState<T>(\n  columns: TableColumnDefinition<T>[],\n  state: ColumnWidthState[] = [],\n  columnSizingOptions: TableColumnSizingOptions = {},\n): ColumnWidthState[] {\n  let updated = false;\n  const stateMap = new Map(state.map(s => [s.columnId, s]));\n\n  const updatedState = columns.map(column => {\n    const existingColumnState = stateMap.get(column.columnId);\n\n    if (existingColumnState) {\n      const {\n        idealWidth = existingColumnState.idealWidth,\n        minWidth = existingColumnState.minWidth,\n        padding = existingColumnState.padding,\n      } = columnSizingOptions[column.columnId] ?? {};\n\n      if (\n        idealWidth !== existingColumnState.idealWidth ||\n        minWidth !== existingColumnState.minWidth ||\n        padding !== existingColumnState.padding\n      ) {\n        updated = true;\n        return {\n          ...existingColumnState,\n          idealWidth,\n          width: idealWidth,\n          minWidth,\n          padding,\n        };\n      }\n      return existingColumnState;\n    }\n\n    const { defaultWidth, idealWidth = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, padding } =\n      columnSizingOptions[column.columnId] ?? {};\n\n    updated = true;\n    return {\n      columnId: column.columnId,\n      width: Math.max(defaultWidth ?? idealWidth, minWidth),\n      minWidth,\n      idealWidth: Math.max(defaultWidth ?? idealWidth, minWidth),\n      padding: padding ?? 16,\n    };\n  });\n\n  // If the length of the new state changed (column was added or removed) or any of\n  // the individual states has a new reference (column was replaced),\n  // we have to reset the column widths to their ideal width (because the column which was last may not be last now).\n  // Then the adjustColumnWidthsToFitContainer can do its job and properly stretch the last column.\n  if (updatedState.length !== state.length || updated) {\n    const column = updatedState.find(col => col.width > col.idealWidth);\n    if (column) {\n      column.width = column.idealWidth;\n    }\n\n    updated = true;\n  }\n\n  return updated ? updatedState : state;\n}\n\nexport function getColumnById(state: ColumnWidthState[], columnId: TableColumnId) {\n  return state.find(c => c.columnId === columnId);\n}\n\nexport function getColumnByIndex(state: ColumnWidthState[], index: number) {\n  return state[index];\n}\n\nexport function getTotalWidth(state: ColumnWidthState[]): number {\n  return state.reduce((sum, column) => sum + column.width + column.padding, 0);\n}\n\nexport function getLength(state: ColumnWidthState[]) {\n  return state.length;\n}\n\nexport function getColumnWidth(state: ColumnWidthState[], columnId: TableColumnId): number {\n  const column = getColumnById(state, columnId);\n  return column?.width ?? 0;\n}\n\n/**\n * This function takes the current state and returns an updated state, so that it can be set.\n * The reason for this is that we can update the state multiple times before commiting to render.\n * This is an optimization and also prevents flickering.\n * It also returns new copy of the state only if the value is different than the one currently in\n * the state, further preventing unnecessary updates.\n * @param localState\n * @param columnId\n * @param property\n * @param value\n * @returns\n */\nexport function setColumnProperty(\n  localState: ColumnWidthState[],\n  columnId: TableColumnId,\n  property: keyof ColumnWidthState,\n  value: number,\n) {\n  const currentColumn = getColumnById(localState, columnId);\n\n  if (!currentColumn || currentColumn?.[property] === value) {\n    return localState;\n  }\n\n  const updatedColumn = { ...currentColumn, [property]: value };\n\n  const newState = localState.reduce((acc, current) => {\n    if (current.columnId === updatedColumn.columnId) {\n      return [...acc, updatedColumn];\n    }\n    return [...acc, current];\n  }, [] as ColumnWidthState[]);\n\n  return newState;\n}\n\n/**\n * This function takes the state and container width and makes sure the each column in the state\n * is its optimal width, and that the columns\n * a) fit to the container\n * b) always fill the whole container\n * @param state\n * @param containerWidth\n * @returns\n */\nexport function adjustColumnWidthsToFitContainer(state: ColumnWidthState[], containerWidth: number) {\n  let newState = state;\n  const totalWidth = getTotalWidth(newState);\n\n  // The total width is smaller, we are expanding columns\n  if (totalWidth < containerWidth) {\n    let difference = containerWidth - totalWidth;\n    let i = 0;\n    // We start at the beginning and assign the columns their ideal width\n    while (i < newState.length && difference > 0) {\n      const currentCol = getColumnByIndex(newState, i);\n      const colAdjustment = Math.min(currentCol.idealWidth - currentCol.width, difference);\n      newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width + colAdjustment);\n      difference -= colAdjustment;\n\n      // if there is still empty space, after all columns are their ideal sizes, assign it to the last column\n      if (i === newState.length - 1 && difference !== 0) {\n        const lastCol = getColumnByIndex(newState, i);\n        newState = setColumnProperty(newState, lastCol.columnId, 'width', lastCol.width + difference);\n      }\n\n      i++;\n    }\n  }\n\n  // The total width is larger than container, we need to squash the columns\n  else if (totalWidth >= containerWidth) {\n    let difference = totalWidth - containerWidth;\n    // We start with the last column\n    let j = newState.length - 1;\n    while (j >= 0 && difference > 0) {\n      const currentCol = getColumnByIndex(newState, j);\n      if (currentCol.width > currentCol.minWidth) {\n        const colAdjustment = Math.min(currentCol.width - currentCol.minWidth, difference);\n        difference -= colAdjustment;\n        newState = setColumnProperty(newState, currentCol.columnId, 'width', currentCol.width - colAdjustment);\n      }\n      j--;\n    }\n  }\n\n  return newState;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-table",
-  "version": "9.0.0-rc.5",
+  "version": "9.0.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,16 +33,16 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-aria": "^9.3.7",
-    "@fluentui/react-avatar": "^9.3.2",
-    "@fluentui/react-checkbox": "^9.0.25",
-    "@fluentui/react-context-selector": "^9.1.7",
+    "@fluentui/react-aria": "^9.3.8",
+    "@fluentui/react-avatar": "^9.3.4",
+    "@fluentui/react-checkbox": "^9.0.26",
+    "@fluentui/react-context-selector": "^9.1.8",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-radio": "^9.0.23",
+    "@fluentui/react-radio": "^9.0.24",
     "@fluentui/react-shared-contexts": "^9.2.0",
-    "@fluentui/react-tabster": "^9.5.0",
+    "@fluentui/react-tabster": "^9.5.1",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.5.1",
+    "@fluentui/react-utilities": "^9.5.2",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
@@ -54,9 +54,7 @@
   },
   "beachball": {
     "disallowedChangeTypes": [
-      "major",
-      "minor",
-      "patch"
+      "major"
     ]
   },
   "exports": {