@fluentui/react-card 0.0.0-nightly-20221208-0423.1 → 0.0.0-nightly-20221212-0422.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 (15) hide show
  1. package/CHANGELOG.json +15 -15
  2. package/CHANGELOG.md +10 -10
  3. package/lib/components/Card/useCard.js +1 -7
  4. package/lib/components/Card/useCard.js.map +1 -1
  5. package/lib/components/Card/useCardSelectable.js +15 -19
  6. package/lib/components/Card/useCardSelectable.js.map +1 -1
  7. package/lib/components/CardPreview/useCardPreview.js +9 -4
  8. package/lib/components/CardPreview/useCardPreview.js.map +1 -1
  9. package/lib-commonjs/components/Card/useCard.js +1 -7
  10. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  11. package/lib-commonjs/components/Card/useCardSelectable.js +14 -18
  12. package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
  13. package/lib-commonjs/components/CardPreview/useCardPreview.js +9 -4
  14. package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
  15. package/package.json +7 -7
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-card",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 08 Dec 2022 04:32:00 GMT",
6
- "tag": "@fluentui/react-card_v0.0.0-nightly-20221208-0423.1",
7
- "version": "0.0.0-nightly-20221208-0423.1",
5
+ "date": "Mon, 12 Dec 2022 04:29:39 GMT",
6
+ "tag": "@fluentui/react-card_v0.0.0-nightly-20221212-0422.1",
7
+ "version": "0.0.0-nightly-20221212-0422.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,38 +16,38 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-card",
19
- "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20221208-0423.1",
20
- "commit": "7ab2905f4262fc19f884fc88c39371c07aaa8048"
19
+ "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20221212-0422.1",
20
+ "commit": "21e5bba478f74050c2537880673ee9042a415971"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-card",
25
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221208-0423.1",
26
- "commit": "7ab2905f4262fc19f884fc88c39371c07aaa8048"
25
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221212-0422.1",
26
+ "commit": "21e5bba478f74050c2537880673ee9042a415971"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-card",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221208-0423.1",
32
- "commit": "7ab2905f4262fc19f884fc88c39371c07aaa8048"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221212-0422.1",
32
+ "commit": "21e5bba478f74050c2537880673ee9042a415971"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-card",
37
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221208-0423.1",
38
- "commit": "7ab2905f4262fc19f884fc88c39371c07aaa8048"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221212-0422.1",
38
+ "commit": "21e5bba478f74050c2537880673ee9042a415971"
39
39
  },
40
40
  {
41
41
  "author": "beachball",
42
42
  "package": "@fluentui/react-card",
43
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221208-0423.1",
44
- "commit": "7ab2905f4262fc19f884fc88c39371c07aaa8048"
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221212-0422.1",
44
+ "commit": "21e5bba478f74050c2537880673ee9042a415971"
45
45
  },
46
46
  {
47
47
  "author": "beachball",
48
48
  "package": "@fluentui/react-card",
49
- "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20221208-0423.1",
50
- "commit": "7ab2905f4262fc19f884fc88c39371c07aaa8048"
49
+ "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20221212-0422.1",
50
+ "commit": "21e5bba478f74050c2537880673ee9042a415971"
51
51
  }
52
52
  ]
53
53
  }
package/CHANGELOG.md CHANGED
@@ -1,23 +1,23 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Thu, 08 Dec 2022 04:32:00 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 12 Dec 2022 04:29:39 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20221208-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20221208-0423.1)
7
+ ## [0.0.0-nightly-20221212-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20221212-0422.1)
8
8
 
9
- Thu, 08 Dec 2022 04:32:00 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.34..@fluentui/react-card_v0.0.0-nightly-20221208-0423.1)
9
+ Mon, 12 Dec 2022 04:29:39 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.34..@fluentui/react-card_v0.0.0-nightly-20221212-0422.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20221208-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7ab2905f4262fc19f884fc88c39371c07aaa8048) by beachball)
16
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20221208-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7ab2905f4262fc19f884fc88c39371c07aaa8048) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20221208-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7ab2905f4262fc19f884fc88c39371c07aaa8048) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20221208-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7ab2905f4262fc19f884fc88c39371c07aaa8048) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221208-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7ab2905f4262fc19f884fc88c39371c07aaa8048) by beachball)
20
- - Bump @fluentui/react-button to v0.0.0-nightly-20221208-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7ab2905f4262fc19f884fc88c39371c07aaa8048) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20221212-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/21e5bba478f74050c2537880673ee9042a415971) by beachball)
16
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20221212-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/21e5bba478f74050c2537880673ee9042a415971) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20221212-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/21e5bba478f74050c2537880673ee9042a415971) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20221212-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/21e5bba478f74050c2537880673ee9042a415971) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221212-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/21e5bba478f74050c2537880673ee9042a415971) by beachball)
20
+ - Bump @fluentui/react-button to v0.0.0-nightly-20221212-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/21e5bba478f74050c2537880673ee9042a415971) by beachball)
21
21
 
22
22
  ## [9.0.0-beta.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.34)
23
23
 
package/lib/components/Card/useCard.js CHANGED
@@ -58,7 +58,6 @@ export const useCard_unstable = (props, ref) => {
58
58
  const {
59
59
  selectable,
60
60
  selected,
61
- selectableRef,
62
61
  selectableCardProps,
63
62
  selectFocused,
64
63
  checkboxSlot
@@ -67,11 +66,6 @@ export const useCard_unstable = (props, ref) => {
67
66
  referenceLabel
68
67
  }, cardBaseRef);
69
68
  const cardRef = useMergedRefs(cardBaseRef, ref);
70
- const floatingActionSlot = React.useMemo(() => resolveShorthand(floatingAction, {
71
- defaultProps: {
72
- ref: selectableRef
73
- }
74
- }), [floatingAction, selectableRef]);
75
69
  const {
76
70
  interactive,
77
71
  focusAttributes
@@ -102,7 +96,7 @@ export const useCard_unstable = (props, ref) => {
102
96
  ...props,
103
97
  ...selectableCardProps
104
98
  }),
105
- floatingAction: floatingActionSlot,
99
+ floatingAction: resolveShorthand(floatingAction),
106
100
  checkbox: checkboxSlot
107
101
  };
