@fluentui/react-card 0.0.0-nightly-20230807-0415.1 → 0.0.0-nightly-20230808-0415.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Mon, 07 Aug 2023 04:22:28 GMT",
-      "tag": "@fluentui/react-card_v0.0.0-nightly-20230807-0415.1",
-      "version": "0.0.0-nightly-20230807-0415.1",
+      "date": "Tue, 08 Aug 2023 04:22:18 GMT",
+      "tag": "@fluentui/react-card_v0.0.0-nightly-20230808-0415.1",
+      "version": "0.0.0-nightly-20230808-0415.1",
       "comments": {
         "prerelease": [
           {
@@ -16,50 +16,50 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230807-0415.1",
-            "commit": "272d9efb55a09fdcdf1014ff7075d14e312e31e7"
+            "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230808-0415.1",
+            "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230807-0415.1",
-            "commit": "272d9efb55a09fdcdf1014ff7075d14e312e31e7"
+            "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230808-0415.1",
+            "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230807-0415.1",
-            "commit": "272d9efb55a09fdcdf1014ff7075d14e312e31e7"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230808-0415.1",
+            "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230807-0415.1",
-            "commit": "272d9efb55a09fdcdf1014ff7075d14e312e31e7"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230808-0415.1",
+            "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230807-0415.1",
-            "commit": "272d9efb55a09fdcdf1014ff7075d14e312e31e7"
+            "comment": "Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230808-0415.1",
+            "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230807-0415.1",
-            "commit": "272d9efb55a09fdcdf1014ff7075d14e312e31e7"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230808-0415.1",
+            "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230807-0415.1",
-            "commit": "272d9efb55a09fdcdf1014ff7075d14e312e31e7"
+            "comment": "Bump @fluentui/react-conformance to v0.0.0-nightly-20230808-0415.1",
+            "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-card",
-            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20230807-0415.1",
-            "commit": "272d9efb55a09fdcdf1014ff7075d14e312e31e7"
+            "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20230808-0415.1",
+            "commit": "307bdb0a82868b26dbcb9a7aa2318bda66c1cd64"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,25 +1,25 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Mon, 07 Aug 2023 04:22:28 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Aug 2023 04:22:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230807-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20230807-0415.1)
+## [0.0.0-nightly-20230808-0415.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20230808-0415.1)
 
-Mon, 07 Aug 2023 04:22:28 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.26..@fluentui/react-card_v0.0.0-nightly-20230807-0415.1)
+Tue, 08 Aug 2023 04:22:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.26..@fluentui/react-card_v0.0.0-nightly-20230808-0415.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230807-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/272d9efb55a09fdcdf1014ff7075d14e312e31e7) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20230807-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/272d9efb55a09fdcdf1014ff7075d14e312e31e7) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230807-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/272d9efb55a09fdcdf1014ff7075d14e312e31e7) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230807-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/272d9efb55a09fdcdf1014ff7075d14e312e31e7) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230807-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/272d9efb55a09fdcdf1014ff7075d14e312e31e7) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230807-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/272d9efb55a09fdcdf1014ff7075d14e312e31e7) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20230807-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/272d9efb55a09fdcdf1014ff7075d14e312e31e7) by beachball)
-- Bump @fluentui/react-button to v0.0.0-nightly-20230807-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/272d9efb55a09fdcdf1014ff7075d14e312e31e7) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20230808-0415.1 ([commit](https://github.com/microsoft/fluentui/commit/307bdb0a82868b26dbcb9a7aa2318bda66c1cd64) by beachball)
 
 ## [9.0.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.26)
 

package/lib/components/Card/renderCard.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { CardProvider } from './CardContext';
 /**
  * Render the final JSX of Card.
  */ export const renderCard_unstable = (state, cardContextValue)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(CardProvider, {
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(CardProvider, {
         value: cardContextValue
-    }, slots.checkbox ? /*#__PURE__*/ createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/ createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));
+    }, state.checkbox ? /*#__PURE__*/ createElement(state.checkbox, null) : null, state.floatingAction ? /*#__PURE__*/ createElement(state.floatingAction, null) : null, state.root.children));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCard.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n  const { slots, slotProps } = getSlotsNext<CardSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <CardProvider value={cardContextValue}>\n        {slots.checkbox ? <slots.checkbox {...slotProps.checkbox} /> : null}\n        {slots.floatingAction ? <slots.floatingAction {...slotProps.floatingAction} /> : null}\n        {slotProps.root.children}\n      </CardProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","CardProvider","renderCard_unstable","state","cardContextValue","slots","slotProps","root","value","checkbox","floatingAction","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,mBAAuC;IAC3F,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAwBG;IAErD,qBACE,AAfJ,cAeKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,gBAC5B,AAhBN,cAgBON;QAAaO,OAAOJ;OAClBC,MAAMI,QAAQ,iBAAG,AAjB1B,cAiB2BJ,MAAMI,QAAQ,EAAKH,UAAUG,QAAQ,IAAO,IAAI,EAClEJ,MAAMK,cAAc,iBAAG,AAlBhC,cAkBiCL,MAAMK,cAAc,EAAKJ,UAAUI,cAAc,IAAO,IAAI,EACpFJ,UAAUC,IAAI,CAACI,QAAQ;AAIhC,EAAE"}
+{"version":3,"sources":["renderCard.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardContextValue, CardSlots, CardState } from './Card.types';\nimport { CardProvider } from './CardContext';\n\n/**\n * Render the final JSX of Card.\n */\nexport const renderCard_unstable = (state: CardState, cardContextValue: CardContextValue) => {\n  assertSlots<CardSlots>(state);\n\n  return (\n    <state.root>\n      <CardProvider value={cardContextValue}>\n        {state.checkbox ? <state.checkbox /> : null}\n        {state.floatingAction ? <state.floatingAction /> : null}\n        {state.root.children}\n      </CardProvider>\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","CardProvider","renderCard_unstable","state","cardContextValue","root","value","checkbox","floatingAction","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,YAAY,QAAQ,gBAAgB;AAE7C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC,mBAAuC;IAC3FJ,YAAuBG;IAEvB,qBACE,AAfJ,cAeKA,MAAME,IAAI,sBACT,AAhBN,cAgBOJ;QAAaK,OAAOF;OAClBD,MAAMI,QAAQ,iBAAG,AAjB1B,cAiB2BJ,MAAMI,QAAQ,UAAM,IAAI,EAC1CJ,MAAMK,cAAc,iBAAG,AAlBhC,cAkBiCL,MAAMK,cAAc,UAAM,IAAI,EACtDL,MAAME,IAAI,CAACI,QAAQ;AAI5B,EAAE"}

package/lib/components/Card/useCard.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
 import { useCardSelectable } from './useCardSelectable';
 import { cardContextDefaultValue } from './CardContext';
@@ -79,12 +79,14 @@ const focusMap = {
             floatingAction: 'div',
             checkbox: 'input'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref: cardRef,
             role: 'group',
             ...focusAttributes,
             ...props,
             ...selectableCardProps
+        }), {
+            elementType: 'div'
         }),
         floatingAction: floatingActionSlot,
         checkbox: checkboxSlot

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

