@fluentui/react-tooltip 9.7.7 → 9.8.0

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-tooltip
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.8.0)
+
+Thu, 17 Jul 2025 13:45:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.7.7..@fluentui/react-tooltip_v9.8.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-portal to v9.7.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-positioning to v9.20.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.7.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.7.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.7.6..@fluentui/react-tooltip_v9.7.7)
 
 ### Patches

package/lib/components/Tooltip/useTooltipStyles.styles.raw.js

@@ -0,0 +1,47 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { createArrowStyles } from '@fluentui/react-positioning';
+import { tokens } from '@fluentui/react-theme';
+import { arrowHeight } from './private/constants';
+export const tooltipClassNames = {
+    content: 'fui-Tooltip__content'
+};
+/**
+ * Styles for the tooltip
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'none',
+        boxSizing: 'border-box',
+        maxWidth: '240px',
+        cursor: 'default',
+        fontFamily: tokens.fontFamilyBase,
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200,
+        overflowWrap: 'break-word',
+        borderRadius: tokens.borderRadiusMedium,
+        border: `1px solid ${tokens.colorTransparentStroke}`,
+        padding: '4px 11px 6px 11px',
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+        // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter
+        filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`
+    },
+    visible: {
+        display: 'block'
+    },
+    inverted: {
+        backgroundColor: tokens.colorNeutralBackgroundStatic,
+        color: tokens.colorNeutralForegroundStaticInverted
+    },
+    arrow: createArrowStyles({
+        arrowHeight
+    })
+});
+/**
+ * Apply styling to the Tooltip slots based on the state
+ */ export const useTooltipStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
+    state.arrowClassName = styles.arrow;
+    return state;
+};

