@fluentui/react-card 9.0.47 → 9.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +49 -1
- package/CHANGELOG.md +23 -2
- package/lib/components/Card/useCard.js +2 -2
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/CardFooter/useCardFooter.js +6 -3
- package/lib/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib/components/CardHeader/useCardHeader.js +6 -3
- package/lib/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib/components/CardPreview/useCardPreview.js +5 -2
- package/lib/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +1 -1
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooter.js +5 -2
- package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeader.js +5 -2
- package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreview.js +4 -1
- package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,55 @@
|
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Wed,
|
|
5
|
+
"date": "Wed, 18 Oct 2023 17:47:37 GMT",
|
|
6
|
+
"tag": "@fluentui/react-card_v9.0.49",
|
|
7
|
+
"version": "9.0.49",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-card",
|
|
13
|
+
"comment": "Bump @fluentui/react-tabster to v9.14.0",
|
|
14
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-card",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.15.1",
|
|
20
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-card",
|
|
25
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.18",
|
|
26
|
+
"commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Thu, 12 Oct 2023 14:55:43 GMT",
|
|
33
|
+
"tag": "@fluentui/react-card_v9.0.48",
|
|
34
|
+
"version": "9.0.48",
|
|
35
|
+
"comments": {
|
|
36
|
+
"patch": [
|
|
37
|
+
{
|
|
38
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
39
|
+
"package": "@fluentui/react-card",
|
|
40
|
+
"commit": "355fd5631311dc163f32ba79655a132376089f95",
|
|
41
|
+
"comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-card",
|
|
46
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.17",
|
|
47
|
+
"commit": "8178c3cae60005bc21137aa1f3e766e18cdb4a30"
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"date": "Wed, 11 Oct 2023 13:54:26 GMT",
|
|
6
54
|
"tag": "@fluentui/react-card_v9.0.47",
|
|
7
55
|
"version": "9.0.47",
|
|
8
56
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on Wed,
|
|
3
|
+
This log was last generated on Wed, 18 Oct 2023 17:47:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.49](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.49)
|
|
8
|
+
|
|
9
|
+
Wed, 18 Oct 2023 17:47:37 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.48..@fluentui/react-card_v9.0.49)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.14.0 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.15.1 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.18 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.0.48](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.48)
|
|
19
|
+
|
|
20
|
+
Thu, 12 Oct 2023 14:55:43 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.47..@fluentui/react-card_v9.0.48)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- chore: migrate from getNativeElementProps for getIntrinsicElementProps ([PR #29498](https://github.com/microsoft/fluentui/pull/29498) by bernardo.sunderhus@gmail.com)
|
|
26
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #29513](https://github.com/microsoft/fluentui/pull/29513) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.0.47](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.47)
|
|
8
29
|
|
|
9
|
-
Wed, 11 Oct 2023 13:
|
|
30
|
+
Wed, 11 Oct 2023 13:54:26 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.46..@fluentui/react-card_v9.0.47)
|
|
11
32
|
|
|
12
33
|
### Patches
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
|
|
4
4
|
import { useCardSelectable } from './useCardSelectable';
|
|
5
5
|
import { cardContextDefaultValue } from './CardContext';
|
|
@@ -79,7 +79,7 @@ const focusMap = {
|
|
|
79
79
|
floatingAction: 'div',
|
|
80
80
|
checkbox: 'input'
|
|
81
81
|
},
|
|
82
|
-
root: slot.always(
|
|
82
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
83
83
|
ref: cardRef,
|
|
84
84
|
role: 'group',
|
|
85
85
|
...focusAttributes,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } 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 [\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>)[]\n ).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' } = 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, floatingActionSlot } =\n useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\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: slot.always(\n getIntrinsicElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...focusAttributes,\n ...props,\n ...selectableCardProps,\n }),\n { elementType: 'div' },\n ),\n\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAG5E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,gBAAgB;AAExD,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAkB;IACpE,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,MAAMC,gBAAgBb,kBAAkB;QACtCc,aAAaV,QAAQ,CAACM,cAAc,WAAWF,UAAU;IAC3D;IAEA,MAAMO,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiBT,cAAc,QAAQ,OAAOO;IAChD;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG5B,MAAM6B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGhC,MAAM6B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc5B;IACpB,MAAM,EAAE6B,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGjC,kBAAkBO,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUtC,cAAc+B,aAAaV;IAE3C,MAAM,EAAET,WAAW,EAAEO,eAAe,EAAE,GAAGV,mBAAmBE;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAoB;QACAG;QACAF;QACAL,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAS,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMvC,KAAK0C,MAAM,CACf5C,yBAAyB,OAAO;YAC9BsB,KAAKiB;YACLM,MAAM;YACN,GAAGzB,eAAe;YAClB,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,IACA;YAAEW,aAAa;QAAM;QAGvBJ,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
3
|
/**
|
|
4
4
|
* Create the state required to render CardFooter.
|
|
5
5
|
*
|
|
@@ -15,8 +15,11 @@ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
|
|
|
15
15
|
root: 'div',
|
|
16
16
|
action: 'div'
|
|
17
17
|
},
|
|
18
|
-
root: slot.always(
|
|
19
|
-
|
|
18
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
19
|
+
// FIXME:
|
|
20
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
21
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
22
|
+
ref: ref,
|
|
20
23
|
...props
|
|
21
24
|
}), {
|
|
22
25
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n const { action } = props;\n\n return {\n components: {\n root: 'div',\n action: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useCardFooter_unstable","props","ref","action","components","root","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGF;IAEnB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMN,KAAKO,MAAM,CACfR,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;QAEvBJ,QAAQJ,KAAKS,QAAQ,CAACL,QAAQ;YAAEI,aAAa;QAAM;IACrD;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useCardContext_unstable } from '../Card/CardContext';
|
|
4
4
|
import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
|
|
5
5
|
/**
|
|
@@ -71,8 +71,11 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
|
|
|
71
71
|
description: 'div',
|
|
72
72
|
action: 'div'
|
|
73
73
|
},
|
|
74
|
-
root: slot.always(
|
|
75
|
-
|
|
74
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
75
|
+
// FIXME:
|
|
76
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
77
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
78
|
+
ref: ref,
|
|
76
79
|
...props
|
|
77
80
|
}), {
|
|
78
81
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\n\n/**\n * Finds the first child of CardHeader with an id prop.\n *\n * @param header - the header prop of CardHeader\n */\nfunction getChildWithId(header: React.ReactNode) {\n function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement {\n return React.isValidElement(element) && Boolean(element.props.id);\n }\n\n return React.Children.toArray(header).find(isReactElementWithIdProp);\n}\n\n/**\n * Returns the id to use for the CardHeader root element.\n *\n * @param headerId - the id prop of the CardHeader component\n * @param childWithId - the first child of the CardHeader component with an id prop\n * @param generatedId - a generated id\n *\n * @returns the id to use for the CardHeader root element\n */\nfunction getReferenceId(\n headerId: string | undefined,\n childWithId: React.ReactElement | undefined,\n generatedId: string,\n): string {\n if (headerId) {\n return headerId;\n }\n\n if (childWithId?.props.id) {\n return childWithId.props.id;\n }\n\n return generatedId;\n}\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, header, description, action } = props;\n\n const {\n selectableA11yProps: { referenceId, setReferenceId },\n } = useCardContext_unstable();\n const headerRef = React.useRef<HTMLDivElement>(null);\n\n const hasChildId = React.useRef(false);\n const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined,\n },\n elementType: 'div',\n });\n React.useEffect(() => {\n const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n const childWithId = getChildWithId(headerSlot?.children);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [generatedId, header, headerSlot, setReferenceId]);\n return {\n components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n image: slot.optional(image, { elementType: 'div' }),\n header: headerSlot,\n description: slot.optional(description, { elementType: 'div' }),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useCardContext_unstable","cardHeaderClassNames","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE;;;;CAIC,GACD,SAASC,eAAeC,MAAuB;IAC7C,SAASC,yBAAyBC,OAAwB;QACxD,OAAOT,MAAMU,cAAc,CAACD,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;IAClE;IAEA,OAAOb,MAAMc,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,WAA2C,EAC3CC,WAAmB;IAEnB,IAAIF,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIC,wBAAAA,kCAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B;IAEA,OAAOO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACT,OAAwBU;IAC7D,MAAM,EAAEC,KAAK,EAAEhB,MAAM,EAAEiB,WAAW,EAAEC,MAAM,EAAE,GAAGb;IAE/C,MAAM,EACJc,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EACrD,GAAGxB;IACJ,MAAMyB,YAAY7B,MAAM8B,MAAM,CAAiB;IAE/C,MAAMC,aAAa/B,MAAM8B,MAAM,CAAC;IAChC,MAAMV,cAAclB,MAAMG,qBAAqBE,MAAM,EAAEoB;IAEvD,MAAMK,aAAa7B,KAAK8B,QAAQ,CAAC1B,QAAQ;QACvC2B,iBAAiB;QACjBC,cAAc;YACZb,KAAKO;YACLhB,IAAI,CAACkB,WAAWK,OAAO,GAAGT,cAAcU;QAC1C;QACAC,aAAa;IACf;IACAtC,MAAMuC,SAAS,CAAC;YACyBV;QAAvC,MAAMX,WAAW,CAACa,WAAWK,OAAO,IAAGP,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBhB,EAAE,GAAGwB;QAC/D,MAAMlB,cAAcb,eAAe0B,uBAAAA,iCAAAA,WAAYQ,QAAQ;QACvDT,WAAWK,OAAO,GAAGzB,QAAQQ;QAC7BS,eAAeX,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQyB;QAAYJ;KAAe;IACpD,OAAO;QACLa,YAAY;YAAEC,MAAM;YAAOnB,OAAO;YAAOhB,QAAQ;YAAOiB,aAAa;YAAOC,QAAQ;QAAM;QAE1FiB,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FqB,KAAKA;YACL,GAAGV,KAAK;QACV,IACA;YAAE0B,aAAa;QAAM;QAEvBf,OAAOpB,KAAK8B,QAAQ,CAACV,OAAO;YAAEe,aAAa;QAAM;QACjD/B,QAAQyB;QACRR,aAAarB,KAAK8B,QAAQ,CAACT,aAAa;YAAEc,aAAa;QAAM;QAC7Db,QAAQtB,KAAK8B,QAAQ,CAACR,QAAQ;YAAEa,aAAa;QAAM;IACrD;AACF,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { useCardContext_unstable } from '../Card/CardContext';
|
|
4
4
|
import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
|
|
5
5
|
/**
|
|
@@ -13,6 +13,9 @@ import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
|
|
|
13
13
|
*/ export const useCardPreview_unstable = (props, ref)=>{
|
|
14
14
|
const { logo } = props;
|
|
15
15
|
const { selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId } } = useCardContext_unstable();
|
|
16
|
+
// FIXME:
|
|
17
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
18
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
16
19
|
const previewRef = useMergedRefs(ref, React.useRef(null));
|
|
17
20
|
React.useEffect(()=>{
|
|
18
21
|
if (referenceLabel && referenceId) {
|
|
@@ -44,7 +47,7 @@ import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
|
|
|
44
47
|
root: 'div',
|
|
45
48
|
logo: 'div'
|
|
46
49
|
},
|
|
47
|
-
root: slot.always(
|
|
50
|
+
root: slot.always(getIntrinsicElementProps('div', {
|
|
48
51
|
ref: previewRef,
|
|
49
52
|
...props
|
|
50
53
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\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 // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, 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: slot.always(\n getIntrinsicElementProps('div', {\n ref: previewRef,\n ...props,\n }),\n { elementType: 'div' },\n ),\n logo: slot.optional(logo, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE1F,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,qBAAqB,QAAQ,gCAAgC;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,IAAI,EAAE,GAAGF;IAEjB,MAAM,EACJG,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EACxF,GAAGV;IACJ,SAAS;IACT,4EAA4E;IAC5E,4FAA4F;IAC5F,MAAMW,aAAab,cAAcM,KAAkCR,MAAMgB,MAAM,CAAiB;IAEhGhB,MAAMiB,SAAS,CAAC;QACd,IAAIN,kBAAkBC,aAAa;YACjC;QACF;QAEA,IAAIG,WAAWG,OAAO,IAAIH,WAAWG,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAML,WAAWG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,CAAC,EAAEhB,sBAAsBiB,IAAI,CAAC,MAAM,CAAC;YAEhH,IAAIF,KAAK;gBACP,MAAMG,YAAYH,IAAII,YAAY,CAAC;gBACnC,MAAMC,kBAAkBL,IAAII,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBX,eAAeW;gBACjB,OAAO,IAAIL,IAAIM,GAAG,EAAE;oBAClBb,kBAAkBO,IAAIM,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBV,kBAAkBU;gBACpB;YACF;QACF;IACF,GAAG;QAACV;QAAmBF;QAAgBI;QAAYH;QAAaE;KAAe;IAE/E,OAAO;QACLa,YAAY;YACVL,MAAM;YACNb,MAAM;QACR;QAEAa,MAAMnB,KAAKyB,MAAM,CACf3B,yBAAyB,OAAO;YAC9BO,KAAKO;YACL,GAAGR,KAAK;QACV,IACA;YAAEsB,aAAa;QAAM;QAEvBpB,MAAMN,KAAK2B,QAAQ,CAACrB,MAAM;YAAEoB,aAAa;QAAM;IACjD;AACF,EAAE"}
|
|
@@ -82,7 +82,7 @@ const useCard_unstable = (props, ref)=>{
|
|
|
82
82
|
floatingAction: 'div',
|
|
83
83
|
checkbox: 'input'
|
|
84
84
|
},
|
|
85
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
85
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
86
86
|
ref: cardRef,
|
|
87
87
|
role: 'group',
|
|
88
88
|
...focusAttributes,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCard.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited'\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 */ const useCardInteractive = ({ focusMode = 'off', ...props })=>{\n const interactive = [\n 'onClick',\n 'onDoubleClick',\n 'onMouseUp',\n 'onMouseDown',\n 'onPointerUp',\n 'onPointerDown',\n 'onTouchStart',\n 'onTouchEnd',\n 'onDragStart',\n 'onDragEnd'\n ].some((prop)=>props[prop]);\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]\n });\n const interactiveFocusAttributes = {\n ...groupperAttrs,\n tabIndex: 0\n };\n return {\n interactive,\n focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes\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 */ export const useCard_unstable = (props, ref)=>{\n const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n const cardBaseRef = useFocusWithin();\n const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } = useCardSelectable(props, {\n referenceId,\n referenceLabel\n }, cardBaseRef);\n const cardRef = useMergedRefs(cardBaseRef, ref);\n const { interactive, focusAttributes } = useCardInteractive(props);\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 components: {\n root: 'div',\n floatingAction: 'div',\n checkbox: 'input'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n ref: cardRef,\n role: 'group',\n ...focusAttributes,\n ...props,\n ...selectableCardProps\n }), {\n elementType: 'div'\n }),\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot\n };\n};\n"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","slot","always","getIntrinsicElementProps","role","elementType"],"mappings":";;;;+BAmDiBA;;;eAAAA;;;;iEAnDM;gCACuC;8BACZ;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACbC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AAChB;AACA;;;;;;;CAOC,GAAG,MAAMC,qBAAqB,CAAC,EAAEC,YAAY,KAAK,EAAE,GAAGC,OAAO;IAC3D,MAAMC,cAAc;QAChB;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH,CAACC,IAAI,CAAC,CAACC,OAAOH,KAAK,CAACG,KAAK;IAC1B,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACpCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,UAAU;IAC7D;IACA,MAAMQ,6BAA6B;QAC/B,GAAGH,aAAa;QAChBI,UAAU;IACd;IACA,OAAO;QACHP;QACAQ,iBAAiBV,cAAc,QAAQ,OAAOQ;IAClD;AACJ;AASW,MAAMb,mBAAmB,CAACM,OAAOU;IACxC,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAC7E,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAC5Hc;QACAM;IACJ,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EAAET,WAAW,EAAEQ,eAAe,EAAE,GAAGX,mBAAmBE;IAC5D,OAAO;QACHW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACjBJ;YACAD;YACAM;YACAC;QACJ;QACAY,YAAY;YACRC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACd;QACAF,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C7B,KAAKqB;YACLS,MAAM;YACN,GAAG/B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QAC1B,IAAI;YACAe,aAAa;QACjB;QACAN,gBAAgBN;QAChBO,UAAUR;IACd;AACJ"}
|
|
@@ -18,8 +18,11 @@ const useCardFooter_unstable = (props, ref)=>{
|
|
|
18
18
|
root: 'div',
|
|
19
19
|
action: 'div'
|
|
20
20
|
},
|
|
21
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
22
|
-
|
|
21
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
22
|
+
// FIXME:
|
|
23
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
24
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
25
|
+
ref: ref,
|
|
23
26
|
...props
|
|
24
27
|
}), {
|
|
25
28
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardFooter.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useCardFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */ export const useCardFooter_unstable = (props, ref)=>{\n const { action } = props;\n return {\n components: {\n root: 'div',\n action: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref,\n ...props\n }), {\n elementType: 'div'\n }),\n action: slot.optional(action, {\n elementType: 'div'\n })\n };\n};\n"],"names":["useCardFooter_unstable","props","ref","action","components","root","slot","always","getIntrinsicElementProps","elementType","optional"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCACwB;AASpC,MAAMA,yBAAyB,CAACC,OAAOC;IAC9C,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,OAAO;QACHG,YAAY;YACRC,MAAM;YACNF,QAAQ;QACZ;QACAE,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FN,KAAKA;YACL,GAAGD,KAAK;QACZ,IAAI;YACAQ,aAAa;QACjB;QACAN,QAAQG,oBAAI,CAACI,QAAQ,CAACP,QAAQ;YAC1BM,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -74,8 +74,11 @@ const useCardHeader_unstable = (props, ref)=>{
|
|
|
74
74
|
description: 'div',
|
|
75
75
|
action: 'div'
|
|
76
76
|
},
|
|
77
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
78
|
-
|
|
77
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
78
|
+
// FIXME:
|
|
79
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
80
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
81
|
+
ref: ref,
|
|
79
82
|
...props
|
|
80
83
|
}), {
|
|
81
84
|
elementType: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardHeader.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useCardHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\n/**\n * Finds the first child of CardHeader with an id prop.\n *\n * @param header - the header prop of CardHeader\n */ function getChildWithId(header) {\n function isReactElementWithIdProp(element) {\n return React.isValidElement(element) && Boolean(element.props.id);\n }\n return React.Children.toArray(header).find(isReactElementWithIdProp);\n}\n/**\n * Returns the id to use for the CardHeader root element.\n *\n * @param headerId - the id prop of the CardHeader component\n * @param childWithId - the first child of the CardHeader component with an id prop\n * @param generatedId - a generated id\n *\n * @returns the id to use for the CardHeader root element\n */ function getReferenceId(headerId, childWithId, generatedId) {\n if (headerId) {\n return headerId;\n }\n if (childWithId === null || childWithId === void 0 ? void 0 : childWithId.props.id) {\n return childWithId.props.id;\n }\n return generatedId;\n}\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */ export const useCardHeader_unstable = (props, ref)=>{\n const { image, header, description, action } = props;\n const { selectableA11yProps: { referenceId, setReferenceId } } = useCardContext_unstable();\n const headerRef = React.useRef(null);\n const hasChildId = React.useRef(false);\n const generatedId = useId(cardHeaderClassNames.header, referenceId);\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined\n },\n elementType: 'div'\n });\n React.useEffect(()=>{\n var _headerRef_current;\n const headerId = !hasChildId.current ? (_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.id : undefined;\n const childWithId = getChildWithId(headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.children);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [\n generatedId,\n header,\n headerSlot,\n setReferenceId\n ]);\n return {\n components: {\n root: 'div',\n image: 'div',\n header: 'div',\n description: 'div',\n action: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref,\n ...props\n }), {\n elementType: 'div'\n }),\n image: slot.optional(image, {\n elementType: 'div'\n }),\n header: headerSlot,\n description: slot.optional(description, {\n elementType: 'div'\n }),\n action: slot.optional(action, {\n elementType: 'div'\n })\n };\n};\n"],"names":["useCardHeader_unstable","getChildWithId","header","isReactElementWithIdProp","element","React","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","ref","image","description","action","selectableA11yProps","referenceId","setReferenceId","useCardContext_unstable","headerRef","useRef","hasChildId","useId","cardHeaderClassNames","headerSlot","slot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","_headerRef_current","children","components","root","always","getIntrinsicElementProps"],"mappings":";;;;+BAuCiBA;;;eAAAA;;;;iEAvCM;gCAC+B;6BACd;2CACH;AACrC;;;;CAIC,GAAG,SAASC,eAAeC,MAAM;IAC9B,SAASC,yBAAyBC,OAAO;QACrC,qBAAOC,OAAMC,cAAc,CAACF,YAAYG,QAAQH,QAAQI,KAAK,CAACC,EAAE;IACpE;IACA,OAAOJ,OAAMK,QAAQ,CAACC,OAAO,CAACT,QAAQU,IAAI,CAACT;AAC/C;AACA;;;;;;;;CAQC,GAAG,SAASU,eAAeC,QAAQ,EAAEC,WAAW,EAAEC,WAAW;IAC1D,IAAIF,UAAU;QACV,OAAOA;IACX;IACA,IAAIC,gBAAgB,QAAQA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYP,KAAK,CAACC,EAAE,EAAE;QAChF,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC/B;IACA,OAAOO;AACX;AASW,MAAMhB,yBAAyB,CAACQ,OAAOS;IAC9C,MAAM,EAAEC,KAAK,EAAEhB,MAAM,EAAEiB,WAAW,EAAEC,MAAM,EAAE,GAAGZ;IAC/C,MAAM,EAAEa,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EAAE,GAAGC,IAAAA,oCAAuB;IACxF,MAAMC,YAAYpB,OAAMqB,MAAM,CAAC;IAC/B,MAAMC,aAAatB,OAAMqB,MAAM,CAAC;IAChC,MAAMV,cAAcY,IAAAA,qBAAK,EAACC,+CAAoB,CAAC3B,MAAM,EAAEoB;IACvD,MAAMQ,aAAaC,oBAAI,CAACC,QAAQ,CAAC9B,QAAQ;QACrC+B,iBAAiB;QACjBC,cAAc;YACVjB,KAAKQ;YACLhB,IAAI,CAACkB,WAAWQ,OAAO,GAAGb,cAAcc;QAC5C;QACAC,aAAa;IACjB;IACAhC,OAAMiC,SAAS,CAAC;QACZ,IAAIC;QACJ,MAAMzB,WAAW,CAACa,WAAWQ,OAAO,GAAG,AAACI,CAAAA,qBAAqBd,UAAUU,OAAO,AAAD,MAAO,QAAQI,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmB9B,EAAE,GAAG2B;QAC7J,MAAMrB,cAAcd,eAAe6B,eAAe,QAAQA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWU,QAAQ;QAC9Gb,WAAWQ,OAAO,GAAG5B,QAAQQ;QAC7BQ,eAAeV,eAAeC,UAAUC,aAAaC;IACzD,GAAG;QACCA;QACAd;QACA4B;QACAP;KACH;IACD,OAAO;QACHkB,YAAY;YACRC,MAAM;YACNxB,OAAO;YACPhB,QAAQ;YACRiB,aAAa;YACbC,QAAQ;QACZ;QACAsB,MAAMX,oBAAI,CAACY,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5F3B,KAAKA;YACL,GAAGT,KAAK;QACZ,IAAI;YACA6B,aAAa;QACjB;QACAnB,OAAOa,oBAAI,CAACC,QAAQ,CAACd,OAAO;YACxBmB,aAAa;QACjB;QACAnC,QAAQ4B;QACRX,aAAaY,oBAAI,CAACC,QAAQ,CAACb,aAAa;YACpCkB,aAAa;QACjB;QACAjB,QAAQW,oBAAI,CAACC,QAAQ,CAACZ,QAAQ;YAC1BiB,aAAa;QACjB;IACJ;AACJ"}
|
|
@@ -16,6 +16,9 @@ const _useCardPreviewStylesstyles = require("./useCardPreviewStyles.styles");
|
|
|
16
16
|
const useCardPreview_unstable = (props, ref)=>{
|
|
17
17
|
const { logo } = props;
|
|
18
18
|
const { selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId } } = (0, _CardContext.useCardContext_unstable)();
|
|
19
|
+
// FIXME:
|
|
20
|
+
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
|
|
21
|
+
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
|
|
19
22
|
const previewRef = (0, _reactutilities.useMergedRefs)(ref, _react.useRef(null));
|
|
20
23
|
_react.useEffect(()=>{
|
|
21
24
|
if (referenceLabel && referenceId) {
|
|
@@ -47,7 +50,7 @@ const useCardPreview_unstable = (props, ref)=>{
|
|
|
47
50
|
root: 'div',
|
|
48
51
|
logo: 'div'
|
|
49
52
|
},
|
|
50
|
-
root: _reactutilities.slot.always((0, _reactutilities.
|
|
53
|
+
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
51
54
|
ref: previewRef,
|
|
52
55
|
...props
|
|
53
56
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardPreview.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useCardPreview.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\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 */ export const useCardPreview_unstable = (props, ref)=>{\n const { logo } = props;\n const { selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId } } = useCardContext_unstable();\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n const previewRef = useMergedRefs(ref, React.useRef(null));\n React.useEffect(()=>{\n if (referenceLabel && referenceId) {\n return;\n }\n if (previewRef.current && previewRef.current.parentNode) {\n const img = previewRef.current.parentNode.querySelector(`.${cardPreviewClassNames.root} > img`);\n if (img) {\n const ariaLabel = img.getAttribute('aria-label');\n const ariaDescribedby = img.getAttribute('aria-describedby');\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 }, [\n setReferenceLabel,\n referenceLabel,\n previewRef,\n referenceId,\n setReferenceId\n ]);\n return {\n components: {\n root: 'div',\n logo: 'div'\n },\n root: slot.always(getIntrinsicElementProps('div', {\n ref: previewRef,\n ...props\n }), {\n elementType: 'div'\n }),\n logo: slot.optional(logo, {\n elementType: 'div'\n })\n };\n};\n"],"names":["useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","useCardContext_unstable","previewRef","useMergedRefs","React","useRef","useEffect","current","parentNode","img","querySelector","cardPreviewClassNames","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","slot","always","getIntrinsicElementProps","elementType","optional"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCACuC;6BACtB;4CACF;AAS3B,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAM,EAAEC,IAAI,EAAE,GAAGF;IACjB,MAAM,EAAEG,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EAAE,GAAGC,IAAAA,oCAAuB;IAC3H,SAAS;IACT,4EAA4E;IAC5E,4FAA4F;IAC5F,MAAMC,aAAaC,IAAAA,6BAAa,EAACT,KAAKU,OAAMC,MAAM,CAAC;IACnDD,OAAME,SAAS,CAAC;QACZ,IAAIT,kBAAkBC,aAAa;YAC/B;QACJ;QACA,IAAII,WAAWK,OAAO,IAAIL,WAAWK,OAAO,CAACC,UAAU,EAAE;YACrD,MAAMC,MAAMP,WAAWK,OAAO,CAACC,UAAU,CAACE,aAAa,CAAC,CAAC,CAAC,EAAEC,iDAAqB,CAACC,IAAI,CAAC,MAAM,CAAC;YAC9F,IAAIH,KAAK;gBACL,MAAMI,YAAYJ,IAAIK,YAAY,CAAC;gBACnC,MAAMC,kBAAkBN,IAAIK,YAAY,CAAC;gBACzC,IAAIC,iBAAiB;oBACjBf,eAAee;gBACnB,OAAO,IAAIN,IAAIO,GAAG,EAAE;oBAChBjB,kBAAkBU,IAAIO,GAAG;gBAC7B,OAAO,IAAIH,WAAW;oBAClBd,kBAAkBc;gBACtB;YACJ;QACJ;IACJ,GAAG;QACCd;QACAF;QACAK;QACAJ;QACAE;KACH;IACD,OAAO;QACHiB,YAAY;YACRL,MAAM;YACNjB,MAAM;QACV;QACAiB,MAAMM,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C1B,KAAKQ;YACL,GAAGT,KAAK;QACZ,IAAI;YACA4B,aAAa;QACjB;QACA1B,MAAMuB,oBAAI,CAACI,QAAQ,CAAC3B,MAAM;YACtB0B,aAAa;QACjB;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.49",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -39,10 +39,10 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@fluentui/keyboard-keys": "^9.0.6",
|
|
42
|
-
"@fluentui/react-tabster": "^9.
|
|
42
|
+
"@fluentui/react-tabster": "^9.14.0",
|
|
43
43
|
"@fluentui/react-theme": "^9.1.14",
|
|
44
|
-
"@fluentui/react-utilities": "^9.15.
|
|
45
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
44
|
+
"@fluentui/react-utilities": "^9.15.1",
|
|
45
|
+
"@fluentui/react-jsx-runtime": "^9.0.18",
|
|
46
46
|
"@griffel/react": "^1.5.14",
|
|
47
47
|
"@swc/helpers": "^0.5.1"
|
|
48
48
|
},
|