283 lines
12 KiB
JavaScript
283 lines
12 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, {
|
|
toggleButtonClassNames: function() {
|
|
return toggleButtonClassNames;
|
|
},
|
|
useToggleButtonStyles_unstable: function() {
|
|
return useToggleButtonStyles_unstable;
|
|
}
|
|
});
|
|
const _reacticons = require("@fluentui/react-icons");
|
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const _react = require("@griffel/react");
|
|
const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
|
|
const toggleButtonClassNames = {
|
|
root: 'fui-ToggleButton',
|
|
icon: 'fui-ToggleButton__icon'
|
|
};
|
|
const useRootCheckedStyles = (0, _react.makeStyles)({
|
|
// Base styles
|
|
base: {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
|
|
color: _reacttheme.tokens.colorNeutralForeground1Selected,
|
|
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin),
|
|
[`& .${_reacticons.iconFilledClassName}`]: {
|
|
display: 'inline'
|
|
},
|
|
[`& .${_reacticons.iconRegularClassName}`]: {
|
|
display: 'none'
|
|
},
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
|
|
color: _reacttheme.tokens.colorNeutralForeground1Hover
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
|
|
color: _reacttheme.tokens.colorNeutralForeground1Pressed
|
|
}
|
|
},
|
|
// High contrast styles
|
|
highContrast: {
|
|
'@media (forced-colors: active)': {
|
|
backgroundColor: 'Highlight',
|
|
..._react.shorthands.borderColor('Highlight'),
|
|
color: 'HighlightText',
|
|
forcedColorAdjust: 'none',
|
|
':hover': {
|
|
backgroundColor: 'HighlightText',
|
|
..._react.shorthands.borderColor('Highlight'),
|
|
color: 'Highlight'
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: 'HighlightText',
|
|
..._react.shorthands.borderColor('Highlight'),
|
|
color: 'Highlight'
|
|
},
|
|
':focus': {
|
|
border: '1px solid HighlightText',
|
|
outlineColor: 'Highlight'
|
|
}
|
|
}
|
|
},
|
|
// Appearance variations
|
|
outline: {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
|
|
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker),
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed
|
|
},
|
|
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
|
|
})
|
|
},
|
|
primary: {
|
|
backgroundColor: _reacttheme.tokens.colorBrandBackgroundSelected,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
}
|
|
},
|
|
secondary: {},
|
|
subtle: {
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForeground2Selected,
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForeground2Hover
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForeground2Pressed
|
|
}
|
|
},
|
|
transparent: {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected,
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForeground2BrandHover
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
|
|
}
|
|
}
|
|
});
|
|
const useCheckedAccessibleStyles = (0, _react.makeStyles)({
|
|
// Base styles
|
|
base: {
|
|
backgroundColor: _reacttheme.tokens.colorBrandBackground,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
}
|
|
},
|
|
// Appearance variations
|
|
outline: {
|
|
// There's no longer a reason to thicken the outline variant's border
|
|
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin)
|
|
},
|
|
primary: {
|
|
// primary has an inner stroke for the checked style
|
|
outline: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForegroundOnBrand}`,
|
|
outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThicker} * -1)`,
|
|
// need to not have the default focus style that removes the outline
|
|
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
outline: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForegroundOnBrand}`,
|
|
outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThickest} * -1)`
|
|
})
|
|
},
|
|
subtle: {
|
|
// override subtle-appearance-specific icon color on hover
|
|
':hover': {
|
|
[`& .${toggleButtonClassNames.icon}`]: {
|
|
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
}
|
|
}
|
|
},
|
|
transparent: {},
|
|
secondary: {}
|
|
});
|
|
const useRootDisabledStyles = (0, _react.makeStyles)({
|
|
// Base styles
|
|
base: {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
|
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
|
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
|
|
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
|
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
}
|
|
},
|
|
// Appearance variations
|
|
outline: {},
|
|
primary: {
|
|
..._react.shorthands.borderColor('transparent'),
|
|
':hover': {
|
|
..._react.shorthands.borderColor('transparent')
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
..._react.shorthands.borderColor('transparent')
|
|
}
|
|
},
|
|
secondary: {},
|
|
subtle: {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
|
|
..._react.shorthands.borderColor('transparent')
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
|
|
..._react.shorthands.borderColor('transparent')
|
|
}
|
|
},
|
|
transparent: {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
..._react.shorthands.borderColor('transparent'),
|
|
':hover': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
|
|
..._react.shorthands.borderColor('transparent')
|
|
},
|
|
':hover:active,:active:focus-visible': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
|
|
..._react.shorthands.borderColor('transparent')
|
|
}
|
|
}
|
|
});
|
|
const useIconCheckedStyles = (0, _react.makeStyles)({
|
|
// Appearance variations with isAccessible=false
|
|
subtleOrTransparent: {
|
|
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
|
|
},
|
|
// High contrast styles
|
|
highContrast: {
|
|
'@media (forced-colors: active)': {
|
|
forcedColorAdjust: 'auto'
|
|
}
|
|
}
|
|
});
|
|
const usePrimaryHighContrastStyles = (0, _react.makeStyles)({
|
|
// Do not use primary variant high contrast styles for toggle buttons
|
|
// otherwise there isn't enough difference between on/off states
|
|
base: {
|
|
'@media (forced-colors: active)': {
|
|
backgroundColor: 'ButtonFace',
|
|
..._react.shorthands.borderColor('ButtonBorder'),
|
|
color: 'ButtonText',
|
|
forcedColorAdjust: 'auto'
|
|
}
|
|
},
|
|
disabled: {
|
|
'@media (forced-colors: active)': {
|
|
..._react.shorthands.borderColor('GrayText'),
|
|
color: 'GrayText',
|
|
':focus': {
|
|
..._react.shorthands.borderColor('GrayText')
|
|
}
|
|
}
|
|
}
|
|
});
|
|
const useToggleButtonStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const rootCheckedStyles = useRootCheckedStyles();
|
|
const accessibleCheckedStyles = useCheckedAccessibleStyles();
|
|
const rootDisabledStyles = useRootDisabledStyles();
|
|
const iconCheckedStyles = useIconCheckedStyles();
|
|
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
|
|
const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
|
|
state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], state.root.className);
|
|
if (state.icon) {
|
|
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
|
|
}
|
|
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
|
|
return state;
|
|
};
|