108
102
  };
package/lib/components/Card/useCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n const interactive = ([\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\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 the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium', floatingAction } = props;\n\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n const cardBaseRef = useFocusWithin<HTMLDivElement>();\n const { selectable, selected, selectableRef, selectableCardProps, selectFocused, checkboxSlot } = useCardSelectable(\n props,\n { referenceId, referenceLabel },\n cardBaseRef,\n );\n\n const cardRef = useMergedRefs(cardBaseRef, ref);\n\n const floatingActionSlot = React.useMemo(\n () =>\n resolveShorthand(floatingAction, {\n defaultProps: {\n ref: selectableRef,\n },\n }),\n [floatingAction, selectableRef],\n );\n\n const { interactive, focusAttributes } = useCardInteractive(props);\n\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel,\n },\n\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input',\n },\n\n root: getNativeElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...focusAttributes,\n ...props,\n ...selectableCardProps,\n }),\n\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AACA,SAAS,iBAAT,EAA4B,cAA5B,QAAkD,yBAAlD;AAGA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,uBAAT,QAAwC,eAAxC;AAEA,MAAM,QAAQ,GAAG;EACf,GAAG,EAAE,SADU;EAEf,UAAU,oBAFK;EAGf,YAAY,SAHG;EAIf,YAAY;AAJG,CAAjB;AAOA;;;;;;;AAOG;;AACH,MAAM,kBAAkB,GAAG,CAAC;EAAE,SAAS,GAAG,KAAd;EAAqB,GAAG;AAAxB,CAAD,KAA+C;EACxE,MAAM,WAAW,GAAI,CACnB,SADmB,EAEnB,eAFmB,EAGnB,WAHmB,EAInB,aAJmB,EAKnB,aALmB,EAMnB,eANmB,EAOnB,cAPmB,EAQnB,YARmB,EASnB,aATmB,EAUnB,WAVmB,EAW6B,IAX7B,CAWkC,IAAI,IAAI,KAAK,CAAC,IAAD,CAX/C,CAArB;EAaA,MAAM,aAAa,GAAG,iBAAiB,CAAC;IACtC,WAAW,EAAE,QAAQ,CAAC,WAAW,GAAG,QAAH,GAAc,SAA1B;EADiB,CAAD,CAAvC;EAIA,MAAM,0BAA0B,GAAG,EACjC,GAAG,aAD8B;IAEjC,QAAQ,EAAE;EAFuB,CAAnC;EAKA,OAAO;IACL,WADK;IAEL,eAAe,EAAE,SAAS,KAAK,KAAd,GAAsB,IAAtB,GAA6B;EAFzC,CAAP;AAID,CA3BD;AA6BA;;;;;;;;AAQG;;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAAgE;EAC9F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,WAAW,GAAG,UAAvC;IAAmD,IAAI,GAAG,QAA1D;IAAoE;EAApE,IAAuF,KAA7F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,uBAAuB,CAAC,mBAAxB,CAA4C,WAA3D,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAe,uBAAuB,CAAC,mBAAxB,CAA4C,WAA3D,CAA5C;EAEA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,mBAAxB;IAA6C,aAA7C;IAA4D;EAA5D,IAA6E,iBAAiB,CAClG,KADkG,EAElG;IAAE,WAAF;IAAe;EAAf,CAFkG,EAGlG,WAHkG,CAApG;EAMA,MAAM,OAAO,GAAG,aAAa,CAAC,WAAD,EAAc,GAAd,CAA7B;EAEA,MAAM;IAAE,WAAF;IAAe;EAAf,IAAmC,kBAAkB,CAAC,KAAD,CAA3D;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAIL,WAJK;IAKL,UALK;IAML,aANK;IAOL,QAPK;IAQL,mBAAmB,EAAE;MACnB,cADmB;MAEnB,WAFmB;MAGnB,cAHmB;MAInB;IAJmB,CARhB;IAeL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,cAAc,EAAE,KAFN;MAGV,QAAQ,EAAE;IAHA,CAfP;IAqBL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,OAD4B;MAEjC,IAAI,EAAE,OAF2B;MAGjC,GAAG,eAH8B;MAIjC,GAAG,KAJ8B;MAKjC,GAAG;IAL8B,CAAR,CArBtB;IA6BL,cAAc,EAAE,gBAAgB,CAAC,cAAD,CA7B3B;IA8BL,QAAQ,EAAE;EA9BL,CAAP;AAgCD,CAjDM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n const interactive = ([\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\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 the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium', floatingAction } = props;\n\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n const cardBaseRef = useFocusWithin<HTMLDivElement>();\n const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot } = useCardSelectable(\n props,\n { referenceId, referenceLabel },\n cardBaseRef,\n );\n\n const cardRef = useMergedRefs(cardBaseRef, ref);\n\n const { interactive, focusAttributes } = useCardInteractive(props);\n\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel,\n },\n\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input',\n },\n\n root: getNativeElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...focusAttributes,\n ...props,\n ...selectableCardProps,\n }),\n\n floatingAction: resolveShorthand(floatingAction),\n checkbox: checkboxSlot,\n };\n};\n"],"sourceRoot":""}
package/lib/components/Card/useCardSelectable.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { Enter, Space } from '@fluentui/keyboard-keys';
3
- import { resolveShorthand } from '@fluentui/react-utilities';
3
+ import { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
4
4
  import { useFocusFinders } from '@fluentui/react-tabster';
5
5
  /**
6
6
  * @internal
@@ -15,40 +15,37 @@ import { useFocusFinders } from '@fluentui/react-tabster';
15
15
  * @param ref - reference to the root element of Card
16
16
  */
17
17
 
18
- export const useCardSelectable = (props, a11yProps, cardRef) => {
18
+ export const useCardSelectable = (props, {
19
+ referenceLabel,
20
+ referenceId
21
+ }, cardRef) => {
19
22
  const {
20
23
  checkbox = {},
21
24
  selected,
22
25
  defaultSelected,
23
26
  onSelectionChange,
24
- floatingAction
27
+ floatingAction,
28
+ onClick,
29
+ onKeyDown
25
30
  } = props;
26
- const {
27
- referenceLabel,
28
- referenceId
29
- } = a11yProps;
30
31
  const {
31
32
  findAllFocusable
32
33
  } = useFocusFinders();
33
34
  const checkboxRef = React.useRef(null);
34
- const selectableRef = React.useRef(null);
35
35
  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');
36
36
  const [isCardSelected, setIsCardSelected] = React.useState(false);
37
37
  const [isSelectFocused, setIsSelectFocused] = React.useState(false);
38
38
  const shouldRestrictTriggerAction = React.useCallback(event => {
39
- var _a;
40
-
41
39
  if (!cardRef.current) {
42
40
  return false;
43
41
  }
44
42
 
45
43
  const focusableElements = findAllFocusable(cardRef.current);
46
44
  const target = event.target;
47
- const isTargetInFocusableGroup = focusableElements.some(element => element.contains(target));
48
- const isTargetInCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
49
- const isTargetInSelectSlot = (_a = selectableRef === null || selectableRef === void 0 ? void 0 : selectableRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
50
- return isTargetInFocusableGroup && !isTargetInCheckboxSlot && !isTargetInSelectSlot;
51
- }, [cardRef, findAllFocusable, selectableRef]);
45
+ const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
46
+ const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
47
+ return isElementInFocusableGroup && !isCheckboxSlot;
48
+ }, [cardRef, findAllFocusable]);
52
49
  const onChangeHandler = React.useCallback(event => {
53
50
  if (shouldRestrictTriggerAction(event)) {
54
51
  return;
@@ -100,17 +97,16 @@ export const useCardSelectable = (props, a11yProps, cardRef) => {
100
97
  }
101
98
 
102
99
  return {
103
- onClick: onChangeHandler,
104
- onKeyDown: onKeyDownHandler
100
+ onClick: mergeCallbacks(onClick, onChangeHandler),
101
+ onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
105
102
  };
106
- }, [isSelectable, onChangeHandler, onKeyDownHandler]);
103
+ }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
107
104
  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
108
105
  return {
109
106
  selected: isCardSelected,
110
107
  selectable: isSelectable,
111
108
  selectFocused: isSelectFocused,
112
109
  selectableCardProps,
113
- selectableRef,
114
110
  checkboxSlot
115
111
  };
116
112
  };
package/lib/components/Card/useCardSelectable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n props: CardProps,\n a11yProps: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n cardRef: React.RefObject<HTMLDivElement>,\n) => {\n const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction } = props;\n const { referenceLabel, referenceId } = a11yProps;\n\n const { findAllFocusable } = useFocusFinders();\n\n const checkboxRef = React.useRef<HTMLInputElement>(null);\n const selectableRef = React.useRef<HTMLDivElement>(null);\n\n const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n const [isCardSelected, setIsCardSelected] = React.useState(false);\n const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n const shouldRestrictTriggerAction = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (!cardRef.current) {\n return false;\n }\n\n const focusableElements = findAllFocusable(cardRef.current);\n const target = event.target as HTMLElement;\n const isTargetInFocusableGroup = focusableElements.some(element => element.contains(target));\n const isTargetInCheckboxSlot = checkboxRef?.current === target;\n const isTargetInSelectSlot = selectableRef?.current?.contains(target);\n\n return isTargetInFocusableGroup && !isTargetInCheckboxSlot && !isTargetInSelectSlot;\n },\n [cardRef, findAllFocusable, selectableRef],\n );\n\n const onChangeHandler = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (shouldRestrictTriggerAction(event)) {\n return;\n }\n\n const newCheckedValue = !isCardSelected;\n\n setIsCardSelected(newCheckedValue);\n\n if (onSelectionChange) {\n onSelectionChange(event, {\n selected: newCheckedValue,\n });\n }\n },\n [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n );\n\n const onKeyDownHandler = React.useCallback(\n (event: React.KeyboardEvent<HTMLElement>) => {\n if ([Enter, Space].includes(event.key)) {\n event.preventDefault();\n onChangeHandler(event);\n }\n },\n [onChangeHandler],\n );\n\n const checkboxSlot = React.useMemo(() => {\n if (!isSelectable || !!floatingAction) {\n return;\n }\n\n const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n if (referenceId) {\n selectableCheckboxProps['aria-labelledby'] = referenceId;\n } else if (referenceLabel) {\n selectableCheckboxProps['aria-label'] = referenceLabel;\n }\n\n return resolveShorthand(checkbox, {\n defaultProps: {\n ref: checkboxRef,\n type: 'checkbox',\n checked: isCardSelected,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n onFocus: () => setIsSelectFocused(true),\n onBlur: () => setIsSelectFocused(false),\n ...selectableCheckboxProps,\n },\n });\n }, [isSelectable, floatingAction, referenceId, referenceLabel, checkbox, isCardSelected, onChangeHandler]);\n\n const selectableCardProps = React.useMemo(() => {\n if (!isSelectable) {\n return null;\n }\n\n return {\n onClick: onChangeHandler,\n onKeyDown: onKeyDownHandler,\n };\n }, [isSelectable, onChangeHandler, onKeyDownHandler]);\n\n React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n defaultSelected,\n selected,\n setIsCardSelected,\n ]);\n\n return {\n selected: isCardSelected,\n selectable: isSelectable,\n selectFocused: isSelectFocused,\n selectableCardProps,\n selectableRef,\n checkboxSlot,\n };\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n props: CardProps,\n { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n cardRef: React.RefObject<HTMLDivElement>,\n) => {\n const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n const { findAllFocusable } = useFocusFinders();\n\n const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n const [isCardSelected, setIsCardSelected] = React.useState(false);\n const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n const shouldRestrictTriggerAction = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (!cardRef.current) {\n return false;\n }\n\n const focusableElements = findAllFocusable(cardRef.current);\n const target = event.target as HTMLElement;\n const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n const isCheckboxSlot = checkboxRef?.current === target;\n\n return isElementInFocusableGroup && !isCheckboxSlot;\n },\n [cardRef, findAllFocusable],\n );\n\n const onChangeHandler = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (shouldRestrictTriggerAction(event)) {\n return;\n }\n\n const newCheckedValue = !isCardSelected;\n\n setIsCardSelected(newCheckedValue);\n\n if (onSelectionChange) {\n onSelectionChange(event, { selected: newCheckedValue });\n }\n },\n [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n );\n\n const onKeyDownHandler = React.useCallback(\n (event: React.KeyboardEvent<HTMLElement>) => {\n if ([Enter, Space].includes(event.key)) {\n event.preventDefault();\n onChangeHandler(event);\n }\n },\n [onChangeHandler],\n );\n\n const checkboxSlot = React.useMemo(() => {\n if (!isSelectable || !!floatingAction) {\n return;\n }\n\n const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n if (referenceId) {\n selectableCheckboxProps['aria-labelledby'] = referenceId;\n } else if (referenceLabel) {\n selectableCheckboxProps['aria-label'] = referenceLabel;\n }\n\n return resolveShorthand(checkbox, {\n defaultProps: {\n ref: checkboxRef,\n type: 'checkbox',\n checked: isCardSelected,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n onFocus: () => setIsSelectFocused(true),\n onBlur: () => setIsSelectFocused(false),\n ...selectableCheckboxProps,\n },\n });\n }, [isSelectable, floatingAction, referenceId, referenceLabel, checkbox, isCardSelected, onChangeHandler]);\n\n const selectableCardProps = React.useMemo(() => {\n if (!isSelectable) {\n return null;\n }\n\n return {\n onClick: mergeCallbacks(onClick, onChangeHandler),\n onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n };\n }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n defaultSelected,\n selected,\n setIsCardSelected,\n ]);\n\n return {\n selected: isCardSelected,\n selectable: isSelectable,\n selectFocused: isSelectFocused,\n selectableCardProps,\n checkboxSlot,\n };\n};\n"],"sourceRoot":""}
package/lib/components/CardPreview/useCardPreview.js CHANGED
@@ -19,12 +19,14 @@ export const useCardPreview_unstable = (props, ref) => {
19
19
  const {
20
20
  selectableA11yProps: {
21
21
  referenceLabel,
22
- setReferenceLabel
22
+ referenceId,
23
+ setReferenceLabel,
24
+ setReferenceId
23
25
  }
24
26
  } = useCardContext_unstable();
25
27
  const previewRef = useMergedRefs(ref, React.useRef(null));
26
28
  React.useEffect(() => {
27
- if (referenceLabel) {
29
+ if (referenceLabel && referenceId) {
28
30
  return;
29
31
  }
30
32
 
@@ -33,15 +35,18 @@ export const useCardPreview_unstable = (props, ref) => {
33
35
 
34
36
  if (img) {
35
37
  const ariaLabel = img.getAttribute('aria-label');
38
+ const ariaDescribedby = img.getAttribute('aria-describedby');
36
39
 
37
- if (img.alt) {
40
+ if (ariaDescribedby) {
41
+ setReferenceId(ariaDescribedby);
42
+ } else if (img.alt) {
38
43
  setReferenceLabel(img.alt);
39
44
  } else if (ariaLabel) {
40
45
  setReferenceLabel(ariaLabel);
41
46
  }
42
47
  }
43
48
  }
44
- }, [setReferenceLabel, referenceLabel, previewRef]);
49
+ }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);
45
50
  return {
46
51
  components: {
47
52
  root: 'div',
package/lib/components/CardPreview/useCardPreview.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AAEA,SAAS,uBAAT,QAAwC,qBAAxC;AACA,SAAS,qBAAT,QAAsC,wBAAtC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE;EAAF,IAAW,KAAjB;EAEA,MAAM;IACJ,mBAAmB,EAAE;MAAE,cAAF;MAAkB;IAAlB;EADjB,IAEF,uBAAuB,EAF3B;EAGA,MAAM,UAAU,GAAG,aAAa,CAAC,GAAD,EAAM,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAN,CAAhC;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,cAAJ,EAAoB;MAClB;IACD;;IAED,IAAI,UAAU,CAAC,OAAX,IAAsB,UAAU,CAAC,OAAX,CAAmB,UAA7C,EAAyD;MACvD,MAAM,GAAG,GAAG,UAAU,CAAC,OAAX,CAAmB,UAAnB,CAA8B,aAA9B,CAA8D,IAAI,qBAAqB,CAAC,IAAI,QAA5F,CAAZ;;MAEA,IAAI,GAAJ,EAAS;QACP,MAAM,SAAS,GAAG,GAAG,CAAC,YAAJ,CAAiB,YAAjB,CAAlB;;QAEA,IAAI,GAAG,CAAC,GAAR,EAAa;UACX,iBAAiB,CAAC,GAAG,CAAC,GAAL,CAAjB;QACD,CAFD,MAEO,IAAI,SAAJ,EAAe;UACpB,iBAAiB,CAAC,SAAD,CAAjB;QACD;MACF;IACF;EACF,CAlBD,EAkBG,CAAC,iBAAD,EAAoB,cAApB,EAAoC,UAApC,CAlBH;EAoBA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,UAD4B;MAEjC,GAAG;IAF8B,CAAR,CANtB;IAUL,IAAI,EAAE,gBAAgB,CAAC,IAAD;EAVjB,CAAP;AAYD,CAxCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, setReferenceLabel },\n } = useCardContext_unstable();\n const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n React.useEffect(() => {\n if (referenceLabel) {\n return;\n }\n\n if (previewRef.current && previewRef.current.parentNode) {\n const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n if (img) {\n const ariaLabel = img.getAttribute('aria-label');\n\n if (img.alt) {\n setReferenceLabel(img.alt);\n } else if (ariaLabel) {\n setReferenceLabel(ariaLabel);\n }\n }\n }\n }, [setReferenceLabel, referenceLabel, previewRef]);\n\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n logo: resolveShorthand(logo),\n };\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AAEA,SAAS,uBAAT,QAAwC,qBAAxC;AACA,SAAS,qBAAT,QAAsC,wBAAtC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE;EAAF,IAAW,KAAjB;EAEA,MAAM;IACJ,mBAAmB,EAAE;MAAE,cAAF;MAAkB,WAAlB;MAA+B,iBAA/B;MAAkD;IAAlD;EADjB,IAEF,uBAAuB,EAF3B;EAGA,MAAM,UAAU,GAAG,aAAa,CAAC,GAAD,EAAM,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAN,CAAhC;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,cAAc,IAAI,WAAtB,EAAmC;MACjC;IACD;;IAED,IAAI,UAAU,CAAC,OAAX,IAAsB,UAAU,CAAC,OAAX,CAAmB,UAA7C,EAAyD;MACvD,MAAM,GAAG,GAAG,UAAU,CAAC,OAAX,CAAmB,UAAnB,CAA8B,aAA9B,CAA8D,IAAI,qBAAqB,CAAC,IAAI,QAA5F,CAAZ;;MAEA,IAAI,GAAJ,EAAS;QACP,MAAM,SAAS,GAAG,GAAG,CAAC,YAAJ,CAAiB,YAAjB,CAAlB;QACA,MAAM,eAAe,GAAG,GAAG,CAAC,YAAJ,CAAiB,kBAAjB,CAAxB;;QAEA,IAAI,eAAJ,EAAqB;UACnB,cAAc,CAAC,eAAD,CAAd;QACD,CAFD,MAEO,IAAI,GAAG,CAAC,GAAR,EAAa;UAClB,iBAAiB,CAAC,GAAG,CAAC,GAAL,CAAjB;QACD,CAFM,MAEA,IAAI,SAAJ,EAAe;UACpB,iBAAiB,CAAC,SAAD,CAAjB;QACD;MACF;IACF;EACF,CArBD,EAqBG,CAAC,iBAAD,EAAoB,cAApB,EAAoC,UAApC,EAAgD,WAAhD,EAA6D,cAA7D,CArBH;EAuBA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GAAG,EAAE,UAD4B;MAEjC,GAAG;IAF8B,CAAR,CANtB;IAUL,IAAI,EAAE,gBAAgB,CAAC,IAAD;EAVjB,CAAP;AAYD,CA3CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n } = useCardContext_unstable();\n const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n React.useEffect(() => {\n if (referenceLabel && referenceId) {\n return;\n }\n\n if (previewRef.current && previewRef.current.parentNode) {\n const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n if (img) {\n const ariaLabel = img.getAttribute('aria-label');\n const ariaDescribedby = img.getAttribute('aria-describedby');\n\n if (ariaDescribedby) {\n setReferenceId(ariaDescribedby);\n } else if (img.alt) {\n setReferenceLabel(img.alt);\n } else if (ariaLabel) {\n setReferenceLabel(ariaLabel);\n }\n }\n }\n }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n logo: resolveShorthand(logo),\n };\n};\n"],"sourceRoot":""}
package/lib-commonjs/components/Card/useCard.js CHANGED
@@ -70,7 +70,6 @@ const useCard_unstable = (props, ref) => {
70
70
  const {
71
71
  selectable,
72
72
  selected,
73
- selectableRef,
74
73
  selectableCardProps,
75
74
  selectFocused,
76
75
  checkboxSlot
@@ -79,11 +78,6 @@ const useCard_unstable = (props, ref) => {
79
78
  referenceLabel
80
79
  }, cardBaseRef);
81
80
  const cardRef = react_utilities_1.useMergedRefs(cardBaseRef, ref);
82
- const floatingActionSlot = React.useMemo(() => react_utilities_1.resolveShorthand(floatingAction, {
83
- defaultProps: {
84
- ref: selectableRef
85
- }
86
- }), [floatingAction, selectableRef]);
87
81
  const {
88
82
  interactive,
89
83
  focusAttributes
@@ -114,7 +108,7 @@ const useCard_unstable = (props, ref) => {
114
108
  ...props,
115
109
  ...selectableCardProps
116
110
  }),
117
- floatingAction: floatingActionSlot,
111
+ floatingAction: react_utilities_1.resolveShorthand(floatingAction),
118
112
  checkbox: checkboxSlot
119
113
  };
