@fluentui/react-card 0.0.0-nightly-20230621-0414.1 → 0.0.0-nightly-20230622-0414.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.
- package/CHANGELOG.json +19 -19
- package/CHANGELOG.md +12 -12
- package/lib/components/CardHeader/useCardHeader.js +36 -7
- package/lib/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeader.js +36 -7
- package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
- package/package.json +9 -9
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-card_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 22 Jun 2023 04:19:52 GMT",
|
|
6
|
+
"tag": "@fluentui/react-card_v0.0.0-nightly-20230622-0414.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230622-0414.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,50 +16,50 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-card",
|
|
19
|
-
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230622-0414.1",
|
|
20
|
+
"commit": "f73b8be9167278fea0b2c40c722c971ddd4bfc74"
|
|
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-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230622-0414.1",
|
|
26
|
+
"commit": "f73b8be9167278fea0b2c40c722c971ddd4bfc74"
|
|
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-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230622-0414.1",
|
|
32
|
+
"commit": "f73b8be9167278fea0b2c40c722c971ddd4bfc74"
|
|
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-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230622-0414.1",
|
|
38
|
+
"commit": "f73b8be9167278fea0b2c40c722c971ddd4bfc74"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-card",
|
|
43
|
-
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230622-0414.1",
|
|
44
|
+
"commit": "f73b8be9167278fea0b2c40c722c971ddd4bfc74"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-card",
|
|
49
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230622-0414.1",
|
|
50
|
+
"commit": "f73b8be9167278fea0b2c40c722c971ddd4bfc74"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-card",
|
|
55
|
-
"comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230622-0414.1",
|
|
56
|
+
"commit": "f73b8be9167278fea0b2c40c722c971ddd4bfc74"
|
|
57
57
|
},
|
|
58
58
|
{
|
|
59
59
|
"author": "beachball",
|
|
60
60
|
"package": "@fluentui/react-card",
|
|
61
|
-
"comment": "Bump @fluentui/react-button to v0.0.0-nightly-
|
|
62
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-button to v0.0.0-nightly-20230622-0414.1",
|
|
62
|
+
"commit": "f73b8be9167278fea0b2c40c722c971ddd4bfc74"
|
|
63
63
|
}
|
|
64
64
|
]
|
|
65
65
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 22 Jun 2023 04:19:52 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230622-0414.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20230622-0414.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.15..@fluentui/react-card_v0.0.0-nightly-
|
|
9
|
+
Thu, 22 Jun 2023 04:19:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.15..@fluentui/react-card_v0.0.0-nightly-20230622-0414.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-
|
|
16
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-button to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230622-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/f73b8be9167278fea0b2c40c722c971ddd4bfc74) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20230622-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/f73b8be9167278fea0b2c40c722c971ddd4bfc74) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230622-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/f73b8be9167278fea0b2c40c722c971ddd4bfc74) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230622-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/f73b8be9167278fea0b2c40c722c971ddd4bfc74) by beachball)
|
|
19
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230622-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/f73b8be9167278fea0b2c40c722c971ddd4bfc74) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230622-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/f73b8be9167278fea0b2c40c722c971ddd4bfc74) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20230622-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/f73b8be9167278fea0b2c40c722c971ddd4bfc74) by beachball)
|
|
22
|
+
- Bump @fluentui/react-button to v0.0.0-nightly-20230622-0414.1 ([commit](https://github.com/microsoft/fluentui/commit/f73b8be9167278fea0b2c40c722c971ddd4bfc74) by beachball)
|
|
23
23
|
|
|
24
24
|
## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.15)
|
|
25
25
|
|
|
@@ -2,6 +2,33 @@ import * as React from 'react';
|
|
|
2
2
|
import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
|
|
3
3
|
import { useCardContext_unstable } from '../Card/CardContext';
|
|
4
4
|
import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
|
|
5
|
+
/**
|
|
6
|
+
* Finds the first child of CardHeader with an id prop.
|
|
7
|
+
*
|
|
8
|
+
* @param header - the header prop of CardHeader
|
|
9
|
+
*/ function getChildWithId(header) {
|
|
10
|
+
function isReactElementWithIdProp(element) {
|
|
11
|
+
return React.isValidElement(element) && Boolean(element.props.id);
|
|
12
|
+
}
|
|
13
|
+
return React.Children.toArray(header).find(isReactElementWithIdProp);
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Returns the id to use for the CardHeader root element.
|
|
17
|
+
*
|
|
18
|
+
* @param headerId - the id prop of the CardHeader component
|
|
19
|
+
* @param childWithId - the first child of the CardHeader component with an id prop
|
|
20
|
+
* @param generatedId - a generated id
|
|
21
|
+
*
|
|
22
|
+
* @returns the id to use for the CardHeader root element
|
|
23
|
+
*/ function getReferenceId(headerId, childWithId, generatedId) {
|
|
24
|
+
if (headerId) {
|
|
25
|
+
return headerId;
|
|
26
|
+
}
|
|
27
|
+
if (childWithId === null || childWithId === void 0 ? void 0 : childWithId.props.id) {
|
|
28
|
+
return childWithId.props.id;
|
|
29
|
+
}
|
|
30
|
+
return generatedId;
|
|
31
|
+
}
|
|
5
32
|
/**
|
|
6
33
|
* Create the state required to render CardHeader.
|
|
7
34
|
*
|
|
@@ -14,16 +41,18 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
|
|
|
14
41
|
const { image , header , description , action } = props;
|
|
15
42
|
const { selectableA11yProps: { referenceId , setReferenceId } } = useCardContext_unstable();
|
|
16
43
|
const headerRef = React.useRef(null);
|
|
44
|
+
const hasChildId = React.useRef(false);
|
|
17
45
|
const generatedId = useId(cardHeaderClassNames.header, referenceId);
|
|
18
46
|
React.useEffect(()=>{
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
47
|
+
var _headerRef_current;
|
|
48
|
+
const headerId = !hasChildId.current ? (_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.id : undefined;
|
|
49
|
+
const childWithId = getChildWithId(header);
|
|
50
|
+
hasChildId.current = Boolean(childWithId);
|
|
51
|
+
setReferenceId(getReferenceId(headerId, childWithId, generatedId));
|
|
23
52
|
}, [
|
|
53
|
+
generatedId,
|
|
24
54
|
header,
|
|
25
|
-
setReferenceId
|
|
26
|
-
generatedId
|
|
55
|
+
setReferenceId
|
|
27
56
|
]);
|
|
28
57
|
return {
|
|
29
58
|
components: {
|
|
@@ -42,7 +71,7 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
|
|
|
42
71
|
required: true,
|
|
43
72
|
defaultProps: {
|
|
44
73
|
ref: headerRef,
|
|
45
|
-
id: referenceId
|
|
74
|
+
id: !hasChildId.current ? referenceId : undefined
|
|
46
75
|
}
|
|
47
76
|
}),
|
|
48
77
|
description: resolveShorthand(description),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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 * 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 generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n React.useEffect(() => {\n
|
|
1
|
+
{"version":3,"sources":["useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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: CardHeaderProps['header']) {\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 React.useEffect(() => {\n const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n const childWithId = getChildWithId(header);\n\n hasChildId.current = Boolean(childWithId);\n\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [generatedId, header, setReferenceId]);\n\n return {\n components: {\n root: 'div',\n image: 'div',\n header: 'div',\n description: 'div',\n action: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n image: resolveShorthand(image),\n header: resolveShorthand(header, {\n required: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined,\n },\n }),\n description: resolveShorthand(description),\n action: resolveShorthand(action),\n };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useId","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","useEffect","current","undefined","components","root","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAE3F,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE;;;;CAIC,GACD,SAASC,eAAeC,MAAiC,EAAE;IACzD,SAASC,yBAAyBC,OAAwB,EAAiC;QACzF,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,EACX;IACR,IAAIF,UAAU;QACZ,OAAOA;IACT,CAAC;IAED,IAAIC,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B,CAAC;IAED,OAAOO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACT,OAAwBU,MAAiD;IAC9G,MAAM,EAAEC,MAAK,EAAEhB,OAAM,EAAEiB,YAAW,EAAEC,OAAM,EAAE,GAAGb;IAE/C,MAAM,EACJc,qBAAqB,EAAEC,YAAW,EAAEC,eAAc,EAAE,CAAA,EACrD,GAAGxB;IACJ,MAAMyB,YAAY7B,MAAM8B,MAAM,CAAiB,IAAI;IAEnD,MAAMC,aAAa/B,MAAM8B,MAAM,CAAC,KAAK;IACrC,MAAMV,cAAcjB,MAAME,qBAAqBE,MAAM,EAAEoB;IAEvD3B,MAAMgC,SAAS,CAAC,IAAM;YACmBH;QAAvC,MAAMX,WAAW,CAACa,WAAWE,OAAO,GAAGJ,CAAAA,qBAAAA,UAAUI,OAAO,cAAjBJ,gCAAAA,KAAAA,IAAAA,mBAAmBhB,EAAE,GAAGqB,SAAS;QACxE,MAAMf,cAAcb,eAAeC;QAEnCwB,WAAWE,OAAO,GAAGtB,QAAQQ;QAE7BS,eAAeX,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQqB;KAAe;IAExC,OAAO;QACLO,YAAY;YACVC,MAAM;YACNb,OAAO;YACPhB,QAAQ;YACRiB,aAAa;YACbC,QAAQ;QACV;QAEAW,MAAMnC,sBAAsB,OAAO;YACjCqB;YACA,GAAGV,KAAK;QACV;QACAW,OAAOrB,iBAAiBqB;QACxBhB,QAAQL,iBAAiBK,QAAQ;YAC/B8B,UAAU,IAAI;YACdC,cAAc;gBACZhB,KAAKO;gBACLhB,IAAI,CAACkB,WAAWE,OAAO,GAAGN,cAAcO,SAAS;YACnD;QACF;QACAV,aAAatB,iBAAiBsB;QAC9BC,QAAQvB,iBAAiBuB;IAC3B;AACF,EAAE"}
|
|
@@ -11,20 +11,49 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
|
11
11
|
const _reactUtilities = require("@fluentui/react-utilities");
|
|
12
12
|
const _cardContext = require("../Card/CardContext");
|
|
13
13
|
const _useCardHeaderStylesStyles = require("./useCardHeaderStyles.styles");
|
|
14
|
+
/**
|
|
15
|
+
* Finds the first child of CardHeader with an id prop.
|
|
16
|
+
*
|
|
17
|
+
* @param header - the header prop of CardHeader
|
|
18
|
+
*/ function getChildWithId(header) {
|
|
19
|
+
function isReactElementWithIdProp(element) {
|
|
20
|
+
return /*#__PURE__*/ _react.isValidElement(element) && Boolean(element.props.id);
|
|
21
|
+
}
|
|
22
|
+
return _react.Children.toArray(header).find(isReactElementWithIdProp);
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Returns the id to use for the CardHeader root element.
|
|
26
|
+
*
|
|
27
|
+
* @param headerId - the id prop of the CardHeader component
|
|
28
|
+
* @param childWithId - the first child of the CardHeader component with an id prop
|
|
29
|
+
* @param generatedId - a generated id
|
|
30
|
+
*
|
|
31
|
+
* @returns the id to use for the CardHeader root element
|
|
32
|
+
*/ function getReferenceId(headerId, childWithId, generatedId) {
|
|
33
|
+
if (headerId) {
|
|
34
|
+
return headerId;
|
|
35
|
+
}
|
|
36
|
+
if (childWithId === null || childWithId === void 0 ? void 0 : childWithId.props.id) {
|
|
37
|
+
return childWithId.props.id;
|
|
38
|
+
}
|
|
39
|
+
return generatedId;
|
|
40
|
+
}
|
|
14
41
|
const useCardHeader_unstable = (props, ref)=>{
|
|
15
42
|
const { image , header , description , action } = props;
|
|
16
43
|
const { selectableA11yProps: { referenceId , setReferenceId } } = (0, _cardContext.useCardContext_unstable)();
|
|
17
44
|
const headerRef = _react.useRef(null);
|
|
45
|
+
const hasChildId = _react.useRef(false);
|
|
18
46
|
const generatedId = (0, _reactUtilities.useId)(_useCardHeaderStylesStyles.cardHeaderClassNames.header, referenceId);
|
|
19
47
|
_react.useEffect(()=>{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
48
|
+
var _headerRef_current;
|
|
49
|
+
const headerId = !hasChildId.current ? (_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.id : undefined;
|
|
50
|
+
const childWithId = getChildWithId(header);
|
|
51
|
+
hasChildId.current = Boolean(childWithId);
|
|
52
|
+
setReferenceId(getReferenceId(headerId, childWithId, generatedId));
|
|
24
53
|
}, [
|
|
54
|
+
generatedId,
|
|
25
55
|
header,
|
|
26
|
-
setReferenceId
|
|
27
|
-
generatedId
|
|
56
|
+
setReferenceId
|
|
28
57
|
]);
|
|
29
58
|
return {
|
|
30
59
|
components: {
|
|
@@ -43,7 +72,7 @@ const useCardHeader_unstable = (props, ref)=>{
|
|
|
43
72
|
required: true,
|
|
44
73
|
defaultProps: {
|
|
45
74
|
ref: headerRef,
|
|
46
|
-
id: referenceId
|
|
75
|
+
id: !hasChildId.current ? referenceId : undefined
|
|
47
76
|
}
|
|
48
77
|
}),
|
|
49
78
|
description: (0, _reactUtilities.resolveShorthand)(description),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\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 generatedId = useId(cardHeaderClassNames.header, referenceId);\n React.useEffect(()=>{\n
|
|
1
|
+
{"version":3,"sources":["useCardHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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 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(header);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [\n generatedId,\n header,\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: getNativeElementProps('div', {\n ref,\n ...props\n }),\n image: resolveShorthand(image),\n header: resolveShorthand(header, {\n required: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined\n }\n }),\n description: resolveShorthand(description),\n action: resolveShorthand(action)\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","useEffect","_headerRef_current","current","undefined","components","root","getNativeElementProps","resolveShorthand","required","defaultProps"],"mappings":";;;;+BAuCiBA;;aAAAA;;;6DAvCM;gCACwC;6BACvB;2CACH;AACrC;;;;CAIC,GAAG,SAASC,eAAeC,MAAM,EAAE;IAChC,SAASC,yBAAyBC,OAAO,EAAE;QACvC,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,EAAE;IAC5D,IAAIF,UAAU;QACV,OAAOA;IACX,CAAC;IACD,IAAIC,gBAAgB,IAAI,IAAIA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYP,KAAK,CAACC,EAAE,EAAE;QAChF,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC/B,CAAC;IACD,OAAOO;AACX;AASW,MAAMhB,yBAAyB,CAACQ,OAAOS,MAAM;IACpD,MAAM,EAAEC,MAAK,EAAGhB,OAAM,EAAGiB,YAAW,EAAGC,OAAM,EAAG,GAAGZ;IACnD,MAAM,EAAEa,qBAAqB,EAAEC,YAAW,EAAGC,eAAc,EAAG,CAAA,EAAG,GAAGC,IAAAA,oCAAuB;IAC3F,MAAMC,YAAYpB,OAAMqB,MAAM,CAAC,IAAI;IACnC,MAAMC,aAAatB,OAAMqB,MAAM,CAAC,KAAK;IACrC,MAAMV,cAAcY,IAAAA,qBAAK,EAACC,+CAAoB,CAAC3B,MAAM,EAAEoB;IACvDjB,OAAMyB,SAAS,CAAC,IAAI;QAChB,IAAIC;QACJ,MAAMjB,WAAW,CAACa,WAAWK,OAAO,GAAG,AAACD,CAAAA,qBAAqBN,UAAUO,OAAO,AAAD,MAAO,IAAI,IAAID,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmBtB,EAAE,GAAGwB,SAAS;QACtK,MAAMlB,cAAcd,eAAeC;QACnCyB,WAAWK,OAAO,GAAGzB,QAAQQ;QAC7BQ,eAAeV,eAAeC,UAAUC,aAAaC;IACzD,GAAG;QACCA;QACAd;QACAqB;KACH;IACD,OAAO;QACHW,YAAY;YACRC,MAAM;YACNjB,OAAO;YACPhB,QAAQ;YACRiB,aAAa;YACbC,QAAQ;QACZ;QACAe,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BnB;YACA,GAAGT,KAAK;QACZ;QACAU,OAAOmB,IAAAA,gCAAgB,EAACnB;QACxBhB,QAAQmC,IAAAA,gCAAgB,EAACnC,QAAQ;YAC7BoC,UAAU,IAAI;YACdC,cAAc;gBACVtB,KAAKQ;gBACLhB,IAAI,CAACkB,WAAWK,OAAO,GAAGV,cAAcW,SAAS;YACrD;QACJ;QACAd,aAAakB,IAAAA,gCAAgB,EAAClB;QAC9BC,QAAQiB,IAAAA,gCAAgB,EAACjB;IAC7B;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230622-0414.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -30,19 +30,19 @@
|
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@fluentui/eslint-plugin": "*",
|
|
33
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
34
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-button": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230622-0414.1",
|
|
34
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20230622-0414.1",
|
|
35
|
+
"@fluentui/react-button": "0.0.0-nightly-20230622-0414.1",
|
|
36
36
|
"@fluentui/scripts-api-extractor": "*",
|
|
37
37
|
"@fluentui/scripts-cypress": "*",
|
|
38
38
|
"@fluentui/scripts-tasks": "*"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@fluentui/keyboard-keys": "0.0.0-nightly-
|
|
42
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
43
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
44
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
45
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
41
|
+
"@fluentui/keyboard-keys": "0.0.0-nightly-20230622-0414.1",
|
|
42
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20230622-0414.1",
|
|
43
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230622-0414.1",
|
|
44
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230622-0414.1",
|
|
45
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20230622-0414.1",
|
|
46
46
|
"@griffel/react": "^1.5.7",
|
|
47
47
|
"@swc/helpers": "^0.4.14"
|
|
48
48
|
},
|