421 lines
17 KiB
JavaScript
421 lines
17 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, {
|
|
cardCSSVars: function() {
|
|
return cardCSSVars;
|
|
},
|
|
cardClassNames: function() {
|
|
return cardClassNames;
|
|
},
|
|
useCardStyles_unstable: function() {
|
|
return useCardStyles_unstable;
|
|
}
|
|
});
|
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
const _react1 = require("@griffel/react");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const _reacttext = require("@fluentui/react-text");
|
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
const _useCardPreviewStylesstyles = require("../CardPreview/useCardPreviewStyles.styles");
|
|
const _useCardHeaderStylesstyles = require("../CardHeader/useCardHeaderStyles.styles");
|
|
const _useCardFooterStylesstyles = require("../CardFooter/useCardFooterStyles.styles");
|
|
const cardClassNames = {
|
|
root: 'fui-Card',
|
|
floatingAction: 'fui-Card__floatingAction',
|
|
checkbox: 'fui-Card__checkbox'
|
|
};
|
|
const cardCSSVars = {
|
|
cardSizeVar: '--fui-Card--size',
|
|
cardBorderRadiusVar: '--fui-Card--border-radius'
|
|
};
|
|
const focusOutlineStyle = {
|
|
outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
|
|
outlineWidth: _reacttheme.tokens.strokeWidthThick,
|
|
outlineOffset: '-2px'
|
|
};
|
|
const useCardResetStyles = (0, _react1.makeResetStyles)({
|
|
overflow: 'hidden',
|
|
borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
|
|
padding: `var(${cardCSSVars.cardSizeVar})`,
|
|
gap: `var(${cardCSSVars.cardSizeVar})`,
|
|
display: 'flex',
|
|
position: 'relative',
|
|
boxSizing: 'border-box',
|
|
color: _reacttheme.tokens.colorNeutralForeground1,
|
|
// Border setting using after pseudo element to allow CardPreview to render behind it.
|
|
'::after': {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
content: '""',
|
|
pointerEvents: 'none',
|
|
..._react1.shorthands.borderStyle('solid'),
|
|
..._react1.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin),
|
|
borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`
|
|
},
|
|
// Prevents CardHeader and CardFooter from shrinking.
|
|
[`> .${_useCardHeaderStylesstyles.cardHeaderClassNames.root}, > .${_useCardFooterStylesstyles.cardFooterClassNames.root}`]: {
|
|
flexShrink: 0
|
|
}
|
|
});
|
|
const disabledStyles = {
|
|
cursor: 'not-allowed',
|
|
userSelect: 'none',
|
|
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundDisabled,
|
|
boxShadow: _reacttheme.tokens.shadow2,
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
|
'::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
inset: 0,
|
|
zIndex: `calc(${_reacttheme.tokens.zIndexContent} + 1)`
|
|
},
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled)
|
|
}
|
|
};
|
|
const useCardStyles = (0, _react1.makeStyles)({
|
|
focused: {
|
|
...(0, _reacttabster.createFocusOutlineStyle)({
|
|
style: focusOutlineStyle,
|
|
selector: 'focus'
|
|
})
|
|
},
|
|
selectableFocused: (0, _reacttabster.createFocusOutlineStyle)({
|
|
style: focusOutlineStyle,
|
|
selector: 'focus-within'
|
|
}),
|
|
orientationHorizontal: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
// Remove vertical padding to keep CardPreview content flush with Card's borders.
|
|
[`> .${_useCardPreviewStylesstyles.cardPreviewClassNames.root}`]: {
|
|
marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
|
|
marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
|
|
},
|
|
// Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
|
|
// As such, the code below targets a CardPreview, when it's the first element.
|
|
// Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.
|
|
[`> :not([aria-hidden="true"]).${_useCardPreviewStylesstyles.cardPreviewClassNames.root}:first-of-type`]: {
|
|
marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
|
|
},
|
|
// Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
|
|
// As such, the code below targets a CardPreview, when it's the last element.
|
|
// Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.
|
|
[`> :not([aria-hidden="true"]).${_useCardPreviewStylesstyles.cardPreviewClassNames.root}:last-of-type`]: {
|
|
marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
|
|
},
|
|
// If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.
|
|
[`> .${_useCardHeaderStylesstyles.cardHeaderClassNames.root}:last-of-type, > .${_useCardFooterStylesstyles.cardFooterClassNames.root}:last-of-type`]: {
|
|
flexGrow: 1
|
|
}
|
|
},
|
|
orientationVertical: {
|
|
flexDirection: 'column',
|
|
// Remove lateral padding to keep CardPreview content flush with Card's borders.
|
|
[`> .${_useCardPreviewStylesstyles.cardPreviewClassNames.root}`]: {
|
|
marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
|
|
marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
|
|
},
|
|
// Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
|
|
// As such, the code below targets a CardPreview, when it's the first element.
|
|
// Since this is on vertical cards, the top padding is removed to keep the content flush with the border.
|
|
[`> :not([aria-hidden="true"]).${_useCardPreviewStylesstyles.cardPreviewClassNames.root}:first-of-type`]: {
|
|
marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
|
|
},
|
|
[`> .${cardClassNames.floatingAction} + .${_useCardPreviewStylesstyles.cardPreviewClassNames.root}`]: {
|
|
marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
|
|
},
|
|
// Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
|
|
// As such, the code below targets a CardPreview, when it's the first element.
|
|
// Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.
|
|
[`> :not([aria-hidden="true"]).${_useCardPreviewStylesstyles.cardPreviewClassNames.root}:last-of-type`]: {
|
|
marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
|
|
}
|
|
},
|
|
sizeSmall: {
|
|
[cardCSSVars.cardSizeVar]: '8px',
|
|
[cardCSSVars.cardBorderRadiusVar]: _reacttheme.tokens.borderRadiusSmall
|
|
},
|
|
sizeMedium: {
|
|
[cardCSSVars.cardSizeVar]: '12px',
|
|
[cardCSSVars.cardBorderRadiusVar]: _reacttheme.tokens.borderRadiusMedium
|
|
},
|
|
sizeLarge: {
|
|
[cardCSSVars.cardSizeVar]: '16px',
|
|
[cardCSSVars.cardBorderRadiusVar]: _reacttheme.tokens.borderRadiusLarge
|
|
},
|
|
interactive: {
|
|
[`& .${_reacttext.textClassNames.root}`]: {
|
|
color: 'currentColor'
|
|
}
|
|
},
|
|
filled: {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
boxShadow: _reacttheme.tokens.shadow4,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
|
|
}
|
|
},
|
|
filledInteractive: {
|
|
cursor: 'pointer',
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
|
|
boxShadow: _reacttheme.tokens.shadow4,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
|
|
},
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Hover,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
|
|
boxShadow: _reacttheme.tokens.shadow8
|
|
},
|
|
':active': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed
|
|
}
|
|
},
|
|
filledInteractiveSelected: {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
|
|
},
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Selected,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected
|
|
}
|
|
},
|
|
filledAlternative: {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground2,
|
|
boxShadow: _reacttheme.tokens.shadow4,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
|
|
}
|
|
},
|
|
filledAlternativeInteractive: {
|
|
cursor: 'pointer',
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground2,
|
|
boxShadow: _reacttheme.tokens.shadow4,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
|
|
},
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground2Hover,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground2Hover,
|
|
boxShadow: _reacttheme.tokens.shadow8
|
|
},
|
|
':active': {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground2Pressed
|
|
}
|
|
},
|
|
filledAlternativeInteractiveSelected: {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground2Selected,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
|
|
},
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground2Selected,
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground2Selected
|
|
}
|
|
},
|
|
outline: {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
boxShadow: 'none',
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
|
|
}
|
|
},
|
|
outlineInteractive: {
|
|
cursor: 'pointer',
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
boxShadow: 'none',
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
|
|
},
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Hover,
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover)
|
|
}
|
|
},
|
|
':active': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed)
|
|
}
|
|
}
|
|
},
|
|
outlineInteractiveSelected: {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
|
|
},
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Selected,
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected
|
|
}
|
|
},
|
|
outlineDisabled: {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
boxShadow: 'none',
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
|
|
'&:hover, &:active': {
|
|
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
|
|
boxShadow: 'none'
|
|
},
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled)
|
|
}
|
|
},
|
|
subtle: {
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackground,
|
|
boxShadow: 'none',
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
|
|
}
|
|
},
|
|
subtleInteractive: {
|
|
cursor: 'pointer',
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackground,
|
|
boxShadow: 'none',
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
|
|
},
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Hover,
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover
|
|
},
|
|
':active': {
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
|
|
}
|
|
},
|
|
subtleInteractiveSelected: {
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
|
|
'::after': {
|
|
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
|
|
},
|
|
':hover': {
|
|
color: _reacttheme.tokens.colorNeutralForeground1Selected,
|
|
backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected
|
|
}
|
|
},
|
|
highContrastSelected: {
|
|
'@media (forced-colors: active)': {
|
|
forcedColorAdjust: 'none',
|
|
backgroundColor: 'Highlight',
|
|
color: 'HighlightText',
|
|
[`& .${_useCardPreviewStylesstyles.cardPreviewClassNames.root}, & .${_useCardFooterStylesstyles.cardFooterClassNames.root}`]: {
|
|
forcedColorAdjust: 'auto'
|
|
},
|
|
'::after': {
|
|
..._react1.shorthands.borderColor('Highlight')
|
|
}
|
|
}
|
|
},
|
|
highContrastInteractive: {
|
|
'@media (forced-colors: active)': {
|
|
':hover, :active': {
|
|
forcedColorAdjust: 'none',
|
|
backgroundColor: 'Highlight',
|
|
color: 'HighlightText',
|
|
[`& .${_useCardPreviewStylesstyles.cardPreviewClassNames.root}, & .${_useCardFooterStylesstyles.cardFooterClassNames.root}`]: {
|
|
forcedColorAdjust: 'auto'
|
|
}
|
|
},
|
|
'::after': {
|
|
..._react1.shorthands.borderColor('Highlight')
|
|
}
|
|
}
|
|
},
|
|
select: {
|
|
position: 'absolute',
|
|
top: '4px',
|
|
right: '4px',
|
|
zIndex: _reacttheme.tokens.zIndexContent
|
|
},
|
|
hiddenCheckbox: {
|
|
overflow: 'hidden',
|
|
width: '1px',
|
|
height: '1px',
|
|
position: 'absolute',
|
|
clip: 'rect(0 0 0 0)',
|
|
clipPath: 'inset(50%)',
|
|
whiteSpace: 'nowrap'
|
|
},
|
|
disabled: {
|
|
...disabledStyles,
|
|
'&:hover, &:active': disabledStyles
|
|
}
|
|
});
|
|
const useCardStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const resetStyles = useCardResetStyles();
|
|
const styles = useCardStyles();
|
|
const orientationMap = {
|
|
horizontal: styles.orientationHorizontal,
|
|
vertical: styles.orientationVertical
|
|
};
|
|
const sizeMap = {
|
|
small: styles.sizeSmall,
|
|
medium: styles.sizeMedium,
|
|
large: styles.sizeLarge
|
|
};
|
|
const appearanceMap = {
|
|
filled: styles.filled,
|
|
'filled-alternative': styles.filledAlternative,
|
|
outline: styles.outline,
|
|
subtle: styles.subtle
|
|
};
|
|
const selectedMap = {
|
|
filled: styles.filledInteractiveSelected,
|
|
'filled-alternative': styles.filledAlternativeInteractiveSelected,
|
|
outline: styles.outlineInteractiveSelected,
|
|
subtle: styles.subtleInteractiveSelected
|
|
};
|
|
const interactiveMap = {
|
|
filled: styles.filledInteractive,
|
|
'filled-alternative': styles.filledAlternativeInteractive,
|
|
outline: styles.outlineInteractive,
|
|
subtle: styles.subtleInteractive
|
|
};
|
|
const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);
|
|
const focusedClassName = _react.useMemo(()=>{
|
|
if (state.disabled) {
|
|
return '';
|
|
}
|
|
if (state.selectable) {
|
|
if (state.selectFocused) {
|
|
return styles.selectableFocused;
|
|
}
|
|
return '';
|
|
}
|
|
return styles.focused;
|
|
}, [
|
|
state.disabled,
|
|
state.selectFocused,
|
|
state.selectable,
|
|
styles.focused,
|
|
styles.selectableFocused
|
|
]);
|
|
state.root.className = (0, _react1.mergeClasses)(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);
|
|
if (state.floatingAction) {
|
|
state.floatingAction.className = (0, _react1.mergeClasses)(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
|
|
}
|
|
if (state.checkbox) {
|
|
state.checkbox.className = (0, _react1.mergeClasses)(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
|
|
}
|
|
return state;
|
|
};
|