@fluentui/react-card 9.0.88 → 9.0.89
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.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 06 Aug 2024 21:39:51 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.89](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.89)
|
|
8
|
+
|
|
9
|
+
Tue, 06 Aug 2024 21:39:51 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.88..@fluentui/react-card_v9.0.89)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Card does not override specified focusMode based on event listeners ([PR #32200](https://github.com/microsoft/fluentui/pull/32200) by sarah.higley@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [9.0.88](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.88)
|
|
8
17
|
|
|
9
|
-
Tue, 30 Jul 2024 18:
|
|
18
|
+
Tue, 30 Jul 2024 18:47:32 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.87..@fluentui/react-card_v9.0.88)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -16,7 +16,7 @@ const focusMap = {
|
|
|
16
16
|
* and control focus properties based on that.
|
|
17
17
|
*
|
|
18
18
|
* @param props - props from this instance of Card
|
|
19
|
-
*/ const useCardInteractive = ({ focusMode
|
|
19
|
+
*/ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
|
|
20
20
|
const interactive = [
|
|
21
21
|
'onClick',
|
|
22
22
|
'onDoubleClick',
|
|
@@ -29,8 +29,10 @@ const focusMap = {
|
|
|
29
29
|
'onDragStart',
|
|
30
30
|
'onDragEnd'
|
|
31
31
|
].some((prop)=>props[prop]);
|
|
32
|
+
// default focusMode to tab-only when interactive, and off when not
|
|
33
|
+
const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
|
|
32
34
|
const groupperAttrs = useFocusableGroup({
|
|
33
|
-
tabBehavior: focusMap[
|
|
35
|
+
tabBehavior: focusMap[focusMode]
|
|
34
36
|
});
|
|
35
37
|
const interactiveFocusAttributes = {
|
|
36
38
|
...groupperAttrs,
|
|
@@ -38,7 +40,7 @@ const focusMap = {
|
|
|
38
40
|
};
|
|
39
41
|
return {
|
|
40
42
|
interactive,
|
|
41
|
-
focusAttributes:
|
|
43
|
+
focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
|
|
42
44
|
};
|
|
43
45
|
};
|
|
44
46
|
/**
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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: initialFocusMode, ...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 // default focusMode to tab-only when interactive, and off when not\n const focusMode = initialFocusMode ?? (interactive ? 'no-tab' : 'off');\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[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 ...(!selectable ? focusAttributes : null),\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","initialFocusMode","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,WAAWC,gBAAgB,EAAE,GAAGC,OAAkB;IAC9E,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,mEAAmE;IACnE,MAAML,YAAYC,6BAAAA,8BAAAA,mBAAqBE,cAAc,WAAW;IAEhE,MAAMG,gBAAgBd,kBAAkB;QACtCe,aAAaX,QAAQ,CAACI,UAAU;IAClC;IAEA,MAAMQ,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiBV,cAAc,QAAQ,OAAOQ;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,GAAG7B,MAAM8B,QAAQ,CAACvB,wBAAwBwB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGjC,MAAM8B,QAAQ,CAACvB,wBAAwBwB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc7B;IACpB,MAAM,EAAE8B,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGlC,kBAAkBQ,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUvC,cAAcgC,aAAaV;IAE3C,MAAM,EAAET,WAAW,EAAEO,eAAe,EAAE,GAAGX,mBAAmBG;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,MAAMxC,KAAK2C,MAAM,CACf7C,yBAAyB,OAAO;YAC9BuB,KAAKiB;YACLM,MAAM;YACN,GAAI,CAACZ,aAAab,kBAAkB,IAAI;YACxC,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,IACA;YAAEW,aAAa;QAAM;QAGvBJ,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}
|
|
@@ -27,7 +27,7 @@ const focusMap = {
|
|
|
27
27
|
* and control focus properties based on that.
|
|
28
28
|
*
|
|
29
29
|
* @param props - props from this instance of Card
|
|
30
|
-
*/ const useCardInteractive = ({ focusMode
|
|
30
|
+
*/ const useCardInteractive = ({ focusMode: initialFocusMode, ...props })=>{
|
|
31
31
|
const interactive = [
|
|
32
32
|
'onClick',
|
|
33
33
|
'onDoubleClick',
|
|
@@ -40,8 +40,10 @@ const focusMap = {
|
|
|
40
40
|
'onDragStart',
|
|
41
41
|
'onDragEnd'
|
|
42
42
|
].some((prop)=>props[prop]);
|
|
43
|
+
// default focusMode to tab-only when interactive, and off when not
|
|
44
|
+
const focusMode = initialFocusMode !== null && initialFocusMode !== void 0 ? initialFocusMode : interactive ? 'no-tab' : 'off';
|
|
43
45
|
const groupperAttrs = (0, _reacttabster.useFocusableGroup)({
|
|
44
|
-
tabBehavior: focusMap[
|
|
46
|
+
tabBehavior: focusMap[focusMode]
|
|
45
47
|
});
|
|
46
48
|
const interactiveFocusAttributes = {
|
|
47
49
|
...groupperAttrs,
|
|
@@ -49,7 +51,7 @@ const focusMap = {
|
|
|
49
51
|
};
|
|
50
52
|
return {
|
|
51
53
|
interactive,
|
|
52
|
-
focusAttributes:
|
|
54
|
+
focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes
|
|
53
55
|
};
|
|
54
56
|
};
|
|
55
57
|
const useCard_unstable = (props, ref)=>{
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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: initialFocusMode, ...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 // default focusMode to tab-only when interactive, and off when not\n const focusMode = initialFocusMode ?? (interactive ? 'no-tab' : 'off');\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[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 ...(!selectable ? focusAttributes : null),\n ...props,\n ...selectableCardProps,\n }),\n { elementType: 'div' },\n ),\n\n floatingAction: floatingActionSlot,\n checkbox: checkboxSlot,\n };\n};\n"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","initialFocusMode","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkEaA;;;eAAAA;;;;iEAlEU;gCACuC;8BACZ;mCAGhB;6BACM;AAExC,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,WAAWC,gBAAgB,EAAE,GAAGC,OAAkB;IAC9E,MAAMC,cAAc;QAEhB;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,mEAAmE;IACnE,MAAML,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAqBE,cAAc,WAAW;IAEhE,MAAMG,gBAAgBC,IAAAA,+BAAAA,EAAkB;QACtCC,aAAaZ,QAAQ,CAACI,UAAU;IAClC;IAEA,MAAMS,6BAA6B;QACjC,GAAGH,aAAa;QAChBI,UAAU;IACZ;IAEA,OAAO;QACLP;QACAQ,iBAAiBX,cAAc,QAAQ,OAAOS;IAChD;AACF;AAWO,MAAMd,mBAAmB,CAACO,OAAkBU;IACjD,MAAM,EAAEC,aAAa,QAAQ,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAAA,CAAwBC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAAA,CAAwBC,mBAAmB,CAACL,WAAW;IAElH,MAAMQ,cAAcC,IAAAA,4BAAAA;IACpB,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,mBAAmB,EAAEC,aAAa,EAAEC,YAAY,EAAEC,kBAAkB,EAAE,GAClGC,IAAAA,oCAAAA,EAAkB9B,OAAO;QAAEc;QAAaM;IAAe,GAAGE;IAE5D,MAAMS,UAAUC,IAAAA,6BAAAA,EAAcV,aAAaZ;IAE3C,MAAM,EAAET,WAAW,EAAEQ,eAAe,EAAE,GAAGZ,mBAAmBG;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACnBJ;YACAD;YACAM;YACAC;QACF;QAEAY,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMG,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B7B,KAAKqB;YACLS,MAAM;YACN,GAAI,CAAChB,aAAaf,kBAAkB,IAAI;YACxC,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QACxB,IACA;YAAEe,aAAa;QAAM;QAGvBN,gBAAgBN;QAChBO,UAAUR;IACZ;AACF"}
|