@fluentui/react-table 9.18.6 → 9.19.0

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { typographyStyles } from '@fluentui/react-theme';

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","mc9l5x","Bt984gj","i8kkvl","Belr9w4","rmohyg","xawz","Bh6795r","Bnnss6s","fkmc3a","rootTruncate","B68tc82","Beiy3e4","contentTruncate","mediaExtraSmall","Be2twd7","mediaSmallAndMedium","mediaPrimary","mainPrimary","Bhrd7zp","mainTruncate","Huce71","ygn44y","sj55zd","Bahqtrf","Bg96gwp","d","p","useTableCellLayoutStyles_unstable","state","styles","truncate","className","primary","appearance","mediaSizedStyles","small","medium","size"],"sources":["useTableCellLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tableCellLayoutClassNames = {\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 * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: tokens.spacingHorizontalS,\n        flex: '1 1 0px'\n    },\n    rootTruncate: {\n        overflowX: 'hidden'\n    },\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    contentTruncate: {\n        overflowX: 'hidden'\n    },\n    media: {\n        display: 'flex',\n        alignItems: 'center'\n    },\n    mediaExtraSmall: {\n        fontSize: '16px'\n    },\n    mediaSmallAndMedium: {\n        fontSize: '20px'\n    },\n    mediaPrimary: {\n        fontSize: '24px'\n    },\n    mainPrimary: {\n        fontWeight: tokens.fontWeightSemibold\n    },\n    mainTruncate: {\n        overflowX: 'hidden',\n        whiteSpace: 'nowrap',\n        textOverflow: 'ellipsis'\n    },\n    description: {\n        color: tokens.colorNeutralForeground2,\n        ...typographyStyles.caption1\n    }\n});\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */ export const useTableCellLayoutStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { truncate } = state;\n    state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);\n    const primary = state.appearance === 'primary';\n    if (state.media) {\n        const mediaSizedStyles = {\n            small: styles.mediaSmallAndMedium,\n            medium: styles.mediaSmallAndMedium,\n            'extra-small': styles.mediaExtraSmall\n        };\n        state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);\n    }\n    if (state.main) {\n        state.main.className = mergeClasses(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);\n    }\n    if (state.content) {\n        state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","mc9l5x","Bt984gj","i8kkvl","Belr9w4","rmohyg","xawz","Bh6795r","Bnnss6s","fkmc3a","rootTruncate","B68tc82","Beiy3e4","contentTruncate","mediaExtraSmall","Be2twd7","mediaSmallAndMedium","mediaPrimary","mainPrimary","Bhrd7zp","mainTruncate","Huce71","ygn44y","sj55zd","Bahqtrf","Bg96gwp","d","p","useTableCellLayoutStyles_unstable","state","styles","truncate","className","primary","appearance","mediaSizedStyles","small","medium","size"],"sources":["useTableCellLayoutStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { typographyStyles } from '@fluentui/react-theme';\nexport const tableCellLayoutClassNames = {\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 * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: tokens.spacingHorizontalS,\n        flex: '1 1 0px'\n    },\n    rootTruncate: {\n        overflowX: 'hidden'\n    },\n    content: {\n        display: 'flex',\n        flexDirection: 'column'\n    },\n    contentTruncate: {\n        overflowX: 'hidden'\n    },\n    media: {\n        display: 'flex',\n        alignItems: 'center'\n    },\n    mediaExtraSmall: {\n        fontSize: '16px'\n    },\n    mediaSmallAndMedium: {\n        fontSize: '20px'\n    },\n    mediaPrimary: {\n        fontSize: '24px'\n    },\n    mainPrimary: {\n        fontWeight: tokens.fontWeightSemibold\n    },\n    mainTruncate: {\n        overflowX: 'hidden',\n        whiteSpace: 'nowrap',\n        textOverflow: 'ellipsis'\n    },\n    description: {\n        color: tokens.colorNeutralForeground2,\n        ...typographyStyles.caption1\n    }\n});\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */ export const useTableCellLayoutStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { truncate } = state;\n    state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);\n    const primary = state.appearance === 'primary';\n    if (state.media) {\n        const mediaSizedStyles = {\n            small: styles.mediaSmallAndMedium,\n            medium: styles.mediaSmallAndMedium,\n            'extra-small': styles.mediaExtraSmall\n        };\n        state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);\n    }\n    if (state.main) {\n        state.main.className = mergeClasses(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);\n    }\n    if (state.description) {\n        state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);\n    }\n    if (state.content) {\n        state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { typographyStyles } from '@fluentui/react-theme';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } 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    gap: tokens.spacingHorizontalS,\n    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  'use no memo';\n\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"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","display","alignItems","gap","spacingHorizontalS","flex","rootTruncate","overflowX","flexDirection","contentTruncate","mediaExtraSmall","fontSize","mediaSmallAndMedium","mediaPrimary","mainPrimary","fontWeight","fontWeightSemibold","mainTruncate","whiteSpace","textOverflow","color","colorNeutralForeground2","caption1","useTableCellLayoutStyles_unstable","state","styles","truncate","className","primary","appearance","mediaSizedStyles","small","medium","size"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,SAAS;AACX,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BK,MAAM;QACJM,SAAS;QACTC,YAAY;QACZC,KAAKX,OAAOY,kBAAkB;QAC9BC,MAAM;IACR;IAEAC,cAAc;QACZC,WAAW;IACb;IAEAR,SAAS;QACPE,SAAS;QACTO,eAAe;IACjB;IAEAC,iBAAiB;QACfF,WAAW;IACb;IAEAX,OAAO;QACLK,SAAS;QACTC,YAAY;IACd;IAEAQ,iBAAiB;QACfC,UAAU;IACZ;IAEAC,qBAAqB;QACnBD,UAAU;IACZ;IAEAE,cAAc;QACZF,UAAU;IACZ;IAEAG,aAAa;QACXC,YAAYvB,OAAOwB,kBAAkB;IACvC;IAEAC,cAAc;QACZV,WAAW;QACXW,YAAY;QACZC,cAAc;IAChB;IAEArB,aAAa;QACXsB,OAAO5B,OAAO6B,uBAAuB;QACrC,GAAG5B,iBAAiB6B,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASzB;IACf,MAAM,EAAE0B,QAAQ,EAAE,GAAGF;IAErBA,MAAM7B,IAAI,CAACgC,SAAS,GAAGpC,aACrBG,0BAA0BC,IAAI,EAC9B8B,OAAO9B,IAAI,EACX+B,YAAYD,OAAOnB,YAAY,EAC/BkB,MAAM7B,IAAI,CAACgC,SAAS;IAEtB,MAAMC,UAAUJ,MAAMK,UAAU,KAAK;IAErC,IAAIL,MAAM5B,KAAK,EAAE;QACf,MAAMkC,mBAAmB;YACvBC,OAAON,OAAOb,mBAAmB;YACjCoB,QAAQP,OAAOb,mBAAmB;YAClC,eAAea,OAAOf,eAAe;QACvC;QAEAc,MAAM5B,KAAK,CAAC+B,SAAS,GAAGpC,aACtBG,0BAA0BE,KAAK,EAC/B6B,OAAO7B,KAAK,EACZkC,gBAAgB,CAACN,MAAMS,IAAI,CAAC,EAC5BL,WAAWH,OAAOZ,YAAY,EAC9BW,MAAM5B,KAAK,CAAC+B,SAAS;IAEzB;IAEA,IAAIH,MAAM3B,IAAI,EAAE;QACd2B,MAAM3B,IAAI,CAAC8B,SAAS,GAAGpC,aACrBG,0BAA0BG,IAAI,EAC9B6B,YAAYD,OAAOR,YAAY,EAC/BW,WAAWH,OAAOX,WAAW,EAC7BU,MAAM3B,IAAI,CAAC8B,SAAS;IAExB;IAEA,IAAIH,MAAM1B,WAAW,EAAE;QACrB0B,MAAM1B,WAAW,CAAC6B,SAAS,GAAGpC,aAC5BG,0BAA0BI,WAAW,EACrC2B,OAAO3B,WAAW,EAClB0B,MAAM1B,WAAW,CAAC6B,SAAS;IAE/B;IAEA,IAAIH,MAAMzB,OAAO,EAAE;QACjByB,MAAMzB,OAAO,CAAC4B,SAAS,GAAGpC,aACxBG,0BAA0BK,OAAO,EACjC0B,OAAO1B,OAAO,EACd2B,YAAYD,OAAOhB,eAAe,EAClCe,MAAMzB,OAAO,CAAC4B,SAAS;IAE3B;IAEA,OAAOH;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } 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    gap: tokens.spacingHorizontalS,\n    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  'use no memo';\n\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"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","display","alignItems","gap","spacingHorizontalS","flex","rootTruncate","overflowX","flexDirection","contentTruncate","mediaExtraSmall","fontSize","mediaSmallAndMedium","mediaPrimary","mainPrimary","fontWeight","fontWeightSemibold","mainTruncate","whiteSpace","textOverflow","color","colorNeutralForeground2","caption1","useTableCellLayoutStyles_unstable","state","styles","truncate","className","primary","appearance","mediaSizedStyles","small","medium","size"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,gBAAgB,QAAQ,wBAAwB;AAEzD,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,SAAS;AACX,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYV,WAAW;IAC3BK,MAAM;QACJM,SAAS;QACTC,YAAY;QACZC,KAAKX,OAAOY,kBAAkB;QAC9BC,MAAM;IACR;IAEAC,cAAc;QACZC,WAAW;IACb;IAEAR,SAAS;QACPE,SAAS;QACTO,eAAe;IACjB;IAEAC,iBAAiB;QACfF,WAAW;IACb;IAEAX,OAAO;QACLK,SAAS;QACTC,YAAY;IACd;IAEAQ,iBAAiB;QACfC,UAAU;IACZ;IAEAC,qBAAqB;QACnBD,UAAU;IACZ;IAEAE,cAAc;QACZF,UAAU;IACZ;IAEAG,aAAa;QACXC,YAAYvB,OAAOwB,kBAAkB;IACvC;IAEAC,cAAc;QACZV,WAAW;QACXW,YAAY;QACZC,cAAc;IAChB;IAEArB,aAAa;QACXsB,OAAO5B,OAAO6B,uBAAuB;QACrC,GAAG5B,iBAAiB6B,QAAQ;IAC9B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASzB;IACf,MAAM,EAAE0B,QAAQ,EAAE,GAAGF;IAErBA,MAAM7B,IAAI,CAACgC,SAAS,GAAGpC,aACrBG,0BAA0BC,IAAI,EAC9B8B,OAAO9B,IAAI,EACX+B,YAAYD,OAAOnB,YAAY,EAC/BkB,MAAM7B,IAAI,CAACgC,SAAS;IAEtB,MAAMC,UAAUJ,MAAMK,UAAU,KAAK;IAErC,IAAIL,MAAM5B,KAAK,EAAE;QACf,MAAMkC,mBAAmB;YACvBC,OAAON,OAAOb,mBAAmB;YACjCoB,QAAQP,OAAOb,mBAAmB;YAClC,eAAea,OAAOf,eAAe;QACvC;QAEAc,MAAM5B,KAAK,CAAC+B,SAAS,GAAGpC,aACtBG,0BAA0BE,KAAK,EAC/B6B,OAAO7B,KAAK,EACZkC,gBAAgB,CAACN,MAAMS,IAAI,CAAC,EAC5BL,WAAWH,OAAOZ,YAAY,EAC9BW,MAAM5B,KAAK,CAAC+B,SAAS;IAEzB;IAEA,IAAIH,MAAM3B,IAAI,EAAE;QACd2B,MAAM3B,IAAI,CAAC8B,SAAS,GAAGpC,aACrBG,0BAA0BG,IAAI,EAC9B6B,YAAYD,OAAOR,YAAY,EAC/BW,WAAWH,OAAOX,WAAW,EAC7BU,MAAM3B,IAAI,CAAC8B,SAAS;IAExB;IAEA,IAAIH,MAAM1B,WAAW,EAAE;QACrB0B,MAAM1B,WAAW,CAAC6B,SAAS,GAAGpC,aAC5BG,0BAA0BI,WAAW,EACrC2B,OAAO3B,WAAW,EAClB0B,MAAM1B,WAAW,CAAC6B,SAAS;IAE/B;IAEA,IAAIH,MAAMzB,OAAO,EAAE;QACjByB,MAAMzB,OAAO,CAAC4B,SAAS,GAAGpC,aACxBG,0BAA0BK,OAAO,EACjC0B,OAAO1B,OAAO,EACd2B,YAAYD,OAAOhB,eAAe,EAClCe,MAAMzB,OAAO,CAAC4B,SAAS;IAE3B;IAEA,OAAOH;AACT,EAAE"}

