129 lines
4.1 KiB
JavaScript
129 lines
4.1 KiB
JavaScript
'use client';
|
|
"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, {
|
|
breadcrumbButtonClassNames: function() {
|
|
return breadcrumbButtonClassNames;
|
|
},
|
|
useBreadcrumbButtonStyles_unstable: function() {
|
|
return useBreadcrumbButtonStyles_unstable;
|
|
}
|
|
});
|
|
const _react = require("@griffel/react");
|
|
const _reactbutton = require("@fluentui/react-button");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const _reacticons = require("@fluentui/react-icons");
|
|
const breadcrumbButtonClassNames = {
|
|
root: 'fui-BreadcrumbButton',
|
|
icon: 'fui-BreadcrumbButton__icon'
|
|
};
|
|
/**
|
|
* CSS variable names used internally for styling in the Breadcrumb.
|
|
*/ const breadcrumbCSSVars = {
|
|
breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size',
|
|
breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height'
|
|
};
|
|
const useIconStyles = (0, _react.makeStyles)({
|
|
base: {
|
|
fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
|
|
height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
|
|
lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`,
|
|
width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
|
|
marginRight: _reacttheme.tokens.spacingHorizontalXS
|
|
},
|
|
small: {
|
|
[breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px',
|
|
[breadcrumbCSSVars.breadcrumbIconLineHeightVar]: _reacttheme.tokens.lineHeightBase200
|
|
},
|
|
medium: {
|
|
[breadcrumbCSSVars.breadcrumbIconSizeVar]: '16px',
|
|
[breadcrumbCSSVars.breadcrumbIconLineHeightVar]: _reacttheme.tokens.lineHeightBase400
|
|
},
|
|
large: {
|
|
[breadcrumbCSSVars.breadcrumbIconSizeVar]: '20px',
|
|
[breadcrumbCSSVars.breadcrumbIconLineHeightVar]: _reacttheme.tokens.lineHeightBase600
|
|
}
|
|
});
|
|
const defaultButtonStyles = {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
color: _reacttheme.tokens.colorNeutralForeground2,
|
|
cursor: 'auto'
|
|
};
|
|
const currentIconStyles = {
|
|
...defaultButtonStyles,
|
|
[`& .${_reactbutton.buttonClassNames.icon}`]: {
|
|
color: 'unset'
|
|
},
|
|
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
display: 'none'
|
|
},
|
|
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
display: 'inline'
|
|
}
|
|
};
|
|
const useStyles = (0, _react.makeStyles)({
|
|
root: {
|
|
minWidth: 'unset',
|
|
textWrap: 'nowrap'
|
|
},
|
|
small: {
|
|
height: '24px',
|
|
..._reacttheme.typographyStyles.caption1,
|
|
padding: _reacttheme.tokens.spacingHorizontalSNudge
|
|
},
|
|
medium: {
|
|
height: '32px',
|
|
..._reacttheme.typographyStyles.body1,
|
|
padding: _reacttheme.tokens.spacingHorizontalSNudge
|
|
},
|
|
large: {
|
|
height: '40px',
|
|
..._reacttheme.typographyStyles.body2,
|
|
padding: _reacttheme.tokens.spacingHorizontalS
|
|
},
|
|
current: {
|
|
':hover': {
|
|
...currentIconStyles
|
|
},
|
|
':hover:active': {
|
|
...currentIconStyles
|
|
},
|
|
':disabled': {
|
|
...currentIconStyles
|
|
}
|
|
},
|
|
currentSmall: {
|
|
..._reacttheme.typographyStyles.caption1Strong
|
|
},
|
|
currentMedium: {
|
|
..._reacttheme.typographyStyles.body1Strong
|
|
},
|
|
currentLarge: {
|
|
..._reacttheme.typographyStyles.subtitle2
|
|
}
|
|
});
|
|
const useBreadcrumbButtonStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const styles = useStyles();
|
|
const iconStyles = useIconStyles();
|
|
const currentSizeMap = {
|
|
small: styles.currentSmall,
|
|
medium: styles.currentMedium,
|
|
large: styles.currentLarge
|
|
};
|
|
state.root.className = (0, _react.mergeClasses)(breadcrumbButtonClassNames.root, styles[state.size], styles.root, state.current && currentSizeMap[state.size], state.current && styles.current, state.root.className);
|
|
if (state.icon) {
|
|
state.icon.className = (0, _react.mergeClasses)(iconStyles.base, iconStyles[state.size], state.icon.className);
|
|
}
|
|
(0, _reactbutton.useButtonStyles_unstable)(state);
|
|
return state;
|
|
};
|