@fluentui/react-card 9.0.0-beta.13 → 9.0.0-beta.16

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 (30) hide show
  1. package/CHANGELOG.json +178 -1
  2. package/CHANGELOG.md +51 -2
  3. package/Spec.md +20 -16
  4. package/dist/index.d.ts +25 -26
  5. package/lib/components/Card/Card.types.js.map +1 -1
  6. package/lib/components/Card/useCard.js +16 -5
  7. package/lib/components/Card/useCard.js.map +1 -1
  8. package/lib/components/Card/useCardStyles.js +80 -79
  9. package/lib/components/Card/useCardStyles.js.map +1 -1
  10. package/lib/components/CardFooter/useCardFooterStyles.js +0 -5
  11. package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
  12. package/lib/components/CardHeader/useCardHeaderStyles.js +0 -5
  13. package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  14. package/lib/components/CardPreview/useCardPreviewStyles.js +0 -5
  15. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  16. package/lib/index.js +4 -5
  17. package/lib/index.js.map +1 -1
  18. package/lib-commonjs/components/Card/useCard.js +16 -5
  19. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  20. package/lib-commonjs/components/Card/useCardStyles.js +81 -80
  21. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  22. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +1 -6
  23. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
  24. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +1 -6
  25. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  26. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +1 -6
  27. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  28. package/lib-commonjs/index.js +1 -26
  29. package/lib-commonjs/index.js.map +1 -1
  30. package/package.json +9 -8
package/CHANGELOG.json CHANGED
@@ -2,7 +2,184 @@
2
2
  "name": "@fluentui/react-card",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 04 May 2022 13:24:06 GMT",
