@fluentui/react-card 9.0.0-beta.43 → 9.0.0-beta.44
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 +34 -1
- package/CHANGELOG.md +14 -2
- package/lib/components/Card/useCard.js +5 -5
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardSelectable.js +16 -5
- package/lib/components/Card/useCardSelectable.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +4 -4
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardSelectable.js +16 -5
- package/lib-commonjs/components/Card/useCardSelectable.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,40 @@
|
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 10 Feb 2023 08:46:43 GMT",
|
|
6
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.44",
|
|
7
|
+
"version": "9.0.0-beta.44",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "marcosvmmoura@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-card",
|
|
13
|
+
"commit": "43a79058970c5e18c912b1a5a47e776ad8b72465",
|
|
14
|
+
"comment": "fix: keyboard navigation not working for select elements"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-card",
|
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.5.1",
|
|
20
|
+
"commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-card",
|
|
25
|
+
"comment": "Bump @fluentui/react-utilities to v9.5.2",
|
|
26
|
+
"commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-card",
|
|
31
|
+
"comment": "Bump @fluentui/react-button to v9.2.3",
|
|
32
|
+
"commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Tue, 07 Feb 2023 14:13:09 GMT",
|
|
6
39
|
"tag": "@fluentui/react-card_v9.0.0-beta.43",
|
|
7
40
|
"version": "9.0.0-beta.43",
|
|
8
41
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 10 Feb 2023 08:46:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.44)
|
|
8
|
+
|
|
9
|
+
Fri, 10 Feb 2023 08:46:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.43..@fluentui/react-card_v9.0.0-beta.44)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: keyboard navigation not working for select elements ([PR #26612](https://github.com/microsoft/fluentui/pull/26612) by marcosvmmoura@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.5.1 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
|
|
17
|
+
- Bump @fluentui/react-button to v9.2.3 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
|
|
18
|
+
|
|
7
19
|
## [9.0.0-beta.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.43)
|
|
8
20
|
|
|
9
|
-
Tue, 07 Feb 2023 14:
|
|
21
|
+
Tue, 07 Feb 2023 14:13:09 GMT
|
|
10
22
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.42..@fluentui/react-card_v9.0.0-beta.43)
|
|
11
23
|
|
|
12
24
|
### Changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getNativeElementProps,
|
|
2
|
+
import { getNativeElementProps, useMergedRefs } 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';
|
|
@@ -47,8 +47,7 @@ export const useCard_unstable = (props, ref) => {
|
|
|
47
47
|
const {
|
|
48
48
|
appearance = 'filled',
|
|
49
49
|
orientation = 'vertical',
|
|
50
|
-
size = 'medium'
|
|
51
|
-
floatingAction
|
|
50
|
+
size = 'medium'
|
|
52
51
|
} = props;
|
|
53
52
|
const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
|
|
54
53
|
const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);
|
|
@@ -58,7 +57,8 @@ export const useCard_unstable = (props, ref) => {
|
|
|
58
57
|
selected,
|
|
59
58
|
selectableCardProps,
|
|
60
59
|
selectFocused,
|
|
61
|
-
checkboxSlot
|
|
60
|
+
checkboxSlot,
|
|
61
|
+
floatingActionSlot
|
|
62
62
|
} = useCardSelectable(props, {
|
|
63
63
|
referenceId,
|
|
64
64
|
referenceLabel
|
|
@@ -94,7 +94,7 @@ export const useCard_unstable = (props, ref) => {
|
|
|
94
94
|
...props,
|
|
95
95
|
...selectableCardProps
|
|
96
96
|
}),
|
|
97
|
-
floatingAction:
|
|
97
|
+
floatingAction: floatingActionSlot,
|
|
98
98
|
checkbox: checkboxSlot
|
|
99
99
|
};
|
|
100
100
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,yBAAyB;AAG3E,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,uBAAuB,QAAQ,eAAe;AAEvD,MAAMC,QAAQ,GAAG;EACfC,GAAG,EAAEC,SAAS;EACd,QAAQ,EAAE,oBAAoB;EAC9B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE;CACJ;AAEV;;;;;;;;AAQA,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,SAAS,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAa,KAAI;EACxE,MAAMC,WAAW,GAAI,CACnB,SAAS,EACT,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,CACoC,CAACC,IAAI,CAACC,IAAI,IAAIH,KAAK,CAACG,IAAI,CAAC,CAAC;EAE3E,MAAMC,aAAa,GAAGb,iBAAiB,CAAC;IACtCc,WAAW,EAAEV,QAAQ,CAACM,WAAW,GAAG,QAAQ,GAAGF,SAAS;GACzD,CAAC;EAEF,MAAMO,0BAA0B,GAAG;IACjC,GAAGF,aAAa;IAChBG,QAAQ,EAAE;GACX;EAED,OAAO;IACLN,WAAW;IACXO,eAAe,EAAET,SAAS,KAAK,KAAK,GAAG,IAAI,GAAGO;GAC/C;AACH,CAAC;AAED;;;;;;;;;AASA,OAAO,MAAMG,gBAAgB,GAAG,CAACT,KAAgB,EAAEU,GAA8B,KAAe;EAC9F,MAAM;IAAEC,UAAU,GAAG,QAAQ;IAAEC,WAAW,GAAG,UAAU;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGb,KAAK;EAElF,MAAM,CAACc,WAAW,EAAEC,cAAc,CAAC,GAAG3B,KAAK,CAAC4B,QAAQ,CAACtB,uBAAuB,CAACuB,mBAAmB,CAACH,WAAW,CAAC;EAC7G,MAAM,CAACI,cAAc,EAAEC,iBAAiB,CAAC,GAAG/B,KAAK,CAAC4B,QAAQ,CAACtB,uBAAuB,CAACuB,mBAAmB,CAACH,WAAW,CAAC;EAEnH,MAAMM,WAAW,GAAG5B,cAAc,EAAkB;EACpD,MAAM;IACJ6B,UAAU;IACVC,QAAQ;IACRC,mBAAmB;IACnBC,aAAa;IACbC,YAAY;IACZC;EAAkB,CACnB,GAAGjC,iBAAiB,CAACO,KAAK,EAAE;IAAEc,WAAW;IAAEI;EAAc,CAAE,EAAEE,WAAW,CAAC;EAE1E,MAAMO,OAAO,GAAGrC,aAAa,CAAC8B,WAAW,EAAEV,GAAG,CAAC;EAE/C,MAAM;IAAET,WAAW;IAAEO;EAAe,CAAE,GAAGV,kBAAkB,CAACE,KAAK,CAAC;EAElE,OAAO;IACLW,UAAU;IACVC,WAAW;IACXC,IAAI;IACJZ,WAAW;IACXoB,UAAU;IACVG,aAAa;IACbF,QAAQ;IACRL,mBAAmB,EAAE;MACnBF,cAAc;MACdD,WAAW;MACXI,cAAc;MACdC;KACD;IAEDS,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,cAAc,EAAE,KAAK;MACrBC,QAAQ,EAAE;KACX;IAEDF,IAAI,EAAExC,qBAAqB,CAAC,KAAK,EAAE;MACjCqB,GAAG,EAAEiB,OAAO;MACZK,IAAI,EAAE,OAAO;MACb,GAAGxB,eAAe;MAClB,GAAGR,KAAK;MACR,GAAGuB;KACJ,CAAC;IAEFO,cAAc,EAAEJ,kBAAkB;IAClCK,QAAQ,EAAEN;GACX;AACH,CAAC","names":["React","getNativeElementProps","useMergedRefs","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","role"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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' } = 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 {\n selectable,\n selected,\n selectableCardProps,\n selectFocused,\n checkboxSlot,\n 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: 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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { Enter, Space } from '@fluentui/keyboard-keys';
|
|
3
2
|
import { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
|
|
3
|
+
import { Enter } from '@fluentui/keyboard-keys';
|
|
4
4
|
import { useFocusFinders } from '@fluentui/react-tabster';
|
|
5
5
|
/**
|
|
6
6
|
* @internal
|
|
@@ -57,13 +57,13 @@ export const useCardSelectable = (props, {
|
|
|
57
57
|
}
|
|
58
58
|
}, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
|
|
59
59
|
const onKeyDownHandler = React.useCallback(event => {
|
|
60
|
-
if ([Enter
|
|
60
|
+
if ([Enter].includes(event.key)) {
|
|
61
61
|
event.preventDefault();
|
|
62
62
|
onChangeHandler(event);
|
|
63
63
|
}
|
|
64
64
|
}, [onChangeHandler]);
|
|
65
65
|
const checkboxSlot = React.useMemo(() => {
|
|
66
|
-
if (!isSelectable ||
|
|
66
|
+
if (!isSelectable || floatingAction) {
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
69
|
const selectableCheckboxProps = {};
|
|
@@ -83,7 +83,17 @@ export const useCardSelectable = (props, {
|
|
|
83
83
|
...selectableCheckboxProps
|
|
84
84
|
}
|
|
85
85
|
});
|
|
86
|
-
}, [
|
|
86
|
+
}, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);
|
|
87
|
+
const floatingActionSlot = React.useMemo(() => {
|
|
88
|
+
if (!floatingAction) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
return resolveShorthand(floatingAction, {
|
|
92
|
+
defaultProps: {
|
|
93
|
+
ref: checkboxRef
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}, [floatingAction]);
|
|
87
97
|
const selectableCardProps = React.useMemo(() => {
|
|
88
98
|
if (!isSelectable) {
|
|
89
99
|
return null;
|
|
@@ -99,7 +109,8 @@ export const useCardSelectable = (props, {
|
|
|
99
109
|
selectable: isSelectable,
|
|
100
110
|
selectFocused: isSelectFocused,
|
|
101
111
|
selectableCardProps,
|
|
102
|
-
checkboxSlot
|
|
112
|
+
checkboxSlot,
|
|
113
|
+
floatingActionSlot
|
|
103
114
|
};
|
|
104
115
|
};
|
|
105
116
|
//# sourceMappingURL=useCardSelectable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,
|
|
1
|
+
{"version":3,"mappings":"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","names":["React","mergeCallbacks","resolveShorthand","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\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].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 }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n const floatingActionSlot = React.useMemo(() => {\n if (!floatingAction) {\n return;\n }\n\n return resolveShorthand(floatingAction, {\n defaultProps: {\n ref: checkboxRef,\n },\n });\n }, [floatingAction]);\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 floatingActionSlot,\n };\n};\n"]}
|
|
@@ -53,8 +53,7 @@ const useCard_unstable = (props, ref) => {
|
|
|
53
53
|
const {
|
|
54
54
|
appearance = 'filled',
|
|
55
55
|
orientation = 'vertical',
|
|
56
|
-
size = 'medium'
|
|
57
|
-
floatingAction
|
|
56
|
+
size = 'medium'
|
|
58
57
|
} = props;
|
|
59
58
|
const [referenceId, setReferenceId] = React.useState(CardContext_1.cardContextDefaultValue.selectableA11yProps.referenceId);
|
|
60
59
|
const [referenceLabel, setReferenceLabel] = React.useState(CardContext_1.cardContextDefaultValue.selectableA11yProps.referenceId);
|
|
@@ -64,7 +63,8 @@ const useCard_unstable = (props, ref) => {
|
|
|
64
63
|
selected,
|
|
65
64
|
selectableCardProps,
|
|
66
65
|
selectFocused,
|
|
67
|
-
checkboxSlot
|
|
66
|
+
checkboxSlot,
|
|
67
|
+
floatingActionSlot
|
|
68
68
|
} = useCardSelectable_1.useCardSelectable(props, {
|
|
69
69
|
referenceId,
|
|
70
70
|
referenceLabel
|
|
@@ -100,7 +100,7 @@ const useCard_unstable = (props, ref) => {
|
|
|
100
100
|
...props,
|
|
101
101
|
...selectableCardProps
|
|
102
102
|
}),
|
|
103
|
-
floatingAction:
|
|
103
|
+
floatingAction: floatingActionSlot,
|
|
104
104
|
checkbox: checkboxSlot
|
|
105
105
|
};
|
|
106
106
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;AACA;AAEA,MAAMA,QAAQ,GAAG;EACfC,GAAG,EAAEC,SAAS;EACd,QAAQ,EAAE,oBAAoB;EAC9B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE;CACJ;AAEV;;;;;;;;AAQA,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,SAAS,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAa,KAAI;EACxE,MAAMC,WAAW,GAAI,CACnB,SAAS,EACT,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,CACoC,CAACC,IAAI,CAACC,IAAI,IAAIH,KAAK,CAACG,IAAI,CAAC,CAAC;EAE3E,MAAMC,aAAa,GAAGC,iCAAiB,CAAC;IACtCC,WAAW,EAAEX,QAAQ,CAACM,WAAW,GAAG,QAAQ,GAAGF,SAAS;GACzD,CAAC;EAEF,MAAMQ,0BAA0B,GAAG;IACjC,GAAGH,aAAa;IAChBI,QAAQ,EAAE;GACX;EAED,OAAO;IACLP,WAAW;IACXQ,eAAe,EAAEV,SAAS,KAAK,KAAK,GAAG,IAAI,GAAGQ;GAC/C;AACH,CAAC;AAED;;;;;;;;;AASO,MAAMG,gBAAgB,GAAG,CAACV,KAAgB,EAAEW,GAA8B,KAAe;EAC9F,MAAM;IAAEC,UAAU,GAAG,QAAQ;IAAEC,WAAW,GAAG,UAAU;IAAEC,IAAI,GAAG
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;AACA;AAEA,MAAMA,QAAQ,GAAG;EACfC,GAAG,EAAEC,SAAS;EACd,QAAQ,EAAE,oBAAoB;EAC9B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE;CACJ;AAEV;;;;;;;;AAQA,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,SAAS,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAa,KAAI;EACxE,MAAMC,WAAW,GAAI,CACnB,SAAS,EACT,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,CACoC,CAACC,IAAI,CAACC,IAAI,IAAIH,KAAK,CAACG,IAAI,CAAC,CAAC;EAE3E,MAAMC,aAAa,GAAGC,iCAAiB,CAAC;IACtCC,WAAW,EAAEX,QAAQ,CAACM,WAAW,GAAG,QAAQ,GAAGF,SAAS;GACzD,CAAC;EAEF,MAAMQ,0BAA0B,GAAG;IACjC,GAAGH,aAAa;IAChBI,QAAQ,EAAE;GACX;EAED,OAAO;IACLP,WAAW;IACXQ,eAAe,EAAEV,SAAS,KAAK,KAAK,GAAG,IAAI,GAAGQ;GAC/C;AACH,CAAC;AAED;;;;;;;;;AASO,MAAMG,gBAAgB,GAAG,CAACV,KAAgB,EAAEW,GAA8B,KAAe;EAC9F,MAAM;IAAEC,UAAU,GAAG,QAAQ;IAAEC,WAAW,GAAG,UAAU;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGd,KAAK;EAElF,MAAM,CAACe,WAAW,EAAEC,cAAc,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAACC,qCAAuB,CAACC,mBAAmB,CAACL,WAAW,CAAC;EAC7G,MAAM,CAACM,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,KAAK,CAACC,QAAQ,CAACC,qCAAuB,CAACC,mBAAmB,CAACL,WAAW,CAAC;EAEnH,MAAMQ,WAAW,GAAGlB,8BAAc,EAAkB;EACpD,MAAM;IACJmB,UAAU;IACVC,QAAQ;IACRC,mBAAmB;IACnBC,aAAa;IACbC,YAAY;IACZC;EAAkB,CACnB,GAAGC,qCAAiB,CAAC9B,KAAK,EAAE;IAAEe,WAAW;IAAEM;EAAc,CAAE,EAAEE,WAAW,CAAC;EAE1E,MAAMQ,OAAO,GAAGC,+BAAa,CAACT,WAAW,EAAEZ,GAAG,CAAC;EAE/C,MAAM;IAAEV,WAAW;IAAEQ;EAAe,CAAE,GAAGX,kBAAkB,CAACE,KAAK,CAAC;EAElE,OAAO;IACLY,UAAU;IACVC,WAAW;IACXC,IAAI;IACJb,WAAW;IACXuB,UAAU;IACVG,aAAa;IACbF,QAAQ;IACRL,mBAAmB,EAAE;MACnBJ,cAAc;MACdD,WAAW;MACXM,cAAc;MACdC;KACD;IAEDW,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,cAAc,EAAE,KAAK;MACrBC,QAAQ,EAAE;KACX;IAEDF,IAAI,EAAEF,uCAAqB,CAAC,KAAK,EAAE;MACjCrB,GAAG,EAAEoB,OAAO;MACZM,IAAI,EAAE,OAAO;MACb,GAAG5B,eAAe;MAClB,GAAGT,KAAK;MACR,GAAG0B;KACJ,CAAC;IAEFS,cAAc,EAAEN,kBAAkB;IAClCO,QAAQ,EAAER;GACX;AACH,CAAC;AApDYU,wBAAgB","names":["focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","react_tabster_1","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","CardContext_1","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable_1","cardRef","react_utilities_1","components","root","floatingAction","checkbox","role","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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' } = 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 {\n selectable,\n selected,\n selectableCardProps,\n selectFocused,\n checkboxSlot,\n 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: 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"]}
|
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useCardSelectable = void 0;
|
|
7
7
|
const React = /*#__PURE__*/require("react");
|
|
8
|
-
const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
|
|
9
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
+
const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
|
|
10
10
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
11
|
/**
|
|
12
12
|
* @internal
|
|
@@ -63,13 +63,13 @@ const useCardSelectable = (props, {
|
|
|
63
63
|
}
|
|
64
64
|
}, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
|
|
65
65
|
const onKeyDownHandler = React.useCallback(event => {
|
|
66
|
-
if ([keyboard_keys_1.Enter
|
|
66
|
+
if ([keyboard_keys_1.Enter].includes(event.key)) {
|
|
67
67
|
event.preventDefault();
|
|
68
68
|
onChangeHandler(event);
|
|
69
69
|
}
|
|
70
70
|
}, [onChangeHandler]);
|
|
71
71
|
const checkboxSlot = React.useMemo(() => {
|
|
72
|
-
if (!isSelectable ||
|
|
72
|
+
if (!isSelectable || floatingAction) {
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
75
|
const selectableCheckboxProps = {};
|
|
@@ -89,7 +89,17 @@ const useCardSelectable = (props, {
|
|
|
89
89
|
...selectableCheckboxProps
|
|
90
90
|
}
|
|
91
91
|
});
|
|
92
|
-
}, [
|
|
92
|
+
}, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);
|
|
93
|
+
const floatingActionSlot = React.useMemo(() => {
|
|
94
|
+
if (!floatingAction) {
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
return react_utilities_1.resolveShorthand(floatingAction, {
|
|
98
|
+
defaultProps: {
|
|
99
|
+
ref: checkboxRef
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
}, [floatingAction]);
|
|
93
103
|
const selectableCardProps = React.useMemo(() => {
|
|
94
104
|
if (!isSelectable) {
|
|
95
105
|
return null;
|
|
@@ -105,7 +115,8 @@ const useCardSelectable = (props, {
|
|
|
105
115
|
selectable: isSelectable,
|
|
106
116
|
selectFocused: isSelectFocused,
|
|
107
117
|
selectableCardProps,
|
|
108
|
-
checkboxSlot
|
|
118
|
+
checkboxSlot,
|
|
119
|
+
floatingActionSlot
|
|
109
120
|
};
|
|
110
121
|
};
|
|
111
122
|
exports.useCardSelectable = useCardSelectable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;;;;;;;;;;AAYO,MAAMA,iBAAiB,GAAG,CAC/BC,KAAgB,EAChB;EAAEC,cAAc;EAAEC;AAAW,CAAmF,EAChHC,OAAwC,KACtC;EACF,MAAM;IAAEC,QAAQ,GAAG,EAAE;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,iBAAiB;IAAEC,cAAc;IAAEC,OAAO;IAAEC;EAAS,CAAE,GAAGV,KAAK;EAEjH,MAAM;IAAEW;EAAgB,CAAE,GAAGC,+BAAe,EAAE;EAE9C,MAAMC,WAAW,GAAGC,KAAK,CAACC,MAAM,CAAmB,IAAI,CAAC;EAExD,MAAMC,YAAY,GAAG,CAACX,QAAQ,EAAEC,eAAe,EAAEC,iBAAiB,CAAC,CAACU,IAAI,CAACC,IAAI,IAAI,OAAOA,IAAI,KAAK,WAAW,CAAC;EAE7G,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGN,KAAK,CAACO,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGT,KAAK,CAACO,QAAQ,CAAC,KAAK,CAAC;EAEnE,MAAMG,2BAA2B,GAAGV,KAAK,CAACW,WAAW,CAClDC,KAAiC,IAAI;IACpC,IAAI,CAACvB,OAAO,CAACwB,OAAO,EAAE;MACpB,OAAO,KAAK;;IAGd,MAAMC,iBAAiB,GAAGjB,gBAAgB,CAACR,OAAO,CAACwB,OAAO,CAAC;IAC3D,MAAME,MAAM,GAAGH,KAAK,CAACG,MAAqB;IAC1C,MAAMC,yBAAyB,GAAGF,iBAAiB,CAACX,IAAI,CAACc,OAAO,IAAIA,OAAO,CAACC,QAAQ,CAACH,MAAM,CAAC,CAAC;IAC7F,MAAMI,cAAc,GAAG,YAAW,aAAXpB,WAAW,uBAAXA,WAAW,CAAEc,OAAO,MAAKE,MAAM;IAEtD,OAAOC,yBAAyB,IAAI,CAACG,cAAc;EACrD,CAAC,EACD,CAAC9B,OAAO,EAAEQ,gBAAgB,CAAC,CAC5B;EAED,MAAMuB,eAAe,GAAGpB,KAAK,CAACW,WAAW,CACtCC,KAAiC,IAAI;IACpC,IAAIF,2BAA2B,CAACE,KAAK,CAAC,EAAE;MACtC;;IAGF,MAAMS,eAAe,GAAG,CAAChB,cAAc;IAEvCC,iBAAiB,CAACe,eAAe,CAAC;IAElC,IAAI5B,iBAAiB,EAAE;MACrBA,iBAAiB,CAACmB,KAAK,EAAE;QAAErB,QAAQ,EAAE8B;MAAe,CAAE,CAAC;;EAE3D,CAAC,EACD,CAAC5B,iBAAiB,EAAEY,cAAc,EAAEK,2BAA2B,CAAC,CACjE;EAED,MAAMY,gBAAgB,GAAGtB,KAAK,CAACW,WAAW,CACvCC,KAAuC,IAAI;IAC1C,IAAI,CAACW,qBAAK,
|
|
1
|
+
{"version":3,"mappings":"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","names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","react_tabster_1","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","keyboard_keys_1","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","react_utilities_1","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\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].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 }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n const floatingActionSlot = React.useMemo(() => {\n if (!floatingAction) {\n return;\n }\n\n return resolveShorthand(floatingAction, {\n defaultProps: {\n ref: checkboxRef,\n },\n });\n }, [floatingAction]);\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 floatingActionSlot,\n };\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.44",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -31,16 +31,16 @@
|
|
|
31
31
|
"@fluentui/eslint-plugin": "*",
|
|
32
32
|
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
33
33
|
"@fluentui/react-conformance": "*",
|
|
34
|
-
"@fluentui/react-button": "^9.2.
|
|
34
|
+
"@fluentui/react-button": "^9.2.3",
|
|
35
35
|
"@fluentui/scripts-api-extractor": "*",
|
|
36
36
|
"@fluentui/scripts-cypress": "*",
|
|
37
37
|
"@fluentui/scripts-tasks": "*"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@fluentui/keyboard-keys": "^9.0.1",
|
|
41
|
-
"@fluentui/react-tabster": "^9.5.
|
|
41
|
+
"@fluentui/react-tabster": "^9.5.1",
|
|
42
42
|
"@fluentui/react-theme": "^9.1.5",
|
|
43
|
-
"@fluentui/react-utilities": "^9.5.
|
|
43
|
+
"@fluentui/react-utilities": "^9.5.2",
|
|
44
44
|
"@griffel/react": "^1.5.2",
|
|
45
45
|
"tslib": "^2.1.0"
|
|
46
46
|
},
|