@fluentui/react-table 9.7.2 → 9.7.4

package/lib/components/TableCellLayout/useTableCellLayout.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useTableContext } from '../../contexts/tableContext';
 const tableAvatarSizeMap = {
     medium: 32,
@@ -24,19 +24,27 @@ const tableAvatarSizeMap = {
             content: 'div',
             media: 'span'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
         appearance: props.appearance,
         truncate: props.truncate,
-        main: resolveShorthand(props.main, {
-            required: true
+        main: slot.optional(props.main, {
+            renderByDefault: true,
+            elementType: 'span'
         }),
-        media: resolveShorthand(props.media),
-        description: resolveShorthand(props.description),
-        content: resolveShorthand(props.content, {
-            required: !!props.description || !!props.children
+        media: slot.optional(props.media, {
+            elementType: 'span'
+        }),
+        description: slot.optional(props.description, {
+            elementType: 'span'
+        }),
+        content: slot.optional(props.content, {
+            renderByDefault: !!props.description || !!props.children,
+            elementType: 'div'
         }),
         avatarSize: tableAvatarSizeMap[size],
         size

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

@@ -1 +1 @@
-{"version":3,"sources":["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"],"names":["React","getNativeElementProps","resolveShorthand","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","content","media","appearance","truncate","required","children","avatarSize"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEpF,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,KAAI,EAAE,GAAGP;IAEjB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,aAAa;YACbC,SAAS;YACTC,OAAO;QACT;QACAJ,MAAMX,sBAAsB,OAAO;YAAEQ;YAAK,GAAGD,KAAK;QAAC;QACnDS,YAAYT,MAAMS,UAAU;QAC5BC,UAAUV,MAAMU,QAAQ;QACxBL,MAAMX,iBAAiBM,MAAMK,IAAI,EAAE;YAAEM,UAAU,IAAI;QAAC;QACpDH,OAAOd,iBAAiBM,MAAMQ,KAAK;QACnCF,aAAaZ,iBAAiBM,MAAMM,WAAW;QAC/CC,SAASb,iBAAiBM,MAAMO,OAAO,EAAE;YAAEI,UAAU,CAAC,CAACX,MAAMM,WAAW,IAAI,CAAC,CAACN,MAAMY,QAAQ;QAAC;QAC7FC,YAAYjB,kBAAkB,CAACM,KAAK;QACpCA;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableCellLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } 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: slot.always(getNativeElementProps('div', { ref, ...props }), { elementType: 'div' }),\n    appearance: props.appearance,\n    truncate: props.truncate,\n    main: slot.optional(props.main, { renderByDefault: true, elementType: 'span' }),\n    media: slot.optional(props.media, { elementType: 'span' }),\n    description: slot.optional(props.description, { elementType: 'span' }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.description || !!props.children,\n      elementType: 'div',\n    }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","content","media","always","elementType","appearance","truncate","optional","renderByDefault","children","avatarSize"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,KAAI,EAAE,GAAGP;IAEjB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,aAAa;YACbC,SAAS;YACTC,OAAO;QACT;QACAJ,MAAMV,KAAKe,MAAM,CAAChB,sBAAsB,OAAO;YAAEQ;YAAK,GAAGD,KAAK;QAAC,IAAI;YAAEU,aAAa;QAAM;QACxFC,YAAYX,MAAMW,UAAU;QAC5BC,UAAUZ,MAAMY,QAAQ;QACxBP,MAAMX,KAAKmB,QAAQ,CAACb,MAAMK,IAAI,EAAE;YAAES,iBAAiB,IAAI;YAAEJ,aAAa;QAAO;QAC7EF,OAAOd,KAAKmB,QAAQ,CAACb,MAAMQ,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDJ,aAAaZ,KAAKmB,QAAQ,CAACb,MAAMM,WAAW,EAAE;YAAEI,aAAa;QAAO;QACpEH,SAASb,KAAKmB,QAAQ,CAACb,MAAMO,OAAO,EAAE;YACpCO,iBAAiB,CAAC,CAACd,MAAMM,WAAW,IAAI,CAAC,CAACN,MAAMe,QAAQ;YACxDL,aAAa;QACf;QACAM,YAAYpB,kBAAkB,CAACM,KAAK;QACpCA;IACF;AACF,EAAE"}

package/lib/components/TableCellLayout/useTableCellLayoutStyles.styles.js

@@ -60,7 +60,7 @@ const useStyles = /*#__PURE__*/__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;}", ".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);}"]
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fsnqrgy{column-gap:var(--spacingHorizontalS);}", ".fylz90v{row-gap:var(--spacingHorizontalS);}", ".fqerorx{flex-grow:1;}", ".f1neuvcm{flex-shrink:1;}", ".fkjuxzh{flex-basis:0px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1vx9l62{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

package/lib/components/TableHeader/renderTableHeader.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';
 /**
  * Render the final JSX of TableHeader
  */ export const renderTableHeader_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(TableHeaderContextProvider, {
         value: ""
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+    }, /*#__PURE__*/ createElement(state.root, null));
 };

package/lib/components/TableHeader/renderTableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTableHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';\nimport type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';\n\n/**\n * Render the final JSX of TableHeader\n */\nexport const renderTableHeader_unstable = (state: TableHeaderState) => {\n  const { slots, slotProps } = getSlotsNext<TableHeaderSlots>(state);\n\n  return (\n    <TableHeaderContextProvider value=\"\">\n      <slots.root {...slotProps.root} />\n    </TableHeaderContextProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","TableHeaderContextProvider","renderTableHeader_unstable","state","slots","slotProps","value","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,0BAA0B,QAAQ,oCAAoC;AAG/E;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGL,aAA+BG;IAE5D,qBACE,AAdJ,cAcKF;QAA2BK,OAAM;qBAChC,AAfN,cAeOF,MAAMG,IAAI,EAAKF,UAAUE,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderTableHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';\nimport type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';\n\n/**\n * Render the final JSX of TableHeader\n */\nexport const renderTableHeader_unstable = (state: TableHeaderState) => {\n  assertSlots<TableHeaderSlots>(state);\n\n  return (\n    <TableHeaderContextProvider value=\"\">\n      <state.root />\n    </TableHeaderContextProvider>\n  );\n};\n"],"names":["createElement","assertSlots","TableHeaderContextProvider","renderTableHeader_unstable","state","value","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,0BAA0B,QAAQ,oCAAoC;AAG/E;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrEH,YAA8BG;IAE9B,qBACE,AAdJ,cAcKF;QAA2BG,OAAM;qBAChC,AAfN,cAeOD,MAAME,IAAI;AAGjB,EAAE"}

package/lib/components/TableHeader/useTableHeader.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useTableContext } from '../../contexts/tableContext';
 /**
  * Create the state required to render TableHeader.
@@ -17,10 +17,12 @@ import { useTableContext } from '../../contexts/tableContext';
         components: {
             root: rootComponent
         },
-        root: getNativeElementProps(rootComponent, {
+        root: slot.always(getNativeElementProps(rootComponent, {
             ref,
             role: rootComponent === 'div' ? 'rowgroup' : undefined,
             ...props
+        }), {
+            elementType: rootComponent
         }),
         noNativeElements
     };

package/lib/components/TableHeader/useTableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"],"names":["React","getNativeElementProps","useTableContext","useTableHeader_unstable","props","ref","noNativeElements","rootComponent","as","components","root","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAM,EAAEC,iBAAgB,EAAE,GAAGJ;QAEPE;IAAtB,MAAMG,gBAAgBH,CAAAA,CAAAA,YAAAA,MAAMI,EAAE,cAARJ,uBAAAA,YAAYE,gBAAgB,AAAD,IAAI,QAAQ,OAAO;IACpE,OAAO;QACLG,YAAY;YACVC,MAAMH;QACR;QACAG,MAAMT,sBAAsBM,eAAe;YACzCF;YACAM,MAAMJ,kBAAkB,QAAQ,aAAaK,SAAS;YACtD,GAAGR,KAAK;QACV;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getNativeElementProps(rootComponent, {\n        ref,\n        role: rootComponent === 'div' ? 'rowgroup' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    noNativeElements,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useTableContext","useTableHeader_unstable","props","ref","noNativeElements","rootComponent","as","components","root","always","role","undefined","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAM,EAAEC,iBAAgB,EAAE,GAAGJ;QAEPE;IAAtB,MAAMG,gBAAgBH,CAAAA,CAAAA,YAAAA,MAAMI,EAAE,cAARJ,uBAAAA,YAAYE,gBAAgB,AAAD,IAAI,QAAQ,OAAO;IACpE,OAAO;QACLG,YAAY;YACVC,MAAMH;QACR;QACAG,MAAMT,KAAKU,MAAM,CACfX,sBAAsBO,eAAe;YACnCF;YACAO,MAAML,kBAAkB,QAAQ,aAAaM,SAAS;YACtD,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaP;QAAc;QAE/BD;IACF;AACF,EAAE"}

package/lib/components/TableHeaderCell/renderTableHeaderCell.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableHeaderCell
  */ export const renderTableHeaderCell_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(slots.button, slotProps.button, slotProps.root.children, slots.sortIcon && /*#__PURE__*/ createElement(slots.sortIcon, slotProps.sortIcon)), slots.aside && /*#__PURE__*/ createElement(slots.aside, slotProps.aside));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(state.button, null, state.root.children, state.sortIcon && /*#__PURE__*/ createElement(state.sortIcon, null)), state.aside && /*#__PURE__*/ createElement(state.aside, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTableHeaderCell.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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 } = getSlotsNext<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"],"names":["createElement","getSlotsNext","renderTableHeaderCell_unstable","state","slots","slotProps","root","button","children","sortIcon","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7E,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAmCE;IAEhE,qBACE,AAbJ,cAaKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAdN,cAcOF,MAAMG,MAAM,EAAKF,UAAUE,MAAM,EAC/BF,UAAUC,IAAI,CAACE,QAAQ,EACvBJ,MAAMK,QAAQ,kBAAI,AAhB3B,cAgB4BL,MAAMK,QAAQ,EAAKJ,UAAUI,QAAQ,IAE1DL,MAAMM,KAAK,kBAAI,AAlBtB,cAkBuBN,MAAMM,KAAK,EAAKL,UAAUK,KAAK;AAGtD,EAAE"}
+{"version":3,"sources":["renderTableHeaderCell.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } 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  assertSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <state.root>\n      <state.button>\n        {state.root.children}\n        {state.sortIcon && <state.sortIcon />}\n      </state.button>\n      {state.aside && <state.aside />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderTableHeaderCell_unstable","state","root","button","children","sortIcon","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7EF,YAAkCE;IAElC,qBACE,AAbJ,cAaKA,MAAMC,IAAI,sBACT,AAdN,cAcOD,MAAME,MAAM,QACVF,MAAMC,IAAI,CAACE,QAAQ,EACnBH,MAAMI,QAAQ,kBAAI,AAhB3B,cAgB4BJ,MAAMI,QAAQ,UAEnCJ,MAAMK,KAAK,kBAAI,AAlBtB,cAkBuBL,MAAMK,KAAK;AAGlC,EAAE"}

package/lib/components/TableHeaderCell/useTableHeaderCell.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusWithin } from '@fluentui/react-tabster';
 import { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';
 import { useARIAButtonShorthand } from '@fluentui/react-aria';
@@ -32,20 +32,25 @@ const sortIcons = {
             sortIcon: 'span',
             aside: 'span'
         },
-        root: getNativeElementProps(rootComponent, {
+        root: slot.always(getNativeElementProps(rootComponent, {
             ref: useMergedRefs(ref, useFocusWithin()),
             role: rootComponent === 'div' ? 'columnheader' : undefined,
             'aria-sort': sortable ? (_props_sortDirection = props.sortDirection) !== null && _props_sortDirection !== void 0 ? _props_sortDirection : 'none' : undefined,
             ...props
+        }), {
+            elementType: rootComponent
         }),
-        aside: resolveShorthand(props.aside),
-        sortIcon: resolveShorthand(props.sortIcon, {
-            required: !!props.sortDirection,
+        aside: slot.optional(props.aside, {
+            elementType: 'span'
+        }),
+        sortIcon: slot.optional(props.sortIcon, {
+            renderByDefault: !!props.sortDirection,
             defaultProps: {
                 children: props.sortDirection ? sortIcons[props.sortDirection] : undefined
-            }
+            },
+            elementType: 'span'
         }),
-        button: useARIAButtonShorthand(props.button, {
+        button: slot.always(useARIAButtonShorthand(props.button, {
             required: true,
             defaultProps: {
                 as: 'div',
@@ -54,6 +59,8 @@ const sortIcons = {
                     tabIndex: undefined
                 }
             }
+        }), {
+            elementType: 'div'
         }),
         sortable,
         noNativeElements

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

@@ -1 +1 @@
-{"version":3,"sources":["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 { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\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\n  return {\n    components: {\n      root: rootComponent,\n      button: 'div',\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        as: 'div',\n        ...(!sortable && {\n          role: 'presentation',\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useARIAButtonShorthand","useTableContext","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","rootComponent","as","components","root","button","sortIcon","aside","role","undefined","sortDirection","required","defaultProps","children","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AACnG,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,wBAAwB;AACzE,SAASC,sBAAsB,QAAQ,uBAAuB;AAE9D,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,YAAY;IAChBC,yBAAW,oBAACL;QAAeM,UAAU;;IACrCC,0BAAY,oBAACN;QAAiBK,UAAU;;AAC1C;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,iBAAgB,EAAEC,SAAQ,EAAE,GAAGT;QAEjBM;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAgB,AAAD,IAAI,QAAQ,IAAI;QAYrCF;IAV5B,OAAO;QACLM,YAAY;YACVC,MAAMH;YACNI,QAAQ;YACRC,UAAU;YACVC,OAAO;QACT;QACAH,MAAMpB,sBAAsBiB,eAAe;YACzCH,KAAKZ,cAAcY,KAAKX;YACxBqB,MAAMP,kBAAkB,QAAQ,iBAAiBQ,SAAS;YAC1D,aAAaT,WAAWH,CAAAA,uBAAAA,MAAMa,aAAa,cAAnBb,kCAAAA,uBAAuB,MAAM,GAAGY,SAAS;YACjE,GAAGZ,KAAK;QACV;QACAU,OAAOtB,iBAAiBY,MAAMU,KAAK;QACnCD,UAAUrB,iBAAiBY,MAAMS,QAAQ,EAAE;YACzCK,UAAU,CAAC,CAACd,MAAMa,aAAa;YAC/BE,cAAc;gBAAEC,UAAUhB,MAAMa,aAAa,GAAGlB,SAAS,CAACK,MAAMa,aAAa,CAAC,GAAGD,SAAS;YAAC;QAC7F;QACAJ,QAAQf,uBAAuBO,MAAMQ,MAAM,EAAE;YAC3CM,UAAU,IAAI;YACdC,cAAc;gBACZV,IAAI;gBACJ,GAAI,CAACF,YAAY;oBACfQ,MAAM;oBACNM,UAAUL;gBACZ,CAAC;YACH;QACF;QACAT;QACAD;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\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\n  return {\n    components: {\n      root: rootComponent,\n      button: 'div',\n      sortIcon: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      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      { elementType: rootComponent },\n    ),\n    aside: slot.optional(props.aside, { elementType: 'span' }),\n    sortIcon: slot.optional(props.sortIcon, {\n      renderByDefault: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n      elementType: 'span',\n    }),\n    button: slot.always(\n      useARIAButtonShorthand(props.button, {\n        required: true,\n        defaultProps: {\n          as: 'div',\n          ...(!sortable && {\n            role: 'presentation',\n            tabIndex: undefined,\n          }),\n        },\n      }),\n      { elementType: 'div' },\n    ),\n    sortable,\n    noNativeElements,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","slot","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useARIAButtonShorthand","useTableContext","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","rootComponent","as","components","root","button","sortIcon","aside","always","role","undefined","sortDirection","elementType","optional","renderByDefault","defaultProps","children","required","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACvF,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,wBAAwB;AACzE,SAASC,sBAAsB,QAAQ,uBAAuB;AAE9D,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,YAAY;IAChBC,yBAAW,oBAACL;QAAeM,UAAU;;IACrCC,0BAAY,oBAACN;QAAiBK,UAAU;;AAC1C;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,iBAAgB,EAAEC,SAAQ,EAAE,GAAGT;QAEjBM;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAgB,AAAD,IAAI,QAAQ,IAAI;QAanCF;IAX9B,OAAO;QACLM,YAAY;YACVC,MAAMH;YACNI,QAAQ;YACRC,UAAU;YACVC,OAAO;QACT;QACAH,MAAMlB,KAAKsB,MAAM,CACfxB,sBAAsBiB,eAAe;YACnCH,KAAKb,cAAca,KAAKX;YACxBsB,MAAMR,kBAAkB,QAAQ,iBAAiBS,SAAS;YAC1D,aAAaV,WAAWH,CAAAA,uBAAAA,MAAMc,aAAa,cAAnBd,kCAAAA,uBAAuB,MAAM,GAAGa,SAAS;YACjE,GAAGb,KAAK;QACV,IACA;YAAEe,aAAaX;QAAc;QAE/BM,OAAOrB,KAAK2B,QAAQ,CAAChB,MAAMU,KAAK,EAAE;YAAEK,aAAa;QAAO;QACxDN,UAAUpB,KAAK2B,QAAQ,CAAChB,MAAMS,QAAQ,EAAE;YACtCQ,iBAAiB,CAAC,CAACjB,MAAMc,aAAa;YACtCI,cAAc;gBAAEC,UAAUnB,MAAMc,aAAa,GAAGnB,SAAS,CAACK,MAAMc,aAAa,CAAC,GAAGD,SAAS;YAAC;YAC3FE,aAAa;QACf;QACAP,QAAQnB,KAAKsB,MAAM,CACjBlB,uBAAuBO,MAAMQ,MAAM,EAAE;YACnCY,UAAU,IAAI;YACdF,cAAc;gBACZb,IAAI;gBACJ,GAAI,CAACF,YAAY;oBACfS,MAAM;oBACNS,UAAUR;gBACZ,CAAC;YACH;QACF,IACA;YAAEE,aAAa;QAAM;QAEvBZ;QACAD;IACF;AACF,EAAE"}

package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.js

@@ -25,7 +25,7 @@ const useFlexLayoutStyles = /*#__PURE__*/__styles({
     Bf4jedk: "f10tiqix"
   }
 }, {
-  d: [".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;}", ".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;}", ".f10tiqix{min-width:0px;}"]
+  d: [".f22iagw{display:flex;}", ".fqerorx{flex-grow:1;}", ".f1neuvcm{flex-shrink:1;}", ".fkjuxzh{flex-basis:0px;}", ".f10tiqix{min-width:0px;}"]
 });
 /**
  * Styles for the root slot
@@ -95,7 +95,7 @@ const useStyles = /*#__PURE__*/__styles({
   },
   resizeHandle: {}
 }, {
-  d: [".figsok6{font-weight:var(--fontWeightRegular);}", ".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);}"],
+  d: [".figsok6{font-weight:var(--fontWeightRegular);}", ".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:flex;}", ".fqerorx{flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{align-items:center;}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{flex-shrink:1;}", ".fkjuxzh{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);}"]
 });

package/lib/components/TableResizeHandle/renderTableResizeHandle.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableResizeHandle
  */ export const renderTableResizeHandle_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderTableResizeHandle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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 } = getSlotsNext<TableResizeHandleSlots>(state);\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderTableResizeHandle_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAqCE;IAClE,qBAAO,AAXT,cAWUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderTableResizeHandle.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } 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  assertSlots<TableResizeHandleSlots>(state);\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderTableResizeHandle_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC,QAAkC;IACjFF,YAAoCE;IACpC,qBAAO,AAXT,cAWUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TableResizeHandle/useTableResizeHandle.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';
+import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render TableResizeHandle.
  *
@@ -18,10 +18,12 @@ import { getNativeElementProps, useEventCallback } from '@fluentui/react-utiliti
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props,
             onClick
+        }), {
+            elementType: 'div'
         })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["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"],"names":["React","getNativeElementProps","useEventCallback","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAMC,UAAUJ,iBAAiB,CAACK,QAA4C;YAC5EH;QAAAA,CAAAA,iBAAAA,MAAME,OAAO,cAAbF,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBG;QAChBA,MAAMC,eAAe;IACvB;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,sBAAsB,OAAO;YACjCI;YACA,GAAGD,KAAK;YACRE;QACF;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableResizeHandle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback, slot } 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: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getNativeElementProps","useEventCallback","slot","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG1F;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,MAC2B;IAC3B,MAAMC,UAAUL,iBAAiB,CAACM,QAA4C;YAC5EH;QAAAA,CAAAA,iBAAAA,MAAME,OAAO,cAAbF,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBG;QAChBA,MAAMC,eAAe;IACvB;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfX,sBAAsB,OAAO;YAC3BK;YACA,GAAGD,KAAK;YACRE;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/TableRow/renderTableRow.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableRow
  */ export const renderTableRow_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null);
 };

package/lib/components/TableRow/renderTableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTableRow.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n  const { slots, slotProps } = getSlotsNext<TableRowSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderTableRow_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA4BE;IAEzD,qBAAO,AAZT,cAYUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}
+{"version":3,"sources":["renderTableRow.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState) => {\n  assertSlots<TableRowSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["createElement","assertSlots","renderTableRow_unstable","state","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/DF,YAA2BE;IAE3B,qBAAO,AAZT,cAYUA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TableRow/useTableRow.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';
 import { useTableContext } from '../../contexts/tableContext';
 import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
@@ -23,10 +23,12 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
         components: {
             root: rootComponent
         },
-        root: getNativeElementProps(rootComponent, {
+        root: slot.always(getNativeElementProps(rootComponent, {
             ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),
             role: rootComponent === 'div' ? 'row' : undefined,
             ...props
+        }), {
+            elementType: rootComponent
         }),
         size,
         noNativeElements,

package/lib/components/TableRow/useTableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),\n      role: rootComponent === 'div' ? 'row' : undefined,\n      ...props,\n    }),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","role","undefined","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AACjF,SAASC,eAAe,EAAEC,cAAc,QAAQ,0BAA0B;AAE1E,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC,MAA+C;IACxG,MAAM,EAAEC,iBAAgB,EAAEC,KAAI,EAAE,GAAGN;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAgB,AAAD,IAAI,QAAQ,IAAI;IACjE,MAAMI,kBAAkBX;IACxB,MAAMY,iBAAiBX;IACvB,MAAMY,cAAcV;QAaNE;IAXd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMjB,sBAAsBW,eAAe;YACzCH,KAAKP,cAAcO,KAAKK,iBAAiBC;YACzCI,MAAMP,kBAAkB,QAAQ,QAAQQ,SAAS;YACjD,GAAGZ,KAAK;QACV;QACAG;QACAD;QACAW,YAAYb,CAAAA,oBAAAA,MAAMa,UAAU,cAAhBb,+BAAAA,oBAAoB,MAAM;QACtCQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getNativeElementProps(rootComponent, {\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),\n        role: rootComponent === 'div' ? 'row' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACvF,SAASC,eAAe,EAAEC,cAAc,QAAQ,0BAA0B;AAE1E,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC,MAA+C;IACxG,MAAM,EAAEC,iBAAgB,EAAEC,KAAI,EAAE,GAAGN;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAgB,AAAD,IAAI,QAAQ,IAAI;IACjE,MAAMI,kBAAkBX;IACxB,MAAMY,iBAAiBX;IACvB,MAAMY,cAAcV;QAgBNE;IAdd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,KAAKiB,MAAM,CACfnB,sBAAsBY,eAAe;YACnCH,KAAKR,cAAcQ,KAAKK,iBAAiBC;YACzCK,MAAMR,kBAAkB,QAAQ,QAAQS,SAAS;YACjD,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAU,cAAhBf,+BAAAA,oBAAoB,MAAM;QACtCQ;IACF;AACF,EAAE"}

package/lib/components/TableRow/useTableRowStyles.styles.js

@@ -20,7 +20,7 @@ const useFlexLayoutStyles = /*#__PURE__*/__styles({
     Bt984gj: "f122n59"
   }
 }, {
-  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;}"]
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}"]
 });
 /**
  * Styles for the root slot
@@ -130,66 +130,20 @@ const useStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
-    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
-    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
-    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1e0wld5:focus-visible{outline-offset:-4px;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fb6zhgp{border-top-color:transparent;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
-    m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fd94n53{box-sizing:border-box;}}", {

package/lib/components/TableRow/useTableRowStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","noAppearanceFocusWithin","Bm5rygw","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","medium","Bn0qgzm","oivjwe","B9xav0g","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","gwxt9v","v3aym","Bc736ss","Bk6ri7n","Bk5ld8o","c4eypz","felo30","Eshu5l","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Beo2b4z","h6lo6r","Btyw6ap","w1pwid","Brwvgy3","yadkgm","neutral","none","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n    root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        boxSizing: 'border-box',\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium)\n        }, {\n            selector: 'focus'\n        })\n    },\n    // When focus is within the row the background colour\n    // should be the same as hover, except when there is a brand\n    // or neutral appearance applied on the row\n    noAppearanceFocusWithin: {\n        ...createCustomFocusIndicatorStyle({\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        }, {\n            selector: 'focus-within'\n        })\n    },\n    rootInteractive: {\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        },\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        }\n    },\n    medium: {\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n    },\n    small: {\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n    },\n    'extra-small': {\n        fontSize: tokens.fontSizeBase200\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        ':active': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedSelected\n        },\n        '@media(forced-colors: active)': {\n            ...shorthands.border('2px', 'solid', 'transparent'),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            boxSizing: 'border-box',\n            ':focus-visible': {\n                outlineOffset: '-4px'\n            }\n        }\n    },\n    neutral: {\n        '@media(forced-colors: active)': {\n            ...shorthands.border('2px', 'solid', 'transparent'),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            boxSizing: 'border-box',\n            ':focus-visible': {\n                outlineOffset: '-4px'\n            }\n        },\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground1Hover,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        },\n        ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n    },\n    none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.appearance === 'none' && !state.isHeaderRow && styles.noAppearanceFocusWithin, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,0BAA0B,QAAQ,sDAAsD;AACjG,SAASC,4BAA4B,QAAQ,0DAA0D;AACvG,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,iBAAiB,GAAG,cAAc;AAC/C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAEF;AACV,CAAC;AACD,MAAMG,oBAAoB,gBAAGV,QAAA;EAAAS,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAS,IAAA;IAAAE,MAAA;IAAAG,OAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAK3B,CAAC;AACF;AACA;AACA;AAAI,MAAMG,SAAS,gBAAGf,QAAA;EAAAS,IAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,uBAAA;IAAAC,OAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAH,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAE,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAN,OAAA;IAAAO,MAAA;IAAAlB,MAAA;IAAAmB,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAlB,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAArB,MAAA;IAAA7B,MAAA;IAAAkB,MAAA;IAAAJ,MAAA;IAAAgB,MAAA;IAAAC,MAAA;IAAAN,OAAA;IAAAO,MAAA;EAAA;EAAAoB,IAAA;AAAA;EAAAxD,CAAA;EAAAyD,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAiGrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,GAAG3D,SAAS,CAAC,CAAC;EAC1B,MAAM4D,YAAY,GAAG;IACjBC,KAAK,EAAElE,oBAAoB,CAAC,CAAC;IAC7BmE,IAAI,EAAEhE,mBAAmB,CAAC;EAC9B,CAAC;EACD4D,KAAK,CAAChE,IAAI,CAACqE,SAAS,GAAG7E,YAAY,CAACO,kBAAkB,CAACC,IAAI,EAAEiE,MAAM,CAACjE,IAAI,EAAE,CAACgE,KAAK,CAACM,WAAW,IAAIL,MAAM,CAAC7C,eAAe,EAAE6C,MAAM,CAACD,KAAK,CAACO,IAAI,CAAC,EAAEP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACpE,IAAI,GAAGkE,YAAY,CAACC,KAAK,CAACnE,IAAI,EAAEiE,MAAM,CAACD,KAAK,CAACS,UAAU,CAAC,EAAET,KAAK,CAACS,UAAU,KAAK,MAAM,IAAI,CAACT,KAAK,CAACM,WAAW,IAAIL,MAAM,CAAC/C,uBAAuB,EAAE8C,KAAK,CAAChE,IAAI,CAACqE,SAAS,CAAC;EAC3V,OAAOL,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","noAppearanceFocusWithin","Bm5rygw","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","medium","Bn0qgzm","oivjwe","B9xav0g","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","gwxt9v","v3aym","Bc736ss","Bk6ri7n","Bk5ld8o","c4eypz","felo30","Eshu5l","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Beo2b4z","h6lo6r","Btyw6ap","w1pwid","Brwvgy3","yadkgm","neutral","none","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n    root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        boxSizing: 'border-box',\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium)\n        }, {\n            selector: 'focus'\n        })\n    },\n    // When focus is within the row the background colour\n    // should be the same as hover, except when there is a brand\n    // or neutral appearance applied on the row\n    noAppearanceFocusWithin: {\n        ...createCustomFocusIndicatorStyle({\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        }, {\n            selector: 'focus-within'\n        })\n    },\n    rootInteractive: {\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        },\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        }\n    },\n    medium: {\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n    },\n    small: {\n        ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n    },\n    'extra-small': {\n        fontSize: tokens.fontSizeBase200\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        ':active': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedSelected\n        },\n        '@media(forced-colors: active)': {\n            ...shorthands.border('2px', 'solid', 'transparent'),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            boxSizing: 'border-box',\n            ':focus-visible': {\n                outlineOffset: '-4px'\n            }\n        }\n    },\n    neutral: {\n        '@media(forced-colors: active)': {\n            ...shorthands.border('2px', 'solid', 'transparent'),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            boxSizing: 'border-box',\n            ':focus-visible': {\n                outlineOffset: '-4px'\n            }\n        },\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground1Hover,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        },\n        ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n    },\n    none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.appearance === 'none' && !state.isHeaderRow && styles.noAppearanceFocusWithin, state.root.className);\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/TableSelectionCell/renderTableSelectionCell.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableSelectionCell
  */ export const renderTableSelectionCell_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, state.type === 'checkbox' && slots.checkboxIndicator && /*#__PURE__*/ createElement(slots.checkboxIndicator, slotProps.checkboxIndicator), state.type === 'radio' && slots.radioIndicator && /*#__PURE__*/ createElement(slots.radioIndicator, slotProps.radioIndicator));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.type === 'checkbox' && state.checkboxIndicator && /*#__PURE__*/ createElement(state.checkboxIndicator, null), state.type === 'radio' && state.radioIndicator && /*#__PURE__*/ createElement(state.radioIndicator, null));
 };

