Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+2077
View File
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/react-card
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
+73
View File
@@ -0,0 +1,73 @@
# @fluentui/react-card
**React Card components for [Fluent UI React](https://react.fluentui.dev)**
A card is a container that holds information and actions related to a single concept or object, like a document or a contact.
## Usage
To import React Card components:
```js
import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components';
```
Example Card usage:
![example of a Card component in usage](./docs/assets/card-example.png)
```jsx
import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
import { Button, Body1, Caption1 } from '@fluentui/react-components';
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';
const App = () => (
<>
<Card>
<CardHeader
image={
<img
src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/avatar_elvia.svg"
alt="Face of a person"
/>
}
header={
<Body1>
<b>Elvia Atkins</b> mentioned you
</Body1>
}
description={<Caption1>5h ago · About us - Overview</Caption1>}
/>
<CardPreview
logo={
<img
src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/docx.png"
alt="Microsoft Word logo"
/>
}
>
<img
src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/doc_template.png"
alt="Preview of a Word document"
/>
</CardPreview>
<CardFooter>
<Button icon={<ArrowReply16Regular />}>Reply</Button>
<Button icon={<Share16Regular />}>Share</Button>
</CardFooter>
</Card>
</>
);
```
## Specification
See the [Spec.md](./Spec.md) file for background information on the design/engineering decisions of the component.
## API
For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-card--default).
## Migration
For migration information, have a look at the [migration guide](./MIGRATION.md).
+389
View File
@@ -0,0 +1,389 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* A card provides scaffolding for hosting actions and content for a single topic.
*/
export declare const Card: ForwardRefComponent<CardProps>;
/**
* Static CSS class names used internally for the component slots.
*/
export declare const cardClassNames: SlotClassNames<CardSlots>;
/**
* Data shared between card components
*/
export declare interface CardContextValue {
selectableA11yProps: {
referenceId?: string;
setReferenceId: (referenceId: string) => void;
referenceLabel?: string;
setReferenceLabel: (referenceLabel: string) => void;
};
}
/**
* CSS variable names used internally for uniform styling in Card.
*/
export declare const cardCSSVars: {
cardSizeVar: string;
cardBorderRadiusVar: string;
};
/**
* Component to render Button actions in a Card component.
*/
export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
/**
* Static CSS class names used internally for the component slots.
*/
export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
/**
* CardFooter component props.
*/
export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
/**
* Slots available in the CardFooter component.
*/
export declare type CardFooterSlots = {
/**
* Root element of the component.
*/
root: Slot<'div'>;
/**
* Container that renders on the far end of the footer, used for action buttons.
*/
action?: Slot<'div'>;
};
/**
* State used in rendering CardFooter.
*/
export declare type CardFooterState = ComponentState<CardFooterSlots>;
/**
* Component to render an image, text and an action in a Card component.
*/
export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
/**
* Static CSS class names used internally for the component slots.
*/
export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
/**
* CSS variable names used internally for uniform styling in CardHeader.
*/
export declare const cardHeaderCSSVars: {
cardHeaderGapVar: string;
};
/**
* CardHeader component props.
*/
export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
/**
* Slots available in the CardHeader component.
*/
export declare type CardHeaderSlots = {
/**
* Root element of the component.
*/
root: Slot<'div'>;
/**
* Element used to render an image or avatar related to the card.
*/
image: Slot<'div', 'img'>;
/**
* Element used to render the main header title.
*/
header: Slot<'div'>;
/**
* Element used to render short descriptions related to the title.
*/
description: Slot<'div'>;
/**
* Container that renders on the far end of the footer, used for action buttons.
*/
action?: Slot<'div'>;
};
/**
* State used in rendering CardHeader.
*/
export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
/**
* Data sent from the selection events on a selectable card.
*/
declare type CardOnSelectData = {
selected: boolean;
};
/**
* Card selected event type
*
* This event is fired when a selectable card changes its selection state.
*/
export declare type CardOnSelectionChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent | React_2.ChangeEvent;
/**
* Component to render image previews of documents or articles in a Card component.
*/
export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
/**
* Static CSS class names used internally for the component slots.
*/
export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
/**
* CardPreview component props.
*/
export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
/**
* Slots available in the Card component.
*/
export declare type CardPreviewSlots = {
/**
* Root element of the component.
*/
root: Slot<'div'>;
/**
* Container that holds a logo related to the image preview provided.
*/
logo?: Slot<'div', 'img'>;
};
/**
* State used in rendering CardPreview.
*/
export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
/**
* Card component props.
*/
export declare type CardProps = ComponentProps<CardSlots> & {
/**
* Sets the appearance of the card.
*
* `filled`
* The card will have a shadow, border and background color.
*
* `filled-alternative`
* This appearance is similar to `filled`, but the background color will be a little darker.
*
* `outline`
* This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.
*
* `subtle`
* This appearance is similar to `filled-alternative`, but no border is applied.
*
* @default 'filled'
*/
appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
/**
* Sets the focus behavior for the card.
*
* `off`
* The card will not focusable.
*
* `no-tab`
* This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
* pressing the Escape key.
*
* `tab-exit`
* This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
* the Tab key on the last inner element.
*
* `tab-only`
* This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
* after the last inner element.
*
* @default 'off'
*/
focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
/**
* Defines the orientation of the card.
*
* @default 'vertical'
*/
orientation?: 'horizontal' | 'vertical';
/**
* Controls the card's border radius and padding between inner elements.
*
* @default 'medium'
*/
size?: 'small' | 'medium' | 'large';
/**
* Defines the controlled selected state of the card.
*
* @default false
*/
selected?: boolean;
/**
* Defines whether the card is initially in a selected state when rendered.
*
* @default false
*/
defaultSelected?: boolean;
/**
* Callback to be called when the selected state value changes.
*/
onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;
};
/**
* @internal
*/
export declare const CardProvider: React_2.Provider<CardContextValue | undefined>;
/**
* Slots available in the Card component.
*/
export declare type CardSlots = {
/**
* Root element of the component.
*/
root: Slot<'div'>;
/**
* Floating action that can be rendered on the top-right of a card. Often used together with
* `selected`, `defaultSelected`, and `onSelectionChange` props
*/
floatingAction?: Slot<'div'>;
/**
* The internal checkbox element that renders when the card is selectable.
*/
checkbox?: Slot<'input'>;
};
/**
* State used in rendering Card.
*/
export declare type CardState = ComponentState<CardSlots> & CardContextValue & Required<Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {
/**
* Represents a card that contains interactive events (MouseEvents) or is a button/a tag.
*
* @default false
*/
interactive: boolean;
/**
* Represents a selectable card.
*
* @default false
*/
selectable: boolean;
/**
* Defines whether the card is currently selected.
*
* @default false
*/
selected: boolean;
/**
* Defines whether the card internal checkbox is currently focused.
*
* @default false
*/
selectFocused: boolean;
}>;
/**
* Render the final JSX of Card.
*/
export declare const renderCard_unstable: (state: CardState, cardContextValue: CardContextValue) => JSX.Element;
/**
* Render the final JSX of CardFooter.
*/
export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;
/**
* Render the final JSX of CardHeader.
*/
export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;
/**
* Render the final JSX of CardPreview.
*/
export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSX.Element;
/**
* 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 declare const useCard_unstable: (props: CardProps, ref: React_2.Ref<HTMLDivElement>) => CardState;
/**
* @internal
*/
export declare const useCardContext_unstable: () => CardContextValue;
/**
* 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 declare const useCardFooter_unstable: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>) => CardFooterState;
/**
* Apply styling to the CardFooter slots based on the state.
*/
export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;
/**
* 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 declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>) => CardHeaderState;
/**
* Apply styling to the CardHeader slots based on the state.
*/
export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;
/**
* 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 declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>) => CardPreviewState;
/**
* Apply styling to the CardPreview slots based on the state.
*/
export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
/**
* Apply styling to the Card slots based on the state.
*/
export declare const useCardStyles_unstable: (state: CardState) => CardState;
export { }
+40
View File
@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Card: function() {
return _index.Card;
},
CardProvider: function() {
return _index.CardProvider;
},
cardCSSVars: function() {
return _index.cardCSSVars;
},
cardClassNames: function() {
return _index.cardClassNames;
},
cardContextDefaultValue: function() {
return _index.cardContextDefaultValue;
},
renderCard_unstable: function() {
return _index.renderCard_unstable;
},
useCardContext_unstable: function() {
return _index.useCardContext_unstable;
},
useCardStyles_unstable: function() {
return _index.useCardStyles_unstable;
},
useCard_unstable: function() {
return _index.useCard_unstable;
}
});
const _index = require("./components/Card/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Card.ts"],"sourcesContent":["export type {\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n} from './components/Card/index';\nexport {\n Card,\n CardProvider,\n cardCSSVars,\n cardClassNames,\n cardContextDefaultValue,\n renderCard_unstable,\n useCardContext_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './components/Card/index';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASEA,IAAI;eAAJA,WAAI;;IACJC,YAAY;eAAZA,mBAAY;;IACZC,WAAW;eAAXA,kBAAW;;IACXC,cAAc;eAAdA,qBAAc;;IACdC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,gBAAgB;eAAhBA,uBAAgB;;;uBACX"}
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardFooter: function() {
return _index.CardFooter;
},
cardFooterClassNames: function() {
return _index.cardFooterClassNames;
},
renderCardFooter_unstable: function() {
return _index.renderCardFooter_unstable;
},
useCardFooterStyles_unstable: function() {
return _index.useCardFooterStyles_unstable;
},
useCardFooter_unstable: function() {
return _index.useCardFooter_unstable;
}
});
const _index = require("./components/CardFooter/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardFooter.ts"],"sourcesContent":["export type { CardFooterProps, CardFooterSlots, CardFooterState } from './components/CardFooter/index';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './components/CardFooter/index';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,UAAU;eAAVA,iBAAU;;IACVC,oBAAoB;eAApBA,2BAAoB;;IACpBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,4BAA4B;eAA5BA,mCAA4B;;IAC5BC,sBAAsB;eAAtBA,6BAAsB;;;uBACjB"}
+31
View File
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardHeader: function() {
return _index.CardHeader;
},
cardHeaderCSSVars: function() {
return _index.cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return _index.cardHeaderClassNames;
},
renderCardHeader_unstable: function() {
return _index.renderCardHeader_unstable;
},
useCardHeaderStyles_unstable: function() {
return _index.useCardHeaderStyles_unstable;
},
useCardHeader_unstable: function() {
return _index.useCardHeader_unstable;
}
});
const _index = require("./components/CardHeader/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardHeader.ts"],"sourcesContent":["export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './components/CardHeader/index';\nexport {\n CardHeader,\n cardHeaderCSSVars,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './components/CardHeader/index';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,UAAU;eAAVA,iBAAU;;IACVC,iBAAiB;eAAjBA,wBAAiB;;IACjBC,oBAAoB;eAApBA,2BAAoB;;IACpBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,4BAA4B;eAA5BA,mCAA4B;;IAC5BC,sBAAsB;eAAtBA,6BAAsB;;;uBACjB"}
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardPreview: function() {
return _index.CardPreview;
},
cardPreviewClassNames: function() {
return _index.cardPreviewClassNames;
},
renderCardPreview_unstable: function() {
return _index.renderCardPreview_unstable;
},
useCardPreviewStyles_unstable: function() {
return _index.useCardPreviewStyles_unstable;
},
useCardPreview_unstable: function() {
return _index.useCardPreview_unstable;
}
});
const _index = require("./components/CardPreview/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardPreview.ts"],"sourcesContent":["export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './components/CardPreview/index';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './components/CardPreview/index';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,WAAW;eAAXA,kBAAW;;IACXC,qBAAqB;eAArBA,4BAAqB;;IACrBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}
+23
View File
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Card", {
enumerable: true,
get: function() {
return Card;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCard = require("./useCard");
const _renderCard = require("./renderCard");
const _useCardStylesstyles = require("./useCardStyles.styles");
const _useCardContextValue = require("./useCardContextValue");
const Card = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCard.useCard_unstable)(props, ref);
const cardContextValue = (0, _useCardContextValue.useCardContextValue)(state);
(0, _useCardStylesstyles.useCardStyles_unstable)(state);
return (0, _renderCard.renderCard_unstable)(state, cardContextValue);
});
Card.displayName = 'Card';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["import * 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';\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 return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["Card","React","forwardRef","props","ref","state","useCard_unstable","cardContextValue","useCardContextValue","useCardStyles_unstable","renderCard_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;yBACU;4BACG;qCACG;qCAGH;AAK7B,MAAMA,OAAAA,WAAAA,GAAuCC,OAAMC,UAAU,CAAiB,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yBAAAA,EAAiBH,OAAOC;IACtC,MAAMG,mBAAmBC,IAAAA,wCAAAA,EAAoBH;IAE7CI,IAAAA,2CAAAA,EAAuBJ;IACvB,OAAOK,IAAAA,+BAAAA,EAAoBL,OAAOE;AACpC;AAEAP,KAAKW,WAAW,GAAG"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -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/**\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"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardProvider: function() {
return CardProvider;
},
cardContextDefaultValue: function() {
return cardContextDefaultValue;
},
useCardContext_unstable: function() {
return useCardContext_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const cardContext = /*#__PURE__*/ _react.createContext(undefined);
const cardContextDefaultValue = {
selectableA11yProps: {
referenceId: undefined,
setReferenceId () {
/* Noop */ },
referenceLabel: undefined,
setReferenceLabel () {
/* Noop */ }
}
};
const CardProvider = cardContext.Provider;
const useCardContext_unstable = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/CardContext.ts"],"sourcesContent":["import * 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 = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["CardProvider","cardContextDefaultValue","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAwBaA,YAAAA;eAAAA;;IAhBAC,uBAAAA;eAAAA;;IAqBAC,uBAAAA;eAAAA;;;;iEA7BU;AAGvB,MAAMC,4BAAcC,OAAMC,aAAa,CAA+BC;AAK/D,MAAML,0BAA4C;IACvDM,qBAAqB;QACnBC,aAAaF;QACbG;QACE,QAAQ,GACV;QACAC,gBAAgBJ;QAChBK;QACE,QAAQ,GACV;IACF;AACF;AAKO,MAAMX,eAAeG,YAAYS,QAAQ;AAKzC,MAAMV,0BAA0B;QAAME;WAAAA,CAAAA,oBAAAA,OAAMS,UAAU,CAACV,YAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAiCH;AAAsB"}
@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Card: function() {
return _Card.Card;
},
CardProvider: function() {
return _CardContext.CardProvider;
},
cardCSSVars: function() {
return _useCardStylesstyles.cardCSSVars;
},
cardClassNames: function() {
return _useCardStylesstyles.cardClassNames;
},
cardContextDefaultValue: function() {
return _CardContext.cardContextDefaultValue;
},
renderCard_unstable: function() {
return _renderCard.renderCard_unstable;
},
useCardContext_unstable: function() {
return _CardContext.useCardContext_unstable;
},
useCardStyles_unstable: function() {
return _useCardStylesstyles.useCardStyles_unstable;
},
useCard_unstable: function() {
return _useCard.useCard_unstable;
}
});
const _Card = require("./Card");
const _CardContext = require("./CardContext");
const _renderCard = require("./renderCard");
const _useCard = require("./useCard");
const _useCardStylesstyles = require("./useCardStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/index.ts"],"sourcesContent":["export { Card } from './Card';\nexport type {\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 } from './useCard';\nexport { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IASJC,YAAY;eAAZA,yBAAY;;IAGZC,WAAW;eAAXA,gCAAW;;IAAEC,cAAc;eAAdA,mCAAc;;IAHbC,uBAAuB;eAAvBA,oCAAuB;;IACrCC,mBAAmB;eAAnBA,+BAAmB;;IADoBC,uBAAuB;eAAvBA,oCAAuB;;IAGjCC,sBAAsB;eAAtBA,2CAAsB;;IADnDC,gBAAgB;eAAhBA,yBAAgB;;;sBAXJ;6BAS0D;4BAC3C;yBACH;qCACmC"}
@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCard_unstable", {
enumerable: true,
get: function() {
return renderCard_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _CardContext = require("./CardContext");
const renderCard_unstable = (state, cardContextValue)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_CardContext.CardProvider, {
value: cardContextValue,
children: [
state.checkbox ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.checkbox, {}) : null,
state.floatingAction ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.floatingAction, {}) : null,
state.root.children
]
})
});
};
@@ -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 { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\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":["renderCard_unstable","state","cardContextValue","assertSlots","_jsx","root","_jsxs","CardProvider","value","checkbox","floatingAction","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;4BATb;gCAE4B;6BAEC;AAKtB,MAAMA,sBAAsB,CAACC,OAAkBC;IACpDC,IAAAA,2BAAAA,EAAuBF;IAEvB,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAC,IAAAA,gBAAA,EAACC,yBAAAA,EAAAA;YAAaC,OAAON;;gBAClBD,MAAMQ,QAAQ,GAAA,WAAA,GAAGL,IAAAA,eAAA,EAACH,MAAMQ,QAAQ,EAAA,CAAA,KAAM;gBACtCR,MAAMS,cAAc,GAAA,WAAA,GAAGN,IAAAA,eAAA,EAACH,MAAMS,cAAc,EAAA,CAAA,KAAM;gBAClDT,MAAMI,IAAI,CAACM,QAAQ;;;;AAI5B"}
@@ -0,0 +1,99 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCard_unstable", {
enumerable: true,
get: function() {
return useCard_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const _useCardSelectable = require("./useCardSelectable");
const _CardContext = require("./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, ...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 = (0, _reacttabster.useFocusableGroup)({
tabBehavior: focusMap[focusMode]
});
const interactiveFocusAttributes = {
...groupperAttrs,
tabIndex: 0
};
return {
interactive,
focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
};
};
const useCard_unstable = (props, ref)=>{
const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;
const [referenceId, setReferenceId] = _react.useState(_CardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
const [referenceLabel, setReferenceLabel] = _react.useState(_CardContext.cardContextDefaultValue.selectableA11yProps.referenceId);
const cardBaseRef = (0, _reacttabster.useFocusWithin)();
const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = (0, _useCardSelectable.useCardSelectable)(props, {
referenceId,
referenceLabel
}, cardBaseRef);
const cardRef = (0, _reactutilities.useMergedRefs)(cardBaseRef, ref);
const { interactive, focusAttributes } = useCardInteractive(props);
return {
appearance,
orientation,
size,
interactive,
selectable,
selectFocused,
selected,
selectableA11yProps: {
setReferenceId,
referenceId,
referenceLabel,
setReferenceLabel
},
components: {
root: 'div',
floatingAction: 'div',
checkbox: 'input'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: cardRef,
role: 'group',
...!selectable ? focusAttributes : null,
...props,
...selectableCardProps
}), {
elementType: 'div'
}),
floatingAction: floatingActionSlot,
checkbox: checkboxSlot
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,15 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardContextValue", {
enumerable: true,
get: function() {
return useCardContextValue;
}
});
function useCardContextValue({ selectableA11yProps }) {
return {
selectableA11yProps
};
}
@@ -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"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAEgBA;;;eAAAA;;;AAAT,SAASA,oBAAoB,EAAEC,mBAAmB,EAAa;IACpE,OAAO;QAAEA;IAAoB;AAC/B"}
@@ -0,0 +1,138 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardSelectable", {
enumerable: true,
get: function() {
return useCardSelectable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _reacttabster = require("@fluentui/react-tabster");
const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown } = props;
const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
const checkboxRef = _react.useRef(null);
const [selected, setSelected] = (0, _reactutilities.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 (shouldRestrictTriggerAction(event)) {
return;
}
const newCheckedValue = !selected;
setSelected(newCheckedValue);
if (onSelectionChange) {
onSelectionChange(event, {
selected: newCheckedValue
});
}
}, [
onSelectionChange,
selected,
setSelected,
shouldRestrictTriggerAction
]);
const onKeyDownHandler = _react.useCallback((event)=>{
if ([
_keyboardkeys.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 _reactutilities.slot.optional(checkbox, {
defaultProps: {
ref: checkboxRef,
type: 'checkbox',
checked: selected,
onChange: (event)=>onChangeHandler(event),
onFocus: ()=>setSelectFocused(true),
onBlur: ()=>setSelectFocused(false),
...selectableCheckboxProps
},
elementType: 'input'
});
}, [
checkbox,
floatingAction,
selected,
selectable,
onChangeHandler,
referenceId,
referenceLabel
]);
const floatingActionSlot = _react.useMemo(()=>{
if (!floatingAction) {
return;
}
return _reactutilities.slot.optional(floatingAction, {
defaultProps: {
ref: checkboxRef
},
elementType: 'div'
});
}, [
floatingAction
]);
const selectableCardProps = _react.useMemo(()=>{
if (!selectable) {
return null;
}
return {
onClick: (0, _reactutilities.mergeCallbacks)(onClick, onChangeHandler),
onKeyDown: (0, _reactutilities.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
@@ -0,0 +1,781 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
cardCSSVars: function() {
return cardCSSVars;
},
cardClassNames: function() {
return cardClassNames;
},
useCardStyles_unstable: function() {
return useCardStyles_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _react1 = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const cardClassNames = {
root: 'fui-Card',
floatingAction: 'fui-Card__floatingAction',
checkbox: 'fui-Card__checkbox'
};
const cardCSSVars = {
cardSizeVar: '--fui-Card--size',
cardBorderRadiusVar: '--fui-Card--border-radius'
};
const focusOutlineStyle = {
outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
outlineWidth: _reacttheme.tokens.strokeWidthThick,
outlineOffset: '-2px'
};
const useCardResetStyles = /*#__PURE__*/ (0, _react1.__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 useCardStyles = /*#__PURE__*/ (0, _react1.__styles)({
focused: {
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
B8q5s1w: "f8hki3x",
Bci5o5g: [
"f1d2448m",
"ffh67wi"
],
n8qw10: "f1bjia2o",
Bdrgwmp: [
"ffh67wi",
"f1d2448m"
],
Bb7d1vk: "f226i61",
zhwhgb: [
"f13kzufm",
"fsx75g8"
],
dhy2o1: "flujwa2",
Gfyso: [
"fsx75g8",
"f13kzufm"
],
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"
],
Bm3wd5j: "f1k55ka9",
Bbrhkcr: [
"fgclinu",
"f16pcs8n"
],
f1oku: "fycbxed",
aywvf2: [
"f16pcs8n",
"fgclinu"
],
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"
},
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: {
ycbfsm: "fkc42ay",
Bsw6fvg: "f1rirnrt",
Bbusuzp: "f1lkg8j3",
xgfqdd: "f1nkj0oa",
Bmmdzwq: "fey3rwa",
zkpvhj: [
"f5jhx11",
"fff9uym"
],
B20bydw: "fm7n0jy",
Bwwwggl: [
"fff9uym",
"f5jhx11"
]
},
highContrastInteractive: {
h1vhog: "fpfvv3l",
kslmdy: "f1oamsm6",
Baaf6ca: "f1il21bs",
x9zz3d: "fnn5dk0",
Bmmdzwq: "fey3rwa",
zkpvhj: [
"f5jhx11",
"fff9uym"
],
B20bydw: "fm7n0jy",
Bwwwggl: [
"fff9uym",
"f5jhx11"
]
},
select: {
qhf8xq: "f1euv43f",
Bhzewxz: "fqclxi7",
j35jbq: [
"fiv86kb",
"f36uhnt"
],
Bj3rh1h: "f19g0ac"
},
hiddenCheckbox: {
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
a9b677: "frkrog8",
Bqenvij: "f1mpe4l3",
qhf8xq: "f1euv43f",
Bh84pgu: "fmf1zke",
Bgl5zvf: "f1wch0ki",
Huce71: "fz5stix"
}
}, {
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);}",
".fhovq9v{background-color:var(--colorSubtleBackground);}",
".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
".f1euv43f{position:absolute;}",
".fqclxi7{top:4px;}",
".fiv86kb{right:4px;}",
".f36uhnt{left:4px;}",
".f19g0ac{z-index: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;}"
],
m: [
[
"@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f13kzufm[data-fui-focus-visible]::after{border-right-color:Highlight;}.fsx75g8[data-fui-focus-visible]::after{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.flujwa2[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1k55ka9[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f16pcs8n[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}.fgclinu[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fycbxed[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1nkj0oa .fui-CardPreview,.f1nkj0oa .fui-CardFooter{forced-color-adjust:auto;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fey3rwa::after{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f5jhx11::after{border-right-color:Highlight;}.fff9uym::after{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fm7n0jy::after{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fpfvv3l:hover,.fpfvv3l :active{forced-color-adjust:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1oamsm6:hover,.f1oamsm6 :active{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1il21bs:hover,.f1il21bs :active{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fnn5dk0:hover .fui-CardPreview,.fnn5dk0 :active .fui-CardPreview,.fnn5dk0:hover .fui-CardFooter,.fnn5dk0 :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);}",
".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"
],
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);}"
]
});
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.interactive || state.selectable;
const focusedClassName = _react.useMemo(()=>{
if (state.selectable) {
if (state.selectFocused) {
return styles.selectableFocused;
}
return '';
}
return styles.focused;
}, [
state.selectFocused,
state.selectable,
styles.focused,
styles.selectableFocused
]);
state.root.className = (0, _react1.mergeClasses)(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
if (state.floatingAction) {
state.floatingAction.className = (0, _react1.mergeClasses)(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
}
if (state.checkbox) {
state.checkbox.className = (0, _react1.mergeClasses)(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CardFooter", {
enumerable: true,
get: function() {
return CardFooter;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCardFooter = require("./useCardFooter");
const _renderCardFooter = require("./renderCardFooter");
const _useCardFooterStylesstyles = require("./useCardFooterStyles.styles");
const CardFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardFooter.useCardFooter_unstable)(props, ref);
(0, _useCardFooterStylesstyles.useCardFooterStyles_unstable)(state);
return (0, _renderCardFooter.renderCardFooter_unstable)(state);
});
CardFooter.displayName = 'CardFooter';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["import * 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';\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 return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["CardFooter","React","forwardRef","props","ref","state","useCardFooter_unstable","useCardFooterStyles_unstable","renderCardFooter_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;+BACgB;kCACG;2CACG;AAOtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering CardFooter.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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 * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardFooter: function() {
return _CardFooter.CardFooter;
},
cardFooterClassNames: function() {
return _useCardFooterStylesstyles.cardFooterClassNames;
},
renderCardFooter_unstable: function() {
return _renderCardFooter.renderCardFooter_unstable;
},
useCardFooterStyles_unstable: function() {
return _useCardFooterStylesstyles.useCardFooterStyles_unstable;
},
useCardFooter_unstable: function() {
return _useCardFooter.useCardFooter_unstable;
}
});
const _CardFooter = require("./CardFooter");
const _renderCardFooter = require("./renderCardFooter");
const _useCardFooter = require("./useCardFooter");
const _useCardFooterStylesstyles = require("./useCardFooterStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/index.ts"],"sourcesContent":["export { CardFooter } from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter.types';\nexport { renderCardFooter_unstable } from './renderCardFooter';\nexport { useCardFooter_unstable } from './useCardFooter';\nexport { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,UAAU;eAAVA,sBAAU;;IAIVC,oBAAoB;eAApBA,+CAAoB;;IAFpBC,yBAAyB;eAAzBA,2CAAyB;;IAEHC,4BAA4B;eAA5BA,uDAA4B;;IADlDC,sBAAsB;eAAtBA,qCAAsB;;;4BAHJ;kCAEe;+BACH;2CAC4B"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCardFooter_unstable", {
enumerable: true,
get: function() {
return renderCardFooter_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCardFooter_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.root.children,
state.action && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.action, {})
]
});
};
@@ -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 { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\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":["renderCardFooter_unstable","state","assertSlots","_jsxs","root","children","action","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAE7B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMG,IAAI,CAACC,QAAQ;YACnBJ,MAAMK,MAAM,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,MAAM,EAAA,CAAA;;;AAGpC"}
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardFooter_unstable", {
enumerable: true,
get: function() {
return useCardFooter_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useCardFooter_unstable = (props, ref)=>{
const { action } = props;
return {
components: {
root: 'div',
action: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.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: _reactutilities.slot.optional(action, {
elementType: 'div'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { 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 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":["useCardFooter_unstable","props","ref","action","components","root","slot","always","getIntrinsicElementProps","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gCACwB;AAYxC,MAAMA,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IAEnB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FN,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN,QAAQG,oBAAAA,CAAKI,QAAQ,CAACP,QAAQ;YAAEM,aAAa;QAAM;IACrD;AACF"}
@@ -0,0 +1,104 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
cardFooterClassNames: function() {
return cardFooterClassNames;
},
useCardFooterStyles_unstable: function() {
return useCardFooterStyles_unstable;
}
});
const _react = require("@griffel/react");
const cardFooterClassNames = {
root: 'fui-CardFooter',
action: 'fui-CardFooter__action'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1063pyq",
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "fsbu5mz"
},
action: {
Frg6f3: [
"fcgxt0o",
"f1ujusj6"
],
B7frvx2: "f1ndzpm5",
B06c7xf: [
"f1fkeggc",
"f1u45u6i"
],
B8uq84v: "f16eyofs",
snkdo8: [
"f1u45u6i",
"f1fkeggc"
],
Bpf22ct: "f1wkmkig",
apjfyd: "f18alut9"
}
}, {
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){.f1ndzpm5 .fui-Button,.f1ndzpm5 .fui-Link{border-top-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1fkeggc .fui-Button,.f1fkeggc .fui-Link{border-right-color:currentColor;}.f1u45u6i .fui-Button,.f1u45u6i .fui-Link{border-left-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f16eyofs .fui-Button,.f16eyofs .fui-Link{border-bottom-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1wkmkig .fui-Button,.f1wkmkig .fui-Link{color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f18alut9 .fui-Button,.f18alut9 .fui-Link{outline-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useCardFooterStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(cardFooterClassNames.root, styles.root, state.root.className);
if (state.action) {
state.action.className = (0, _react.mergeClasses)(cardFooterClassNames.action, styles.action, state.action.className);
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["import { 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"],"names":["cardFooterClassNames","useCardFooterStyles_unstable","root","action","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","B7frvx2","B06c7xf","B8uq84v","snkdo8","Bpf22ct","apjfyd","d","p","m","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGiBA,oBAAoB;eAApBA;;IAyBAC,4BAA4B;eAA5BA;;;uBA5BoC;AAG1C,MAAMD,uBAAuB;IACpCE,MAAM;IACNC,QAAQ;AACZ;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,MAAA;QAAAI,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAP,QAAA;QAAAQ,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAqBP,MAAMnB,+BAAgCoB,CAAAA;IAC7C;IACA,MAAMC,SAASlB;IACfiB,MAAMnB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,qBAAqBE,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAChG,IAAIF,MAAMlB,MAAM,EAAE;QACdkB,MAAMlB,MAAM,CAACoB,SAAS,GAAGC,IAAAA,mBAAY,EAACxB,qBAAqBG,MAAM,EAAEmB,OAAOnB,MAAM,EAAEkB,MAAMlB,MAAM,CAACoB,SAAS;IAC5G;IACA,OAAOF;AACX"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CardHeader", {
enumerable: true,
get: function() {
return CardHeader;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCardHeader = require("./useCardHeader");
const _renderCardHeader = require("./renderCardHeader");
const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");
const CardHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardHeader.useCardHeader_unstable)(props, ref);
(0, _useCardHeaderStylesstyles.useCardHeaderStyles_unstable)(state);
return (0, _renderCardHeader.renderCardHeader_unstable)(state);
});
CardHeader.displayName = 'CardHeader';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import * 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';\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 return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["CardHeader","React","forwardRef","props","ref","state","useCardHeader_unstable","useCardHeaderStyles_unstable","renderCardHeader_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;+BACgB;kCACG;2CACG;AAOtC,MAAMA,aAAAA,WAAAA,GAAmDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQC,IAAAA,qCAAAA,EAAuBH,OAAOC;IAE5CG,IAAAA,uDAAAA,EAA6BF;IAC7B,OAAOG,IAAAA,2CAAAA,EAA0BH;AACnC;AAEAL,WAAWS,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering CardHeader.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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 * State used in rendering CardHeader.\n */\nexport type CardHeaderState = ComponentState<CardHeaderSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAqCA;;CAEC"}
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardHeader: function() {
return _CardHeader.CardHeader;
},
cardHeaderCSSVars: function() {
return _useCardHeaderStylesstyles.cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return _useCardHeaderStylesstyles.cardHeaderClassNames;
},
renderCardHeader_unstable: function() {
return _renderCardHeader.renderCardHeader_unstable;
},
useCardHeaderStyles_unstable: function() {
return _useCardHeaderStylesstyles.useCardHeaderStyles_unstable;
},
useCardHeader_unstable: function() {
return _useCardHeader.useCardHeader_unstable;
}
});
const _CardHeader = require("./CardHeader");
const _renderCardHeader = require("./renderCardHeader");
const _useCardHeader = require("./useCardHeader");
const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,UAAU;eAAVA,sBAAU;;IAIVC,iBAAiB;eAAjBA,4CAAiB;;IAAEC,oBAAoB;eAApBA,+CAAoB;;IAFvCC,yBAAyB;eAAzBA,2CAAyB;;IAEgBC,4BAA4B;eAA5BA,uDAA4B;;IADrEC,sBAAsB;eAAtBA,qCAAsB;;;4BAHJ;kCAEe;+BACH;2CAC+C"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCardHeader_unstable", {
enumerable: true,
get: function() {
return renderCardHeader_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCardHeader_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.image && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.image, {}),
state.header && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.header, {}),
state.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.description, {}),
state.action && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.action, {})
]
});
};
@@ -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 { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\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":["renderCardHeader_unstable","state","assertSlots","_jsxs","root","image","_jsx","header","description","action"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,4BAA4B,CAACC;IACxCC,IAAAA,2BAAAA,EAA6BD;IAE7B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,KAAK,EAAA,CAAA;YAC3BJ,MAAMM,MAAM,IAAA,WAAA,GAAID,IAAAA,eAAA,EAACL,MAAMM,MAAM,EAAA,CAAA;YAC7BN,MAAMO,WAAW,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,WAAW,EAAA,CAAA;YACvCP,MAAMQ,MAAM,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACL,MAAMQ,MAAM,EAAA,CAAA;;;AAGpC"}
@@ -0,0 +1,97 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardHeader_unstable", {
enumerable: true,
get: function() {
return useCardHeader_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _CardContext = require("../Card/CardContext");
const _useCardHeaderStylesstyles = require("./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 /*#__PURE__*/ _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;
}
const useCardHeader_unstable = (props, ref)=>{
const { image, header, description, action } = props;
const { selectableA11yProps: { referenceId, setReferenceId } } = (0, _CardContext.useCardContext_unstable)();
const headerRef = _react.useRef(null);
const hasChildId = _react.useRef(false);
const generatedId = (0, _reactutilities.useId)(_useCardHeaderStylesstyles.cardHeaderClassNames.header, referenceId);
const headerSlot = _reactutilities.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: _reactutilities.slot.always((0, _reactutilities.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: _reactutilities.slot.optional(image, {
elementType: 'div'
}),
header: headerSlot,
description: _reactutilities.slot.optional(description, {
elementType: 'div'
}),
action: _reactutilities.slot.optional(action, {
elementType: 'div'
})
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,184 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
cardHeaderCSSVars: function() {
return cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return cardHeaderClassNames;
},
useCardHeaderStyles_unstable: function() {
return useCardHeaderStyles_unstable;
}
});
const _react = require("@griffel/react");
const cardHeaderClassNames = {
root: 'fui-CardHeader',
image: 'fui-CardHeader__image',
header: 'fui-CardHeader__header',
description: 'fui-CardHeader__description',
action: 'fui-CardHeader__action'
};
const cardHeaderCSSVars = {
cardHeaderGapVar: '--fui-CardHeader--gap'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bkc6ea2: "fkufhic",
Bt984gj: "f122n59"
},
image: {
mc9l5x: "ftuwxu6",
t21cq0: [
"fql5097",
"f6yss9k"
]
},
header: {
mc9l5x: "f22iagw"
},
description: {
mc9l5x: "f22iagw"
},
action: {
Frg6f3: [
"f6yss9k",
"fql5097"
],
B7frvx2: "f1ndzpm5",
B06c7xf: [
"f1fkeggc",
"f1u45u6i"
],
B8uq84v: "f16eyofs",
snkdo8: [
"f1u45u6i",
"f1fkeggc"
],
Bpf22ct: "f1wkmkig",
apjfyd: "f18alut9"
}
}, {
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){.f1ndzpm5 .fui-Button,.f1ndzpm5 .fui-Link{border-top-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1fkeggc .fui-Button,.f1fkeggc .fui-Link{border-right-color:currentColor;}.f1u45u6i .fui-Button,.f1u45u6i .fui-Link{border-left-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f16eyofs .fui-Button,.f16eyofs .fui-Link{border-bottom-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1wkmkig .fui-Button,.f1wkmkig .fui-Link{color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f18alut9 .fui-Button,.f18alut9 .fui-Link{outline-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useStylesGrid = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw"
},
header: {
Bh6795r: "fqerorx"
},
image: {},
description: {},
action: {}
}, {
d: [
".f22iagw{display:flex;}",
".fqerorx{flex-grow:1;}"
]
});
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 (0, _react.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
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CardPreview", {
enumerable: true,
get: function() {
return CardPreview;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCardPreview = require("./useCardPreview");
const _renderCardPreview = require("./renderCardPreview");
const _useCardPreviewStylesstyles = require("./useCardPreviewStyles.styles");
const CardPreview = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardPreview.useCardPreview_unstable)(props, ref);
(0, _useCardPreviewStylesstyles.useCardPreviewStyles_unstable)(state);
return (0, _renderCardPreview.renderCardPreview_unstable)(state);
});
CardPreview.displayName = 'CardPreview';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/CardPreview.tsx"],"sourcesContent":["import * 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';\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 return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"names":["CardPreview","React","forwardRef","props","ref","state","useCardPreview_unstable","useCardPreviewStyles_unstable","renderCardPreview_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;iEAVU;gCACiB;mCACG;4CACG;AAOvC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAC9B,OAAOG,IAAAA,6CAAAA,EAA2BH;AACpC;AAEAL,YAAYS,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering CardPreview.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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 * State used in rendering CardPreview.\n */\nexport type CardPreviewState = ComponentState<CardPreviewSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CardPreview: function() {
return _CardPreview.CardPreview;
},
cardPreviewClassNames: function() {
return _useCardPreviewStylesstyles.cardPreviewClassNames;
},
renderCardPreview_unstable: function() {
return _renderCardPreview.renderCardPreview_unstable;
},
useCardPreviewStyles_unstable: function() {
return _useCardPreviewStylesstyles.useCardPreviewStyles_unstable;
},
useCardPreview_unstable: function() {
return _useCardPreview.useCardPreview_unstable;
}
});
const _CardPreview = require("./CardPreview");
const _renderCardPreview = require("./renderCardPreview");
const _useCardPreview = require("./useCardPreview");
const _useCardPreviewStylesstyles = require("./useCardPreviewStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/index.ts"],"sourcesContent":["export { CardPreview } from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview.types';\nexport { renderCardPreview_unstable } from './renderCardPreview';\nexport { useCardPreview_unstable } from './useCardPreview';\nexport { cardPreviewClassNames, useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAIXC,qBAAqB;eAArBA,iDAAqB;;IAFrBC,0BAA0B;eAA1BA,6CAA0B;;IAEHC,6BAA6B;eAA7BA,yDAA6B;;IADpDC,uBAAuB;eAAvBA,uCAAuB;;;6BAHJ;mCAEe;gCACH;4CAC6B"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCardPreview_unstable", {
enumerable: true,
get: function() {
return renderCardPreview_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderCardPreview_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.root.children,
state.logo && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.logo, {})
]
});
};
@@ -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 { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\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":["renderCardPreview_unstable","state","assertSlots","_jsxs","root","children","logo","_jsx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMG,IAAI,CAACC,QAAQ;YACnBJ,MAAMK,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,IAAI,EAAA,CAAA;;;AAGhC"}
@@ -0,0 +1,63 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardPreview_unstable", {
enumerable: true,
get: function() {
return useCardPreview_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _CardContext = require("../Card/CardContext");
const _useCardPreviewStylesstyles = require("./useCardPreviewStyles.styles");
const useCardPreview_unstable = (props, ref)=>{
const { logo } = props;
const { selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId } } = (0, _CardContext.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 = (0, _reactutilities.useMergedRefs)(ref, _react.useRef(null));
_react.useEffect(()=>{
if (referenceLabel && referenceId) {
return;
}
if (previewRef.current && previewRef.current.parentNode) {
const img = previewRef.current.parentNode.querySelector(`.${_useCardPreviewStylesstyles.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: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: previewRef,
...props
}), {
elementType: 'div'
}),
logo: _reactutilities.slot.optional(logo, {
elementType: 'div'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } 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 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":["useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","useCardContext_unstable","previewRef","useMergedRefs","React","useRef","useEffect","current","parentNode","img","querySelector","cardPreviewClassNames","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","slot","always","getIntrinsicElementProps","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCACuC;6BAEtB;4CACF;AAW/B,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEjB,MAAM,EACJG,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EACxF,GAAGC,IAAAA,oCAAAA;IACJ,SAAS;IACT,4EAA4E;IAC5E,4FAA4F;IAC5F,MAAMC,aAAaC,IAAAA,6BAAAA,EAAcT,KAAkCU,OAAMC,MAAM,CAAiB;IAEhGD,OAAME,SAAS,CAAC;QACd,IAAIT,kBAAkBC,aAAa;YACjC;QACF;QAEA,IAAII,WAAWK,OAAO,IAAIL,WAAWK,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAMP,WAAWK,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,CAAC,EAAEC,iDAAAA,CAAsBC,IAAI,CAAC,MAAM,CAAC;YAEhH,IAAIH,KAAK;gBACP,MAAMI,YAAYJ,IAAIK,YAAY,CAAC;gBACnC,MAAMC,kBAAkBN,IAAIK,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBf,eAAee;gBACjB,OAAO,IAAIN,IAAIO,GAAG,EAAE;oBAClBjB,kBAAkBU,IAAIO,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBd,kBAAkBc;gBACpB;YACF;QACF;IACF,GAAG;QAACd;QAAmBF;QAAgBK;QAAYJ;QAAaE;KAAe;IAE/E,OAAO;QACLiB,YAAY;YACVL,MAAM;YACNjB,MAAM;QACR;QAEAiB,MAAMM,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B1B,KAAKQ;YACL,GAAGT,KAAK;QACV,IACA;YAAE4B,aAAa;QAAM;QAEvB1B,MAAMuB,oBAAAA,CAAKI,QAAQ,CAAC3B,MAAM;YAAE0B,aAAa;QAAM;IACjD;AACF"}
@@ -0,0 +1,63 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
cardPreviewClassNames: function() {
return cardPreviewClassNames;
},
useCardPreviewStyles_unstable: function() {
return useCardPreviewStyles_unstable;
}
});
const _react = require("@griffel/react");
const cardPreviewClassNames = {
root: 'fui-CardPreview',
logo: 'fui-CardPreview__logo'
};
const useStyles = /*#__PURE__*/ (0, _react.__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;}"
]
});
const useCardPreviewStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(cardPreviewClassNames.root, styles.root, state.root.className);
if (state.logo) {
state.logo.className = (0, _react.mergeClasses)(cardPreviewClassNames.logo, styles.logo, state.logo.className);
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["import { 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"],"names":["cardPreviewClassNames","useCardPreviewStyles_unstable","root","logo","useStyles","__styles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGiBA,qBAAqB;eAArBA;;IAuBAC,6BAA6B;eAA7BA;;;uBA1BwB;AAG9B,MAAMD,wBAAwB;IACrCE,MAAM;IACNC,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,MAAA;QAAAI,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAN,MAAA;QAAAG,QAAA;QAAAI,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAmBP,MAAMb,gCAAiCc,CAAAA;IAC9C;IACA,MAAMC,SAASZ;IACfW,MAAMb,IAAI,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,sBAAsBE,IAAI,EAAEc,OAAOd,IAAI,EAAEa,MAAMb,IAAI,CAACe,SAAS;IACjG,IAAIF,MAAMZ,IAAI,EAAE;QACZY,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAAClB,sBAAsBG,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IACrG;IACA,OAAOF;AACX"}
+88
View File
@@ -0,0 +1,88 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Card: function() {
return _Card.Card;
},
CardFooter: function() {
return _CardFooter.CardFooter;
},
CardHeader: function() {
return _CardHeader.CardHeader;
},
CardPreview: function() {
return _CardPreview.CardPreview;
},
CardProvider: function() {
return _Card.CardProvider;
},
cardCSSVars: function() {
return _Card.cardCSSVars;
},
cardClassNames: function() {
return _Card.cardClassNames;
},
cardFooterClassNames: function() {
return _CardFooter.cardFooterClassNames;
},
cardHeaderCSSVars: function() {
return _CardHeader.cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return _CardHeader.cardHeaderClassNames;
},
cardPreviewClassNames: function() {
return _CardPreview.cardPreviewClassNames;
},
renderCardFooter_unstable: function() {
return _CardFooter.renderCardFooter_unstable;
},
renderCardHeader_unstable: function() {
return _CardHeader.renderCardHeader_unstable;
},
renderCardPreview_unstable: function() {
return _CardPreview.renderCardPreview_unstable;
},
renderCard_unstable: function() {
return _Card.renderCard_unstable;
},
useCardContext_unstable: function() {
return _Card.useCardContext_unstable;
},
useCardFooterStyles_unstable: function() {
return _CardFooter.useCardFooterStyles_unstable;
},
useCardFooter_unstable: function() {
return _CardFooter.useCardFooter_unstable;
},
useCardHeaderStyles_unstable: function() {
return _CardHeader.useCardHeaderStyles_unstable;
},
useCardHeader_unstable: function() {
return _CardHeader.useCardHeader_unstable;
},
useCardPreviewStyles_unstable: function() {
return _CardPreview.useCardPreviewStyles_unstable;
},
useCardPreview_unstable: function() {
return _CardPreview.useCardPreview_unstable;
},
useCardStyles_unstable: function() {
return _Card.useCardStyles_unstable;
},
useCard_unstable: function() {
return _Card.useCard_unstable;
}
});
const _Card = require("./Card");
const _CardFooter = require("./CardFooter");
const _CardHeader = require("./CardHeader");
const _CardPreview = require("./CardPreview");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Card,\n cardClassNames,\n cardCSSVars,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CardOnSelectionChangeEvent } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n cardHeaderCSSVars,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\nexport { CardProvider, useCardContext_unstable } from './Card';\nexport type { CardContextValue } from './Card';\n"],"names":["Card","CardFooter","CardHeader","CardPreview","CardProvider","cardCSSVars","cardClassNames","cardFooterClassNames","cardHeaderCSSVars","cardHeaderClassNames","cardPreviewClassNames","renderCardFooter_unstable","renderCardHeader_unstable","renderCardPreview_unstable","renderCard_unstable","useCardContext_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardStyles_unstable","useCard_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,IAAI;eAAJA,UAAI;;IASJC,UAAU;eAAVA,sBAAU;;IAQVC,UAAU;eAAVA,sBAAU;;IASVC,WAAW;eAAXA,wBAAW;;IAOJC,YAAY;eAAZA,kBAAY;;IA/BnBC,WAAW;eAAXA,iBAAW;;IADXC,cAAc;eAAdA,oBAAc;;IASdC,oBAAoB;eAApBA,gCAAoB;;IASpBC,iBAAiB;eAAjBA,6BAAiB;;IADjBC,oBAAoB;eAApBA,gCAAoB;;IASpBC,qBAAqB;eAArBA,kCAAqB;;IAhBrBC,yBAAyB;eAAzBA,qCAAyB;;IASzBC,yBAAyB;eAAzBA,qCAAyB;;IAQzBC,0BAA0B;eAA1BA,uCAA0B;;IAzB1BC,mBAAmB;eAAnBA,yBAAmB;;IA8BEC,uBAAuB;eAAvBA,6BAAuB;;IArB5CC,4BAA4B;eAA5BA,wCAA4B;;IAC5BC,sBAAsB;eAAtBA,kCAAsB;;IAQtBC,4BAA4B;eAA5BA,wCAA4B;;IAC5BC,sBAAsB;eAAtBA,kCAAsB;;IAOtBC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;IA1BvBC,sBAAsB;eAAtBA,4BAAsB;;IACtBC,gBAAgB;eAAhBA,sBAAgB;;;sBACX;4BAQA;4BASA;6BAQA"}
+1
View File
@@ -0,0 +1 @@
export { Card, CardProvider, cardCSSVars, cardClassNames, cardContextDefaultValue, renderCard_unstable, useCardContext_unstable, useCardStyles_unstable, useCard_unstable } from './components/Card/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Card.ts"],"sourcesContent":["export type {\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n} from './components/Card/index';\nexport {\n Card,\n CardProvider,\n cardCSSVars,\n cardClassNames,\n cardContextDefaultValue,\n renderCard_unstable,\n useCardContext_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './components/Card/index';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable"],"rangeMappings":"","mappings":"AAQA,SACEA,IAAI,EACJC,YAAY,EACZC,WAAW,EACXC,cAAc,EACdC,uBAAuB,EACvBC,mBAAmB,EACnBC,uBAAuB,EACvBC,sBAAsB,EACtBC,gBAAgB,QACX,0BAA0B"}
+1
View File
@@ -0,0 +1 @@
export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './components/CardFooter/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardFooter.ts"],"sourcesContent":["export type { CardFooterProps, CardFooterSlots, CardFooterState } from './components/CardFooter/index';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './components/CardFooter/index';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
+1
View File
@@ -0,0 +1 @@
export { CardHeader, cardHeaderCSSVars, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './components/CardHeader/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardHeader.ts"],"sourcesContent":["export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './components/CardHeader/index';\nexport {\n CardHeader,\n cardHeaderCSSVars,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './components/CardHeader/index';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,UAAU,EACVC,iBAAiB,EACjBC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
+1
View File
@@ -0,0 +1 @@
export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './components/CardPreview/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardPreview.ts"],"sourcesContent":["export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './components/CardPreview/index';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './components/CardPreview/index';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+14
View File
@@ -0,0 +1,14 @@
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';
/**
* 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);
return renderCard_unstable(state, cardContextValue);
});
Card.displayName = 'Card';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["import * 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';\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 return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAGhE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D;;CAEC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAiB,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,mBAAmBN,oBAAoBK;IAE7CN,uBAAuBM;IACvB,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}
+1
View File
@@ -0,0 +1 @@
import * as React from 'react';
@@ -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/**\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"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+23
View File
@@ -0,0 +1,23 @@
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;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/CardContext.ts"],"sourcesContent":["import * 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 = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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;QAAMZ;WAAAA,CAAAA,oBAAAA,MAAMa,UAAU,CAACZ,0BAAjBD,+BAAAA,oBAAiCI;AAAsB,EAAE"}
+5
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 } from './useCard';
export { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/index.ts"],"sourcesContent":["export { Card } from './Card';\nexport type {\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 } from './useCard';\nexport { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';\n"],"names":["Card","CardProvider","cardContextDefaultValue","useCardContext_unstable","renderCard_unstable","useCard_unstable","cardCSSVars","cardClassNames","useCardStyles_unstable"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAS9B,SAASC,YAAY,EAAEC,uBAAuB,EAAEC,uBAAuB,QAAQ,gBAAgB;AAC/F,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,WAAW,EAAEC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}
+18
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
]
})
});
};
@@ -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 { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\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"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,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"}
+96
View File
@@ -0,0 +1,96 @@
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, ...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]
});
const interactiveFocusAttributes = {
...groupperAttrs,
tabIndex: 0
};
return {
interactive,
focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
};
};
/**
* 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' } = 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);
return {
appearance,
orientation,
size,
interactive,
selectable,
selectFocused,
selected,
selectableA11yProps: {
setReferenceId,
referenceId,
referenceLabel,
setReferenceLabel
},
components: {
root: 'div',
floatingAction: 'div',
checkbox: 'input'
},
root: slot.always(getIntrinsicElementProps('div', {
ref: cardRef,
role: 'group',
...!selectable ? focusAttributes : null,
...props,
...selectableCardProps
}), {
elementType: 'div'
}),
floatingAction: floatingActionSlot,
checkbox: checkboxSlot
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,5 @@
export function useCardContextValue({ selectableA11yProps }) {
return {
selectableA11yProps
};
}
@@ -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"],"rangeMappings":";;;;","mappings":"AAEA,OAAO,SAASA,oBAAoB,EAAEC,mBAAmB,EAAa;IACpE,OAAO;QAAEA;IAAoB;AAC/B"}
@@ -0,0 +1,138 @@
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';
/**
* @internal
*
* 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.
*
* @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 } = 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 (shouldRestrictTriggerAction(event)) {
return;
}
const newCheckedValue = !selected;
setSelected(newCheckedValue);
if (onSelectionChange) {
onSelectionChange(event, {
selected: newCheckedValue
});
}
}, [
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,
onChange: (event)=>onChangeHandler(event),
onFocus: ()=>setSelectFocused(true),
onBlur: ()=>setSelectFocused(false),
...selectableCheckboxProps
},
elementType: 'input'
});
}, [
checkbox,
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
@@ -0,0 +1,415 @@
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 useCardStyles = /*#__PURE__*/__styles({
focused: {
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
B8q5s1w: "f8hki3x",
Bci5o5g: ["f1d2448m", "ffh67wi"],
n8qw10: "f1bjia2o",
Bdrgwmp: ["ffh67wi", "f1d2448m"],
Bb7d1vk: "f226i61",
zhwhgb: ["f13kzufm", "fsx75g8"],
dhy2o1: "flujwa2",
Gfyso: ["fsx75g8", "f13kzufm"],
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"],
Bm3wd5j: "f1k55ka9",
Bbrhkcr: ["fgclinu", "f16pcs8n"],
f1oku: "fycbxed",
aywvf2: ["f16pcs8n", "fgclinu"],
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"
},
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: {
ycbfsm: "fkc42ay",
Bsw6fvg: "f1rirnrt",
Bbusuzp: "f1lkg8j3",
xgfqdd: "f1nkj0oa",
Bmmdzwq: "fey3rwa",
zkpvhj: ["f5jhx11", "fff9uym"],
B20bydw: "fm7n0jy",
Bwwwggl: ["fff9uym", "f5jhx11"]
},
highContrastInteractive: {
h1vhog: "fpfvv3l",
kslmdy: "f1oamsm6",
Baaf6ca: "f1il21bs",
x9zz3d: "fnn5dk0",
Bmmdzwq: "fey3rwa",
zkpvhj: ["f5jhx11", "fff9uym"],
B20bydw: "fm7n0jy",
Bwwwggl: ["fff9uym", "f5jhx11"]
},
select: {
qhf8xq: "f1euv43f",
Bhzewxz: "fqclxi7",
j35jbq: ["fiv86kb", "f36uhnt"],
Bj3rh1h: "f19g0ac"
},
hiddenCheckbox: {
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
a9b677: "frkrog8",
Bqenvij: "f1mpe4l3",
qhf8xq: "f1euv43f",
Bh84pgu: "fmf1zke",
Bgl5zvf: "f1wch0ki",
Huce71: "fz5stix"
}
}, {
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);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index: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;}"],
m: [["@media (forced-colors: active){.f226i61[data-fui-focus-visible]::after{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f13kzufm[data-fui-focus-visible]::after{border-right-color:Highlight;}.fsx75g8[data-fui-focus-visible]::after{border-left-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.flujwa2[data-fui-focus-visible]::after{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1k55ka9[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f16pcs8n[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}.fgclinu[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fycbxed[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1nkj0oa .fui-CardPreview,.f1nkj0oa .fui-CardFooter{forced-color-adjust:auto;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fey3rwa::after{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f5jhx11::after{border-right-color:Highlight;}.fff9uym::after{border-left-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fm7n0jy::after{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fpfvv3l:hover,.fpfvv3l :active{forced-color-adjust:none;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1oamsm6:hover,.f1oamsm6 :active{background-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1il21bs:hover,.f1il21bs :active{color:HighlightText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fnn5dk0:hover .fui-CardPreview,.fnn5dk0 :active .fui-CardPreview,.fnn5dk0:hover .fui-CardFooter,.fnn5dk0 :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);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
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.interactive || state.selectable;
const focusedClassName = React.useMemo(() => {
if (state.selectable) {
if (state.selectFocused) {
return styles.selectableFocused;
}
return '';
}
return styles.focused;
}, [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.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
@@ -0,0 +1,12 @@
import * as React from 'react';
import { useCardFooter_unstable } from './useCardFooter';
import { renderCardFooter_unstable } from './renderCardFooter';
import { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
/**
* 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);
return renderCardFooter_unstable(state);
});
CardFooter.displayName = 'CardFooter';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["import * 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';\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 return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAI5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
@@ -0,0 +1,3 @@
/**
* State used in rendering CardFooter.
*/ export { };
@@ -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 * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAsBA;;CAEC,GACD,WAA8D"}
+4
View File
@@ -0,0 +1,4 @@
export { CardFooter } from './CardFooter';
export { renderCardFooter_unstable } from './renderCardFooter';
export { useCardFooter_unstable } from './useCardFooter';
export { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/index.ts"],"sourcesContent":["export { CardFooter } from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter.types';\nexport { renderCardFooter_unstable } from './renderCardFooter';\nexport { useCardFooter_unstable } from './useCardFooter';\nexport { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\n"],"names":["CardFooter","renderCardFooter_unstable","useCardFooter_unstable","cardFooterClassNames","useCardFooterStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

Some files were not shown because too many files have changed in this diff Show More