120
114
  };
package/lib-commonjs/components/Card/useCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n const interactive = ([\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\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 the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium', floatingAction } = props;\n\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n const cardBaseRef = useFocusWithin<HTMLDivElement>();\n const { selectable, selected, selectableRef, selectableCardProps, selectFocused, checkboxSlot } = useCardSelectable(\n props,\n { referenceId, referenceLabel },\n cardBaseRef,\n );\n\n const cardRef = useMergedRefs(cardBaseRef, ref);\n\n const floatingActionSlot = React.useMemo(\n () =>\n resolveShorthand(floatingAction, {\n defaultProps: {\n ref: selectableRef,\n },\n }),\n [floatingAction, selectableRef],\n );\n\n const { interactive, focusAttributes } = useCardInteractive(props);\n\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel,\n },\n\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input',\n },\n\n root: getNativeElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...focusAttributes,\n ...props,\n ...selectableCardProps,\n }),\n\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n const interactive = ([\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd',\n ] as (keyof React.HTMLAttributes<HTMLElement>)[]).some(prop => props[prop]);\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n });\n\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0,\n };\n\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n };\n};\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 the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n const { appearance = 'filled', orientation = 'vertical', size = 'medium', floatingAction } = props;\n\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n const cardBaseRef = useFocusWithin<HTMLDivElement>();\n const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot } = useCardSelectable(\n props,\n { referenceId, referenceLabel },\n cardBaseRef,\n );\n\n const cardRef = useMergedRefs(cardBaseRef, ref);\n\n const { interactive, focusAttributes } = useCardInteractive(props);\n\n return {\n appearance,\n orientation,\n size,\n interactive,\n selectable,\n selectFocused,\n selected,\n selectableA11yProps: {\n setReferenceId,\n referenceId,\n referenceLabel,\n setReferenceLabel,\n },\n\n components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input',\n },\n\n root: getNativeElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...focusAttributes,\n ...props,\n ...selectableCardProps,\n }),\n\n floatingAction: resolveShorthand(floatingAction),\n checkbox: checkboxSlot,\n };\n};\n"],"sourceRoot":""}
package/lib-commonjs/components/Card/useCardSelectable.js CHANGED
@@ -26,40 +26,37 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
26
26
  */
