@fluentui/react-nav 9.2.4 → 9.3.0

package/lib-commonjs/components/sharedNavStyles.styles.raw.js

@@ -0,0 +1,169 @@
+"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, {
+    navItemTokens: function() {
+        return navItemTokens;
+    },
+    useContentStyles: function() {
+        return useContentStyles;
+    },
+    useIconStyles: function() {
+        return useIconStyles;
+    },
+    useIndicatorStyles: function() {
+        return useIndicatorStyles;
+    },
+    useRootDefaultClassName: function() {
+        return useRootDefaultClassName;
+    },
+    useSmallStyles: function() {
+        return useSmallStyles;
+    }
+});
+const _reacticons = require("@fluentui/react-icons");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const navItemTokens = {
+    defaultDrawerWidth: 260,
+    indicatorOffset: 16,
+    indicatorWidth: 4,
+    indicatorHeight: 20,
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground4,
+    backgroundColorHover: _reacttheme.tokens.colorNeutralBackground4Hover,
+    backgroundColorPressed: _reacttheme.tokens.colorNeutralBackground4Pressed,
+    animationTokens: {
+        animationDuration: _reacttheme.tokens.durationFaster,
+        animationFillMode: 'both',
+        animationTimingFunction: _reacttheme.tokens.curveLinear
+    },
+    transitionTokens: {
+        transitionDuration: _reacttheme.tokens.durationFaster,
+        transitionTimingFunction: _reacttheme.tokens.curveLinear,
+        transitionProperty: 'background'
+    }
+};
+const useRootDefaultClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    textTransform: 'none',
+    position: 'relative',
+    justifyContent: 'start',
+    alignItems: 'flex-start',
+    textAlign: 'left',
+    gap: _reacttheme.tokens.spacingVerticalL,
+    padding: `${_reacttheme.tokens.spacingVerticalMNudge} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingVerticalMNudge} ${_reacttheme.tokens.spacingHorizontalMNudge}`,
+    backgroundColor: navItemTokens.backgroundColor,
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    textDecorationLine: 'none',
+    border: 'none',
+    // this element can change between a button and an anchor
+    // so we need to reset box sizing to prevent horizontal overflow
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    transitionDuration: navItemTokens.animationTokens.animationDuration,
+    transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,
+    transitionProperty: 'background',
+    width: '100%',
+    ..._reacttheme.typographyStyles.body1,
+    ':hover': {
+        backgroundColor: navItemTokens.backgroundColorHover
+    },
+    // Use custom insert focus indicator
+    '&:focus-visible': {
+        outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+        outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThick} * -1)`
+    }
+});
+const useSmallStyles = (0, _react.makeStyles)({
+    root: {
+        padding: `${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingHorizontalMNudge}`
+    }
+});
+const useContentStyles = (0, _react.makeStyles)({
+    selected: _reacttheme.typographyStyles.body1Strong
+});
+const useIndicatorStyles = (0, _react.makeStyles)({
+    base: {
+        '::after': {
+            position: 'absolute',
+            ...navItemTokens.animationTokens,
+            animationName: {
+                '0%': {
+                    background: 'transparent'
+                },
+                '100%': {
+                    background: _reacttheme.tokens.colorCompoundBrandForeground1
+                }
+            },
+            marginInlineStart: `-${navItemTokens.indicatorOffset}px`,
+            backgroundColor: _reacttheme.tokens.colorCompoundBrandForeground1,
+            height: `${navItemTokens.indicatorHeight}px`,
+            width: `${navItemTokens.indicatorWidth}px`,
+            borderRadius: _reacttheme.tokens.borderRadiusCircular,
+            content: '""'
+        },
+        '@media (forced-colors: active)': {
+            '::after': {
+                outline: `solid 2px ${_reacttheme.tokens.colorTransparentStroke}`,
+                outlineOffset: '-2px'
+            }
+        }
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    base: {
+        display: 'grid',
+        gridTemplateAreas: 'overlay-area',
+        minHeight: '20px',
+        minWidth: '20px',
+        alignItems: 'top',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        [`& .${_reacticons.iconFilledClassName}`]: {
+            gridArea: 'overlay-area',
+            color: 'transparent',
+            display: 'none'
+        },
+        [`& .${_reacticons.iconRegularClassName}`]: {
+            gridArea: 'overlay-area',
+            display: 'inline'
+        }
+    },
+    selected: {
+        [`& .${_reacticons.iconFilledClassName}`]: {
+            ...navItemTokens.animationTokens,
+            display: 'inline',
+            animationName: {
+                '0%': {
+                    opacity: 0,
+                    color: 'transparent'
+                },
+                '100%': {
+                    opacity: 1,
+                    color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
+                }
+            }
+        },
+        [`& .${_reacticons.iconRegularClassName}`]: {
+            ...navItemTokens.animationTokens,
+            animationName: {
+                '0%': {
+                    opacity: 1,
+                    color: _reacttheme.tokens.colorNeutralForeground2
+                },
+                '100%': {
+                    opacity: 0,
+                    color: 'transparent'
+                }
+            }
+        }
+    }
+});

package/lib-commonjs/components/sharedNavStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sharedNavStyles.styles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles } from '@griffel/react';\n\n// Styles shared by several nav components.\n\nexport const navItemTokens = {\n  defaultDrawerWidth: 260,\n  indicatorOffset: 16,\n  indicatorWidth: 4,\n  indicatorHeight: 20,\n  backgroundColor: tokens.colorNeutralBackground4,\n  backgroundColorHover: tokens.colorNeutralBackground4Hover,\n  backgroundColorPressed: tokens.colorNeutralBackground4Pressed,\n  animationTokens: {\n    animationDuration: tokens.durationFaster,\n    animationFillMode: 'both',\n    animationTimingFunction: tokens.curveLinear,\n  },\n  transitionTokens: {\n    transitionDuration: tokens.durationFaster,\n    transitionTimingFunction: tokens.curveLinear,\n    transitionProperty: 'background',\n  },\n};\n\n/**\n * Styles for the root slot\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */\nexport const useRootDefaultClassName = makeResetStyles({\n  display: 'flex',\n  textTransform: 'none',\n  position: 'relative',\n  justifyContent: 'start',\n  alignItems: 'flex-start',\n  textAlign: 'left',\n  gap: tokens.spacingVerticalL,\n  padding: `${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalMNudge} ${tokens.spacingHorizontalMNudge}`,\n  backgroundColor: navItemTokens.backgroundColor,\n  borderRadius: tokens.borderRadiusMedium,\n  color: tokens.colorNeutralForeground2,\n  textDecorationLine: 'none',\n  border: 'none',\n  // this element can change between a button and an anchor\n  // so we need to reset box sizing to prevent horizontal overflow\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n\n  transitionDuration: navItemTokens.animationTokens.animationDuration,\n  transitionTimingFunction: navItemTokens.animationTokens.animationTimingFunction,\n  transitionProperty: 'background',\n\n  width: '100%',\n  ...typographyStyles.body1,\n  ':hover': {\n    backgroundColor: navItemTokens.backgroundColorHover,\n  },\n\n  // Use custom insert focus indicator\n  '&:focus-visible': {\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n    outlineOffset: `calc(${tokens.strokeWidthThick} * -1)`,\n  },\n});\n\nexport const useSmallStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} ${tokens.spacingHorizontalMNudge}`,\n  },\n});\n\n/**\n * Styles for the content slot (children)\n * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem\n */\nexport const useContentStyles = makeStyles({\n  selected: typographyStyles.body1Strong,\n});\n\n/**\n * French fry styles\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n */\nexport const useIndicatorStyles = makeStyles({\n  base: {\n    '::after': {\n      position: 'absolute',\n      ...navItemTokens.animationTokens,\n      animationName: {\n        '0%': { background: 'transparent' },\n        '100%': { background: tokens.colorCompoundBrandForeground1 },\n      },\n\n      marginInlineStart: `-${navItemTokens.indicatorOffset}px`,\n      backgroundColor: tokens.colorCompoundBrandForeground1,\n      height: `${navItemTokens.indicatorHeight}px`,\n      width: `${navItemTokens.indicatorWidth}px`,\n      borderRadius: tokens.borderRadiusCircular,\n      content: '\"\"',\n    },\n    '@media (forced-colors: active)': {\n      '::after': {\n        outline: `solid 2px ${tokens.colorTransparentStroke}`,\n        outlineOffset: '-2px',\n      },\n    },\n  },\n});\n\n/**\n * Styles for the icon slot\n * Shared across NavItem, NavCategoryItem, and NavSubItem\n * We use the grid trick to stack the filled and regular icons on top of each other\n */\nexport const useIconStyles = makeStyles({\n  base: {\n    display: 'grid',\n    gridTemplateAreas: 'overlay-area',\n    minHeight: '20px',\n    minWidth: '20px',\n    alignItems: 'top',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    [`& .${iconFilledClassName}`]: {\n      gridArea: 'overlay-area',\n      color: 'transparent',\n      display: 'none',\n    },\n    [`& .${iconRegularClassName}`]: {\n      gridArea: 'overlay-area',\n      display: 'inline',\n    },\n  },\n  selected: {\n    [`& .${iconFilledClassName}`]: {\n      ...navItemTokens.animationTokens,\n      display: 'inline',\n      animationName: {\n        '0%': {\n          opacity: 0,\n          color: 'transparent',\n        },\n        '100%': {\n          opacity: 1,\n          color: tokens.colorNeutralForeground2BrandSelected,\n        },\n      },\n    },\n    [`& .${iconRegularClassName}`]: {\n      ...navItemTokens.animationTokens,\n      animationName: {\n        '0%': {\n          opacity: 1,\n          color: tokens.colorNeutralForeground2,\n        },\n        '100%': {\n          opacity: 0,\n          color: 'transparent',\n        },\n      },\n    },\n  },\n});\n"],"names":["navItemTokens","useContentStyles","useIconStyles","useIndicatorStyles","useRootDefaultClassName","useSmallStyles","defaultDrawerWidth","indicatorOffset","indicatorWidth","indicatorHeight","backgroundColor","tokens","colorNeutralBackground4","backgroundColorHover","colorNeutralBackground4Hover","backgroundColorPressed","colorNeutralBackground4Pressed","animationTokens","animationDuration","durationFaster","animationFillMode","animationTimingFunction","curveLinear","transitionTokens","transitionDuration","transitionTimingFunction","transitionProperty","makeResetStyles","display","textTransform","position","justifyContent","alignItems","textAlign","gap","spacingVerticalL","padding","spacingVerticalMNudge","spacingHorizontalS","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","color","colorNeutralForeground2","textDecorationLine","border","boxSizing","cursor","width","typographyStyles","body1","outline","strokeWidthThick","colorStrokeFocus2","outlineOffset","makeStyles","root","spacingVerticalXS","selected","body1Strong","base","animationName","background","colorCompoundBrandForeground1","marginInlineStart","height","borderRadiusCircular","content","colorTransparentStroke","gridTemplateAreas","minHeight","minWidth","overflow","iconFilledClassName","gridArea","iconRegularClassName","opacity","colorNeutralForeground2BrandSelected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-nav",
-  "version": "9.2.4",
+  "version": "9.3.0",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,18 +18,18 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "^9.15.3",
-    "@fluentui/react-button": "^9.5.3",
+    "@fluentui/react-aria": "^9.15.4",
+    "@fluentui/react-button": "^9.6.0",
     "@fluentui/react-context-selector": "^9.2.2",
-    "@fluentui/react-divider": "^9.3.2",
-    "@fluentui/react-drawer": "^9.8.8",
+    "@fluentui/react-divider": "^9.4.0",
+    "@fluentui/react-drawer": "^9.9.0",
     "@fluentui/react-icons": "^2.0.245",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-motion": "^9.9.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-tooltip": "^9.7.7",
+    "@fluentui/react-tooltip": "^9.8.0",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"