@@ -1 +1 @@
-{"version":3,"sources":["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    [\n      'onClick',\n      'onDoubleClick',\n      'onMouseUp',\n      'onMouseDown',\n      'onPointerUp',\n      'onPointerDown',\n      'onTouchStart',\n      'onTouchEnd',\n      'onDragStart',\n      'onDragEnd',\n    ] as (keyof React.HTMLAttributes<HTMLElement>)[]\n  ).some(prop => props[prop]);\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n  });\n\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0,\n  };\n\n  return {\n    interactive,\n    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n  };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const cardBaseRef = useFocusWithin<HTMLDivElement>();\n  const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n    useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n\n  const { interactive, focusAttributes } = useCardInteractive(props);\n\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel,\n    },\n\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input',\n    },\n\n    root: 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"],"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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,4BAA4B;AACjF,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAG5E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,gBAAgB;AAExD,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,WAAY,MAAK,EAAE,GAAGC,OAAkB,GAAK;IACzE,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,MAAMC,gBAAgBb,kBAAkB;QACtCc,aAAaV,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC3D;IAEA,MAAMO,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiBT,cAAc,QAAQ,IAAI,GAAGO,0BAA0B;IAC1E;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU,MAA8C;IAC/F,MAAM,EAAEC,YAAa,SAAQ,EAAEC,aAAc,WAAU,EAAEC,MAAO,SAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG3B,MAAM4B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAG/B,MAAM4B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc5B;IACpB,MAAM,EAAE6B,WAAU,EAAEC,SAAQ,EAAEC,oBAAmB,EAAEC,cAAa,EAAEC,aAAY,EAAEC,mBAAkB,EAAE,GAClGjC,kBAAkBO,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUrC,cAAc8B,aAAaV;IAE3C,MAAM,EAAET,YAAW,EAAEO,gBAAe,EAAE,GAAGV,mBAAmBE;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAoB;QACAG;QACAF;QACAL,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAS,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMxC,sBAAsB,OAAO;YACjCqB,KAAKiB;YACLK,MAAM;YACN,GAAGxB,eAAe;YAClB,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB;QAEAO,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}
+{"version":3,"sources":["useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\n\nimport type { CardProps, CardState } from './Card.types';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\n\nconst focusMap = {\n  off: undefined,\n  'no-tab': 'limited-trap-focus',\n  'tab-exit': 'limited',\n  'tab-only': 'unlimited',\n} as const;\n\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */\nconst useCardInteractive = ({ focusMode = 'off', ...props }: CardProps) => {\n  const interactive = (\n    [\n      'onClick',\n      'onDoubleClick',\n      'onMouseUp',\n      'onMouseDown',\n      'onPointerUp',\n      'onPointerDown',\n      'onTouchStart',\n      'onTouchEnd',\n      'onDragStart',\n      'onDragEnd',\n    ] as (keyof React.HTMLAttributes<HTMLElement>)[]\n  ).some(prop => props[prop]);\n\n  const groupperAttrs = useFocusableGroup({\n    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],\n  });\n\n  const interactiveFocusAttributes = {\n    ...groupperAttrs,\n    tabIndex: 0,\n  };\n\n  return {\n    interactive,\n    focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,\n  };\n};\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement>): CardState => {\n  const { appearance = 'filled', orientation = 'vertical', size = 'medium' } = props;\n\n  const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n  const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n\n  const cardBaseRef = useFocusWithin<HTMLDivElement>();\n  const { selectable, selected, selectableCardProps, selectFocused, checkboxSlot, floatingActionSlot } =\n    useCardSelectable(props, { referenceId, referenceLabel }, cardBaseRef);\n\n  const cardRef = useMergedRefs(cardBaseRef, ref);\n\n  const { interactive, focusAttributes } = useCardInteractive(props);\n\n  return {\n    appearance,\n    orientation,\n    size,\n    interactive,\n    selectable,\n    selectFocused,\n    selected,\n    selectableA11yProps: {\n      setReferenceId,\n      referenceId,\n      referenceLabel,\n      setReferenceLabel,\n    },\n\n    components: {\n      root: 'div',\n      floatingAction: 'div',\n      checkbox: 'input',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: cardRef,\n        role: 'group',\n        ...focusAttributes,\n        ...props,\n        ...selectableCardProps,\n      }),\n      { elementType: 'div' },\n    ),\n\n    floatingAction: floatingActionSlot,\n    checkbox: checkboxSlot,\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","slot","useFocusableGroup","useFocusWithin","useCardSelectable","cardContextDefaultValue","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","referenceId","setReferenceId","useState","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","cardRef","components","root","floatingAction","checkbox","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACvF,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAG5E,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,uBAAuB,QAAQ,gBAAgB;AAExD,MAAMC,WAAW;IACfC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AACd;AAEA;;;;;;;CAOC,GACD,MAAMC,qBAAqB,CAAC,EAAEC,WAAY,MAAK,EAAE,GAAGC,OAAkB,GAAK;IACzE,MAAMC,cAAc,AAClB;QACE;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD,CACDC,IAAI,CAACC,CAAAA,OAAQH,KAAK,CAACG,KAAK;IAE1B,MAAMC,gBAAgBb,kBAAkB;QACtCc,aAAaV,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC3D;IAEA,MAAMO,6BAA6B;QACjC,GAAGF,aAAa;QAChBG,UAAU;IACZ;IAEA,OAAO;QACLN;QACAO,iBAAiBT,cAAc,QAAQ,IAAI,GAAGO,0BAA0B;IAC1E;AACF;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMG,mBAAmB,CAACT,OAAkBU,MAA8C;IAC/F,MAAM,EAAEC,YAAa,SAAQ,EAAEC,aAAc,WAAU,EAAEC,MAAO,SAAQ,EAAE,GAAGb;IAE7E,MAAM,CAACc,aAAaC,eAAe,GAAG5B,MAAM6B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAC5G,MAAM,CAACI,gBAAgBC,kBAAkB,GAAGhC,MAAM6B,QAAQ,CAACtB,wBAAwBuB,mBAAmB,CAACH,WAAW;IAElH,MAAMM,cAAc5B;IACpB,MAAM,EAAE6B,WAAU,EAAEC,SAAQ,EAAEC,oBAAmB,EAAEC,cAAa,EAAEC,aAAY,EAAEC,mBAAkB,EAAE,GAClGjC,kBAAkBO,OAAO;QAAEc;QAAaI;IAAe,GAAGE;IAE5D,MAAMO,UAAUtC,cAAc+B,aAAaV;IAE3C,MAAM,EAAET,YAAW,EAAEO,gBAAe,EAAE,GAAGV,mBAAmBE;IAE5D,OAAO;QACLW;QACAC;QACAC;QACAZ;QACAoB;QACAG;QACAF;QACAL,qBAAqB;YACnBF;YACAD;YACAI;YACAC;QACF;QAEAS,YAAY;YACVC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACZ;QAEAF,MAAMvC,KAAK0C,MAAM,CACf5C,sBAAsB,OAAO;YAC3BsB,KAAKiB;YACLM,MAAM;YACN,GAAGzB,eAAe;YAClB,GAAGR,KAAK;YACR,GAAGuB,mBAAmB;QACxB,IACA;YAAEW,aAAa;QAAM;QAGvBJ,gBAAgBJ;QAChBK,UAAUN;IACZ;AACF,EAAE"}

package/lib/components/Card/useCardSelectable.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
+import { mergeCallbacks, slot } from '@fluentui/react-utilities';
 import { Enter } from '@fluentui/keyboard-keys';
 import { useFocusFinders } from '@fluentui/react-tabster';
 /**
@@ -73,7 +73,7 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         } else if (referenceLabel) {
             selectableCheckboxProps['aria-label'] = referenceLabel;
         }
-        return resolveShorthand(checkbox, {
+        return slot.optional(checkbox, {
             defaultProps: {
                 ref: checkboxRef,
                 type: 'checkbox',
@@ -82,7 +82,8 @@ import { useFocusFinders } from '@fluentui/react-tabster';
                 onFocus: ()=>setIsSelectFocused(true),
                 onBlur: ()=>setIsSelectFocused(false),
                 ...selectableCheckboxProps
-            }
+            },
+            elementType: 'input'
         });
     }, [
         checkbox,
@@ -97,10 +98,11 @@ import { useFocusFinders } from '@fluentui/react-tabster';
         if (!floatingAction) {
             return;
         }
-        return resolveShorthand(floatingAction, {
+        return slot.optional(floatingAction, {
             defaultProps: {
                 ref: checkboxRef
-            }
+            },
+            elementType: 'div'
         });
     }, [
         floatingAction

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

@@ -1 +1 @@
-{"version":3,"sources":["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(\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","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"],"mappings":"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"}
+{"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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"}

package/lib/components/CardFooter/renderCardFooter.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardFooter.
  */ export const renderCardFooter_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children, slots.action && /*#__PURE__*/ createElement(slots.action, slotProps.action));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.root.children, state.action && /*#__PURE__*/ createElement(state.action, null));
 };

package/lib/components/CardFooter/renderCardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlotsNext<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderCardFooter_unstable","state","slots","slotProps","root","children","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAE3D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BD,UAAUC,IAAI,CAACC,QAAQ,EACvBH,MAAMI,MAAM,kBAAI,AAhBvB,cAgBwBJ,MAAMI,MAAM,EAAKH,UAAUG,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderCardFooter.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  assertSlots<CardFooterSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderCardFooter_unstable","state","root","children","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnEF,YAA6BE;IAE7B,qBACE,AAdJ,cAcKA,MAAMC,IAAI,QACRD,MAAMC,IAAI,CAACC,QAAQ,EACnBF,MAAMG,MAAM,kBAAI,AAhBvB,cAgBwBH,MAAMG,MAAM;AAGpC,EAAE"}

package/lib/components/CardFooter/useCardFooter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render CardFooter.
  *
@@ -15,10 +15,14 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
             root: 'div',
             action: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        action: resolveShorthand(action)
+        action: slot.optional(action, {
+            elementType: 'div'
+        })
     };
 };

package/lib/components/CardFooter/useCardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useCardFooter_unstable","props","ref","action","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGpF;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,OAAM,EAAE,GAAGF;IAEnB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMP,sBAAsB,OAAO;YACjCI;YACA,GAAGD,KAAK;QACV;QACAE,QAAQJ,iBAAiBI;IAC3B;AACF,EAAE"}
+{"version":3,"sources":["useCardFooter.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    action: slot.optional(action, { elementType: 'div' }),\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useCardFooter_unstable","props","ref","action","components","root","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC,MAAiD;IAC9G,MAAM,EAAEC,OAAM,EAAE,GAAGF;IAEnB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMN,KAAKO,MAAM,CACfR,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;QAEvBJ,QAAQJ,KAAKS,QAAQ,CAACL,QAAQ;YAAEI,aAAa;QAAM;IACrD;AACF,EAAE"}

package/lib/components/CardHeader/renderCardHeader.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardHeader.
  */ export const renderCardHeader_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.image && /*#__PURE__*/ createElement(slots.image, slotProps.image), /*#__PURE__*/ createElement(slots.header, slotProps.header), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), slots.action && /*#__PURE__*/ createElement(slots.action, slotProps.action));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.image && /*#__PURE__*/ createElement(state.image, null), /*#__PURE__*/ createElement(state.header, null), state.description && /*#__PURE__*/ createElement(state.description, null), state.action && /*#__PURE__*/ createElement(state.action, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  const { slots, slotProps } = getSlotsNext<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.image && <slots.image {...slotProps.image} />}\n      <slots.header {...slotProps.header} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderCardHeader_unstable","state","slots","slotProps","root","image","header","description","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA8BE;IAE3D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,KAAK,kBAAI,AAftB,cAeuBH,MAAMG,KAAK,EAAKF,UAAUE,KAAK,iBAChD,AAhBN,cAgBOH,MAAMI,MAAM,EAAKH,UAAUG,MAAM,GACjCJ,MAAMK,WAAW,kBAAI,AAjB5B,cAiB6BL,MAAMK,WAAW,EAAKJ,UAAUI,WAAW,GACjEL,MAAMM,MAAM,kBAAI,AAlBvB,cAkBwBN,MAAMM,MAAM,EAAKL,UAAUK,MAAM;AAGzD,EAAE"}
