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

package/CHANGELOG.json

@@ -2,7 +2,40 @@
   "name": "@fluentui/react-card",
   "entries": [
     {
-      "date": "Fri, 10 Mar 2023 07:11:11 GMT",
+      "date": "Mon, 13 Mar 2023 08:54:59 GMT",
+      "tag": "@fluentui/react-card_v9.0.0",
+      "version": "9.0.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "marcosvmmoura@gmail.com",
+            "package": "@fluentui/react-card",
+            "commit": "bd95bf8602d7cf036fbdd7c718343bf1bc43367d",
+            "comment": "feat: release 9.0.0"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-tabster to v9.5.6",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-utilities to v9.7.0",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-card",
+            "comment": "Bump @fluentui/react-button to v9.3.2",
+            "commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Mar 2023 07:14:01 GMT",
       "tag": "@fluentui/react-card_v9.0.0-rc.2",
       "version": "9.0.0-rc.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Fri, 10 Mar 2023 07:11:11 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Mar 2023 08:54:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0)
+
+Mon, 13 Mar 2023 08:54:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-rc.2..@fluentui/react-card_v9.0.0)
+
+### Patches
+
+- feat: release 9.0.0 ([PR #27111](https://github.com/microsoft/fluentui/pull/27111) by marcosvmmoura@gmail.com)
+- Bump @fluentui/react-tabster to v9.5.6 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-utilities to v9.7.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+- Bump @fluentui/react-button to v9.3.2 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
+
 ## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-rc.2)
 
-Fri, 10 Mar 2023 07:11:11 GMT 
+Fri, 10 Mar 2023 07:14:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-rc.1..@fluentui/react-card_v9.0.0-rc.2)
 
 ### Changes

package/README.md

@@ -11,7 +11,7 @@ These are not production-ready components and **should never be used in a produc
 To import React Card components:
 
 ```js
-import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components/unstable';
+import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components';
 ```
 
 Example Card usage:
@@ -21,7 +21,7 @@ Example Card usage:
 ```jsx
 import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
 import { Button, Body1, Caption1 } from '@fluentui/react-components';
-import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
+import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';
 
 const App = () => (
   <>

package/lib-amd/Card.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Card/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Card.js.map

package/lib-amd/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/Card.ts"],"names":[],"mappings":";;;IAAA,uCAAwC","sourcesContent":["export * from './components/Card/index';\n"]}

package/lib-amd/CardFooter.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/CardFooter/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=CardFooter.js.map

package/lib-amd/CardFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardFooter.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/CardFooter.ts"],"names":[],"mappings":";;;IAAA,uCAA8C","sourcesContent":["export * from './components/CardFooter/index';\n"]}

package/lib-amd/CardHeader.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/CardHeader/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=CardHeader.js.map

package/lib-amd/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/CardHeader.ts"],"names":[],"mappings":";;;IAAA,uCAA8C","sourcesContent":["export * from './components/CardHeader/index';\n"]}

package/lib-amd/CardPreview.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/CardPreview/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=CardPreview.js.map

package/lib-amd/CardPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardPreview.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-card/src/CardPreview.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/CardPreview/index';\n"]}

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

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./useCard", "./renderCard", "./useCardStyles", "./useCardContextValue"], function (require, exports, React, useCard_1, renderCard_1, useCardStyles_1, useCardContextValue_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Card = void 0;
+    /**
+     * A card provides scaffolding for hosting actions and content for a single topic.
+     */
+    exports.Card = React.forwardRef(function (props, ref) {
+        var state = useCard_1.useCard_unstable(props, ref);
+        var cardContextValue = useCardContextValue_1.useCardContextValue(state);
+        useCardStyles_1.useCardStyles_unstable(state);
+        return renderCard_1.renderCard_unstable(state, cardContextValue);
+    });
+    exports.Card.displayName = 'Card';
+});
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/Card.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,IAAI,GAAmC,KAAK,CAAC,UAAU,CAAiB,UAAC,KAAK,EAAE,GAAG;QAC9F,IAAM,KAAK,GAAG,0BAAgB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC3C,IAAM,gBAAgB,GAAG,yCAAmB,CAAC,KAAK,CAAC,CAAC;QAEpD,sCAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,gCAAmB,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCardContextValue } from './useCardContextValue';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef<HTMLDivElement>((props, ref) => {\n  const state = useCard_unstable(props, ref);\n  const cardContextValue = useCardContextValue(state);\n\n  useCardStyles_unstable(state);\n  return renderCard_unstable(state, cardContextValue);\n});\n\nCard.displayName = 'Card';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Card selected event type\n *\n * This event is fired when a selectable card changes its selection state.\n */\nexport type CardOnSelectionChangeEvent = React.MouseEvent | React.KeyboardEvent | React.ChangeEvent;\n\n/**\n * Data sent from the selection events on a selectable card.\n */\nexport type CardOnSelectData = {\n  selected: boolean;\n};\n\n/**\n * Data shared between card components\n */\nexport interface CardContextValue {\n  selectableA11yProps: {\n    referenceId?: string;\n    setReferenceId: (referenceId: string) => void;\n    referenceLabel?: string;\n    setReferenceLabel: (referenceLabel: string) => void;\n  };\n}\n\n/**\n * Slots available in the Card component.\n */\nexport type CardSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Floating action that can be rendered on the top-right of a card. Often used together with\n   * `selected`, `defaultSelected`, and `onSelectionChange` props\n   */\n  floatingAction?: Slot<'div'>;\n\n  /**\n   * The internal checkbox element that renders when the card is selectable.\n   */\n  checkbox?: Slot<'input'>;\n};\n\n/**\n * Card component props.\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n  /**\n   * Sets the appearance of the card.\n   *\n   * `filled`\n   * The card will have a shadow, border and background color.\n   *\n   * `filled-alternative`\n   * This appearance is similar to `filled`, but the background color will be a little darker.\n   *\n   * `outline`\n   * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n   *\n   * `subtle`\n   * This appearance is similar to `filled-alternative`, but no border is applied.\n   *\n   * @default 'filled'\n   */\n  appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n  /**\n   * Sets the focus behavior for the card.\n   *\n   * `off`\n   * The card will not focusable.\n   *\n   * `no-tab`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n   * pressing the Escape key.\n   *\n   * `tab-exit`\n   * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n   * the Tab key on the last inner element.\n   *\n   * `tab-only`\n   * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n   * after the last inner element.\n   *\n   * @default 'off'\n   */\n  focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n\n  /**\n   * Defines the orientation of the card.\n   *\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical';\n\n  /**\n   * Controls the card's border radius and padding between inner elements.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Defines the controlled selected state of the card.\n   *\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Defines whether the card is initially in a selected state when rendered.\n   *\n   * @default false\n   */\n  defaultSelected?: boolean;\n\n  /**\n   * Callback to be called when the selected state value changes.\n   */\n  onSelectionChange?: (event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void;\n};\n\n/**\n * State used in rendering Card.\n */\nexport type CardState = ComponentState<CardSlots> &\n  CardContextValue &\n  Required<\n    Pick<CardProps, 'appearance' | 'orientation' | 'size'> & {\n      /**\n       * Represents a card that contains interactive events (MouseEvents) or is a button/a tag.\n       *\n       * @default false\n       */\n      interactive: boolean;\n\n      /**\n       * Represents a selectable card.\n       *\n       * @default false\n       */\n      selectable: boolean;\n\n      /**\n       * Defines whether the card is currently selected.\n       *\n       * @default false\n       */\n      selected: boolean;\n\n      /**\n       * Defines whether the card internal checkbox is currently focused.\n       *\n       * @default false\n       */\n      selectFocused: boolean;\n    }\n  >;\n"]}

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

@@ -0,0 +1,31 @@
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardContext_unstable = exports.CardProvider = exports.cardContextDefaultValue = void 0;
+    var cardContext = React.createContext(undefined);
+    /**
+     * @internal
+     */
+    exports.cardContextDefaultValue = {
+        selectableA11yProps: {
+            referenceId: undefined,
+            setReferenceId: function () {
+                /* Noop */
+            },
+            referenceLabel: undefined,
+            setReferenceLabel: function () {
+                /* Noop */
+            },
+        },
+    };
+    /**
+     * @internal
+     */
+    exports.CardProvider = cardContext.Provider;
+    /**
+     * @internal
+     */
+    var useCardContext_unstable = function () { var _a; return (_a = React.useContext(cardContext)) !== null && _a !== void 0 ? _a : exports.cardContextDefaultValue; };
+    exports.useCardContext_unstable = useCardContext_unstable;
+});
+//# sourceMappingURL=CardContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardContext.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/CardContext.ts"],"names":[],"mappings":";;;;IAGA,IAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA+B,SAAS,CAAC,CAAC;IAEjF;;OAEG;IACU,QAAA,uBAAuB,GAAqB;QACvD,mBAAmB,EAAE;YACnB,WAAW,EAAE,SAAS;YACtB,cAAc;gBACZ,UAAU;YACZ,CAAC;YACD,cAAc,EAAE,SAAS;YACzB,iBAAiB;gBACf,UAAU;YACZ,CAAC;SACF;KACF,CAAC;IAEF;;OAEG;IACU,QAAA,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC;IAEjD;;OAEG;IACI,IAAM,uBAAuB,GAAG,sBAAM,OAAA,MAAA,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,mCAAI,+BAAuB,CAAA,EAAA,CAAC;IAAzF,QAAA,uBAAuB,2BAAkE","sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */\n    },\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */\n    },\n  },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"]}

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

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "./Card", "./Card.types", "./CardContext", "./renderCard", "./useCard", "./useCardStyles"], function (require, exports, tslib_1, Card_1, Card_types_1, CardContext_1, renderCard_1, useCard_1, useCardStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Card_1, exports);
+    tslib_1.__exportStar(Card_types_1, exports);
+    tslib_1.__exportStar(CardContext_1, exports);
+    tslib_1.__exportStar(renderCard_1, exports);
+    tslib_1.__exportStar(useCard_1, exports);
+    tslib_1.__exportStar(useCardStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/index.ts"],"names":[],"mappings":";;;IAAA,sCAAuB;IACvB,4CAA6B;IAC7B,6CAA8B;IAC9B,4CAA6B;IAC7B,yCAA0B;IAC1B,+CAAgC","sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"]}

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

@@ -0,0 +1,18 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./CardContext"], function (require, exports, tslib_1, React, react_utilities_1, CardContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderCard_unstable = void 0;
+    /**
+     * Render the final JSX of Card.
+     */
+    var renderCard_unstable = function (state, cardContextValue) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(CardContext_1.CardProvider, { value: cardContextValue },
+                slots.checkbox ? React.createElement(slots.checkbox, tslib_1.__assign({}, slotProps.checkbox)) : null,
+                slots.floatingAction ? React.createElement(slots.floatingAction, tslib_1.__assign({}, slotProps.floatingAction)) : null,
+                slotProps.root.children)));
+    };
+    exports.renderCard_unstable = renderCard_unstable;
+});
+//# sourceMappingURL=renderCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderCard.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/renderCard.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,mBAAmB,GAAG,UAAC,KAAgB,EAAE,gBAAkC;QAChF,IAAA,KAAuB,0BAAQ,CAAY,KAAK,CAAC,EAA/C,KAAK,WAAA,EAAE,SAAS,eAA+B,CAAC;QAExD,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,0BAAY,IAAC,KAAK,EAAE,gBAAgB;gBAClC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI,CAAC,CAAC,CAAC,IAAI;gBAClE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAC,KAAK,CAAC,cAAc,uBAAK,SAAS,CAAC,cAAc,EAAI,CAAC,CAAC,CAAC,IAAI;gBACpF,SAAS,CAAC,IAAI,CAAC,QAAQ,CACX,CACJ,CACd,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,mBAAmB,uBAY9B","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"]}

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

@@ -0,0 +1,85 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-tabster", "./useCardSelectable", "./CardContext"], function (require, exports, tslib_1, React, react_utilities_1, react_tabster_1, useCardSelectable_1, CardContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCard_unstable = void 0;
+    var focusMap = {
+        off: undefined,
+        'no-tab': 'limited-trap-focus',
+        'tab-exit': 'limited',
+        'tab-only': 'unlimited',
+    };
+    /**
+     * Create the state for interactive cards.
+     *
+     * This internal hook defines if the card is interactive
+     * and control focus properties based on that.
+     *
+     * @param props - props from this instance of Card
+     */
+    var useCardInteractive = function (_a) {
+        var _b = _a.focusMode, focusMode = _b === void 0 ? 'off' : _b, props = tslib_1.__rest(_a, ["focusMode"]);
+        var interactive = [
+            'onClick',
+            'onDoubleClick',
+            'onMouseUp',
+            'onMouseDown',
+            'onPointerUp',
+            'onPointerDown',
+            'onTouchStart',
+            'onTouchEnd',
+            'onDragStart',
+            'onDragEnd',
+        ].some(function (prop) { return props[prop]; });
+        var groupperAttrs = react_tabster_1.useFocusableGroup({
+            tabBehavior: focusMap[interactive ? 'no-tab' : focusMode],
+        });
+        var interactiveFocusAttributes = tslib_1.__assign(tslib_1.__assign({}, groupperAttrs), { tabIndex: 0 });
+        return {
+            interactive: interactive,
+            focusAttributes: focusMode === 'off' ? null : interactiveFocusAttributes,
+        };
+    };
+    /**
+     * Create the state required to render Card.
+     *
+     * The returned state can be modified with hooks such as useCardStyles_unstable,
+     * before being passed to renderCard_unstable.
+     *
+     * @param props - props from this instance of Card
+     * @param ref - reference to the root element of Card
+     */
+    var useCard_unstable = function (props, ref) {
+        var _a = props.appearance, appearance = _a === void 0 ? 'filled' : _a, _b = props.orientation, orientation = _b === void 0 ? 'vertical' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c;
+        var _d = React.useState(CardContext_1.cardContextDefaultValue.selectableA11yProps.referenceId), referenceId = _d[0], setReferenceId = _d[1];
+        var _e = React.useState(CardContext_1.cardContextDefaultValue.selectableA11yProps.referenceId), referenceLabel = _e[0], setReferenceLabel = _e[1];
+        var cardBaseRef = react_tabster_1.useFocusWithin();
+        var _f = useCardSelectable_1.useCardSelectable(props, { referenceId: referenceId, referenceLabel: referenceLabel }, cardBaseRef), selectable = _f.selectable, selected = _f.selected, selectableCardProps = _f.selectableCardProps, selectFocused = _f.selectFocused, checkboxSlot = _f.checkboxSlot, floatingActionSlot = _f.floatingActionSlot;
+        var cardRef = react_utilities_1.useMergedRefs(cardBaseRef, ref);
+        var _g = useCardInteractive(props), interactive = _g.interactive, focusAttributes = _g.focusAttributes;
+        return {
+            appearance: appearance,
+            orientation: orientation,
+            size: size,
+            interactive: interactive,
+            selectable: selectable,
+            selectFocused: selectFocused,
+            selected: selected,
+            selectableA11yProps: {
+                setReferenceId: setReferenceId,
+                referenceId: referenceId,
+                referenceLabel: referenceLabel,
+                setReferenceLabel: setReferenceLabel,
+            },
+            components: {
+                root: 'div',
+                floatingAction: 'div',
+                checkbox: 'input',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ ref: cardRef, role: 'group' }, focusAttributes), props), selectableCardProps)),
+            floatingAction: floatingActionSlot,
+            checkbox: checkboxSlot,
+        };
+    };
+    exports.useCard_unstable = useCard_unstable;
+});
+//# sourceMappingURL=useCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCard.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCard.ts"],"names":[],"mappings":";;;;IAQA,IAAM,QAAQ,GAAG;QACf,GAAG,EAAE,SAAS;QACd,QAAQ,EAAE,oBAAoB;QAC9B,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,WAAW;KACf,CAAC;IAEX;;;;;;;OAOG;IACH,IAAM,kBAAkB,GAAG,UAAC,EAA0C;QAAxC,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAK,KAAK,sBAA7B,aAA+B,CAAF;QACvD,IAAM,WAAW,GACf;YACE,SAAS;YACT,eAAe;YACf,WAAW;YACX,aAAa;YACb,aAAa;YACb,eAAe;YACf,cAAc;YACd,YAAY;YACZ,aAAa;YACb,WAAW;SAEd,CAAC,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,KAAK,CAAC,IAAI,CAAC,EAAX,CAAW,CAAC,CAAC;QAE5B,IAAM,aAAa,GAAG,iCAAiB,CAAC;YACtC,WAAW,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;SAC1D,CAAC,CAAC;QAEH,IAAM,0BAA0B,yCAC3B,aAAa,KAChB,QAAQ,EAAE,CAAC,GACZ,CAAC;QAEF,OAAO;YACL,WAAW,aAAA;YACX,eAAe,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B;SACzE,CAAC;IACJ,CAAC,CAAC;IAEF;;;;;;;;OAQG;IACI,IAAM,gBAAgB,GAAG,UAAC,KAAgB,EAAE,GAA8B;QACvE,IAAA,KAAqE,KAAK,WAArD,EAArB,UAAU,mBAAG,QAAQ,KAAA,EAAE,KAA8C,KAAK,YAA3B,EAAxB,WAAW,mBAAG,UAAU,KAAA,EAAE,KAAoB,KAAK,KAAV,EAAf,IAAI,mBAAG,QAAQ,KAAA,CAAW;QAE7E,IAAA,KAAgC,KAAK,CAAC,QAAQ,CAAC,qCAAuB,CAAC,mBAAmB,CAAC,WAAW,CAAC,EAAtG,WAAW,QAAA,EAAE,cAAc,QAA2E,CAAC;QACxG,IAAA,KAAsC,KAAK,CAAC,QAAQ,CAAC,qCAAuB,CAAC,mBAAmB,CAAC,WAAW,CAAC,EAA5G,cAAc,QAAA,EAAE,iBAAiB,QAA2E,CAAC;QAEpH,IAAM,WAAW,GAAG,8BAAc,EAAkB,CAAC;QAC/C,IAAA,KACJ,qCAAiB,CAAC,KAAK,EAAE,EAAE,WAAW,aAAA,EAAE,cAAc,gBAAA,EAAE,EAAE,WAAW,CAAC,EADhE,UAAU,gBAAA,EAAE,QAAQ,cAAA,EAAE,mBAAmB,yBAAA,EAAE,aAAa,mBAAA,EAAE,YAAY,kBAAA,EAAE,kBAAkB,wBAC1B,CAAC;QAEzE,IAAM,OAAO,GAAG,+BAAa,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;QAE1C,IAAA,KAAmC,kBAAkB,CAAC,KAAK,CAAC,EAA1D,WAAW,iBAAA,EAAE,eAAe,qBAA8B,CAAC;QAEnE,OAAO;YACL,UAAU,YAAA;YACV,WAAW,aAAA;YACX,IAAI,MAAA;YACJ,WAAW,aAAA;YACX,UAAU,YAAA;YACV,aAAa,eAAA;YACb,QAAQ,UAAA;YACR,mBAAmB,EAAE;gBACnB,cAAc,gBAAA;gBACd,WAAW,aAAA;gBACX,cAAc,gBAAA;gBACd,iBAAiB,mBAAA;aAClB;YAED,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,cAAc,EAAE,KAAK;gBACrB,QAAQ,EAAE,OAAO;aAClB;YAED,IAAI,EAAE,uCAAqB,CAAC,KAAK,uDAC/B,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,OAAO,IACV,eAAe,GACf,KAAK,GACL,mBAAmB,EACtB;YAEF,cAAc,EAAE,kBAAkB;YAClC,QAAQ,EAAE,YAAY;SACvB,CAAC;IACJ,CAAC,CAAC;IA9CW,QAAA,gBAAgB,oBA8C3B","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"]}

package/lib-amd/components/Card/useCardContextValue.js

@@ -0,0 +1,11 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardContextValue = void 0;
+    function useCardContextValue(_a) {
+        var selectableA11yProps = _a.selectableA11yProps;
+        return { selectableA11yProps: selectableA11yProps };
+    }
+    exports.useCardContextValue = useCardContextValue;
+});
+//# sourceMappingURL=useCardContextValue.js.map

package/lib-amd/components/Card/useCardContextValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCardContextValue.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardContextValue.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,mBAAmB,CAAC,EAAkC;YAAhC,mBAAmB,yBAAA;QACvD,OAAO,EAAE,mBAAmB,qBAAA,EAAE,CAAC;IACjC,CAAC;IAFD,kDAEC","sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n  return { selectableA11yProps };\n}\n"]}

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

@@ -0,0 +1,97 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/keyboard-keys", "@fluentui/react-tabster"], function (require, exports, tslib_1, React, react_utilities_1, keyboard_keys_1, react_tabster_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardSelectable = void 0;
+    /**
+     * @internal
+     *
+     * Create the state related to selectable cards.
+     *
+     * This internal hook controls all the logic for selectable cards and is
+     * intended to be used alongside with useCard_unstable.
+     *
+     * @param props - props from this instance of Card
+     * @param a11yProps - accessibility props shared between elements of the card
+     * @param ref - reference to the root element of Card
+     */
+    var useCardSelectable = function (props, _a, cardRef) {
+        var referenceLabel = _a.referenceLabel, referenceId = _a.referenceId;
+        var _b = props.checkbox, checkbox = _b === void 0 ? {} : _b, selected = props.selected, defaultSelected = props.defaultSelected, onSelectionChange = props.onSelectionChange, floatingAction = props.floatingAction, onClick = props.onClick, onKeyDown = props.onKeyDown;
+        var findAllFocusable = react_tabster_1.useFocusFinders().findAllFocusable;
+        var checkboxRef = React.useRef(null);
+        var isSelectable = [selected, defaultSelected, onSelectionChange].some(function (prop) { return typeof prop !== 'undefined'; });
+        var _c = React.useState(false), isCardSelected = _c[0], setIsCardSelected = _c[1];
+        var _d = React.useState(false), isSelectFocused = _d[0], setIsSelectFocused = _d[1];
+        var shouldRestrictTriggerAction = React.useCallback(function (event) {
+            if (!cardRef.current) {
+                return false;
+            }
+            var focusableElements = findAllFocusable(cardRef.current);
+            var target = event.target;
+            var isElementInFocusableGroup = focusableElements.some(function (element) { return element.contains(target); });
+            var isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
+            return isElementInFocusableGroup && !isCheckboxSlot;
+        }, [cardRef, findAllFocusable]);
+        var onChangeHandler = React.useCallback(function (event) {
+            if (shouldRestrictTriggerAction(event)) {
+                return;
+            }
+            var newCheckedValue = !isCardSelected;
+            setIsCardSelected(newCheckedValue);
+            if (onSelectionChange) {
+                onSelectionChange(event, { selected: newCheckedValue });
+            }
+        }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
+        var onKeyDownHandler = React.useCallback(function (event) {
+            if ([keyboard_keys_1.Enter].includes(event.key)) {
+                event.preventDefault();
+                onChangeHandler(event);
+            }
+        }, [onChangeHandler]);
+        var checkboxSlot = React.useMemo(function () {
+            if (!isSelectable || floatingAction) {
+                return;
+            }
+            var selectableCheckboxProps = {};
+            if (referenceId) {
+                selectableCheckboxProps['aria-labelledby'] = referenceId;
+            }
+            else if (referenceLabel) {
+                selectableCheckboxProps['aria-label'] = referenceLabel;
+            }
+            return react_utilities_1.resolveShorthand(checkbox, {
+                defaultProps: tslib_1.__assign({ ref: checkboxRef, type: 'checkbox', checked: isCardSelected, onChange: function (event) { return onChangeHandler(event); }, onFocus: function () { return setIsSelectFocused(true); }, onBlur: function () { return setIsSelectFocused(false); } }, selectableCheckboxProps),
+            });
+        }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);
+        var floatingActionSlot = React.useMemo(function () {
+            if (!floatingAction) {
+                return;
+            }
+            return react_utilities_1.resolveShorthand(floatingAction, {
+                defaultProps: {
+                    ref: checkboxRef,
+                },
+            });
+        }, [floatingAction]);
+        var selectableCardProps = React.useMemo(function () {
+            if (!isSelectable) {
+                return null;
+            }
+            return {
+                onClick: react_utilities_1.mergeCallbacks(onClick, onChangeHandler),
+                onKeyDown: react_utilities_1.mergeCallbacks(onKeyDown, onKeyDownHandler),
+            };
+        }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
+        React.useEffect(function () { return setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)); }, [defaultSelected, selected, setIsCardSelected]);
+        return {
+            selected: isCardSelected,
+            selectable: isSelectable,
+            selectFocused: isSelectFocused,
+            selectableCardProps: selectableCardProps,
+            checkboxSlot: checkboxSlot,
+            floatingActionSlot: floatingActionSlot,
+        };
+    };
+    exports.useCardSelectable = useCardSelectable;
+});
+//# sourceMappingURL=useCardSelectable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCardSelectable.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"names":[],"mappings":"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","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"]}