198 lines
8.1 KiB
JavaScript
198 lines
8.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, {
|
|
checkboxClassNames: function() {
|
|
return checkboxClassNames;
|
|
},
|
|
useCheckboxStyles_unstable: function() {
|
|
return useCheckboxStyles_unstable;
|
|
}
|
|
});
|
|
const _react = require("@griffel/react");
|
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const checkboxClassNames = {
|
|
root: 'fui-Checkbox',
|
|
label: 'fui-Checkbox__label',
|
|
input: 'fui-Checkbox__input',
|
|
indicator: 'fui-Checkbox__indicator'
|
|
};
|
|
// CSS variables used internally in Checkbox's styles
|
|
const vars = {
|
|
indicatorColor: '--fui-Checkbox__indicator--color',
|
|
indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
|
|
indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
|
|
};
|
|
// The indicator size is used by the indicator and label styles
|
|
const indicatorSizeMedium = '16px';
|
|
const indicatorSizeLarge = '20px';
|
|
const useRootBaseClassName = (0, _react.makeResetStyles)({
|
|
position: 'relative',
|
|
display: 'inline-flex',
|
|
cursor: 'pointer',
|
|
maxWidth: 'fit-content',
|
|
verticalAlign: 'middle',
|
|
color: _reacttheme.tokens.colorNeutralForeground3,
|
|
...(0, _reacttabster.createFocusOutlineStyle)({
|
|
style: {},
|
|
selector: 'focus-within'
|
|
})
|
|
});
|
|
const useRootStyles = (0, _react.makeStyles)({
|
|
unchecked: {
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground2,
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
|
|
},
|
|
':active': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
|
|
}
|
|
},
|
|
checked: {
|
|
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
[vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackground,
|
|
[vars.indicatorColor]: _reacttheme.tokens.colorNeutralForegroundInverted,
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackground,
|
|
':hover': {
|
|
[vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackgroundHover,
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackgroundHover
|
|
},
|
|
':active': {
|
|
[vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed,
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed
|
|
}
|
|
},
|
|
mixed: {
|
|
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStroke,
|
|
[vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1,
|
|
':hover': {
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStrokeHover,
|
|
[vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1Hover
|
|
},
|
|
':active': {
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStrokePressed,
|
|
[vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1Pressed
|
|
}
|
|
},
|
|
disabled: {
|
|
cursor: 'default',
|
|
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
[vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeDisabled,
|
|
[vars.indicatorColor]: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
'@media (forced-colors: active)': {
|
|
color: 'GrayText',
|
|
[vars.indicatorColor]: 'GrayText'
|
|
}
|
|
}
|
|
});
|
|
const useInputBaseClassName = (0, _react.makeResetStyles)({
|
|
boxSizing: 'border-box',
|
|
cursor: 'inherit',
|
|
height: '100%',
|
|
margin: 0,
|
|
opacity: 0,
|
|
position: 'absolute',
|
|
top: 0,
|
|
// Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
|
|
// This is done so that clicking on that "empty space" still toggles the checkbox.
|
|
width: `calc(${indicatorSizeMedium} + 2 * ${_reacttheme.tokens.spacingHorizontalS})`
|
|
});
|
|
const useInputStyles = (0, _react.makeStyles)({
|
|
before: {
|
|
right: 0
|
|
},
|
|
after: {
|
|
left: 0
|
|
},
|
|
large: {
|
|
width: `calc(${indicatorSizeLarge} + 2 * ${_reacttheme.tokens.spacingHorizontalS})`
|
|
}
|
|
});
|
|
const useIndicatorBaseClassName = (0, _react.makeResetStyles)({
|
|
alignSelf: 'flex-start',
|
|
boxSizing: 'border-box',
|
|
flexShrink: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
color: `var(${vars.indicatorColor})`,
|
|
backgroundColor: `var(${vars.indicatorBackgroundColor})`,
|
|
borderColor: `var(${vars.indicatorBorderColor}, ${_reacttheme.tokens.colorNeutralStrokeAccessible})`,
|
|
borderStyle: 'solid',
|
|
borderWidth: _reacttheme.tokens.strokeWidthThin,
|
|
borderRadius: _reacttheme.tokens.borderRadiusSmall,
|
|
margin: _reacttheme.tokens.spacingVerticalS + ' ' + _reacttheme.tokens.spacingHorizontalS,
|
|
fill: 'currentColor',
|
|
pointerEvents: 'none',
|
|
fontSize: '12px',
|
|
height: indicatorSizeMedium,
|
|
width: indicatorSizeMedium
|
|
});
|
|
const useIndicatorStyles = (0, _react.makeStyles)({
|
|
large: {
|
|
fontSize: '16px',
|
|
height: indicatorSizeLarge,
|
|
width: indicatorSizeLarge
|
|
},
|
|
circular: {
|
|
borderRadius: _reacttheme.tokens.borderRadiusCircular
|
|
}
|
|
});
|
|
// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
const useLabelStyles = (0, _react.makeStyles)({
|
|
base: {
|
|
alignSelf: 'center',
|
|
color: 'inherit',
|
|
cursor: 'inherit',
|
|
padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`
|
|
},
|
|
before: {
|
|
paddingRight: _reacttheme.tokens.spacingHorizontalXS
|
|
},
|
|
after: {
|
|
paddingLeft: _reacttheme.tokens.spacingHorizontalXS
|
|
},
|
|
// Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
|
|
// This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.
|
|
medium: {
|
|
marginTop: `calc((${indicatorSizeMedium} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
|
|
marginBottom: `calc((${indicatorSizeMedium} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`
|
|
},
|
|
large: {
|
|
marginTop: `calc((${indicatorSizeLarge} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
|
|
marginBottom: `calc((${indicatorSizeLarge} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`
|
|
}
|
|
});
|
|
const useCheckboxStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const { checked, disabled, labelPosition, shape, size } = state;
|
|
const rootBaseClassName = useRootBaseClassName();
|
|
const rootStyles = useRootStyles();
|
|
state.root.className = (0, _react.mergeClasses)(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
|
|
const inputBaseClassName = useInputBaseClassName();
|
|
const inputStyles = useInputStyles();
|
|
state.input.className = (0, _react.mergeClasses)(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
|
|
const indicatorBaseClassName = useIndicatorBaseClassName();
|
|
const indicatorStyles = useIndicatorStyles();
|
|
if (state.indicator) {
|
|
state.indicator.className = (0, _react.mergeClasses)(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
|
|
}
|
|
const labelStyles = useLabelStyles();
|
|
if (state.label) {
|
|
state.label.className = (0, _react.mergeClasses)(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
|
|
}
|
|
return state;
|
|
};
|