+{"version":3,"sources":["renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  assertSlots<CardHeaderSlots>(state);\n\n  return (\n    <state.root>\n      {state.image && <state.image />}\n      <state.header />\n      {state.description && <state.description />}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderCardHeader_unstable","state","root","image","header","description","action"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,QAA2B;IACnEF,YAA6BE;IAE7B,qBACE,AAdJ,cAcKA,MAAMC,IAAI,QACRD,MAAME,KAAK,kBAAI,AAftB,cAeuBF,MAAME,KAAK,uBAC5B,AAhBN,cAgBOF,MAAMG,MAAM,SACZH,MAAMI,WAAW,kBAAI,AAjB5B,cAiB6BJ,MAAMI,WAAW,SACvCJ,MAAMK,MAAM,kBAAI,AAlBvB,cAkBwBL,MAAMK,MAAM;AAGpC,EAAE"}

package/lib/components/CardHeader/useCardHeader.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
 import { useCardContext_unstable } from '../Card/CardContext';
 import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
 /**
@@ -43,12 +43,13 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
     const headerRef = React.useRef(null);
     const hasChildId = React.useRef(false);
     const generatedId = useId(cardHeaderClassNames.header, referenceId);
-    const headerSlot = resolveShorthand(header, {
-        required: true,
+    const headerSlot = slot.optional(header, {
+        renderByDefault: true,
         defaultProps: {
             ref: headerRef,
             id: !hasChildId.current ? referenceId : undefined
-        }
+        },
+        elementType: 'div'
     });
     React.useEffect(()=>{
         var _headerRef_current;
@@ -70,13 +71,21 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
             description: 'div',
             action: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
+        }),
+        image: slot.optional(image, {
+            elementType: 'div'
         }),
-        image: resolveShorthand(image),
         header: headerSlot,
-        description: resolveShorthand(description),
-        action: resolveShorthand(action)
+        description: slot.optional(description, {
+            elementType: 'div'
+        }),
+        action: slot.optional(action, {
+            elementType: 'div'
+        })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\n\n/**\n * 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 = resolveShorthand(header, {\n    required: true,\n    defaultProps: {\n      ref: headerRef,\n      id: !hasChildId.current ? referenceId : undefined,\n    },\n  });\n\n  React.useEffect(() => {\n    const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n    const childWithId = getChildWithId(headerSlot?.children);\n\n    hasChildId.current = Boolean(childWithId);\n\n    setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n  }, [generatedId, header, headerSlot, setReferenceId]);\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      header: 'div',\n      description: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image),\n    header: headerSlot,\n    description: resolveShorthand(description),\n    action: resolveShorthand(action),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useId","useCardContext_unstable","cardHeaderClassNames","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","required","defaultProps","current","undefined","useEffect","children","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAE3F,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE;;;;CAIC,GACD,SAASC,eAAeC,MAAuB,EAAE;IAC/C,SAASC,yBAAyBC,OAAwB,EAAiC;QACzF,OAAOT,MAAMU,cAAc,CAACD,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;IAClE;IAEA,OAAOb,MAAMc,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,WAA2C,EAC3CC,WAAmB,EACX;IACR,IAAIF,UAAU;QACZ,OAAOA;IACT,CAAC;IAED,IAAIC,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B,CAAC;IAED,OAAOO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACT,OAAwBU,MAAiD;IAC9G,MAAM,EAAEC,MAAK,EAAEhB,OAAM,EAAEiB,YAAW,EAAEC,OAAM,EAAE,GAAGb;IAE/C,MAAM,EACJc,qBAAqB,EAAEC,YAAW,EAAEC,eAAc,EAAE,CAAA,EACrD,GAAGxB;IACJ,MAAMyB,YAAY7B,MAAM8B,MAAM,CAAiB,IAAI;IAEnD,MAAMC,aAAa/B,MAAM8B,MAAM,CAAC,KAAK;IACrC,MAAMV,cAAcjB,MAAME,qBAAqBE,MAAM,EAAEoB;IAEvD,MAAMK,aAAa9B,iBAAiBK,QAAQ;QAC1C0B,UAAU,IAAI;QACdC,cAAc;YACZZ,KAAKO;YACLhB,IAAI,CAACkB,WAAWI,OAAO,GAAGR,cAAcS,SAAS;QACnD;IACF;IAEApC,MAAMqC,SAAS,CAAC,IAAM;YACmBR;QAAvC,MAAMX,WAAW,CAACa,WAAWI,OAAO,GAAGN,CAAAA,qBAAAA,UAAUM,OAAO,cAAjBN,gCAAAA,KAAAA,IAAAA,mBAAmBhB,EAAE,GAAGuB,SAAS;QACxE,MAAMjB,cAAcb,eAAe0B,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAYM,QAAQ;QAEvDP,WAAWI,OAAO,GAAGxB,QAAQQ;QAE7BS,eAAeX,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQyB;QAAYJ;KAAe;IAEpD,OAAO;QACLW,YAAY;YACVC,MAAM;YACNjB,OAAO;YACPhB,QAAQ;YACRiB,aAAa;YACbC,QAAQ;QACV;QAEAe,MAAMvC,sBAAsB,OAAO;YACjCqB;YACA,GAAGV,KAAK;QACV;QACAW,OAAOrB,iBAAiBqB;QACxBhB,QAAQyB;QACRR,aAAatB,iBAAiBsB;QAC9BC,QAAQvB,iBAAiBuB;IAC3B;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,EAAE;IAC/C,SAASC,yBAAyBC,OAAwB,EAAiC;QACzF,OAAOT,MAAMU,cAAc,CAACD,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;IAClE;IAEA,OAAOb,MAAMc,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,WAA2C,EAC3CC,WAAmB,EACX;IACR,IAAIF,UAAU;QACZ,OAAOA;IACT,CAAC;IAED,IAAIC,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B,CAAC;IAED,OAAOO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACT,OAAwBU,MAAiD;IAC9G,MAAM,EAAEC,MAAK,EAAEhB,OAAM,EAAEiB,YAAW,EAAEC,OAAM,EAAE,GAAGb;IAE/C,MAAM,EACJc,qBAAqB,EAAEC,YAAW,EAAEC,eAAc,EAAE,CAAA,EACrD,GAAGxB;IACJ,MAAMyB,YAAY7B,MAAM8B,MAAM,CAAiB,IAAI;IAEnD,MAAMC,aAAa/B,MAAM8B,MAAM,CAAC,KAAK;IACrC,MAAMV,cAAclB,MAAMG,qBAAqBE,MAAM,EAAEoB;IAEvD,MAAMK,aAAa7B,KAAK8B,QAAQ,CAAC1B,QAAQ;QACvC2B,iBAAiB,IAAI;QACrBC,cAAc;YACZb,KAAKO;YACLhB,IAAI,CAACkB,WAAWK,OAAO,GAAGT,cAAcU,SAAS;QACnD;QACAC,aAAa;IACf;IACAtC,MAAMuC,SAAS,CAAC,IAAM;YACmBV;QAAvC,MAAMX,WAAW,CAACa,WAAWK,OAAO,GAAGP,CAAAA,qBAAAA,UAAUO,OAAO,cAAjBP,gCAAAA,KAAAA,IAAAA,mBAAmBhB,EAAE,GAAGwB,SAAS;QACxE,MAAMlB,cAAcb,eAAe0B,uBAAAA,wBAAAA,KAAAA,IAAAA,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/components/CardPreview/renderCardPreview.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of CardPreview.
  */ export const renderCardPreview_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children, slots.logo && /*#__PURE__*/ createElement(slots.logo, slotProps.logo));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(state.root, null, state.root.children, state.logo && /*#__PURE__*/ createElement(state.logo, null));
 };

