Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,17 @@
'use client';
import * as React from 'react';
import { useCard_unstable } from './useCard';
import { renderCard_unstable } from './renderCard';
import { useCardStyles_unstable } from './useCardStyles.styles';
import { useCardContextValue } from './useCardContextValue';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* A card provides scaffolding for hosting actions and content for a single topic.
*/ export const Card = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useCard_unstable(props, ref);
const cardContextValue = useCardContextValue(state);
useCardStyles_unstable(state);
useCustomStyleHook_unstable('useCardStyles_unstable')(state);
return renderCard_unstable(state, cardContextValue);
});
Card.displayName = 'Card';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n\n useCardStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardStyles_unstable')(state);\n\n return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","useCustomStyleHook_unstable","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAiB,CAACC,OAAOC;IAC3F,MAAMC,QAAQT,iBAAiBO,OAAOC;IACtC,MAAME,mBAAmBP,oBAAoBM;IAE7CP,uBAAuBO;IAEvBL,4BAA4B,0BAA0BK;IAEtD,OAAOR,oBAAoBQ,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

View File

@@ -0,0 +1 @@
import * as React from 'react';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/Card.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n selectableA11yProps: {\n referenceId?: string;\n setReferenceId: (referenceId: string) => void;\n referenceLabel?: string;\n setReferenceLabel: (referenceLabel: string) => void;\n };\n}\n\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Floating action that can be rendered on the top-right of a card. Often used together with\n * `selected`, `defaultSelected`, and `onSelectionChange` props\n */\n floatingAction?: Slot<'div'>;\n\n /**\n * The internal checkbox element that renders when the card is selectable.\n */\n checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n /**\n * Sets the appearance of the card.\n *\n * `filled`\n * The card will have a shadow, border and background color.\n *\n * `filled-alternative`\n * This appearance is similar to `filled`, but the background color will be a little darker.\n *\n * `outline`\n * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n *\n * `subtle`\n * This appearance is similar to `filled-alternative`, but no border is applied.\n *\n * @default 'filled'\n */\n appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card.\n *\n * `off`\n * The card will not focusable.\n *\n * `no-tab`\n * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n * pressing the Escape key.\n *\n * `tab-exit`\n * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n * the Tab key on the last inner element.\n *\n * `tab-only`\n * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n * after the last inner element.\n *\n * @default 'off'\n */\n focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n /**\n * Defines the orientation of the card.\n *\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical';\n\n /**\n * Controls the card's border radius and padding between inner elements.\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Defines the controlled selected state of the card.\n *\n * @default false\n */\n selected?: boolean;\n\n /**\n * Defines whether the card is initially in a selected state when rendered.\n *\n * @default false\n */\n defaultSelected?: boolean;\n\n /**\n * Callback to be called when the selected state value changes.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n\n /**\n * Makes the card and card selection disabled (not propagated to children).\n *\n * @default false\n */\n disabled?: boolean;\n};\n\nexport type CardBaseProps = Omit<CardProps, 'appearance' | 'orientation' | 'size'>;\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n CardContextValue &\n Required<\n Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n /**\n * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n *\n * @default false\n */\n interactive: boolean;\n\n /**\n * Represents a selectable card.\n *\n * @default false\n */\n selectable: boolean;\n\n /**\n * Defines whether the card is currently selected.\n *\n * @default false\n */\n selected: boolean;\n\n /**\n * Defines whether the card internal checkbox is currently focused.\n *\n * @default false\n */\n selectFocused: boolean;\n\n /**\n * Defines whether the card is disabled.\n *\n * @default false\n */\n disabled: boolean;\n }\n >;\n\nexport type CardBaseState = Omit<CardState, 'appearance' | 'orientation' | 'size'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,24 @@
'use client';
import * as React from 'react';
const cardContext = React.createContext(undefined);
/**
* @internal
*/ export const cardContextDefaultValue = {
selectableA11yProps: {
referenceId: undefined,
setReferenceId () {
/* Noop */ },
referenceLabel: undefined,
setReferenceLabel () {
/* Noop */ }
}
};
/**
* @internal
*/ export const CardProvider = cardContext.Provider;
/**
* @internal
*/ export const useCardContext_unstable = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/CardContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n selectableA11yProps: {\n referenceId: undefined,\n setReferenceId() {\n /* Noop */\n },\n referenceLabel: undefined,\n setReferenceLabel() {\n /* Noop */\n },\n },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = (): CardContextValue => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,cAAcD,MAAME,aAAa,CAA+BC;AAEtE;;CAEC,GACD,OAAO,MAAMC,0BAA4C;IACvDC,qBAAqB;QACnBC,aAAaH;QACbI;QACE,QAAQ,GACV;QACAC,gBAAgBL;QAChBM;QACE,QAAQ,GACV;IACF;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,eAAeT,YAAYU,QAAQ,CAAC;AAEjD;;CAEC,GACD,OAAO,MAAMC,0BAA0B;QAAwBZ;WAAAA,CAAAA,oBAAAA,MAAMa,UAAU,CAACZ,0BAAjBD,+BAAAA,oBAAiCI;EAAwB"}

View File

@@ -0,0 +1,5 @@
export { Card } from './Card';
export { CardProvider, cardContextDefaultValue, useCardContext_unstable } from './CardContext';
export { renderCard_unstable } from './renderCard';
export { useCard_unstable, useCardBase_unstable } from './useCard';
export { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/index.ts"],"sourcesContent":["export { Card } from './Card';\nexport type {\n CardBaseProps,\n CardBaseState,\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n} from './Card.types';\nexport { CardProvider, cardContextDefaultValue, useCardContext_unstable } from './CardContext';\nexport { renderCard_unstable } from './renderCard';\nexport { useCard_unstable, useCardBase_unstable } from './useCard';\nexport { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';\n"],"names":["Card","CardProvider","cardContextDefaultValue","useCardContext_unstable","renderCard_unstable","useCard_unstable","useCardBase_unstable","cardCSSVars","cardClassNames","useCardStyles_unstable"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAW9B,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,gBAAgB;AAC/F,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,EAAEC,oBAAoB,QAAQ,YAAY;AACnE,SAASC,WAAW,EAAEC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}

View File

@@ -0,0 +1,18 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { CardProvider } from './CardContext';
/**
* Render the final JSX of Card.
*/ export const renderCard_unstable = (state, cardContextValue)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {
children: /*#__PURE__*/ _jsxs(CardProvider, {
value: cardContextValue,
children: [
state.checkbox ? /*#__PURE__*/ _jsx(state.checkbox, {}) : null,
state.floatingAction ? /*#__PURE__*/ _jsx(state.floatingAction, {}) : null,
state.root.children
]
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/renderCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardBaseState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardBaseState, cardContextValue: CardContextValue): JSXElement => {\n assertSlots<CardSlots>(state);\n\n return (\n <state.root>\n <CardProvider value={cardContextValue}>\n {state.checkbox ? <state.checkbox /> : null}\n {state.floatingAction ? <state.floatingAction /> : null}\n {state.root.children}\n </CardProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CardProvider","renderCard_unstable","state","cardContextValue","root","value","checkbox","floatingAction","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAsBC;IACxDJ,YAAuBG;IAEvB,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,MAACJ;YAAaK,OAAOF;;gBAClBD,MAAMI,QAAQ,iBAAG,KAACJ,MAAMI,QAAQ,QAAM;gBACtCJ,MAAMK,cAAc,iBAAG,KAACL,MAAMK,cAAc,QAAM;gBAClDL,MAAME,IAAI,CAACI,QAAQ;;;;AAI5B,EAAE"}

View File

@@ -0,0 +1,132 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
import { useCardSelectable } from './useCardSelectable';
import { cardContextDefaultValue } from './CardContext';
const focusMap = {
off: undefined,
'no-tab': 'limited-trap-focus',
'tab-exit': 'limited',
'tab-only': 'unlimited'
};
/**
* Create the state for interactive cards.
*
* This internal hook defines if the card is interactive
* and control focus properties based on that.
*
* @param props - props from this instance of Card
*/ const useCardInteractive = ({ focusMode: initialFocusMode, disabled = false, ...props })=>{
const interactive = [
'onClick',
'onDoubleClick',
'onMouseUp',
'onMouseDown',
'onPointerUp',
'onPointerDown',
'onTouchStart',
'onTouchEnd',
'onDragStart',
'onDragEnd'
].some((prop)=>props[prop]);
// default focusMode to tab-only when interactive, and off when not
const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
const groupperAttrs = useFocusableGroup({
tabBehavior: focusMap[focusMode]
});
if (disabled) {
return {
interactive: false,
focusAttributes: null
};
}
if (focusMode === 'off') {
return {
interactive,
focusAttributes: null
};
}
return {
interactive,
focusAttributes: {
...groupperAttrs,
tabIndex: 0
}
};
};
/**
* Create the state required to render Card.
*
* The returned state can be modified with hooks such as useCardStyles_unstable,
* before being passed to renderCard_unstable.
*
* @param props - props from this instance of Card
* @param ref - reference to the root element of Card
*/ export const useCard_unstable = (props, ref)=>{
const { appearance = 'filled', orientation = 'vertical', size = 'medium', ...cardProps } = props;
const state = useCardBase_unstable(cardProps, ref);
return {
...state,
appearance,
orientation,
size
};
};
/**
* Base hook for Card component, which manages state related to interactivity, selection,
* focus management, ARIA attributes, and slot structure without design props.
*
* @param props - props from this instance of Card
* @param ref - reference to the root element of Card
*/ export const useCardBase_unstable = (props, ref)=>{
const { disabled = false, ...restProps } = props;
const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
const cardBaseRef = useFocusWithin();
const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = useCardSelectable(props, {
referenceId,
referenceLabel
}, cardBaseRef);
const cardRef = useMergedRefs(cardBaseRef, ref);
const { interactive, focusAttributes } = useCardInteractive(props);
let cardRootProps = {
...!selectable ? focusAttributes : null,
...restProps,
...selectableCardProps
};
if (disabled) {
cardRootProps = {
...restProps,
'aria-disabled': true,
onClick: undefined
};
}
return {
interactive,
selectable,
selectFocused,
selected,
disabled,
selectableA11yProps: {
setReferenceId,
referenceId,
referenceLabel,
setReferenceLabel
},
components: {
root: 'div',
floatingAction: 'div',
checkbox: 'input'
},
root: slot.always(getIntrinsicElementProps('div', {
ref: cardRef,
role: 'group',
...cardRootProps
}), {
elementType: 'div'
}),
floatingAction: floatingActionSlot,
checkbox: checkboxSlot
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,5 @@
export function useCardContextValue({ selectableA11yProps }) {
return {
selectableA11yProps
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/useCardContextValue.ts"],"sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n return { selectableA11yProps };\n}\n"],"names":["useCardContextValue","selectableA11yProps"],"mappings":"AAEA,OAAO,SAASA,oBAAoB,EAAEC,mBAAmB,EAAa;IACpE,OAAO;QAAEA;IAAoB;AAC/B"}

View File

@@ -0,0 +1,141 @@
'use client';
import * as React from 'react';
import { mergeCallbacks, slot, useControllableState } from '@fluentui/react-utilities';
import { Enter } from '@fluentui/keyboard-keys';
import { useFocusFinders } from '@fluentui/react-tabster';
/**
* Create the state related to selectable cards.
*
* This internal hook controls all the logic for selectable cards and is
* intended to be used alongside with useCard_unstable.
*
* @internal
* @param props - props from this instance of Card
* @param a11yProps - accessibility props shared between elements of the card
* @param cardRef - reference to the root element of Card
*/ export const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown, disabled } = props;
const { findAllFocusable } = useFocusFinders();
const checkboxRef = React.useRef(null);
const [selected, setSelected] = useControllableState({
state: props.selected,
defaultState: props.defaultSelected,
initialState: false
});
const selectable = [
props.selected,
props.defaultSelected,
onSelectionChange
].some((prop)=>typeof prop !== 'undefined');
const [selectFocused, setSelectFocused] = React.useState(false);
const shouldRestrictTriggerAction = React.useCallback((event)=>{
if (!cardRef.current) {
return false;
}
const focusableElements = findAllFocusable(cardRef.current);
const target = event.target;
const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
return isElementInFocusableGroup && !isCheckboxSlot;
}, [
cardRef,
findAllFocusable
]);
const onChangeHandler = React.useCallback((event)=>{
if (disabled || shouldRestrictTriggerAction(event)) {
return;
}
const newCheckedValue = !selected;
setSelected(newCheckedValue);
if (onSelectionChange) {
onSelectionChange(event, {
selected: newCheckedValue
});
}
}, [
disabled,
onSelectionChange,
selected,
setSelected,
shouldRestrictTriggerAction
]);
const onKeyDownHandler = React.useCallback((event)=>{
if ([
Enter
].includes(event.key)) {
event.preventDefault();
onChangeHandler(event);
}
}, [
onChangeHandler
]);
const checkboxSlot = React.useMemo(()=>{
if (!selectable || floatingAction) {
return;
}
const selectableCheckboxProps = {};
if (referenceId) {
selectableCheckboxProps['aria-labelledby'] = referenceId;
} else if (referenceLabel) {
selectableCheckboxProps['aria-label'] = referenceLabel;
}
return slot.optional(checkbox, {
defaultProps: {
ref: checkboxRef,
type: 'checkbox',
checked: selected,
disabled,
onChange: (event)=>onChangeHandler(event),
onFocus: ()=>setSelectFocused(true),
onBlur: ()=>setSelectFocused(false),
...selectableCheckboxProps
},
elementType: 'input'
});
}, [
checkbox,
disabled,
floatingAction,
selected,
selectable,
onChangeHandler,
referenceId,
referenceLabel
]);
const floatingActionSlot = React.useMemo(()=>{
if (!floatingAction) {
return;
}
return slot.optional(floatingAction, {
defaultProps: {
ref: checkboxRef
},
elementType: 'div'
});
}, [
floatingAction
]);
const selectableCardProps = React.useMemo(()=>{
if (!selectable) {
return null;
}
return {
onClick: mergeCallbacks(onClick, onChangeHandler),
onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
};
}, [
selectable,
onChangeHandler,
onClick,
onKeyDown,
onKeyDownHandler
]);
return {
selected,
selectable,
selectFocused,
selectableCardProps,
checkboxSlot,
floatingActionSlot
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,499 @@
'use client';
import * as React from 'react';
import { shorthands, __styles, mergeClasses, __resetStyles } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { textClassNames } from '@fluentui/react-text';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
/**
* Static CSS class names used internally for the component slots.
*/
export const cardClassNames = {
root: 'fui-Card',
floatingAction: 'fui-Card__floatingAction',
checkbox: 'fui-Card__checkbox'
};
/**
* CSS variable names used internally for uniform styling in Card.
*/
export const cardCSSVars = {
cardSizeVar: '--fui-Card--size',
cardBorderRadiusVar: '--fui-Card--border-radius'
};
const focusOutlineStyle = {
outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
outlineWidth: tokens.strokeWidthThick,
outlineOffset: '-2px'
};
const useCardResetStyles = /*#__PURE__*/__resetStyles("rfxo2k2", "rgle7w9", [".rfxo2k2{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--colorNeutralForeground1);}", ".rfxo2k2::after{position:absolute;top:0;left:0;right:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}", ".rfxo2k2>.fui-CardHeader,.rfxo2k2>.fui-CardFooter{flex-shrink:0;}", ".rgle7w9{overflow:hidden;border-radius:var(--fui-Card--border-radius);padding:var(--fui-Card--size);gap:var(--fui-Card--size);display:flex;position:relative;box-sizing:border-box;color:var(--colorNeutralForeground1);}", ".rgle7w9::after{position:absolute;top:0;right:0;left:0;bottom:0;content:\"\";pointer-events:none;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:var(--strokeWidthThin);border-left-width:var(--strokeWidthThin);border-bottom-width:var(--strokeWidthThin);border-right-width:var(--strokeWidthThin);border-radius:var(--fui-Card--border-radius);}", ".rgle7w9>.fui-CardHeader,.rgle7w9>.fui-CardFooter{flex-shrink:0;}"]);
const disabledStyles = {
cursor: 'not-allowed',
userSelect: 'none',
color: tokens.colorNeutralForegroundDisabled,
backgroundColor: tokens.colorNeutralBackgroundDisabled,
boxShadow: tokens.shadow2,
... /*#__PURE__*/shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
'::before': {
content: '""',
position: 'absolute',
inset: 0,
zIndex: `calc(${tokens.zIndexContent} + 1)`
},
'::after': {
... /*#__PURE__*/shorthands.borderColor(tokens.colorNeutralStrokeDisabled)
}
};
const useCardStyles = /*#__PURE__*/__styles({
focused: {
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
B8q5s1w: "f8hki3x",
Bci5o5g: ["f1d2448m", "ffh67wi"],
n8qw10: "f1bjia2o",
Bdrgwmp: ["ffh67wi", "f1d2448m"],
Bqhya38: "f1j6vpng",
Bwxa6fj: ["f1pniga2", "f1ffjurs"],
Bdhvstf: "f987i1v",
B7zbvrb: ["f1ffjurs", "f1pniga2"],
Bm4h7ae: "f15bsgw9",
B7ys5i9: "f14e48fq",
Busjfv9: "f18yb2kv",
Bhk32uz: "fd6o370",
f6g5ot: 0,
Boxcth7: 0,
Bhdgwq3: 0,
hgwjuy: 0,
Bshpdp8: 0,
Bsom6fd: 0,
Blkhhs4: 0,
Bonggc9: 0,
Ddfuxk: 0,
i03rao: 0,
kclons: 0,
clg4pj: 0,
Bpqj9nj: 0,
B6dhp37: 0,
Bf4ptjt: 0,
Bqtpl0w: 0,
i4rwgc: "fpqizxz",
Dah5zi: 0,
B1tsrr9: 0,
qqdqy8: 0,
Bkh64rk: 0,
e3fwne: "fnd8nzh",
J0r882: "f15fr7a0",
Bule8hv: ["fwsq40z", "fy0y4wt"],
Bjwuhne: "f34ld9f",
Ghsupd: ["fy0y4wt", "fwsq40z"]
},
selectableFocused: {
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
Bssx7fj: "f1b1k54r",
uh7if5: ["f4ne723", "fqqcjud"],
clntm0: "fh7aioi",
Dlk2r6: ["fqqcjud", "f4ne723"],
h6p2u: "f1ufm4qn",
I6qiy5: ["f1qnwcb4", "fgrk5zm"],
yzno9d: "fi52z01",
By0wis0: ["fgrk5zm", "f1qnwcb4"],
B2j2mmj: "ffht0p2",
wigs8: "f1p0ul1q",
pbfy6t: "f1c901ms",
B0v4ure: "f1alokd7",
Byrf0fs: 0,
Bsiemmq: 0,
Bwckmig: 0,
skfxo0: 0,
Iidy0u: 0,
B98u21t: 0,
Bvwlmkc: 0,
jo1ztg: 0,
Ba1iezr: 0,
Blmvk6g: 0,
B24cy0v: 0,
Bil7v7r: 0,
Br3gin4: 0,
nr063g: 0,
ghq09: 0,
Bbgo44z: 0,
Bseh09z: "f1i978nd",
az1dzo: 0,
Ba3ybja: 0,
B6352mv: 0,
vppk2z: 0,
Biaj6j7: "f1nh8hsq",
B2pnrqr: "f1amxum7",
B29w5g4: ["f1cec8w7", "f554mv0"],
Bhhzhcn: "f1sj6kbr",
Bec0n69: ["f554mv0", "f1cec8w7"]
},
orientationHorizontal: {
Beiy3e4: "f1063pyq",
Bt984gj: "f122n59",
Binpb3b: "ftrw7vg",
qrt8p2: "f18opajm",
k6ws3r: ["f13002it", "fqo182t"],
Btcwela: ["f18yna97", "f1kd6wh7"],
Fer9m8: "f4i4759"
},
orientationVertical: {
Beiy3e4: "f1vx9l62",
B5nvv7i: ["f14k419y", "f1fgo9fz"],
Baxg94k: ["f1fgo9fz", "f14k419y"],
tn21ii: "fvqmfsm",
B0ud6bj: "f3am6yf",
Bgdo4j: "f1r5wgso"
},
sizeSmall: {
B7balbw: "f1pi9uxy",
B1h88n7: "f1h1zgly"
},
sizeMedium: {
B7balbw: "frsmuga",
B1h88n7: "fuldkky"
},
sizeLarge: {
B7balbw: "f1qua4xo",
B1h88n7: "fimkt6v"
},
interactive: {
rhjd8f: "f1epqm3e"
},
filled: {
De3pzq: "fxugw4r",
E5pizo: "f1whvlc6",
B0n5ga8: "f16gxe2i",
s924m2: ["fpgykix", "fzybk4o"],
B1q35kw: "f1osi826",
Gp14am: ["fzybk4o", "fpgykix"]
},
filledInteractive: {
Bceei9c: "f1k6fduh",
De3pzq: "fxugw4r",
E5pizo: "f1whvlc6",
B0n5ga8: "f16gxe2i",
s924m2: ["fpgykix", "fzybk4o"],
B1q35kw: "f1osi826",
Gp14am: ["fzybk4o", "fpgykix"],
Bi91k9c: "feu1g3u",
Jwef8y: "f1knas48",
Bvxd0ez: "f1m145df",
ecr2s2: "fb40n2d"
},
filledInteractiveSelected: {
De3pzq: "f1nfm20t",
B0n5ga8: "f16eln5f",
s924m2: ["fa2okxs", "fg4zq3l"],
B1q35kw: "ff6932p",
Gp14am: ["fg4zq3l", "fa2okxs"],
Bi91k9c: "fx9teim",
Jwef8y: "f1kz6goq"
},
filledAlternative: {
De3pzq: "f1dmdbja",
E5pizo: "f1whvlc6",
B0n5ga8: "f16gxe2i",
s924m2: ["fpgykix", "fzybk4o"],
B1q35kw: "f1osi826",
Gp14am: ["fzybk4o", "fpgykix"]
},
filledAlternativeInteractive: {
Bceei9c: "f1k6fduh",
De3pzq: "f1dmdbja",
E5pizo: "f1whvlc6",
B0n5ga8: "f16gxe2i",
s924m2: ["fpgykix", "fzybk4o"],
B1q35kw: "f1osi826",
Gp14am: ["fzybk4o", "fpgykix"],
Bi91k9c: "fnwyq0v",
Jwef8y: "f1uvynv3",
Bvxd0ez: "f1m145df",
ecr2s2: "f1yhgkbh"
},
filledAlternativeInteractiveSelected: {
De3pzq: "fjxa0vh",
B0n5ga8: "f16eln5f",
s924m2: ["fa2okxs", "fg4zq3l"],
B1q35kw: "ff6932p",
Gp14am: ["fg4zq3l", "fa2okxs"],
Bi91k9c: "f1luvkty",
Jwef8y: "fehi0vp"
},
outline: {
De3pzq: "f1c21dwh",
E5pizo: "f1couhl3",
B0n5ga8: "ft83z1f",
s924m2: ["f1g4150c", "f192dr6e"],
B1q35kw: "f1qnawh6",
Gp14am: ["f192dr6e", "f1g4150c"]
},
outlineInteractive: {
Bceei9c: "f1k6fduh",
De3pzq: "f1c21dwh",
E5pizo: "f1couhl3",
B0n5ga8: "ft83z1f",
s924m2: ["f1g4150c", "f192dr6e"],
B1q35kw: "f1qnawh6",
Gp14am: ["f192dr6e", "f1g4150c"],
Bi91k9c: "feu1g3u",
Jwef8y: "fjxutwb",
Be0v6ae: "f1llr77y",
B5kxglz: ["fzk0khw", "fjj8tog"],
B3pwyw6: "fb1u8ub",
Bymgtzf: ["fjj8tog", "fzk0khw"],
ecr2s2: "fophhak",
dmfk: "f1uohb70",
B4ofi8: ["f1jm7v1n", "f1bus3rq"],
jgq6uv: "f1fbu7rr",
Baxewws: ["f1bus3rq", "f1jm7v1n"]
},
outlineInteractiveSelected: {
De3pzq: "f1q9pm1r",
B0n5ga8: "f16eln5f",
s924m2: ["fa2okxs", "fg4zq3l"],
B1q35kw: "ff6932p",
Gp14am: ["fg4zq3l", "fa2okxs"],
Bi91k9c: "fx9teim",
Jwef8y: "fg59vm4"
},
outlineDisabled: {
De3pzq: "f1c21dwh",
E5pizo: "f1couhl3",
g2u3we: "f1jj8ep1",
h3c5rm: ["f15xbau", "fy0fskl"],
B9xav0g: "f4ikngz",
zhjwy3: ["fy0fskl", "f15xbau"],
ezxybo: "f1ls5moo",
wc7uws: "f1qiza15",
B0n5ga8: "f13dj02",
s924m2: ["f9wngki", "f17v59j0"],
B1q35kw: "f1vxzwsp",
Gp14am: ["f17v59j0", "f9wngki"]
},
subtle: {
De3pzq: "fhovq9v",
E5pizo: "f1couhl3",
B0n5ga8: "f16gxe2i",
s924m2: ["fpgykix", "fzybk4o"],
B1q35kw: "f1osi826",
Gp14am: ["fzybk4o", "fpgykix"]
},
subtleInteractive: {
Bceei9c: "f1k6fduh",
De3pzq: "fhovq9v",
E5pizo: "f1couhl3",
B0n5ga8: "f16gxe2i",
s924m2: ["fpgykix", "fzybk4o"],
B1q35kw: "f1osi826",
Gp14am: ["fzybk4o", "fpgykix"],
Bi91k9c: "feu1g3u",
Jwef8y: "f1t94bn6",
ecr2s2: "f1wfn5kd"
},
subtleInteractiveSelected: {
De3pzq: "fq5gl1p",
B0n5ga8: "f16eln5f",
s924m2: ["fa2okxs", "fg4zq3l"],
B1q35kw: "ff6932p",
Gp14am: ["fg4zq3l", "fa2okxs"],
Bi91k9c: "fx9teim",
Jwef8y: "f1uqaxdt"
},
highContrastSelected: {
B8gzw0y: "f1h3a8gf",
By8wz76: "f1nz3ub2",
B7iucu3: "fqc85l4",
Boo9lyk: "f1ucc5z8",
sga51p: "fyj59f4",
qj1yg9: ["f19v95gn", "f1n69f6i"],
B8acmzm: "f16q7dot",
Gezqo6: ["f1n69f6i", "f19v95gn"]
},
highContrastInteractive: {
waf3gn: "f1quqgnd",
B96h8j5: "f193utb4",
Bpd3jnq: "f1io67iv",
uhbujs: "f3n01jk",
sga51p: "fyj59f4",
qj1yg9: ["f19v95gn", "f1n69f6i"],
B8acmzm: "f16q7dot",
Gezqo6: ["f1n69f6i", "f19v95gn"]
},
select: {
qhf8xq: "f1euv43f",
Bhzewxz: "fqclxi7",
j35jbq: ["fiv86kb", "f36uhnt"],
Bj3rh1h: "fom9my7"
},
hiddenCheckbox: {
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
a9b677: "frkrog8",
Bqenvij: "f1mpe4l3",
qhf8xq: "f1euv43f",
Bh84pgu: "fmf1zke",
Bgl5zvf: "f1wch0ki",
Huce71: "fz5stix"
},
disabled: {
Bceei9c: "fdrzuqr",
famaaq: "f1xqy1su",
sj55zd: "f1s2aq7o",
De3pzq: "f1bg9a2p",
E5pizo: "fyed02w",
g2u3we: "f1jj8ep1",
h3c5rm: ["f15xbau", "fy0fskl"],
B9xav0g: "f4ikngz",
zhjwy3: ["fy0fskl", "f15xbau"],
Ftih45: "f1wl9k8s",
Brfgrao: "f1j7ml58",
lawp4y: 0,
Fbdkly: 0,
mdwyqc: 0,
Bciustq: 0,
gc50h5: "f13vvzas",
Ehzi8l: "f198lalb",
B0n5ga8: "f13dj02",
s924m2: ["f9wngki", "f17v59j0"],
B1q35kw: "f1vxzwsp",
Gp14am: ["f17v59j0", "f9wngki"],
Bikrtoi: "f11og98d",
G8qf51: "f1rg3h4v",
Brxh4y7: "fbm2y3b",
ezxybo: "f4yodeu",
wc7uws: "fcwfbwp",
gp3uxg: "f1repx37",
Fohawp: ["f1ybi8ct", "f1h4eg6q"],
Bxulg6k: "f18mejnb",
vcjq4m: ["f1h4eg6q", "f1ybi8ct"],
Bsqkqe9: "f1nift3m",
fskg1g: "f1wu3i8x",
iwiei9: 0,
Effecx: 0,
Bkt1b9m: 0,
jfmxvr: 0,
orauir: "f6v4vfa",
B2yd9ot: "folrdqs",
Fn9tzk: "f168z5yf",
Bv0wker: ["fpor7gj", "fzextn6"],
Bp2dl5b: "f1yaw79v",
pzn0iz: ["fzextn6", "fpor7gj"]
}
}, {
f: [".ftqa4ok:focus{outline-style:none;}"],
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
d: [".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", [".fpqizxz[data-fui-focus-visible]::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
p: -2
}], [".fnd8nzh[data-fui-focus-visible]::after{border-radius:var(--fui-Card--border-radius);}", {
p: -1
}], ".f15fr7a0[data-fui-focus-visible]::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".fwsq40z[data-fui-focus-visible]::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".fy0y4wt[data-fui-focus-visible]::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f34ld9f[data-fui-focus-visible]::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".f1i978nd[data-fui-focus-within]:focus-within::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
p: -2
}], [".f1nh8hsq[data-fui-focus-within]:focus-within::after{border-radius:var(--fui-Card--border-radius);}", {
p: -1
}], ".f1amxum7[data-fui-focus-within]:focus-within::after{top:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1cec8w7[data-fui-focus-within]:focus-within::after{right:calc(0px - var(--strokeWidthThick) - -2px);}", ".f554mv0[data-fui-focus-within]:focus-within::after{left:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1sj6kbr[data-fui-focus-within]:focus-within::after{bottom:calc(0px - var(--strokeWidthThick) - -2px);}", ".f1063pyq{flex-direction:row;}", ".f122n59{align-items:center;}", ".ftrw7vg>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f18opajm>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f13002it>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".fqo182t>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f18yna97>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1kd6wh7>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f4i4759>.fui-CardHeader:last-of-type,.f4i4759>.fui-CardFooter:last-of-type{flex-grow:1;}", ".f1vx9l62{flex-direction:column;}", ".f14k419y>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1fgo9fz>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".fvqmfsm>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".f3am6yf>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1r5wgso>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".f1epqm3e .fui-Text{color:currentColor;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1k6fduh{cursor:pointer;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f13dj02::after{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f9wngki::after{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f17v59j0::after{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1vxzwsp::after{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".fom9my7{z-index:var(--zIndexContent, 1);}", [".f1a3p1vp{overflow:hidden;}", {
p: -1
}], ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}", ".fdrzuqr{cursor:not-allowed;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".fyed02w{box-shadow:var(--shadow2);}", ".f1wl9k8s::before{content:\"\";}", ".f1j7ml58::before{position:absolute;}", [".f13vvzas::before{inset:0;}", {
p: -1
}], ".f198lalb::before{z-index:calc(var(--zIndexContent, 1) + 1);}"],
m: [["@media (forced-colors: active){.f1j6vpng[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ffjurs[data-fui-focus-visible]::after{border-left-color:Highlight;}.f1pniga2[data-fui-focus-visible]::after{border-right-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f987i1v[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ufm4qn[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1qnwcb4[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}.fgrk5zm[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fi52z01[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1h3a8gf{forced-color-adjust:none;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1ucc5z8 .fui-CardPreview,.f1ucc5z8 .fui-CardFooter{forced-color-adjust:auto;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fyj59f4::after{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f19v95gn::after{border-right-color:Highlight;}.f1n69f6i::after{border-left-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f16q7dot::after{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1quqgnd:hover,.f1quqgnd :active{forced-color-adjust:none;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f193utb4:hover,.f193utb4 :active{background-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1io67iv:hover,.f1io67iv :active{color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f3n01jk:hover .fui-CardPreview,.f3n01jk :active .fui-CardPreview,.f3n01jk:hover .fui-CardFooter,.f3n01jk :active .fui-CardFooter{forced-color-adjust:auto;}}", {
m: "(forced-colors: active)"
}]],
h: [".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".fx9teim:hover{color:var(--colorNeutralForeground1Selected);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".f1luvkty:hover{color:var(--colorNeutralForeground2Selected);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1ls5moo:hover,.f1ls5moo:active{background-color:var(--colorTransparentBackground);}", ".f1qiza15:hover,.f1qiza15:active{box-shadow:none;}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}", ".f11og98d:hover,.f11og98d:active{cursor:not-allowed;}", ".f1rg3h4v:hover,.f1rg3h4v:active{-webkit-user-select:none;-moz-user-select:none;user-select:none;}", ".fbm2y3b:hover,.fbm2y3b:active{color:var(--colorNeutralForegroundDisabled);}", ".f4yodeu:hover,.f4yodeu:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fcwfbwp:hover,.fcwfbwp:active{box-shadow:var(--shadow2);}", ".f1repx37:hover,.f1repx37:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ybi8ct:hover,.f1ybi8ct:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1h4eg6q:hover,.f1h4eg6q:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f18mejnb:hover,.f18mejnb:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1nift3m:hover::before,.f1nift3m:active::before{content:\"\";}", ".f1wu3i8x:hover::before,.f1wu3i8x:active::before{position:absolute;}", [".f6v4vfa:hover::before,.f6v4vfa:active::before{inset:0;}", {
p: -1
}], ".folrdqs:hover::before,.folrdqs:active::before{z-index:calc(var(--zIndexContent, 1) + 1);}", ".f168z5yf:hover::after,.f168z5yf:active::after{border-top-color:var(--colorNeutralStrokeDisabled);}", ".fpor7gj:hover::after,.fpor7gj:active::after{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzextn6:hover::after,.fzextn6:active::after{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1yaw79v:hover::after,.f1yaw79v:active::after{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
});
/**
* Apply styling to the Card slots based on the state.
*/
export 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 = 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 = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
}
if (state.checkbox) {
state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,404 @@
'use client';
import * as React from 'react';
import { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { textClassNames } from '@fluentui/react-text';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
/**
* Static CSS class names used internally for the component slots.
*/ export const cardClassNames = {
root: 'fui-Card',
floatingAction: 'fui-Card__floatingAction',
checkbox: 'fui-Card__checkbox'
};
/**
* CSS variable names used internally for uniform styling in Card.
*/ export const cardCSSVars = {
cardSizeVar: '--fui-Card--size',
cardBorderRadiusVar: '--fui-Card--border-radius'
};
const focusOutlineStyle = {
outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
outlineWidth: tokens.strokeWidthThick,
outlineOffset: '-2px'
};
const useCardResetStyles = makeResetStyles({
overflow: 'hidden',
borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
padding: `var(${cardCSSVars.cardSizeVar})`,
gap: `var(${cardCSSVars.cardSizeVar})`,
display: 'flex',
position: 'relative',
boxSizing: 'border-box',
color: 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',
...shorthands.borderStyle('solid'),
...shorthands.borderWidth(tokens.strokeWidthThin),
borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`
},
// Prevents CardHeader and CardFooter from shrinking.
[`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {
flexShrink: 0
}
});
const disabledStyles = {
cursor: 'not-allowed',
userSelect: 'none',
color: tokens.colorNeutralForegroundDisabled,
backgroundColor: tokens.colorNeutralBackgroundDisabled,
boxShadow: tokens.shadow2,
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
'::before': {
content: '""',
position: 'absolute',
inset: 0,
zIndex: `calc(${tokens.zIndexContent} + 1)`
},
'::after': {
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)
}
};
const useCardStyles = makeStyles({
focused: {
...createFocusOutlineStyle({
style: focusOutlineStyle,
selector: 'focus'
})
},
selectableFocused: createFocusOutlineStyle({
style: focusOutlineStyle,
selector: 'focus-within'
}),
orientationHorizontal: {
flexDirection: 'row',
alignItems: 'center',
// Remove vertical padding to keep CardPreview content flush with Card's borders.
[`> .${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"]).${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"]).${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.
[`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {
flexGrow: 1
}
},
orientationVertical: {
flexDirection: 'column',
// Remove lateral padding to keep CardPreview content flush with Card's borders.
[`> .${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"]).${cardPreviewClassNames.root}:first-of-type`]: {
marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
},
[`> .${cardClassNames.floatingAction} + .${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"]).${cardPreviewClassNames.root}:last-of-type`]: {
marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
}
},
sizeSmall: {
[cardCSSVars.cardSizeVar]: '8px',
[cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall
},
sizeMedium: {
[cardCSSVars.cardSizeVar]: '12px',
[cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium
},
sizeLarge: {
[cardCSSVars.cardSizeVar]: '16px',
[cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge
},
interactive: {
[`& .${textClassNames.root}`]: {
color: 'currentColor'
}
},
filled: {
backgroundColor: tokens.colorNeutralBackground1,
boxShadow: tokens.shadow4,
'::after': {
...shorthands.borderColor(tokens.colorTransparentStroke)
}
},
filledInteractive: {
cursor: 'pointer',
backgroundColor: tokens.colorNeutralBackground1,
boxShadow: tokens.shadow4,
'::after': {
...shorthands.borderColor(tokens.colorTransparentStroke)
},
':hover': {
color: tokens.colorNeutralForeground1Hover,
backgroundColor: tokens.colorNeutralBackground1Hover,
boxShadow: tokens.shadow8
},
':active': {
backgroundColor: tokens.colorNeutralBackground1Pressed
}
},
filledInteractiveSelected: {
backgroundColor: tokens.colorNeutralBackground1Selected,
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
},
':hover': {
color: tokens.colorNeutralForeground1Selected,
backgroundColor: tokens.colorNeutralBackground1Selected
}
},
filledAlternative: {
backgroundColor: tokens.colorNeutralBackground2,
boxShadow: tokens.shadow4,
'::after': {
...shorthands.borderColor(tokens.colorTransparentStroke)
}
},
filledAlternativeInteractive: {
cursor: 'pointer',
backgroundColor: tokens.colorNeutralBackground2,
boxShadow: tokens.shadow4,
'::after': {
...shorthands.borderColor(tokens.colorTransparentStroke)
},
':hover': {
color: tokens.colorNeutralForeground2Hover,
backgroundColor: tokens.colorNeutralBackground2Hover,
boxShadow: tokens.shadow8
},
':active': {
backgroundColor: tokens.colorNeutralBackground2Pressed
}
},
filledAlternativeInteractiveSelected: {
backgroundColor: tokens.colorNeutralBackground2Selected,
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
},
':hover': {
color: tokens.colorNeutralForeground2Selected,
backgroundColor: tokens.colorNeutralBackground2Selected
}
},
outline: {
backgroundColor: tokens.colorTransparentBackground,
boxShadow: 'none',
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1)
}
},
outlineInteractive: {
cursor: 'pointer',
backgroundColor: tokens.colorTransparentBackground,
boxShadow: 'none',
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1)
},
':hover': {
color: tokens.colorNeutralForeground1Hover,
backgroundColor: tokens.colorTransparentBackgroundHover,
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1Hover)
}
},
':active': {
backgroundColor: tokens.colorTransparentBackgroundPressed,
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)
}
}
},
outlineInteractiveSelected: {
backgroundColor: tokens.colorTransparentBackgroundSelected,
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
},
':hover': {
color: tokens.colorNeutralForeground1Selected,
backgroundColor: tokens.colorTransparentBackgroundSelected
}
},
outlineDisabled: {
backgroundColor: tokens.colorTransparentBackground,
boxShadow: 'none',
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
'&:hover, &:active': {
backgroundColor: tokens.colorTransparentBackground,
boxShadow: 'none'
},
'::after': {
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)
}
},
subtle: {
backgroundColor: tokens.colorSubtleBackground,
boxShadow: 'none',
'::after': {
...shorthands.borderColor(tokens.colorTransparentStroke)
}
},
subtleInteractive: {
cursor: 'pointer',
backgroundColor: tokens.colorSubtleBackground,
boxShadow: 'none',
'::after': {
...shorthands.borderColor(tokens.colorTransparentStroke)
},
':hover': {
color: tokens.colorNeutralForeground1Hover,
backgroundColor: tokens.colorSubtleBackgroundHover
},
':active': {
backgroundColor: tokens.colorSubtleBackgroundPressed
}
},
subtleInteractiveSelected: {
backgroundColor: tokens.colorSubtleBackgroundSelected,
'::after': {
...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
},
':hover': {
color: tokens.colorNeutralForeground1Selected,
backgroundColor: tokens.colorSubtleBackgroundSelected
}
},
highContrastSelected: {
'@media (forced-colors: active)': {
forcedColorAdjust: 'none',
backgroundColor: 'Highlight',
color: 'HighlightText',
[`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {
forcedColorAdjust: 'auto'
},
'::after': {
...shorthands.borderColor('Highlight')
}
}
},
highContrastInteractive: {
'@media (forced-colors: active)': {
':hover, :active': {
forcedColorAdjust: 'none',
backgroundColor: 'Highlight',
color: 'HighlightText',
[`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {
forcedColorAdjust: 'auto'
}
},
'::after': {
...shorthands.borderColor('Highlight')
}
}
},
select: {
position: 'absolute',
top: '4px',
right: '4px',
zIndex: 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
}
});
/**
* Apply styling to the Card slots based on the state.
*/ export 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 = 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 = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
}
if (state.checkbox) {
state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCardFooter_unstable } from './useCardFooter';
import { renderCardFooter_unstable } from './renderCardFooter';
import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Component to render Button actions in a Card component.
*/ export const CardFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useCardFooter_unstable(props, ref);
useCardFooterStyles_unstable(state);
useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);
return renderCardFooter_unstable(state);
});
CardFooter.displayName = 'CardFooter';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n const state = useCardFooter_unstable(props, ref);\n\n useCardFooterStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);\n\n return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","useCustomStyleHook_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* CardFooter base state (same as CardFooterState since CardFooter has no design props)
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/CardFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardFooter component.\n */\nexport type CardFooterSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Container that renders on the far end of the footer, used for action buttons.\n */\n action?: Slot<'div'>;\n};\n\n/**\n * CardFooter component props.\n */\nexport type CardFooterProps = ComponentProps<CardFooterSlots>;\n\n/**\n * CardFooter base props (same as CardFooterProps since CardFooter has no design props)\n */\nexport type CardFooterBaseProps = CardFooterProps;\n\n/**\n * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n\n/**\n * CardFooter base state (same as CardFooterState since CardFooter has no design props)\n */\nexport type CardFooterBaseState = CardFooterState;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAkD"}

View File

@@ -0,0 +1,4 @@
export { CardFooter } from './CardFooter';
export { renderCardFooter_unstable } from './renderCardFooter';
export { useCardFooter_unstable, useCardFooterBase_unstable } from './useCardFooter';
export { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/index.ts"],"sourcesContent":["export { CardFooter } from './CardFooter';\nexport type {\n CardFooterBaseProps,\n CardFooterBaseState,\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n} from './CardFooter.types';\nexport { renderCardFooter_unstable } from './renderCardFooter';\nexport { useCardFooter_unstable, useCardFooterBase_unstable } from './useCardFooter';\nexport { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\n"],"names":["CardFooter","renderCardFooter_unstable","useCardFooter_unstable","useCardFooterBase_unstable","cardFooterClassNames","useCardFooterStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAQ1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

View File

@@ -0,0 +1,13 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of CardFooter.
*/ export const renderCardFooter_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.root.children,
state.action && /*#__PURE__*/ _jsx(state.action, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterBaseState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterBaseState): JSXElement => {\n assertSlots<CardFooterSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardFooter_unstable","state","root","children","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;;;AAGpC,EAAE"}

View File

@@ -0,0 +1,41 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Create the state required to render CardFooter.
*
* The returned state can be modified with hooks such as useCardFooterStyles_unstable,
* before being passed to renderCardFooter_unstable.
*
* @param props - props from this instance of CardFooter
* @param ref - reference to root HTMLElement of CardFooter
*/ export const useCardFooter_unstable = (props, ref)=>{
return useCardFooterBase_unstable(props, ref);
};
/**
* Base hook for CardFooter component, which manages state related to slots structure.
* Note: CardFooter has no design props, so this is equivalent to useCardFooter_unstable.
*
* @param props - props from this instance of CardFooter
* @param ref - reference to root HTMLElement of CardFooter
*/ export const useCardFooterBase_unstable = (props, ref)=>{
const { action } = props;
return {
components: {
root: 'div',
action: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
...props
}), {
elementType: 'div'
}),
action: slot.optional(action, {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/useCardFooter.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CardFooterBaseProps, CardFooterBaseState, CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n return useCardFooterBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardFooter component, which manages state related to slots structure.\n * Note: CardFooter has no design props, so this is equivalent to useCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooterBase_unstable = (\n props: CardFooterBaseProps,\n ref: React.Ref<HTMLElement>,\n): CardFooterBaseState => {\n const { action } = props;\n\n return {\n components: {\n root: 'div',\n action: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useCardFooter_unstable","props","ref","useCardFooterBase_unstable","action","components","root","always","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,OAAOC,2BAA2BF,OAAOC;AAC3C,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,6BAA6B,CACxCF,OACAC;IAEA,MAAM,EAAEE,MAAM,EAAE,GAAGH;IAEnB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ,QAAQL,KAAKU,QAAQ,CAACL,QAAQ;YAAEI,aAAa;QAAM;IACrD;AACF,EAAE"}

View File

@@ -0,0 +1,56 @@
'use client';
import { __styles, mergeClasses, shorthands } from '@griffel/react';
/**
* Static CSS class names used internally for the component slots.
*/
export const cardFooterClassNames = {
root: 'fui-CardFooter',
action: 'fui-CardFooter__action'
};
const useStyles = /*#__PURE__*/__styles({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1063pyq",
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "fsbu5mz"
},
action: {
Frg6f3: ["fcgxt0o", "f1ujusj6"],
rjrqlh: "fs9eatd",
Boue1pl: ["fxoo9ru", "f1g0ekvh"],
Bhz1vi0: "f1m6zfxz",
etxrgc: ["f1g0ekvh", "fxoo9ru"],
Bdua9ef: "f1sret3r",
cbfxhg: "fs4gbcv"
}
}, {
d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", [".fsbu5mz{gap:12px;}", {
p: -1
}], ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"],
m: [["@media (forced-colors: active){.fs9eatd .fui-Button,.fs9eatd .fui-Link{border-top-color:currentColor;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1g0ekvh .fui-Button,.f1g0ekvh .fui-Link{border-left-color:currentColor;}.fxoo9ru .fui-Button,.fxoo9ru .fui-Link{border-right-color:currentColor;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1m6zfxz .fui-Button,.f1m6zfxz .fui-Link{border-bottom-color:currentColor;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1sret3r .fui-Button,.f1sret3r .fui-Link{color:currentColor;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fs4gbcv .fui-Button,.fs4gbcv .fui-Link{outline-color:currentColor;}}", {
m: "(forced-colors: active)"
}]]
});
/**
* Apply styling to the CardFooter slots based on the state.
*/
export const useCardFooterStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
if (state.action) {
state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","p","m","useCardFooterStyles_unstable","state","styles","className"],"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px'\n },\n action: {\n marginLeft: 'auto',\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,MAAA;IAAAO,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAkBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAACnB,IAAI,CAACqB,SAAS,GAAGxB,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEmB,KAAK,CAACnB,IAAI,CAACqB,SAAS,CAAC;EACjG,IAAIF,KAAK,CAAClB,MAAM,EAAE;IACdkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,GAAGxB,YAAY,CAACE,oBAAoB,CAACE,MAAM,EAAEmB,MAAM,CAACnB,MAAM,EAAEkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,CAAC;EAC7G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,38 @@
'use client';
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
/**
* Static CSS class names used internally for the component slots.
*/ export const cardFooterClassNames = {
root: 'fui-CardFooter',
action: 'fui-CardFooter__action'
};
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'row',
gap: '12px'
},
action: {
marginLeft: 'auto',
// when the card is selected or hovered, it has custom high contrast color and background styles
// setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
'@media (forced-colors: active)': {
'& .fui-Button, & .fui-Link': {
...shorthands.borderColor('currentColor'),
color: 'currentColor',
outlineColor: 'currentColor'
}
}
}
});
/**
* Apply styling to the CardFooter slots based on the state.
*/ export const useCardFooterStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
if (state.action) {
state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px',\n },\n action: {\n marginLeft: 'auto',\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","display","flexDirection","gap","marginLeft","borderColor","color","outlineColor","useCardFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE;;CAEC,GACD,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAJ,QAAQ;QACNK,YAAY;QAEZ,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,WAAWS,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,qBAAqBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAEhG,IAAIF,MAAMV,MAAM,EAAE;QAChBU,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAaE,qBAAqBE,MAAM,EAAEW,OAAOX,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAC1G;IAEA,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCardHeader_unstable } from './useCardHeader';
import { renderCardHeader_unstable } from './renderCardHeader';
import { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Component to render an image, text and an action in a Card component.
*/ export const CardHeader = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useCardHeader_unstable(props, ref);
useCardHeaderStyles_unstable(state);
useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);
return renderCardHeader_unstable(state);
});
CardHeader.displayName = 'CardHeader';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n const state = useCardHeader_unstable(props, ref);\n\n useCardHeaderStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);\n\n return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCustomStyleHook_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* CardHeader base state (same as CardHeaderState since CardHeader has no design props)
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/CardHeader.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardHeader component.\n */\nexport type CardHeaderSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Element used to render an image or avatar related to the card.\n */\n image: Slot<'div', 'img'>;\n\n /**\n * Element used to render the main header title.\n */\n header: Slot<'div'>;\n\n /**\n * Element used to render short descriptions related to the title.\n */\n description: Slot<'div'>;\n\n /**\n * Container that renders on the far end of the footer, used for action buttons.\n */\n action?: Slot<'div'>;\n};\n\n/**\n * CardHeader component props.\n */\nexport type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;\n\n/**\n * CardHeader base props (same as CardHeaderProps since CardHeader has no design props)\n */\nexport type CardHeaderBaseProps = CardHeaderProps;\n\n/**\n * State used in rendering CardHeader.\n */\nexport type CardHeaderState = ComponentState<CardHeaderSlots>;\n\n/**\n * CardHeader base state (same as CardHeaderState since CardHeader has no design props)\n */\nexport type CardHeaderBaseState = CardHeaderState;\n"],"names":[],"mappings":"AA+CA;;CAEC,GACD,WAAkD"}

