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

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

@@ -0,0 +1,79 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1, react_theme_2) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableCellLayoutStyles_unstable = exports.tableCellLayoutClassNames = void 0;
+    exports.tableCellLayoutClassNames = {
+        root: 'fui-TableCellLayout',
+        media: 'fui-TableCellLayout__media',
+        main: 'fui-TableCellLayout__main',
+        description: 'fui-TableCellLayout__description',
+        content: 'fui-TableCellLayout__content',
+    };
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign({ display: 'flex', alignItems: 'center' }, react_1.shorthands.gap(react_theme_1.tokens.spacingHorizontalS)), react_1.shorthands.flex(1, 1, '0px')),
+        rootTruncate: {
+            overflowX: 'hidden',
+        },
+        content: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        contentTruncate: {
+            overflowX: 'hidden',
+        },
+        media: {
+            display: 'flex',
+            alignItems: 'center',
+        },
+        mediaExtraSmall: {
+            fontSize: '16px',
+        },
+        mediaSmallAndMedium: {
+            fontSize: '20px',
+        },
+        mediaPrimary: {
+            fontSize: '24px',
+        },
+        mainPrimary: {
+            fontWeight: react_theme_1.tokens.fontWeightSemibold,
+        },
+        mainTruncate: {
+            overflowX: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+        },
+        description: tslib_1.__assign({ color: react_theme_1.tokens.colorNeutralForeground2 }, react_theme_2.typographyStyles.caption1),
+    });
+    /**
+     * Apply styling to the TableCellLayout slots based on the state
+     */
+    var useTableCellLayoutStyles_unstable = function (state) {
+        var styles = useStyles();
+        var truncate = state.truncate;
+        state.root.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);
+        var primary = state.appearance === 'primary';
+        if (state.media) {
+            var mediaSizedStyles = {
+                small: styles.mediaSmallAndMedium,
+                medium: styles.mediaSmallAndMedium,
+                'extra-small': styles.mediaExtraSmall,
+            };
+            state.media.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
+        }
+        if (state.main) {
+            state.main.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
+        }
+        if (state.description) {
+            state.description.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.description, styles.description, state.description.className);
+        }
+        if (state.content) {
+            state.content.className = react_1.mergeClasses(exports.tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
+        }
+        return state;
+    };
+    exports.useTableCellLayoutStyles_unstable = useTableCellLayoutStyles_unstable;
+});
+//# sourceMappingURL=useTableCellLayoutStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableCellLayoutStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  content: 'fui-TableCellLayout__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  rootTruncate: {\n    overflowX: 'hidden',\n  },\n\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  contentTruncate: {\n    overflowX: 'hidden',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaExtraSmall: {\n    fontSize: '16px',\n  },\n\n  mediaSmallAndMedium: {\n    fontSize: '20px',\n  },\n\n  mediaPrimary: {\n    fontSize: '24px',\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  mainTruncate: {\n    overflowX: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n  },\n\n  description: {\n    color: tokens.colorNeutralForeground2,\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  const { truncate } = state;\n\n  state.root.className = mergeClasses(\n    tableCellLayoutClassNames.root,\n    styles.root,\n    truncate && styles.rootTruncate,\n    state.root.className,\n  );\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    const mediaSizedStyles = {\n      small: styles.mediaSmallAndMedium,\n      medium: styles.mediaSmallAndMedium,\n      'extra-small': styles.mediaExtraSmall,\n    };\n\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      mediaSizedStyles[state.size],\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      truncate && styles.mainTruncate,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      tableCellLayoutClassNames.content,\n      styles.content,\n      truncate && styles.contentTruncate,\n      state.content.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-amd/components/TableHeader/TableHeader.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useTableHeader", "./renderTableHeader", "./useTableHeaderStyles"], function (require, exports, React, useTableHeader_1, renderTableHeader_1, useTableHeaderStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TableHeader = void 0;
+    /**
+     * TableHeader component
+     */
+    exports.TableHeader = React.forwardRef(function (props, ref) {
+        var state = useTableHeader_1.useTableHeader_unstable(props, ref);
+        useTableHeaderStyles_1.useTableHeaderStyles_unstable(state);
+        return renderTableHeader_1.renderTableHeader_unstable(state);
+    });
+    exports.TableHeader.displayName = 'TableHeader';
+});
+//# sourceMappingURL=TableHeader.js.map

