Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

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

2428
node_modules/@fluentui/react-card/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-card/LICENSE generated vendored Normal file
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
node_modules/@fluentui/react-card/README.md generated vendored Normal file
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).

474
node_modules/@fluentui/react-card/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,474 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } 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>;
export declare type CardBaseProps = Omit<CardProps, 'appearance' | 'orientation' | 'size'>;
export declare type CardBaseState = Omit<CardState, 'appearance' | 'orientation' | 'size'>;
/**
* 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>;
/**
* CardFooter base props (same as CardFooterProps since CardFooter has no design props)
*/
export declare type CardFooterBaseProps = CardFooterProps;
/**
* CardFooter base state (same as CardFooterState since CardFooter has no design props)
*/
export declare type CardFooterBaseState = CardFooterState;
/**
* 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>;
/**
* CardHeader base props (same as CardHeaderProps since CardHeader has no design props)
*/
export declare type CardHeaderBaseProps = CardHeaderProps;
/**
* CardHeader base state (same as CardHeaderState since CardHeader has no design props)
*/
export declare type CardHeaderBaseState = CardHeaderState;
/**
* 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>;
/**
* CardPreview base props (same as CardPreviewProps since CardPreview has no design props)
*/
export declare type CardPreviewBaseProps = CardPreviewProps;
/**
* CardPreview base state (same as CardPreviewState since CardPreview has no design props)
*/
export declare type CardPreviewBaseState = CardPreviewState;
/**
* 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;
/**
* Makes the card and card selection disabled (not propagated to children).
*
* @default false
*/
disabled?: boolean;
};
/**
* @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;
/**
* Defines whether the card is disabled.
*
* @default false
*/
disabled: boolean;
}>;
/**
* Render the final JSX of Card.
*/
export declare const renderCard_unstable: (state: CardBaseState, cardContextValue: CardContextValue) => JSXElement;
/**
* Render the final JSX of CardFooter.
*/
export declare const renderCardFooter_unstable: (state: CardFooterBaseState) => JSXElement;
/**
* Render the final JSX of CardHeader.
*/
export declare const renderCardHeader_unstable: (state: CardHeaderBaseState) => JSXElement;
/**
* Render the final JSX of CardPreview.
*/
export declare const renderCardPreview_unstable: (state: CardPreviewBaseState) => JSXElement;
/**
* 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;
/**
* Base hook for Card component, which manages state related to interactivity, selection,
* focus management, ARIA attributes, and slot structure without design props.
*
* @param props - props from this instance of Card
* @param ref - reference to the root element of Card
*/
export declare const useCardBase_unstable: (props: CardBaseProps, ref: React_2.Ref<HTMLDivElement>) => CardBaseState;
/**
* @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;
/**
* Base hook for CardFooter component, which manages state related to slots structure.
* Note: CardFooter has no design props, so this is equivalent to useCardFooter_unstable.
*
* @param props - props from this instance of CardFooter
* @param ref - reference to root HTMLElement of CardFooter
*/
export declare const useCardFooterBase_unstable: (props: CardFooterBaseProps, ref: React_2.Ref<HTMLElement>) => CardFooterBaseState;
/**
* 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;
/**
* Base hook for CardHeader component, which manages state related to slots structure
* and the card's selectable accessibility properties.
* Note: CardHeader has no design props, so this is equivalent to useCardHeader_unstable.
*
* @param props - props from this instance of CardHeader
* @param ref - reference to root HTMLElement of CardHeader
*/
export declare const useCardHeaderBase_unstable: (props: CardHeaderBaseProps, ref: React_2.Ref<HTMLElement>) => CardHeaderBaseState;
/**
* 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;
/**
* Base hook for CardPreview component, which manages state related to slots structure
* and the card's selectable accessibility label.
* Note: CardPreview has no design props, so this is equivalent to useCardPreview_unstable.
*
* @param props - props from this instance of CardPreview
* @param ref - reference to root HTMLElement of CardPreview
*/
export declare const useCardPreviewBase_unstable: (props: CardPreviewBaseProps, ref: React_2.Ref<HTMLElement>) => CardPreviewBaseState;
/**
* 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 { }

43
node_modules/@fluentui/react-card/lib-commonjs/Card.js generated vendored Normal file
View File

@@ -0,0 +1,43 @@
"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;
},
useCardBase_unstable: function() {
return _index.useCardBase_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");

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 CardBaseProps,\n CardBaseState,\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 useCardBase_unstable,\n} from './components/Card/index';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable","useCardBase_unstable"],"mappings":";;;;;;;;;;;IAWEA;0BAAI;;;eACJC,mBAAY;;;eACZC,kBAAW;;;eACXC,qBAAc;;;eACdC,8BAAuB;;;eACvBC,0BAAmB;;;eAInBI,2BAAoB;;;eAHpBH,8BAAuB;;;eACvBC,6BAAsB;;;eACtBC,uBAAgB;;;uBAEX,0BAA0B"}

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, {
CardFooter: function() {
return _index.CardFooter;
},
cardFooterClassNames: function() {
return _index.cardFooterClassNames;
},
renderCardFooter_unstable: function() {
return _index.renderCardFooter_unstable;
},
useCardFooterBase_unstable: function() {
return _index.useCardFooterBase_unstable;
},
useCardFooterStyles_unstable: function() {
return _index.useCardFooterStyles_unstable;
},
useCardFooter_unstable: function() {
return _index.useCardFooter_unstable;
}
});
const _index = require("./components/CardFooter/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardFooter.ts"],"sourcesContent":["export type {\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n CardFooterBaseProps,\n CardFooterBaseState,\n} from './components/CardFooter/index';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n useCardFooterBase_unstable,\n} from './components/CardFooter/index';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardFooterBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,gCAAgC"}

View File

@@ -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 _index.CardHeader;
},
cardHeaderCSSVars: function() {
return _index.cardHeaderCSSVars;
},
cardHeaderClassNames: function() {
return _index.cardHeaderClassNames;
},
renderCardHeader_unstable: function() {
return _index.renderCardHeader_unstable;
},
useCardHeaderBase_unstable: function() {
return _index.useCardHeaderBase_unstable;
},
useCardHeaderStyles_unstable: function() {
return _index.useCardHeaderStyles_unstable;
},
useCardHeader_unstable: function() {
return _index.useCardHeader_unstable;
}
});
const _index = require("./components/CardHeader/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardHeader.ts"],"sourcesContent":["export type {\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n CardHeaderBaseProps,\n CardHeaderBaseState,\n} from './components/CardHeader/index';\nexport {\n CardHeader,\n cardHeaderCSSVars,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n useCardHeaderBase_unstable,\n} from './components/CardHeader/index';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardHeaderBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,iBAAU;;;eACVC,wBAAiB;;;eACjBC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,gCAAgC"}

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, {
CardPreview: function() {
return _index.CardPreview;
},
cardPreviewClassNames: function() {
return _index.cardPreviewClassNames;
},
renderCardPreview_unstable: function() {
return _index.renderCardPreview_unstable;
},
useCardPreviewBase_unstable: function() {
return _index.useCardPreviewBase_unstable;
},
useCardPreviewStyles_unstable: function() {
return _index.useCardPreviewStyles_unstable;
},
useCardPreview_unstable: function() {
return _index.useCardPreview_unstable;
}
});
const _index = require("./components/CardPreview/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardPreview.ts"],"sourcesContent":["export type {\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n CardPreviewBaseProps,\n CardPreviewBaseState,\n} from './components/CardPreview/index';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n useCardPreviewBase_unstable,\n} from './components/CardPreview/index';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardPreviewBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAG1BG,kCAA2B;;;eAF3BF,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,iCAAiC"}

View File

@@ -0,0 +1,26 @@
'use client';
"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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
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);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCardStyles_unstable')(state);
return (0, _renderCard.renderCard_unstable)(state, cardContextValue);
});
Card.displayName = 'Card';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles.styles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n const state = useCard_unstable(props, ref);\n const cardContextValue = useCardContextValue(state);\n\n useCardStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardStyles_unstable')(state);\n\n return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"],"names":["React","useCard_unstable","renderCard_unstable","useCardStyles_unstable","useCardContextValue","useCustomStyleHook_unstable","Card","forwardRef","props","ref","state","cardContextValue","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;yBACE,YAAY;4BACT,eAAe;qCACZ,yBAAyB;qCAG5B,wBAAwB;qCAChB,kCAAkC;AAKvE,MAAMM,OAAAA,WAAAA,GAAuCN,OAAMO,UAAU,CAAiB,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yBAAAA,EAAiBO,OAAOC;IACtC,MAAME,uBAAmBP,wCAAAA,EAAoBM;QAE7CP,2CAAAA,EAAuBO;QAEvBL,gDAAAA,EAA4B,0BAA0BK;IAEtD,WAAOR,+BAAAA,EAAoBQ,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

View File

@@ -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"));

View File

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

View File

@@ -0,0 +1,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/CardContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n selectableA11yProps: {\n referenceId: undefined,\n setReferenceId() {\n /* Noop */\n },\n referenceLabel: undefined,\n setReferenceLabel() {\n /* Noop */\n },\n },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = (): CardContextValue => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;gBA0BaU;;;2BAhBAN;;;2BAqBAQ;;;;;iEA7BU,QAAQ;AAG/B,MAAMX,4BAAcD,OAAME,aAAa,CAA+BC;AAK/D,MAAMC,0BAA4C;IACvDC,qBAAqB;QACnBC,aAAaH;QACbI;QACE,QAAQ,GACV;QACAC,gBAAgBL;QAChBM;QACE,QAAQ,GACV;IACF;AACF,EAAE;AAKK,MAAMC,eAAeT,YAAYU,QAAQ,CAAC;AAK1C,MAAMC,0BAA0B;QAAwBZ;WAAAA,CAAAA,oBAAAA,OAAMa,UAAU,CAACZ,YAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAiCI;EAAwB"}

