@fluentui/react-card 9.0.0-beta.1 → 9.0.0-beta.5

package/lib/components/CardPreview/CardPreview.js

@@ -6,8 +6,8 @@ import { useCardPreviewStyles } from './useCardPreviewStyles';
  * Component to render image previews of documents or articles in a Card component.
  */
 
-export var CardPreview = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardPreview(props, ref);
+export const CardPreview = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCardPreview(props, ref);
   useCardPreviewStyles(state);
   return renderCardPreview(state);
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/CardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;AAEG;;AACH,OAAO,IAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC5F,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AACA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardPreview/CardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AACA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}

package/lib/components/CardPreview/CardPreview.types.d.ts

@@ -1,28 +1,13 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type CardPreviewSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+    logo?: IntrinsicShorthandProps<'div'>;
+};
 /**
- * CardPreview Props
+ * CardPreview props
  */
-export interface CardPreviewProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Image slot
-     */
-    logo?: ShorthandPropsCompat<React.ImgHTMLAttributes<HTMLImageElement>>;
-}
-/**
- * Names of the shorthand properties in CardPreviewProps
- */
-export declare type CardPreviewShorthandProps = 'logo';
-/**
- * Names of CardPreviewProps that have a default value in useCardPreview
- */
-export declare type CardPreviewDefaultedProps = never;
+export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 /**
  * State used in rendering CardPreview
  */
-export interface CardPreviewState extends ComponentStateCompat<CardPreviewProps, CardPreviewShorthandProps, CardPreviewDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardPreviewState = ComponentState<CardPreviewSlots>;

package/lib/components/CardPreview/renderCardPreview.js

@@ -1,16 +1,15 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
-import { cardPreviewShorthandPropsCompat } from './useCardPreview';
+import { getSlots } from '@fluentui/react-utilities';
+import { cardPreviewShorthandProps } from './useCardPreview';
 /**
  * Render the final JSX of CardPreview
  */
 
-export var renderCardPreview = function (state) {
-  var _a = getSlotsCompat(state, cardPreviewShorthandPropsCompat),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.children, /*#__PURE__*/React.createElement(slots.logo, __assign({}, slotProps.logo)));
+export const renderCardPreview = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state, cardPreviewShorthandProps);
+  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), slotProps.root.children, /*#__PURE__*/React.createElement(slots.logo, Object.assign({}, slotProps.logo)));
 };
 //# sourceMappingURL=renderCardPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,+BAAT,QAAgD,kBAAhD;AAGA;;AAEG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACjD,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,+BAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,QADT,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,yBAAT,QAA0C,kBAA1C;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAI,KAAD,IAA4B;AAC3D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,EAA0B,yBAA1B,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,CADF;AAMD,CATM","sourceRoot":""}

package/lib/components/CardPreview/useCardPreview.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { CardPreviewProps, CardPreviewShorthandProps, CardPreviewState } from './CardPreview.types';
+import type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 /**
  * Array of all shorthand properties listed in CardPreviewShorthandProps
  */
-export declare const cardPreviewShorthandPropsCompat: CardPreviewShorthandProps[];
+export declare const cardPreviewShorthandProps: Array<keyof CardPreviewSlots>;
 /**
  * Create the state required to render CardPreview.
  *
@@ -12,6 +12,5 @@ export declare const cardPreviewShorthandPropsCompat: CardPreviewShorthandProps[
  *
  * @param props - props from this instance of CardPreview
  * @param ref - reference to root HTMLElement of CardPreview
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCardPreview: (props: CardPreviewProps, ref: React.Ref<HTMLElement>, defaultProps?: CardPreviewProps | undefined) => CardPreviewState;
+export declare const useCardPreview: (props: CardPreviewProps, ref: React.Ref<HTMLElement>) => CardPreviewState;

package/lib/components/CardPreview/useCardPreview.js

@@ -1,12 +1,9 @@
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Array of all shorthand properties listed in CardPreviewShorthandProps
  */
 
