@fluentui/react-table 9.8.0 → 9.8.2

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

@@ -1 +1 @@
-{"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"}
+{"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;IAC/D,MAAM,EAAEC,gBAAgB,EAAE,GAAGJ;QAEPE;IAAtB,MAAMG,gBAAgBH,CAAAA,CAAAA,YAAAA,MAAMI,EAAE,cAARJ,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAC7D,OAAO;QACLG,YAAY;YACVC,MAAMH;QACR;QACAG,MAAMT,KAAKU,MAAM,CACfX,sBAAsBO,eAAe;YACnCF;YACAO,MAAML,kBAAkB,QAAQ,aAAaM;YAC7C,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaP;QAAc;QAE/BD;IACF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableHeaderCell component\n */\nexport const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeaderCell_unstable(props, ref);\n\n  useTableHeaderCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableHeaderCellStyles_unstable')(state);\n\n  return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"],"names":["React","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","useTableHeaderCellStyles_unstable","useCustomStyleHook_unstable","TableHeaderCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAElCL,4BAA4B,qCAAqCK;IAEjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"version":3,"sources":["TableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableHeaderCell component\n */\nexport const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeaderCell_unstable(props, ref);\n\n  useTableHeaderCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableHeaderCellStyles_unstable')(state);\n\n  return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"],"names":["React","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","useTableHeaderCellStyles_unstable","useCustomStyleHook_unstable","TableHeaderCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAElCL,4BAA4B,qCAAqCK;IAEjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/TableHeaderCell/renderTableHeaderCell.js

@@ -1,8 +1,18 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableHeaderCell
  */ export const renderTableHeaderCell_unstable = (state)=>{
     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));
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            /*#__PURE__*/ _jsxs(state.button, {
+                children: [
+                    state.root.children,
+                    state.sortIcon && /*#__PURE__*/ _jsx(state.sortIcon, {})
+                ]
+            }),
+            state.aside && /*#__PURE__*/ _jsx(state.aside, {})
+        ]
+    });
 };

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 { 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"}
+{"version":3,"sources":["renderTableHeaderCell.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @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":["assertSlots","renderTableHeaderCell_unstable","state","root","button","children","sortIcon","aside"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBACE,MAACA,MAAMC,IAAI;;0BACT,MAACD,MAAME,MAAM;;oBACVF,MAAMC,IAAI,CAACE,QAAQ;oBACnBH,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ;;;YAEnCJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;;;AAGlC,EAAE"}

package/lib/components/TableHeaderCell/useTableHeaderCell.js

@@ -21,7 +21,7 @@ const sortIcons = {
  * @param props - props from this instance of TableHeaderCell
  * @param ref - reference to root HTMLElement of TableHeaderCell
  */ export const useTableHeaderCell_unstable = (props, ref)=>{
-    const { noNativeElements , sortable  } = useTableContext();
+    const { noNativeElements, sortable } = useTableContext();
     var _props_as;
     const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'th';
     var _props_sortDirection;

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

@@ -1 +1 @@
-{"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"}
+{"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;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,QAAQ,EAAE,GAAGT;QAEjBM;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;QAa/BF;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;YACjD,aAAaV,WAAWH,CAAAA,uBAAAA,MAAMc,aAAa,cAAnBd,kCAAAA,uBAAuB,SAASa;YACxD,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;YAAU;YAC3FE,aAAa;QACf;QACAP,QAAQnB,KAAKsB,MAAM,CACjBlB,uBAAuBO,MAAMQ,MAAM,EAAE;YACnCY,UAAU;YACVF,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/TableResizeHandle/TableResizeHandle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableResizeHandle_unstable } from './useTableResizeHandle';\nimport { renderTableResizeHandle_unstable } from './renderTableResizeHandle';\nimport { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles.styles';\nimport type { TableResizeHandleProps } from './TableResizeHandle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableResizeHandle component - TODO: add more docs\n */\nexport const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps> = React.forwardRef((props, ref) => {\n  const state = useTableResizeHandle_unstable(props, ref);\n\n  useTableResizeHandleStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableResizeHandleStyles_unstable')(state);\n\n  return renderTableResizeHandle_unstable(state);\n});\n\nTableResizeHandle.displayName = 'TableResizeHandle';\n"],"names":["React","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","useTableResizeHandleStyles_unstable","useCustomStyleHook_unstable","TableResizeHandle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC7G,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IAEpCL,4BAA4B,uCAAuCK;IAEnE,OAAOP,iCAAiCO;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}
+{"version":3,"sources":["TableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableResizeHandle_unstable } from './useTableResizeHandle';\nimport { renderTableResizeHandle_unstable } from './renderTableResizeHandle';\nimport { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles.styles';\nimport type { TableResizeHandleProps } from './TableResizeHandle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableResizeHandle component - TODO: add more docs\n */\nexport const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps> = React.forwardRef((props, ref) => {\n  const state = useTableResizeHandle_unstable(props, ref);\n\n  useTableResizeHandleStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableResizeHandleStyles_unstable')(state);\n\n  return renderTableResizeHandle_unstable(state);\n});\n\nTableResizeHandle.displayName = 'TableResizeHandle';\n"],"names":["React","useTableResizeHandle_unstable","renderTableResizeHandle_unstable","useTableResizeHandleStyles_unstable","useCustomStyleHook_unstable","TableResizeHandle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IAEpCL,4BAA4B,uCAAuCK;IAEnE,OAAOP,iCAAiCO;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

package/lib/components/TableResizeHandle/renderTableResizeHandle.js

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

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 { 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"}
+{"version":3,"sources":["renderTableResizeHandle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @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":["assertSlots","renderTableResizeHandle_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IACpC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TableResizeHandle/useTableResizeHandle.js

@@ -10,8 +10,8 @@ import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-u
  * @param ref - reference to root HTMLElement of TableResizeHandle
  */ export const useTableResizeHandle_unstable = (props, ref)=>{
     const onClick = useEventCallback((event)=>{
-        var _props_onClick;
-        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+        var _props_onClick, _props;
+        (_props_onClick = (_props = props).onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(_props, event);
         event.stopPropagation();
     });
     return {

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

@@ -1 +1 @@
-{"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"}
+{"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;IAEA,MAAMC,UAAUL,iBAAiB,CAACM;YAChCH,gBAAAA;SAAAA,iBAAAA,CAAAA,SAAAA,OAAME,OAAO,cAAbF,qCAAAA,oBAAAA,QAAgBG;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/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles.styles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableRow component\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n  const state = useTableRow_unstable(props, ref);\n\n  useTableRowStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableRowStyles_unstable')(state);\n\n  return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"names":["React","useTableRow_unstable","renderTableRow_unstable","useTableRowStyles_unstable","useCustomStyleHook_unstable","TableRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
+{"version":3,"sources":["TableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles.styles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableRow component\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n  const state = useTableRow_unstable(props, ref);\n\n  useTableRowStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableRowStyles_unstable')(state);\n\n  return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"names":["React","useTableRow_unstable","renderTableRow_unstable","useTableRowStyles_unstable","useCustomStyleHook_unstable","TableRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

package/lib/components/TableRow/renderTableRow.js

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

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 { 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"}
+{"version":3,"sources":["renderTableRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @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":["assertSlots","renderTableRow_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TableRow/useTableRow.js

@@ -12,7 +12,7 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
  * @param props - props from this instance of TableRow
  * @param ref - reference to root HTMLElement of TableRow
  */ export const useTableRow_unstable = (props, ref)=>{
-    const { noNativeElements , size  } = useTableContext();
+    const { noNativeElements, size } = useTableContext();
     var _props_as;
     const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'tr';
     const focusVisibleRef = useFocusVisible();

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

@@ -1 +1 @@
-{"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"}
+{"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;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGN;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAC7D,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;YACxC,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAU,cAAhBf,+BAAAA,oBAAoB;QAChCQ;IACF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["TableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles.styles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableSelectionCell component\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableSelectionCell_unstable(props, ref);\n\n  useTableSelectionCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableSelectionCellStyles_unstable')(state);\n\n  return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"],"names":["React","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","useTableSelectionCellStyles_unstable","useCustomStyleHook_unstable","TableSelectionCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,mCAAmEL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC/G,MAAMC,QAAQR,+BAA+BM,OAAOC;IAEpDL,qCAAqCM;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}
+{"version":3,"sources":["TableSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableSelectionCell_unstable } from './useTableSelectionCell';\nimport { renderTableSelectionCell_unstable } from './renderTableSelectionCell';\nimport { useTableSelectionCellStyles_unstable } from './useTableSelectionCellStyles.styles';\nimport type { TableSelectionCellProps } from './TableSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableSelectionCell component\n */\nexport const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableSelectionCell_unstable(props, ref);\n\n  useTableSelectionCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableSelectionCellStyles_unstable')(state);\n\n  return renderTableSelectionCell_unstable(state);\n});\n\nTableSelectionCell.displayName = 'TableSelectionCell';\n"],"names":["React","useTableSelectionCell_unstable","renderTableSelectionCell_unstable","useTableSelectionCellStyles_unstable","useCustomStyleHook_unstable","TableSelectionCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,oCAAoC,QAAQ,uCAAuC;AAG5F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,mCAAmEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvG,MAAMC,QAAQR,+BAA+BM,OAAOC;IAEpDL,qCAAqCM;IAErCL,4BAA4B,wCAAwCK;IAEpE,OAAOP,kCAAkCO;AAC3C,GAAG;AAEHJ,mBAAmBK,WAAW,GAAG"}

package/lib/components/TableSelectionCell/renderTableSelectionCell.js

@@ -1,8 +1,13 @@
-/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of TableSelectionCell
  */ export const renderTableSelectionCell_unstable = (state)=>{
     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));
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.type === 'checkbox' && state.checkboxIndicator && /*#__PURE__*/ _jsx(state.checkboxIndicator, {}),
+            state.type === 'radio' && state.radioIndicator && /*#__PURE__*/ _jsx(state.radioIndicator, {})
+        ]
+    });
 };

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 { 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"}
+{"version":3,"sources":["renderTableSelectionCell.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @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":["assertSlots","renderTableSelectionCell_unstable","state","root","type","checkboxIndicator","radioIndicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChDF,YAAqCE;IAErC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,IAAI,KAAK,cAAcF,MAAMG,iBAAiB,kBAAI,KAACH,MAAMG,iBAAiB;YAEhFH,MAAME,IAAI,KAAK,WAAWF,MAAMI,cAAc,kBAAI,KAACJ,MAAMI,cAAc;;;AAG9E,EAAE"}

package/lib/components/TableSelectionCell/useTableSelectionCell.js

@@ -14,8 +14,8 @@ import { useTableContext } from '../../contexts/tableContext';
  * @param ref - reference to root HTMLElement of TableSelectionCell
  */ export const useTableSelectionCell_unstable = (props, ref)=>{
     const tableCellState = useTableCell_unstable(props, ref);
-    const { noNativeElements  } = useTableContext();
-    const { type ='checkbox' , checked =false , subtle =false , hidden =false  } = props;
+    const { noNativeElements } = useTableContext();
+    const { type = 'checkbox', checked = false, subtle = false, hidden = false } = props;
     return {
         ...tableCellState,
         components: {

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

@@ -1 +1 @@
-{"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"}
+{"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;IAEA,MAAMC,iBAAiBL,sBAAsBG,OAAOC;IACpD,MAAM,EAAEE,gBAAgB,EAAE,GAAGL;IAC7B,MAAM,EAAEM,OAAO,UAAU,EAAEC,UAAU,KAAK,EAAEC,SAAS,KAAK,EAAEC,SAAS,KAAK,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"}

package/lib/contexts/columnIdContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["columnIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<TableColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = () => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"names":["React","columnIdContext","createContext","undefined","columnIdContextDefaultValue","useColumnIdContext","useContext","ColumnIdContextProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,kBAAkBD,MAAME,aAAa,CAA4BC;AAEvE,OAAO,MAAMC,8BAA8B,GAAG;IAENJ;AAAxC,OAAO,MAAMK,qBAAqB,IAAML,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,8BAAjBD,+BAAAA,oBAAqCI,2BAA2B,CAAC;AAEzG,OAAO,MAAMG,0BAA0BN,gBAAgBO,QAAQ,CAAC"}
+{"version":3,"sources":["columnIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableColumnId } from '../hooks/';\n\nconst columnIdContext = React.createContext<TableColumnId | undefined>(undefined);\n\nexport const columnIdContextDefaultValue = '';\n\nexport const useColumnIdContext = () => React.useContext(columnIdContext) ?? columnIdContextDefaultValue;\n\nexport const ColumnIdContextProvider = columnIdContext.Provider;\n"],"names":["React","columnIdContext","createContext","undefined","columnIdContextDefaultValue","useColumnIdContext","useContext","ColumnIdContextProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,kBAAkBD,MAAME,aAAa,CAA4BC;AAEvE,OAAO,MAAMC,8BAA8B,GAAG;IAENJ;AAAxC,OAAO,MAAMK,qBAAqB,IAAML,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,8BAAjBD,+BAAAA,oBAAqCI,4BAA4B;AAEzG,OAAO,MAAMG,0BAA0BN,gBAAgBO,QAAQ,CAAC"}

package/lib/contexts/dataGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nconst dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,MAAMC,8BAAoD;IACxD,GAAGH,iBAAiB;IACpBI,iBAAiB,KAAK;IACtBC,gBAAgB,KAAK;IACrBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC;AAEA,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
+{"version":3,"sources":["dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nconst dataGridContextDefaultValue: DataGridContextValue = {\n  ...defaultTableState,\n  subtleSelection: false,\n  selectableRows: false,\n  selectionAppearance: 'brand',\n  focusMode: 'none',\n  compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n  useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,MAAMC,8BAAoD;IACxD,GAAGH,iBAAiB;IACpBI,iBAAiB;IACjBC,gBAAgB;IAChBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC;AAEA,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}

package/lib/contexts/rowIdContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["rowIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableRowId } from '../hooks/';\n\nconst rowIdContext = React.createContext<TableRowId | undefined>(undefined);\n\nexport const tableRowIdContextDefaultValue = '';\n\nexport const useTableRowIdContext = () => React.useContext(rowIdContext) ?? tableRowIdContextDefaultValue;\n\nexport const TableRowIdContextProvider = rowIdContext.Provider;\n"],"names":["React","rowIdContext","createContext","undefined","tableRowIdContextDefaultValue","useTableRowIdContext","useContext","TableRowIdContextProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAyBC;AAEjE,OAAO,MAAMC,gCAAgC,GAAG;IAENJ;AAA1C,OAAO,MAAMK,uBAAuB,IAAML,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,2BAAjBD,+BAAAA,oBAAkCI,6BAA6B,CAAC;AAE1G,OAAO,MAAMG,4BAA4BN,aAAaO,QAAQ,CAAC"}
+{"version":3,"sources":["rowIdContext.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableRowId } from '../hooks/';\n\nconst rowIdContext = React.createContext<TableRowId | undefined>(undefined);\n\nexport const tableRowIdContextDefaultValue = '';\n\nexport const useTableRowIdContext = () => React.useContext(rowIdContext) ?? tableRowIdContextDefaultValue;\n\nexport const TableRowIdContextProvider = rowIdContext.Provider;\n"],"names":["React","rowIdContext","createContext","undefined","tableRowIdContextDefaultValue","useTableRowIdContext","useContext","TableRowIdContextProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAyBC;AAEjE,OAAO,MAAMC,gCAAgC,GAAG;IAENJ;AAA1C,OAAO,MAAMK,uBAAuB,IAAML,CAAAA,oBAAAA,MAAMM,UAAU,CAACL,2BAAjBD,+BAAAA,oBAAkCI,8BAA8B;AAE1G,OAAO,MAAMG,4BAA4BN,aAAaO,QAAQ,CAAC"}

package/lib/contexts/tableContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["tableContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n  size: 'medium',\n  noNativeElements: false,\n  sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = () => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAgCC;AAExE,OAAO,MAAMC,2BAA8C;IACzDC,MAAM;IACNC,kBAAkB,KAAK;IACvBC,UAAU,KAAK;AACjB,EAAE;AAEF,OAAO,MAAMC,uBAAuBP,aAAaQ,QAAQ,CAAC;IACrBT;AAArC,OAAO,MAAMU,kBAAkB,IAAMV,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,2BAAjBD,+BAAAA,oBAAkCI,wBAAwB,CAAC"}
+{"version":3,"sources":["tableContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableContextValue } from '../components/Table/Table.types';\n\nconst tableContext = React.createContext<TableContextValue | undefined>(undefined);\n\nexport const tableContextDefaultValue: TableContextValue = {\n  size: 'medium',\n  noNativeElements: false,\n  sortable: false,\n};\n\nexport const TableContextProvider = tableContext.Provider;\nexport const useTableContext = () => React.useContext(tableContext) ?? tableContextDefaultValue;\n"],"names":["React","tableContext","createContext","undefined","tableContextDefaultValue","size","noNativeElements","sortable","TableContextProvider","Provider","useTableContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,eAAeD,MAAME,aAAa,CAAgCC;AAExE,OAAO,MAAMC,2BAA8C;IACzDC,MAAM;IACNC,kBAAkB;IAClBC,UAAU;AACZ,EAAE;AAEF,OAAO,MAAMC,uBAAuBP,aAAaQ,QAAQ,CAAC;IACrBT;AAArC,OAAO,MAAMU,kBAAkB,IAAMV,CAAAA,oBAAAA,MAAMW,UAAU,CAACV,2BAAjBD,+BAAAA,oBAAkCI,yBAAyB"}

package/lib/hooks/createColumn.js

@@ -18,7 +18,7 @@ const defaultRenderHeaderCell = ()=>{
  * @param options - column definition options
  * @returns - column definition with defaults
  */ export function createTableColumn(options) {
-    const { columnId , renderCell =defaultRenderCell , renderHeaderCell =defaultRenderHeaderCell , compare =defaultCompare  } = options;
+    const { columnId, renderCell = defaultRenderCell, renderHeaderCell = defaultRenderHeaderCell, compare = defaultCompare } = options;
     return {
         columnId,
         renderCell,

package/lib/hooks/createColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createColumn.ts"],"sourcesContent":["import { CreateTableColumnOptions } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>) {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"names":["defaultCompare","defaultRenderCell","process","env","NODE_ENV","console","warn","defaultRenderHeaderCell","createTableColumn","options","columnId","renderCell","renderHeaderCell","compare"],"mappings":"AAEA,MAAMA,iBAAiB,IAAM;AAE7B,MAAMC,oBAAoB,IAAM;IAC9B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf,CAAC;IAED,OAAO,IAAI;AACb;AAEA,MAAMC,0BAA0B,IAAM;IACpC,IAAIL,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf,CAAC;IAED,OAAO,IAAI;AACb;AAEA;;;;CAIC,GACD,OAAO,SAASE,kBAAyBC,OAAwC,EAAE;IACjF,MAAM,EACJC,SAAQ,EACRC,YAAaV,kBAAiB,EAC9BW,kBAAmBL,wBAAuB,EAC1CM,SAAUb,eAAc,EACzB,GAAGS;IAEJ,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF,CAAC"}
+{"version":3,"sources":["createColumn.ts"],"sourcesContent":["import { CreateTableColumnOptions } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n  }\n\n  return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line no-console\n    console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n  }\n\n  return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>) {\n  const {\n    columnId,\n    renderCell = defaultRenderCell,\n    renderHeaderCell = defaultRenderHeaderCell,\n    compare = defaultCompare,\n  } = options;\n\n  return {\n    columnId,\n    renderCell,\n    renderHeaderCell,\n    compare,\n  };\n}\n"],"names":["defaultCompare","defaultRenderCell","process","env","NODE_ENV","console","warn","defaultRenderHeaderCell","createTableColumn","options","columnId","renderCell","renderHeaderCell","compare"],"mappings":"AAEA,MAAMA,iBAAiB,IAAM;AAE7B,MAAMC,oBAAoB;IACxB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;AACT;AAEA,MAAMC,0BAA0B;IAC9B,IAAIL,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sCAAsC;QACtCC,QAAQC,IAAI,CAAC;IACf;IAEA,OAAO;AACT;AAEA;;;;CAIC,GACD,OAAO,SAASE,kBAAyBC,OAAwC;IAC/E,MAAM,EACJC,QAAQ,EACRC,aAAaV,iBAAiB,EAC9BW,mBAAmBL,uBAAuB,EAC1CM,UAAUb,cAAc,EACzB,GAAGS;IAEJ,OAAO;QACLC;QACAC;QACAC;QACAC;IACF;AACF"}

package/lib/hooks/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n  enableKeyboardMode: (\n    columnId: TableColumnId,\n    onChange?: EnableKeyboardModeOnChangeCallback,\n  ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  containerWidthOffset?: number;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SortDirection, TableProps } from '../components/Table/Table.types';\nimport { TableHeaderCellProps } from '../components/TableHeaderCell/TableHeaderCell.types';\nimport { SelectionMode } from '@fluentui/react-utilities';\n\nexport type TableRowId = string | number;\nexport type TableColumnId = string | number;\n\nexport interface SortState {\n  sortColumn: TableColumnId | undefined;\n  sortDirection: SortDirection;\n}\n\nexport interface OnSelectionChangeData {\n  selectedItems: Set<TableRowId>;\n}\n\nexport interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefinition<TItem>> {\n  columnId: TableColumnId;\n}\n\nexport interface TableColumnDefinition<TItem> {\n  columnId: TableColumnId;\n  compare: (a: TItem, b: TItem) => number;\n  renderHeaderCell: () => React.ReactNode;\n  renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends TableRowData<TItem> = TableRowData<TItem>> = (\n  row: TableRowData<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n  /**\n   * Current sort direction\n   */\n  sortDirection: SortDirection;\n  /**\n   * Column id of the currently sorted column\n   */\n  sortColumn: TableColumnId | undefined;\n  /**\n   * Set the sort direction for the specified column\n   */\n  setColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId, sortDirection: SortDirection) => void;\n  /**\n   * Toggles the sort direction for specified column\n   */\n  toggleColumnSort: (event: React.SyntheticEvent, columnId: TableColumnId) => void;\n  /**\n   * Returns the sort direction if a column is sorted,\n   * returns undefined if the column is not sorted\n   */\n  getSortDirection: (columnId: TableColumnId) => SortDirection | undefined;\n\n  /**\n   * Sorts rows and returns a **shallow** copy of original items\n   */\n  sort: <TRowState extends TableRowData<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n  /**\n   * Clears all selected rows\n   */\n  clearRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Selects single row\n   */\n  selectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * De-selects single row\n   */\n  deselectRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Toggle selection of all rows\n   */\n  toggleAllRows: (e: React.SyntheticEvent) => void;\n  /**\n   * Toggle selection of single row\n   */\n  toggleRow: (e: React.SyntheticEvent, rowId: TableRowId) => void;\n  /**\n   * Collection of row ids corresponding to selected rows\n   */\n  selectedRows: Set<TableRowId>;\n  /**\n   * Whether all rows are selected\n   */\n  allRowsSelected: boolean;\n  /**\n   * Whether some rows are selected\n   */\n  someRowsSelected: boolean;\n\n  /**\n   * Checks if a given rowId is selected\n   */\n  isRowSelected: (rowId: TableRowId) => boolean;\n\n  selectionMode: SelectionMode;\n}\n\nexport interface TableRowData<TItem> {\n  /**\n   * User provided data\n   */\n  item: TItem;\n  /**\n   * The row id, defaults to index position in the collection\n   */\n  rowId: TableRowId;\n}\n\nexport interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {\n  /**\n   * The row data for rendering\n   * @param rowEnhancer - Enhances the row with extra user data\n   */\n  getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(\n    rowEnhancer?: RowEnhancer<TItem, TRowState>,\n  ) => TRowState[];\n  /**\n   * State and actions to manage row selection\n   */\n  selection: TableSelectionState;\n  /**\n   * State and actions to manage row sorting\n   */\n  sort: TableSortState<TItem>;\n  /**\n   * Table columns\n   */\n  columns: TableColumnDefinition<TItem>[];\n  /**\n   * State and actions to manage column resizing\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  columnSizing_unstable: TableColumnSizingState;\n  /**\n   * A React.Ref object to be set as a ref for the table.\n   * Used with column resizing.\n   */\n  tableRef: React.Ref<HTMLDivElement>;\n}\n\nexport interface UseTableSortOptions {\n  /**\n   * Used to control sorting\n   */\n  sortState?: SortState;\n  /**\n   * Used in uncontrolled mode to set initial sort column and direction on mount\n   */\n  defaultSortState?: SortState;\n  /**\n   * Called when sort changes\n   */\n  onSortChange?(e: React.SyntheticEvent, state: SortState): void;\n}\n\nexport interface UseTableFeaturesOptions<TItem> {\n  columns: TableColumnDefinition<TItem>[];\n  items: TItem[];\n  getRowId?: (item: TItem) => TableRowId;\n}\n\nexport type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;\n\nexport interface ColumnWidthState {\n  columnId: TableColumnId;\n  width: number;\n  minWidth: number;\n  idealWidth: number;\n  padding: number;\n}\n\nexport type ColumnSizingTableProps = Partial<TableProps>;\nexport type ColumnSizingTableHeaderCellProps = Pick<TableHeaderCellProps, 'style' | 'aside'>;\nexport type ColumnSizingTableCellProps = Pick<TableHeaderCellProps, 'style'>;\n\nexport type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;\n\nexport interface TableColumnSizingState {\n  getOnMouseDown: (columnId: TableColumnId) => (e: React.MouseEvent | React.TouchEvent) => void;\n  setColumnWidth: (columnId: TableColumnId, newSize: number) => void;\n  getColumnWidths: () => ColumnWidthState[];\n  getTableProps: (props?: Partial<TableProps>) => ColumnSizingTableProps;\n  getTableHeaderCellProps: (columnId: TableColumnId) => ColumnSizingTableHeaderCellProps;\n  getTableCellProps: (columnId: TableColumnId) => ColumnSizingTableCellProps;\n  enableKeyboardMode: (\n    columnId: TableColumnId,\n    onChange?: EnableKeyboardModeOnChangeCallback,\n  ) => (e: React.MouseEvent | React.TouchEvent) => void;\n}\n\nexport type ColumnResizeState = {\n  getColumnWidth: (columnId: TableColumnId) => number;\n  setColumnWidth: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  getColumnById: (columnId: TableColumnId) => ColumnWidthState | undefined;\n  getColumns: () => ColumnWidthState[];\n};\n\nexport type TableColumnSizingOptions = Record<\n  TableColumnId,\n  Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & { defaultWidth?: number }\n>;\n\nexport type UseTableColumnSizingParams = {\n  columnSizingOptions?: TableColumnSizingOptions;\n  onColumnResize?: (\n    e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n    data: { columnId: TableColumnId; width: number },\n  ) => void;\n  containerWidthOffset?: number;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/hooks/useKeyboardResizing.js

@@ -8,7 +8,7 @@ const PRECISION_FACTOR = 1 / 4;
 export function useKeyboardResizing(columnResizeState) {
     const [columnId, setColumnId] = React.useState();
     const onChangeRef = React.useRef();
-    const { findPrevFocusable  } = useFocusFinders();
+    const { findPrevFocusable } = useFocusFinders();
     const columnResizeStateRef = React.useRef(columnResizeState);
     React.useEffect(()=>{
         columnResizeStateRef.current = columnResizeState;
@@ -45,16 +45,16 @@ export function useKeyboardResizing(columnResizeState) {
             case Enter:
             case Escape:
                 var // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).
-                _resizeHandleRefs_get, _resizeHandleRefs_get_current;
+                _resizeHandleRefs_get_current, _resizeHandleRefs_get;
                 stopEvent();
                 (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : (_resizeHandleRefs_get_current = _resizeHandleRefs_get.current) === null || _resizeHandleRefs_get_current === void 0 ? void 0 : _resizeHandleRefs_get_current.blur();
                 break;
         }
     });
     const enableInteractiveMode = React.useCallback((colId)=>{
-        var _onChangeRef_current, _resizeHandleRefs_get;
+        var _onChangeRef_current, _onChangeRef, _resizeHandleRefs_get;
         setColumnId(colId);
-        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);
+        (_onChangeRef_current = (_onChangeRef = onChangeRef).current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(_onChangeRef, colId, true);
         const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
         if (handle) {
             handle.setAttribute('tabindex', '-1');
@@ -66,11 +66,11 @@ export function useKeyboardResizing(columnResizeState) {
     ]);
     const disableInteractiveMode = React.useCallback(()=>{
         var // Notify the onChange listener that we are disabling interactive mode.
-        _onChangeRef_current, _resizeHandleRefs_get;
+        _onChangeRef_current, _onChangeRef, _resizeHandleRefs_get;
         if (!columnId) {
             return;
         }
-        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
+        (_onChangeRef_current = (_onChangeRef = onChangeRef).current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(_onChangeRef, columnId, false);
         // Find the previous focusable element (table header button) and focus it.
         const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
         if (el) {

package/lib/hooks/useKeyboardResizing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n      onKeyDown: keyboardHandler,\n      onBlur: disableInteractiveMode,\n      ref: getKeyboardResizingRef(colId),\n      role: 'separator',\n      'aria-label': 'Resize column',\n      'aria-valuetext': `${currentWidth} pixels`,\n      'aria-hidden': colId === columnId ? false : true,\n      tabIndex: colId === columnId ? 0 : undefined,\n      ...tabsterAttrs,\n    }),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}
+{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n  const [columnId, setColumnId] = React.useState<TableColumnId>();\n  const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n  const { findPrevFocusable } = useFocusFinders();\n\n  const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n  React.useEffect(() => {\n    columnResizeStateRef.current = columnResizeState;\n  }, [columnResizeState]);\n\n  const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n  const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n    if (!columnId) {\n      return;\n    }\n\n    const width = columnResizeStateRef.current.getColumnWidth(columnId);\n    const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n    const stopEvent = () => {\n      event.preventDefault();\n      event.stopPropagation();\n    };\n\n    switch (event.key) {\n      case ArrowLeft:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case ArrowRight:\n        stopEvent();\n        columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n          columnId,\n          width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n        });\n        return;\n\n      case Space:\n      case Enter:\n      case Escape:\n        stopEvent();\n        // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n        resizeHandleRefs.get(columnId)?.current?.blur();\n        break;\n    }\n  });\n\n  const enableInteractiveMode = React.useCallback(\n    (colId: TableColumnId) => {\n      setColumnId(colId);\n      onChangeRef.current?.(colId, true);\n\n      const handle = resizeHandleRefs.get(colId)?.current;\n      if (handle) {\n        handle.setAttribute('tabindex', '-1');\n        handle.tabIndex = -1;\n        handle.focus();\n      }\n    },\n    [resizeHandleRefs],\n  );\n\n  const disableInteractiveMode = React.useCallback(() => {\n    if (!columnId) {\n      return;\n    }\n    // Notify the onChange listener that we are disabling interactive mode.\n    onChangeRef.current?.(columnId, false);\n    // Find the previous focusable element (table header button) and focus it.\n    const el = resizeHandleRefs.get(columnId)?.current;\n    if (el) {\n      findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n      el.removeAttribute('tabindex');\n    }\n\n    setColumnId(undefined);\n  }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n  const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n    onChangeRef.current = onChange;\n    if (!columnId) {\n      enableInteractiveMode(colId);\n    } else if (colId && columnId !== colId) {\n      enableInteractiveMode(colId);\n      setColumnId(colId);\n    } else {\n      disableInteractiveMode();\n    }\n  };\n\n  const getKeyboardResizingRef = React.useCallback(\n    (colId: TableColumnId) => {\n      const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n      resizeHandleRefs.set(colId, ref);\n      return ref;\n    },\n    [resizeHandleRefs],\n  );\n\n  // This makes sure the left and right arrow keys are ignored in tabster,\n  // so that they can be used for resizing.\n  const tabsterAttrs = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: {\n        ArrowLeft: true,\n        ArrowRight: true,\n      },\n    },\n  });\n\n  return {\n    toggleInteractiveMode,\n    columnId,\n    getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n      onKeyDown: keyboardHandler,\n      onBlur: disableInteractiveMode,\n      ref: getKeyboardResizingRef(colId),\n      role: 'separator',\n      'aria-label': 'Resize column',\n      'aria-valuetext': `${currentWidth} pixels`,\n      'aria-hidden': colId === columnId ? false : true,\n      tabIndex: colId === columnId ? 0 : undefined,\n      ...tabsterAttrs,\n    }),\n  };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}

package/lib/hooks/useMeasureElement.js

@@ -9,7 +9,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
  */ export function useMeasureElement() {
     const [width, setWidth] = React.useState(0);
     const container = React.useRef(undefined);
-    const { targetDocument  } = useFluent();
+    const { targetDocument } = useFluent();
     // the handler for resize observer
     const handleResize = React.useCallback(()=>{
         var _container_current;
@@ -40,7 +40,8 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
     ]);
     React.useEffect(()=>{
         return ()=>{
-            return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+            var _resizeObserver;
+            return (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : _resizeObserver.disconnect();
         };
     }, [
         resizeObserver

package/lib/hooks/useMeasureElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n  const [width, setWidth] = React.useState(0);\n  const container = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n\n  // the handler for resize observer\n  const handleResize = React.useCallback(() => {\n    const containerWidth = container.current?.getBoundingClientRect().width;\n    setWidth(containerWidth || 0);\n  }, []);\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument || !resizeObserver) {\n        return;\n      }\n\n      // cleanup previous container\n      if (container.current) {\n        resizeObserver.unobserve(container.current);\n        container.current.remove();\n      }\n\n      if (el) {\n        container.current = targetDocument.createElement('div');\n        el.insertAdjacentElement('beforebegin', container.current);\n        resizeObserver.observe(container.current);\n        handleResize();\n      }\n    },\n    [targetDocument, resizeObserver, handleResize],\n  );\n\n  React.useEffect(() => {\n    return () => resizeObserver?.disconnect();\n  }, [resizeObserver]);\n\n  return { width, measureElementRef };\n}\n"],"names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,4BAA4B;AACtD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC,oBAAgE;IAC9E,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IACzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IAExD,MAAM,EAAEC,eAAc,EAAE,GAAGR;IAE3B,kCAAkC;IAClC,MAAMS,eAAeX,MAAMY,WAAW,CAAC,IAAM;YACpBL;QAAvB,MAAMM,iBAAiBN,CAAAA,qBAAAA,UAAUO,OAAO,cAAjBP,gCAAAA,KAAAA,IAAAA,mBAAmBQ,wBAAwBX,KAAK;QACvEC,SAASQ,kBAAkB;IAC7B,GAAG,EAAE;IAEL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGhB,MAAMM,QAAQ,CAACP,cAAc,IAAIkB,eAAeN,gBAAgBF,SAAS;IAClG,MAAMS,oBAAoBlB,MAAMY,WAAW,CACzC,CAACO,KAAwB;QACvB,IAAI,CAACT,kBAAkB,CAACM,gBAAgB;YACtC;QACF,CAAC;QAED,6BAA6B;QAC7B,IAAIT,UAAUO,OAAO,EAAE;YACrBE,eAAeI,SAAS,CAACb,UAAUO,OAAO;YAC1CP,UAAUO,OAAO,CAACO,MAAM;QAC1B,CAAC;QAED,IAAIF,IAAI;YACNZ,UAAUO,OAAO,GAAGJ,eAAeY,aAAa,CAAC;YACjDH,GAAGI,qBAAqB,CAAC,eAAehB,UAAUO,OAAO;YACzDE,eAAeQ,OAAO,CAACjB,UAAUO,OAAO;YACxCH;QACF,CAAC;IACH,GACA;QAACD;QAAgBM;QAAgBL;KAAa;IAGhDX,MAAMyB,SAAS,CAAC,IAAM;QACpB,OAAO;YAAMT,OAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBU,UAAU;;IACzC,GAAG;QAACV;KAAe;IAEnB,OAAO;QAAEZ;QAAOc;IAAkB;AACpC,CAAC"}
+{"version":3,"sources":["useMeasureElement.ts"],"sourcesContent":["import { canUseDOM } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Provides a way of reporting element width.\n * Returns\n * `width` - current element width (0 by default),\n * `measureElementRef` - a ref function to be passed as `ref` to the element you want to measure\n */\nexport function useMeasureElement<TElement extends HTMLElement = HTMLElement>() {\n  const [width, setWidth] = React.useState(0);\n  const container = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { targetDocument } = useFluent();\n\n  // the handler for resize observer\n  const handleResize = React.useCallback(() => {\n    const containerWidth = container.current?.getBoundingClientRect().width;\n    setWidth(containerWidth || 0);\n  }, []);\n\n  // Keep the reference of ResizeObserver in the state, as it should live through renders\n  const [resizeObserver] = React.useState(canUseDOM() ? new ResizeObserver(handleResize) : undefined);\n  const measureElementRef = React.useCallback(\n    (el: TElement | null) => {\n      if (!targetDocument || !resizeObserver) {\n        return;\n      }\n\n      // cleanup previous container\n      if (container.current) {\n        resizeObserver.unobserve(container.current);\n        container.current.remove();\n      }\n\n      if (el) {\n        container.current = targetDocument.createElement('div');\n        el.insertAdjacentElement('beforebegin', container.current);\n        resizeObserver.observe(container.current);\n        handleResize();\n      }\n    },\n    [targetDocument, resizeObserver, handleResize],\n  );\n\n  React.useEffect(() => {\n    return () => resizeObserver?.disconnect();\n  }, [resizeObserver]);\n\n  return { width, measureElementRef };\n}\n"],"names":["canUseDOM","React","useFluent_unstable","useFluent","useMeasureElement","width","setWidth","useState","container","useRef","undefined","targetDocument","handleResize","useCallback","containerWidth","current","getBoundingClientRect","resizeObserver","ResizeObserver","measureElementRef","el","unobserve","remove","createElement","insertAdjacentElement","observe","useEffect","disconnect"],"mappings":"AAAA,SAASA,SAAS,QAAQ,4BAA4B;AACtD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;CAKC,GACD,OAAO,SAASC;IACd,MAAM,CAACC,OAAOC,SAAS,GAAGL,MAAMM,QAAQ,CAAC;IACzC,MAAMC,YAAYP,MAAMQ,MAAM,CAA0BC;IAExD,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAE3B,kCAAkC;IAClC,MAAMS,eAAeX,MAAMY,WAAW,CAAC;YACdL;QAAvB,MAAMM,kBAAiBN,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBQ,qBAAqB,GAAGX,KAAK;QACvEC,SAASQ,kBAAkB;IAC7B,GAAG,EAAE;IAEL,uFAAuF;IACvF,MAAM,CAACG,eAAe,GAAGhB,MAAMM,QAAQ,CAACP,cAAc,IAAIkB,eAAeN,gBAAgBF;IACzF,MAAMS,oBAAoBlB,MAAMY,WAAW,CACzC,CAACO;QACC,IAAI,CAACT,kBAAkB,CAACM,gBAAgB;YACtC;QACF;QAEA,6BAA6B;QAC7B,IAAIT,UAAUO,OAAO,EAAE;YACrBE,eAAeI,SAAS,CAACb,UAAUO,OAAO;YAC1CP,UAAUO,OAAO,CAACO,MAAM;QAC1B;QAEA,IAAIF,IAAI;YACNZ,UAAUO,OAAO,GAAGJ,eAAeY,aAAa,CAAC;YACjDH,GAAGI,qBAAqB,CAAC,eAAehB,UAAUO,OAAO;YACzDE,eAAeQ,OAAO,CAACjB,UAAUO,OAAO;YACxCH;QACF;IACF,GACA;QAACD;QAAgBM;QAAgBL;KAAa;IAGhDX,MAAMyB,SAAS,CAAC;QACd,OAAO;gBAAMT;oBAAAA,kBAAAA,4BAAAA,sCAAAA,gBAAgBU,UAAU;;IACzC,GAAG;QAACV;KAAe;IAEnB,OAAO;QAAEZ;QAAOc;IAAkB;AACpC"}