27
27
 
28
28
 
29
- const useCardSelectable = (props, a11yProps, cardRef) => {
29
+ const useCardSelectable = (props, {
30
+ referenceLabel,
31
+ referenceId
32
+ }, cardRef) => {
30
33
  const {
31
34
  checkbox = {},
32
35
  selected,
33
36
  defaultSelected,
34
37
  onSelectionChange,
35
- floatingAction
38
+ floatingAction,
39
+ onClick,
40
+ onKeyDown
36
41
  } = props;
37
- const {
38
- referenceLabel,
39
- referenceId
40
- } = a11yProps;
41
42
  const {
42
43
  findAllFocusable
43
44
  } = react_tabster_1.useFocusFinders();
44
45
  const checkboxRef = React.useRef(null);
45
- const selectableRef = React.useRef(null);
46
46
  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');
47
47
  const [isCardSelected, setIsCardSelected] = React.useState(false);
48
48
  const [isSelectFocused, setIsSelectFocused] = React.useState(false);
49
49
  const shouldRestrictTriggerAction = React.useCallback(event => {
50
- var _a;
51
-
52
50
  if (!cardRef.current) {
53
51
  return false;
54
52
  }
55
53
 
56
54
  const focusableElements = findAllFocusable(cardRef.current);
57
55
  const target = event.target;
58
- const isTargetInFocusableGroup = focusableElements.some(element => element.contains(target));
59
- const isTargetInCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
60
- const isTargetInSelectSlot = (_a = selectableRef === null || selectableRef === void 0 ? void 0 : selectableRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
61
- return isTargetInFocusableGroup && !isTargetInCheckboxSlot && !isTargetInSelectSlot;
62
- }, [cardRef, findAllFocusable, selectableRef]);
56
+ const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
57
+ const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
58
+ return isElementInFocusableGroup && !isCheckboxSlot;
59
+ }, [cardRef, findAllFocusable]);
63
60
  const onChangeHandler = React.useCallback(event => {
64
61
  if (shouldRestrictTriggerAction(event)) {
65
62
  return;
@@ -111,17 +108,16 @@ const useCardSelectable = (props, a11yProps, cardRef) => {
111
108
  }
112
109
 
113
110
  return {
114
- onClick: onChangeHandler,
115
- onKeyDown: onKeyDownHandler
111
+ onClick: react_utilities_1.mergeCallbacks(onClick, onChangeHandler),
112
+ onKeyDown: react_utilities_1.mergeCallbacks(onKeyDown, onKeyDownHandler)
116
113
  };
117
- }, [isSelectable, onChangeHandler, onKeyDownHandler]);
114
+ }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
118
115
  React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
119
116
  return {
120
117
  selected: isCardSelected,
121
118
  selectable: isSelectable,
122
119
  selectFocused: isSelectFocused,
123
120
  selectableCardProps,
124
- selectableRef,
125
121
  checkboxSlot
126
122
  };
127
123
  };