-export var cardPreviewShorthandPropsCompat = ['logo'];
-var mergeProps = /*#__PURE__*/makeMergeProps({
-  deepMerge: cardPreviewShorthandPropsCompat
-});
+export const cardPreviewShorthandProps = ['root', 'logo'];
 /**
  * Create the state required to render CardPreview.
  *
@@ -15,16 +12,22 @@ var mergeProps = /*#__PURE__*/makeMergeProps({
  *
  * @param props - props from this instance of CardPreview
  * @param ref - reference to root HTMLElement of CardPreview
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-export var useCardPreview = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref,
-    logo: {
-      as: 'div'
-    }
-  }, defaultProps && resolveShorthandProps(defaultProps, cardPreviewShorthandPropsCompat), resolveShorthandProps(props, cardPreviewShorthandPropsCompat));
-  return state;
+export const useCardPreview = (props, ref) => {
+  const {
+    logo
+  } = props;
+  return {
+    components: {
+      root: 'div',
+      logo: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    logo: resolveShorthand(logo)
+  };
 };
 //# sourceMappingURL=useCardPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA;;AAEG;;AACH,OAAO,IAAM,+BAA+B,GAAgC,CAAC,MAAD,CAArE;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAmB;AAAE,EAAA,SAAS,EAAE;AAAb,CAAnB,CAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,KAD4B,EAE5B,GAF4B,EAG5B,YAH4B,EAGG;AAE/B,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,IAAI,EAAE;AAAE,MAAA,EAAE,EAAE;AAAN;AAFR,GADsB,EAKtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,+BAAf,CALf,EAMtB,qBAAqB,CAAC,KAAD,EAAQ,+BAAR,CANC,CAAxB;AASA,SAAO,KAAP;AACD,CAfM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAkC,CAAC,MAAD,EAAS,MAAT,CAAjE;AAEP;;;;;;;;AAQG;;AACH,OAAO,MAAM,cAAc,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AACvG,QAAM;AAAE,IAAA;AAAF,MAAW,KAAjB;AACA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD;AAVjB,GAAP;AAYD,CAdM","sourceRoot":""}

package/lib/components/CardPreview/useCardPreviewStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardPreviewState } from './CardPreview.types';
+export declare const cardPreviewClassName = "fui-CardPreview";
 /**
  * Apply styling to the CardPreview slots based on the state
  */

package/lib/components/CardPreview/useCardPreviewStyles.js

@@ -1,9 +1,10 @@
 import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+export const cardPreviewClassName = 'fui-CardPreview';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "qhf8xq": "f10pi13n",
     "B6of3ja": "f1hu3pq6",
@@ -28,9 +29,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var useCardPreviewStyles = function (state) {
-  var styles = useStyles();
-  state.className = mergeClasses('fluentui-react-card-preview', styles.root, state.className);
+export const useCardPreviewStyles = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);
 
   if (state.logo) {
     state.logo.className = mergeClasses(styles.logo, state.logo.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAAC,6BAAD,EAAgC,MAAM,CAAC,IAAvC,EAA6C,KAAK,CAAC,SAAnD,CAA9B;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAA8C;AAChF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}

package/lib-commonjs/Card.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/Card/index"), exports);
 //# sourceMappingURL=Card.js.map

package/lib-commonjs/CardFooter.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/CardFooter/index"), exports);
 //# sourceMappingURL=CardFooter.js.map

package/lib-commonjs/CardHeader.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/CardHeader/index"), exports);
 //# sourceMappingURL=CardHeader.js.map

package/lib-commonjs/CardPreview.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/CardPreview/index"), exports);
 //# sourceMappingURL=CardPreview.js.map

package/lib-commonjs/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import type { CardProps } from './Card.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
+ * A card provides scaffolding for hosting actions and content for a single topic.
  */
 export declare const Card: ForwardRefComponent<CardProps>;

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

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Card = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var useCard_1 = /*#__PURE__*/require("./useCard");
+const useCard_1 = /*#__PURE__*/require("./useCard");
 
-var renderCard_1 = /*#__PURE__*/require("./renderCard");
+const renderCard_1 = /*#__PURE__*/require("./renderCard");
 
-var useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
+const useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
 /**
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
+ * A card provides scaffolding for hosting actions and content for a single topic.
  */
 
 
-exports.Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCard_1.useCard(props, ref);
+exports.Card = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCard_1.useCard(props, ref);
   useCardStyles_1.useCardStyles(state);
   return renderCard_1.renderCard(state);
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9E,MAAM,KAAK,GAAG,SAAA,CAAA,OAAA,CAAQ,KAAR,EAAe,GAAf,CAAd;AAEA,EAAA,eAAA,CAAA,aAAA,CAAc,KAAd;AACA,SAAO,YAAA,CAAA,UAAA,CAAW,KAAX,CAAP;AACD,CALmD,CAAvC;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,SAAA,CAAA,OAAA,CAAQ,KAAR,EAAe,GAAf,CAAd;AAEA,EAAA,eAAA,CAAA,aAAA,CAAc,KAAd;AACA,SAAO,YAAA,CAAA,UAAA,CAAW,KAAX,CAAP;AACD,CALmD,CAAvC;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}

package/lib-commonjs/components/Card/Card.types.d.ts

@@ -1,24 +1,13 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type CardSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+};
+export declare type CardCommons = {};
 /**
  * Card Props
  */