package/lib/components/CardPreview/renderCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n  const { slots, slotProps } = getSlotsNext<CardPreviewSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.logo && <slots.logo {...slotProps.logo} />}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderCardPreview_unstable","state","slots","slotProps","root","children","logo"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA+BE;IAE5D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BD,UAAUC,IAAI,CAACC,QAAQ,EACvBH,MAAMI,IAAI,kBAAI,AAhBrB,cAgBsBJ,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGnD,EAAE"}
+{"version":3,"sources":["renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n  assertSlots<CardPreviewSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.logo && <state.logo />}\n    </state.root>\n  );\n};\n"],"names":["createElement","assertSlots","renderCardPreview_unstable","state","root","children","logo"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrEF,YAA8BE;IAE9B,qBACE,AAdJ,cAcKA,MAAMC,IAAI,QACRD,MAAMC,IAAI,CAACC,QAAQ,EACnBF,MAAMG,IAAI,kBAAI,AAhBrB,cAgBsBH,MAAMG,IAAI;AAGhC,EAAE"}

package/lib/components/CardPreview/useCardPreview.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useCardContext_unstable } from '../Card/CardContext';
 import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
 /**
@@ -44,10 +44,14 @@ import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
             root: 'div',
             logo: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref: previewRef,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        logo: resolveShorthand(logo)
+        logo: slot.optional(logo, {
+            elementType: 'div'
+        })
     };
 };

package/lib/components/CardPreview/useCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n  const { logo } = props;\n\n  const {\n    selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n  } = useCardContext_unstable();\n  const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n  React.useEffect(() => {\n    if (referenceLabel && referenceId) {\n      return;\n    }\n\n    if (previewRef.current && previewRef.current.parentNode) {\n      const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n      if (img) {\n        const ariaLabel = img.getAttribute('aria-label');\n        const ariaDescribedby = img.getAttribute('aria-describedby');\n\n        if (ariaDescribedby) {\n          setReferenceId(ariaDescribedby);\n        } else if (img.alt) {\n          setReferenceLabel(img.alt);\n        } else if (ariaLabel) {\n          setReferenceLabel(ariaLabel);\n        }\n      }\n    }\n  }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n  return {\n    components: {\n      root: 'div',\n      logo: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref: previewRef,\n      ...props,\n    }),\n    logo: resolveShorthand(logo),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAEnG,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,qBAAqB,QAAQ,gCAAgC;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAM,EAAEC,KAAI,EAAE,GAAGF;IAEjB,MAAM,EACJG,qBAAqB,EAAEC,eAAc,EAAEC,YAAW,EAAEC,kBAAiB,EAAEC,eAAc,EAAE,CAAA,EACxF,GAAGV;IACJ,MAAMW,aAAaZ,cAAcK,KAAKR,MAAMgB,MAAM,CAAiB,IAAI;IAEvEhB,MAAMiB,SAAS,CAAC,IAAM;QACpB,IAAIN,kBAAkBC,aAAa;YACjC;QACF,CAAC;QAED,IAAIG,WAAWG,OAAO,IAAIH,WAAWG,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAML,WAAWG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,CAAC,EAAEhB,sBAAsBiB,IAAI,CAAC,MAAM,CAAC;YAEhH,IAAIF,KAAK;gBACP,MAAMG,YAAYH,IAAII,YAAY,CAAC;gBACnC,MAAMC,kBAAkBL,IAAII,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBX,eAAeW;gBACjB,OAAO,IAAIL,IAAIM,GAAG,EAAE;oBAClBb,kBAAkBO,IAAIM,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBV,kBAAkBU;gBACpB,CAAC;YACH,CAAC;QACH,CAAC;IACH,GAAG;QAACV;QAAmBF;QAAgBI;QAAYH;QAAaE;KAAe;IAE/E,OAAO;QACLa,YAAY;YACVL,MAAM;YACNb,MAAM;QACR;QAEAa,MAAMrB,sBAAsB,OAAO;YACjCO,KAAKO;YACL,GAAGR,KAAK;QACV;QACAE,MAAMP,iBAAiBO;IACzB;AACF,EAAE"}
+{"version":3,"sources":["useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n  const { logo } = props;\n\n  const {\n    selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n  } = useCardContext_unstable();\n  const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));\n\n  React.useEffect(() => {\n    if (referenceLabel && referenceId) {\n      return;\n    }\n\n    if (previewRef.current && previewRef.current.parentNode) {\n      const img = previewRef.current.parentNode.querySelector<HTMLImageElement>(`.${cardPreviewClassNames.root} > img`);\n\n      if (img) {\n        const ariaLabel = img.getAttribute('aria-label');\n        const ariaDescribedby = img.getAttribute('aria-describedby');\n\n        if (ariaDescribedby) {\n          setReferenceId(ariaDescribedby);\n        } else if (img.alt) {\n          setReferenceLabel(img.alt);\n        } else if (ariaLabel) {\n          setReferenceLabel(ariaLabel);\n        }\n      }\n    }\n  }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);\n\n  return {\n    components: {\n      root: 'div',\n      logo: 'div',\n    },\n\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref: previewRef,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    logo: slot.optional(logo, { elementType: 'div' }),\n  };\n};\n"],"names":["React","getNativeElementProps","useMergedRefs","slot","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAEvF,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,qBAAqB,QAAQ,gCAAgC;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAM,EAAEC,KAAI,EAAE,GAAGF;IAEjB,MAAM,EACJG,qBAAqB,EAAEC,eAAc,EAAEC,YAAW,EAAEC,kBAAiB,EAAEC,eAAc,EAAE,CAAA,EACxF,GAAGV;IACJ,MAAMW,aAAab,cAAcM,KAAKR,MAAMgB,MAAM,CAAiB,IAAI;IAEvEhB,MAAMiB,SAAS,CAAC,IAAM;QACpB,IAAIN,kBAAkBC,aAAa;YACjC;QACF,CAAC;QAED,IAAIG,WAAWG,OAAO,IAAIH,WAAWG,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAML,WAAWG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,CAAC,EAAEhB,sBAAsBiB,IAAI,CAAC,MAAM,CAAC;YAEhH,IAAIF,KAAK;gBACP,MAAMG,YAAYH,IAAII,YAAY,CAAC;gBACnC,MAAMC,kBAAkBL,IAAII,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBX,eAAeW;gBACjB,OAAO,IAAIL,IAAIM,GAAG,EAAE;oBAClBb,kBAAkBO,IAAIM,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBV,kBAAkBU;gBACpB,CAAC;YACH,CAAC;QACH,CAAC;IACH,GAAG;QAACV;QAAmBF;QAAgBI;QAAYH;QAAaE;KAAe;IAE/E,OAAO;QACLa,YAAY;YACVL,MAAM;YACNb,MAAM;QACR;QAEAa,MAAMnB,KAAKyB,MAAM,CACf3B,sBAAsB,OAAO;YAC3BO,KAAKO;YACL,GAAGR,KAAK;QACV,IACA;YAAEsB,aAAa;QAAM;QAEvBpB,MAAMN,KAAK2B,QAAQ,CAACrB,MAAM;YAAEoB,aAAa;QAAM;IACjD;AACF,EAAE"}

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

@@ -10,8 +10,8 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _cardContext = require("./CardContext");
 const renderCard_unstable = (state, cardContextValue)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_cardContext.CardProvider, {
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_cardContext.CardProvider, {
         value: cardContextValue
-    }, slots.checkbox ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));
+    }, state.checkbox ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.checkbox, null) : null, state.floatingAction ? /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.floatingAction, null) : null, state.root.children));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCard.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { CardProvider } from './CardContext';\n/**\n * Render the final JSX of Card.\n */ export const renderCard_unstable = (state, cardContextValue)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(CardProvider, {\n        value: cardContextValue\n    }, slots.checkbox ? /*#__PURE__*/ createElement(slots.checkbox, slotProps.checkbox) : null, slots.floatingAction ? /*#__PURE__*/ createElement(slots.floatingAction, slotProps.floatingAction) : null, slotProps.root.children));\n};\n"],"names":["renderCard_unstable","state","cardContextValue","slots","slotProps","getSlotsNext","createElement","root","CardProvider","value","checkbox","floatingAction","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;6BACA;AAGlB,MAAMA,sBAAsB,CAACC,OAAOC,mBAAmB;IAC9D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,yBAAY,EAAE;QACrGC,OAAOP;IACX,GAAGC,MAAMO,QAAQ,GAAG,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMO,QAAQ,EAAEN,UAAUM,QAAQ,IAAI,IAAI,EAAEP,MAAMQ,cAAc,GAAG,WAAW,GAAGL,IAAAA,8BAAa,EAACH,MAAMQ,cAAc,EAAEP,UAAUO,cAAc,IAAI,IAAI,EAAEP,UAAUG,IAAI,CAACK,QAAQ;AAClO"}
+{"version":3,"sources":["renderCard.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { CardProvider } from './CardContext';\n/**\n * Render the final JSX of Card.\n */ export const renderCard_unstable = (state, cardContextValue)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(CardProvider, {\n        value: cardContextValue\n    }, state.checkbox ? /*#__PURE__*/ createElement(state.checkbox, null) : null, state.floatingAction ? /*#__PURE__*/ createElement(state.floatingAction, null) : null, state.root.children));\n};\n"],"names":["renderCard_unstable","state","cardContextValue","assertSlots","createElement","root","CardProvider","value","checkbox","floatingAction","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;6BACC;AAGlB,MAAMA,sBAAsB,CAACC,OAAOC,mBAAmB;IAC9DC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,yBAAY,EAAE;QAC3FC,OAAOL;IACX,GAAGD,MAAMO,QAAQ,GAAG,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMO,QAAQ,EAAE,IAAI,IAAI,IAAI,EAAEP,MAAMQ,cAAc,GAAG,WAAW,GAAGL,IAAAA,8BAAa,EAACH,MAAMQ,cAAc,EAAE,IAAI,IAAI,IAAI,EAAER,MAAMI,IAAI,CAACK,QAAQ;AAC5L"}

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

@@ -80,12 +80,14 @@ const useCard_unstable = (props, ref)=>{
             floatingAction: 'div',
             checkbox: 'input'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref: cardRef,
             role: 'group',
             ...focusAttributes,
             ...props,
             ...selectableCardProps
+        }), {
+            elementType: 'div'
         }),
         floatingAction: floatingActionSlot,
         checkbox: checkboxSlot

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