package/lib/components/TableSelectionCell/renderTableSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n  const { slots, slotProps } = getSlotsNext<TableSelectionCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.type === 'checkbox' && slots.checkboxIndicator && (\n        <slots.checkboxIndicator {...slotProps.checkboxIndicator} />\n      )}\n      {state.type === 'radio' && slots.radioIndicator && <slots.radioIndicator {...slotProps.radioIndicator} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderTableSelectionCell_unstable","state","slots","slotProps","root","type","checkboxIndicator","radioIndicator"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC,QAAmC;IACnF,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAsCE;IAEnE,qBACE,AAbJ,cAaKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BH,MAAMI,IAAI,KAAK,cAAcH,MAAMI,iBAAiB,kBACnD,AAfR,cAeSJ,MAAMI,iBAAiB,EAAKH,UAAUG,iBAAiB,GAEzDL,MAAMI,IAAI,KAAK,WAAWH,MAAMK,cAAc,kBAAI,AAjBzD,cAiB0DL,MAAMK,cAAc,EAAKJ,UAAUI,cAAc;AAG3G,EAAE"}
+{"version":3,"sources":["renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell.types';\n\n/**\n * Render the final JSX of TableSelectionCell\n */\nexport const renderTableSelectionCell_unstable = (state: TableSelectionCellState) => {\n  assertSlots<TableSelectionCellSlots>(state);\n\n  return (\n    <state.root>\n      {state.type === 'checkbox' && state.checkboxIndicator && <state.checkboxIndicator />}\n\n      {state.type === 'radio' && state.radioIndicator && <state.radioIndicator />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderTableSelectionCell_unstable","state","root","type","checkboxIndicator","radioIndicator"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC,QAAmC;IACnFF,YAAqCE;IAErC,qBACE,AAbJ,cAaKA,MAAMC,IAAI,QACRD,MAAME,IAAI,KAAK,cAAcF,MAAMG,iBAAiB,kBAAI,AAd/D,cAcgEH,MAAMG,iBAAiB,SAEhFH,MAAME,IAAI,KAAK,WAAWF,MAAMI,cAAc,kBAAI,AAhBzD,cAgB0DJ,MAAMI,cAAc;AAG9E,EAAE"}

package/lib/components/TableSelectionCell/useTableSelectionCell.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { resolveShorthand, useId } from '@fluentui/react-utilities';
+import { useId, slot } from '@fluentui/react-utilities';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';
 import { useTableCell_unstable } from '../TableCell/useTableCell';
@@ -23,20 +23,22 @@ import { useTableContext } from '../../contexts/tableContext';
             checkboxIndicator: Checkbox,
             radioIndicator: Radio
         },
-        checkboxIndicator: resolveShorthand(props.checkboxIndicator, {
-            required: type === 'checkbox',
+        checkboxIndicator: slot.optional(props.checkboxIndicator, {
+            renderByDefault: type === 'checkbox',
             defaultProps: {
                 checked: props.checked
-            }
+            },
+            elementType: Checkbox
         }),
-        radioIndicator: resolveShorthand(props.radioIndicator, {
-            required: type === 'radio',
+        radioIndicator: slot.optional(props.radioIndicator, {
+            renderByDefault: type === 'radio',
             defaultProps: {
                 checked: !!checked,
                 input: {
                     name: useId('table-selection-radio')
                 }
-            }
+            },
+            elementType: Radio
         }),
         type,
         checked,

package/lib/components/TableSelectionCell/useTableSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: resolveShorthand(props.checkboxIndicator, {\n      required: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n    }),\n    radioIndicator: resolveShorthand(props.radioIndicator, {\n      required: type === 'radio',\n      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden,\n  };\n};\n"],"names":["React","resolveShorthand","useId","Checkbox","Radio","useTableCell_unstable","useTableContext","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","components","checkboxIndicator","radioIndicator","required","defaultProps","input","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AACpE,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC,MAC4B;IAC5B,MAAMC,iBAAiBL,sBAAsBG,OAAOC;IACpD,MAAM,EAAEE,iBAAgB,EAAE,GAAGL;IAC7B,MAAM,EAAEM,MAAO,WAAU,EAAEC,SAAU,KAAK,CAAA,EAAEC,QAAS,KAAK,CAAA,EAAEC,QAAS,KAAK,CAAA,EAAE,GAAGP;IAE/E,OAAO;QACL,GAAGE,cAAc;QACjBM,YAAY;YACV,GAAGN,eAAeM,UAAU;YAC5BC,mBAAmBd;YACnBe,gBAAgBd;QAClB;QACAa,mBAAmBhB,iBAAiBO,MAAMS,iBAAiB,EAAE;YAC3DE,UAAUP,SAAS;YACnBQ,cAAc;gBAAEP,SAASL,MAAMK,OAAO;YAAC;QACzC;QACAK,gBAAgBjB,iBAAiBO,MAAMU,cAAc,EAAE;YACrDC,UAAUP,SAAS;YACnBQ,cAAc;gBAAEP,SAAS,CAAC,CAACA;gBAASQ,OAAO;oBAAEC,MAAMpB,MAAM;gBAAyB;YAAE;QACtF;QACAU;QACAC;QACAF;QACAG;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useTableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport { Checkbox } from '@fluentui/react-checkbox';\nimport { Radio } from '@fluentui/react-radio';\nimport type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableSelectionCell.\n *\n * The returned state can be modified with hooks such as useTableSelectionCellStyles_unstable,\n * before being passed to renderTableSelectionCell_unstable.\n *\n * @param props - props from this instance of TableSelectionCell\n * @param ref - reference to root HTMLElement of TableSelectionCell\n */\nexport const useTableSelectionCell_unstable = (\n  props: TableSelectionCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableSelectionCellState => {\n  const tableCellState = useTableCell_unstable(props, ref);\n  const { noNativeElements } = useTableContext();\n  const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;\n\n  return {\n    ...tableCellState,\n    components: {\n      ...tableCellState.components,\n      checkboxIndicator: Checkbox,\n      radioIndicator: Radio,\n    },\n    checkboxIndicator: slot.optional(props.checkboxIndicator, {\n      renderByDefault: type === 'checkbox',\n      defaultProps: { checked: props.checked },\n      elementType: Checkbox,\n    }),\n    radioIndicator: slot.optional(props.radioIndicator, {\n      renderByDefault: type === 'radio',\n      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },\n      elementType: Radio,\n    }),\n    type,\n    checked,\n    noNativeElements,\n    subtle,\n    hidden,\n  };\n};\n"],"names":["React","useId","slot","Checkbox","Radio","useTableCell_unstable","useTableContext","useTableSelectionCell_unstable","props","ref","tableCellState","noNativeElements","type","checked","subtle","hidden","components","checkboxIndicator","radioIndicator","optional","renderByDefault","defaultProps","elementType","input","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,eAAe,QAAQ,8BAA8B;AAE9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC,MAC4B;IAC5B,MAAMC,iBAAiBL,sBAAsBG,OAAOC;IACpD,MAAM,EAAEE,iBAAgB,EAAE,GAAGL;IAC7B,MAAM,EAAEM,MAAO,WAAU,EAAEC,SAAU,KAAK,CAAA,EAAEC,QAAS,KAAK,CAAA,EAAEC,QAAS,KAAK,CAAA,EAAE,GAAGP;IAE/E,OAAO;QACL,GAAGE,cAAc;QACjBM,YAAY;YACV,GAAGN,eAAeM,UAAU;YAC5BC,mBAAmBd;YACnBe,gBAAgBd;QAClB;QACAa,mBAAmBf,KAAKiB,QAAQ,CAACX,MAAMS,iBAAiB,EAAE;YACxDG,iBAAiBR,SAAS;YAC1BS,cAAc;gBAAER,SAASL,MAAMK,OAAO;YAAC;YACvCS,aAAanB;QACf;QACAe,gBAAgBhB,KAAKiB,QAAQ,CAACX,MAAMU,cAAc,EAAE;YAClDE,iBAAiBR,SAAS;YAC1BS,cAAc;gBAAER,SAAS,CAAC,CAACA;gBAASU,OAAO;oBAAEC,MAAMvB,MAAM;gBAAyB;YAAE;YACpFqB,aAAalB;QACf;QACAQ;QACAC;QACAF;QACAG;QACAC;IACF;AACF,EAAE"}