package/lib-amd/components/TableHeader/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeader/TableHeader.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTableHeader_unstable } from './useTableHeader';\nimport { renderTableHeader_unstable } from './renderTableHeader';\nimport { useTableHeaderStyles_unstable } from './useTableHeaderStyles';\nimport type { TableHeaderProps } from './TableHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableHeader component\n */\nexport const TableHeader: ForwardRefComponent<TableHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeader_unstable(props, ref);\n\n  useTableHeaderStyles_unstable(state);\n  return renderTableHeader_unstable(state);\n});\n\nTableHeader.displayName = 'TableHeader';\n"]}

package/lib-amd/components/TableHeader/TableHeader.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=TableHeader.types.js.map

package/lib-amd/components/TableHeader/TableHeader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeader/TableHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderSlots = {\n  root: Slot<'thead', 'div'>;\n};\n\n/**\n * TableHeader Props\n */\nexport type TableHeaderProps = ComponentProps<TableHeaderSlots> & {};\n\n/**\n * State used in rendering TableHeader\n */\nexport type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<TableContextValue, 'noNativeElements'>;\n"]}

package/lib-amd/components/TableHeader/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./TableHeader", "./TableHeader.types", "./renderTableHeader", "./useTableHeader", "./useTableHeaderStyles"], function (require, exports, tslib_1, TableHeader_1, TableHeader_types_1, renderTableHeader_1, useTableHeader_1, useTableHeaderStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(TableHeader_1, exports);
+    tslib_1.__exportStar(TableHeader_types_1, exports);
+    tslib_1.__exportStar(renderTableHeader_1, exports);
+    tslib_1.__exportStar(useTableHeader_1, exports);
+    tslib_1.__exportStar(useTableHeaderStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/TableHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeader/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACjC,sDAAuC","sourcesContent":["export * from './TableHeader';\nexport * from './TableHeader.types';\nexport * from './renderTableHeader';\nexport * from './useTableHeader';\nexport * from './useTableHeaderStyles';\n"]}

package/lib-amd/components/TableHeader/renderTableHeader.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../contexts/tableHeaderContext"], function (require, exports, tslib_1, React, react_utilities_1, tableHeaderContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTableHeader_unstable = void 0;
+    /**
+     * Render the final JSX of TableHeader
+     */
+    var renderTableHeader_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(tableHeaderContext_1.TableHeaderContextProvider, { value: "" },
+            React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
+    };
+    exports.renderTableHeader_unstable = renderTableHeader_unstable;
+});
+//# sourceMappingURL=renderTableHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTableHeader.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeader/renderTableHeader.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,OAAO,CACL,oBAAC,+CAA0B,IAAC,KAAK,EAAC,EAAE;YAClC,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACP,CAC9B,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,0BAA0B,8BAQrC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { TableHeaderContextProvider } from '../../contexts/tableHeaderContext';\nimport type { TableHeaderState, TableHeaderSlots } from './TableHeader.types';\n\n/**\n * Render the final JSX of TableHeader\n */\nexport const renderTableHeader_unstable = (state: TableHeaderState) => {\n  const { slots, slotProps } = getSlots<TableHeaderSlots>(state);\n\n  return (\n    <TableHeaderContextProvider value=\"\">\n      <slots.root {...slotProps.root} />\n    </TableHeaderContextProvider>\n  );\n};\n"]}

package/lib-amd/components/TableHeader/useTableHeader.js

