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

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 (10) hide show
  1. package/CHANGELOG.json +52 -1
  2. package/CHANGELOG.md +17 -2
  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-commonjs/components/Card/useCard.js +13 -4
  9. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  10. package/package.json +8 -7
package/CHANGELOG.json CHANGED
@@ -2,7 +2,58 @@
2
2
  "name": "@fluentui/react-card",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 04 May 2022 13:24:06 GMT",
5
+ "date": "Thu, 05 May 2022 18:24:36 GMT",
6
+ "tag": "@fluentui/react-card_v9.0.0-beta.14",
7
+ "version": "9.0.0-beta.14",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "39736248+andrefcdias@users.noreply.github.com",
12
+ "package": "@fluentui/react-card",
13
+ "commit": "6f5126ab390def986bda1c95c1540c20e8b0ddd9",
14
+ "comment": "Added new `focusMode` property to control the focus behavior inside of the component"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-card",
19
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
20
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-card",
25
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.9",
26
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-card",
31
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
32
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-card",
37
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
38
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-card",
43
+ "comment": "Bump @fluentui/react-text to v9.0.0-rc.8",
44
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-card",
49
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.9",
50
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
51
+ }
52
+ ]
53
+ }
54
+ },
55
+ {
56
+ "date": "Wed, 04 May 2022 13:26:38 GMT",
6
57
  "tag": "@fluentui/react-card_v9.0.0-beta.13",
7
58
  "version": "9.0.0-beta.13",
8
59
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,27 @@
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 Thu, 05 May 2022 18:24:36 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.14)
8
+
9
+ Thu, 05 May 2022 18:24:36 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.13..@fluentui/react-card_v9.0.0-beta.14)
11
+
12
+ ### Changes
13
+
14
+ - 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)
15
+ - Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
16
+ - Bump @fluentui/react-tabster to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
17
+ - Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
18
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
19
+ - Bump @fluentui/react-text to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
20
+ - Bump @fluentui/react-button to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
21
+
7
22
  ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.13)
8
23
 
9
- Wed, 04 May 2022 13:24:06 GMT
24
+ Wed, 04 May 2022 13:26:38 GMT
10
25
  [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
26
 
12
27
  ### 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
@@ -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-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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-card",
3
- "version": "9.0.0-beta.13",
3
+ "version": "9.0.0-beta.14",
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": "9.0.0-beta.4",
33
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.5",
33
34
  "@fluentui/scripts": "^1.0.0",
34
- "@fluentui/react-text": "9.0.0-rc.7",
35
- "@fluentui/react-button": "9.0.0-rc.8"
35
+ "@fluentui/react-text": "9.0.0-rc.8",
36
+ "@fluentui/react-button": "9.0.0-rc.9"
36
37
  },
37
38
  "dependencies": {
38
39
  "@griffel/react": "1.0.3",
39
- "@fluentui/react-utilities": "9.0.0-rc.7",
40
- "@fluentui/react-tabster": "9.0.0-rc.8",
41
- "@fluentui/react-theme": "9.0.0-rc.6",
40
+ "@fluentui/react-utilities": "9.0.0-rc.8",
41
+ "@fluentui/react-tabster": "9.0.0-rc.9",
42
+ "@fluentui/react-theme": "9.0.0-rc.7",
42
43
  "tslib": "^2.1.0"
43
44
  },
44
45
  "peerDependencies": {