View File

@@ -0,0 +1,47 @@
"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;
},
useCardBase_unstable: function() {
return _useCard.useCardBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/index.ts"],"sourcesContent":["export { Card } from './Card';\nexport type {\n CardBaseProps,\n CardBaseState,\n CardContextValue,\n CardOnSelectData,\n CardOnSelectionChangeEvent,\n CardProps,\n CardSlots,\n CardState,\n} from './Card.types';\nexport { CardProvider, cardContextDefaultValue, useCardContext_unstable } from './CardContext';\nexport { renderCard_unstable } from './renderCard';\nexport { useCard_unstable, useCardBase_unstable } from './useCard';\nexport { cardCSSVars, cardClassNames, useCardStyles_unstable } from './useCardStyles.styles';\n"],"names":["Card","CardProvider","cardContextDefaultValue","useCardContext_unstable","renderCard_unstable","useCard_unstable","useCardBase_unstable","cardCSSVars","cardClassNames","useCardStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;yBAAI;;;eAWJC,yBAAY;;eAGD;eAAXM;;;eAAaC,mCAAc;;;eAHbN,oCAAuB;;;eACrCE,+BAAmB;;;eACDE,6BAAoB;;;eAFCH,oCAAuB;;;eAGjCM,2CAAsB;;;eADnDJ,yBAAgB;;;sBAbJ,SAAS;6BAWiD,gBAAgB;4BAC3D,eAAe;yBACI,YAAY;qCACC,yBAAyB"}

View File

@@ -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
]
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Card/renderCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardBaseState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardBaseState, cardContextValue: CardContextValue): JSXElement => {\n assertSlots<CardSlots>(state);\n\n return (\n <state.root>\n <CardProvider value={cardContextValue}>\n {state.checkbox ? <state.checkbox /> : null}\n {state.floatingAction ? <state.floatingAction /> : null}\n {state.root.children}\n </CardProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CardProvider","renderCard_unstable","state","cardContextValue","root","value","checkbox","floatingAction","children"],"mappings":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;6BAG3B,gBAAgB;AAKtC,4BAA4B,CAACC,OAAsBC;QACxDJ,2BAAAA,EAAuBG;IAEvB,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,gBAAA,EAACJ,yBAAAA,EAAAA;YAAaK,OAAOF;;gBAClBD,MAAMI,QAAQ,GAAA,WAAA,OAAG,eAAA,EAACJ,MAAMI,QAAQ,EAAA,CAAA,KAAM;gBACtCJ,MAAMK,cAAc,GAAA,WAAA,GAAG,mBAAA,EAACL,MAAMK,cAAc,EAAA,CAAA,KAAM;gBAClDL,MAAME,IAAI,CAACI,QAAQ;;;;AAI5B,EAAE"}

View File

@@ -0,0 +1,137 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useCardBase_unstable: function() {
return useCardBase_unstable;
},
useCard_unstable: 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, disabled = false, ...props })=>{
const interactive = [
'onClick',
'onDoubleClick',
'onMouseUp',
'onMouseDown',
'onPointerUp',
'onPointerDown',
'onTouchStart',
'onTouchEnd',
'onDragStart',
'onDragEnd'
].some((prop)=>props[prop]);
// default focusMode to tab-only when interactive, and off when not
const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
const groupperAttrs = (0, _reacttabster.useFocusableGroup)({
tabBehavior: focusMap[focusMode]
});
if (disabled) {
return {
interactive: false,
focusAttributes: null
};
}
if (focusMode === 'off') {
return {
interactive,
focusAttributes: null
};
}
return {
interactive,
focusAttributes: {
...groupperAttrs,
tabIndex: 0
}
};
};
const useCard_unstable = (props, ref)=>{
const { appearance = 'filled', orientation = 'vertical', size = 'medium', ...cardProps } = props;
const state = useCardBase_unstable(cardProps, ref);
return {
...state,
appearance,
orientation,
size
};
};
const useCardBase_unstable = (props, ref)=>{
const { disabled = false, ...restProps } = 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);
let cardRootProps = {
...!selectable ? focusAttributes : null,
...restProps,
...selectableCardProps
};
if (disabled) {
cardRootProps = {
...restProps,
'aria-disabled': true,
onClick: undefined
};
}
return {
interactive,
selectable,
selectFocused,
selected,
disabled,
selectableA11yProps: {
setReferenceId,
referenceId,
referenceLabel,
setReferenceLabel
},
components: {
root: 'div',
floatingAction: 'div',
checkbox: 'input'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref: cardRef,
role: 'group',
...cardRootProps
}), {
elementType: 'div'
}),
floatingAction: floatingActionSlot,
checkbox: checkboxSlot
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,15 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCardContextValue", {
enumerable: true,
get: function() {
return useCardContextValue;
}
});
function useCardContextValue({ selectableA11yProps }) {
return {
selectableA11yProps
};
}