@@ -0,0 +1,28 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities", "../../contexts/tableContext"], function (require, exports, tslib_1, react_utilities_1, tableContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableHeader_unstable = void 0;
+    /**
+     * Create the state required to render TableHeader.
+     *
+     * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,
+     * before being passed to renderTableHeader_unstable.
+     *
+     * @param props - props from this instance of TableHeader
+     * @param ref - reference to root HTMLElement of TableHeader
+     */
+    var useTableHeader_unstable = function (props, ref) {
+        var _a;
+        var noNativeElements = tableContext_1.useTableContext().noNativeElements;
+        var rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'thead';
+        return {
+            components: {
+                root: rootComponent,
+            },
+            root: react_utilities_1.getNativeElementProps(rootComponent, tslib_1.__assign({ ref: ref, role: rootComponent === 'div' ? 'rowgroup' : undefined }, props)),
+            noNativeElements: noNativeElements,
+        };
+    };
+    exports.useTableHeader_unstable = useTableHeader_unstable;
+});
+//# sourceMappingURL=useTableHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableHeader.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"names":[],"mappings":";;;;IAKA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;;QAClF,IAAA,gBAAgB,GAAK,8BAAe,EAAE,iBAAtB,CAAuB;QAE/C,IAAM,aAAa,GAAG,CAAA,MAAA,KAAK,CAAC,EAAE,mCAAI,gBAAgB,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;QACrE,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,aAAa;aACpB;YACD,IAAI,EAAE,uCAAqB,CAAC,aAAa,qBACvC,GAAG,KAAA,EACH,IAAI,EAAE,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,IACnD,KAAK,EACR;YACF,gBAAgB,kBAAA;SACjB,CAAC;IACJ,CAAC,CAAC;IAfW,QAAA,uBAAuB,2BAelC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n  const { noNativeElements } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref,\n      role: rootComponent === 'div' ? 'rowgroup' : undefined,\n      ...props,\n    }),\n    noNativeElements,\n  };\n};\n"]}

package/lib-amd/components/TableHeader/useTableHeaderStyles.js

@@ -0,0 +1,32 @@
+define(["require", "exports", "@griffel/react"], function (require, exports, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableHeaderStyles_unstable = exports.tableHeaderClassNames = exports.tableHeaderClassName = void 0;
+    exports.tableHeaderClassName = 'fui-TableHeader';
+    exports.tableHeaderClassNames = {
+        root: 'fui-TableHeader',
+    };
+    var useFlexLayoutStyles = react_1.makeStyles({
+        root: {
+            display: 'block',
+        },
+    });
+    var useTableLayoutStyles = react_1.makeStyles({
+        root: {
+            display: 'table-row-group',
+        },
+    });
+    /**
+     * Apply styling to the TableHeader slots based on the state
+     */
+    var useTableHeaderStyles_unstable = function (state) {
+        var layoutStyles = {
+            table: useTableLayoutStyles(),
+            flex: useFlexLayoutStyles(),
+        };
+        state.root.className = react_1.mergeClasses(exports.tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+        return state;
+    };
+    exports.useTableHeaderStyles_unstable = useTableHeaderStyles_unstable;
+});
+//# sourceMappingURL=useTableHeaderStyles.js.map

package/lib-amd/components/TableHeader/useTableHeaderStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableHeaderStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts"],"names":[],"mappings":";;;;IAIa,QAAA,oBAAoB,GAAG,iBAAiB,CAAC;IACzC,QAAA,qBAAqB,GAAqC;QACrE,IAAI,EAAE,iBAAiB;KACxB,CAAC;IAEF,IAAM,mBAAmB,GAAG,kBAAU,CAAC;QACrC,IAAI,EAAE;YACJ,OAAO,EAAE,OAAO;SACjB;KACF,CAAC,CAAC;IAEH,IAAM,oBAAoB,GAAG,kBAAU,CAAC;QACtC,IAAI,EAAE;YACJ,OAAO,EAAE,iBAAiB;SAC3B;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAAuB;QACnE,IAAM,YAAY,GAAG;YACnB,KAAK,EAAE,oBAAoB,EAAE;YAC7B,IAAI,EAAE,mBAAmB,EAAE;SAC5B,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,4BAAoB,EACpB,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EACzE,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAZW,QAAA,6BAA6B,iCAYxC","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableHeaderSlots, TableHeaderState } from './TableHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {\n  root: 'fui-TableHeader',\n};\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\n/**\n * Apply styling to the TableHeader slots based on the state\n */\nexport const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"]}