5
+ "date": "Mon, 23 May 2022 18:54:47 GMT",
6
+ "tag": "@fluentui/react-card_v9.0.0-beta.16",
7
+ "version": "9.0.0-beta.16",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "esteban.230@hotmail.com",
12
+ "package": "@fluentui/react-card",
13
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
14
+ "comment": "Removing <componentName>ClassName exports."
15
+ },
16
+ {
17
+ "author": "seanmonahan@microsoft.com",
18
+ "package": "@fluentui/react-card",
19
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
20
+ "comment": "update tabster tab behaviors"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-card",
25
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
26
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-card",
31
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
32
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-card",
37
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
38
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-card",
43
+ "comment": "Bump @fluentui/react-text to v9.0.0-rc.10",
44
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-card",
49
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.11",
50
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
51
+ }
52
+ ]
53
+ }
54
+ },
55
+ {
56
+ "date": "Mon, 23 May 2022 12:14:05 GMT",
57
+ "tag": "@fluentui/react-card_v9.0.0-beta.15",
58
+ "version": "9.0.0-beta.15",
59
+ "comments": {
60
+ "prerelease": [
61
+ {
62
+ "author": "olfedias@microsoft.com",
63
+ "package": "@fluentui/react-card",
64
+ "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
65
+ "comment": "chore: Update Griffel to latest version"
66
+ },
67
+ {
68
+ "author": "39736248+andrefcdias@users.noreply.github.com",
69
+ "package": "@fluentui/react-card",
70
+ "commit": "a42bebb19d1403bfbde96cfb4b09e3ce32490ec6",
71
+ "comment": "CardPreview now expands properly, all the way to the Card's edges"
72
+ },
73
+ {
74
+ "author": "39736248+andrefcdias@users.noreply.github.com",
75
+ "package": "@fluentui/react-card",
76
+ "commit": "d24b84d3239563973ed1dff9145998a4403c531e",
77
+ "comment": "fix: focus no longer being managed when using `focusMode=\"off\"`"
78
+ },
79
+ {
80
+ "author": "sarah.higley@microsoft.com",
81
+ "package": "@fluentui/react-card",
82
+ "commit": "a31441fdf2fa55f706983653febf5c318d76693d",
83
+ "comment": "remove commons from Card"
84
+ },
85
+ {
86
+ "author": "olfedias@microsoft.com",
87
+ "package": "@fluentui/react-card",
88
+ "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
89
+ "comment": "chore: Update Griffel to latest version"
90
+ },
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui/react-card",
94
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
95
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
96
+ },
97
+ {
98
+ "author": "beachball",
99
+ "package": "@fluentui/react-card",
100
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
101
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
102
+ },
103
+ {
104
+ "author": "beachball",
105
+ "package": "@fluentui/react-card",
106
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
107
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
108
+ },
109
+ {
110
+ "author": "beachball",
111
+ "package": "@fluentui/react-card",
112
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
113
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
114
+ },
115
+ {
116
+ "author": "beachball",
117
+ "package": "@fluentui/react-card",
118
+ "comment": "Bump @fluentui/react-text to v9.0.0-rc.9",
119
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
120
+ },
121
+ {
122
+ "author": "beachball",
123
+ "package": "@fluentui/react-card",
124
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.10",
125
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
126
+ }
127
+ ]
128
+ }
129
+ },
130
+ {
131
+ "date": "Thu, 05 May 2022 18:26:29 GMT",
132
+ "tag": "@fluentui/react-card_v9.0.0-beta.14",
133
+ "version": "9.0.0-beta.14",
134
+ "comments": {
135
+ "prerelease": [
136
+ {
137
+ "author": "39736248+andrefcdias@users.noreply.github.com",
138
+ "package": "@fluentui/react-card",
139
+ "commit": "6f5126ab390def986bda1c95c1540c20e8b0ddd9",
140
+ "comment": "Added new `focusMode` property to control the focus behavior inside of the component"
141
+ },
142
+ {
143
+ "author": "beachball",
144
+ "package": "@fluentui/react-card",
145
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
146
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
147
+ },
148
+ {
149
+ "author": "beachball",
150
+ "package": "@fluentui/react-card",
151
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.9",
152
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
153
+ },
154
+ {
155
+ "author": "beachball",
156
+ "package": "@fluentui/react-card",
157
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
158
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
159
+ },
160
+ {
161
+ "author": "beachball",
162
+ "package": "@fluentui/react-card",
163
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
164
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
165
+ },
166
+ {
167
+ "author": "beachball",
168
+ "package": "@fluentui/react-card",
169
+ "comment": "Bump @fluentui/react-text to v9.0.0-rc.8",
170
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
171
+ },
172
+ {
173
+ "author": "beachball",
174
+ "package": "@fluentui/react-card",
175
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.9",
176
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
177
+ }
178
+ ]
179
+ }
180
+ },
181
+ {
182
+ "date": "Wed, 04 May 2022 13:26:38 GMT",
6
183
  "tag": "@fluentui/react-card_v9.0.0-beta.13",
7
184
  "version": "9.0.0-beta.13",
8
185
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,61 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Wed, 04 May 2022 13:24:06 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 23 May 2022 18:54:47 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.16)
8
+
9
+ Mon, 23 May 2022 18:54:47 GMT
10
+ [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
+
12
+ ### Changes
13
+
14
+ - Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
15
+ - update tabster tab behaviors ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
16
+ - Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
17
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
18
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
19
+ - Bump @fluentui/react-text to v9.0.0-rc.10 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
20
+ - Bump @fluentui/react-button to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
21
+
22
+ ## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.15)
23
+
24
+ Mon, 23 May 2022 12:14:05 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.14..@fluentui/react-card_v9.0.0-beta.15)
26
+
27
+ ### Changes
28
+
29
+ - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
30
+ - 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)
31
+ - fix: focus no longer being managed when using `focusMode="off"` ([PR #23011](https://github.com/microsoft/fluentui/pull/23011) by 39736248+andrefcdias@users.noreply.github.com)
32
+ - remove commons from Card ([PR #22872](https://github.com/microsoft/fluentui/pull/22872) by sarah.higley@microsoft.com)
33
+ - chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
34
+ - Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
35
+ - Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
36
+ - Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
37
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
38
+ - Bump @fluentui/react-text to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
39
+ - Bump @fluentui/react-button to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
40
+
41
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.14)
42
+
43
+ Thu, 05 May 2022 18:26:29 GMT
44
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.13..@fluentui/react-card_v9.0.0-beta.14)
45
+
46
+ ### Changes
47
+
48
+ - 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)
49
+ - Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
50
+ - Bump @fluentui/react-tabster to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
51
+ - Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
52
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
53
+ - Bump @fluentui/react-text to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
54
+ - Bump @fluentui/react-button to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
55
+
7
56
  ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.13)