-export interface CardProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-}
-/**
- * Names of the shorthand properties in CardProps
- */
-export declare type CardShorthandProps = never;
-/**
- * Names of CardProps that have a default value in useCard
- */
-export declare type CardDefaultedProps = never;
+export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
 /**
  * State used in rendering Card
  */
-export interface CardState extends CardProps, ComponentStateCompat<CardProps, CardShorthandProps, CardDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardState = ComponentState<CardSlots> & CardCommons;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Card"), exports);
 

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

@@ -5,22 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderCard = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Card
  */
 
 
-var renderCard = function (state) {
-  var _a = react_utilities_1.getSlotsCompat(state),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.children);
+const renderCard = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, Object.assign({}, slotProps.root));
 };
 
 exports.renderCard = renderCard;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,UAAU,GAAG,UAAC,KAAD,EAAiB;AACnC,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAAiC,KAAK,CAAC,QAAvC,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,UAAU,GAAI,KAAD,IAAqB;AAC7C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}

package/lib-commonjs/components/Card/useCard.d.ts

@@ -8,6 +8,5 @@ import type { CardProps, CardState } from './Card.types';
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCard: (props: CardProps, ref: React.Ref<HTMLElement>, defaultProps?: CardProps | undefined) => CardState;
+export declare const useCard: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCard = void 0;
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps();
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 /**
  * Create the state required to render Card.
  *
@@ -16,15 +16,24 @@ var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps();
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-var useCard = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref,
-    role: 'group'
-  }, defaultProps, props);
-  return state;
+
+const useCard = (props, ref) => {
+  const groupperAttrs = react_tabster_1.useFocusableGroup({
+    tabBehavior: 'limitedTrapFocus'
+  });
+  return {
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps(props.as || 'div', {
+      ref,
+      role: 'group',
+      ...groupperAttrs,
+      ...props
+    })
+  };
 };
 
 exports.useCard = useCard;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGA,IAAM,UAAU,gBAAG,iBAAA,CAAA,cAAA,EAAnB;AAEA;;;;;;;;;AASG;;AACI,IAAM,OAAO,GAAG,UAAC,KAAD,EAAmB,GAAnB,EAAgD,YAAhD,EAAwE;AAC7F,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,IAAI,EAAE;AAFR,GADsB,EAKtB,YALsB,EAMtB,KANsB,CAAxB;AASA,SAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,OAAO,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAClF,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE;AADyB,GAAlB,CAAtB;AAIA,SAAO;AACL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KADP;AAGL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AAHD,GAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP","sourceRoot":""}

package/lib-commonjs/components/Card/useCardStyles.d.ts

@@ -1,4 +1,5 @@
 import type { CardState } from './Card.types';
+export declare const cardClassName = "fui-Card";
 /**
  * Apply styling to the Card slots based on the state
  */

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

@@ -3,20 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardStyles = void 0;
+exports.useCardStyles = exports.cardClassName = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+const index_1 = /*#__PURE__*/require("../CardPreview/index");
+
+exports.cardClassName = 'fui-Card';
 /**
  * Styles for the root slot
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1vx9l62",
     "Bpg54ce": "f1a3p1vp",
-    "E5pizo": ["f1whvlc6", "fzb35q0"],
+    "E5pizo": "f1whvlc6",
     "sj55zd": "f19n0e5",
     "De3pzq": "fxugw4r",
     "z8tnut": "f1kcqot9",
@@ -25,9 +28,9 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "uwmqm3": ["fjlbh76", "f11qrl6u"],
     "rmohyg": "fsbu5mz",
     "Dimara": "ft85np5",
-    "Beromem": ["f1kp1iwg", "f1819hsr"],
-    "tyvvez": ["f1819hsr", "f1kp1iwg"],
-    "kr49nh": "fthnjpr"
+    "Bt4kzjz": ["fwanz6y", "f1sdy22h"],
+    "B1ou843": ["f1sdy22h", "fwanz6y"],
+    "Bx3mhbb": "f12h22a6"
   },
   "interactive": {
     "Bceei9c": "f1k6fduh",
@@ -35,7 +38,7 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "ecr2s2": "fb40n2d"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1a3p1vp{overflow:hidden;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".fzb35q0{box-shadow:var(--shadow-4);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fsbu5mz{gap:12px;}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1kp1iwg>.fluentui-react-card-preview{margin-left:-12px;}", ".f1819hsr>.fluentui-react-card-preview{margin-right:-12px;}", ".fthnjpr>.fluentui-react-card-preview:first-child{margin-top:-12px;}", ".f1k6fduh{cursor:pointer;}"],
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1a3p1vp{overflow:hidden;}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fsbu5mz{gap:12px;}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".fwanz6y>.fui-CardPreview{margin-left:-12px;}", ".f1sdy22h>.fui-CardPreview{margin-right:-12px;}", ".f12h22a6>.fui-CardPreview:first-child{margin-top:-12px;}", ".f1k6fduh{cursor:pointer;}"],
   "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"],
   "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}"]
 });
@@ -44,9 +47,9 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
  */
 
 