package/lib/components/TableHeader/TableHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTableHeader_unstable } from './useTableHeader';
 import { renderTableHeader_unstable } from './renderTableHeader';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableHeader_unstable } from './useTableHeader';\nimport { renderTableHeader_unstable } from './renderTableHeader';\nimport { useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles';\nimport type { TableHeaderProps } from './TableHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useTableHeaderStyles_unstable')(state);\n\n  return renderTableHeader_unstable(state);\n});\n\nTableHeader.displayName = 'TableHeader';\n"],"names":["React","useTableHeader_unstable","renderTableHeader_unstable","useTableHeaderStyles_unstable","useCustomStyleHook_unstable","TableHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TableHeader/TableHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableHeader_unstable } from './useTableHeader';\nimport { renderTableHeader_unstable } from './renderTableHeader';\nimport { useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles';\nimport type { TableHeaderProps } from './TableHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useTableHeaderStyles_unstable')(state);\n\n  return renderTableHeader_unstable(state);\n});\n\nTableHeader.displayName = 'TableHeader';\n"],"names":["React","useTableHeader_unstable","renderTableHeader_unstable","useTableHeaderStyles_unstable","useCustomStyleHook_unstable","TableHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/TableHeader/useTableHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useTableContext } from '../../contexts/tableContext';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableHeader/useTableHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'rowgroup' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    noNativeElements,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableContext","useTableHeader_unstable","props","ref","noNativeElements","rootComponent","as","components","root","always","role","undefined","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,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,yBAAyBO,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FF,KAAKA;YACLO,MAAML,kBAAkB,QAAQ,aAAaM;YAC7C,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaP;QAAc;QAE/BD;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableHeader/useTableHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'rowgroup' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    noNativeElements,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableContext","useTableHeader_unstable","props","ref","noNativeElements","rootComponent","as","components","root","always","role","undefined","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,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,yBAAyBO,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FF,KAAKA;YACLO,MAAML,kBAAkB,QAAQ,aAAaM;YAC7C,GAAGT,KAAK;QACV,IACA;YAAEU,aAAaP;QAAc;QAE/BD;IACF;AACF,EAAE"}