package/lib-amd/components/TableHeaderCell/TableHeaderCell.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useTableHeaderCell", "./renderTableHeaderCell", "./useTableHeaderCellStyles"], function (require, exports, React, useTableHeaderCell_1, renderTableHeaderCell_1, useTableHeaderCellStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TableHeaderCell = void 0;
+    /**
+     * TableHeaderCell component
+     */
+    exports.TableHeaderCell = React.forwardRef(function (props, ref) {
+        var state = useTableHeaderCell_1.useTableHeaderCell_unstable(props, ref);
+        useTableHeaderCellStyles_1.useTableHeaderCellStyles_unstable(state);
+        return renderTableHeaderCell_1.renderTableHeaderCell_unstable(state);
+    });
+    exports.TableHeaderCell.displayName = 'TableHeaderCell';
+});
+//# sourceMappingURL=TableHeaderCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,eAAe,GAA8C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpG,IAAM,KAAK,GAAG,gDAA2B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEtD,4DAAiC,CAAC,KAAK,CAAC,CAAC;QACzC,OAAO,sDAA8B,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"]}

package/lib-amd/components/TableHeaderCell/TableHeaderCell.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=TableHeaderCell.types.js.map

package/lib-amd/components/TableHeaderCell/TableHeaderCell.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { SortDirection, TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderCellSlots = {\n  root: Slot<'th', 'div'>;\n\n  sortIcon: Slot<'span'>;\n\n  /**\n   * Button handles correct narration and interactions for sorting;\n   */\n  button: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * aside content for anything that should be after main content of the table header cell\n   */\n  aside: Slot<'span'>;\n};\n\n/**\n * TableHeaderCell Props\n */\nexport type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {\n  /**\n   * @default undefined\n   */\n  sortDirection?: SortDirection;\n};\n\n/**\n * State used in rendering TableHeaderCell\n */\nexport type TableHeaderCellState = ComponentState<TableHeaderCellSlots> &\n  Pick<TableContextValue, 'noNativeElements' | 'sortable'>;\n"]}

package/lib-amd/components/TableHeaderCell/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./TableHeaderCell", "./TableHeaderCell.types", "./renderTableHeaderCell", "./useTableHeaderCell", "./useTableHeaderCellStyles"], function (require, exports, tslib_1, TableHeaderCell_1, TableHeaderCell_types_1, renderTableHeaderCell_1, useTableHeaderCell_1, useTableHeaderCellStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(TableHeaderCell_1, exports);
+    tslib_1.__exportStar(TableHeaderCell_types_1, exports);
+    tslib_1.__exportStar(renderTableHeaderCell_1, exports);
+    tslib_1.__exportStar(useTableHeaderCell_1, exports);
+    tslib_1.__exportStar(useTableHeaderCellStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/TableHeaderCell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeaderCell/index.ts"],"names":[],"mappings":";;;IAAA,iDAAkC;IAClC,uDAAwC;IACxC,uDAAwC;IACxC,oDAAqC;IACrC,0DAA2C","sourcesContent":["export * from './TableHeaderCell';\nexport * from './TableHeaderCell.types';\nexport * from './renderTableHeaderCell';\nexport * from './useTableHeaderCell';\nexport * from './useTableHeaderCellStyles';\n"]}

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

@@ -0,0 +1,18 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTableHeaderCell_unstable = void 0;
+    /**
+     * Render the final JSX of TableHeaderCell
+     */
+    var renderTableHeaderCell_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(slots.button, tslib_1.__assign({}, slotProps.button),
+                slotProps.root.children,
+                slots.sortIcon && React.createElement(slots.sortIcon, tslib_1.__assign({}, slotProps.sortIcon))),
+            slots.aside && React.createElement(slots.aside, tslib_1.__assign({}, slotProps.aside))));
+    };
+    exports.renderTableHeaderCell_unstable = renderTableHeaderCell_unstable;
+});
+//# sourceMappingURL=renderTableHeaderCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTableHeaderCell.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeaderCell/renderTableHeaderCell.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,8BAA8B,GAAG,UAAC,KAA2B;QAClE,IAAA,KAAuB,0BAAQ,CAAuB,KAAK,CAAC,EAA1D,KAAK,WAAA,EAAE,SAAS,eAA0C,CAAC;QAEnE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM;gBAC/B,SAAS,CAAC,IAAI,CAAC,QAAQ;gBACvB,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CAChD;YACd,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CACzC,CACd,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,8BAA8B,kCAYzC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState) => {\n  const { slots, slotProps } = getSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.button {...slotProps.button}>\n        {slotProps.root.children}\n        {slots.sortIcon && <slots.sortIcon {...slotProps.sortIcon} />}\n      </slots.button>\n      {slots.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -0,0 +1,48 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-tabster", "@fluentui/react-icons", "../../contexts/tableContext", "@fluentui/react-aria"], function (require, exports, tslib_1, React, react_utilities_1, react_tabster_1, react_icons_1, tableContext_1, react_aria_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableHeaderCell_unstable = void 0;
+    var sortIcons = {
+        ascending: React.createElement(react_icons_1.ArrowUpRegular, { fontSize: 12 }),
+        descending: React.createElement(react_icons_1.ArrowDownRegular, { fontSize: 12 }),
+    };
+    /**
+     * Create the state required to render TableHeaderCell.
+     *
+     * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,
+     * before being passed to renderTableHeaderCell_unstable.
+     *
+     * @param props - props from this instance of TableHeaderCell
+     * @param ref - reference to root HTMLElement of TableHeaderCell
+     */
+    var useTableHeaderCell_unstable = function (props, ref) {
+        var _a, _b;
+        var _c = tableContext_1.useTableContext(), noNativeElements = _c.noNativeElements, sortable = _c.sortable;
+        var rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'th';
+        return {
+            components: {
+                root: rootComponent,
+                button: 'button',
+                sortIcon: 'span',
+                aside: 'span',
+            },
+            root: react_utilities_1.getNativeElementProps(rootComponent, tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusWithin()), role: rootComponent === 'div' ? 'columnheader' : undefined, 'aria-sort': sortable ? (_b = props.sortDirection) !== null && _b !== void 0 ? _b : 'none' : undefined }, props)),
+            aside: react_utilities_1.resolveShorthand(props.aside),
+            sortIcon: react_utilities_1.resolveShorthand(props.sortIcon, {
+                required: !!props.sortDirection,
+                defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },
+            }),
+            button: react_aria_1.useARIAButtonShorthand(props.button, {
+                required: true,
+                defaultProps: tslib_1.__assign({ role: 'presentation', tabIndex: -1, type: 'button' }, (sortable && {
+                    role: undefined,
+                    tabIndex: undefined,
+                })),
+            }),
+            sortable: sortable,
+            noNativeElements: noNativeElements,
+        };
+    };
+    exports.useTableHeaderCell_unstable = useTableHeaderCell_unstable;
+});
+//# sourceMappingURL=useTableHeaderCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableHeaderCell.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":";;;;IAQA,IAAM,SAAS,GAAG;QAChB,SAAS,EAAE,oBAAC,4BAAc,IAAC,QAAQ,EAAE,EAAE,GAAI;QAC3C,UAAU,EAAE,oBAAC,8BAAgB,IAAC,QAAQ,EAAE,EAAE,GAAI;KAC/C,CAAC;IAEF;;;;;;;;OAQG;IACI,IAAM,2BAA2B,GAAG,UACzC,KAA2B,EAC3B,GAA2B;;QAErB,IAAA,KAAiC,8BAAe,EAAE,EAAhD,gBAAgB,sBAAA,EAAE,QAAQ,cAAsB,CAAC;QAEzD,IAAM,aAAa,GAAG,CAAA,MAAA,KAAK,CAAC,EAAE,mCAAI,gBAAgB,EAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QAClE,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,aAAa;gBACnB,MAAM,EAAE,QAAQ;gBAChB,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE,MAAM;aACd;YACD,IAAI,EAAE,uCAAqB,CAAC,aAAa,qBACvC,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,8BAAc,EAAE,CAAC,EACzC,IAAI,EAAE,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC1D,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,aAAa,mCAAI,MAAM,CAAC,CAAC,CAAC,SAAS,IAC9D,KAAK,EACR;YACF,KAAK,EAAE,kCAAgB,CAAC,KAAK,CAAC,KAAK,CAAC;YACpC,QAAQ,EAAE,kCAAgB,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACzC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa;gBAC/B,YAAY,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE;aAC7F,CAAC;YACF,MAAM,EAAE,mCAAsB,CAAC,KAAK,CAAC,MAAM,EAAE;gBAC3C,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,IAAI,EAAE,cAAc,EACpB,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,QAAQ,IACX,CAAC,QAAQ,IAAI;oBACd,IAAI,EAAE,SAAS;oBACf,QAAQ,EAAE,SAAS;iBACpB,CAAC,CACH;aACF,CAAC;YACF,QAAQ,UAAA;YACR,gBAAgB,kBAAA;SACjB,CAAC;IACJ,CAAC,CAAC;IAxCW,QAAA,2BAA2B,+BAwCtC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable } = useTableContext();\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n  return {\n    components: {\n      root: rootComponent,\n      button: 'button',\n      sortIcon: 'span',\n      aside: 'span',\n    },\n    root: getNativeElementProps(rootComponent, {\n      ref: useMergedRefs(ref, useFocusWithin()),\n      role: rootComponent === 'div' ? 'columnheader' : undefined,\n      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n      ...props,\n    }),\n    aside: resolveShorthand(props.aside),\n    sortIcon: resolveShorthand(props.sortIcon, {\n      required: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n    }),\n    button: useARIAButtonShorthand(props.button, {\n      required: true,\n      defaultProps: {\n        role: 'presentation',\n        tabIndex: -1,\n        type: 'button',\n        ...(sortable && {\n          role: undefined,\n          tabIndex: undefined,\n        }),\n      },\n    }),\n    sortable,\n    noNativeElements,\n  };\n};\n"]}

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