package/lib-commonjs/components/Card/useCardSelectable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n props: CardProps,\n a11yProps: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n cardRef: React.RefObject<HTMLDivElement>,\n) => {\n const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction } = props;\n const { referenceLabel, referenceId } = a11yProps;\n\n const { findAllFocusable } = useFocusFinders();\n\n const checkboxRef = React.useRef<HTMLInputElement>(null);\n const selectableRef = React.useRef<HTMLDivElement>(null);\n\n const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n const [isCardSelected, setIsCardSelected] = React.useState(false);\n const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n const shouldRestrictTriggerAction = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (!cardRef.current) {\n return false;\n }\n\n const focusableElements = findAllFocusable(cardRef.current);\n const target = event.target as HTMLElement;\n const isTargetInFocusableGroup = focusableElements.some(element => element.contains(target));\n const isTargetInCheckboxSlot = checkboxRef?.current === target;\n const isTargetInSelectSlot = selectableRef?.current?.contains(target);\n\n return isTargetInFocusableGroup && !isTargetInCheckboxSlot && !isTargetInSelectSlot;\n },\n [cardRef, findAllFocusable, selectableRef],\n );\n\n const onChangeHandler = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (shouldRestrictTriggerAction(event)) {\n return;\n }\n\n const newCheckedValue = !isCardSelected;\n\n setIsCardSelected(newCheckedValue);\n\n if (onSelectionChange) {\n onSelectionChange(event, {\n selected: newCheckedValue,\n });\n }\n },\n [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n );\n\n const onKeyDownHandler = React.useCallback(\n (event: React.KeyboardEvent<HTMLElement>) => {\n if ([Enter, Space].includes(event.key)) {\n event.preventDefault();\n onChangeHandler(event);\n }\n },\n [onChangeHandler],\n );\n\n const checkboxSlot = React.useMemo(() => {\n if (!isSelectable || !!floatingAction) {\n return;\n }\n\n const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n if (referenceId) {\n selectableCheckboxProps['aria-labelledby'] = referenceId;\n } else if (referenceLabel) {\n selectableCheckboxProps['aria-label'] = referenceLabel;\n }\n\n return resolveShorthand(checkbox, {\n defaultProps: {\n ref: checkboxRef,\n type: 'checkbox',\n checked: isCardSelected,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n onFocus: () => setIsSelectFocused(true),\n onBlur: () => setIsSelectFocused(false),\n ...selectableCheckboxProps,\n },\n });\n }, [isSelectable, floatingAction, referenceId, referenceLabel, checkbox, isCardSelected, onChangeHandler]);\n\n const selectableCardProps = React.useMemo(() => {\n if (!isSelectable) {\n return null;\n }\n\n return {\n onClick: onChangeHandler,\n onKeyDown: onKeyDownHandler,\n };\n }, [isSelectable, onChangeHandler, onKeyDownHandler]);\n\n React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n defaultSelected,\n selected,\n setIsCardSelected,\n ]);\n\n return {\n selected: isCardSelected,\n selectable: isSelectable,\n selectFocused: isSelectFocused,\n selectableCardProps,\n selectableRef,\n checkboxSlot,\n };\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n props: CardProps,\n { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n cardRef: React.RefObject<HTMLDivElement>,\n) => {\n const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n const { findAllFocusable } = useFocusFinders();\n\n const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n const [isCardSelected, setIsCardSelected] = React.useState(false);\n const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n const shouldRestrictTriggerAction = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (!cardRef.current) {\n return false;\n }\n\n const focusableElements = findAllFocusable(cardRef.current);\n const target = event.target as HTMLElement;\n const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n const isCheckboxSlot = checkboxRef?.current === target;\n\n return isElementInFocusableGroup && !isCheckboxSlot;\n },\n [cardRef, findAllFocusable],\n );\n\n const onChangeHandler = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (shouldRestrictTriggerAction(event)) {\n return;\n }\n\n const newCheckedValue = !isCardSelected;\n\n setIsCardSelected(newCheckedValue);\n\n if (onSelectionChange) {\n onSelectionChange(event, { selected: newCheckedValue });\n }\n },\n [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n );\n\n const onKeyDownHandler = React.useCallback(\n (event: React.KeyboardEvent<HTMLElement>) => {\n if ([Enter, Space].includes(event.key)) {\n event.preventDefault();\n onChangeHandler(event);\n }\n },\n [onChangeHandler],\n );\n\n const checkboxSlot = React.useMemo(() => {\n if (!isSelectable || !!floatingAction) {\n return;\n }\n\n const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n if (referenceId) {\n selectableCheckboxProps['aria-labelledby'] = referenceId;\n } else if (referenceLabel) {\n selectableCheckboxProps['aria-label'] = referenceLabel;\n }\n\n return resolveShorthand(checkbox, {\n defaultProps: {\n ref: checkboxRef,\n type: 'checkbox',\n checked: isCardSelected,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n onFocus: () => setIsSelectFocused(true),\n onBlur: () => setIsSelectFocused(false),\n ...selectableCheckboxProps,\n },\n });\n }, [isSelectable, floatingAction, referenceId, referenceLabel, checkbox, isCardSelected, onChangeHandler]);\n\n const selectableCardProps = React.useMemo(() => {\n if (!isSelectable) {\n return null;\n }\n\n return {\n onClick: mergeCallbacks(onClick, onChangeHandler),\n onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n };\n }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n React.useEffect(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n defaultSelected,\n selected,\n setIsCardSelected,\n ]);\n\n return {\n selected: isCardSelected,\n selectable: isSelectable,\n selectFocused: isSelectFocused,\n selectableCardProps,\n checkboxSlot,\n };\n};\n"],"sourceRoot":""}
package/lib-commonjs/components/CardPreview/useCardPreview.js CHANGED
@@ -30,12 +30,14 @@ const useCardPreview_unstable = (props, ref) => {
30
30
  const {
31
31
  selectableA11yProps: {
32
32
  referenceLabel,
33
- setReferenceLabel
33
+ referenceId,
34
+ setReferenceLabel,
35
+ setReferenceId
34
36
  }
35
37
  } = CardContext_1.useCardContext_unstable();
36
38
  const previewRef = react_utilities_1.useMergedRefs(ref, React.useRef(null));
37
39
  React.useEffect(() => {
38
- if (referenceLabel) {
40
+ if (referenceLabel && referenceId) {
39
41
  return;
40
42
  }
41
43
 
@@ -44,15 +46,18 @@ const useCardPreview_unstable = (props, ref) => {
44
46
 
45
47
  if (img) {
46
48
  const ariaLabel = img.getAttribute('aria-label');
49
+ const ariaDescribedby = img.getAttribute('aria-describedby');
47
50
 
48
- if (img.alt) {
51
+ if (ariaDescribedby) {
52
+ setReferenceId(ariaDescribedby);
53
+ } else if (img.alt) {
49
54
  setReferenceLabel(img.alt);
50
55
  } else if (ariaLabel) {
51
56
  setReferenceLabel(ariaLabel);
52
57
  }
53
58
  }
54
59
  }
55
- }, [setReferenceLabel, referenceLabel, previewRef]);
60
+ }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);
56
61
  return {
57
62
  components: {
58
63
  root: 'div',
package/lib-commonjs/components/CardPreview/useCardPreview.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE;EAAF,IAAW,KAAjB;EAEA,MAAM;IACJ,mBAAmB,EAAE;MAAE,cAAF;MAAkB;IAAlB;EADjB,IAEF,aAAA,CAAA,uBAAA,EAFJ;EAGA,MAAM,UAAU,GAAG,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAnB,CAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,cAAJ,EAAoB;MAClB;IACD;;IAED,IAAI,UAAU,CAAC,OAAX,IAAsB,UAAU,CAAC,OAAX,CAAmB,UAA7C,EAAyD;MACvD,MAAM,GAAG,GAAG,UAAU,CAAC,OAAX,CAAmB,UAAnB,CAA8B,aAA9B,CAA8D,IAAI,sBAAA,CAAA,qBAAA,CAAsB,IAAI,QAA5F,CAAZ;;MAEA,IAAI,GAAJ,EAAS;QACP,MAAM,SAAS,GAAG,GAAG,CAAC,YAAJ,CAAiB,YAAjB,CAAlB;;QAEA,IAAI,GAAG,CAAC,GAAR,EAAa;UACX,iBAAiB,CAAC,GAAG,CAAC,GAAL,CAAjB;QACD,CAFD,MAEO,IAAI,SAAJ,EAAe;UACpB,iBAAiB,CAAC,SAAD,CAAjB;QACD;MACF;IACF;EACF,CAlBD,EAkBG,CAAC,iBAAD,EAAoB,cAApB,EAAoC,UAApC,CAlBH;EAoBA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GAAG,EAAE,UAD4B;MAEjC,GAAG;IAF8B,CAA7B,CAND;IAUL,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB;EAVD,CAAP;AAYD,CAxCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, setReferenceLabel },\n } = useCardContext_unstable();\n const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n React.useEffect(() => {\n if (referenceLabel) {\n return;\n }\n\n if (previewRef.current && previewRef.current.parentNode) {\n const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n if (img) {\n const ariaLabel = img.getAttribute('aria-label');\n\n if (img.alt) {\n setReferenceLabel(img.alt);\n } else if (ariaLabel) {\n setReferenceLabel(ariaLabel);\n }\n }\n }\n }, [setReferenceLabel, referenceLabel, previewRef]);\n\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n logo: resolveShorthand(logo),\n };\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE;EAAF,IAAW,KAAjB;EAEA,MAAM;IACJ,mBAAmB,EAAE;MAAE,cAAF;MAAkB,WAAlB;MAA+B,iBAA/B;MAAkD;IAAlD;EADjB,IAEF,aAAA,CAAA,uBAAA,EAFJ;EAGA,MAAM,UAAU,GAAG,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,KAAK,CAAC,MAAN,CAA6B,IAA7B,CAAnB,CAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,cAAc,IAAI,WAAtB,EAAmC;MACjC;IACD;;IAED,IAAI,UAAU,CAAC,OAAX,IAAsB,UAAU,CAAC,OAAX,CAAmB,UAA7C,EAAyD;MACvD,MAAM,GAAG,GAAG,UAAU,CAAC,OAAX,CAAmB,UAAnB,CAA8B,aAA9B,CAA8D,IAAI,sBAAA,CAAA,qBAAA,CAAsB,IAAI,QAA5F,CAAZ;;MAEA,IAAI,GAAJ,EAAS;QACP,MAAM,SAAS,GAAG,GAAG,CAAC,YAAJ,CAAiB,YAAjB,CAAlB;QACA,MAAM,eAAe,GAAG,GAAG,CAAC,YAAJ,CAAiB,kBAAjB,CAAxB;;QAEA,IAAI,eAAJ,EAAqB;UACnB,cAAc,CAAC,eAAD,CAAd;QACD,CAFD,MAEO,IAAI,GAAG,CAAC,GAAR,EAAa;UAClB,iBAAiB,CAAC,GAAG,CAAC,GAAL,CAAjB;QACD,CAFM,MAEA,IAAI,SAAJ,EAAe;UACpB,iBAAiB,CAAC,SAAD,CAAjB;QACD;MACF;IACF;EACF,CArBD,EAqBG,CAAC,iBAAD,EAAoB,cAApB,EAAoC,UAApC,EAAgD,WAAhD,EAA6D,cAA7D,CArBH;EAuBA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GAAG,EAAE,UAD4B;MAEjC,GAAG;IAF8B,CAA7B,CAND;IAUL,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB;EAVD,CAAP;AAYD,CA3CM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n\n const {\n selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n } = useCardContext_unstable();\n const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n React.useEffect(() => {\n if (referenceLabel && referenceId) {\n return;\n }\n\n if (previewRef.current && previewRef.current.parentNode) {\n const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n if (img) {\n const ariaLabel = img.getAttribute('aria-label');\n const ariaDescribedby = img.getAttribute('aria-describedby');\n\n if (ariaDescribedby) {\n setReferenceId(ariaDescribedby);\n } else if (img.alt) {\n setReferenceLabel(img.alt);\n } else if (ariaLabel) {\n setReferenceLabel(ariaLabel);\n }\n }\n }\n }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n logo: resolveShorthand(logo),\n };\n};\n"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-card",
3
- "version": "0.0.0-nightly-20221208-0423.1",
3
+ "version": "0.0.0-nightly-20221212-0422.1",
4
4
  "private": false,
