@fluentui/react-card 0.0.0-nightly-20220505-0419.1 → 0.0.0-nightly-20220510-0420.1

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.
Files changed (14) hide show
  1. package/CHANGELOG.json +72 -15
  2. package/CHANGELOG.md +26 -10
  3. package/Spec.md +20 -16
  4. package/dist/index.d.ts +21 -0
  5. package/lib/components/Card/Card.types.js.map +1 -1
  6. package/lib/components/Card/useCard.js +13 -4
  7. package/lib/components/Card/useCard.js.map +1 -1
  8. package/lib/components/Card/useCardStyles.js +80 -74
  9. package/lib/components/Card/useCardStyles.js.map +1 -1
  10. package/lib-commonjs/components/Card/useCard.js +13 -4
  11. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  12. package/lib-commonjs/components/Card/useCardStyles.js +80 -74
  13. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  14. package/package.json +8 -7
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-card",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 05 May 2022 04:31:59 GMT",
6
- "tag": "@fluentui/react-card_v0.0.0-nightly-20220505-0419.1",
7
- "version": "0.0.0-nightly-20220505-0419.1",
5
+ "date": "Tue, 10 May 2022 04:31:41 GMT",
6
+ "tag": "@fluentui/react-card_v0.0.0-nightly-20220510-0420.1",
7
+ "version": "0.0.0-nightly-20220510-0420.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -13,41 +13,98 @@
13
13
  "commit": "not available",
14
14
  "comment": "Release nightly v9"
15
15
  },
16
+ {
17
+ "author": "39736248+andrefcdias@users.noreply.github.com",
18
+ "package": "@fluentui/react-card",
19
+ "commit": "a42bebb19d1403bfbde96cfb4b09e3ce32490ec6",
20
+ "comment": "CardPreview now expands properly, all the way to the Card's edges"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-card",
25
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220510-0420.1",
26
+ "commit": "23be9682b20fba2ea59bbb882e2225b9bc81133a"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-card",
31
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220510-0420.1",
32
+ "commit": "23be9682b20fba2ea59bbb882e2225b9bc81133a"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-card",
37
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220510-0420.1",
38
+ "commit": "23be9682b20fba2ea59bbb882e2225b9bc81133a"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-card",
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220510-0420.1",
44
+ "commit": "23be9682b20fba2ea59bbb882e2225b9bc81133a"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-card",
49
+ "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220510-0420.1",
50
+ "commit": "23be9682b20fba2ea59bbb882e2225b9bc81133a"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-card",
55
+ "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220510-0420.1",
56
+ "commit": "23be9682b20fba2ea59bbb882e2225b9bc81133a"
57
+ }
58
+ ]
59
+ }
60
+ },
61
+ {
62
+ "date": "Thu, 05 May 2022 18:26:29 GMT",
63
+ "tag": "@fluentui/react-card_v9.0.0-beta.14",
64
+ "version": "9.0.0-beta.14",
65
+ "comments": {
66
+ "prerelease": [
67
+ {
68
+ "author": "39736248+andrefcdias@users.noreply.github.com",
69
+ "package": "@fluentui/react-card",
70
+ "commit": "6f5126ab390def986bda1c95c1540c20e8b0ddd9",
71
+ "comment": "Added new `focusMode` property to control the focus behavior inside of the component"
72
+ },
16
73
  {
17
74
  "author": "beachball",
18
75
  "package": "@fluentui/react-card",
19
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220505-0419.1",
20
- "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
76
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
77
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
21
78
  },
22
79
  {
23
80
  "author": "beachball",
24
81
  "package": "@fluentui/react-card",
25
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220505-0419.1",
26
- "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
82
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.9",
83
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
27
84
  },
28
85
  {
29
86
  "author": "beachball",
30
87
  "package": "@fluentui/react-card",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220505-0419.1",
32
- "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
88
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
89
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
33
90
  },
34
91
  {
35
92
  "author": "beachball",
36
93
  "package": "@fluentui/react-card",
37
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220505-0419.1",
38
- "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
94
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
95
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
39
96
  },
40
97
  {
41
98
  "author": "beachball",
42
99
  "package": "@fluentui/react-card",
43
- "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220505-0419.1",
44
- "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
100
+ "comment": "Bump @fluentui/react-text to v9.0.0-rc.8",
101
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
45
102
  },
46
103
  {
47
104
  "author": "beachball",
48
105
  "package": "@fluentui/react-card",
49
- "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220505-0419.1",
50
- "commit": "6bbaced7ad19cd9172d1869027f73f1aa967547f"
106
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.9",
107
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
51
108
  }
52
109
  ]
53
110
  }
package/CHANGELOG.md CHANGED
@@ -1,23 +1,39 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Thu, 05 May 2022 04:31:59 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 10 May 2022 04:31:41 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220505-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220505-0419.1)
7
+ ## [0.0.0-nightly-20220510-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220510-0420.1)
8
8
 