@@ -0,0 +1,67 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "@fluentui/react-tabster"], function (require, exports, tslib_1, react_1, react_theme_1, react_tabster_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTableHeaderCellStyles_unstable = exports.tableHeaderCellClassNames = exports.tableHeaderCellClassName = void 0;
+    exports.tableHeaderCellClassName = 'fui-TableHeaderCell';
+    exports.tableHeaderCellClassNames = {
+        root: 'fui-TableHeaderCell',
+        button: 'fui-TableHeaderCell__button',
+        sortIcon: 'fui-TableHeaderCell__sortIcon',
+        aside: 'fui-TableHeaderCell__aside',
+    };
+    var useTableLayoutStyles = react_1.makeStyles({
+        root: {
+            display: 'table-cell',
+            verticalAlign: 'middle',
+        },
+    });
+    var useFlexLayoutStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign({ display: 'flex' }, react_1.shorthands.flex(1, 1, '0px')), { minWidth: '0px' }),
+    });
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding('0px', react_theme_1.tokens.spacingHorizontalS)), react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.outline('2px', 'solid', react_theme_1.tokens.colorStrokeFocus2)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { selector: 'focus-within', enableOutline: true })), { position: 'relative' }),
+        rootInteractive: {
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
+            },
+        },
+        resetButton: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ resize: 'horizontal', boxSizing: 'content-box', backgroundColor: 'inherit', color: 'inherit', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'normal' }, react_1.shorthands.overflow('visible')), react_1.shorthands.padding(0)), react_1.shorthands.borderStyle('none')), { WebkitAppearance: 'button', textAlign: 'unset' }),
+        button: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ position: 'relative', width: '100%', display: 'flex', flexGrow: 1, height: '100%', alignItems: 'center' }, react_1.shorthands.gap(react_theme_1.tokens.spacingHorizontalXS)), { minHeight: '32px' }), react_1.shorthands.flex(1, 1, '0px')), { outlineStyle: 'none' }),
+        sortable: {
+            cursor: 'pointer',
+        },
+        sortIcon: {
+            display: 'flex',
+            alignItems: 'center',
+            paddingTop: react_theme_1.tokens.spacingVerticalXXS,
+        },
+        resizeHandle: {},
+    });
+    /**
+     * Apply styling to the TableHeaderCell slots based on the state
+     */
+    var useTableHeaderCellStyles_unstable = function (state) {
+        var styles = useStyles();
+        var layoutStyles = {
+            table: useTableLayoutStyles(),
+            flex: useFlexLayoutStyles(),
+        };
+        state.root.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+        state.button.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
+        if (state.sortIcon) {
+            state.sortIcon.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
+        }
+        if (state.aside) {
+            state.aside.className = react_1.mergeClasses(exports.tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+        }
+        return state;
+    };
+    exports.useTableHeaderCellStyles_unstable = useTableHeaderCellStyles_unstable;
+});
+//# sourceMappingURL=useTableHeaderCellStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableHeaderCellStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n  root: 'fui-TableHeaderCell',\n  button: 'fui-TableHeaderCell__button',\n  sortIcon: 'fui-TableHeaderCell__sortIcon',\n  aside: 'fui-TableHeaderCell__aside',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    ...shorthands.flex(1, 1, '0px'),\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus-within', enableOutline: true },\n    ),\n    position: 'relative',\n  },\n\n  rootInteractive: {\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  resetButton: {\n    resize: 'horizontal',\n    boxSizing: 'content-box',\n    backgroundColor: 'inherit',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'normal',\n    ...shorthands.overflow('visible'),\n    ...shorthands.padding(0),\n    ...shorthands.borderStyle('none'),\n    WebkitAppearance: 'button',\n    textAlign: 'unset',\n  },\n\n  button: {\n    position: 'relative',\n    width: '100%',\n    display: 'flex',\n    flexGrow: 1,\n    height: '100%',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalXS),\n    minHeight: '32px',\n    ...shorthands.flex(1, 1, '0px'),\n    outlineStyle: 'none',\n  },\n\n  sortable: {\n    cursor: 'pointer',\n  },\n\n  sortIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    paddingTop: tokens.spacingVerticalXXS,\n  },\n\n  resizeHandle: {},\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderCellClassNames.root,\n    styles.root,\n    state.sortable && styles.rootInteractive,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n  state.button.className = mergeClasses(\n    tableHeaderCellClassNames.button,\n    styles.resetButton,\n    styles.button,\n    state.sortable && styles.sortable,\n    state.button.className,\n  );\n\n  if (state.sortIcon) {\n    state.sortIcon.className = mergeClasses(\n      tableHeaderCellClassNames.sortIcon,\n      styles.sortIcon,\n      state.sortIcon.className,\n    );\n  }\n\n  if (state.aside) {\n    state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n  }\n\n  return state;\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableResizeHandle.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,iBAAiB,GAAgD,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACxG,IAAM,KAAK,GAAG,oDAA6B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAExD,gEAAmC,CAAC,KAAK,CAAC,CAAC;QAC3C,OAAO,0DAAgC,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useTableResizeHandle_unstable } from './useTableResizeHandle';\nimport { renderTableResizeHandle_unstable } from './renderTableResizeHandle';\nimport { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles';\nimport type { TableResizeHandleProps } from './TableResizeHandle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * TableResizeHandle component - TODO: add more docs\n */\nexport const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps> = React.forwardRef((props, ref) => {\n  const state = useTableResizeHandle_unstable(props, ref);\n\n  useTableResizeHandleStyles_unstable(state);\n  return renderTableResizeHandle_unstable(state);\n});\n\nTableResizeHandle.displayName = 'TableResizeHandle';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableResizeHandle.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableResizeHandle/TableResizeHandle.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TableResizeHandleSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * TableResizeHandle Props\n */\nexport type TableResizeHandleProps = ComponentProps<TableResizeHandleSlots> & {};\n\n/**\n * State used in rendering TableResizeHandle\n */\nexport type TableResizeHandleState = ComponentState<TableResizeHandleSlots>;\n"]}

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./TableResizeHandle", "./TableResizeHandle.types", "./renderTableResizeHandle", "./useTableResizeHandle", "./useTableResizeHandleStyles"], function (require, exports, tslib_1, TableResizeHandle_1, TableResizeHandle_types_1, renderTableResizeHandle_1, useTableResizeHandle_1, useTableResizeHandleStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(TableResizeHandle_1, exports);
+    tslib_1.__exportStar(TableResizeHandle_types_1, exports);
+    tslib_1.__exportStar(renderTableResizeHandle_1, exports);
+    tslib_1.__exportStar(useTableResizeHandle_1, exports);
+    tslib_1.__exportStar(useTableResizeHandleStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableResizeHandle/index.ts"],"names":[],"mappings":";;;IAAA,mDAAoC;IACpC,yDAA0C;IAC1C,yDAA0C;IAC1C,sDAAuC;IACvC,4DAA6C","sourcesContent":["export * from './TableResizeHandle';\nexport * from './TableResizeHandle.types';\nexport * from './renderTableResizeHandle';\nexport * from './useTableResizeHandle';\nexport * from './useTableResizeHandleStyles';\n"]}

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

@@ -0,0 +1,14 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTableResizeHandle_unstable = void 0;
+    /**
+     * Render the final JSX of TableResizeHandle
+     */
+    var renderTableResizeHandle_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
+    };
+    exports.renderTableResizeHandle_unstable = renderTableResizeHandle_unstable;
+});
+//# sourceMappingURL=renderTableResizeHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderTableResizeHandle.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableResizeHandle/renderTableResizeHandle.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,gCAAgC,GAAG,UAAC,KAA6B;QACtE,IAAA,KAAuB,0BAAQ,CAAyB,KAAK,CAAC,EAA5D,KAAK,WAAA,EAAE,SAAS,eAA4C,CAAC;QACrE,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;IAC5C,CAAC,CAAC;IAHW,QAAA,gCAAgC,oCAG3C","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TableResizeHandleState, TableResizeHandleSlots } from './TableResizeHandle.types';\n\n/**\n * Render the final JSX of TableResizeHandle\n */\nexport const renderTableResizeHandle_unstable = (state: TableResizeHandleState) => {\n  const { slots, slotProps } = getSlots<TableResizeHandleSlots>(state);\n  return <slots.root {...slotProps.root} />;\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableResizeHandle.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,6BAA6B,GAAG,UAC3C,KAA6B,EAC7B,GAA2B;QAE3B,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,KAAuC;;YACvE,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,EAAW,KAAK,CAAC,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YACD,IAAI,EAAE,uCAAqB,CAAC,KAAK,sCAC/B,GAAG,KAAA,IACA,KAAK,KACR,OAAO,SAAA,IACP;SACH,CAAC;IACJ,CAAC,CAAC;IAlBW,QAAA,6BAA6B,iCAkBxC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useEventCallback } from '@fluentui/react-utilities';\nimport type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';\n\n/**\n * Create the state required to render TableResizeHandle.\n *\n * The returned state can be modified with hooks such as useTableResizeHandleStyles_unstable,\n * before being passed to renderTableResizeHandle_unstable.\n *\n * @param props - props from this instance of TableResizeHandle\n * @param ref - reference to root HTMLElement of TableResizeHandle\n */\nexport const useTableResizeHandle_unstable = (\n  props: TableResizeHandleProps,\n  ref: React.Ref<HTMLElement>,\n): TableResizeHandleState => {\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    props.onClick?.(event);\n    event.stopPropagation();\n  });\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n      onClick,\n    }),\n  };\n};\n"]}