View File

@@ -0,0 +1,4 @@
export { CardHeader } from './CardHeader';
export { renderCardHeader_unstable } from './renderCardHeader';
export { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';
export { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type {\n CardHeaderBaseProps,\n CardHeaderBaseState,\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n} from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","renderCardHeader_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","cardHeaderCSSVars","cardHeaderClassNames","useCardHeaderStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAQ1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,iBAAiB,EAAEC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

View File

@@ -0,0 +1,15 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of CardHeader.
*/ export const renderCardHeader_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.image && /*#__PURE__*/ _jsx(state.image, {}),
state.header && /*#__PURE__*/ _jsx(state.header, {}),
state.description && /*#__PURE__*/ _jsx(state.description, {}),
state.action && /*#__PURE__*/ _jsx(state.action, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderBaseState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderBaseState): JSXElement => {\n assertSlots<CardHeaderSlots>(state);\n\n return (\n <state.root>\n {state.image && <state.image />}\n {state.header && <state.header />}\n {state.description && <state.description />}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardHeader_unstable","state","root","image","header","description","action"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;YAC3BF,MAAMG,MAAM,kBAAI,KAACH,MAAMG,MAAM;YAC7BH,MAAMI,WAAW,kBAAI,KAACJ,MAAMI,WAAW;YACvCJ,MAAMK,MAAM,kBAAI,KAACL,MAAMK,MAAM;;;AAGpC,EAAE"}

View File

@@ -0,0 +1,105 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
import { useCardContext_unstable } from '../Card/CardContext';
import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
/**
* Finds the first child of CardHeader with an id prop.
*
* @param header - the header prop of CardHeader
*/ function getChildWithId(header) {
function isReactElementWithIdProp(element) {
return React.isValidElement(element) && Boolean(element.props.id);
}
return React.Children.toArray(header).find(isReactElementWithIdProp);
}
/**
* Returns the id to use for the CardHeader root element.
*
* @param headerId - the id prop of the CardHeader component
* @param childWithId - the first child of the CardHeader component with an id prop
* @param generatedId - a generated id
*
* @returns the id to use for the CardHeader root element
*/ function getReferenceId(headerId, childWithId, generatedId) {
if (headerId) {
return headerId;
}
if (childWithId === null || childWithId === void 0 ? void 0 : childWithId.props.id) {
return childWithId.props.id;
}
return generatedId;
}
/**
* Create the state required to render CardHeader.
*
* The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
* before being passed to renderCardHeader_unstable.
*
* @param props - props from this instance of CardHeader
* @param ref - reference to root HTMLElement of CardHeader
*/ export const useCardHeader_unstable = (props, ref)=>{
return useCardHeaderBase_unstable(props, ref);
};
/**
* Base hook for CardHeader component, which manages state related to slots structure
* and the card's selectable accessibility properties.
* Note: CardHeader has no design props, so this is equivalent to useCardHeader_unstable.
*
* @param props - props from this instance of CardHeader
* @param ref - reference to root HTMLElement of CardHeader
*/ export const useCardHeaderBase_unstable = (props, ref)=>{
const { image, header, description, action } = props;
const { selectableA11yProps: { referenceId, setReferenceId } } = useCardContext_unstable();
const headerRef = React.useRef(null);
const hasChildId = React.useRef(false);
const generatedId = useId(cardHeaderClassNames.header, referenceId);
const headerSlot = slot.optional(header, {
renderByDefault: true,
defaultProps: {
ref: headerRef,
id: !hasChildId.current ? referenceId : undefined
},
elementType: 'div'
});
React.useEffect(()=>{
var _headerRef_current;
const headerId = !hasChildId.current ? (_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.id : undefined;
const childWithId = getChildWithId(headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.children);
hasChildId.current = Boolean(childWithId);
setReferenceId(getReferenceId(headerId, childWithId, generatedId));
}, [
generatedId,
header,
headerSlot,
setReferenceId
]);
return {
components: {
root: 'div',
image: 'div',
header: 'div',
description: 'div',
action: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
...props
}), {
elementType: 'div'
}),
image: slot.optional(image, {
elementType: 'div'
}),
header: headerSlot,
description: slot.optional(description, {
elementType: 'div'
}),
action: slot.optional(action, {
elementType: 'div'
})
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,123 @@
'use client';
import { __styles, mergeClasses, shorthands } from '@griffel/react';
/**
* Static CSS class names used internally for the component slots.
*/
export const cardHeaderClassNames = {
root: 'fui-CardHeader',
image: 'fui-CardHeader__image',
header: 'fui-CardHeader__header',
description: 'fui-CardHeader__description',
action: 'fui-CardHeader__action'
};
/**
* CSS variable names used internally for uniform styling in CardHeader.
*/
export const cardHeaderCSSVars = {
cardHeaderGapVar: '--fui-CardHeader--gap'
};
const useStyles = /*#__PURE__*/__styles({
root: {
Bkc6ea2: "fkufhic",
Bt984gj: "f122n59"
},
image: {
mc9l5x: "ftuwxu6",
t21cq0: ["fql5097", "f6yss9k"]
},
header: {
mc9l5x: "f22iagw"
},
description: {
mc9l5x: "f22iagw"
},
action: {
Frg6f3: ["f6yss9k", "fql5097"],
rjrqlh: "fs9eatd",
Boue1pl: ["fxoo9ru", "f1g0ekvh"],
Bhz1vi0: "f1m6zfxz",
etxrgc: ["f1g0ekvh", "fxoo9ru"],
Bdua9ef: "f1sret3r",
cbfxhg: "fs4gbcv"
}
}, {
d: [".fkufhic{--fui-CardHeader--gap:12px;}", ".f122n59{align-items:center;}", ".ftuwxu6{display:inline-flex;}", ".fql5097{margin-right:var(--fui-CardHeader--gap);}", ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}", ".f22iagw{display:flex;}"],
m: [["@media (forced-colors: active){.fs9eatd .fui-Button,.fs9eatd .fui-Link{border-top-color:currentColor;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1g0ekvh .fui-Button,.f1g0ekvh .fui-Link{border-left-color:currentColor;}.fxoo9ru .fui-Button,.fxoo9ru .fui-Link{border-right-color:currentColor;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1m6zfxz .fui-Button,.f1m6zfxz .fui-Link{border-bottom-color:currentColor;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1sret3r .fui-Button,.f1sret3r .fui-Link{color:currentColor;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fs4gbcv .fui-Button,.fs4gbcv .fui-Link{outline-color:currentColor;}}", {
m: "(forced-colors: active)"
}]]
});
const useStylesGrid = /*#__PURE__*/__styles({
root: {
mc9l5x: "f13qh94s",
t4k1zu: "f8a668j"
},
image: {
Br312pm: "fwpfdsa",
Ijaq50: "fldnz9j"
},
header: {
Br312pm: "fd46tj4",
Ijaq50: "f16hsg94"
},
description: {
Br312pm: "fd46tj4",
Ijaq50: "faunodf"
},
action: {
Br312pm: "fis13di",
Ijaq50: "fldnz9j"
}
}, {
d: [".f13qh94s{display:grid;}", ".f8a668j{grid-auto-columns:min-content 1fr min-content;}", ".fwpfdsa{grid-column-start:1;}", ".fldnz9j{grid-row-start:span 2;}", ".fd46tj4{grid-column-start:2;}", ".f16hsg94{grid-row-start:1;}", ".faunodf{grid-row-start:2;}", ".fis13di{grid-column-start:3;}"]
});
const useStylesFlex = /*#__PURE__*/__styles({
root: {
mc9l5x: "f22iagw"
},
header: {
Bh6795r: "fqerorx"
},
image: {},
description: {},
action: {}
}, {
d: [".f22iagw{display:flex;}", ".fqerorx{flex-grow:1;}"]
});
/**
* Apply styling to the CardHeader slots based on the state.
*/
export const useCardHeaderStyles_unstable = state => {
'use no memo';
const styles = useStyles();
const stylesGrid = useStylesGrid();
const stylesFlex = useStylesFlex();
const boxModelStyles = state.description ? stylesGrid : stylesFlex;
const getSlotStyles = slotName => {
var _state_slotName;
return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
};
state.root.className = getSlotStyles('root');
if (state.image) {
state.image.className = getSlotStyles('image');
}
if (state.header) {
state.header.className = getSlotStyles('header');
}
if (state.description) {
state.description.className = getSlotStyles('description');
}
if (state.action) {
state.action.className = getSlotStyles('action');
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,104 @@
'use client';
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
/**
* Static CSS class names used internally for the component slots.
*/ export const cardHeaderClassNames = {
root: 'fui-CardHeader',
image: 'fui-CardHeader__image',
header: 'fui-CardHeader__header',
description: 'fui-CardHeader__description',
action: 'fui-CardHeader__action'
};
/**
* CSS variable names used internally for uniform styling in CardHeader.
*/ export const cardHeaderCSSVars = {
cardHeaderGapVar: '--fui-CardHeader--gap'
};
const useStyles = makeStyles({
root: {
[cardHeaderCSSVars.cardHeaderGapVar]: '12px',
alignItems: 'center'
},
image: {
display: 'inline-flex',
marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`
},
header: {
display: 'flex'
},
description: {
display: 'flex'
},
action: {
marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,
// when the card is selected or hovered, it has custom high contrast color and background styles
// setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
'@media (forced-colors: active)': {
'& .fui-Button, & .fui-Link': {
...shorthands.borderColor('currentColor'),
color: 'currentColor',
outlineColor: 'currentColor'
}
}
}
});
const useStylesGrid = makeStyles({
root: {
display: 'grid',
gridAutoColumns: 'min-content 1fr min-content'
},
image: {
gridColumnStart: '1',
gridRowStart: 'span 2'
},
header: {
gridColumnStart: '2',
gridRowStart: '1'
},
description: {
gridColumnStart: '2',
gridRowStart: '2'
},
action: {
gridColumnStart: '3',
gridRowStart: 'span 2'
}
});
const useStylesFlex = makeStyles({
root: {
display: 'flex'
},
header: {
flexGrow: 1
},
image: {},
description: {},
action: {}
});
/**
* Apply styling to the CardHeader slots based on the state.
*/ export const useCardHeaderStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const stylesGrid = useStylesGrid();
const stylesFlex = useStylesFlex();
const boxModelStyles = state.description ? stylesGrid : stylesFlex;
const getSlotStyles = (slotName)=>{
var _state_slotName;
return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
};
state.root.className = getSlotStyles('root');
if (state.image) {
state.image.className = getSlotStyles('image');
}
if (state.header) {
state.header.className = getSlotStyles('header');
}
if (state.description) {
state.description.className = getSlotStyles('description');
}
if (state.action) {
state.action.className = getSlotStyles('action');
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCardPreview_unstable } from './useCardPreview';
import { renderCardPreview_unstable } from './renderCardPreview';
import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Component to render image previews of documents or articles in a Card component.
*/ export const CardPreview = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useCardPreview_unstable(props, ref);
useCardPreviewStyles_unstable(state);
useCustomStyleHook_unstable('useCardPreviewStyles_unstable')(state);
return renderCardPreview_unstable(state);
});
CardPreview.displayName = 'CardPreview';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/CardPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n const state = useCardPreview_unstable(props, ref);\n\n useCardPreviewStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardPreviewStyles_unstable')(state);\n\n return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"names":["React","useCardPreview_unstable","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCustomStyleHook_unstable","CardPreview","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* CardPreview base state (same as CardPreviewState since CardPreview has no design props)
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/CardPreview.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the Card component.\n */\nexport type CardPreviewSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Container that holds a logo related to the image preview provided.\n */\n logo?: Slot<'div', 'img'>;\n};\n\n/**\n * CardPreview component props.\n */\nexport type CardPreviewProps = ComponentProps<CardPreviewSlots>;\n\n/**\n * CardPreview base props (same as CardPreviewProps since CardPreview has no design props)\n */\nexport type CardPreviewBaseProps = CardPreviewProps;\n\n/**\n * State used in rendering CardPreview.\n */\nexport type CardPreviewState = ComponentState<CardPreviewSlots>;\n\n/**\n * CardPreview base state (same as CardPreviewState since CardPreview has no design props)\n */\nexport type CardPreviewBaseState = CardPreviewState;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAoD"}

View File

@@ -0,0 +1,4 @@
export { CardPreview } from './CardPreview';
export { renderCardPreview_unstable } from './renderCardPreview';
export { useCardPreview_unstable, useCardPreviewBase_unstable } from './useCardPreview';
export { cardPreviewClassNames, useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/index.ts"],"sourcesContent":["export { CardPreview } from './CardPreview';\nexport type {\n CardPreviewBaseProps,\n CardPreviewBaseState,\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n} from './CardPreview.types';\nexport { renderCardPreview_unstable } from './renderCardPreview';\nexport { useCardPreview_unstable, useCardPreviewBase_unstable } from './useCardPreview';\nexport { cardPreviewClassNames, useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\n"],"names":["CardPreview","renderCardPreview_unstable","useCardPreview_unstable","useCardPreviewBase_unstable","cardPreviewClassNames","useCardPreviewStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,mBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

View File

@@ -0,0 +1,13 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of CardPreview.
*/ export const renderCardPreview_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.root.children,
state.logo && /*#__PURE__*/ _jsx(state.logo, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewBaseState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewBaseState): JSXElement => {\n assertSlots<CardPreviewSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.logo && <state.logo />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardPreview_unstable","state","root","children","logo"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;;;AAGhC,EAAE"}

View File

@@ -0,0 +1,71 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
import { useCardContext_unstable } from '../Card/CardContext';
import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
/**
* Create the state required to render CardPreview.
*
* The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
* before being passed to renderCardPreview_unstable.
*
* @param props - props from this instance of CardPreview
* @param ref - reference to root HTMLElement of CardPreview
*/ export const useCardPreview_unstable = (props, ref)=>{
return useCardPreviewBase_unstable(props, ref);
};
/**
* Base hook for CardPreview component, which manages state related to slots structure
* and the card's selectable accessibility label.
* Note: CardPreview has no design props, so this is equivalent to useCardPreview_unstable.
*
* @param props - props from this instance of CardPreview
* @param ref - reference to root HTMLElement of CardPreview
*/ export const useCardPreviewBase_unstable = (props, ref)=>{
const { logo } = props;
const { selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId } } = useCardContext_unstable();
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
const previewRef = useMergedRefs(ref, React.useRef(null));
React.useEffect(()=>{
if (referenceLabel && referenceId) {
return;
}
if (previewRef.current && previewRef.current.parentNode) {
const img = previewRef.current.parentNode.querySelector(`.${cardPreviewClassNames.root} > img`);
if (img) {
const ariaLabel = img.getAttribute('aria-label');
const ariaDescribedby = img.getAttribute('aria-describedby');
if (ariaDescribedby) {
setReferenceId(ariaDescribedby);
} else if (img.alt) {
setReferenceLabel(img.alt);
} else if (ariaLabel) {
setReferenceLabel(ariaLabel);
}
}
}
}, [
setReferenceLabel,
referenceLabel,
previewRef,
referenceId,
setReferenceId
]);
return {
components: {
root: 'div',
logo: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
ref: previewRef,
...props
}), {
elementType: 'div'
}),
logo: slot.optional(logo, {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n CardPreviewBaseProps,\n CardPreviewBaseState,\n CardPreviewProps,\n CardPreviewState,\n} from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n return useCardPreviewBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardPreview component, which manages state related to slots structure\n * and the card's selectable accessibility label.\n * Note: CardPreview has no design props, so this is equivalent to useCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreviewBase_unstable = (\n props: CardPreviewBaseProps,\n ref: React.Ref<HTMLElement>,\n): CardPreviewBaseState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n } = useCardContext_unstable();\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, React.useRef<HTMLDivElement>(null));\n\n React.useEffect(() => {\n if (referenceLabel && referenceId) {\n return;\n }\n\n if (previewRef.current && previewRef.current.parentNode) {\n const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n if (img) {\n const ariaLabel = img.getAttribute('aria-label');\n const ariaDescribedby = img.getAttribute('aria-describedby');\n\n if (ariaDescribedby) {\n setReferenceId(ariaDescribedby);\n } else if (img.alt) {\n setReferenceLabel(img.alt);\n } else if (ariaLabel) {\n setReferenceLabel(ariaLabel);\n }\n }\n }\n }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n { elementType: 'div' },\n ),\n logo: slot.optional(logo, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","useCardPreviewBase_unstable","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","always","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAO1F,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,qBAAqB,QAAQ,gCAAgC;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,OAAOC,4BAA4BF,OAAOC;AAC5C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,8BAA8B,CACzCF,OACAC;IAEA,MAAM,EAAEE,IAAI,EAAE,GAAGH;IAEjB,MAAM,EACJI,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EACxF,GAAGX;IACJ,SAAS;IACT,4EAA4E;IAC5E,4FAA4F;IAC5F,MAAMY,aAAad,cAAcM,KAAkCR,MAAMiB,MAAM,CAAiB;IAEhGjB,MAAMkB,SAAS,CAAC;QACd,IAAIN,kBAAkBC,aAAa;YACjC;QACF;QAEA,IAAIG,WAAWG,OAAO,IAAIH,WAAWG,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAML,WAAWG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,CAAC,EAAEjB,sBAAsBkB,IAAI,CAAC,MAAM,CAAC;YAEhH,IAAIF,KAAK;gBACP,MAAMG,YAAYH,IAAII,YAAY,CAAC;gBACnC,MAAMC,kBAAkBL,IAAII,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBX,eAAeW;gBACjB,OAAO,IAAIL,IAAIM,GAAG,EAAE;oBAClBb,kBAAkBO,IAAIM,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBV,kBAAkBU;gBACpB;YACF;QACF;IACF,GAAG;QAACV;QAAmBF;QAAgBI;QAAYH;QAAaE;KAAe;IAE/E,OAAO;QACLa,YAAY;YACVL,MAAM;YACNb,MAAM;QACR;QAEAa,MAAMpB,KAAK0B,MAAM,CACf5B,yBAAyB,OAAO;YAC9BO,KAAKQ;YACL,GAAGT,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;QAEvBpB,MAAMP,KAAK4B,QAAQ,CAACrB,MAAM;YAAEoB,aAAa;QAAM;IACjD;AACF,EAAE"}

View File

@@ -0,0 +1,40 @@
'use client';
import { __styles, mergeClasses } from '@griffel/react';
/**
* Static CSS class names used internally for the component slots.
*/
export const cardPreviewClassNames = {
root: 'fui-CardPreview',
logo: 'fui-CardPreview__logo'
};
const useStyles = /*#__PURE__*/__styles({
root: {
qhf8xq: "f10pi13n",
Byfpedg: "fgourly",
Btj6oj6: "f1vui7lx",
B1m4t4s: "fda5zwx"
},
logo: {
qhf8xq: "f1euv43f",
B5kzvoi: "f1gcvs1y",
oyh7mz: ["f1t6tvco", "ffrfxm3"],
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [".f10pi13n{position:relative;}", ".fgourly>:not(.fui-CardPreview__logo){display:block;}", ".f1vui7lx>:not(.fui-CardPreview__logo){height:100%;}", ".fda5zwx>:not(.fui-CardPreview__logo){width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
});
/**
* Apply styling to the CardPreview slots based on the state.
*/
export const useCardPreviewStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
if (state.logo) {
state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%'\n }\n },\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px'\n }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAG;EACrCC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAL,IAAA;IAAAE,MAAA;IAAAI,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAgBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EAClG,IAAIF,KAAK,CAACZ,IAAI,EAAE;IACZY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACC,qBAAqB,CAACE,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,36 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
/**
* Static CSS class names used internally for the component slots.
*/ export const cardPreviewClassNames = {
root: 'fui-CardPreview',
logo: 'fui-CardPreview__logo'
};
const useStyles = makeStyles({
root: {
position: 'relative',
[`> :not(.${cardPreviewClassNames.logo})`]: {
display: 'block',
height: '100%',
width: '100%'
}
},
logo: {
position: 'absolute',
bottom: '12px',
left: '12px',
width: '32px',
height: '32px'
}
});
/**
* Apply styling to the CardPreview slots based on the state.
*/ export const useCardPreviewStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
if (state.logo) {
state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","position","display","height","width","bottom","left","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D;;CAEC,GACD,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BG,MAAM;QACJG,UAAU;QAEV,CAAC,CAAC,QAAQ,EAAEJ,sBAAsBE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;YAC1CG,SAAS;YACTC,QAAQ;YACRC,OAAO;QACT;IACF;IAEAL,MAAM;QACJE,UAAU;QACVI,QAAQ;QACRC,MAAM;QACNF,OAAO;QACPD,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMI,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAAST;IACfQ,MAAMV,IAAI,CAACY,SAAS,GAAGd,aAAaC,sBAAsBC,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IAEjG,IAAIF,MAAMT,IAAI,EAAE;QACdS,MAAMT,IAAI,CAACW,SAAS,GAAGd,aAAaC,sBAAsBE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACnG;IAEA,OAAOF;AACT,EAAE"}