@@ -1 +1 @@
-{"version":3,"sources":["useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n    off: undefined,\n    'no-tab': 'limited-trap-focus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited'\n};\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */ const useCardInteractive = ({ focusMode ='off' , ...props })=>{\n    const interactive = [\n        'onClick',\n        'onDoubleClick',\n        'onMouseUp',\n        'onMouseDown',\n        'onPointerUp',\n        'onPointerDown',\n        'onTouchStart',\n        'onTouchEnd',\n        'onDragStart',\n        'onDragEnd'\n    ].some((prop)=>props[prop]);\n    const groupperAttrs = useFocusableGroup({\n        tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]\n    });\n    const interactiveFocusAttributes = {\n        ...groupperAttrs,\n        tabIndex: 0\n    };\n    return {\n        interactive,\n        focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes\n    };\n};\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */ export const useCard_unstable = (props, ref)=>{\n    const { appearance ='filled' , orientation ='vertical' , size ='medium'  } = props;\n    const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n    const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n    const cardBaseRef = useFocusWithin();\n    const { selectable , selected , selectableCardProps , selectFocused , checkboxSlot , floatingActionSlot  } = useCardSelectable(props, {\n        referenceId,\n        referenceLabel\n    }, cardBaseRef);\n    const cardRef = useMergedRefs(cardBaseRef, ref);\n    const { interactive , focusAttributes  } = useCardInteractive(props);\n    return {\n        appearance,\n        orientation,\n        size,\n        interactive,\n        selectable,\n        selectFocused,\n        selected,\n        selectableA11yProps: {\n            setReferenceId,\n            referenceId,\n            referenceLabel,\n            setReferenceLabel\n        },\n        components: {\n            root: 'div',\n            floatingAction: 'div',\n            checkbox: 'input'\n        },\n        root: getNativeElementProps('div', {\n            ref: cardRef,\n            role: 'group',\n            ...focusAttributes,\n            ...props,\n            ...selectableCardProps\n        }),\n        floatingAction: floatingActionSlot,\n        checkbox: checkboxSlot\n    };\n};\n"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","getNativeElementProps","role"],"mappings":";;;;+BAmDiBA;;aAAAA;;;6DAnDM;gCAC8B;8BACH;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACbC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AAChB;AACA;;;;;;;CAOC,GAAG,MAAMC,qBAAqB,CAAC,EAAEC,WAAW,MAAK,EAAG,GAAGC,OAAO,GAAG;IAC9D,MAAMC,cAAc;QAChB;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH,CAACC,IAAI,CAAC,CAACC,OAAOH,KAAK,CAACG,KAAK;IAC1B,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACpCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC7D;IACA,MAAMQ,6BAA6B;QAC/B,GAAGH,aAAa;QAChBI,UAAU;IACd;IACA,OAAO;QACHP;QACAQ,iBAAiBV,cAAc,QAAQ,IAAI,GAAGQ,0BAA0B;IAC5E;AACJ;AASW,MAAMb,mBAAmB,CAACM,OAAOU,MAAM;IAC9C,MAAM,EAAEC,YAAY,SAAQ,EAAGC,aAAa,WAAU,EAAGC,MAAM,SAAQ,EAAG,GAAGb;IAC7E,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EAAEC,WAAU,EAAGC,SAAQ,EAAGC,oBAAmB,EAAGC,cAAa,EAAGC,aAAY,EAAGC,mBAAkB,EAAG,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAClIc;QACAM;IACJ,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EAAET,YAAW,EAAGQ,gBAAe,EAAG,GAAGX,mBAAmBE;IAC9D,OAAO;QACHW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACjBJ;YACAD;YACAM;YACAC;QACJ;QACAY,YAAY;YACRC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACd;QACAF,MAAMG,IAAAA,qCAAqB,EAAC,OAAO;YAC/B3B,KAAKqB;YACLO,MAAM;YACN,GAAG7B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QAC1B;QACAS,gBAAgBN;QAChBO,UAAUR;IACd;AACJ"}
+{"version":3,"sources":["useCard.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';\nimport { useCardSelectable } from './useCardSelectable';\nimport { cardContextDefaultValue } from './CardContext';\nconst focusMap = {\n    off: undefined,\n    'no-tab': 'limited-trap-focus',\n    'tab-exit': 'limited',\n    'tab-only': 'unlimited'\n};\n/**\n * Create the state for interactive cards.\n *\n * This internal hook defines if the card is interactive\n * and control focus properties based on that.\n *\n * @param props - props from this instance of Card\n */ const useCardInteractive = ({ focusMode ='off' , ...props })=>{\n    const interactive = [\n        'onClick',\n        'onDoubleClick',\n        'onMouseUp',\n        'onMouseDown',\n        'onPointerUp',\n        'onPointerDown',\n        'onTouchStart',\n        'onTouchEnd',\n        'onDragStart',\n        'onDragEnd'\n    ].some((prop)=>props[prop]);\n    const groupperAttrs = useFocusableGroup({\n        tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]\n    });\n    const interactiveFocusAttributes = {\n        ...groupperAttrs,\n        tabIndex: 0\n    };\n    return {\n        interactive,\n        focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes\n    };\n};\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to the root element of Card\n */ export const useCard_unstable = (props, ref)=>{\n    const { appearance ='filled' , orientation ='vertical' , size ='medium'  } = props;\n    const [referenceId, setReferenceId] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n    const [referenceLabel, setReferenceLabel] = React.useState(cardContextDefaultValue.selectableA11yProps.referenceId);\n    const cardBaseRef = useFocusWithin();\n    const { selectable , selected , selectableCardProps , selectFocused , checkboxSlot , floatingActionSlot  } = useCardSelectable(props, {\n        referenceId,\n        referenceLabel\n    }, cardBaseRef);\n    const cardRef = useMergedRefs(cardBaseRef, ref);\n    const { interactive , focusAttributes  } = useCardInteractive(props);\n    return {\n        appearance,\n        orientation,\n        size,\n        interactive,\n        selectable,\n        selectFocused,\n        selected,\n        selectableA11yProps: {\n            setReferenceId,\n            referenceId,\n            referenceLabel,\n            setReferenceLabel\n        },\n        components: {\n            root: 'div',\n            floatingAction: 'div',\n            checkbox: 'input'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref: cardRef,\n            role: 'group',\n            ...focusAttributes,\n            ...props,\n            ...selectableCardProps\n        }), {\n            elementType: 'div'\n        }),\n        floatingAction: floatingActionSlot,\n        checkbox: checkboxSlot\n    };\n};\n"],"names":["useCard_unstable","focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","useFocusableGroup","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","ref","appearance","orientation","size","referenceId","setReferenceId","React","useState","cardContextDefaultValue","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","useFocusWithin","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","floatingActionSlot","useCardSelectable","cardRef","useMergedRefs","components","root","floatingAction","checkbox","slot","always","getNativeElementProps","role","elementType"],"mappings":";;;;+BAmDiBA;;aAAAA;;;6DAnDM;gCACoC;8BACT;mCAChB;6BACM;AACxC,MAAMC,WAAW;IACbC,KAAKC;IACL,UAAU;IACV,YAAY;IACZ,YAAY;AAChB;AACA;;;;;;;CAOC,GAAG,MAAMC,qBAAqB,CAAC,EAAEC,WAAW,MAAK,EAAG,GAAGC,OAAO,GAAG;IAC9D,MAAMC,cAAc;QAChB;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACH,CAACC,IAAI,CAAC,CAACC,OAAOH,KAAK,CAACG,KAAK;IAC1B,MAAMC,gBAAgBC,IAAAA,+BAAiB,EAAC;QACpCC,aAAaX,QAAQ,CAACM,cAAc,WAAWF,SAAS,CAAC;IAC7D;IACA,MAAMQ,6BAA6B;QAC/B,GAAGH,aAAa;QAChBI,UAAU;IACd;IACA,OAAO;QACHP;QACAQ,iBAAiBV,cAAc,QAAQ,IAAI,GAAGQ,0BAA0B;IAC5E;AACJ;AASW,MAAMb,mBAAmB,CAACM,OAAOU,MAAM;IAC9C,MAAM,EAAEC,YAAY,SAAQ,EAAGC,aAAa,WAAU,EAAGC,MAAM,SAAQ,EAAG,GAAGb;IAC7E,MAAM,CAACc,aAAaC,eAAe,GAAGC,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAC5G,MAAM,CAACM,gBAAgBC,kBAAkB,GAAGL,OAAMC,QAAQ,CAACC,oCAAuB,CAACC,mBAAmB,CAACL,WAAW;IAClH,MAAMQ,cAAcC,IAAAA,4BAAc;IAClC,MAAM,EAAEC,WAAU,EAAGC,SAAQ,EAAGC,oBAAmB,EAAGC,cAAa,EAAGC,aAAY,EAAGC,mBAAkB,EAAG,GAAGC,IAAAA,oCAAiB,EAAC9B,OAAO;QAClIc;QACAM;IACJ,GAAGE;IACH,MAAMS,UAAUC,IAAAA,6BAAa,EAACV,aAAaZ;IAC3C,MAAM,EAAET,YAAW,EAAGQ,gBAAe,EAAG,GAAGX,mBAAmBE;IAC9D,OAAO;QACHW;QACAC;QACAC;QACAZ;QACAuB;QACAG;QACAF;QACAN,qBAAqB;YACjBJ;YACAD;YACAM;YACAC;QACJ;QACAY,YAAY;YACRC,MAAM;YACNC,gBAAgB;YAChBC,UAAU;QACd;QACAF,MAAMG,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C7B,KAAKqB;YACLS,MAAM;YACN,GAAG/B,eAAe;YAClB,GAAGT,KAAK;YACR,GAAG0B,mBAAmB;QAC1B,IAAI;YACAe,aAAa;QACjB;QACAN,gBAAgBN;QAChBO,UAAUR;IACd;AACJ"}

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

@@ -71,7 +71,7 @@ const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
         } else if (referenceLabel) {
             selectableCheckboxProps['aria-label'] = referenceLabel;
         }
-        return (0, _reactUtilities.resolveShorthand)(checkbox, {
+        return _reactUtilities.slot.optional(checkbox, {
             defaultProps: {
                 ref: checkboxRef,
                 type: 'checkbox',
@@ -80,7 +80,8 @@ const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
                 onFocus: ()=>setIsSelectFocused(true),
                 onBlur: ()=>setIsSelectFocused(false),
                 ...selectableCheckboxProps
-            }
+            },
+            elementType: 'input'
         });
     }, [
         checkbox,
@@ -95,10 +96,11 @@ const useCardSelectable = (props, { referenceLabel , referenceId  }, cardRef)=>{
         if (!floatingAction) {
             return;
         }
-        return (0, _reactUtilities.resolveShorthand)(floatingAction, {
+        return _reactUtilities.slot.optional(floatingAction, {
             defaultProps: {
                 ref: checkboxRef
-            }
+            },
+            elementType: 'div'
         });
     }, [
         floatingAction

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

@@ -1 +1 @@
-{"version":3,"sources":["useCardSelectable.js"],"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/**\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        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 = !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 resolveShorthand(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        });\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 resolveShorthand(floatingAction, {\n            defaultProps: {\n                ref: checkboxRef\n            }\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","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","Enter","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","resolveShorthand","defaultProps","ref","type","checked","onChange","onFocus","onBlur","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 } 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        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 = !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","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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"}

package/lib-commonjs/components/CardFooter/renderCardFooter.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderCardFooter_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderCardFooter_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slotProps.root.children, slots.action && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.action, slotProps.action));
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.root.children, state.action && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.action, null));
 };