View File

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

View File

@@ -0,0 +1,142 @@
'use client';
"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, disabled } = 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 (disabled || shouldRestrictTriggerAction(event)) {
return;
}
const newCheckedValue = !selected;
setSelected(newCheckedValue);
if (onSelectionChange) {
onSelectionChange(event, {
selected: newCheckedValue
});
}
}, [
disabled,
onSelectionChange,
selected,
setSelected,
shouldRestrictTriggerAction
]);
const onKeyDownHandler = _react.useCallback((event)=>{
if ([
_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,
disabled,
onChange: (event)=>onChangeHandler(event),
onFocus: ()=>setSelectFocused(true),
onBlur: ()=>setSelectFocused(false),
...selectableCheckboxProps
},
elementType: 'input'
});
}, [
checkbox,
disabled,
floatingAction,
selected,
selectable,
onChangeHandler,
referenceId,
referenceLabel
]);
const floatingActionSlot = _react.useMemo(()=>{
if (!floatingAction) {
return;
}
return _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

View File

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

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CardFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardFooter.useCardFooter_unstable)(props, ref);
(0, _useCardFooterStylesstyles.useCardFooterStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCardFooterStyles_unstable')(state);
return (0, _renderCardFooter.renderCardFooter_unstable)(state);
});
CardFooter.displayName = 'CardFooter';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n const state = useCardFooter_unstable(props, ref);\n\n useCardFooterStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);\n\n return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","useCustomStyleHook_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAKvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* CardFooter base state (same as CardFooterState since CardFooter has no design props)
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

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

