@fluentui/react-card 9.0.40 → 9.0.42

package/CHANGELOG.json

@@ -2,7 +2,103 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Wed, 20 Sep 2023 17:40:42 GMT",
+      "date": "Tue, 26 Sep 2023 17:44:08 GMT",
+      "tag": "@fluentui/react-card_v9.0.42",
+      "version": "9.0.42",
+      "comments": {
+        "patch": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d",
+            "comment": "chore: trigger manual version bump after broken release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.6",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.13.1",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-theme to v9.1.14",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.13.5",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.12",
+            "commit": "05a23f6f5f331841c9ac9fb63764440c543f791d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 26 Sep 2023 15:32:03 GMT",
+      "tag": "@fluentui/react-card_v9.0.41",
+      "version": "9.0.41",
+      "comments": {
+        "patch": [
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "c1ae0fb42575ae2deb11b32110538adbd0f652ad",
+            "comment": "fix: sync controllable state for selectable cards"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-card",
+            "commit": "e61473fa10195f6ebf2308205c1e72e91b711831",
+            "comment": "fix: bump swc core to mitigate transpilation memory leaks"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.5",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.13.0",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-theme to v9.1.13",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.13.4",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.11",
+            "commit": "e16520437e10cd824ac254dd797e32762b5de72d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Sep 2023 17:47:35 GMT",
       "tag": "@fluentui/react-card_v9.0.40",
       "version": "9.0.40",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Wed, 20 Sep 2023 17:40:42 GMT and should not be manually modified.
+This log was last generated on Tue, 26 Sep 2023 17:44:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.42](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.42)
+
+Tue, 26 Sep 2023 17:44:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.41..@fluentui/react-card_v9.0.42)
+
+### Patches
+
+- chore: trigger manual version bump after broken release ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by yuanboxue@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.6 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-tabster to v9.13.1 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-theme to v9.1.14 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-utilities to v9.13.5 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.12 ([PR #29303](https://github.com/microsoft/fluentui/pull/29303) by beachball)
+
+## [9.0.41](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.41)
+
+Tue, 26 Sep 2023 15:32:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.40..@fluentui/react-card_v9.0.41)
+
+### Patches
+
+- fix: sync controllable state for selectable cards ([PR #29276](https://github.com/microsoft/fluentui/pull/29276) by marcosvmmoura@gmail.com)
+- fix: bump swc core to mitigate transpilation memory leaks ([PR #29253](https://github.com/microsoft/fluentui/pull/29253) by martinhochel@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.5 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-tabster to v9.13.0 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-theme to v9.1.13 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-utilities to v9.13.4 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.11 ([PR #29300](https://github.com/microsoft/fluentui/pull/29300) by beachball)
+
 ## [9.0.40](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.40)
 
-Wed, 20 Sep 2023 17:40:42 GMT 
+Wed, 20 Sep 2023 17:47:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.39..@fluentui/react-card_v9.0.40)
 
 ### Patches

package/lib/components/Card/CardContext.js

@@ -15,7 +15,9 @@ const cardContext = React.createContext(undefined);
 /**
  * @internal
  */ export const CardProvider = cardContext.Provider;
-var _React_useContext;
 /**
  * @internal
- */ export const useCardContext_unstable = ()=>(_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;
+ */ export const useCardContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;
+};

package/lib/components/Card/CardContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CardContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */\n    },\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */\n    },\n  },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,cAAcD,MAAME,aAAa,CAA+BC;AAEtE;;CAEC,GACD,OAAO,MAAMC,0BAA4C;IACvDC,qBAAqB;QACnBC,aAAaH;QACbI;QACE,QAAQ,GACV;QACAC,gBAAgBL;QAChBM;QACE,QAAQ,GACV;IACF;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,eAAeT,YAAYU,QAAQ,CAAC;IAKJX;AAH7C;;CAEC,GACD,OAAO,MAAMY,0BAA0B,IAAMZ,CAAAA,oBAAAA,MAAMa,UAAU,CAACZ,0BAAjBD,+BAAAA,oBAAiCI,wBAAwB"}
+{"version":3,"sources":["CardContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */\n    },\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */\n    },\n  },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"],"names":["React","cardContext","createContext","undefined","cardContextDefaultValue","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","CardProvider","Provider","useCardContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,cAAcD,MAAME,aAAa,CAA+BC;AAEtE;;CAEC,GACD,OAAO,MAAMC,0BAA4C;IACvDC,qBAAqB;QACnBC,aAAaH;QACbI;QACE,QAAQ,GACV;QACAC,gBAAgBL;QAChBM;QACE,QAAQ,GACV;IACF;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,eAAeT,YAAYU,QAAQ,CAAC;AAEjD;;CAEC,GACD,OAAO,MAAMC,0BAA0B;QAAMZ;WAAAA,CAAAA,oBAAAA,MAAMa,UAAU,CAACZ,0BAAjBD,+BAAAA,oBAAiCI;AAAsB,EAAE"}

package/lib/components/Card/useCardSelectable.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mergeCallbacks, slot } from '@fluentui/react-utilities';
+import { mergeCallbacks, slot, useControllableState } from '@fluentui/react-utilities';
 import { Enter } from '@fluentui/keyboard-keys';
 import { useFocusFinders } from '@fluentui/react-tabster';
 /**
@@ -14,25 +14,28 @@ import { useFocusFinders } from '@fluentui/react-tabster';
  * @param a11yProps - accessibility props shared between elements of the card
  * @param ref - reference to the root element of Card
  */ export const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
-    const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;
+    const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown } = props;
     const { findAllFocusable } = useFocusFinders();
     const checkboxRef = React.useRef(null);
-    const isSelectable = [
-        selected,
-        defaultSelected,
+    const [selected, setSelected] = useControllableState({
+        state: props.selected,
+        defaultState: props.defaultSelected,
+        initialState: false
+    });
+    const selectable = [
+        props.selected,
+        props.defaultSelected,
         onSelectionChange
     ].some((prop)=>typeof prop !== 'undefined');
-    const [isCardSelected, setIsCardSelected] = React.useState(false);
-    const [isSelectFocused, setIsSelectFocused] = React.useState(false);
+    const [selectFocused, setSelectFocused] = React.useState(false);
     const shouldRestrictTriggerAction = React.useCallback((event)=>{
-        var _checkboxRef;
         if (!cardRef.current) {
             return false;
         }
         const focusableElements = findAllFocusable(cardRef.current);
         const target = event.target;
         const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
-        const isCheckboxSlot = ((_checkboxRef = checkboxRef) === null || _checkboxRef === void 0 ? void 0 : _checkboxRef.current) === target;
+        const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
         return isElementInFocusableGroup && !isCheckboxSlot;
     }, [
         cardRef,
@@ -42,8 +45,8 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         if (shouldRestrictTriggerAction(event)) {
             return;
         }
-        const newCheckedValue = !isCardSelected;
-        setIsCardSelected(newCheckedValue);
+        const newCheckedValue = !selected;
+        setSelected(newCheckedValue);
         if (onSelectionChange) {
             onSelectionChange(event, {
                 selected: newCheckedValue
@@ -51,7 +54,8 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         }
     }, [
         onSelectionChange,
-        isCardSelected,
+        selected,
+        setSelected,
         shouldRestrictTriggerAction
     ]);
     const onKeyDownHandler = React.useCallback((event)=>{
@@ -65,7 +69,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         onChangeHandler
     ]);
     const checkboxSlot = React.useMemo(()=>{
-        if (!isSelectable || floatingAction) {
+        if (!selectable || floatingAction) {
             return;
         }
         const selectableCheckboxProps = {};
@@ -78,10 +82,10 @@ import { useFocusFinders } from '@fluentui/react-tabster';
             defaultProps: {
                 ref: checkboxRef,
                 type: 'checkbox',
-                checked: isCardSelected,
+                checked: selected,
                 onChange: (event)=>onChangeHandler(event),
-                onFocus: ()=>setIsSelectFocused(true),
-                onBlur: ()=>setIsSelectFocused(false),
+                onFocus: ()=>setSelectFocused(true),
+                onBlur: ()=>setSelectFocused(false),
                 ...selectableCheckboxProps
             },
             elementType: 'input'
@@ -89,8 +93,8 @@ import { useFocusFinders } from '@fluentui/react-tabster';
     }, [
         checkbox,
         floatingAction,
-        isCardSelected,
-        isSelectable,
+        selected,
+        selectable,
         onChangeHandler,
         referenceId,
         referenceLabel
@@ -109,7 +113,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         floatingAction
     ]);
     const selectableCardProps = React.useMemo(()=>{
-        if (!isSelectable) {
+        if (!selectable) {
             return null;
         }
         return {
@@ -117,21 +121,16 @@ import { useFocusFinders } from '@fluentui/react-tabster';
             onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
         };
     }, [
-        isSelectable,
+        selectable,
         onChangeHandler,
         onClick,
         onKeyDown,
         onKeyDownHandler
     ]);
-    React.useEffect(()=>setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [
-        defaultSelected,
-        selected,
-        setIsCardSelected
-    ]);
     return {
-        selected: isCardSelected,
-        selectable: isSelectable,
-        selectFocused: isSelectFocused,
+        selected,
+        selectable,
+        selectFocused,
         selectableCardProps,
         checkboxSlot,
         floatingActionSlot

package/lib/components/Card/useCardSelectable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot } 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 slot.optional(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      elementType: 'input',\n    });\n  }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return slot.optional(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n      elementType: 'div',\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(\n    () => setIsCardSelected(Boolean(defaultSelected ?? selected)),\n    [defaultSelected, selected, setIsCardSelected],\n  );\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"names":["React","mergeCallbacks","slot","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","optional","defaultProps","ref","type","checked","onChange","onFocus","onBlur","elementType","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}
+{"version":3,"sources":["useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot, useControllableState } 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 = {}, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n  const { findAllFocusable } = useFocusFinders();\n  const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n  const [selected, setSelected] = useControllableState({\n    state: props.selected,\n    defaultState: props.defaultSelected,\n    initialState: false,\n  });\n  const selectable = [props.selected, props.defaultSelected, onSelectionChange].some(\n    prop => typeof prop !== 'undefined',\n  );\n\n  const [selectFocused, setSelectFocused] = 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 = !selected;\n\n      setSelected(newCheckedValue);\n\n      if (onSelectionChange) {\n        onSelectionChange(event, { selected: newCheckedValue });\n      }\n    },\n    [onSelectionChange, selected, setSelected, 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 (!selectable || 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 slot.optional(checkbox, {\n      defaultProps: {\n        ref: checkboxRef,\n        type: 'checkbox',\n        checked: selected,\n        onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n        onFocus: () => setSelectFocused(true),\n        onBlur: () => setSelectFocused(false),\n        ...selectableCheckboxProps,\n      },\n      elementType: 'input',\n    });\n  }, [checkbox, floatingAction, selected, selectable, onChangeHandler, referenceId, referenceLabel]);\n\n  const floatingActionSlot = React.useMemo(() => {\n    if (!floatingAction) {\n      return;\n    }\n\n    return slot.optional(floatingAction, {\n      defaultProps: {\n        ref: checkboxRef,\n      },\n      elementType: 'div',\n    });\n  }, [floatingAction]);\n\n  const selectableCardProps = React.useMemo(() => {\n    if (!selectable) {\n      return null;\n    }\n\n    return {\n      onClick: mergeCallbacks(onClick, onChangeHandler),\n      onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n    };\n  }, [selectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n  return {\n    selected,\n    selectable,\n    selectFocused,\n    selectableCardProps,\n    checkboxSlot,\n    floatingActionSlot,\n  };\n};\n"],"names":["React","mergeCallbacks","slot","useControllableState","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","selected","setSelected","state","defaultState","defaultSelected","initialState","selectable","some","prop","selectFocused","setSelectFocused","useState","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","optional","defaultProps","ref","type","checked","onChange","onFocus","onBlur","elementType","floatingActionSlot","selectableCardProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,IAAI,EAAEC,oBAAoB,QAAQ,4BAA4B;AACvF,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,eAAe,QAAQ,0BAA0B;AAI1D;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,oBAAoB,CAC/BC,OACA,EAAEC,cAAc,EAAEC,WAAW,EAAmF,EAChHC;IAEA,MAAM,EAAEC,WAAW,CAAC,CAAC,EAAEC,iBAAiB,EAAEC,cAAc,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGR;IAEjF,MAAM,EAAES,gBAAgB,EAAE,GAAGX;IAC7B,MAAMY,cAAcjB,MAAMkB,MAAM,CAAmB;IAEnD,MAAM,CAACC,UAAUC,YAAY,GAAGjB,qBAAqB;QACnDkB,OAAOd,MAAMY,QAAQ;QACrBG,cAAcf,MAAMgB,eAAe;QACnCC,cAAc;IAChB;IACA,MAAMC,aAAa;QAAClB,MAAMY,QAAQ;QAAEZ,MAAMgB,eAAe;QAAEX;KAAkB,CAACc,IAAI,CAChFC,CAAAA,OAAQ,OAAOA,SAAS;IAG1B,MAAM,CAACC,eAAeC,iBAAiB,GAAG7B,MAAM8B,QAAQ,CAAC;IAEzD,MAAMC,8BAA8B/B,MAAMgC,WAAW,CACnD,CAACC;QACC,IAAI,CAACvB,QAAQwB,OAAO,EAAE;YACpB,OAAO;QACT;QAEA,MAAMC,oBAAoBnB,iBAAiBN,QAAQwB,OAAO;QAC1D,MAAME,SAASH,MAAMG,MAAM;QAC3B,MAAMC,4BAA4BF,kBAAkBT,IAAI,CAACY,CAAAA,UAAWA,QAAQC,QAAQ,CAACH;QACrF,MAAMI,iBAAiBvB,CAAAA,wBAAAA,kCAAAA,YAAaiB,OAAO,MAAKE;QAEhD,OAAOC,6BAA6B,CAACG;IACvC,GACA;QAAC9B;QAASM;KAAiB;IAG7B,MAAMyB,kBAAkBzC,MAAMgC,WAAW,CACvC,CAACC;QACC,IAAIF,4BAA4BE,QAAQ;YACtC;QACF;QAEA,MAAMS,kBAAkB,CAACvB;QAEzBC,YAAYsB;QAEZ,IAAI9B,mBAAmB;YACrBA,kBAAkBqB,OAAO;gBAAEd,UAAUuB;YAAgB;QACvD;IACF,GACA;QAAC9B;QAAmBO;QAAUC;QAAaW;KAA4B;IAGzE,MAAMY,mBAAmB3C,MAAMgC,WAAW,CACxC,CAACC;QACC,IAAI;YAAC7B;SAAM,CAACwC,QAAQ,CAACX,MAAMY,GAAG,GAAG;YAC/BZ,MAAMa,cAAc;YACpBL,gBAAgBR;QAClB;IACF,GACA;QAACQ;KAAgB;IAGnB,MAAMM,eAAe/C,MAAMgD,OAAO,CAAC;QACjC,IAAI,CAACvB,cAAcZ,gBAAgB;YACjC;QACF;QAEA,MAAMoC,0BAAiD,CAAC;QAExD,IAAIxC,aAAa;YACfwC,uBAAuB,CAAC,kBAAkB,GAAGxC;QAC/C,OAAO,IAAID,gBAAgB;YACzByC,uBAAuB,CAAC,aAAa,GAAGzC;QAC1C;QAEA,OAAON,KAAKgD,QAAQ,CAACvC,UAAU;YAC7BwC,cAAc;gBACZC,KAAKnC;gBACLoC,MAAM;gBACNC,SAASnC;gBACToC,UAAU,CAACtB,QAA+CQ,gBAAgBR;gBAC1EuB,SAAS,IAAM3B,iBAAiB;gBAChC4B,QAAQ,IAAM5B,iBAAiB;gBAC/B,GAAGoB,uBAAuB;YAC5B;YACAS,aAAa;QACf;IACF,GAAG;QAAC/C;QAAUE;QAAgBM;QAAUM;QAAYgB;QAAiBhC;QAAaD;KAAe;IAEjG,MAAMmD,qBAAqB3D,MAAMgD,OAAO,CAAC;QACvC,IAAI,CAACnC,gBAAgB;YACnB;QACF;QAEA,OAAOX,KAAKgD,QAAQ,CAACrC,gBAAgB;YACnCsC,cAAc;gBACZC,KAAKnC;YACP;YACAyC,aAAa;QACf;IACF,GAAG;QAAC7C;KAAe;IAEnB,MAAM+C,sBAAsB5D,MAAMgD,OAAO,CAAC;QACxC,IAAI,CAACvB,YAAY;YACf,OAAO;QACT;QAEA,OAAO;YACLX,SAASb,eAAea,SAAS2B;YACjC1B,WAAWd,eAAec,WAAW4B;QACvC;IACF,GAAG;QAAClB;QAAYgB;QAAiB3B;QAASC;QAAW4B;KAAiB;IAEtE,OAAO;QACLxB;QACAM;QACAG;QACAgC;QACAb;QACAY;IACF;AACF,EAAE"}

package/lib/components/CardHeader/useCardHeader.js

@@ -21,11 +21,10 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
  *
  * @returns the id to use for the CardHeader root element
  */ function getReferenceId(headerId, childWithId, generatedId) {
-    var _childWithId;
     if (headerId) {
         return headerId;
     }
-    if ((_childWithId = childWithId) === null || _childWithId === void 0 ? void 0 : _childWithId.props.id) {
+    if (childWithId === null || childWithId === void 0 ? void 0 : childWithId.props.id) {
         return childWithId.props.id;
     }
     return generatedId;
@@ -53,9 +52,9 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
         elementType: 'div'
     });
     React.useEffect(()=>{
-        var _headerRef_current, _headerSlot;
+        var _headerRef_current;
         const headerId = !hasChildId.current ? (_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.id : undefined;
-        const childWithId = getChildWithId((_headerSlot = headerSlot) === null || _headerSlot === void 0 ? void 0 : _headerSlot.children);
+        const childWithId = getChildWithId(headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.children);
         hasChildId.current = Boolean(childWithId);
         setReferenceId(getReferenceId(headerId, childWithId, generatedId));
     }, [

package/lib/components/CardHeader/useCardHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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      getNativeElementProps('div', {\n        ref,\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","getNativeElementProps","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,qBAAqB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAE/E,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;QAMfD;IAJJ,IAAID,UAAU;QACZ,OAAOA;IACT;IAEA,KAAIC,eAAAA,yBAAAA,mCAAAA,aAAaP,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,oBACJG;QADnC,MAAMd,WAAW,CAACa,WAAWK,OAAO,IAAGP,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBhB,EAAE,GAAGwB;QAC/D,MAAMlB,cAAcb,gBAAe0B,cAAAA,wBAAAA,kCAAAA,YAAYQ,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,sBAAsB,OAAO;YAC3BqB;YACA,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"}
+{"version":3,"sources":["useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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      getNativeElementProps('div', {\n        ref,\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","getNativeElementProps","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,qBAAqB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAE/E,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,sBAAsB,OAAO;YAC3BqB;YACA,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"}

package/lib-commonjs/components/Card/CardContext.js

@@ -33,5 +33,7 @@ const cardContextDefaultValue = {
     }
 };
 const CardProvider = cardContext.Provider;
-var _React_useContext;
-const useCardContext_unstable = ()=>(_React_useContext = _react.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;
+const useCardContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = _react.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;
+};

package/lib-commonjs/components/Card/CardContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CardContext.js"],"sourcesContent":["import * as React from 'react';\nconst cardContext = React.createContext(undefined);\n/**\n * @internal\n */ export const cardContextDefaultValue = {\n    selectableA11yProps: {\n        referenceId: undefined,\n        setReferenceId () {\n        /* Noop */ },\n        referenceLabel: undefined,\n        setReferenceLabel () {\n        /* Noop */ }\n    }\n};\n/**\n * @internal\n */ export const CardProvider = cardContext.Provider;\nvar _React_useContext;\n/**\n * @internal\n */ export const useCardContext_unstable = ()=>(_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;\n"],"names":["cardContextDefaultValue","CardProvider","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAIiBA,uBAAuB;eAAvBA;;IAYAC,YAAY;eAAZA;;IAIAC,uBAAuB;eAAvBA;;;;iEApBM;AACvB,MAAMC,4BAAcC,OAAMC,aAAa,CAACC;AAG7B,MAAMN,0BAA0B;IACvCO,qBAAqB;QACjBC,aAAaF;QACbG;QACA,QAAQ,GAAG;QACXC,gBAAgBJ;QAChBK;QACA,QAAQ,GAAG;IACf;AACJ;AAGW,MAAMV,eAAeE,YAAYS,QAAQ;AACpD,IAAIC;AAGO,MAAMX,0BAA0B,IAAI,AAACW,CAAAA,oBAAoBT,OAAMU,UAAU,CAACX,YAAW,MAAO,QAAQU,sBAAsB,KAAK,IAAIA,oBAAoBb"}
+{"version":3,"sources":["CardContext.js"],"sourcesContent":["import * as React from 'react';\nconst cardContext = React.createContext(undefined);\n/**\n * @internal\n */ export const cardContextDefaultValue = {\n    selectableA11yProps: {\n        referenceId: undefined,\n        setReferenceId () {\n        /* Noop */ },\n        referenceLabel: undefined,\n        setReferenceLabel () {\n        /* Noop */ }\n    }\n};\n/**\n * @internal\n */ export const CardProvider = cardContext.Provider;\n/**\n * @internal\n */ export const useCardContext_unstable = ()=>{\n    var _React_useContext;\n    return (_React_useContext = React.useContext(cardContext)) !== null && _React_useContext !== void 0 ? _React_useContext : cardContextDefaultValue;\n};\n"],"names":["cardContextDefaultValue","CardProvider","useCardContext_unstable","cardContext","React","createContext","undefined","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAIiBA,uBAAuB;eAAvBA;;IAYAC,YAAY;eAAZA;;IAGAC,uBAAuB;eAAvBA;;;;iEAnBM;AACvB,MAAMC,4BAAcC,OAAMC,aAAa,CAACC;AAG7B,MAAMN,0BAA0B;IACvCO,qBAAqB;QACjBC,aAAaF;QACbG;QACA,QAAQ,GAAG;QACXC,gBAAgBJ;QAChBK;QACA,QAAQ,GAAG;IACf;AACJ;AAGW,MAAMV,eAAeE,YAAYS,QAAQ;AAGzC,MAAMV,0BAA0B;IACvC,IAAIW;IACJ,OAAO,AAACA,CAAAA,oBAAoBT,OAAMU,UAAU,CAACX,YAAW,MAAO,QAAQU,sBAAsB,KAAK,IAAIA,oBAAoBb;AAC9H"}

package/lib-commonjs/components/Card/useCardSelectable.js

@@ -14,25 +14,28 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _reacttabster = require("@fluentui/react-tabster");
 const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
-    const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;
+    const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown } = props;
     const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
     const checkboxRef = _react.useRef(null);
-    const isSelectable = [
-        selected,
-        defaultSelected,
+    const [selected, setSelected] = (0, _reactutilities.useControllableState)({
+        state: props.selected,
+        defaultState: props.defaultSelected,
+        initialState: false
+    });
+    const selectable = [
+        props.selected,
+        props.defaultSelected,
         onSelectionChange
     ].some((prop)=>typeof prop !== 'undefined');
-    const [isCardSelected, setIsCardSelected] = _react.useState(false);
-    const [isSelectFocused, setIsSelectFocused] = _react.useState(false);
+    const [selectFocused, setSelectFocused] = _react.useState(false);
     const shouldRestrictTriggerAction = _react.useCallback((event)=>{
-        var _checkboxRef;
         if (!cardRef.current) {
             return false;
         }
         const focusableElements = findAllFocusable(cardRef.current);
         const target = event.target;
         const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));
-        const isCheckboxSlot = ((_checkboxRef = checkboxRef) === null || _checkboxRef === void 0 ? void 0 : _checkboxRef.current) === target;
+        const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
         return isElementInFocusableGroup && !isCheckboxSlot;
     }, [
         cardRef,
@@ -42,8 +45,8 @@ const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
         if (shouldRestrictTriggerAction(event)) {
             return;
         }
-        const newCheckedValue = !isCardSelected;
-        setIsCardSelected(newCheckedValue);
+        const newCheckedValue = !selected;
+        setSelected(newCheckedValue);
         if (onSelectionChange) {
             onSelectionChange(event, {
                 selected: newCheckedValue
@@ -51,7 +54,8 @@ const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
         }
     }, [
         onSelectionChange,
-        isCardSelected,
+        selected,
+        setSelected,
         shouldRestrictTriggerAction
     ]);
     const onKeyDownHandler = _react.useCallback((event)=>{
@@ -65,7 +69,7 @@ const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
         onChangeHandler
     ]);
     const checkboxSlot = _react.useMemo(()=>{
-        if (!isSelectable || floatingAction) {
+        if (!selectable || floatingAction) {
             return;
         }
         const selectableCheckboxProps = {};
@@ -78,10 +82,10 @@ const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
             defaultProps: {
                 ref: checkboxRef,
                 type: 'checkbox',
-                checked: isCardSelected,
+                checked: selected,
                 onChange: (event)=>onChangeHandler(event),
-                onFocus: ()=>setIsSelectFocused(true),
-                onBlur: ()=>setIsSelectFocused(false),
+                onFocus: ()=>setSelectFocused(true),
+                onBlur: ()=>setSelectFocused(false),
                 ...selectableCheckboxProps
             },
             elementType: 'input'
@@ -89,8 +93,8 @@ const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
     }, [
         checkbox,
         floatingAction,
-        isCardSelected,
-        isSelectable,
+        selected,
+        selectable,
         onChangeHandler,
         referenceId,
         referenceLabel
@@ -109,7 +113,7 @@ const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
         floatingAction
     ]);
     const selectableCardProps = _react.useMemo(()=>{
-        if (!isSelectable) {
+        if (!selectable) {
             return null;
         }
         return {
@@ -117,21 +121,16 @@ const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{
             onKeyDown: (0, _reactutilities.mergeCallbacks)(onKeyDown, onKeyDownHandler)
         };
     }, [
-        isSelectable,
+        selectable,
         onChangeHandler,
         onClick,
         onKeyDown,
         onKeyDownHandler
     ]);
-    _react.useEffect(()=>setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [
-        defaultSelected,
-        selected,
-        setIsCardSelected
-    ]);
     return {
-        selected: isCardSelected,
-        selectable: isSelectable,
-        selectFocused: isSelectFocused,
+        selected,
+        selectable,
+        selectFocused,
         selectableCardProps,
         checkboxSlot,
         floatingActionSlot

package/lib-commonjs/components/Card/useCardSelectable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardSelectable.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\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 */ export const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{\n    const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n    const { findAllFocusable } = useFocusFinders();\n    const checkboxRef = React.useRef(null);\n    const isSelectable = [\n        selected,\n        defaultSelected,\n        onSelectionChange\n    ].some((prop)=>typeof prop !== 'undefined');\n    const [isCardSelected, setIsCardSelected] = React.useState(false);\n    const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n    const shouldRestrictTriggerAction = React.useCallback((event)=>{\n        var _checkboxRef;\n        if (!cardRef.current) {\n            return false;\n        }\n        const focusableElements = findAllFocusable(cardRef.current);\n        const target = event.target;\n        const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));\n        const isCheckboxSlot = ((_checkboxRef = checkboxRef) === null || _checkboxRef === void 0 ? void 0 : _checkboxRef.current) === target;\n        return isElementInFocusableGroup && !isCheckboxSlot;\n    }, [\n        cardRef,\n        findAllFocusable\n    ]);\n    const onChangeHandler = React.useCallback((event)=>{\n        if (shouldRestrictTriggerAction(event)) {\n            return;\n        }\n        const newCheckedValue = !isCardSelected;\n        setIsCardSelected(newCheckedValue);\n        if (onSelectionChange) {\n            onSelectionChange(event, {\n                selected: newCheckedValue\n            });\n        }\n    }, [\n        onSelectionChange,\n        isCardSelected,\n        shouldRestrictTriggerAction\n    ]);\n    const onKeyDownHandler = React.useCallback((event)=>{\n        if ([\n            Enter\n        ].includes(event.key)) {\n            event.preventDefault();\n            onChangeHandler(event);\n        }\n    }, [\n        onChangeHandler\n    ]);\n    const checkboxSlot = React.useMemo(()=>{\n        if (!isSelectable || floatingAction) {\n            return;\n        }\n        const selectableCheckboxProps = {};\n        if (referenceId) {\n            selectableCheckboxProps['aria-labelledby'] = referenceId;\n        } else if (referenceLabel) {\n            selectableCheckboxProps['aria-label'] = referenceLabel;\n        }\n        return slot.optional(checkbox, {\n            defaultProps: {\n                ref: checkboxRef,\n                type: 'checkbox',\n                checked: isCardSelected,\n                onChange: (event)=>onChangeHandler(event),\n                onFocus: ()=>setIsSelectFocused(true),\n                onBlur: ()=>setIsSelectFocused(false),\n                ...selectableCheckboxProps\n            },\n            elementType: 'input'\n        });\n    }, [\n        checkbox,\n        floatingAction,\n        isCardSelected,\n        isSelectable,\n        onChangeHandler,\n        referenceId,\n        referenceLabel\n    ]);\n    const floatingActionSlot = React.useMemo(()=>{\n        if (!floatingAction) {\n            return;\n        }\n        return slot.optional(floatingAction, {\n            defaultProps: {\n                ref: checkboxRef\n            },\n            elementType: 'div'\n        });\n    }, [\n        floatingAction\n    ]);\n    const selectableCardProps = React.useMemo(()=>{\n        if (!isSelectable) {\n            return null;\n        }\n        return {\n            onClick: mergeCallbacks(onClick, onChangeHandler),\n            onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)\n        };\n    }, [\n        isSelectable,\n        onChangeHandler,\n        onClick,\n        onKeyDown,\n        onKeyDownHandler\n    ]);\n    React.useEffect(()=>setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [\n        defaultSelected,\n        selected,\n        setIsCardSelected\n    ]);\n    return {\n        selected: isCardSelected,\n        selectable: isSelectable,\n        selectFocused: isSelectFocused,\n        selectableCardProps,\n        checkboxSlot,\n        floatingActionSlot\n    };\n};\n"],"names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","useFocusFinders","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","_checkboxRef","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","slot","optional","defaultProps","ref","type","checked","onChange","onFocus","onBlur","elementType","floatingActionSlot","selectableCardProps","mergeCallbacks","useEffect","Boolean","selectable","selectFocused"],"mappings":"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"}
+{"version":3,"sources":["useCardSelectable.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, slot, useControllableState } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\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 */ export const useCardSelectable = (props, { referenceLabel, referenceId }, cardRef)=>{\n    const { checkbox = {}, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n    const { findAllFocusable } = useFocusFinders();\n    const checkboxRef = React.useRef(null);\n    const [selected, setSelected] = useControllableState({\n        state: props.selected,\n        defaultState: props.defaultSelected,\n        initialState: false\n    });\n    const selectable = [\n        props.selected,\n        props.defaultSelected,\n        onSelectionChange\n    ].some((prop)=>typeof prop !== 'undefined');\n    const [selectFocused, setSelectFocused] = React.useState(false);\n    const shouldRestrictTriggerAction = React.useCallback((event)=>{\n        if (!cardRef.current) {\n            return false;\n        }\n        const focusableElements = findAllFocusable(cardRef.current);\n        const target = event.target;\n        const isElementInFocusableGroup = focusableElements.some((element)=>element.contains(target));\n        const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;\n        return isElementInFocusableGroup && !isCheckboxSlot;\n    }, [\n        cardRef,\n        findAllFocusable\n    ]);\n    const onChangeHandler = React.useCallback((event)=>{\n        if (shouldRestrictTriggerAction(event)) {\n            return;\n        }\n        const newCheckedValue = !selected;\n        setSelected(newCheckedValue);\n        if (onSelectionChange) {\n            onSelectionChange(event, {\n                selected: newCheckedValue\n            });\n        }\n    }, [\n        onSelectionChange,\n        selected,\n        setSelected,\n        shouldRestrictTriggerAction\n    ]);\n    const onKeyDownHandler = React.useCallback((event)=>{\n        if ([\n            Enter\n        ].includes(event.key)) {\n            event.preventDefault();\n            onChangeHandler(event);\n        }\n    }, [\n        onChangeHandler\n    ]);\n    const checkboxSlot = React.useMemo(()=>{\n        if (!selectable || floatingAction) {\n            return;\n        }\n        const selectableCheckboxProps = {};\n        if (referenceId) {\n            selectableCheckboxProps['aria-labelledby'] = referenceId;\n        } else if (referenceLabel) {\n            selectableCheckboxProps['aria-label'] = referenceLabel;\n        }\n        return slot.optional(checkbox, {\n            defaultProps: {\n                ref: checkboxRef,\n                type: 'checkbox',\n                checked: selected,\n                onChange: (event)=>onChangeHandler(event),\n                onFocus: ()=>setSelectFocused(true),\n                onBlur: ()=>setSelectFocused(false),\n                ...selectableCheckboxProps\n            },\n            elementType: 'input'\n        });\n    }, [\n        checkbox,\n        floatingAction,\n        selected,\n        selectable,\n        onChangeHandler,\n        referenceId,\n        referenceLabel\n    ]);\n    const floatingActionSlot = React.useMemo(()=>{\n        if (!floatingAction) {\n            return;\n        }\n        return slot.optional(floatingAction, {\n            defaultProps: {\n                ref: checkboxRef\n            },\n            elementType: 'div'\n        });\n    }, [\n        floatingAction\n    ]);\n    const selectableCardProps = React.useMemo(()=>{\n        if (!selectable) {\n            return null;\n        }\n        return {\n            onClick: mergeCallbacks(onClick, onChangeHandler),\n            onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)\n        };\n    }, [\n        selectable,\n        onChangeHandler,\n        onClick,\n        onKeyDown,\n        onKeyDownHandler\n    ]);\n    return {\n        selected,\n        selectable,\n        selectFocused,\n        selectableCardProps,\n        checkboxSlot,\n        floatingActionSlot\n    };\n};\n"],"names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","useFocusFinders","checkboxRef","React","useRef","selected","setSelected","useControllableState","state","defaultState","defaultSelected","initialState","selectable","some","prop","selectFocused","setSelectFocused","useState","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","slot","optional","defaultProps","ref","type","checked","onChange","onFocus","onBlur","elementType","floatingActionSlot","selectableCardProps","mergeCallbacks"],"mappings":"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"}

package/lib-commonjs/components/CardHeader/useCardHeader.js

@@ -32,11 +32,10 @@ const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");
  *
  * @returns the id to use for the CardHeader root element
  */ function getReferenceId(headerId, childWithId, generatedId) {
-    var _childWithId;
     if (headerId) {
         return headerId;
     }
-    if ((_childWithId = childWithId) === null || _childWithId === void 0 ? void 0 : _childWithId.props.id) {
+    if (childWithId === null || childWithId === void 0 ? void 0 : childWithId.props.id) {
         return childWithId.props.id;
     }
     return generatedId;
@@ -56,9 +55,9 @@ const useCardHeader_unstable = (props, ref)=>{
         elementType: 'div'
     });
     _react.useEffect(()=>{
-        var _headerRef_current, _headerSlot;
+        var _headerRef_current;
         const headerId = !hasChildId.current ? (_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.id : undefined;
-        const childWithId = getChildWithId((_headerSlot = headerSlot) === null || _headerSlot === void 0 ? void 0 : _headerSlot.children);
+        const childWithId = getChildWithId(headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.children);
         hasChildId.current = Boolean(childWithId);
         setReferenceId(getReferenceId(headerId, childWithId, generatedId));
     }, [

package/lib-commonjs/components/CardHeader/useCardHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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    var _childWithId;\n    if (headerId) {\n        return headerId;\n    }\n    if ((_childWithId = 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, _headerSlot;\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 = 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(getNativeElementProps('div', {\n            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","_childWithId","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","_headerSlot","children","components","root","always","getNativeElementProps"],"mappings":";;;;+BAwCiBA;;;eAAAA;;;;iEAxCM;gCAC4B;6BACX;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,IAAIC;IACJ,IAAIH,UAAU;QACV,OAAOA;IACX;IACA,IAAI,AAACG,CAAAA,eAAeF,WAAU,MAAO,QAAQE,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaT,KAAK,CAACC,EAAE,EAAE;QACnG,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC/B;IACA,OAAOO;AACX;AASW,MAAMhB,yBAAyB,CAACQ,OAAOU;IAC9C,MAAM,EAAEC,KAAK,EAAEjB,MAAM,EAAEkB,WAAW,EAAEC,MAAM,EAAE,GAAGb;IAC/C,MAAM,EAAEc,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EAAE,GAAGC,IAAAA,oCAAuB;IACxF,MAAMC,YAAYrB,OAAMsB,MAAM,CAAC;IAC/B,MAAMC,aAAavB,OAAMsB,MAAM,CAAC;IAChC,MAAMX,cAAca,IAAAA,qBAAK,EAACC,+CAAoB,CAAC5B,MAAM,EAAEqB;IACvD,MAAMQ,aAAaC,oBAAI,CAACC,QAAQ,CAAC/B,QAAQ;QACrCgC,iBAAiB;QACjBC,cAAc;YACVjB,KAAKQ;YACLjB,IAAI,CAACmB,WAAWQ,OAAO,GAAGb,cAAcc;QAC5C;QACAC,aAAa;IACjB;IACAjC,OAAMkC,SAAS,CAAC;QACZ,IAAIC,oBAAoBC;QACxB,MAAM3B,WAAW,CAACc,WAAWQ,OAAO,GAAG,AAACI,CAAAA,qBAAqBd,UAAUU,OAAO,AAAD,MAAO,QAAQI,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmB/B,EAAE,GAAG4B;QAC7J,MAAMtB,cAAcd,eAAe,AAACwC,CAAAA,cAAcV,UAAS,MAAO,QAAQU,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYC,QAAQ;QAChId,WAAWQ,OAAO,GAAG7B,QAAQQ;QAC7BS,eAAeX,eAAeC,UAAUC,aAAaC;IACzD,GAAG;QACCA;QACAd;QACA6B;QACAP;KACH;IACD,OAAO;QACHmB,YAAY;YACRC,MAAM;YACNzB,OAAO;YACPjB,QAAQ;YACRkB,aAAa;YACbC,QAAQ;QACZ;QACAuB,MAAMZ,oBAAI,CAACa,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C5B;YACA,GAAGV,KAAK;QACZ,IAAI;YACA8B,aAAa;QACjB;QACAnB,OAAOa,oBAAI,CAACC,QAAQ,CAACd,OAAO;YACxBmB,aAAa;QACjB;QACApC,QAAQ6B;QACRX,aAAaY,oBAAI,CAACC,QAAQ,CAACb,aAAa;YACpCkB,aAAa;QACjB;QACAjB,QAAQW,oBAAI,CAACC,QAAQ,CAACZ,QAAQ;YAC1BiB,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useCardHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, 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(getNativeElementProps('div', {\n            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","getNativeElementProps"],"mappings":";;;;+BAuCiBA;;;eAAAA;;;;iEAvCM;gCAC4B;6BACX;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,qCAAqB,EAAC,OAAO;YAC3C3B;YACA,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "9.0.40",
+  "version": "9.0.42",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -38,11 +38,11 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "^9.0.4",
-    "@fluentui/react-tabster": "^9.12.11",
-    "@fluentui/react-theme": "^9.1.12",
-    "@fluentui/react-utilities": "^9.13.3",
-    "@fluentui/react-jsx-runtime": "^9.0.10",
+    "@fluentui/keyboard-keys": "^9.0.6",
+    "@fluentui/react-tabster": "^9.13.1",
+    "@fluentui/react-theme": "^9.1.14",
+    "@fluentui/react-utilities": "^9.13.5",
+    "@fluentui/react-jsx-runtime": "^9.0.12",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },