@fluentui/react-card 9.0.0-rc.1 → 9.0.0

package/lib-amd/components/CardHeader/useCardHeaderStyles.js

@@ -0,0 +1,72 @@
+define(["require", "exports", "@griffel/react"], function (require, exports, react_1) {
+    "use strict";
+    var _a;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardHeaderStyles_unstable = exports.cardHeaderCSSVars = exports.cardHeaderClassNames = void 0;
+    /**
+     * Static CSS class names used internally for the component slots.
+     */
+    exports.cardHeaderClassNames = {
+        root: 'fui-CardHeader',
+        image: 'fui-CardHeader__image',
+        header: 'fui-CardHeader__header',
+        description: 'fui-CardHeader__description',
+        action: 'fui-CardHeader__action',
+    };
+    /**
+     * CSS variable names used internally for uniform styling in CardHeader.
+     */
+    exports.cardHeaderCSSVars = {
+        cardHeaderGapVar: '--fui-CardHeader--gap',
+    };
+    var useStyles = react_1.makeStyles({
+        root: (_a = {},
+            _a[exports.cardHeaderCSSVars.cardHeaderGapVar] = '12px',
+            _a.display = 'grid',
+            _a.gridAutoColumns = 'min-content 1fr min-content',
+            _a.gridAutoRows = '1fr min-content',
+            _a.alignItems = 'center',
+            _a),
+        image: {
+            display: 'inline-flex',
+            marginRight: "var(" + exports.cardHeaderCSSVars.cardHeaderGapVar + ")",
+            gridColumnStart: '1',
+            gridRowStart: 'span 2',
+        },
+        header: {
+            gridColumnStart: '2',
+            gridRowStart: '1',
+        },
+        description: {
+            gridColumnStart: '2',
+            gridRowStart: '2',
+        },
+        action: {
+            marginLeft: "var(" + exports.cardHeaderCSSVars.cardHeaderGapVar + ")",
+            gridColumnStart: '3',
+            gridRowStart: 'span 2',
+        },
+    });
+    /**
+     * Apply styling to the CardHeader slots based on the state.
+     */
+    var useCardHeaderStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.cardHeaderClassNames.root, styles.root, state.root.className);
+        if (state.image) {
+            state.image.className = react_1.mergeClasses(exports.cardHeaderClassNames.image, styles.image, state.image.className);
+        }
+        if (state.header) {
+            state.header.className = react_1.mergeClasses(exports.cardHeaderClassNames.header, styles.header, state.header.className);
+        }
+        if (state.description) {
+            state.description.className = react_1.mergeClasses(exports.cardHeaderClassNames.description, styles.description, state.description.className);
+        }
+        if (state.action) {
+            state.action.className = react_1.mergeClasses(exports.cardHeaderClassNames.action, styles.action, state.action.className);
+        }
+        return state;
+    };
+    exports.useCardHeaderStyles_unstable = useCardHeaderStyles_unstable;
+});
+//# sourceMappingURL=useCardHeaderStyles.js.map

package/lib-amd/components/CardHeader/useCardHeaderStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCardHeaderStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;IAIA;;OAEG;IACU,QAAA,oBAAoB,GAAoC;QACnE,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,uBAAuB;QAC9B,MAAM,EAAE,wBAAwB;QAChC,WAAW,EAAE,6BAA6B;QAC1C,MAAM,EAAE,wBAAwB;KACjC,CAAC;IAEF;;OAEG;IACU,QAAA,iBAAiB,GAAG;QAC/B,gBAAgB,EAAE,uBAAuB;KAC1C,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI;YACF,GAAC,yBAAiB,CAAC,gBAAgB,IAAG,MAAM;YAC5C,UAAO,GAAE,MAAM;YACf,kBAAe,GAAE,6BAA6B;YAC9C,eAAY,GAAE,iBAAiB;YAC/B,aAAU,GAAE,QAAQ;eACrB;QACD,KAAK,EAAE;YACL,OAAO,EAAE,aAAa;YACtB,WAAW,EAAE,SAAO,yBAAiB,CAAC,gBAAgB,MAAG;YACzD,eAAe,EAAE,GAAG;YACpB,YAAY,EAAE,QAAQ;SACvB;QACD,MAAM,EAAE;YACN,eAAe,EAAE,GAAG;YACpB,YAAY,EAAE,GAAG;SAClB;QACD,WAAW,EAAE;YACX,eAAe,EAAE,GAAG;YACpB,YAAY,EAAE,GAAG;SAClB;QACD,MAAM,EAAE;YACN,UAAU,EAAE,SAAO,yBAAiB,CAAC,gBAAgB,MAAG;YACxD,eAAe,EAAE,GAAG;YACpB,YAAY,EAAE,QAAQ;SACvB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,4BAA4B,GAAG,UAAC,KAAsB;QACjE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,4BAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAElG,IAAI,KAAK,CAAC,KAAK,EAAE;YACf,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAY,CAAC,4BAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;SACvG;QAED,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,KAAK,CAAC,MAAM,CAAC,SAAS,GAAG,oBAAY,CAAC,4BAAoB,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SAC3G;QAED,IAAI,KAAK,CAAC,WAAW,EAAE;YACrB,KAAK,CAAC,WAAW,CAAC,SAAS,GAAG,oBAAY,CACxC,4BAAoB,CAAC,WAAW,EAChC,MAAM,CAAC,WAAW,EAClB,KAAK,CAAC,WAAW,CAAC,SAAS,CAC5B,CAAC;SACH;QAED,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,KAAK,CAAC,MAAM,CAAC,SAAS,GAAG,oBAAY,CAAC,4BAAoB,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SAC3G;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAzBW,QAAA,4BAA4B,gCAyBvC","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n  root: 'fui-CardHeader',\n  image: 'fui-CardHeader__image',\n  header: 'fui-CardHeader__header',\n  description: 'fui-CardHeader__description',\n  action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n  cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n    display: 'grid',\n    gridAutoColumns: 'min-content 1fr min-content',\n    gridAutoRows: '1fr min-content',\n    alignItems: 'center',\n  },\n  image: {\n    display: 'inline-flex',\n    marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '1',\n    gridRowStart: 'span 2',\n  },\n  header: {\n    gridColumnStart: '2',\n    gridRowStart: '1',\n  },\n  description: {\n    gridColumnStart: '2',\n    gridRowStart: '2',\n  },\n  action: {\n    marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n    gridColumnStart: '3',\n    gridRowStart: 'span 2',\n  },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n  if (state.image) {\n    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n  }\n\n  if (state.header) {\n    state.header.className = mergeClasses(cardHeaderClassNames.header, styles.header, state.header.className);\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      cardHeaderClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"]}

package/lib-amd/components/CardPreview/CardPreview.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useCardPreview", "./renderCardPreview", "./useCardPreviewStyles"], function (require, exports, React, useCardPreview_1, renderCardPreview_1, useCardPreviewStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CardPreview = void 0;
+    /**
+     * Component to render image previews of documents or articles in a Card component.
+     */
+    exports.CardPreview = React.forwardRef(function (props, ref) {
+        var state = useCardPreview_1.useCardPreview_unstable(props, ref);
+        useCardPreviewStyles_1.useCardPreviewStyles_unstable(state);
+        return renderCardPreview_1.renderCardPreview_unstable(state);
+    });
+    exports.CardPreview.displayName = 'CardPreview';
+});
+//# sourceMappingURL=CardPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardPreview.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n  const state = useCardPreview_unstable(props, ref);\n\n  useCardPreviewStyles_unstable(state);\n  return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"]}

package/lib-amd/components/CardPreview/CardPreview.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=CardPreview.types.js.map

package/lib-amd/components/CardPreview/CardPreview.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardPreview.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/CardPreview.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the Card component.\n */\nexport type CardPreviewSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Container that holds a logo related to the image preview provided.\n   */\n  logo?: Slot<'div', 'img'>;\n};\n\n/**\n * CardPreview component props.\n */\nexport type CardPreviewProps = ComponentProps<CardPreviewSlots>;\n\n/**\n * State used in rendering CardPreview.\n */\nexport type CardPreviewState = ComponentState<CardPreviewSlots>;\n"]}

package/lib-amd/components/CardPreview/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./CardPreview", "./CardPreview.types", "./renderCardPreview", "./useCardPreview", "./useCardPreviewStyles"], function (require, exports, tslib_1, CardPreview_1, CardPreview_types_1, renderCardPreview_1, useCardPreview_1, useCardPreviewStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(CardPreview_1, exports);
+    tslib_1.__exportStar(CardPreview_types_1, exports);
+    tslib_1.__exportStar(renderCardPreview_1, exports);
+    tslib_1.__exportStar(useCardPreview_1, exports);
+    tslib_1.__exportStar(useCardPreviewStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/CardPreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACjC,sDAAuC","sourcesContent":["export * from './CardPreview';\nexport * from './CardPreview.types';\nexport * from './renderCardPreview';\nexport * from './useCardPreview';\nexport * from './useCardPreviewStyles';\n"]}

package/lib-amd/components/CardPreview/renderCardPreview.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderCardPreview_unstable = void 0;
+    /**
+     * Render the final JSX of CardPreview.
+     */
+    var renderCardPreview_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slotProps.root.children,
+            slots.logo && React.createElement(slots.logo, tslib_1.__assign({}, slotProps.logo))));
+    };
+    exports.renderCardPreview_unstable = renderCardPreview_unstable;
+});
+//# sourceMappingURL=renderCardPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderCardPreview.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,SAAS,CAAC,IAAI,CAAC,QAAQ;YACvB,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACtC,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,0BAA0B,8BASrC","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"]}

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

@@ -0,0 +1,50 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../Card/CardContext", "./useCardPreviewStyles"], function (require, exports, tslib_1, React, react_utilities_1, CardContext_1, useCardPreviewStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardPreview_unstable = void 0;
+    /**
+     * Create the state required to render CardPreview.
+     *
+     * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
+     * before being passed to renderCardPreview_unstable.
+     *
+     * @param props - props from this instance of CardPreview
+     * @param ref - reference to root HTMLElement of CardPreview
+     */
+    var useCardPreview_unstable = function (props, ref) {
+        var logo = props.logo;
+        var _a = CardContext_1.useCardContext_unstable().selectableA11yProps, referenceLabel = _a.referenceLabel, referenceId = _a.referenceId, setReferenceLabel = _a.setReferenceLabel, setReferenceId = _a.setReferenceId;
+        var previewRef = react_utilities_1.useMergedRefs(ref, React.useRef(null));
+        React.useEffect(function () {
+            if (referenceLabel && referenceId) {
+                return;
+            }
+            if (previewRef.current && previewRef.current.parentNode) {
+                var img = previewRef.current.parentNode.querySelector("." + useCardPreviewStyles_1.cardPreviewClassNames.root + " > img");
+                if (img) {
+                    var ariaLabel = img.getAttribute('aria-label');
+                    var ariaDescribedby = img.getAttribute('aria-describedby');
+                    if (ariaDescribedby) {
+                        setReferenceId(ariaDescribedby);
+                    }
+                    else if (img.alt) {
+                        setReferenceLabel(img.alt);
+                    }
+                    else if (ariaLabel) {
+                        setReferenceLabel(ariaLabel);
+                    }
+                }
+            }
+        }, [setReferenceLabel, referenceLabel, previewRef, referenceId, setReferenceId]);
+        return {
+            components: {
+                root: 'div',
+                logo: 'div',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: previewRef }, props)),
+            logo: react_utilities_1.resolveShorthand(logo),
+        };
+    };
+    exports.useCardPreview_unstable = useCardPreview_unstable;
+});
+//# sourceMappingURL=useCardPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCardPreview.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":";;;;IAMA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;QAClF,IAAA,IAAI,GAAK,KAAK,KAAV,CAAW;QAGrB,IAAA,KACE,qCAAuB,EAAE,oBAD4D,EAAhE,cAAc,oBAAA,EAAE,WAAW,iBAAA,EAAE,iBAAiB,uBAAA,EAAE,cAAc,oBAAE,CAC3D;QAC9B,IAAM,UAAU,GAAG,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC,CAAC;QAE1E,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,cAAc,IAAI,WAAW,EAAE;gBACjC,OAAO;aACR;YAED,IAAI,UAAU,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,UAAU,EAAE;gBACvD,IAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAmB,MAAI,4CAAqB,CAAC,IAAI,WAAQ,CAAC,CAAC;gBAElH,IAAI,GAAG,EAAE;oBACP,IAAM,SAAS,GAAG,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;oBACjD,IAAM,eAAe,GAAG,GAAG,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;oBAE7D,IAAI,eAAe,EAAE;wBACnB,cAAc,CAAC,eAAe,CAAC,CAAC;qBACjC;yBAAM,IAAI,GAAG,CAAC,GAAG,EAAE;wBAClB,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;qBAC5B;yBAAM,IAAI,SAAS,EAAE;wBACpB,iBAAiB,CAAC,SAAS,CAAC,CAAC;qBAC9B;iBACF;aACF;QACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;QAEjF,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,IAAI,EAAE,KAAK;aACZ;YAED,IAAI,EAAE,uCAAqB,CAAC,KAAK,qBAC/B,GAAG,EAAE,UAAU,IACZ,KAAK,EACR;YACF,IAAI,EAAE,kCAAgB,CAAC,IAAI,CAAC;SAC7B,CAAC;IACJ,CAAC,CAAC;IA3CW,QAAA,uBAAuB,2BA2ClC","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';\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"]}

package/lib-amd/components/CardPreview/useCardPreviewStyles.js

@@ -0,0 +1,44 @@
+define(["require", "exports", "@griffel/react"], function (require, exports, react_1) {
+    "use strict";
+    var _a;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardPreviewStyles_unstable = exports.cardPreviewClassNames = void 0;
+    /**
+     * Static CSS class names used internally for the component slots.
+     */
+    exports.cardPreviewClassNames = {
+        root: 'fui-CardPreview',
+        logo: 'fui-CardPreview__logo',
+    };
+    var useStyles = react_1.makeStyles({
+        root: (_a = {
+                position: 'relative'
+            },
+            _a["> :not(." + exports.cardPreviewClassNames.logo + ")"] = {
+                display: 'block',
+                height: '100%',
+                width: '100%',
+            },
+            _a),
+        logo: {
+            position: 'absolute',
+            bottom: '12px',
+            left: '12px',
+            width: '32px',
+            height: '32px',
+        },
+    });
+    /**
+     * Apply styling to the CardPreview slots based on the state.
+     */
+    var useCardPreviewStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.cardPreviewClassNames.root, styles.root, state.root.className);
+        if (state.logo) {
+            state.logo.className = react_1.mergeClasses(exports.cardPreviewClassNames.logo, styles.logo, state.logo.className);
+        }
+        return state;
+    };
+    exports.useCardPreviewStyles_unstable = useCardPreviewStyles_unstable;
+});
+//# sourceMappingURL=useCardPreviewStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCardPreviewStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;IAIA;;OAEG;IACU,QAAA,qBAAqB,GAAqC;QACrE,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,uBAAuB;KAC9B,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI;gBACF,QAAQ,EAAE,UAAU;;YAEpB,GAAC,aAAW,6BAAqB,CAAC,IAAI,MAAG,IAAG;gBAC1C,OAAO,EAAE,OAAO;gBAChB,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aACd;eACF;QAED,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAAuB;QACnE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,6BAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEnG,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,6BAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACpG;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IATW,QAAA,6BAA6B,iCASxC","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n  root: 'fui-CardPreview',\n  logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n\n    [`> :not(.${cardPreviewClassNames.logo})`]: {\n      display: 'block',\n      height: '100%',\n      width: '100%',\n    },\n  },\n\n  logo: {\n    position: 'absolute',\n    bottom: '12px',\n    left: '12px',\n    width: '32px',\n    height: '32px',\n  },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n  if (state.logo) {\n    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n  }\n\n  return state;\n};\n"]}

package/lib-amd/index.js