-var useCardStyles = function (state) {
-  var styles = useStyles();
-  state.className = react_make_styles_1.mergeClasses(styles.root, (state.onClick || state.onMouseUp || state.onMouseDown || state.onPointerUp || state.onPointerDown || state.onTouchStart || state.onTouchEnd) && styles.interactive, state.className);
+const useCardStyles = state => {
+  const styles = useStyles();
+  state.root.className = react_make_styles_1.mergeClasses(exports.cardClassName, styles.root, (state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd) && styles.interactive, state.root.className);
   return state;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAiB;AAC5C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAChB,MAAM,CAAC,IADS,EAEhB,CAAC,KAAK,CAAC,OAAN,IACC,KAAK,CAAC,SADP,IAEC,KAAK,CAAC,WAFP,IAGC,KAAK,CAAC,WAHP,IAIC,KAAK,CAAC,aAJP,IAKC,KAAK,CAAC,YALP,IAMC,KAAK,CAAC,UANR,KAOE,MAAM,CAAC,WATO,EAUhB,KAAK,CAAC,SAVU,CAAlB;AAaA,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAGa,OAAA,CAAA,aAAA,GAAgB,UAAhB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,aAAa,GAAI,KAAD,IAAgC;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,aADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,CAAC,KAAK,CAAC,IAAN,CAAW,OAAX,IACC,KAAK,CAAC,IAAN,CAAW,SADZ,IAEC,KAAK,CAAC,IAAN,CAAW,WAFZ,IAGC,KAAK,CAAC,IAAN,CAAW,WAHZ,IAIC,KAAK,CAAC,IAAN,CAAW,aAJZ,IAKC,KAAK,CAAC,IAAN,CAAW,YALZ,IAMC,KAAK,CAAC,IAAN,CAAW,UANb,KAOE,MAAM,CAAC,WAVY,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAcA,SAAO,KAAP;AACD,CAjBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}

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

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CardFooter = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var useCardFooter_1 = /*#__PURE__*/require("./useCardFooter");
+const useCardFooter_1 = /*#__PURE__*/require("./useCardFooter");
 
-var renderCardFooter_1 = /*#__PURE__*/require("./renderCardFooter");
+const renderCardFooter_1 = /*#__PURE__*/require("./renderCardFooter");
 
-var useCardFooterStyles_1 = /*#__PURE__*/require("./useCardFooterStyles");
+const useCardFooterStyles_1 = /*#__PURE__*/require("./useCardFooterStyles");
 /**
  * Component to render Button actions in a Card component.
  */
 
 
-exports.CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardFooter_1.useCardFooter(props, ref);
+exports.CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCardFooter_1.useCardFooter(props, ref);
   useCardFooterStyles_1.useCardFooterStyles(state);
   return renderCardFooter_1.renderCardFooter(state);
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,IAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,eAAA,CAAA,aAAA,CAAc,KAAd,EAAqB,GAArB,CAAd;AAEA,EAAA,qBAAA,CAAA,mBAAA,CAAoB,KAApB;AACA,SAAO,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,aAAA,CAAc,KAAd,EAAqB,GAArB,CAAd;AAEA,EAAA,qBAAA,CAAA,mBAAA,CAAoB,KAApB;AACA,SAAO,kBAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourceRoot":""}

package/lib-commonjs/components/CardFooter/CardFooter.types.d.ts

@@ -1,28 +1,13 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type CardFooterSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+    action?: IntrinsicShorthandProps<'div'>;
+};
 /**
- * CardFooter Props
+ * CardFooter props
  */
-export interface CardFooterProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Actions slot
-     */
-    action?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-}
-/**
- * Names of the shorthand properties in CardFooterProps
- */
-export declare type CardFooterShorthandProps = 'action';
-/**
- * Names of CardFooterProps that have a default value in useCardFooter
- */
-export declare type CardFooterDefaultedProps = never;
+export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
 /**
  * State used in rendering CardFooter
  */
-export interface CardFooterState extends ComponentStateCompat<CardFooterProps, CardFooterShorthandProps, CardFooterDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardFooterState = ComponentState<CardFooterSlots>;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./CardFooter"), exports);