package/lib-commonjs/components/CardFooter/renderCardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCardFooter.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of CardFooter.\n */ export const renderCardFooter_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children, slots.action && /*#__PURE__*/ createElement(slots.action, slotProps.action));\n};\n"],"names":["renderCardFooter_unstable","state","slots","slotProps","getSlotsNext","createElement","root","children","action"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,4BAA4B,CAACC,QAAQ;IAClD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEH,UAAUG,IAAI,CAACC,QAAQ,EAAEL,MAAMM,MAAM,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,MAAM,EAAEL,UAAUK,MAAM;AACtK"}
+{"version":3,"sources":["renderCardFooter.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of CardFooter.\n */ export const renderCardFooter_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, state.root.children, state.action && /*#__PURE__*/ createElement(state.action, null));\n};\n"],"names":["renderCardFooter_unstable","state","assertSlots","createElement","root","children","action"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,4BAA4B,CAACC,QAAQ;IAClDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI,EAAEH,MAAMG,IAAI,CAACC,QAAQ,EAAEJ,MAAMK,MAAM,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACF,MAAMK,MAAM,EAAE,IAAI;AAC5I"}

package/lib-commonjs/components/CardFooter/useCardFooter.js

@@ -16,10 +16,14 @@ const useCardFooter_unstable = (props, ref)=>{
             root: 'div',
             action: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        action: (0, _reactUtilities.resolveShorthand)(action)
+        action: _reactUtilities.slot.optional(action, {
+            elementType: 'div'
+        })
     };
 };

package/lib-commonjs/components/CardFooter/useCardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */ export const useCardFooter_unstable = (props, ref)=>{\n    const { action  } = props;\n    return {\n        components: {\n            root: 'div',\n            action: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ref,\n            ...props\n        }),\n        action: resolveShorthand(action)\n    };\n};\n"],"names":["useCardFooter_unstable","props","ref","action","components","root","getNativeElementProps","resolveShorthand"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACiC;AAS7C,MAAMA,yBAAyB,CAACC,OAAOC,MAAM;IACpD,MAAM,EAAEC,OAAM,EAAG,GAAGF;IACpB,OAAO;QACHG,YAAY;YACRC,MAAM;YACNF,QAAQ;QACZ;QACAE,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BJ;YACA,GAAGD,KAAK;QACZ;QACAE,QAAQI,IAAAA,gCAAgB,EAACJ;IAC7B;AACJ"}
+{"version":3,"sources":["useCardFooter.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */ export const useCardFooter_unstable = (props, ref)=>{\n    const { action  } = props;\n    return {\n        components: {\n            root: 'div',\n            action: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        action: slot.optional(action, {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useCardFooter_unstable","props","ref","action","components","root","slot","always","getNativeElementProps","elementType","optional"],"mappings":";;;;+BAUiBA;;aAAAA;;;6DAVM;gCACqB;AASjC,MAAMA,yBAAyB,CAACC,OAAOC,MAAM;IACpD,MAAM,EAAEC,OAAM,EAAG,GAAGF;IACpB,OAAO;QACHG,YAAY;YACRC,MAAM;YACNF,QAAQ;QACZ;QACAE,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3CN;YACA,GAAGD,KAAK;QACZ,IAAI;YACAQ,aAAa;QACjB;QACAN,QAAQG,oBAAI,CAACI,QAAQ,CAACP,QAAQ;YAC1BM,aAAa;QACjB;IACJ;AACJ"}

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

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderCardHeader_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderCardHeader_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slots.image && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.image, slotProps.image), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.header, slotProps.header), slots.description && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.description, slotProps.description), slots.action && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.action, slotProps.action));
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.image && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.image, null), /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.header, null), state.description && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.description, null), state.action && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.action, null));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderCardHeader.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of CardHeader.\n */ export const renderCardHeader_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.image && /*#__PURE__*/ createElement(slots.image, slotProps.image), /*#__PURE__*/ createElement(slots.header, slotProps.header), slots.description && /*#__PURE__*/ createElement(slots.description, slotProps.description), slots.action && /*#__PURE__*/ createElement(slots.action, slotProps.action));\n};\n"],"names":["renderCardHeader_unstable","state","slots","slotProps","getSlotsNext","createElement","root","image","header","description","action"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,4BAA4B,CAACC,QAAQ;IAClD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEJ,MAAMK,KAAK,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMK,KAAK,EAAEJ,UAAUI,KAAK,GAAG,WAAW,GAAGF,IAAAA,8BAAa,EAACH,MAAMM,MAAM,EAAEL,UAAUK,MAAM,GAAGN,MAAMO,WAAW,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACH,MAAMO,WAAW,EAAEN,UAAUM,WAAW,GAAGP,MAAMQ,MAAM,IAAI,WAAW,GAAGL,IAAAA,8BAAa,EAACH,MAAMQ,MAAM,EAAEP,UAAUO,MAAM;AAChX"}
+{"version":3,"sources":["renderCardHeader.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of CardHeader.\n */ export const renderCardHeader_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, state.image && /*#__PURE__*/ createElement(state.image, null), /*#__PURE__*/ createElement(state.header, null), state.description && /*#__PURE__*/ createElement(state.description, null), state.action && /*#__PURE__*/ createElement(state.action, null));\n};\n"],"names":["renderCardHeader_unstable","state","assertSlots","createElement","root","image","header","description","action"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,4BAA4B,CAACC,QAAQ;IAClDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI,EAAEH,MAAMI,KAAK,IAAI,WAAW,GAAGF,IAAAA,8BAAa,EAACF,MAAMI,KAAK,EAAE,IAAI,GAAG,WAAW,GAAGF,IAAAA,8BAAa,EAACF,MAAMK,MAAM,EAAE,IAAI,GAAGL,MAAMM,WAAW,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACF,MAAMM,WAAW,EAAE,IAAI,GAAGN,MAAMO,MAAM,IAAI,WAAW,GAAGL,IAAAA,8BAAa,EAACF,MAAMO,MAAM,EAAE,IAAI;AAClT"}

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

@@ -44,12 +44,13 @@ const useCardHeader_unstable = (props, ref)=>{
     const headerRef = _react.useRef(null);
     const hasChildId = _react.useRef(false);
     const generatedId = (0, _reactUtilities.useId)(_useCardHeaderStylesStyles.cardHeaderClassNames.header, referenceId);
-    const headerSlot = (0, _reactUtilities.resolveShorthand)(header, {
-        required: true,
+    const headerSlot = _reactUtilities.slot.optional(header, {
+        renderByDefault: true,
         defaultProps: {
             ref: headerRef,
             id: !hasChildId.current ? referenceId : undefined
-        }
+        },
+        elementType: 'div'
     });
     _react.useEffect(()=>{
         var _headerRef_current;
@@ -71,13 +72,21 @@ const useCardHeader_unstable = (props, ref)=>{
             description: 'div',
             action: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
+        }),
+        image: _reactUtilities.slot.optional(image, {
+            elementType: 'div'
         }),
-        image: (0, _reactUtilities.resolveShorthand)(image),
         header: headerSlot,
-        description: (0, _reactUtilities.resolveShorthand)(description),
-        action: (0, _reactUtilities.resolveShorthand)(action)
+        description: _reactUtilities.slot.optional(description, {
+            elementType: 'div'
+        }),
+        action: _reactUtilities.slot.optional(action, {
+            elementType: 'div'
+        })
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useCardHeader.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\n/**\n * 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 = resolveShorthand(header, {\n        required: true,\n        defaultProps: {\n            ref: headerRef,\n            id: !hasChildId.current ? referenceId : undefined\n        }\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: getNativeElementProps('div', {\n            ref,\n            ...props\n        }),\n        image: resolveShorthand(image),\n        header: headerSlot,\n        description: resolveShorthand(description),\n        action: resolveShorthand(action)\n    };\n};\n"],"names":["useCardHeader_unstable","getChildWithId","header","isReactElementWithIdProp","element","React","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","ref","image","description","action","selectableA11yProps","referenceId","setReferenceId","useCardContext_unstable","headerRef","useRef","hasChildId","useId","cardHeaderClassNames","headerSlot","resolveShorthand","required","defaultProps","current","undefined","useEffect","_headerRef_current","children","components","root","getNativeElementProps"],"mappings":";;;;+BAuCiBA;;aAAAA;;;6DAvCM;gCACwC;6BACvB;2CACH;AACrC;;;;CAIC,GAAG,SAASC,eAAeC,MAAM,EAAE;IAChC,SAASC,yBAAyBC,OAAO,EAAE;QACvC,qBAAOC,OAAMC,cAAc,CAACF,YAAYG,QAAQH,QAAQI,KAAK,CAACC,EAAE;IACpE;IACA,OAAOJ,OAAMK,QAAQ,CAACC,OAAO,CAACT,QAAQU,IAAI,CAACT;AAC/C;AACA;;;;;;;;CAQC,GAAG,SAASU,eAAeC,QAAQ,EAAEC,WAAW,EAAEC,WAAW,EAAE;IAC5D,IAAIF,UAAU;QACV,OAAOA;IACX,CAAC;IACD,IAAIC,gBAAgB,IAAI,IAAIA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYP,KAAK,CAACC,EAAE,EAAE;QAChF,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC/B,CAAC;IACD,OAAOO;AACX;AASW,MAAMhB,yBAAyB,CAACQ,OAAOS,MAAM;IACpD,MAAM,EAAEC,MAAK,EAAGhB,OAAM,EAAGiB,YAAW,EAAGC,OAAM,EAAG,GAAGZ;IACnD,MAAM,EAAEa,qBAAqB,EAAEC,YAAW,EAAGC,eAAc,EAAG,CAAA,EAAG,GAAGC,IAAAA,oCAAuB;IAC3F,MAAMC,YAAYpB,OAAMqB,MAAM,CAAC,IAAI;IACnC,MAAMC,aAAatB,OAAMqB,MAAM,CAAC,KAAK;IACrC,MAAMV,cAAcY,IAAAA,qBAAK,EAACC,+CAAoB,CAAC3B,MAAM,EAAEoB;IACvD,MAAMQ,aAAaC,IAAAA,gCAAgB,EAAC7B,QAAQ;QACxC8B,UAAU,IAAI;QACdC,cAAc;YACVhB,KAAKQ;YACLhB,IAAI,CAACkB,WAAWO,OAAO,GAAGZ,cAAca,SAAS;QACrD;IACJ;IACA9B,OAAM+B,SAAS,CAAC,IAAI;QAChB,IAAIC;QACJ,MAAMvB,WAAW,CAACa,WAAWO,OAAO,GAAG,AAACG,CAAAA,qBAAqBZ,UAAUS,OAAO,AAAD,MAAO,IAAI,IAAIG,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmB5B,EAAE,GAAG0B,SAAS;QACtK,MAAMpB,cAAcd,eAAe6B,eAAe,IAAI,IAAIA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWQ,QAAQ;QAC9GX,WAAWO,OAAO,GAAG3B,QAAQQ;QAC7BQ,eAAeV,eAAeC,UAAUC,aAAaC;IACzD,GAAG;QACCA;QACAd;QACA4B;QACAP;KACH;IACD,OAAO;QACHgB,YAAY;YACRC,MAAM;YACNtB,OAAO;YACPhB,QAAQ;YACRiB,aAAa;YACbC,QAAQ;QACZ;QACAoB,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YAC/BxB;YACA,GAAGT,KAAK;QACZ;QACAU,OAAOa,IAAAA,gCAAgB,EAACb;QACxBhB,QAAQ4B;QACRX,aAAaY,IAAAA,gCAAgB,EAACZ;QAC9BC,QAAQW,IAAAA,gCAAgB,EAACX;IAC7B;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;;aAAAA;;;6DAvCM;gCAC4B;6BACX;2CACH;AACrC;;;;CAIC,GAAG,SAASC,eAAeC,MAAM,EAAE;IAChC,SAASC,yBAAyBC,OAAO,EAAE;QACvC,qBAAOC,OAAMC,cAAc,CAACF,YAAYG,QAAQH,QAAQI,KAAK,CAACC,EAAE;IACpE;IACA,OAAOJ,OAAMK,QAAQ,CAACC,OAAO,CAACT,QAAQU,IAAI,CAACT;AAC/C;AACA;;;;;;;;CAQC,GAAG,SAASU,eAAeC,QAAQ,EAAEC,WAAW,EAAEC,WAAW,EAAE;IAC5D,IAAIF,UAAU;QACV,OAAOA;IACX,CAAC;IACD,IAAIC,gBAAgB,IAAI,IAAIA,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYP,KAAK,CAACC,EAAE,EAAE;QAChF,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC/B,CAAC;IACD,OAAOO;AACX;AASW,MAAMhB,yBAAyB,CAACQ,OAAOS,MAAM;IACpD,MAAM,EAAEC,MAAK,EAAGhB,OAAM,EAAGiB,YAAW,EAAGC,OAAM,EAAG,GAAGZ;IACnD,MAAM,EAAEa,qBAAqB,EAAEC,YAAW,EAAGC,eAAc,EAAG,CAAA,EAAG,GAAGC,IAAAA,oCAAuB;IAC3F,MAAMC,YAAYpB,OAAMqB,MAAM,CAAC,IAAI;IACnC,MAAMC,aAAatB,OAAMqB,MAAM,CAAC,KAAK;IACrC,MAAMV,cAAcY,IAAAA,qBAAK,EAACC,+CAAoB,CAAC3B,MAAM,EAAEoB;IACvD,MAAMQ,aAAaC,oBAAI,CAACC,QAAQ,CAAC9B,QAAQ;QACrC+B,iBAAiB,IAAI;QACrBC,cAAc;YACVjB,KAAKQ;YACLhB,IAAI,CAACkB,WAAWQ,OAAO,GAAGb,cAAcc,SAAS;QACrD;QACAC,aAAa;IACjB;IACAhC,OAAMiC,SAAS,CAAC,IAAI;QAChB,IAAIC;QACJ,MAAMzB,WAAW,CAACa,WAAWQ,OAAO,GAAG,AAACI,CAAAA,qBAAqBd,UAAUU,OAAO,AAAD,MAAO,IAAI,IAAII,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmB9B,EAAE,GAAG2B,SAAS;QACtK,MAAMrB,cAAcd,eAAe6B,eAAe,IAAI,IAAIA,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/lib-commonjs/components/CardPreview/renderCardPreview.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, "renderCardPreview_unstable", {
 const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
 const _reactUtilities = require("@fluentui/react-utilities");
 const renderCardPreview_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
-    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, slotProps.root.children, slots.logo && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.logo, slotProps.logo));
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.root.children, state.logo && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.logo, null));
 };

package/lib-commonjs/components/CardPreview/renderCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderCardPreview.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of CardPreview.\n */ export const renderCardPreview_unstable = (state)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slotProps.root.children, slots.logo && /*#__PURE__*/ createElement(slots.logo, slotProps.logo));\n};\n"],"names":["renderCardPreview_unstable","state","slots","slotProps","getSlotsNext","createElement","root","children","logo"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACtD;AAGlB,MAAMA,6BAA6B,CAACC,QAAQ;IACnD,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACH;IAC5C,OAAO,WAAW,GAAGI,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAEH,UAAUG,IAAI,CAACC,QAAQ,EAAEL,MAAMM,IAAI,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACH,MAAMM,IAAI,EAAEL,UAAUK,IAAI;AAChK"}
+{"version":3,"sources":["renderCardPreview.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of CardPreview.\n */ export const renderCardPreview_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, state.root.children, state.logo && /*#__PURE__*/ createElement(state.logo, null));\n};\n"],"names":["renderCardPreview_unstable","state","assertSlots","createElement","root","children","logo"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAIjCA;;aAAAA;;iCAJkE;gCACvD;AAGjB,MAAMA,6BAA6B,CAACC,QAAQ;IACnDC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,8BAAa,EAACF,MAAMG,IAAI,EAAE,IAAI,EAAEH,MAAMG,IAAI,CAACC,QAAQ,EAAEJ,MAAMK,IAAI,IAAI,WAAW,GAAGH,IAAAA,8BAAa,EAACF,MAAMK,IAAI,EAAE,IAAI;AACxI"}

package/lib-commonjs/components/CardPreview/useCardPreview.js

@@ -45,10 +45,14 @@ const useCardPreview_unstable = (props, ref)=>{
             root: 'div',
             logo: 'div'
         },
-        root: (0, _reactUtilities.getNativeElementProps)('div', {
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
             ref: previewRef,
             ...props
+        }), {
+            elementType: 'div'
         }),
-        logo: (0, _reactUtilities.resolveShorthand)(logo)
+        logo: _reactUtilities.slot.optional(logo, {
+            elementType: 'div'
+        })
     };
 };

package/lib-commonjs/components/CardPreview/useCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardPreview.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */ export const useCardPreview_unstable = (props, ref)=>{\n    const { logo  } = props;\n    const { selectableA11yProps: { referenceLabel , referenceId , setReferenceLabel , setReferenceId  }  } = useCardContext_unstable();\n    const previewRef = useMergedRefs(ref, React.useRef(null));\n    React.useEffect(()=>{\n        if (referenceLabel && referenceId) {\n            return;\n        }\n        if (previewRef.current && previewRef.current.parentNode) {\n            const img = previewRef.current.parentNode.querySelector(`.${cardPreviewClassNames.root} > img`);\n            if (img) {\n                const ariaLabel = img.getAttribute('aria-label');\n                const ariaDescribedby = img.getAttribute('aria-describedby');\n                if (ariaDescribedby) {\n                    setReferenceId(ariaDescribedby);\n                } else if (img.alt) {\n                    setReferenceLabel(img.alt);\n                } else if (ariaLabel) {\n                    setReferenceLabel(ariaLabel);\n                }\n            }\n        }\n    }, [\n        setReferenceLabel,\n        referenceLabel,\n        previewRef,\n        referenceId,\n        setReferenceId\n    ]);\n    return {\n        components: {\n            root: 'div',\n            logo: 'div'\n        },\n        root: getNativeElementProps('div', {\n            ref: previewRef,\n            ...props\n        }),\n        logo: resolveShorthand(logo)\n    };\n};\n"],"names":["useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","useCardContext_unstable","previewRef","useMergedRefs","React","useRef","useEffect","current","parentNode","img","querySelector","cardPreviewClassNames","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","getNativeElementProps","resolveShorthand"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACgD;6BAC/B;4CACF;AAS3B,MAAMA,0BAA0B,CAACC,OAAOC,MAAM;IACrD,MAAM,EAAEC,KAAI,EAAG,GAAGF;IAClB,MAAM,EAAEG,qBAAqB,EAAEC,eAAc,EAAGC,YAAW,EAAGC,kBAAiB,EAAGC,eAAc,EAAG,CAAA,EAAG,GAAGC,IAAAA,oCAAuB;IAChI,MAAMC,aAAaC,IAAAA,6BAAa,EAACT,KAAKU,OAAMC,MAAM,CAAC,IAAI;IACvDD,OAAME,SAAS,CAAC,IAAI;QAChB,IAAIT,kBAAkBC,aAAa;YAC/B;QACJ,CAAC;QACD,IAAII,WAAWK,OAAO,IAAIL,WAAWK,OAAO,CAACC,UAAU,EAAE;YACrD,MAAMC,MAAMP,WAAWK,OAAO,CAACC,UAAU,CAACE,aAAa,CAAC,CAAC,CAAC,EAAEC,iDAAqB,CAACC,IAAI,CAAC,MAAM,CAAC;YAC9F,IAAIH,KAAK;gBACL,MAAMI,YAAYJ,IAAIK,YAAY,CAAC;gBACnC,MAAMC,kBAAkBN,IAAIK,YAAY,CAAC;gBACzC,IAAIC,iBAAiB;oBACjBf,eAAee;gBACnB,OAAO,IAAIN,IAAIO,GAAG,EAAE;oBAChBjB,kBAAkBU,IAAIO,GAAG;gBAC7B,OAAO,IAAIH,WAAW;oBAClBd,kBAAkBc;gBACtB,CAAC;YACL,CAAC;QACL,CAAC;IACL,GAAG;QACCd;QACAF;QACAK;QACAJ;QACAE;KACH;IACD,OAAO;QACHiB,YAAY;YACRL,MAAM;YACNjB,MAAM;QACV;QACAiB,MAAMM,IAAAA,qCAAqB,EAAC,OAAO;YAC/BxB,KAAKQ;YACL,GAAGT,KAAK;QACZ;QACAE,MAAMwB,IAAAA,gCAAgB,EAACxB;IAC3B;AACJ"}
+{"version":3,"sources":["useCardPreview.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */ export const useCardPreview_unstable = (props, ref)=>{\n    const { logo  } = props;\n    const { selectableA11yProps: { referenceLabel , referenceId , setReferenceLabel , setReferenceId  }  } = useCardContext_unstable();\n    const previewRef = useMergedRefs(ref, React.useRef(null));\n    React.useEffect(()=>{\n        if (referenceLabel && referenceId) {\n            return;\n        }\n        if (previewRef.current && previewRef.current.parentNode) {\n            const img = previewRef.current.parentNode.querySelector(`.${cardPreviewClassNames.root} > img`);\n            if (img) {\n                const ariaLabel = img.getAttribute('aria-label');\n                const ariaDescribedby = img.getAttribute('aria-describedby');\n                if (ariaDescribedby) {\n                    setReferenceId(ariaDescribedby);\n                } else if (img.alt) {\n                    setReferenceLabel(img.alt);\n                } else if (ariaLabel) {\n                    setReferenceLabel(ariaLabel);\n                }\n            }\n        }\n    }, [\n        setReferenceLabel,\n        referenceLabel,\n        previewRef,\n        referenceId,\n        setReferenceId\n    ]);\n    return {\n        components: {\n            root: 'div',\n            logo: 'div'\n        },\n        root: slot.always(getNativeElementProps('div', {\n            ref: previewRef,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        logo: slot.optional(logo, {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","useCardContext_unstable","previewRef","useMergedRefs","React","useRef","useEffect","current","parentNode","img","querySelector","cardPreviewClassNames","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","slot","always","getNativeElementProps","elementType","optional"],"mappings":";;;;+BAYiBA;;aAAAA;;;6DAZM;gCACoC;6BACnB;4CACF;AAS3B,MAAMA,0BAA0B,CAACC,OAAOC,MAAM;IACrD,MAAM,EAAEC,KAAI,EAAG,GAAGF;IAClB,MAAM,EAAEG,qBAAqB,EAAEC,eAAc,EAAGC,YAAW,EAAGC,kBAAiB,EAAGC,eAAc,EAAG,CAAA,EAAG,GAAGC,IAAAA,oCAAuB;IAChI,MAAMC,aAAaC,IAAAA,6BAAa,EAACT,KAAKU,OAAMC,MAAM,CAAC,IAAI;IACvDD,OAAME,SAAS,CAAC,IAAI;QAChB,IAAIT,kBAAkBC,aAAa;YAC/B;QACJ,CAAC;QACD,IAAII,WAAWK,OAAO,IAAIL,WAAWK,OAAO,CAACC,UAAU,EAAE;YACrD,MAAMC,MAAMP,WAAWK,OAAO,CAACC,UAAU,CAACE,aAAa,CAAC,CAAC,CAAC,EAAEC,iDAAqB,CAACC,IAAI,CAAC,MAAM,CAAC;YAC9F,IAAIH,KAAK;gBACL,MAAMI,YAAYJ,IAAIK,YAAY,CAAC;gBACnC,MAAMC,kBAAkBN,IAAIK,YAAY,CAAC;gBACzC,IAAIC,iBAAiB;oBACjBf,eAAee;gBACnB,OAAO,IAAIN,IAAIO,GAAG,EAAE;oBAChBjB,kBAAkBU,IAAIO,GAAG;gBAC7B,OAAO,IAAIH,WAAW;oBAClBd,kBAAkBc;gBACtB,CAAC;YACL,CAAC;QACL,CAAC;IACL,GAAG;QACCd;QACAF;QACAK;QACAJ;QACAE;KACH;IACD,OAAO;QACHiB,YAAY;YACRL,MAAM;YACNjB,MAAM;QACV;QACAiB,MAAMM,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C1B,KAAKQ;YACL,GAAGT,KAAK;QACZ,IAAI;YACA4B,aAAa;QACjB;QACA1B,MAAMuB,oBAAI,CAACI,QAAQ,CAAC3B,MAAM;YACtB0B,aAAa;QACjB;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "0.0.0-nightly-20230807-0415.1",
+  "version": "0.0.0-nightly-20230808-0415.1",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -30,19 +30,19 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230807-0415.1",
-    "@fluentui/react-conformance": "0.0.0-nightly-20230807-0415.1",
-    "@fluentui/react-button": "0.0.0-nightly-20230807-0415.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230808-0415.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20230808-0415.1",
+    "@fluentui/react-button": "0.0.0-nightly-20230808-0415.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20230807-0415.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20230807-0415.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230807-0415.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230807-0415.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230807-0415.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20230808-0415.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20230808-0415.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230808-0415.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230808-0415.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230808-0415.1",
     "@griffel/react": "^1.5.7",
     "@swc/helpers": "^0.4.14"
   },