package/lib/components/TableHeader/useTableHeaderStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses, __styles } from '@griffel/react';
 export const tableHeaderClassName = 'fui-TableHeader';
 export const tableHeaderClassNames = {

package/lib/components/TableHeader/useTableHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","mc9l5x","d","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames = {\n    root: 'fui-TableHeader'\n};\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'block'\n    }\n});\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row-group'\n    }\n});\n/**\n * Apply styling to the TableHeader slots based on the state\n */ export const useTableHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,oBAAoB,GAAG,iBAAiB;AACrD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,mBAAmB,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI3B,CAAC;AACF,MAAMC,oBAAoB,gBAAGP,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAME,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,YAAY,GAAG;IACjBC,KAAK,EAAEJ,oBAAoB,CAAC,CAAC;IAC7BK,IAAI,EAAER,mBAAmB,CAAC;EAC9B,CAAC;EACDK,KAAK,CAACN,IAAI,CAACU,SAAS,GAAGd,YAAY,CAACE,oBAAoB,EAAEQ,KAAK,CAACK,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACT,IAAI,GAAGO,YAAY,CAACC,KAAK,CAACR,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACU,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","mc9l5x","d","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames = {\n    root: 'fui-TableHeader'\n};\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'block'\n    }\n});\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row-group'\n    }\n});\n/**\n * Apply styling to the TableHeader slots based on the state\n */ export const useTableHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,oBAAoB,GAAG,iBAAiB;AACrD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,mBAAmB,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI3B,CAAC;AACF,MAAMC,oBAAoB,gBAAGP,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAME,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,YAAY,GAAG;IACjBC,KAAK,EAAEJ,oBAAoB,CAAC,CAAC;IAC7BK,IAAI,EAAER,mBAAmB,CAAC;EAC9B,CAAC;EACDK,KAAK,CAACN,IAAI,CAACU,SAAS,GAAGd,YAAY,CAACE,oBAAoB,EAAEQ,KAAK,CAACK,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACT,IAAI,GAAGO,YAAY,CAACC,KAAK,CAACR,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACU,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TableHeader/useTableHeaderStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses, makeStyles } from '@griffel/react';
 export const tableHeaderClassName = 'fui-TableHeader';
 export const tableHeaderClassNames = {

package/lib/components/TableHeader/useTableHeaderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableHeader/useTableHeaderStyles.styles.ts"],"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  'use no memo';\n\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"],"names":["mergeClasses","makeStyles","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","display","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"mappings":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAuB,kBAAkB;AACtD,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBJ,WAAW;IACrCG,MAAM;QACJE,SAAS;IACX;AACF;AAEA,MAAMC,uBAAuBN,WAAW;IACtCG,MAAM;QACJE,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,eAAe;QACnBC,OAAOJ;QACPK,MAAMP;IACR;IACAI,MAAML,IAAI,CAACS,SAAS,GAAGb,aACrBE,sBACAO,MAAMK,gBAAgB,GAAGJ,aAAaE,IAAI,CAACR,IAAI,GAAGM,aAAaC,KAAK,CAACP,IAAI,EACzEK,MAAML,IAAI,CAACS,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TableHeader/useTableHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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  'use no memo';\n\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"],"names":["mergeClasses","makeStyles","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","display","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,uBAAuB,kBAAkB;AACtD,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,MAAMC,sBAAsBJ,WAAW;IACrCG,MAAM;QACJE,SAAS;IACX;AACF;AAEA,MAAMC,uBAAuBN,WAAW;IACtCG,MAAM;QACJE,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,eAAe;QACnBC,OAAOJ;QACPK,MAAMP;IACR;IACAI,MAAML,IAAI,CAACS,SAAS,GAAGb,aACrBE,sBACAO,MAAMK,gBAAgB,GAAGJ,aAAaE,IAAI,CAACR,IAAI,GAAGM,aAAaC,KAAK,CAACP,IAAI,EACzEK,MAAML,IAAI,CAACS,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

package/lib/components/TableHeaderCell/TableHeaderCell.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTableHeaderCell_unstable } from './useTableHeaderCell';
 import { renderTableHeaderCell_unstable } from './renderTableHeaderCell';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableHeaderCell/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"}