8
57
 
9
- Wed, 04 May 2022 13:24:06 GMT
58
+ Wed, 04 May 2022 13:26:38 GMT
10
59
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.12..@fluentui/react-card_v9.0.0-beta.13)
11
60
 
12
61
  ### Changes
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
@@ -10,27 +10,13 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
10
10
  */
11
11
  export declare const Card: ForwardRefComponent<CardProps>;
12
12
 
13
- /**
14
- * @deprecated Use `cardClassNames.root` instead.
15
- */
16
- export declare const cardClassName = "fui-Card";
17
-
18
13
  export declare const cardClassNames: SlotClassNames<CardSlots>;
19
14
 
20
- export declare type CardCommons = {
21
- appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
22
- };
23
-
24
15
  /**
25
16
  * Component to render Button actions in a Card component.
26
17
  */
27
18
  export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
28
19
 
29
- /**
30
- * @deprecated Use `cardFooterClassNames.root` instead.
31
- */
32
- export declare const cardFooterClassName = "fui-CardFooter";
33
-
34
20
  export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
35
21
 
36
22
  /**
@@ -53,11 +39,6 @@ export declare type CardFooterState = ComponentState<CardFooterSlots>;
53
39
  */
54
40
  export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
55
41
 
56
- /**
57
- * @deprecated Use `cardHeaderClassNames.root` instead.
58
- */
59
- export declare const cardHeaderClassName = "fui-CardHeader";
60
-
61
42
  export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
62
43
 
63
44
  /**
@@ -84,11 +65,6 @@ export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
84
65
  */
85
66
  export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
86
67
 
87
- /**
88
- * @deprecated Use `cardPreviewClassNames.root` instead.
89
- */
90
- export declare const cardPreviewClassName = "fui-CardPreview";
91
-
92
68
  export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
93
69
 
94
70
  /**
@@ -109,7 +85,30 @@ export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
109
85
  /**
110
86
  * Card Props
111
87
  */
112
- export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
88
+ export declare type CardProps = ComponentProps<CardSlots> & {
89
+ appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
90
+ /**
91
+ * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.
92
+ *
93
+ * `off`
94
+ * The card will not focusable.
95
+ *
96
+ * `no-tab`
97
+ * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
98
+ * pressing the Escape key.
99
+ *
100
+ * `tab-exit`
101
+ * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
102
+ * the Tab key on the last inner element.
103
+ *
104
+ * `tab-only`
105
+ * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
106
+ * after the last inner element.
107
+ *
108
+ * @defaultvalue off
109
+ */
110
+ focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
111
+ };
113
112
 
114
113
  export declare type CardSlots = {
115
114
  root: Slot<'div'>;
@@ -118,7 +117,7 @@ export declare type CardSlots = {
118
117
  /**
119
118
  * State used in rendering Card
120
119
  */
121
- export declare type CardState = ComponentState<CardSlots> & CardCommons;
120
+ export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance'>>;
122
121
 
123
122
  /**
124
123
  * Render the final JSX of Card
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\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"]}
package/lib/components/Card/useCard.js CHANGED
@@ -11,12 +11,23 @@ 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': 'limited-trap-focus',
21
+ 'tab-exit': 'limited',
22
+ 'tab-only': 'unlimited'
23
+ };
24
+ const groupperAttrs = useFocusableGroup({
25
+ tabBehavior: focusMap[focusMode]
26
+ });
27
+ const focusAttrs = focusMode !== 'off' ? {
28
+ tabIndex: 0,
29
+ ...groupperAttrs
30
+ } : null;
20
31
  return {
21
32
  appearance,
22
33
  components: {
@@ -25,7 +36,7 @@ export const useCard_unstable = (props, ref) => {
25
36
  root: getNativeElementProps(props.as || 'div', {
26
37
  ref,
27
38
  role: 'group',
28
- ...groupperAttrs,
39
+ ...focusAttrs,
29
40
  ...props
30
41
  })
31
42
  };
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,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;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,UAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAJtB,GAAP;AAWD,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': '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\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/"}