@fluentui/react-card 9.0.0-beta.16 → 9.0.0-beta.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +106 -1
- package/CHANGELOG.md +39 -2
- package/Spec.md +1 -1
- package/dist/index.d.ts +6 -1
- package/lib/components/Card/Card.types.js.map +1 -1
- package/lib/components/Card/useCard.js +3 -1
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardStyles.js +42 -15
- package/lib/components/Card/useCardStyles.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +3 -1
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.js +43 -16
- package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
- package/lib-commonjs/index.js +7 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,112 @@
|
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 21 Jun 2022 17:09:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.19",
|
|
7
|
+
"version": "9.0.0-beta.19",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-card",
|
|
13
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.14",
|
|
14
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-card",
|
|
19
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
|
20
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-card",
|
|
25
|
+
"comment": "Bump @fluentui/react-text to v9.0.0-rc.12",
|
|
26
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-card",
|
|
31
|
+
"comment": "Bump @fluentui/react-button to v9.0.0-rc.14",
|
|
32
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Tue, 31 May 2022 21:28:36 GMT",
|
|
39
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.18",
|
|
40
|
+
"version": "9.0.0-beta.18",
|
|
41
|
+
"comments": {
|
|
42
|
+
"prerelease": [
|
|
43
|
+
{
|
|
44
|
+
"author": "39736248+andrefcdias@users.noreply.github.com",
|
|
45
|
+
"package": "@fluentui/react-card",
|
|
46
|
+
"commit": "8caa7bbfd4c5cb91324def7470a280ac9bf6dec8",
|
|
47
|
+
"comment": "feat: Add `size` property to control card padding and border radius"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "olfedias@microsoft.com",
|
|
51
|
+
"package": "@fluentui/react-card",
|
|
52
|
+
"commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
|
|
53
|
+
"comment": "chore: Update Griffel to latest version"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-card",
|
|
58
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
59
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-card",
|
|
64
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.13",
|
|
65
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-card",
|
|
70
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
|
|
71
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-card",
|
|
76
|
+
"comment": "Bump @fluentui/react-text to v9.0.0-rc.11",
|
|
77
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-card",
|
|
82
|
+
"comment": "Bump @fluentui/react-button to v9.0.0-rc.13",
|
|
83
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"date": "Thu, 26 May 2022 21:01:32 GMT",
|
|
90
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.17",
|
|
91
|
+
"version": "9.0.0-beta.17",
|
|
92
|
+
"comments": {
|
|
93
|
+
"prerelease": [
|
|
94
|
+
{
|
|
95
|
+
"author": "beachball",
|
|
96
|
+
"package": "@fluentui/react-card",
|
|
97
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.12",
|
|
98
|
+
"commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"author": "beachball",
|
|
102
|
+
"package": "@fluentui/react-card",
|
|
103
|
+
"comment": "Bump @fluentui/react-button to v9.0.0-rc.12",
|
|
104
|
+
"commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"date": "Mon, 23 May 2022 18:56:42 GMT",
|
|
6
111
|
"tag": "@fluentui/react-card_v9.0.0-beta.16",
|
|
7
112
|
"version": "9.0.0-beta.16",
|
|
8
113
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,49 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 21 Jun 2022 17:09:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.19)
|
|
8
|
+
|
|
9
|
+
Tue, 21 Jun 2022 17:09:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.18..@fluentui/react-card_v9.0.0-beta.19)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
15
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
16
|
+
- Bump @fluentui/react-text to v9.0.0-rc.12 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
17
|
+
- Bump @fluentui/react-button to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.18)
|
|
20
|
+
|
|
21
|
+
Tue, 31 May 2022 21:28:36 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.17..@fluentui/react-card_v9.0.0-beta.18)
|
|
23
|
+
|
|
24
|
+
### Changes
|
|
25
|
+
|
|
26
|
+
- feat: Add `size` property to control card padding and border radius ([PR #22915](https://github.com/microsoft/fluentui/pull/22915) by 39736248+andrefcdias@users.noreply.github.com)
|
|
27
|
+
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
28
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
30
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
31
|
+
- Bump @fluentui/react-text to v9.0.0-rc.11 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
32
|
+
- Bump @fluentui/react-button to v9.0.0-rc.13 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
33
|
+
|
|
34
|
+
## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.17)
|
|
35
|
+
|
|
36
|
+
Thu, 26 May 2022 21:01:32 GMT
|
|
37
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.16..@fluentui/react-card_v9.0.0-beta.17)
|
|
38
|
+
|
|
39
|
+
### Changes
|
|
40
|
+
|
|
41
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
|
|
42
|
+
- Bump @fluentui/react-button to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
|
|
43
|
+
|
|
7
44
|
## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.16)
|
|
8
45
|
|
|
9
|
-
Mon, 23 May 2022 18:
|
|
46
|
+
Mon, 23 May 2022 18:56:42 GMT
|
|
10
47
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.15..@fluentui/react-card_v9.0.0-beta.16)
|
|
11
48
|
|
|
12
49
|
### Changes
|
package/Spec.md
CHANGED
|
@@ -105,7 +105,7 @@ Card goes for a more structural and generic approach to a card component and is
|
|
|
105
105
|
| Property | Values | Default | Purpose |
|
|
106
106
|
| ----------- | ------------------------------------------------------------------------------------ | ---------- | -------------------------------------------------------------------------------- |
|
|
107
107
|
| orientation | `vertical`, `horizontal` | `vertical` | Orientation of the card |
|
|
108
|
-
| size | `
|
|
108
|
+
| size | `small`, `medium`, `large` | `medium` | Define the minimum size of the card. Smaller sizes only apply to horizontal card |
|
|
109
109
|
| scale | `fixed`, `auto-width`, `auto-height`, `auto`, `fluid-width`, `fluid-height`, `fluid` | `auto` | Manages how the card handles it's scaling depending on the content |
|
|
110
110
|
| appearance | `filled`, `filled-alternative`, `outline`, `subtle` | `filled` | Define the appearance of the card |
|
|
111
111
|
| selectable | boolean | false | Makes the card selectable by adding a checkbox to the _Actions_ area |
|
package/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,10 @@ export declare const Card: ForwardRefComponent<CardProps>;
|
|
|
12
12
|
|
|
13
13
|
export declare const cardClassNames: SlotClassNames<CardSlots>;
|
|
14
14
|
|
|
15
|
+
export declare const cardCSSVars: {
|
|
16
|
+
cardSizeVar: string;
|
|
17
|
+
};
|
|
18
|
+
|
|
15
19
|
/**
|
|
16
20
|
* Component to render Button actions in a Card component.
|
|
17
21
|
*/
|
|
@@ -108,6 +112,7 @@ export declare type CardProps = ComponentProps<CardSlots> & {
|
|
|
108
112
|
* @defaultvalue off
|
|
109
113
|
*/
|
|
110
114
|
focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
|
|
115
|
+
size?: 'small' | 'medium' | 'large';
|
|
111
116
|
};
|
|
112
117
|
|
|
113
118
|
export declare type CardSlots = {
|
|
@@ -117,7 +122,7 @@ export declare type CardSlots = {
|
|
|
117
122
|
/**
|
|
118
123
|
* State used in rendering Card
|
|
119
124
|
*/
|
|
120
|
-
export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance'>>;
|
|
125
|
+
export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'size'>>;
|
|
121
126
|
|
|
122
127
|
/**
|
|
123
128
|
* Render the final JSX of Card
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\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 * @defaultvalue off\n */\n focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n};\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance'>>;\n"]}
|
|
1
|
+
{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\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 * @defaultvalue off\n */\n focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance' | 'size'>>;\n"]}
|
|
@@ -13,7 +13,8 @@ import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
|
13
13
|
export const useCard_unstable = (props, ref) => {
|
|
14
14
|
const {
|
|
15
15
|
appearance = 'filled',
|
|
16
|
-
focusMode = 'off'
|
|
16
|
+
focusMode = 'off',
|
|
17
|
+
size = 'medium'
|
|
17
18
|
} = props;
|
|
18
19
|
const focusMap = {
|
|
19
20
|
off: undefined,
|
|
@@ -30,6 +31,7 @@ export const useCard_unstable = (props, ref) => {
|
|
|
30
31
|
} : null;
|
|
31
32
|
return {
|
|
32
33
|
appearance,
|
|
34
|
+
size,
|
|
33
35
|
components: {
|
|
34
36
|
root: 'div'
|
|
35
37
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;
|
|
1
|
+
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG,KAArC;AAA4C,IAAA,IAAI,GAAG;AAAnD,MAAgE,KAAtE;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,oBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAD,CAAvC;AAIA,QAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;AAAE,IAAA,QAAQ,EAAE,CAAZ;AAAe,OAAG;AAAlB,GAAtB,GAA0D,IAA7E;AAEA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,IAFK;AAIL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAJP;AAKL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,UAH0C;AAI7C,SAAG;AAJ0C,KAApB;AALtB,GAAP;AAYD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off', size = 'medium' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n return {\n appearance,\n size,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...focusAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -4,21 +4,21 @@ import { cardPreviewClassNames } from '../CardPreview/index';
|
|
|
4
4
|
export const cardClassNames = {
|
|
5
5
|
root: 'fui-Card'
|
|
6
6
|
};
|
|
7
|
+
export const cardCSSVars = {
|
|
8
|
+
cardSizeVar: '--fui-Card--size'
|
|
9
|
+
};
|
|
7
10
|
/**
|
|
8
11
|
* Styles for the root slot
|
|
9
12
|
*/
|
|
10
13
|
|
|
11
14
|
const useStyles = /*#__PURE__*/__styles({
|
|
12
15
|
"root": {
|
|
13
|
-
"mc9l5x": "
|
|
16
|
+
"mc9l5x": "f22iagw",
|
|
17
|
+
"Beiy3e4": "f1vx9l62",
|
|
14
18
|
"qhf8xq": "f10pi13n",
|
|
15
19
|
"B68tc82": "f1p9o1ba",
|
|
16
20
|
"Bmxbyg5": "f1sil6mw",
|
|
17
21
|
"sj55zd": "f19n0e5",
|
|
18
|
-
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
19
|
-
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
20
|
-
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
21
|
-
"Btl43ni": ["fyu767a", "f1jar5jt"],
|
|
22
22
|
"E3zdtr": "f1mdlcz9",
|
|
23
23
|
"bn5sak": "frwkxtg",
|
|
24
24
|
"Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
|
|
@@ -34,14 +34,36 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
34
34
|
"Ihftqj": ["f13hvwk3", "f1en4csx"],
|
|
35
35
|
"Bcgy8vk": "f1i1u9k0",
|
|
36
36
|
"Bhxzhr1": ["f1en4csx", "f13hvwk3"],
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
37
|
+
"z8tnut": "f1lplnzb",
|
|
38
|
+
"z189sj": ["f10m5gbb", "f1k04kkk"],
|
|
39
|
+
"Byoj8tv": "fhftqfp",
|
|
40
|
+
"uwmqm3": ["f1k04kkk", "f10m5gbb"],
|
|
41
|
+
"i8kkvl": "fxsr4vj",
|
|
42
|
+
"Belr9w4": "fcvsdzp",
|
|
43
|
+
"Bt4kzjz": ["fobhde4", "fx5r7kn"],
|
|
44
|
+
"B1ou843": ["fx5r7kn", "fobhde4"],
|
|
45
|
+
"ydhu1d": "frl7skw"
|
|
46
|
+
},
|
|
47
|
+
"sizeSmall": {
|
|
48
|
+
"B7balbw": "f1pi9uxy",
|
|
49
|
+
"Bbmb7ep": ["f1g3puop", "fi2rrw2"],
|
|
50
|
+
"Beyfa6y": ["fi2rrw2", "f1g3puop"],
|
|
51
|
+
"B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
|
|
52
|
+
"Btl43ni": ["f1s4nn1u", "f1rstyi9"]
|
|
53
|
+
},
|
|
54
|
+
"sizeMedium": {
|
|
55
|
+
"B7balbw": "frsmuga",
|
|
56
|
+
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
57
|
+
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
58
|
+
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
59
|
+
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
|
60
|
+
},
|
|
61
|
+
"sizeLarge": {
|
|
62
|
+
"B7balbw": "f1qua4xo",
|
|
63
|
+
"Bbmb7ep": ["f1ldthgs", "frrelxk"],
|
|
64
|
+
"Beyfa6y": ["frrelxk", "f1ldthgs"],
|
|
65
|
+
"B7oj6ja": ["fobrfso", "ffisxpw"],
|
|
66
|
+
"Btl43ni": ["ffisxpw", "fobrfso"]
|
|
45
67
|
},
|
|
46
68
|
"interactiveNoOutline": {
|
|
47
69
|
"Be0v6ae": "ftr40te",
|
|
@@ -140,7 +162,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
140
162
|
"Gp14am": ["fzybk4o", "fpgykix"]
|
|
141
163
|
}
|
|
142
164
|
}, {
|
|
143
|
-
"d": [".
|
|
165
|
+
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".f1k6fduh{cursor:pointer;}", ".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);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".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);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
|
|
144
166
|
"h": [".ftr40te:hover::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fcsoo7g:hover::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1rl4q8i:hover::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fbb4roj:hover::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".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);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
145
167
|
"a": [".fd4vwcp:active::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crelnc:active::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fup9tr0:active::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f12d33p4:active::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".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);}"]
|
|
146
168
|
});
|
|
@@ -151,8 +173,13 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
151
173
|
|
|
152
174
|
export const useCardStyles_unstable = state => {
|
|
153
175
|
const styles = useStyles();
|
|
176
|
+
const sizeMap = {
|
|
177
|
+
small: styles.sizeSmall,
|
|
178
|
+
medium: styles.sizeMedium,
|
|
179
|
+
large: styles.sizeLarge
|
|
180
|
+
};
|
|
154
181
|
const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
|
|
155
|
-
state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
|
|
182
|
+
state.root.className = mergeClasses(cardClassNames.root, styles.root, sizeMap[state.size], state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
|
|
156
183
|
return state;
|
|
157
184
|
};
|
|
158
185
|
//# sourceMappingURL=useCardStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,qBAAT,QAAsC,sBAAtC;AAIA,OAAO,MAAM,cAAc,GAA8B;AACvD,EAAA,IAAI,EAAE;AADiD,CAAlD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;
|
|
1
|
+
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n\n interactiveNoOutline: {\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n sizeMap[state.size],\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Card, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
|
|
1
|
+
export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
|
|
2
2
|
export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './CardFooter';
|
|
3
3
|
export { CardHeader, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
|
|
4
4
|
export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,IADF,EAEE,cAFF,EAGE,WAHF,EAIE,mBAJF,EAKE,sBALF,EAME,gBANF,QAOO,QAPP;AASA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP","sourcesContent":["export {\n Card,\n cardClassNames,\n cardCSSVars,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
|
|
@@ -22,7 +22,8 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
|
22
22
|
const useCard_unstable = (props, ref) => {
|
|
23
23
|
const {
|
|
24
24
|
appearance = 'filled',
|
|
25
|
-
focusMode = 'off'
|
|
25
|
+
focusMode = 'off',
|
|
26
|
+
size = 'medium'
|
|
26
27
|
} = props;
|
|
27
28
|
const focusMap = {
|
|
28
29
|
off: undefined,
|
|
@@ -39,6 +40,7 @@ const useCard_unstable = (props, ref) => {
|
|
|
39
40
|
} : null;
|
|
40
41
|
return {
|
|
41
42
|
appearance,
|
|
43
|
+
size,
|
|
42
44
|
components: {
|
|
43
45
|
root: 'div'
|
|
44
46
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;
|
|
1
|
+
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG,KAArC;AAA4C,IAAA,IAAI,GAAG;AAAnD,MAAgE,KAAtE;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,oBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAlB,CAAtB;AAIA,QAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;AAAE,IAAA,QAAQ,EAAE,CAAZ;AAAe,OAAG;AAAlB,GAAtB,GAA0D,IAA7E;AAEA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,IAFK;AAIL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAJP;AAKL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,UAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AALD,GAAP;AAYD,CA5BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off', size = 'medium' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n return {\n appearance,\n size,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...focusAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardStyles_unstable = exports.cardClassNames = void 0;
|
|
6
|
+
exports.useCardStyles_unstable = exports.cardCSSVars = exports.cardClassNames = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
@@ -14,21 +14,21 @@ const index_1 = /*#__PURE__*/require("../CardPreview/index");
|
|
|
14
14
|
exports.cardClassNames = {
|
|
15
15
|
root: 'fui-Card'
|
|
16
16
|
};
|
|
17
|
+
exports.cardCSSVars = {
|
|
18
|
+
cardSizeVar: '--fui-Card--size'
|
|
19
|
+
};
|
|
17
20
|
/**
|
|
18
21
|
* Styles for the root slot
|
|
19
22
|
*/
|
|
20
23
|
|
|
21
24
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
22
25
|
"root": {
|
|
23
|
-
"mc9l5x": "
|
|
26
|
+
"mc9l5x": "f22iagw",
|
|
27
|
+
"Beiy3e4": "f1vx9l62",
|
|
24
28
|
"qhf8xq": "f10pi13n",
|
|
25
29
|
"B68tc82": "f1p9o1ba",
|
|
26
30
|
"Bmxbyg5": "f1sil6mw",
|
|
27
31
|
"sj55zd": "f19n0e5",
|
|
28
|
-
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
29
|
-
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
30
|
-
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
31
|
-
"Btl43ni": ["fyu767a", "f1jar5jt"],
|
|
32
32
|
"E3zdtr": "f1mdlcz9",
|
|
33
33
|
"bn5sak": "frwkxtg",
|
|
34
34
|
"Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
|
|
@@ -44,14 +44,36 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
44
44
|
"Ihftqj": ["f13hvwk3", "f1en4csx"],
|
|
45
45
|
"Bcgy8vk": "f1i1u9k0",
|
|
46
46
|
"Bhxzhr1": ["f1en4csx", "f13hvwk3"],
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
47
|
+
"z8tnut": "f1lplnzb",
|
|
48
|
+
"z189sj": ["f10m5gbb", "f1k04kkk"],
|
|
49
|
+
"Byoj8tv": "fhftqfp",
|
|
50
|
+
"uwmqm3": ["f1k04kkk", "f10m5gbb"],
|
|
51
|
+
"i8kkvl": "fxsr4vj",
|
|
52
|
+
"Belr9w4": "fcvsdzp",
|
|
53
|
+
"Bt4kzjz": ["fobhde4", "fx5r7kn"],
|
|
54
|
+
"B1ou843": ["fx5r7kn", "fobhde4"],
|
|
55
|
+
"ydhu1d": "frl7skw"
|
|
56
|
+
},
|
|
57
|
+
"sizeSmall": {
|
|
58
|
+
"B7balbw": "f1pi9uxy",
|
|
59
|
+
"Bbmb7ep": ["f1g3puop", "fi2rrw2"],
|
|
60
|
+
"Beyfa6y": ["fi2rrw2", "f1g3puop"],
|
|
61
|
+
"B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
|
|
62
|
+
"Btl43ni": ["f1s4nn1u", "f1rstyi9"]
|
|
63
|
+
},
|
|
64
|
+
"sizeMedium": {
|
|
65
|
+
"B7balbw": "frsmuga",
|
|
66
|
+
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
67
|
+
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
68
|
+
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
69
|
+
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
|
70
|
+
},
|
|
71
|
+
"sizeLarge": {
|
|
72
|
+
"B7balbw": "f1qua4xo",
|
|
73
|
+
"Bbmb7ep": ["f1ldthgs", "frrelxk"],
|
|
74
|
+
"Beyfa6y": ["frrelxk", "f1ldthgs"],
|
|
75
|
+
"B7oj6ja": ["fobrfso", "ffisxpw"],
|
|
76
|
+
"Btl43ni": ["ffisxpw", "fobrfso"]
|
|
55
77
|
},
|
|
56
78
|
"interactiveNoOutline": {
|
|
57
79
|
"Be0v6ae": "ftr40te",
|
|
@@ -150,7 +172,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
150
172
|
"Gp14am": ["fzybk4o", "fpgykix"]
|
|
151
173
|
}
|
|
152
174
|
}, {
|
|
153
|
-
"d": [".
|
|
175
|
+
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".f1k6fduh{cursor:pointer;}", ".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);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".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);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
|
|
154
176
|
"h": [".ftr40te:hover::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fcsoo7g:hover::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1rl4q8i:hover::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fbb4roj:hover::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".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);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
155
177
|
"a": [".fd4vwcp:active::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crelnc:active::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fup9tr0:active::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f12d33p4:active::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".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);}"]
|
|
156
178
|
});
|
|
@@ -161,8 +183,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
161
183
|
|
|
162
184
|
const useCardStyles_unstable = state => {
|
|
163
185
|
const styles = useStyles();
|
|
186
|
+
const sizeMap = {
|
|
187
|
+
small: styles.sizeSmall,
|
|
188
|
+
medium: styles.sizeMedium,
|
|
189
|
+
large: styles.sizeLarge
|
|
190
|
+
};
|
|
164
191
|
const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
|
|
165
|
-
state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
|
|
192
|
+
state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, sizeMap[state.size], state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
|
|
166
193
|
return state;
|
|
167
194
|
};
|
|
168
195
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAIa,OAAA,CAAA,cAAA,GAA4C;AACvD,EAAA,IAAI,EAAE;AADiD,CAA5C;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;
|
|
1
|
+
{"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> :not([aria-hidden=\"true\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n\n interactiveNoOutline: {\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n sizeMap[state.size],\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCardPreview_unstable = exports.useCardPreviewStyles_unstable = exports.renderCardPreview_unstable = exports.cardPreviewClassNames = exports.CardPreview = exports.useCardHeader_unstable = exports.useCardHeaderStyles_unstable = exports.renderCardHeader_unstable = exports.cardHeaderClassNames = exports.CardHeader = exports.useCardFooter_unstable = exports.useCardFooterStyles_unstable = exports.renderCardFooter_unstable = exports.cardFooterClassNames = exports.CardFooter = exports.useCard_unstable = exports.useCardStyles_unstable = exports.renderCard_unstable = exports.cardClassNames = exports.Card = void 0;
|
|
6
|
+
exports.useCardPreview_unstable = exports.useCardPreviewStyles_unstable = exports.renderCardPreview_unstable = exports.cardPreviewClassNames = exports.CardPreview = exports.useCardHeader_unstable = exports.useCardHeaderStyles_unstable = exports.renderCardHeader_unstable = exports.cardHeaderClassNames = exports.CardHeader = exports.useCardFooter_unstable = exports.useCardFooterStyles_unstable = exports.renderCardFooter_unstable = exports.cardFooterClassNames = exports.CardFooter = exports.useCard_unstable = exports.useCardStyles_unstable = exports.renderCard_unstable = exports.cardCSSVars = exports.cardClassNames = exports.Card = void 0;
|
|
7
7
|
|
|
8
8
|
var Card_1 = /*#__PURE__*/require("./Card");
|
|
9
9
|
|
|
@@ -19,6 +19,12 @@ Object.defineProperty(exports, "cardClassNames", {
|
|
|
19
19
|
return Card_1.cardClassNames;
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
|
+
Object.defineProperty(exports, "cardCSSVars", {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function () {
|
|
25
|
+
return Card_1.cardCSSVars;
|
|
26
|
+
}
|
|
27
|
+
});
|
|
22
28
|
Object.defineProperty(exports, "renderCard_unstable", {
|
|
23
29
|
enumerable: true,
|
|
24
30
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,MAAA,gBAAA,OAAA,CAAA,QAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,MAAA,gBAAA,OAAA,CAAA,QAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,MAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,MAAA,CAAA,IAAA;AAAI;AAAJ,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,MAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,MAAA,CAAA,WAAA;AAAW;AAAX,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,MAAA,CAAA,mBAAA;AAAmB;AAAnB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,MAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,MAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA;;AAGF,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;;AAGF,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;;AAGF,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,WAAA;AAAW;AAAX,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,aAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourcesContent":["export {\n Card,\n cardClassNames,\n cardCSSVars,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.19",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -30,16 +30,16 @@
|
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@fluentui/eslint-plugin": "*",
|
|
32
32
|
"@fluentui/react-conformance": "*",
|
|
33
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
33
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.8",
|
|
34
34
|
"@fluentui/scripts": "^1.0.0",
|
|
35
|
-
"@fluentui/react-text": "9.0.0-rc.
|
|
36
|
-
"@fluentui/react-button": "9.0.0-rc.
|
|
35
|
+
"@fluentui/react-text": "9.0.0-rc.12",
|
|
36
|
+
"@fluentui/react-button": "9.0.0-rc.14"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@griffel/react": "1.0
|
|
40
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
41
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
42
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
39
|
+
"@griffel/react": "1.1.0",
|
|
40
|
+
"@fluentui/react-utilities": "9.0.0-rc.10",
|
|
41
|
+
"@fluentui/react-tabster": "9.0.0-rc.14",
|
|
42
|
+
"@fluentui/react-theme": "9.0.0-rc.10",
|
|
43
43
|
"tslib": "^2.1.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|