+{"version":3,"sources":["../src/components/TableHeaderCell/TableHeaderCell.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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/useTableHeaderCell.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusWithin } from '@fluentui/react-tabster';
@@ -25,16 +26,14 @@ const sortIcons = {
     const { sortable = contextSortable } = props;
     var _props_as;
     const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'th';
+    // The sort button is rendered as a div when not sortable, and as an ARIA button when sortable.
     const buttonSlot = slot.always(props.button, {
         elementType: 'div',
         defaultProps: {
-            as: 'div',
-            ...!sortable && {
-                role: 'presentation',
-                tabIndex: undefined
-            }
+            as: 'div'
         }
     });
+    const ariaButtonProps = useARIAButtonProps(buttonSlot.as, buttonSlot);
     var _props_sortDirection;
     return {
         components: {
@@ -64,7 +63,7 @@ const sortIcons = {
             },
             elementType: 'span'
         }),
-        button: useARIAButtonProps(buttonSlot.as, buttonSlot),
+        button: sortable ? ariaButtonProps : buttonSlot,
         sortable,
         noNativeElements
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport { ARIAButtonSlotProps, useARIAButtonProps } 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: contextSortable } = useTableContext();\n  const { sortable = contextSortable } = props;\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n\n  const buttonSlot = slot.always<ARIAButtonSlotProps>(props.button, {\n    elementType: 'div',\n    defaultProps: {\n      as: 'div',\n      ...(!sortable && {\n        role: 'presentation',\n        tabIndex: undefined,\n      }),\n    },\n  });\n\n  return {\n    components: {\n      root: rootComponent,\n      button: 'div',\n      sortIcon: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, useFocusWithin()) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'columnheader' : undefined,\n        'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n        ...props,\n      } as const),\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: useARIAButtonProps(buttonSlot.as, buttonSlot),\n    sortable,\n    noNativeElements,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useARIAButtonProps","useTableContext","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","contextSortable","rootComponent","as","buttonSlot","always","button","elementType","defaultProps","role","tabIndex","undefined","components","root","sortIcon","aside","sortDirection","optional","renderByDefault","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,wBAAwB;AACzE,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAE/E,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,UAAUC,eAAe,EAAE,GAAGV;IACxD,MAAM,EAAES,WAAWC,eAAe,EAAE,GAAGJ;QAEjBA;IAAtB,MAAMK,gBAAgBL,CAAAA,CAAAA,YAAAA,MAAMM,EAAE,cAARN,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAE7D,MAAMK,aAAalB,KAAKmB,MAAM,CAAsBR,MAAMS,MAAM,EAAE;QAChEC,aAAa;QACbC,cAAc;YACZL,IAAI;YACJ,GAAI,CAACH,YAAY;gBACfS,MAAM;gBACNC,UAAUC;YACZ,CAAC;QACH;IACF;QAgB8Bd;IAd9B,OAAO;QACLe,YAAY;YACVC,MAAMX;YACNI,QAAQ;YACRQ,UAAU;YACVC,OAAO;QACT;QACAF,MAAM3B,KAAKmB,MAAM,CACfrB,yBAAyBkB,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FJ,KAAKb,cAAca,KAAKX;YACxBsB,MAAMP,kBAAkB,QAAQ,iBAAiBS;YACjD,aAAaX,WAAWH,CAAAA,uBAAAA,MAAMmB,aAAa,cAAnBnB,kCAAAA,uBAAuB,SAASc;YACxD,GAAGd,KAAK;QACV,IACA;YAAEU,aAAaL;QAAc;QAE/Ba,OAAO7B,KAAK+B,QAAQ,CAACpB,MAAMkB,KAAK,EAAE;YAAER,aAAa;QAAO;QACxDO,UAAU5B,KAAK+B,QAAQ,CAACpB,MAAMiB,QAAQ,EAAE;YACtCI,iBAAiB,CAAC,CAACrB,MAAMmB,aAAa;YACtCR,cAAc;gBAAEW,UAAUtB,MAAMmB,aAAa,GAAGxB,SAAS,CAACK,MAAMmB,aAAa,CAAC,GAAGL;YAAU;YAC3FJ,aAAa;QACf;QACAD,QAAQhB,mBAAmBc,WAAWD,EAAE,EAAEC;QAC1CJ;QACAD;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport { ARIAButtonSlotProps, useARIAButtonProps } 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: contextSortable } = useTableContext();\n  const { sortable = contextSortable } = props;\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n\n  // The sort button is rendered as a div when not sortable, and as an ARIA button when sortable.\n  const buttonSlot = slot.always<ARIAButtonSlotProps>(props.button, {\n    elementType: 'div',\n    defaultProps: {\n      as: 'div',\n    },\n  });\n  const ariaButtonProps = useARIAButtonProps(buttonSlot.as, buttonSlot);\n\n  return {\n    components: {\n      root: rootComponent,\n      button: 'div',\n      sortIcon: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, useFocusWithin()) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'columnheader' : undefined,\n        'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n        ...props,\n      } as const),\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: sortable ? ariaButtonProps : buttonSlot,\n    sortable,\n    noNativeElements,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useARIAButtonProps","useTableContext","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","contextSortable","rootComponent","as","buttonSlot","always","button","elementType","defaultProps","ariaButtonProps","components","root","sortIcon","aside","role","undefined","sortDirection","optional","renderByDefault","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,wBAAwB;AACzE,SAA8BC,kBAAkB,QAAQ,uBAAuB;AAE/E,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,UAAUC,eAAe,EAAE,GAAGV;IACxD,MAAM,EAAES,WAAWC,eAAe,EAAE,GAAGJ;QAEjBA;IAAtB,MAAMK,gBAAgBL,CAAAA,CAAAA,YAAAA,MAAMM,EAAE,cAARN,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAE7D,+FAA+F;IAC/F,MAAMK,aAAalB,KAAKmB,MAAM,CAAsBR,MAAMS,MAAM,EAAE;QAChEC,aAAa;QACbC,cAAc;YACZL,IAAI;QACN;IACF;IACA,MAAMM,kBAAkBnB,mBAAmBc,WAAWD,EAAE,EAAEC;QAgB5BP;IAd9B,OAAO;QACLa,YAAY;YACVC,MAAMT;YACNI,QAAQ;YACRM,UAAU;YACVC,OAAO;QACT;QACAF,MAAMzB,KAAKmB,MAAM,CACfrB,yBAAyBkB,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FJ,KAAKb,cAAca,KAAKX;YACxB2B,MAAMZ,kBAAkB,QAAQ,iBAAiBa;YACjD,aAAaf,WAAWH,CAAAA,uBAAAA,MAAMmB,aAAa,cAAnBnB,kCAAAA,uBAAuB,SAASkB;YACxD,GAAGlB,KAAK;QACV,IACA;YAAEU,aAAaL;QAAc;QAE/BW,OAAO3B,KAAK+B,QAAQ,CAACpB,MAAMgB,KAAK,EAAE;YAAEN,aAAa;QAAO;QACxDK,UAAU1B,KAAK+B,QAAQ,CAACpB,MAAMe,QAAQ,EAAE;YACtCM,iBAAiB,CAAC,CAACrB,MAAMmB,aAAa;YACtCR,cAAc;gBAAEW,UAAUtB,MAAMmB,aAAa,GAAGxB,SAAS,CAACK,MAAMmB,aAAa,CAAC,GAAGD;YAAU;YAC3FR,aAAa;QACf;QACAD,QAAQN,WAAWS,kBAAkBL;QACrCJ;QACAD;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","mc9l5x","ha4doy","d","useFlexLayoutStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","Bf4jedk","p","useStyles","Bhrd7zp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","robkg1","Bmvh20x","B3nxjsc","Bmkhcsx","B8osjzx","pehzd3","Blsv9te","u7xebq","Bsvwmf7","qhf8xq","rootInteractive","Bi91k9c","Jwef8y","lj723h","ecr2s2","resetButton","B3rzk8w","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","fsow6f","a9b677","Bqenvij","Bt984gj","i8kkvl","Belr9w4","rmohyg","sshi5w","oeaueh","sortable","Bceei9c","resizeHandle","h","a","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames = {\n    root: 'fui-TableHeaderCell',\n    button: 'fui-TableHeaderCell__button',\n    sortIcon: 'fui-TableHeaderCell__sortIcon',\n    aside: 'fui-TableHeaderCell__aside'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        verticalAlign: 'middle'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flex: '1 1 0px',\n        minWidth: '0px'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        fontWeight: tokens.fontWeightRegular,\n        padding: `0px ${tokens.spacingHorizontalS}`,\n        ...createCustomFocusIndicatorStyle({\n            outline: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus-within'\n        }),\n        position: 'relative'\n    },\n    rootInteractive: {\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground1Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed\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        overflow: 'visible',\n        padding: '0',\n        border: 'none',\n        textAlign: 'unset'\n    },\n    button: {\n        position: 'relative',\n        width: '100%',\n        display: 'flex',\n        flexGrow: 1,\n        height: '100%',\n        alignItems: 'center',\n        gap: tokens.spacingHorizontalXS,\n        minHeight: '32px',\n        flex: '1 1 0px',\n        outlineStyle: 'none'\n    },\n    sortable: {\n        cursor: 'pointer'\n    },\n    sortIcon: {\n        display: 'flex',\n        alignItems: 'center',\n        paddingTop: tokens.spacingVerticalXXS\n    },\n    resizeHandle: {}\n});\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */ export const useTableHeaderCellStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);\n    if (state.sortIcon) {\n        state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","mc9l5x","ha4doy","d","useFlexLayoutStyles","xawz","Bh6795r","Bnnss6s","fkmc3a","Bf4jedk","p","useStyles","Bhrd7zp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","robkg1","Bmvh20x","B3nxjsc","Bmkhcsx","B8osjzx","pehzd3","Blsv9te","u7xebq","Bsvwmf7","qhf8xq","rootInteractive","Bi91k9c","Jwef8y","lj723h","ecr2s2","resetButton","B3rzk8w","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","fsow6f","a9b677","Bqenvij","Bt984gj","i8kkvl","Belr9w4","rmohyg","sshi5w","oeaueh","sortable","Bceei9c","resizeHandle","h","a","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames = {\n    root: 'fui-TableHeaderCell',\n    button: 'fui-TableHeaderCell__button',\n    sortIcon: 'fui-TableHeaderCell__sortIcon',\n    aside: 'fui-TableHeaderCell__aside'\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-cell',\n        verticalAlign: 'middle'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flex: '1 1 0px',\n        minWidth: '0px'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        fontWeight: tokens.fontWeightRegular,\n        padding: `0px ${tokens.spacingHorizontalS}`,\n        ...createCustomFocusIndicatorStyle({\n            outline: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus-within'\n        }),\n        position: 'relative'\n    },\n    rootInteractive: {\n        ':hover': {\n            color: tokens.colorNeutralForeground1Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground1Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed\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        overflow: 'visible',\n        padding: '0',\n        border: 'none',\n        textAlign: 'unset'\n    },\n    button: {\n        position: 'relative',\n        width: '100%',\n        display: 'flex',\n        flexGrow: 1,\n        height: '100%',\n        alignItems: 'center',\n        gap: tokens.spacingHorizontalXS,\n        minHeight: '32px',\n        flex: '1 1 0px',\n        outlineStyle: 'none'\n    },\n    sortable: {\n        cursor: 'pointer'\n    },\n    sortIcon: {\n        display: 'flex',\n        alignItems: 'center',\n        paddingTop: tokens.spacingVerticalXXS\n    },\n    resizeHandle: {}\n});\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */ export const useTableHeaderCellStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n    state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);\n    if (state.sortIcon) {\n        state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);\n    }\n    if (state.aside) {\n        state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } 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    flex: '1 1 0px',\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    fontWeight: tokens.fontWeightRegular,\n    padding: `0px ${tokens.spacingHorizontalS}`,\n    ...createCustomFocusIndicatorStyle(\n      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n      { selector: 'focus-within' },\n    ),\n    position: 'relative',\n  },\n\n  rootInteractive: {\n    ':hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground1Pressed,\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    overflow: 'visible',\n    padding: '0',\n    border: 'none',\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    gap: tokens.spacingHorizontalXS,\n    minHeight: '32px',\n    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  'use no memo';\n\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\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"],"names":["makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","display","verticalAlign","useFlexLayoutStyles","flex","minWidth","useStyles","fontWeight","fontWeightRegular","padding","spacingHorizontalS","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","position","rootInteractive","color","colorNeutralForeground1Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground1Pressed","colorSubtleBackgroundPressed","resetButton","resize","boxSizing","fontFamily","fontSize","lineHeight","overflow","border","textAlign","width","flexGrow","height","alignItems","gap","spacingHorizontalXS","minHeight","outlineStyle","sortable","cursor","paddingTop","spacingVerticalXXS","resizeHandle","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAG1E,OAAO,MAAMC,2BAA2B,sBAAsB;AAC9D,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;IACNC,QAAQ;IACRC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,uBAAuBV,WAAW;IACtCM,MAAM;QACJK,SAAS;QACTC,eAAe;IACjB;AACF;AAEA,MAAMC,sBAAsBb,WAAW;IACrCM,MAAM;QACJK,SAAS;QACTG,MAAM;QACNC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,MAAMC,YAAYhB,WAAW;IAC3BM,MAAM;QACJW,YAAYf,OAAOgB,iBAAiB;QACpCC,SAAS,CAAC,IAAI,EAAEjB,OAAOkB,kBAAkB,EAAE;QAC3C,GAAGjB,gCACD;YAAEkB,SAAS,CAAC,UAAU,EAAEnB,OAAOoB,iBAAiB,EAAE;YAAEC,cAAcrB,OAAOsB,kBAAkB;QAAC,GAC5F;YAAEC,UAAU;QAAe,EAC5B;QACDC,UAAU;IACZ;IAEAC,iBAAiB;QACf,UAAU;YACRC,OAAO1B,OAAO2B,4BAA4B;YAC1CC,iBAAiB5B,OAAO6B,0BAA0B;QACpD;QACA,WAAW;YACTH,OAAO1B,OAAO8B,8BAA8B;YAC5CF,iBAAiB5B,OAAO+B,4BAA4B;QACtD;IACF;IAEAC,aAAa;QACXC,QAAQ;QACRC,WAAW;QACXN,iBAAiB;QACjBF,OAAO;QACPS,YAAY;QACZC,UAAU;QACVC,YAAY;QACZC,UAAU;QACVrB,SAAS;QACTsB,QAAQ;QACRC,WAAW;IACb;IAEAnC,QAAQ;QACNmB,UAAU;QACViB,OAAO;QACPhC,SAAS;QACTiC,UAAU;QACVC,QAAQ;QACRC,YAAY;QACZC,KAAK7C,OAAO8C,mBAAmB;QAC/BC,WAAW;QACXnC,MAAM;QACNoC,cAAc;IAChB;IAEAC,UAAU;QACRC,QAAQ;IACV;IAEA5C,UAAU;QACRG,SAAS;QACTmC,YAAY;QACZO,YAAYnD,OAAOoD,kBAAkB;IACvC;IAEAC,cAAc,CAAC;AACjB;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAAS1C;IACf,MAAM2C,eAAe;QACnBC,OAAOlD;QACPI,MAAMD;IACR;IACA4C,MAAMnD,IAAI,CAACuD,SAAS,GAAG5D,aACrBI,0BAA0BC,IAAI,EAC9BoD,OAAOpD,IAAI,EACXmD,MAAMN,QAAQ,IAAIO,OAAO/B,eAAe,EACxC8B,MAAMK,gBAAgB,GAAGH,aAAa7C,IAAI,CAACR,IAAI,GAAGqD,aAAaC,KAAK,CAACtD,IAAI,EACzEmD,MAAMnD,IAAI,CAACuD,SAAS;IAGtBJ,MAAMlD,MAAM,CAACsD,SAAS,GAAG5D,aACvBI,0BAA0BE,MAAM,EAChCmD,OAAOxB,WAAW,EAClBwB,OAAOnD,MAAM,EACbkD,MAAMN,QAAQ,IAAIO,OAAOP,QAAQ,EACjCM,MAAMlD,MAAM,CAACsD,SAAS;IAGxB,IAAIJ,MAAMjD,QAAQ,EAAE;QAClBiD,MAAMjD,QAAQ,CAACqD,SAAS,GAAG5D,aACzBI,0BAA0BG,QAAQ,EAClCkD,OAAOlD,QAAQ,EACfiD,MAAMjD,QAAQ,CAACqD,SAAS;IAE5B;IAEA,IAAIJ,MAAMhD,KAAK,EAAE;QACfgD,MAAMhD,KAAK,CAACoD,SAAS,GAAG5D,aAAaI,0BAA0BI,KAAK,EAAEiD,OAAOH,YAAY,EAAEE,MAAMhD,KAAK,CAACoD,SAAS;IAClH;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } 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    flex: '1 1 0px',\n    minWidth: '0px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    fontWeight: tokens.fontWeightRegular,\n    padding: `0px ${tokens.spacingHorizontalS}`,\n    ...createCustomFocusIndicatorStyle(\n      { outline: `2px solid ${tokens.colorStrokeFocus2}`, borderRadius: tokens.borderRadiusMedium },\n      { selector: 'focus-within' },\n    ),\n    position: 'relative',\n  },\n\n  rootInteractive: {\n    ':hover': {\n      color: tokens.colorNeutralForeground1Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground1Pressed,\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    overflow: 'visible',\n    padding: '0',\n    border: 'none',\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    gap: tokens.spacingHorizontalXS,\n    minHeight: '32px',\n    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  'use no memo';\n\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\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"],"names":["makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","display","verticalAlign","useFlexLayoutStyles","flex","minWidth","useStyles","fontWeight","fontWeightRegular","padding","spacingHorizontalS","outline","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","position","rootInteractive","color","colorNeutralForeground1Hover","backgroundColor","colorSubtleBackgroundHover","colorNeutralForeground1Pressed","colorSubtleBackgroundPressed","resetButton","resize","boxSizing","fontFamily","fontSize","lineHeight","overflow","border","textAlign","width","flexGrow","height","alignItems","gap","spacingHorizontalXS","minHeight","outlineStyle","sortable","cursor","paddingTop","spacingVerticalXXS","resizeHandle","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","className","noNativeElements"],"mappings":"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"}

package/lib/components/TableResizeHandle/TableResizeHandle.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTableResizeHandle_unstable } from './useTableResizeHandle';
 import { renderTableResizeHandle_unstable } from './renderTableResizeHandle';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableResizeHandle/TableResizeHandle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableResizeHandle_unstable } from './useTableResizeHandle';\nimport { renderTableResizeHandle_unstable } from './renderTableResizeHandle';\nimport { useTableResizeHandleStyles_unstable } from './useTableResizeHandleStyles.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"}
+{"version":3,"sources":["../src/components/TableResizeHandle/TableResizeHandle.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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/useTableResizeHandle.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableResizeHandle/useTableResizeHandle.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAMC,UAAUL,iBAAiB,CAACM;YAChCH;SAAAA,iBAAAA,MAAME,OAAO,cAAbF,qCAAAA,oBAAAA,OAAgBG;QAChBA,MAAMC,eAAe;IACvB;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfX,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,GAAGD,KAAK;YACRE;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/TableResizeHandle/useTableResizeHandle.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","useTableResizeHandle_unstable","props","ref","onClick","event","stopPropagation","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAG7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAMC,UAAUL,iBAAiB,CAACM;YAChCH;SAAAA,iBAAAA,MAAME,OAAO,cAAbF,qCAAAA,oBAAAA,OAAgBG;QAChBA,MAAMC,eAAe;IACvB;IACA,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfX,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,GAAGD,KAAK;YACRE;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tableResizeHandleClassNames = {

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","tableResizeHandleClassNames","root","useStyles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B3cna0y","Brovlpu","B7zu5sd","Bsft5z2","ap17g6","a2br6o","E3zdtr","Eqx8gd","bn5sak","By385i5","Bjyk6c5","d","p","f","h","useTableResizeHandleStyles_unstable","state","styles","className"],"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n    root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        bottom: 0,\n        width: '16px',\n        margin: '0 -8px',\n        cursor: 'col-resize',\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionDuration: '.2s',\n        zIndex: 1,\n        // If mouse users focus on the resize handle through a context menu, we want the handle\n        // to be visible because the mouse might not be hovering over the handle\n        ':focus': {\n            opacity: 1,\n            outlineStyle: 'none'\n        },\n        ':hover': {\n            opacity: 1\n        },\n        '::after': {\n            content: '\" \"',\n            display: 'block',\n            width: '1px',\n            position: 'absolute',\n            left: '50%',\n            top: 0,\n            bottom: 0,\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    }\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */ export const useTableResizeHandleStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAiCrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1BgC,KAAK,CAACjC,IAAI,CAACmC,SAAS,GAAGtC,YAAY,CAACE,2BAA2B,CAACC,IAAI,EAAEkC,MAAM,CAAClC,IAAI,EAAEiC,KAAK,CAACjC,IAAI,CAACmC,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","tableResizeHandleClassNames","root","useStyles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B3cna0y","Brovlpu","B7zu5sd","Bsft5z2","ap17g6","a2br6o","E3zdtr","Eqx8gd","bn5sak","By385i5","Bjyk6c5","d","p","f","h","useTableResizeHandleStyles_unstable","state","styles","className"],"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n    root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'absolute',\n        right: 0,\n        top: 0,\n        bottom: 0,\n        width: '16px',\n        margin: '0 -8px',\n        cursor: 'col-resize',\n        opacity: 0,\n        transitionProperty: 'opacity',\n        transitionDuration: '.2s',\n        zIndex: 1,\n        // If mouse users focus on the resize handle through a context menu, we want the handle\n        // to be visible because the mouse might not be hovering over the handle\n        ':focus': {\n            opacity: 1,\n            outlineStyle: 'none'\n        },\n        ':hover': {\n            opacity: 1\n        },\n        '::after': {\n            content: '\" \"',\n            display: 'block',\n            width: '1px',\n            position: 'absolute',\n            left: '50%',\n            top: 0,\n            bottom: 0,\n            backgroundColor: tokens.colorNeutralStroke1\n        }\n    }\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */ export const useTableResizeHandleStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAiCrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,aAAa;;EACb,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1BgC,KAAK,CAACjC,IAAI,CAACmC,SAAS,GAAGtC,YAAY,CAACE,2BAA2B,CAACC,IAAI,EAAEkC,MAAM,CAAClC,IAAI,EAAEiC,KAAK,CAACjC,IAAI,CAACmC,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tableResizeHandleClassNames = {

package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots> = {\n  root: 'fui-TableResizeHandle',\n  // TODO: add class names for all slots on TableResizeHandleSlots.\n  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: '16px',\n    margin: '0 -8px',\n    cursor: 'col-resize',\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: '.2s',\n    zIndex: 1,\n\n    // If mouse users focus on the resize handle through a context menu, we want the handle\n    // to be visible because the mouse might not be hovering over the handle\n    ':focus': {\n      opacity: 1,\n      outlineStyle: 'none',\n    },\n\n    ':hover': {\n      opacity: 1,\n    },\n\n    '::after': {\n      content: '\" \"',\n      display: 'block',\n      width: '1px',\n      position: 'absolute',\n      left: '50%',\n      top: 0,\n      bottom: 0,\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n});\n\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = (state: TableResizeHandleState): TableResizeHandleState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tableResizeHandleClassNames","root","useStyles","position","right","top","bottom","width","margin","cursor","opacity","transitionProperty","transitionDuration","zIndex","outlineStyle","content","display","left","backgroundColor","colorNeutralStroke1","useTableResizeHandleStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,UAAU;QACVC,OAAO;QACPC,KAAK;QACLC,QAAQ;QACRC,OAAO;QACPC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,oBAAoB;QACpBC,oBAAoB;QACpBC,QAAQ;QAER,uFAAuF;QACvF,wEAAwE;QACxE,UAAU;YACRH,SAAS;YACTI,cAAc;QAChB;QAEA,UAAU;YACRJ,SAAS;QACX;QAEA,WAAW;YACTK,SAAS;YACTC,SAAS;YACTT,OAAO;YACPJ,UAAU;YACVc,MAAM;YACNZ,KAAK;YACLC,QAAQ;YACRY,iBAAiBnB,OAAOoB,mBAAmB;QAC7C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,GAAGzB,aAAaE,4BAA4BC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACvG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TableResizeHandle/useTableResizeHandleStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableResizeHandleSlots, TableResizeHandleState } from './TableResizeHandle.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots> = {\n  root: 'fui-TableResizeHandle',\n  // TODO: add class names for all slots on TableResizeHandleSlots.\n  // Should be of the form `<slotName>: 'fui-TableResizeHandle__<slotName>`\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    bottom: 0,\n    width: '16px',\n    margin: '0 -8px',\n    cursor: 'col-resize',\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: '.2s',\n    zIndex: 1,\n\n    // If mouse users focus on the resize handle through a context menu, we want the handle\n    // to be visible because the mouse might not be hovering over the handle\n    ':focus': {\n      opacity: 1,\n      outlineStyle: 'none',\n    },\n\n    ':hover': {\n      opacity: 1,\n    },\n\n    '::after': {\n      content: '\" \"',\n      display: 'block',\n      width: '1px',\n      position: 'absolute',\n      left: '50%',\n      top: 0,\n      bottom: 0,\n      backgroundColor: tokens.colorNeutralStroke1,\n    },\n  },\n});\n\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */\nexport const useTableResizeHandleStyles_unstable = (state: TableResizeHandleState): TableResizeHandleState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","tableResizeHandleClassNames","root","useStyles","position","right","top","bottom","width","margin","cursor","opacity","transitionProperty","transitionDuration","zIndex","outlineStyle","content","display","left","backgroundColor","colorNeutralStroke1","useTableResizeHandleStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,8BAAsE;IACjFC,MAAM;AAGR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,UAAU;QACVC,OAAO;QACPC,KAAK;QACLC,QAAQ;QACRC,OAAO;QACPC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,oBAAoB;QACpBC,oBAAoB;QACpBC,QAAQ;QAER,uFAAuF;QACvF,wEAAwE;QACxE,UAAU;YACRH,SAAS;YACTI,cAAc;QAChB;QAEA,UAAU;YACRJ,SAAS;QACX;QAEA,WAAW;YACTK,SAAS;YACTC,SAAS;YACTT,OAAO;YACPJ,UAAU;YACVc,MAAM;YACNZ,KAAK;YACLC,QAAQ;YACRY,iBAAiBnB,OAAOoB,mBAAmB;QAC7C;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClD;IAEA,MAAMC,SAASpB;IACfmB,MAAMpB,IAAI,CAACsB,SAAS,GAAGzB,aAAaE,4BAA4BC,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACsB,SAAS;IACvG,OAAOF;AACT,EAAE"}

package/lib/components/TableRow/TableRow.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTableRow_unstable } from './useTableRow';
 import { renderTableRow_unstable } from './renderTableRow';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableRow/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"}
+{"version":3,"sources":["../src/components/TableRow/TableRow.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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/useTableRow.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\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","getIntrinsicElementProps","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,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,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;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,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"}
+{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, 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      getIntrinsicElementProps(rootComponent, {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\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","getIntrinsicElementProps","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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,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;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,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/TableRow/useTableRowStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","ze5xyy","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","medium","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","uu68id","Bxeuatn","felo30","Bc736ss","Bhz882k","n51gp8","Eshu5l","Bk6ri7n","v49c4f","Bn1d65q","c4eypz","v3aym","hft9gk","Bjwas2f","Bk5ld8o","gwxt9v","B6k8go","h6lo6r","Beo2b4z","w1pwid","Btyw6ap","Hkxhyr","Brwvgy3","yadkgm","neutral","none","p","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n    root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        boxSizing: 'border-box',\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ...createCustomFocusIndicatorStyle({\n            outline: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus'\n        })\n    },\n    rootInteractive: {\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        },\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        },\n        // High contrast styles\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight',\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    medium: {\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    },\n    small: {\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    },\n    'extra-small': {\n        fontSize: tokens.fontSizeBase200\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2,\n            color: tokens.colorNeutralForeground1\n        },\n        '@media(forced-colors: active)': {\n            border: '2px solid transparent',\n            borderRadius: tokens.borderRadiusMedium,\n            boxSizing: 'border-box',\n            ':focus-visible': {\n                outlineOffset: '-4px'\n            }\n        }\n    },\n    neutral: {\n        '@media(forced-colors: active)': {\n            border: '2px solid transparent',\n            borderRadius: tokens.borderRadiusMedium,\n            boxSizing: 'border-box',\n            ':focus-visible': {\n                outlineOffset: '-4px'\n            }\n        },\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground1Hover,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        },\n        ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n    },\n    none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,0BAA0B,QAAQ,sDAAsD;AACjG,SAASC,4BAA4B,QAAQ,0DAA0D;AACvG,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,iBAAiB,GAAG,cAAc;AAC/C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAEF;AACV,CAAC;AACD,MAAMG,oBAAoB,gBAAGV,QAAA;EAAAS,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAS,IAAA;IAAAE,MAAA;IAAAG,OAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAK3B,CAAC;AACF;AACA;AACA;AAAI,MAAMG,SAAS,gBAAGf,QAAA;EAAAS,IAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,eAAA;IAAAV,OAAA;IAAAW,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAJ,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA;IAAAE,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAT,OAAA;IAAAU,MAAA;IAAAxB,MAAA;IAAAC,MAAA;IAAAwB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAxB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA3B,MAAA;IAAAnC,MAAA;IAAAkB,MAAA;IAAAJ,MAAA;IAAAsB,MAAA;IAAAC,MAAA;IAAAT,OAAA;IAAAU,MAAA;EAAA;EAAA0B,IAAA;AAAA;EAAApE,CAAA;IAAAqE,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAH,CAAA;IAAAG,CAAA;EAAA;IAAAH,CAAA;IAAAG,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsGrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGxE,SAAS,CAAC,CAAC;EAC1B,MAAMyE,YAAY,GAAG;IACjBC,KAAK,EAAE/E,oBAAoB,CAAC,CAAC;IAC7BgF,IAAI,EAAE7E,mBAAmB,CAAC;EAC9B,CAAC;EACDyE,KAAK,CAAC7E,IAAI,CAACkF,SAAS,GAAG1F,YAAY,CAACO,kBAAkB,CAACC,IAAI,EAAE8E,MAAM,CAAC9E,IAAI,EAAE,CAAC6E,KAAK,CAACM,WAAW,IAAIL,MAAM,CAAC1D,eAAe,EAAE0D,MAAM,CAACD,KAAK,CAACO,IAAI,CAAC,EAAEP,KAAK,CAACQ,gBAAgB,GAAGN,YAAY,CAACE,IAAI,CAACjF,IAAI,GAAG+E,YAAY,CAACC,KAAK,CAAChF,IAAI,EAAE8E,MAAM,CAACD,KAAK,CAACS,UAAU,CAAC,EAAET,KAAK,CAAC7E,IAAI,CAACkF,SAAS,CAAC;EACtQ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","ze5xyy","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","medium","B9xav0g","oivjwe","Bn0qgzm","Bgfg5da","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","uu68id","Bxeuatn","felo30","Bc736ss","Bhz882k","n51gp8","Eshu5l","Bk6ri7n","v49c4f","Bn1d65q","c4eypz","v3aym","hft9gk","Bjwas2f","Bk5ld8o","gwxt9v","B6k8go","h6lo6r","Beo2b4z","w1pwid","Btyw6ap","Hkxhyr","Brwvgy3","yadkgm","neutral","none","p","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"sources":["useTableRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n    root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n    root: {\n        display: 'table-row'\n    }\n});\nconst useFlexLayoutStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForeground1,\n        boxSizing: 'border-box',\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ...createCustomFocusIndicatorStyle({\n            outline: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium\n        }, {\n            selector: 'focus'\n        })\n    },\n    rootInteractive: {\n        ...createCustomFocusIndicatorStyle({\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            }\n        }, {\n            selector: 'focus-within'\n        }),\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        },\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${tableCellActionsClassNames.root}`]: {\n                opacity: 1\n            },\n            [`& .${tableSelectionCellClassNames.root}`]: {\n                opacity: 1\n            }\n        },\n        // High contrast styles\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Highlight',\n                ...shorthands.borderColor('Highlight')\n            }\n        }\n    },\n    medium: {\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    },\n    small: {\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`\n    },\n    'extra-small': {\n        fontSize: tokens.fontSizeBase200\n    },\n    brand: {\n        backgroundColor: tokens.colorBrandBackground2,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        ':active': {\n            backgroundColor: tokens.colorBrandBackground2,\n            color: tokens.colorNeutralForeground1\n        },\n        '@media(forced-colors: active)': {\n            border: '2px solid transparent',\n            borderRadius: tokens.borderRadiusMedium,\n            boxSizing: 'border-box',\n            ':focus-visible': {\n                outlineOffset: '-4px'\n            }\n        }\n    },\n    neutral: {\n        '@media(forced-colors: active)': {\n            border: '2px solid transparent',\n            borderRadius: tokens.borderRadiusMedium,\n            boxSizing: 'border-box',\n            ':focus-visible': {\n                outlineOffset: '-4px'\n            }\n        },\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground1Hover,\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundSelected\n        },\n        ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)\n    },\n    none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyles = {\n        table: useTableLayoutStyles(),\n        flex: useFlexLayoutStyles()\n    };\n    state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';