9
- Thu, 05 May 2022 04:31:59 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.13..@fluentui/react-card_v0.0.0-nightly-20220505-0419.1)
9
+ Tue, 10 May 2022 04:31:41 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.14..@fluentui/react-card_v0.0.0-nightly-20220510-0420.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
15
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
16
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
18
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
19
- - Bump @fluentui/react-text to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
20
- - Bump @fluentui/react-button to v0.0.0-nightly-20220505-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/6bbaced7ad19cd9172d1869027f73f1aa967547f) by beachball)
15
+ - CardPreview now expands properly, all the way to the Card's edges ([PR #22761](https://github.com/microsoft/fluentui/pull/22761) by 39736248+andrefcdias@users.noreply.github.com)
16
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
17
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
18
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
20
+ - Bump @fluentui/react-text to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
21
+ - Bump @fluentui/react-button to v0.0.0-nightly-20220510-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/23be9682b20fba2ea59bbb882e2225b9bc81133a) by beachball)
22
+
23
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.14)
24
+
25
+ Thu, 05 May 2022 18:26:29 GMT
26
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.13..@fluentui/react-card_v9.0.0-beta.14)
27
+
28
+ ### Changes
29
+
30
+ - Added new `focusMode` property to control the focus behavior inside of the component ([PR #22312](https://github.com/microsoft/fluentui/pull/22312) by 39736248+andrefcdias@users.noreply.github.com)
31
+ - Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
32
+ - Bump @fluentui/react-tabster to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
33
+ - Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
34
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
35
+ - Bump @fluentui/react-text to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
36
+ - Bump @fluentui/react-button to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
21
37
 
22
38
  ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.13)
23
39
 
package/Spec.md CHANGED
@@ -102,17 +102,17 @@ Card goes for a more structural and generic approach to a card component and is
102
102
 
103
103
  #### API
104
104
 
105
- | Property | Values | Default | Purpose |
106
- | ----------- | ------------------------------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------- |
107
- | orientation | `vertical`, `horizontal` | `vertical` | Orientation of the card |
108
- | size | `smallest`, `smaller`, `small`, `medium`, `large` | `medium` | Define the minimum size of the card. Smaller sizes only apply to horizontal card |
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
- | appearance | `filled`, `filled-alternative`, `outline`, `subtle` | `filled` | Define the appearance of the card |
111
- | selectable | boolean | false | Makes the card selectable by adding a checkbox to the _Actions_ area |
112
- | selected | boolean | false | Set to `true` if card is selected |
113
- | expandable | boolean | false | Allow card to expand to show whole content |
114
- | disabled | boolean | false | Makes the card and card selection disabled (not propagated to children) |
115
- | focusable | boolean \| 'noTab' \| 'tabExit' \| 'tabOnly' | false | Sets the focus behavior for the card. If `true`, the card will have the 'noTab' focus behavior. |
105
+ | Property | Values | Default | Purpose |
106
+ | ----------- | ------------------------------------------------------------------------------------ | ---------- | -------------------------------------------------------------------------------- |
107
+ | orientation | `vertical`, `horizontal` | `vertical` | Orientation of the card |
108
+ | size | `smallest`, `smaller`, `small`, `medium`, `large` | `medium` | Define the minimum size of the card. Smaller sizes only apply to horizontal card |
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
+ | appearance | `filled`, `filled-alternative`, `outline`, `subtle` | `filled` | Define the appearance of the card |
111
+ | selectable | boolean | false | Makes the card selectable by adding a checkbox to the _Actions_ area |
112
+ | selected | boolean | false | Set to `true` if card is selected |
113
+ | expandable | boolean | false | Allow card to expand to show whole content |
114
+ | disabled | boolean | false | Makes the card and card selection disabled (not propagated to children) |
115
+ | focusMode | `off`, `no-tab`, `tab-exit`, `tab-only` | `off` | Sets the focus behavior for the card. |
116
116
 
117
117
  #### `scale` property
118
118
 
@@ -124,19 +124,23 @@ Card goes for a more structural and generic approach to a card component and is
124
124
  - `fluid-height`: `height` is set to `100%`.
125
125
  - `fluid`: `width` and `height` are set to `100%`.
126
126
 
127
- #### `focusable` property
127
+ #### `focusMode` property
128
128
 
129
- The three allowed focus behaviours (noTab, tabExit, tabOnly) map to the behaviors provided by Tabster.
129
+ The three allowed focus behaviours (`no-tab`, `tab-exit`, `tab-only`) map to the behaviors provided by Tabster.
130
130
 
131
- - `noTab` (`trapFocus` in Tabster)
131
+ - `off`
132
+
133
+ The card will not focusable.
134
+
135
+ - `no-tab` (`trapFocus` in Tabster)
132
136
 
133
137
  This behaviour traps the focus inside of the Card when pressing the `Enter` key and will only release focus when pressing the `Escape` key.
134
138
 
135
- - `tabExit` (`limited` in Tabster)
139
+ - `tab-exit` (`limited` in Tabster)
136
140
 
137
141
  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.
138
142
 
139
- - `tabOnly` (`unlimited` in Tabster)
143
+ - `tab-only` (`unlimited` in Tabster)
140
144
 
141
145
  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.
142
146
 
package/dist/index.d.ts CHANGED
@@ -19,6 +19,27 @@ export declare const cardClassNames: SlotClassNames<CardSlots>;
19
19
 
20
20
  export declare type CardCommons = {
21
21
  appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
22
+ /**
23
+ * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.
24
+ *
25
+ * `off`
26
+ * The card will not focusable.
27
+ *
28
+ * `no-tab`
29
+ * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
30
+ * pressing the Escape key.
31
+ *
32
+ * `tab-exit`
33
+ * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
34
+ * the Tab key on the last inner element.
35
+ *
36
+ * `tab-only`
37
+ * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
38
+ * after the last inner element.
39
+ *
40
+ * @defaultvalue off
41
+ */
42
+ focusMode: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
22
43
  };
23
44
 
24
45
  /**
package/lib/components/Card/Card.types.js.map CHANGED
@@ -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\nexport type CardCommons = {\n appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & CardCommons;\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\nexport type CardCommons = {\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 * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & CardCommons;\n"]}
package/lib/components/Card/useCard.js CHANGED
@@ -11,20 +11,29 @@ import { useFocusableGroup } from '@fluentui/react-tabster';
11
11
  */
12
12
 
13
13
  export const useCard_unstable = (props, ref) => {
14
- const groupperAttrs = useFocusableGroup({
15
- tabBehavior: 'limitedTrapFocus'
16
- });
17
14
  const {
18
- appearance = 'filled'
15
+ appearance = 'filled',
16
+ focusMode = 'off'
19
17
  } = props;
18
+ const focusMap = {
19
+ off: undefined,
20
+ 'no-tab': 'limitedTrapFocus',
21
+ 'tab-exit': 'limited',
22
+ 'tab-only': 'unlimited'
23
+ };
24
+ const groupperAttrs = useFocusableGroup({
25
+ tabBehavior: focusMap[focusMode]
26
+ });
20
27
  return {
21
28
  appearance,
29
+ focusMode,
22
30
  components: {
23
31
  root: 'div'
24
32
  },
25
33
  root: getNativeElementProps(props.as || 'div', {
26
34
  ref,
27
35
  role: 'group',
36
+ tabIndex: focusMode !== 'off' ? 0 : undefined,
28
37
  ...groupperAttrs,
29
38
  ...props
30
39
  })
package/lib/components/Card/useCard.js.map CHANGED
@@ -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,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE;AADyB,GAAD,CAAvC;AAIA,QAAM;AAAE,IAAA,UAAU,GAAG;AAAf,MAA4B,KAAlC;AACA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAJtB,GAAP;AAWD,CAjBM","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 groupperAttrs = useFocusableGroup({\n tabBehavior: 'limitedTrapFocus',\n });\n\n const { appearance = 'filled' } = props;\n return {\n appearance,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...groupperAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
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;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,kBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAD,CAAvC;AAIA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,SAFK;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,MAAA,QAAQ,EAAE,SAAS,KAAK,KAAd,GAAsB,CAAtB,GAA0B,SAHS;AAI7C,SAAG,aAJ0C;AAK7C,SAAG;AAL0C,KAApB;AALtB,GAAP;AAaD,CA3BM","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' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limitedTrapFocus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n return {\n appearance,\n focusMode,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n tabIndex: focusMode !== 'off' ? 0 : undefined,\n ...groupperAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Card/useCardStyles.js CHANGED
@@ -16,132 +16,138 @@ export const cardClassNames = {
16
16
  const useStyles = /*#__PURE__*/__styles({
17
17
  "root": {
18
18
  "mc9l5x": "ftgm304",
19
+ "qhf8xq": "f10pi13n",
19
20
  "B68tc82": "f1p9o1ba",
20
21
  "Bmxbyg5": "f1sil6mw",
21
22
  "sj55zd": "f19n0e5",
22
- "icvyot": "fzkkow9",
23
- "vrafjx": ["fcdblym", "fjik90z"],
24
- "oivjwe": "fg706s2",
25
- "wvpqe5": ["fjik90z", "fcdblym"],
26
- "B4j52fo": "f192inf7",
27
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
28
- "Bn0qgzm": "f1vxd6vx",
29
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
30
23
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
31
24
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
32
25
  "B7oj6ja": ["f1jar5jt", "fyu767a"],
33
26
  "Btl43ni": ["fyu767a", "f1jar5jt"],
27
+ "E3zdtr": "f1mdlcz9",
28
+ "bn5sak": "frwkxtg",
29
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
30
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
31
+ "By385i5": "fo72kxq",
32
+ "Bsft5z2": "f13zj6fq",
33
+ "B80jsxd": "f1nwj1ja",
34
+ "Bm2nyyq": "f8rth92",
35
+ "Barhvk9": ["flthirb", "ftkbnf5"],
36
+ "Bw17bha": "f1lh990p",
37
+ "vfts7": ["ftkbnf5", "flthirb"],
38
+ "xrcqlc": "f6czdpx",
39
+ "Ihftqj": ["f13hvwk3", "f1en4csx"],
40
+ "Bcgy8vk": "f1i1u9k0",
41
+ "Bhxzhr1": ["f1en4csx", "f13hvwk3"],
42
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
43
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
44
+ "Bl18szs": ["f1pix4dl", "f13nd1z4"],
45
+ "B4j8arr": ["f13nd1z4", "f1pix4dl"],
34
46
  "Ecqjvq": "f70or3y",
35
47
  "B39syqp": ["f1s27jks", "f1x7x6se"],
36
48
  "m3o775": "f1q2lvbs",
37
49
  "I0kkcn": ["f1x7x6se", "f1s27jks"]
38
50
  },
51
+ "interactiveNoOutline": {
52
+ "Be0v6ae": "ftr40te",
53
+ "B5kxglz": ["fcsoo7g", "f1rl4q8i"],
54
+ "B3pwyw6": "fbb4roj",
55
+ "Bymgtzf": ["f1rl4q8i", "fcsoo7g"],
56
+ "dmfk": "fd4vwcp",
57
+ "B4ofi8": ["f1crelnc", "fup9tr0"],
58
+ "jgq6uv": "f12d33p4",
59
+ "Baxewws": ["fup9tr0", "f1crelnc"]
60
+ },
39
61
  "filledInteractive": {
40
62
  "Bceei9c": "f1k6fduh",
41
63
  "De3pzq": "fxugw4r",
42
- "g2u3we": "fghlq4f",
43
- "h3c5rm": ["f1gn591s", "fjscplz"],
44
- "B9xav0g": "fb073pr",
45
- "zhjwy3": ["fjscplz", "f1gn591s"],
46
64
  "E5pizo": "f1whvlc6",
65
+ "B0n5ga8": "f16gxe2i",
66
+ "s924m2": ["fpgykix", "fzybk4o"],
67
+ "B1q35kw": "f1osi826",
68
+ "Gp14am": ["fzybk4o", "fpgykix"],
47
69
  "Jwef8y": "f1knas48",
48
- "Bgoe8wy": "fpa59ij",
49
- "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
50
- "oetu4i": "fz67qlh",
51
- "gg5e9n": ["f1l1ogpg", "f1rhln42"],
52
70
  "Bvxd0ez": "f1m145df",
53
- "ecr2s2": "fb40n2d",
54
- "B6oc9vd": "f7cshhm",
55
- "ak43y8": ["f1bzyac8", "f131p3c2"],
56
- "wmxk5l": "f1bazisv",
57
- "B50zh58": ["f131p3c2", "f1bzyac8"]
71
+ "ecr2s2": "fb40n2d"
58
72
  },
59
73
  "filled": {
60
74
  "De3pzq": "fxugw4r",
61
- "g2u3we": "fghlq4f",
62
- "h3c5rm": ["f1gn591s", "fjscplz"],
63
- "B9xav0g": "fb073pr",
64
- "zhjwy3": ["fjscplz", "f1gn591s"],
65
- "E5pizo": "f1whvlc6"
75
+ "E5pizo": "f1whvlc6",
76
+ "B0n5ga8": "f16gxe2i",
77
+ "s924m2": ["fpgykix", "fzybk4o"],
78
+ "B1q35kw": "f1osi826",
79
+ "Gp14am": ["fzybk4o", "fpgykix"]
66
80
  },
67
81
  "filledAlternativeInteractive": {
68
82
  "Bceei9c": "f1k6fduh",
69
83
  "De3pzq": "f1dmdbja",
70
- "g2u3we": "fghlq4f",
71
- "h3c5rm": ["f1gn591s", "fjscplz"],
72
- "B9xav0g": "fb073pr",
73
- "zhjwy3": ["fjscplz", "f1gn591s"],
74
84
  "E5pizo": "f1whvlc6",
85
+ "B0n5ga8": "f16gxe2i",
86
+ "s924m2": ["fpgykix", "fzybk4o"],
87
+ "B1q35kw": "f1osi826",
88
+ "Gp14am": ["fzybk4o", "fpgykix"],
75
89
  "Jwef8y": "f1uvynv3",
76
- "Bgoe8wy": "fpa59ij",
77
- "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
78
- "oetu4i": "fz67qlh",
79
- "gg5e9n": ["f1l1ogpg", "f1rhln42"],
80
90
  "Bvxd0ez": "f1m145df",
81
- "ecr2s2": "f1yhgkbh",
82
- "B6oc9vd": "f7cshhm",
83
- "ak43y8": ["f1bzyac8", "f131p3c2"],
84
- "wmxk5l": "f1bazisv",
85
- "B50zh58": ["f131p3c2", "f1bzyac8"]
91
+ "ecr2s2": "f1yhgkbh"
86
92
  },
87
93
  "filledAlternative": {
88
94
  "De3pzq": "f1dmdbja",
89
- "g2u3we": "fghlq4f",
90
- "h3c5rm": ["f1gn591s", "fjscplz"],
91
- "B9xav0g": "fb073pr",
92
- "zhjwy3": ["fjscplz", "f1gn591s"],
93
- "E5pizo": "f1whvlc6"
95
+ "E5pizo": "f1whvlc6",
96
+ "B0n5ga8": "f16gxe2i",
97
+ "s924m2": ["fpgykix", "fzybk4o"],
98
+ "B1q35kw": "f1osi826",
99
+ "Gp14am": ["fzybk4o", "fpgykix"]
94
100
  },
95
101
  "outlineInteractive": {
96
102
  "Bceei9c": "f1k6fduh",
97
103
  "De3pzq": "f1c21dwh",
98
- "g2u3we": "fj3muxo",
99
- "h3c5rm": ["f1akhkt", "f1lxtadh"],
100
- "B9xav0g": "f1aperda",
101
- "zhjwy3": ["f1lxtadh", "f1akhkt"],
102
104
  "E5pizo": "f1couhl3",
105
+ "B0n5ga8": "ft83z1f",
106
+ "s924m2": ["f1g4150c", "f192dr6e"],
107
+ "B1q35kw": "f1qnawh6",
108
+ "Gp14am": ["f192dr6e", "f1g4150c"],
103
109
  "Jwef8y": "fjxutwb",
104
- "Bgoe8wy": "fvcxoqz",
105
- "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
106
- "oetu4i": "f1xlaoq0",
107
- "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
110
+ "Be0v6ae": "f1llr77y",
111
+ "B5kxglz": ["fzk0khw", "fjj8tog"],
112
+ "B3pwyw6": "fb1u8ub",
113
+ "Bymgtzf": ["fjj8tog", "fzk0khw"],
108
114
  "ecr2s2": "fophhak",
109
- "B6oc9vd": "fvs00aa",
110
- "ak43y8": ["f1assf6x", "f4ruux4"],
111
- "wmxk5l": "fumykes",
112
- "B50zh58": ["f4ruux4", "f1assf6x"]
115
+ "dmfk": "f1uohb70",
116
+ "B4ofi8": ["f1jm7v1n", "f1bus3rq"],
117
+ "jgq6uv": "f1fbu7rr",
118
+ "Baxewws": ["f1bus3rq", "f1jm7v1n"]
113
119
  },
114
120
  "outline": {
115
121
  "De3pzq": "f1c21dwh",
116
- "g2u3we": "fj3muxo",
117
- "h3c5rm": ["f1akhkt", "f1lxtadh"],
118
- "B9xav0g": "f1aperda",
119
- "zhjwy3": ["f1lxtadh", "f1akhkt"],
120
- "E5pizo": "f1couhl3"
122
+ "E5pizo": "f1couhl3",
123
+ "B0n5ga8": "ft83z1f",
124
+ "s924m2": ["f1g4150c", "f192dr6e"],
125
+ "B1q35kw": "f1qnawh6",
126
+ "Gp14am": ["f192dr6e", "f1g4150c"]
121
127
  },
122
128
  "subtleInteractive": {
123
129
  "Bceei9c": "f1k6fduh",
124
130
  "De3pzq": "fhovq9v",
125
- "g2u3we": "fghlq4f",
126
- "h3c5rm": ["f1gn591s", "fjscplz"],
127
- "B9xav0g": "fb073pr",
128
- "zhjwy3": ["fjscplz", "f1gn591s"],
129
131
  "E5pizo": "f1couhl3",
132
+ "B0n5ga8": "f16gxe2i",
133
+ "s924m2": ["fpgykix", "fzybk4o"],
134
+ "B1q35kw": "f1osi826",
135
+ "Gp14am": ["fzybk4o", "fpgykix"],
130
136
  "Jwef8y": "f1t94bn6",
131
137
  "ecr2s2": "f1wfn5kd"
132
138
  },
133
139
  "subtle": {
134
140
  "De3pzq": "fhovq9v",
135
- "g2u3we": "fghlq4f",
136
- "h3c5rm": ["f1gn591s", "fjscplz"],
137
- "B9xav0g": "fb073pr",
138
- "zhjwy3": ["fjscplz", "f1gn591s"],
139
- "E5pizo": "f1couhl3"
141
+ "E5pizo": "f1couhl3",
142
+ "B0n5ga8": "f16gxe2i",
143
+ "s924m2": ["fpgykix", "fzybk4o"],
144
+ "B1q35kw": "f1osi826",
145
+ "Gp14am": ["fzybk4o", "fpgykix"]
140
146
  }
141
147
  }, {
142
- "d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".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);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1couhl3{box-shadow:none;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
143
- "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
144
- "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f7cshhm:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1bzyac8:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f131p3c2:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1bazisv:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
148
+ "d": [".ftgm304{display:block;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".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);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".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);}"],
149
+ "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);}"],
150
+ "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);}"]
145
151
  });
146
152
  /**
147
153
  * Apply styling to the Card slots based on the state
@@ -151,7 +157,7 @@ const useStyles = /*#__PURE__*/__styles({
151
157
  export const useCardStyles_unstable = state => {
152
158
  const styles = useStyles();
153
159
  const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
154
- 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, state.root.className);
160
+ 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);
155
161
  return state;
156
162
  };
157
163
  //# sourceMappingURL=useCardStyles.js.map
package/lib/components/Card/useCardStyles.js.map CHANGED
@@ -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;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,UAAtB;AACP,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,EAAlB;AAoGA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cAAc,CAAC,IADkB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAcA,SAAO,KAAP;AACD,CA3BM","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\n/**\n * @deprecated Use `cardClassNames.root` instead.\n */\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> *:not(.${cardPreviewClassNames.root})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\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 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 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 state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAG,UAAtB;AACP,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;AAoJA;;AAEG;;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cAAc,CAAC,IADkB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHP,EAIjC,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJnB,EAKjC,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALR,EAMjC,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANP,EAOjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPtB,EAQjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BARlC,EASjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATvB,EAUjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVtB,EAWjC,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,oBAXvB,EAYjC,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,SAAO,KAAP;AACD,CA5BM","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\n/**\n * @deprecated Use `cardClassNames.root` instead.\n */\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\n // TODO: Extract this to separate stiles when tackling the `size` prop\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\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 // TODO: Extract this to separate styles when tackling the `size` prop\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n\n [`> *:not(.${cardPreviewClassNames.root})`]: {\n // TODO: Extract this to separate styles when tackling the `size` prop\n ...shorthands.margin('12px'),\n },\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 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 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/components/Card/useCard.js CHANGED
@@ -20,20 +20,29 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
20
20
 
21
21
 
22
22
  const useCard_unstable = (props, ref) => {
23
- const groupperAttrs = react_tabster_1.useFocusableGroup({
24
- tabBehavior: 'limitedTrapFocus'
25
- });
26
23
  const {
27
- appearance = 'filled'
24
+ appearance = 'filled',
25
+ focusMode = 'off'
28
26
  } = props;
27
+ const focusMap = {
28
+ off: undefined,
29
+ 'no-tab': 'limitedTrapFocus',
30
+ 'tab-exit': 'limited',
31
+ 'tab-only': 'unlimited'
32
+ };
33
+ const groupperAttrs = react_tabster_1.useFocusableGroup({
34
+ tabBehavior: focusMap[focusMode]
35
+ });
29
36
  return {
30
37
  appearance,
38
+ focusMode,
31
39
  components: {
32
40
  root: 'div'
33
41
  },
34
42
  root: react_utilities_1.getNativeElementProps(props.as || 'div', {
35
43
  ref,
36
44
  role: 'group',
45
+ tabIndex: focusMode !== 'off' ? 0 : undefined,
37
46
  ...groupperAttrs,
38
47
  ...props
39
48
  })
package/lib-commonjs/components/Card/useCard.js.map CHANGED
@@ -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,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE;AADyB,GAAlB,CAAtB;AAIA,QAAM;AAAE,IAAA,UAAU,GAAG;AAAf,MAA4B,KAAlC;AACA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AAJD,GAAP;AAWD,CAjBM;;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 groupperAttrs = useFocusableGroup({\n tabBehavior: 'limitedTrapFocus',\n });\n\n const { appearance = 'filled' } = props;\n return {\n appearance,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...groupperAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
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;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,kBAFK;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,SAAO;AACL,IAAA,UADK;AAEL,IAAA,SAFK;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,MAAA,QAAQ,EAAE,SAAS,KAAK,KAAd,GAAsB,CAAtB,GAA0B,SAHS;AAI7C,SAAG,aAJ0C;AAK7C,SAAG;AAL0C,KAAzC;AALD,GAAP;AAaD,CA3BM;;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' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limitedTrapFocus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n return {\n appearance,\n focusMode,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n tabIndex: focusMode !== 'off' ? 0 : undefined,\n ...groupperAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Card/useCardStyles.js CHANGED
@@ -26,132 +26,138 @@ exports.cardClassNames = {
26
26
  const useStyles = /*#__PURE__*/react_1.__styles({
27
27
  "root": {
28
28
  "mc9l5x": "ftgm304",
29
+ "qhf8xq": "f10pi13n",
29
30
  "B68tc82": "f1p9o1ba",
30
31
  "Bmxbyg5": "f1sil6mw",
31
32
  "sj55zd": "f19n0e5",
32
- "icvyot": "fzkkow9",
33
- "vrafjx": ["fcdblym", "fjik90z"],
34
- "oivjwe": "fg706s2",
35
- "wvpqe5": ["fjik90z", "fcdblym"],
36
- "B4j52fo": "f192inf7",
37
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
38
- "Bn0qgzm": "f1vxd6vx",
39
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
40
33
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
41
34
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
42
35
  "B7oj6ja": ["f1jar5jt", "fyu767a"],
43
36
  "Btl43ni": ["fyu767a", "f1jar5jt"],
37
+ "E3zdtr": "f1mdlcz9",
38
+ "bn5sak": "frwkxtg",
39
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
40
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
41
+ "By385i5": "fo72kxq",
42
+ "Bsft5z2": "f13zj6fq",
43
+ "B80jsxd": "f1nwj1ja",
44
+ "Bm2nyyq": "f8rth92",
45
+ "Barhvk9": ["flthirb", "ftkbnf5"],
46
+ "Bw17bha": "f1lh990p",
47
+ "vfts7": ["ftkbnf5", "flthirb"],
48
+ "xrcqlc": "f6czdpx",
49
+ "Ihftqj": ["f13hvwk3", "f1en4csx"],
50
+ "Bcgy8vk": "f1i1u9k0",
51
+ "Bhxzhr1": ["f1en4csx", "f13hvwk3"],
52
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
53
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
54
+ "Bl18szs": ["f1pix4dl", "f13nd1z4"],
55
+ "B4j8arr": ["f13nd1z4", "f1pix4dl"],
44
56
  "Ecqjvq": "f70or3y",
45
57
  "B39syqp": ["f1s27jks", "f1x7x6se"],
46
58
  "m3o775": "f1q2lvbs",
47
59
  "I0kkcn": ["f1x7x6se", "f1s27jks"]
48
60
  },
61
+ "interactiveNoOutline": {
62
+ "Be0v6ae": "ftr40te",
63
+ "B5kxglz": ["fcsoo7g", "f1rl4q8i"],
64
+ "B3pwyw6": "fbb4roj",
65
+ "Bymgtzf": ["f1rl4q8i", "fcsoo7g"],
66
+ "dmfk": "fd4vwcp",
67
+ "B4ofi8": ["f1crelnc", "fup9tr0"],
68
+ "jgq6uv": "f12d33p4",
69
+ "Baxewws": ["fup9tr0", "f1crelnc"]
70
+ },
49
71
  "filledInteractive": {
50
72
  "Bceei9c": "f1k6fduh",
51
73
  "De3pzq": "fxugw4r",
52
- "g2u3we": "fghlq4f",
53
- "h3c5rm": ["f1gn591s", "fjscplz"],
54
- "B9xav0g": "fb073pr",
55
- "zhjwy3": ["fjscplz", "f1gn591s"],
56
74
  "E5pizo": "f1whvlc6",
75
+ "B0n5ga8": "f16gxe2i",
76
+ "s924m2": ["fpgykix", "fzybk4o"],
77
+ "B1q35kw": "f1osi826",
78
+ "Gp14am": ["fzybk4o", "fpgykix"],
57
79
  "Jwef8y": "f1knas48",
58
- "Bgoe8wy": "fpa59ij",
59
- "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
60
- "oetu4i": "fz67qlh",
61
- "gg5e9n": ["f1l1ogpg", "f1rhln42"],
62
80
  "Bvxd0ez": "f1m145df",
63
- "ecr2s2": "fb40n2d",
64
- "B6oc9vd": "f7cshhm",
65
- "ak43y8": ["f1bzyac8", "f131p3c2"],
66
- "wmxk5l": "f1bazisv",
67
- "B50zh58": ["f131p3c2", "f1bzyac8"]
81
+ "ecr2s2": "fb40n2d"
68
82
  },
69
83
  "filled": {
70
84
  "De3pzq": "fxugw4r",
71
- "g2u3we": "fghlq4f",
72
- "h3c5rm": ["f1gn591s", "fjscplz"],
73
- "B9xav0g": "fb073pr",
74
- "zhjwy3": ["fjscplz", "f1gn591s"],
75
- "E5pizo": "f1whvlc6"
85
+ "E5pizo": "f1whvlc6",
86
+ "B0n5ga8": "f16gxe2i",
87
+ "s924m2": ["fpgykix", "fzybk4o"],
88
+ "B1q35kw": "f1osi826",
89
+ "Gp14am": ["fzybk4o", "fpgykix"]
76
90
  },
77
91
  "filledAlternativeInteractive": {
78
92
  "Bceei9c": "f1k6fduh",
79
93
  "De3pzq": "f1dmdbja",
80
- "g2u3we": "fghlq4f",
81
- "h3c5rm": ["f1gn591s", "fjscplz"],
82
- "B9xav0g": "fb073pr",
83
- "zhjwy3": ["fjscplz", "f1gn591s"],
84
94
  "E5pizo": "f1whvlc6",
95
+ "B0n5ga8": "f16gxe2i",
96
+ "s924m2": ["fpgykix", "fzybk4o"],
97
+ "B1q35kw": "f1osi826",
98
+ "Gp14am": ["fzybk4o", "fpgykix"],
85
99
  "Jwef8y": "f1uvynv3",
86
- "Bgoe8wy": "fpa59ij",
87
- "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
88
- "oetu4i": "fz67qlh",
89
- "gg5e9n": ["f1l1ogpg", "f1rhln42"],
90
100
  "Bvxd0ez": "f1m145df",
91
- "ecr2s2": "f1yhgkbh",
92
- "B6oc9vd": "f7cshhm",
93
- "ak43y8": ["f1bzyac8", "f131p3c2"],
94
- "wmxk5l": "f1bazisv",
95
- "B50zh58": ["f131p3c2", "f1bzyac8"]
101
+ "ecr2s2": "f1yhgkbh"
96
102
  },
97
103
  "filledAlternative": {
98
104
  "De3pzq": "f1dmdbja",
99
- "g2u3we": "fghlq4f",
100
- "h3c5rm": ["f1gn591s", "fjscplz"],
101
- "B9xav0g": "fb073pr",
102
- "zhjwy3": ["fjscplz", "f1gn591s"],
103
- "E5pizo": "f1whvlc6"
105
+ "E5pizo": "f1whvlc6",
106
+ "B0n5ga8": "f16gxe2i",
107
+ "s924m2": ["fpgykix", "fzybk4o"],
108
+ "B1q35kw": "f1osi826",
109
+ "Gp14am": ["fzybk4o", "fpgykix"]
104
110
  },
105
111
  "outlineInteractive": {
106
112
  "Bceei9c": "f1k6fduh",
107
113
  "De3pzq": "f1c21dwh",
108
- "g2u3we": "fj3muxo",
109
- "h3c5rm": ["f1akhkt", "f1lxtadh"],
110
- "B9xav0g": "f1aperda",
111
- "zhjwy3": ["f1lxtadh", "f1akhkt"],
112
114
  "E5pizo": "f1couhl3",
115
+ "B0n5ga8": "ft83z1f",
116
+ "s924m2": ["f1g4150c", "f192dr6e"],
117
+ "B1q35kw": "f1qnawh6",
118
+ "Gp14am": ["f192dr6e", "f1g4150c"],
113
119
  "Jwef8y": "fjxutwb",
114
- "Bgoe8wy": "fvcxoqz",
115
- "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
116
- "oetu4i": "f1xlaoq0",
117
- "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
120
+ "Be0v6ae": "f1llr77y",
121
+ "B5kxglz": ["fzk0khw", "fjj8tog"],
122
+ "B3pwyw6": "fb1u8ub",
123
+ "Bymgtzf": ["fjj8tog", "fzk0khw"],
118
124
  "ecr2s2": "fophhak",
119
- "B6oc9vd": "fvs00aa",
120
- "ak43y8": ["f1assf6x", "f4ruux4"],
121
- "wmxk5l": "fumykes",
122
- "B50zh58": ["f4ruux4", "f1assf6x"]
125
+ "dmfk": "f1uohb70",
126
+ "B4ofi8": ["f1jm7v1n", "f1bus3rq"],
127
+ "jgq6uv": "f1fbu7rr",
128
+ "Baxewws": ["f1bus3rq", "f1jm7v1n"]
123
129
  },
124
130
  "outline": {
125
131
  "De3pzq": "f1c21dwh",
126
- "g2u3we": "fj3muxo",
127
- "h3c5rm": ["f1akhkt", "f1lxtadh"],
128
- "B9xav0g": "f1aperda",
129
- "zhjwy3": ["f1lxtadh", "f1akhkt"],
130
- "E5pizo": "f1couhl3"
132
+ "E5pizo": "f1couhl3",
133
+ "B0n5ga8": "ft83z1f",
134
+ "s924m2": ["f1g4150c", "f192dr6e"],
135
+ "B1q35kw": "f1qnawh6",
136
+ "Gp14am": ["f192dr6e", "f1g4150c"]
131
137
  },
132
138
  "subtleInteractive": {
133
139
  "Bceei9c": "f1k6fduh",
134
140
  "De3pzq": "fhovq9v",
135
- "g2u3we": "fghlq4f",
136
- "h3c5rm": ["f1gn591s", "fjscplz"],
137
- "B9xav0g": "fb073pr",
138
- "zhjwy3": ["fjscplz", "f1gn591s"],
139
141
  "E5pizo": "f1couhl3",
142
+ "B0n5ga8": "f16gxe2i",
143
+ "s924m2": ["fpgykix", "fzybk4o"],
144
+ "B1q35kw": "f1osi826",
145
+ "Gp14am": ["fzybk4o", "fpgykix"],
140
146
  "Jwef8y": "f1t94bn6",
141
147
  "ecr2s2": "f1wfn5kd"
142
148
  },
143
149
  "subtle": {
144
150
  "De3pzq": "fhovq9v",
145
- "g2u3we": "fghlq4f",
146
- "h3c5rm": ["f1gn591s", "fjscplz"],
147
- "B9xav0g": "fb073pr",
148
- "zhjwy3": ["fjscplz", "f1gn591s"],
149
- "E5pizo": "f1couhl3"
151
+ "E5pizo": "f1couhl3",
152
+ "B0n5ga8": "f16gxe2i",
153
+ "s924m2": ["fpgykix", "fzybk4o"],
154
+ "B1q35kw": "f1osi826",
155
+ "Gp14am": ["fzybk4o", "fpgykix"]
150
156
  }
151
157
  }, {
152
- "d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".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);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1couhl3{box-shadow:none;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
153
- "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
154
- "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f7cshhm:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1bzyac8:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f131p3c2:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1bazisv:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
158
+ "d": [".ftgm304{display:block;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".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);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".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);}"],
159
+ "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);}"],
160
+ "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);}"]
155
161
  });
156
162
  /**
157
163
  * Apply styling to the Card slots based on the state
@@ -161,7 +167,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
161
167
  const useCardStyles_unstable = state => {
162
168
  const styles = useStyles();
163
169
  const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
164
- 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, state.root.className);
170
+ 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);
165
171
  return state;
166
172
  };
167
173
 
package/lib-commonjs/components/Card/useCardStyles.js.map CHANGED
@@ -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;;AAEG;;;AACU,OAAA,CAAA,aAAA,GAAgB,UAAhB;AACA,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,EAAlB;AAoGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cAAA,CAAe,IADM,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHnB,EAIrB,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJ/B,EAKrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALpB,EAMrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANnB,EAOrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPlC,EAQrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BAR9C,EASrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATnC,EAUrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVlC,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAcA,SAAO,KAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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\n/**\n * @deprecated Use `cardClassNames.root` instead.\n */\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> *:not(.${cardPreviewClassNames.root})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\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 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 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 state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
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;;AAEG;;;AACU,OAAA,CAAA,aAAA,GAAgB,UAAhB;AACA,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;AAoJA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cAAA,CAAe,IADM,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHnB,EAIrB,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJ/B,EAKrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALpB,EAMrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANnB,EAOrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPlC,EAQrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BAR9C,EASrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATnC,EAUrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVlC,EAWrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,oBAXnC,EAYrB,KAAK,CAAC,IAAN,CAAW,SAZU,CAAvB;AAeA,SAAO,KAAP;AACD,CA5BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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\n/**\n * @deprecated Use `cardClassNames.root` instead.\n */\nexport const cardClassName = 'fui-Card';\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\n // TODO: Extract this to separate stiles when tackling the `size` prop\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\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 // TODO: Extract this to separate styles when tackling the `size` prop\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n\n [`> *:not(.${cardPreviewClassNames.root})`]: {\n // TODO: Extract this to separate styles when tackling the `size` prop\n ...shorthands.margin('12px'),\n },\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 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 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-card",
3
- "version": "0.0.0-nightly-20220505-0419.1",
3
+ "version": "0.0.0-nightly-20220510-0420.1",
4
4
  "private": false,
5
5
  "description": "Card container components for Fluent UI React.",
6
6
  "main": "lib-commonjs/index.js",
@@ -17,6 +17,7 @@
17
17
  "bundle-size": "bundle-size measure",
18
18
  "clean": "just-scripts clean",
19
19
  "code-style": "just-scripts code-style",
20
+ "e2e": "e2e",
20
21
  "just": "just-scripts",
21
22
  "lint": "just-scripts lint",
22
23
  "start": "yarn storybook",
@@ -29,16 +30,16 @@
29
30
  "devDependencies": {
30
31
  "@fluentui/eslint-plugin": "*",
31
32
  "@fluentui/react-conformance": "*",
32
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220505-0419.1",
33
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220510-0420.1",
33
34
  "@fluentui/scripts": "^1.0.0",
34
- "@fluentui/react-text": "0.0.0-nightly-20220505-0419.1",
35
- "@fluentui/react-button": "0.0.0-nightly-20220505-0419.1"
35
+ "@fluentui/react-text": "0.0.0-nightly-20220510-0420.1",
36
+ "@fluentui/react-button": "0.0.0-nightly-20220510-0420.1"
36
37
  },
37
38
  "dependencies": {
38
39
  "@griffel/react": "1.0.3",
39
- "@fluentui/react-utilities": "0.0.0-nightly-20220505-0419.1",
40
- "@fluentui/react-tabster": "0.0.0-nightly-20220505-0419.1",
41
- "@fluentui/react-theme": "0.0.0-nightly-20220505-0419.1",
40
+ "@fluentui/react-utilities": "0.0.0-nightly-20220510-0420.1",
41
+ "@fluentui/react-tabster": "0.0.0-nightly-20220510-0420.1",
42
+ "@fluentui/react-theme": "0.0.0-nightly-20220510-0420.1",
42
43
  "tslib": "^2.1.0"
43
44
  },
44
45
  "peerDependencies": {