@@ -0,0 +1,30 @@
+define(["require", "exports", "./Card", "./CardFooter", "./CardHeader", "./CardPreview", "./Card"], function (require, exports, Card_1, CardFooter_1, CardHeader_1, CardPreview_1, Card_2) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardContext_unstable = exports.CardProvider = exports.useCardPreview_unstable = exports.useCardPreviewStyles_unstable = exports.renderCardPreview_unstable = exports.cardPreviewClassNames = exports.CardPreview = exports.useCardHeader_unstable = exports.useCardHeaderStyles_unstable = exports.renderCardHeader_unstable = exports.cardHeaderCSSVars = exports.cardHeaderClassNames = exports.CardHeader = exports.useCardFooter_unstable = exports.useCardFooterStyles_unstable = exports.renderCardFooter_unstable = exports.cardFooterClassNames = exports.CardFooter = exports.useCard_unstable = exports.useCardStyles_unstable = exports.renderCard_unstable = exports.cardCSSVars = exports.cardClassNames = exports.Card = void 0;
+    Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+    Object.defineProperty(exports, "cardClassNames", { enumerable: true, get: function () { return Card_1.cardClassNames; } });
+    Object.defineProperty(exports, "cardCSSVars", { enumerable: true, get: function () { return Card_1.cardCSSVars; } });
+    Object.defineProperty(exports, "renderCard_unstable", { enumerable: true, get: function () { return Card_1.renderCard_unstable; } });
+    Object.defineProperty(exports, "useCardStyles_unstable", { enumerable: true, get: function () { return Card_1.useCardStyles_unstable; } });
+    Object.defineProperty(exports, "useCard_unstable", { enumerable: true, get: function () { return Card_1.useCard_unstable; } });
+    Object.defineProperty(exports, "CardFooter", { enumerable: true, get: function () { return CardFooter_1.CardFooter; } });
+    Object.defineProperty(exports, "cardFooterClassNames", { enumerable: true, get: function () { return CardFooter_1.cardFooterClassNames; } });
+    Object.defineProperty(exports, "renderCardFooter_unstable", { enumerable: true, get: function () { return CardFooter_1.renderCardFooter_unstable; } });
+    Object.defineProperty(exports, "useCardFooterStyles_unstable", { enumerable: true, get: function () { return CardFooter_1.useCardFooterStyles_unstable; } });
+    Object.defineProperty(exports, "useCardFooter_unstable", { enumerable: true, get: function () { return CardFooter_1.useCardFooter_unstable; } });
+    Object.defineProperty(exports, "CardHeader", { enumerable: true, get: function () { return CardHeader_1.CardHeader; } });
+    Object.defineProperty(exports, "cardHeaderClassNames", { enumerable: true, get: function () { return CardHeader_1.cardHeaderClassNames; } });
+    Object.defineProperty(exports, "cardHeaderCSSVars", { enumerable: true, get: function () { return CardHeader_1.cardHeaderCSSVars; } });
+    Object.defineProperty(exports, "renderCardHeader_unstable", { enumerable: true, get: function () { return CardHeader_1.renderCardHeader_unstable; } });
+    Object.defineProperty(exports, "useCardHeaderStyles_unstable", { enumerable: true, get: function () { return CardHeader_1.useCardHeaderStyles_unstable; } });
+    Object.defineProperty(exports, "useCardHeader_unstable", { enumerable: true, get: function () { return CardHeader_1.useCardHeader_unstable; } });
+    Object.defineProperty(exports, "CardPreview", { enumerable: true, get: function () { return CardPreview_1.CardPreview; } });
+    Object.defineProperty(exports, "cardPreviewClassNames", { enumerable: true, get: function () { return CardPreview_1.cardPreviewClassNames; } });
+    Object.defineProperty(exports, "renderCardPreview_unstable", { enumerable: true, get: function () { return CardPreview_1.renderCardPreview_unstable; } });
+    Object.defineProperty(exports, "useCardPreviewStyles_unstable", { enumerable: true, get: function () { return CardPreview_1.useCardPreviewStyles_unstable; } });
+    Object.defineProperty(exports, "useCardPreview_unstable", { enumerable: true, get: function () { return CardPreview_1.useCardPreview_unstable; } });
+    Object.defineProperty(exports, "CardProvider", { enumerable: true, get: function () { return Card_2.CardProvider; } });
+    Object.defineProperty(exports, "useCardContext_unstable", { enumerable: true, get: function () { return Card_2.useCardContext_unstable; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/index.ts"],"names":[],"mappings":";;;;IACE,4FAAA,IAAI,OAAA;IACJ,sGAAA,cAAc,OAAA;IACd,mGAAA,WAAW,OAAA;IACX,2GAAA,mBAAmB,OAAA;IACnB,8GAAA,sBAAsB,OAAA;IACtB,wGAAA,gBAAgB,OAAA;IAIhB,wGAAA,UAAU,OAAA;IACV,kHAAA,oBAAoB,OAAA;IACpB,uHAAA,yBAAyB,OAAA;IACzB,0HAAA,4BAA4B,OAAA;IAC5B,oHAAA,sBAAsB,OAAA;IAItB,wGAAA,UAAU,OAAA;IACV,kHAAA,oBAAoB,OAAA;IACpB,+GAAA,iBAAiB,OAAA;IACjB,uHAAA,yBAAyB,OAAA;IACzB,0HAAA,4BAA4B,OAAA;IAC5B,oHAAA,sBAAsB,OAAA;IAItB,0GAAA,WAAW,OAAA;IACX,oHAAA,qBAAqB,OAAA;IACrB,yHAAA,0BAA0B,OAAA;IAC1B,4HAAA,6BAA6B,OAAA;IAC7B,sHAAA,uBAAuB,OAAA;IAGhB,oGAAA,YAAY,OAAA;IAAE,+GAAA,uBAAuB,OAAA","sourcesContent":["export {\n  Card,\n  cardClassNames,\n  cardCSSVars,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CardOnSelectionChangeEvent } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassNames,\n  cardHeaderCSSVars,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\nexport { CardProvider, useCardContext_unstable } from './Card';\nexport type { CardContextValue } from './Card';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "9.0.0-rc.1",
+  "version": "9.0.0",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -31,16 +31,16 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-button": "^9.3.0",
+    "@fluentui/react-button": "^9.3.2",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-tabster": "^9.5.4",
+    "@fluentui/react-tabster": "^9.5.6",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.6.1",
+    "@fluentui/react-utilities": "^9.7.0",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
@@ -52,9 +52,7 @@
   },
   "beachball": {
     "disallowedChangeTypes": [
-      "major",
-      "minor",
-      "patch"
+      "major"
     ]
   },
   "exports": {