View File

@@ -0,0 +1,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, {
CardFooter: function() {
return _CardFooter.CardFooter;
},
cardFooterClassNames: function() {
return _useCardFooterStylesstyles.cardFooterClassNames;
},
renderCardFooter_unstable: function() {
return _renderCardFooter.renderCardFooter_unstable;
},
useCardFooterBase_unstable: function() {
return _useCardFooter.useCardFooterBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/index.ts"],"sourcesContent":["export { CardFooter } from './CardFooter';\nexport type {\n CardFooterBaseProps,\n CardFooterBaseState,\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n} from './CardFooter.types';\nexport { renderCardFooter_unstable } from './renderCardFooter';\nexport { useCardFooter_unstable, useCardFooterBase_unstable } from './useCardFooter';\nexport { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\n"],"names":["CardFooter","renderCardFooter_unstable","useCardFooter_unstable","useCardFooterBase_unstable","cardFooterClassNames","useCardFooterStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAUVI,+CAAoB;;;eAFpBH,2CAAyB;;;eACDE,yCAA0B;;;eAC5BE,uDAA4B;;;eADlDH,qCAAsB;;;4BATJ,eAAe;kCAQA,qBAAqB;+BACI,kBAAkB;2CAClB,+BAA+B"}

View File

@@ -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, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardFooter/renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterBaseState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterBaseState): JSXElement => {\n assertSlots<CardFooterSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardFooter_unstable","state","root","children","action"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}

View File

@@ -0,0 +1,46 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useCardFooterBase_unstable: function() {
return useCardFooterBase_unstable;
},
useCardFooter_unstable: 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)=>{
return useCardFooterBase_unstable(props, ref);
};
const useCardFooterBase_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'
})
};
};