package/lib/components/Tooltip/useTooltipStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tooltip/useTooltipStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tooltipClassNames: SlotClassNames<TooltipSlots> = {\n  content: 'fui-Tooltip__content',\n};\n\n/**\n * Styles for the tooltip\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'none',\n    boxSizing: 'border-box',\n    maxWidth: '240px',\n    cursor: 'default',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n    overflowWrap: 'break-word',\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    padding: '4px 11px 6px 11px', // '5px 12px 7px 12px' minus the border width '1px'\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n\n    // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n    filter:\n      `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n      `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`,\n  },\n\n  visible: {\n    display: 'block',\n  },\n\n  inverted: {\n    backgroundColor: tokens.colorNeutralBackgroundStatic,\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  arrow: createArrowStyles({ arrowHeight }),\n});\n\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = (state: TooltipState): TooltipState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.content.className = mergeClasses(\n    tooltipClassNames.content,\n    styles.root,\n    state.appearance === 'inverted' && styles.inverted,\n    state.visible && styles.visible,\n    state.content.className,\n  );\n\n  state.arrowClassName = styles.arrow;\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","root","display","boxSizing","maxWidth","cursor","fontFamily","fontFamilyBase","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","overflowWrap","borderRadius","borderRadiusMedium","border","colorTransparentStroke","padding","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","visible","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","arrow","useTooltipStyles_unstable","state","styles","className","appearance","arrowClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,WAAW,QAAQ,sBAAsB;AAIlD,OAAO,MAAMC,oBAAkD;IAC7DC,SAAS;AACX,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BQ,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACVC,QAAQ;QACRC,YAAYV,OAAOW,cAAc;QACjCC,UAAUZ,OAAOa,eAAe;QAChCC,YAAYd,OAAOe,iBAAiB;QACpCC,cAAc;QACdC,cAAcjB,OAAOkB,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEnB,OAAOoB,sBAAsB,CAAC,CAAC;QACpDC,SAAS;QACTC,iBAAiBtB,OAAOuB,uBAAuB;QAC/CC,OAAOxB,OAAOyB,uBAAuB;QAErC,uFAAuF;QACvFC,QACE,CAAC,oBAAoB,EAAE1B,OAAO2B,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,sBAAsB,EAAE3B,OAAO4B,qBAAqB,CAAC,CAAC,CAAC;IAC5D;IAEAC,SAAS;QACPvB,SAAS;IACX;IAEAwB,UAAU;QACRR,iBAAiBtB,OAAO+B,4BAA4B;QACpDP,OAAOxB,OAAOgC,oCAAoC;IACpD;IAEAC,OAAOlC,kBAAkB;QAAEE;IAAY;AACzC;AAEA;;CAEC,GACD,OAAO,MAAMiC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,SAAShC;IAEf+B,MAAMhC,OAAO,CAACkC,SAAS,GAAGvC,aACxBI,kBAAkBC,OAAO,EACzBiC,OAAO/B,IAAI,EACX8B,MAAMG,UAAU,KAAK,cAAcF,OAAON,QAAQ,EAClDK,MAAMN,OAAO,IAAIO,OAAOP,OAAO,EAC/BM,MAAMhC,OAAO,CAACkC,SAAS;IAGzBF,MAAMI,cAAc,GAAGH,OAAOH,KAAK;IAEnC,OAAOE;AACT,EAAE"}

package/lib-commonjs/components/Tooltip/useTooltipStyles.styles.raw.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tooltipClassNames: function() {
+        return tooltipClassNames;
+    },
+    useTooltipStyles_unstable: function() {
+        return useTooltipStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactpositioning = require("@fluentui/react-positioning");
+const _reacttheme = require("@fluentui/react-theme");
+const _constants = require("./private/constants");
+const tooltipClassNames = {
+    content: 'fui-Tooltip__content'
+};
+/**
+ * Styles for the tooltip
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'none',
+        boxSizing: 'border-box',
+        maxWidth: '240px',
+        cursor: 'default',
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        lineHeight: _reacttheme.tokens.lineHeightBase200,
+        overflowWrap: 'break-word',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        padding: '4px 11px 6px 11px',
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter
+        filter: `drop-shadow(0 0 2px ${_reacttheme.tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 4px 8px ${_reacttheme.tokens.colorNeutralShadowKey})`
+    },
+    visible: {
+        display: 'block'
+    },
+    inverted: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundStatic,
+        color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
+    },
+    arrow: (0, _reactpositioning.createArrowStyles)({
+        arrowHeight: _constants.arrowHeight
+    })
+});
+const useTooltipStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.content.className = (0, _react.mergeClasses)(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
+    state.arrowClassName = styles.arrow;
+    return state;
+};

package/lib-commonjs/components/Tooltip/useTooltipStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tooltip/useTooltipStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tooltipClassNames: SlotClassNames<TooltipSlots> = {\n  content: 'fui-Tooltip__content',\n};\n\n/**\n * Styles for the tooltip\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'none',\n    boxSizing: 'border-box',\n    maxWidth: '240px',\n    cursor: 'default',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n    overflowWrap: 'break-word',\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    padding: '4px 11px 6px 11px', // '5px 12px 7px 12px' minus the border width '1px'\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n\n    // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n    filter:\n      `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n      `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`,\n  },\n\n  visible: {\n    display: 'block',\n  },\n\n  inverted: {\n    backgroundColor: tokens.colorNeutralBackgroundStatic,\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  arrow: createArrowStyles({ arrowHeight }),\n});\n\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = (state: TooltipState): TooltipState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.content.className = mergeClasses(\n    tooltipClassNames.content,\n    styles.root,\n    state.appearance === 'inverted' && styles.inverted,\n    state.visible && styles.visible,\n    state.content.className,\n  );\n\n  state.arrowClassName = styles.arrow;\n\n  return state;\n};\n"],"names":["tooltipClassNames","useTooltipStyles_unstable","content","useStyles","makeStyles","root","display","boxSizing","maxWidth","cursor","fontFamily","tokens","fontFamilyBase","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","overflowWrap","borderRadius","borderRadiusMedium","border","colorTransparentStroke","padding","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","visible","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","arrow","createArrowStyles","arrowHeight","state","styles","className","mergeClasses","appearance","arrowClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,iBAAAA;eAAAA;;IA4CAC,yBAAAA;eAAAA;;;uBAnD4B;kCACP;4BACX;2BACK;AAIrB,MAAMD,oBAAkD;IAC7DE,SAAS;AACX;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACVC,QAAQ;QACRC,YAAYC,kBAAAA,CAAOC,cAAc;QACjCC,UAAUF,kBAAAA,CAAOG,eAAe;QAChCC,YAAYJ,kBAAAA,CAAOK,iBAAiB;QACpCC,cAAc;QACdC,cAAcP,kBAAAA,CAAOQ,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAET,kBAAAA,CAAOU,sBAAsB,CAAC,CAAC;QACpDC,SAAS;QACTC,iBAAiBZ,kBAAAA,CAAOa,uBAAuB;QAC/CC,OAAOd,kBAAAA,CAAOe,uBAAuB;QAErC,uFAAuF;QACvFC,QACE,CAAC,oBAAoB,EAAEhB,kBAAAA,CAAOiB,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,sBAAsB,EAAEjB,kBAAAA,CAAOkB,qBAAqB,CAAC,CAAC,CAAC;IAC5D;IAEAC,SAAS;QACPxB,SAAS;IACX;IAEAyB,UAAU;QACRR,iBAAiBZ,kBAAAA,CAAOqB,4BAA4B;QACpDP,OAAOd,kBAAAA,CAAOsB,oCAAoC;IACpD;IAEAC,OAAOC,IAAAA,mCAAAA,EAAkB;QAAEC,aAAAA,sBAAAA;IAAY;AACzC;AAKO,MAAMnC,4BAA4B,CAACoC;IACxC;IAEA,MAAMC,SAASnC;IAEfkC,MAAMnC,OAAO,CAACqC,SAAS,GAAGC,IAAAA,mBAAAA,EACxBxC,kBAAkBE,OAAO,EACzBoC,OAAOjC,IAAI,EACXgC,MAAMI,UAAU,KAAK,cAAcH,OAAOP,QAAQ,EAClDM,MAAMP,OAAO,IAAIQ,OAAOR,OAAO,EAC/BO,MAAMnC,OAAO,CAACqC,SAAS;IAGzBF,MAAMK,cAAc,GAAGJ,OAAOJ,KAAK;IAEnC,OAAOG;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tooltip",
-  "version": "9.7.7",
+  "version": "9.8.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,10 +20,10 @@
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
     "@fluentui/react-jsx-runtime": "^9.1.2",
-    "@fluentui/react-portal": "^9.6.4",
-    "@fluentui/react-positioning": "^9.19.0",
+    "@fluentui/react-portal": "^9.7.0",
+    "@fluentui/react-positioning": "^9.20.0",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",