5
5
  "description": "Card container components for Fluent UI React.",
6
6
  "main": "lib-commonjs/index.js",
@@ -29,16 +29,16 @@
29
29
  },
30
30
  "devDependencies": {
31
31
  "@fluentui/eslint-plugin": "*",
32
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221208-0423.1",
32
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221212-0422.1",
33
33
  "@fluentui/react-conformance": "*",
34
- "@fluentui/react-button": "0.0.0-nightly-20221208-0423.1",
34
+ "@fluentui/react-button": "0.0.0-nightly-20221212-0422.1",
35
35
  "@fluentui/scripts": "^1.0.0"
36
36
  },
37
37
  "dependencies": {
38
- "@fluentui/keyboard-keys": "0.0.0-nightly-20221208-0423.1",
39
- "@fluentui/react-tabster": "0.0.0-nightly-20221208-0423.1",
40
- "@fluentui/react-theme": "0.0.0-nightly-20221208-0423.1",
41
- "@fluentui/react-utilities": "0.0.0-nightly-20221208-0423.1",
38
+ "@fluentui/keyboard-keys": "0.0.0-nightly-20221212-0422.1",
39
+ "@fluentui/react-tabster": "0.0.0-nightly-20221212-0422.1",
40
+ "@fluentui/react-theme": "0.0.0-nightly-20221212-0422.1",
41
+ "@fluentui/react-utilities": "0.0.0-nightly-20221212-0422.1",
42
42
  "@griffel/react": "^1.4.2",
43
43
  "tslib": "^2.1.0"
44
44
  },