View File

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

View File

@@ -0,0 +1,105 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
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"
],
rjrqlh: "fs9eatd",
Boue1pl: [
"fxoo9ru",
"f1g0ekvh"
],
Bhz1vi0: "f1m6zfxz",
etxrgc: [
"f1g0ekvh",
"fxoo9ru"
],
Bdua9ef: "f1sret3r",
cbfxhg: "fs4gbcv"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
[
".fsbu5mz{gap:12px;}",
{
p: -1
}
],
".fcgxt0o{margin-left:auto;}",
".f1ujusj6{margin-right:auto;}"
],
m: [
[
"@media (forced-colors: active){.fs9eatd .fui-Button,.fs9eatd .fui-Link{border-top-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1g0ekvh .fui-Button,.f1g0ekvh .fui-Link{border-left-color:currentColor;}.fxoo9ru .fui-Button,.fxoo9ru .fui-Link{border-right-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1m6zfxz .fui-Button,.f1m6zfxz .fui-Link{border-bottom-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1sret3r .fui-Button,.f1sret3r .fui-Link{color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fs4gbcv .fui-Button,.fs4gbcv .fui-Link{outline-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
]
]
});
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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px'\n },\n action: {\n marginLeft: 'auto',\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","p","m","useCardFooterStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAIKG,oBAAoB;;;gCAyBQ;eAA5BmB;;;uBA5BoC,gBAAgB;AAG1D,6BAA6B;IACpClB,IAAI,EAAE,gBAAgB;IACtBC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAN,MAAA,EAAA;QAAAO,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAkBjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1BiB,KAAK,CAACnB,IAAI,CAACqB,SAAS,OAAGxB,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEmB,KAAK,CAACnB,IAAI,CAACqB,SAAS,CAAC;IACjG,IAAIF,KAAK,CAAClB,MAAM,EAAE;QACdkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,OAAGxB,mBAAY,EAACE,oBAAoB,CAACE,MAAM,EAAEmB,MAAM,CAACnB,MAAM,EAAEkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,CAAC;IAC7G;IACA,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,52 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
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 = (0, _react.makeStyles)({
root: {
display: 'flex',
flexDirection: 'row',
gap: '12px'
},
action: {
marginLeft: 'auto',
// when the card is selected or hovered, it has custom high contrast color and background styles
// setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
'@media (forced-colors: active)': {
'& .fui-Button, & .fui-Link': {
..._react.shorthands.borderColor('currentColor'),
color: 'currentColor',
outlineColor: 'currentColor'
}
}
}
});
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;
};

View File

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

View File

@@ -0,0 +1,24 @@
'use client';
"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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CardHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardHeader.useCardHeader_unstable)(props, ref);
(0, _useCardHeaderStylesstyles.useCardHeaderStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCardHeaderStyles_unstable')(state);
return (0, _renderCardHeader.renderCardHeader_unstable)(state);
});
CardHeader.displayName = 'CardHeader';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n const state = useCardHeader_unstable(props, ref);\n\n useCardHeaderStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);\n\n return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCustomStyleHook_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAKvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* CardHeader base state (same as CardHeaderState since CardHeader has no design props)
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

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

View File

@@ -0,0 +1,37 @@
"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;
},
useCardHeaderBase_unstable: function() {
return _useCardHeader.useCardHeaderBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type {\n CardHeaderBaseProps,\n CardHeaderBaseState,\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n} from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","renderCardHeader_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","cardHeaderCSSVars","cardHeaderClassNames","useCardHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAUVI,4CAAiB;;;eAAEC,+CAAoB;;;eAFvCJ,2CAAyB;;;eACDE,yCAA0B;;;eACTG,uDAA4B;;;eADrEJ,qCAAsB;;;4BATJ,eAAe;kCAQA,qBAAqB;+BACI,kBAAkB;2CACC,+BAA+B"}

View File

@@ -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, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderBaseState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderBaseState): JSXElement => {\n assertSlots<CardHeaderSlots>(state);\n\n return (\n <state.root>\n {state.image && <state.image />}\n {state.header && <state.header />}\n {state.description && <state.description />}\n {state.action && <state.action />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardHeader_unstable","state","root","image","header","description","action"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,KAAK,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,KAAK,EAAA,CAAA;YAC3BF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;YAC7BH,MAAMI,WAAW,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,WAAW,EAAA,CAAA;YACvCJ,MAAMK,MAAM,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}

View File

@@ -0,0 +1,109 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useCardHeaderBase_unstable: function() {
return useCardHeaderBase_unstable;
},
useCardHeader_unstable: 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)=>{
return useCardHeaderBase_unstable(props, ref);
};
const useCardHeaderBase_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

View File

@@ -0,0 +1,185 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
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"
],
rjrqlh: "fs9eatd",
Boue1pl: [
"fxoo9ru",
"f1g0ekvh"
],
Bhz1vi0: "f1m6zfxz",
etxrgc: [
"f1g0ekvh",
"fxoo9ru"
],
Bdua9ef: "f1sret3r",
cbfxhg: "fs4gbcv"
}
}, {
d: [
".fkufhic{--fui-CardHeader--gap:12px;}",
".f122n59{align-items:center;}",
".ftuwxu6{display:inline-flex;}",
".fql5097{margin-right:var(--fui-CardHeader--gap);}",
".f6yss9k{margin-left:var(--fui-CardHeader--gap);}",
".f22iagw{display:flex;}"
],
m: [
[
"@media (forced-colors: active){.fs9eatd .fui-Button,.fs9eatd .fui-Link{border-top-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1g0ekvh .fui-Button,.f1g0ekvh .fui-Link{border-left-color:currentColor;}.fxoo9ru .fui-Button,.fxoo9ru .fui-Link{border-right-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1m6zfxz .fui-Button,.f1m6zfxz .fui-Link{border-bottom-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1sret3r .fui-Button,.f1sret3r .fui-Link{color:currentColor;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fs4gbcv .fui-Button,.fs4gbcv .fui-Link{outline-color:currentColor;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useStylesGrid = /*#__PURE__*/ (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

View File

@@ -0,0 +1,119 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
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 = (0, _react.makeStyles)({
root: {
[cardHeaderCSSVars.cardHeaderGapVar]: '12px',
alignItems: 'center'
},
image: {
display: 'inline-flex',
marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`
},
header: {
display: 'flex'
},
description: {
display: 'flex'
},
action: {
marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,
// when the card is selected or hovered, it has custom high contrast color and background styles
// setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
'@media (forced-colors: active)': {
'& .fui-Button, & .fui-Link': {
..._react.shorthands.borderColor('currentColor'),
color: 'currentColor',
outlineColor: 'currentColor'
}
}
}
});
const useStylesGrid = (0, _react.makeStyles)({
root: {
display: 'grid',
gridAutoColumns: 'min-content 1fr min-content'
},
image: {
gridColumnStart: '1',
gridRowStart: 'span 2'
},
header: {
gridColumnStart: '2',
gridRowStart: '1'
},
description: {
gridColumnStart: '2',
gridRowStart: '2'
},
action: {
gridColumnStart: '3',
gridRowStart: 'span 2'
}
});
const useStylesFlex = (0, _react.makeStyles)({
root: {
display: 'flex'
},
header: {
flexGrow: 1
},
image: {},
description: {},
action: {}
});
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

View File

@@ -0,0 +1,24 @@
'use client';
"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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CardPreview = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCardPreview.useCardPreview_unstable)(props, ref);
(0, _useCardPreviewStylesstyles.useCardPreviewStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCardPreviewStyles_unstable')(state);
return (0, _renderCardPreview.renderCardPreview_unstable)(state);
});
CardPreview.displayName = 'CardPreview';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/CardPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n const state = useCardPreview_unstable(props, ref);\n\n useCardPreviewStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCardPreviewStyles_unstable')(state);\n\n return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"names":["React","useCardPreview_unstable","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCustomStyleHook_unstable","CardPreview","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* CardPreview base state (same as CardPreviewState since CardPreview has no design props)
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

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

View File

@@ -0,0 +1,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, {
CardPreview: function() {
return _CardPreview.CardPreview;
},
cardPreviewClassNames: function() {
return _useCardPreviewStylesstyles.cardPreviewClassNames;
},
renderCardPreview_unstable: function() {
return _renderCardPreview.renderCardPreview_unstable;
},
useCardPreviewBase_unstable: function() {
return _useCardPreview.useCardPreviewBase_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");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/index.ts"],"sourcesContent":["export { CardPreview } from './CardPreview';\nexport type {\n CardPreviewBaseProps,\n CardPreviewBaseState,\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n} from './CardPreview.types';\nexport { renderCardPreview_unstable } from './renderCardPreview';\nexport { useCardPreview_unstable, useCardPreviewBase_unstable } from './useCardPreview';\nexport { cardPreviewClassNames, useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';\n"],"names":["CardPreview","renderCardPreview_unstable","useCardPreview_unstable","useCardPreviewBase_unstable","cardPreviewClassNames","useCardPreviewStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXI,iDAAqB;;;eAFrBH,6CAA0B;;;eACDE,2CAA2B;;;eAC7BE,yDAA6B;;;eADpDH,uCAAuB;;;6BATJ,gBAAgB;mCAQD,sBAAsB;gCACI,mBAAmB;4CACnB,gCAAgC"}

View File

@@ -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, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CardPreview/renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewBaseState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewBaseState): JSXElement => {\n assertSlots<CardPreviewSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.logo && <state.logo />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderCardPreview_unstable","state","root","children","logo"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;;;AAGhC,EAAE"}

View File

@@ -0,0 +1,75 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useCardPreviewBase_unstable: function() {
return useCardPreviewBase_unstable;
},
useCardPreview_unstable: 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)=>{
return useCardPreviewBase_unstable(props, ref);
};
const useCardPreviewBase_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'
})
};
};

View File

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

View File

@@ -0,0 +1,64 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%'\n }\n },\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px'\n }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAIKE,qBAAqB;;;iCAuBQ;;;;uBA1BL,gBAAgB;AAG9C,8BAA8B;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAL,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgBjB,CAAC;AAGS,MAAMC,iCAAiCC,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGjB,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IAClG,IAAIF,KAAK,CAACZ,IAAI,EAAE;QACZY,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACC,qBAAqB,CAACE,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACtG;IACA,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,50 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
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 = (0, _react.makeStyles)({
root: {
position: 'relative',
[`> :not(.${cardPreviewClassNames.logo})`]: {
display: 'block',
height: '100%',
width: '100%'
}
},
logo: {
position: 'absolute',
bottom: '12px',
left: '12px',
width: '32px',
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;
};

View File

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

100
node_modules/@fluentui/react-card/lib-commonjs/index.js generated vendored Normal file
View File

@@ -0,0 +1,100 @@
"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;
},
useCardBase_unstable: function() {
return _Card.useCardBase_unstable;
},
useCardContext_unstable: function() {
return _Card.useCardContext_unstable;
},
useCardFooterBase_unstable: function() {
return _CardFooter.useCardFooterBase_unstable;
},
useCardFooterStyles_unstable: function() {
return _CardFooter.useCardFooterStyles_unstable;
},
useCardFooter_unstable: function() {
return _CardFooter.useCardFooter_unstable;
},
useCardHeaderBase_unstable: function() {
return _CardHeader.useCardHeaderBase_unstable;
},
useCardHeaderStyles_unstable: function() {
return _CardHeader.useCardHeaderStyles_unstable;
},
useCardHeader_unstable: function() {
return _CardHeader.useCardHeader_unstable;
},
useCardPreviewBase_unstable: function() {
return _CardPreview.useCardPreviewBase_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");

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 useCardBase_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CardBaseProps, CardBaseState, CardOnSelectionChangeEvent } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n useCardFooterBase_unstable,\n} from './CardFooter';\nexport type {\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n CardFooterBaseProps,\n CardFooterBaseState,\n} from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n cardHeaderCSSVars,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n useCardHeaderBase_unstable,\n} from './CardHeader';\nexport type {\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n CardHeaderBaseProps,\n CardHeaderBaseState,\n} from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n useCardPreviewBase_unstable,\n} from './CardPreview';\nexport type {\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n CardPreviewBaseProps,\n CardPreviewBaseState,\n} from './CardPreview';\nexport { CardProvider, useCardContext_unstable } from './Card';\nexport type { CardContextValue } from './Card';\n"],"names":["Card","cardClassNames","cardCSSVars","renderCard_unstable","useCardStyles_unstable","useCard_unstable","useCardBase_unstable","CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardFooterBase_unstable","CardHeader","cardHeaderClassNames","cardHeaderCSSVars","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardPreviewBase_unstable","CardProvider","useCardContext_unstable"],"mappings":";;;;;;;;;;;IACEA;yBAAI;;;eAUJO,sBAAU;;;eAeVM,sBAAU;;IAgBVO,WAAW;;;IAcJM,YAAY;;;;eArDnBxB,iBAAW;;;eADXD,oBAAc;;IAUdO,oBAAoB;;;;eAgBpBO,6BAAiB;;;eADjBD,gCAAoB;;yBAgBC;eAArBO;;;eA9BAZ,qCAAyB;;;eAgBzBO,qCAAyB;;;eAezBM,uCAA0B;;;eAxC1BnB,yBAAmB;;;eAGnBG,0BAAoB;;2BAiDwB,QAAQ,SAAS;eAAxCqB;;;eAxCrBf,sCAA0B;;;eAF1BF,wCAA4B;;;eAC5BC,kCAAsB;;;eAiBtBQ,sCAA0B;;;eAF1BF,wCAA4B;;;eAC5BC,kCAAsB;;IAgBtBO,2BAA2B;;;;eAF3BF,0CAA6B;;;eAC7BC,oCAAuB;;;eAzCvBpB,4BAAsB;;;eACtBC,sBAAgB;;;sBAEX,SAAS;4BAST,eAAe;4BAgBf,eAAe;6BAef,gBAAgB"}

1
node_modules/@fluentui/react-card/lib/Card.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Card, CardProvider, cardCSSVars, cardClassNames, cardContextDefaultValue, renderCard_unstable, useCardContext_unstable, useCardStyles_unstable, useCard_unstable, useCardBase_unstable } from './components/Card/index';

1
node_modules/@fluentui/react-card/lib/Card.js.map generated vendored Normal file
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 CardBaseProps,\n CardBaseState,\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 useCardBase_unstable,\n} from './components/Card/index';\n"],"names":["Card","CardProvider","cardCSSVars","cardClassNames","cardContextDefaultValue","renderCard_unstable","useCardContext_unstable","useCardStyles_unstable","useCard_unstable","useCardBase_unstable"],"mappings":"AAUA,SACEA,IAAI,EACJC,YAAY,EACZC,WAAW,EACXC,cAAc,EACdC,uBAAuB,EACvBC,mBAAmB,EACnBC,uBAAuB,EACvBC,sBAAsB,EACtBC,gBAAgB,EAChBC,oBAAoB,QACf,0BAA0B"}

1
node_modules/@fluentui/react-card/lib/CardFooter.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable, useCardFooterBase_unstable } from './components/CardFooter/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardFooter.ts"],"sourcesContent":["export type {\n CardFooterProps,\n CardFooterSlots,\n CardFooterState,\n CardFooterBaseProps,\n CardFooterBaseState,\n} from './components/CardFooter/index';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n useCardFooterBase_unstable,\n} from './components/CardFooter/index';\n"],"names":["CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","useCardFooterBase_unstable"],"mappings":"AAOA,SACEA,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,gCAAgC"}

1
node_modules/@fluentui/react-card/lib/CardHeader.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { CardHeader, cardHeaderCSSVars, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable, useCardHeaderBase_unstable } from './components/CardHeader/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardHeader.ts"],"sourcesContent":["export type {\n CardHeaderProps,\n CardHeaderSlots,\n CardHeaderState,\n CardHeaderBaseProps,\n CardHeaderBaseState,\n} from './components/CardHeader/index';\nexport {\n CardHeader,\n cardHeaderCSSVars,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n useCardHeaderBase_unstable,\n} from './components/CardHeader/index';\n"],"names":["CardHeader","cardHeaderCSSVars","cardHeaderClassNames","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","useCardHeaderBase_unstable"],"mappings":"AAOA,SACEA,UAAU,EACVC,iBAAiB,EACjBC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,gCAAgC"}

1
node_modules/@fluentui/react-card/lib/CardPreview.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable, useCardPreviewBase_unstable } from './components/CardPreview/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CardPreview.ts"],"sourcesContent":["export type {\n CardPreviewProps,\n CardPreviewSlots,\n CardPreviewState,\n CardPreviewBaseProps,\n CardPreviewBaseState,\n} from './components/CardPreview/index';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n useCardPreviewBase_unstable,\n} from './components/CardPreview/index';\n"],"names":["CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","useCardPreviewBase_unstable"],"mappings":"AAOA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,iCAAiC"}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

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