@fluentui/react-card 9.0.0-beta.4 → 9.0.0-beta.41

package/lib-commonjs/CardFooter.js

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

package/lib-commonjs/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/CardFooter.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/CardFooter.ts"],"sourcesContent":["export * from './components/CardFooter/index';\n"]}

package/lib-commonjs/CardHeader.js

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

package/lib-commonjs/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/CardHeader.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/CardHeader.ts"],"sourcesContent":["export * from './components/CardHeader/index';\n"]}

package/lib-commonjs/CardPreview.js

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

package/lib-commonjs/CardPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/CardPreview.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/CardPreview.ts"],"sourcesContent":["export * from './components/CardPreview/index';\n"]}

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

@@ -4,23 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Card = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useCard_1 = /*#__PURE__*/require("./useCard");
-
 const renderCard_1 = /*#__PURE__*/require("./renderCard");
-
 const useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
+const useCardContextValue_1 = /*#__PURE__*/require("./useCardContextValue");
 /**
  * A card provides scaffolding for hosting actions and content for a single topic.
  */
-
-
 exports.Card = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCard_1.useCard(props, ref);
-  useCardStyles_1.useCardStyles(state);
-  return renderCard_1.renderCard(state);
+  const state = useCard_1.useCard_unstable(props, ref);
+  const 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-commonjs/components/Card/Card.js.map

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAGA;AAEA;;;AAGaA,YAAI,gBAAmCC,KAAK,CAACC,UAAU,CAAiB,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGC,0BAAgB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC1C,MAAMG,gBAAgB,GAAGC,yCAAmB,CAACH,KAAK,CAAC;EAEnDI,sCAAsB,CAACJ,KAAK,CAAC;EAC7B,OAAOK,gCAAmB,CAACL,KAAK,EAAEE,gBAAgB,CAAC;AACrD,CAAC,CAAC;AAEFP,YAAI,CAACW,WAAW,GAAG,MAAM","names":["exports","React","forwardRef","props","ref","state","useCard_1","cardContextValue","useCardContextValue_1","useCardStyles_1","renderCard_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/Card.tsx"],"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-commonjs/components/Card/Card.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCardContext_unstable = exports.CardProvider = exports.cardContextDefaultValue = void 0;
+const React = /*#__PURE__*/require("react");
+const cardContext = /*#__PURE__*/React.createContext(undefined);
+/**
+ * @internal
+ */
+exports.cardContextDefaultValue = {
+  selectableA11yProps: {
+    referenceId: undefined,
+    setReferenceId() {
+      /* Noop */
+    },
+    referenceLabel: undefined,
+    setReferenceLabel() {
+      /* Noop */
+    }
+  }
+};
+/**
+ * @internal
+ */
+exports.CardProvider = cardContext.Provider;
+/**
+ * @internal
+ */
+const useCardContext_unstable = () => {
+  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-commonjs/components/Card/CardContext.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAA;AAGA,MAAMA,WAAW,gBAAGC,KAAK,CAACC,aAAa,CAA+BC,SAAS,CAAC;AAEhF;;;AAGaC,+BAAuB,GAAqB;EACvDC,mBAAmB,EAAE;IACnBC,WAAW,EAAEH,SAAS;IACtBI,cAAc;MACZ;IAAA,CACD;IACDC,cAAc,EAAEL,SAAS;IACzBM,iBAAiB;MACf;IAAA;;CAGL;AAED;;;AAGaL,oBAAY,GAAGJ,WAAW,CAACU,QAAQ;AAEhD;;;AAGO,MAAMC,uBAAuB,GAAG,MAAK;EAAA;EAAC,kBAAK,CAACC,UAAU,CAACZ,WAAW,CAAC,mCAAII,+BAAuB;AAAA;AAAxFA,+BAAuB","names":["cardContext","React","createContext","undefined","exports","selectableA11yProps","referenceId","setReferenceId","referenceLabel","setReferenceLabel","Provider","useCardContext_unstable","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/CardContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { CardContextValue } from './Card.types';\n\nconst cardContext = React.createContext<CardContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const cardContextDefaultValue: CardContextValue = {\n  selectableA11yProps: {\n    referenceId: undefined,\n    setReferenceId() {\n      /* Noop */\n    },\n    referenceLabel: undefined,\n    setReferenceLabel() {\n      /* Noop */\n    },\n  },\n};\n\n/**\n * @internal\n */\nexport const CardProvider = cardContext.Provider;\n\n/**\n * @internal\n */\nexport const useCardContext_unstable = () => React.useContext(cardContext) ?? cardContextDefaultValue;\n"]}

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

@@ -3,16 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Card"), exports);
-
 tslib_1.__exportStar(require("./Card.types"), exports);
-
+tslib_1.__exportStar(require("./CardContext"), exports);
 tslib_1.__exportStar(require("./renderCard"), exports);
-
 tslib_1.__exportStar(require("./useCard"), exports);
-
 tslib_1.__exportStar(require("./useCardStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/index.ts"],"sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './CardContext';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"]}

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

@@ -3,23 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderCard = void 0;
-
+exports.renderCard_unstable = void 0;
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const CardContext_1 = /*#__PURE__*/require("./CardContext");
 /**
- * Render the final JSX of Card
+ * Render the final JSX of Card.
  */
-
-
-const renderCard = state => {
+const renderCard_unstable = (state, cardContextValue) => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, Object.assign({}, slotProps.root));
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, React.createElement(CardContext_1.CardProvider, {
+    value: cardContextValue
+  }, slots.checkbox ? React.createElement(slots.checkbox, {
+    ...slotProps.checkbox
+  }) : null, slots.floatingAction ? React.createElement(slots.floatingAction, {
+    ...slotProps.floatingAction
+  }) : null, slotProps.root.children));
 };
-
-exports.renderCard = renderCard;
+exports.renderCard_unstable = renderCard_unstable;
 //# sourceMappingURL=renderCard.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,mBAAmB,GAAG,CAACC,KAAgB,EAAEC,gBAAkC,KAAI;EAC1F,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAYJ,KAAK,CAAC;EAEvD,OACEK,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACE,0BAAY;IAACC,KAAK,EAAEP;EAAgB,GAClCC,KAAK,CAACO,QAAQ,GAAGJ,oBAACH,KAAK,CAACO,QAAQ;IAAA,GAAKN,SAAS,CAACM;EAAQ,EAAI,GAAG,IAAI,EAClEP,KAAK,CAACQ,cAAc,GAAGL,oBAACH,KAAK,CAACQ,cAAc;IAAA,GAAKP,SAAS,CAACO;EAAc,EAAI,GAAG,IAAI,EACpFP,SAAS,CAACG,IAAI,CAACK,QAAQ,CACX,CACJ;AAEjB,CAAC;AAZYC,2BAAmB","names":["renderCard_unstable","state","cardContextValue","slots","slotProps","react_utilities_1","React","root","CardContext_1","value","checkbox","floatingAction","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/renderCard.tsx"],"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-commonjs/components/Card/useCard.js

@@ -3,38 +3,106 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCard = void 0;
-
+exports.useCard_unstable = void 0;
+const React = /*#__PURE__*/require("react");
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const useCardSelectable_1 = /*#__PURE__*/require("./useCardSelectable");
+const CardContext_1 = /*#__PURE__*/require("./CardContext");
+const focusMap = {
+  off: undefined,
+  'no-tab': 'limited-trap-focus',
+  'tab-exit': 'limited',
+  'tab-only': 'unlimited'
+};
 /**
- * Create the state required to render Card.
+ * Create the state for interactive cards.
  *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
+ * This internal hook defines if the card is interactive
+ * and control focus properties based on that.
  *
  * @param props - props from this instance of Card
- * @param ref - reference to root HTMLElement of Card
  */
-
-
-const useCard = (props, ref) => {
+const useCardInteractive = ({
+  focusMode = 'off',
+  ...props
+}) => {
+  const interactive = ['onClick', 'onDoubleClick', 'onMouseUp', 'onMouseDown', 'onPointerUp', 'onPointerDown', 'onTouchStart', 'onTouchEnd', 'onDragStart', 'onDragEnd'].some(prop => props[prop]);
   const groupperAttrs = react_tabster_1.useFocusableGroup({
-    tabBehavior: 'limitedTrapFocus'
+    tabBehavior: focusMap[interactive ? 'no-tab' : focusMode]
   });
+  const interactiveFocusAttributes = {
+    ...groupperAttrs,
+    tabIndex: 0
+  };
+  return {
+    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
+ */
+const useCard_unstable = (props, ref) => {
+  const {
+    appearance = 'filled',
+    orientation = 'vertical',
+    size = 'medium',
+    floatingAction
+  } = props;
+  const [referenceId, setReferenceId] = React.useState(CardContext_1.cardContextDefaultValue.selectableA11yProps.referenceId);
+  const [referenceLabel, setReferenceLabel] = React.useState(CardContext_1.cardContextDefaultValue.selectableA11yProps.referenceId);
+  const cardBaseRef = react_tabster_1.useFocusWithin();
+  const {
+    selectable,
+    selected,
+    selectableCardProps,
+    selectFocused,
+    checkboxSlot
+  } = useCardSelectable_1.useCardSelectable(props, {
+    referenceId,
+    referenceLabel
+  }, cardBaseRef);
+  const cardRef = react_utilities_1.useMergedRefs(cardBaseRef, ref);
+  const {
+    interactive,
+    focusAttributes
+  } = useCardInteractive(props);
   return {
+    appearance,
+    orientation,
+    size,
+    interactive,
+    selectable,
+    selectFocused,
+    selected,
+    selectableA11yProps: {
+      setReferenceId,
+      referenceId,
+      referenceLabel,
+      setReferenceLabel
+    },
     components: {
-      root: 'div'
+      root: 'div',
+      floatingAction: 'div',
+      checkbox: 'input'
     },
-    root: react_utilities_1.getNativeElementProps(props.as || 'div', {
-      ref,
+    root: react_utilities_1.getNativeElementProps('div', {
+      ref: cardRef,
       role: 'group',
-      ...groupperAttrs,
-      ...props
-    })
+      ...focusAttributes,
+      ...props,
+      ...selectableCardProps
+    }),
+    floatingAction: react_utilities_1.resolveShorthand(floatingAction),
+    checkbox: checkboxSlot
   };
 };
-
-exports.useCard = useCard;
+exports.useCard_unstable = useCard_unstable;
 //# sourceMappingURL=useCard.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;AACA;AAEA,MAAMA,QAAQ,GAAG;EACfC,GAAG,EAAEC,SAAS;EACd,QAAQ,EAAE,oBAAoB;EAC9B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE;CACJ;AAEV;;;;;;;;AAQA,MAAMC,kBAAkB,GAAG,CAAC;EAAEC,SAAS,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAa,KAAI;EACxE,MAAMC,WAAW,GAAI,CACnB,SAAS,EACT,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,CACoC,CAACC,IAAI,CAACC,IAAI,IAAIH,KAAK,CAACG,IAAI,CAAC,CAAC;EAE3E,MAAMC,aAAa,GAAGC,iCAAiB,CAAC;IACtCC,WAAW,EAAEX,QAAQ,CAACM,WAAW,GAAG,QAAQ,GAAGF,SAAS;GACzD,CAAC;EAEF,MAAMQ,0BAA0B,GAAG;IACjC,GAAGH,aAAa;IAChBI,QAAQ,EAAE;GACX;EAED,OAAO;IACLP,WAAW;IACXQ,eAAe,EAAEV,SAAS,KAAK,KAAK,GAAG,IAAI,GAAGQ;GAC/C;AACH,CAAC;AAED;;;;;;;;;AASO,MAAMG,gBAAgB,GAAG,CAACV,KAAgB,EAAEW,GAA8B,KAAe;EAC9F,MAAM;IAAEC,UAAU,GAAG,QAAQ;IAAEC,WAAW,GAAG,UAAU;IAAEC,IAAI,GAAG,QAAQ;IAAEC;EAAc,CAAE,GAAGf,KAAK;EAElG,MAAM,CAACgB,WAAW,EAAEC,cAAc,CAAC,GAAGC,KAAK,CAACC,QAAQ,CAACC,qCAAuB,CAACC,mBAAmB,CAACL,WAAW,CAAC;EAC7G,MAAM,CAACM,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,KAAK,CAACC,QAAQ,CAACC,qCAAuB,CAACC,mBAAmB,CAACL,WAAW,CAAC;EAEnH,MAAMQ,WAAW,GAAGnB,8BAAc,EAAkB;EACpD,MAAM;IAAEoB,UAAU;IAAEC,QAAQ;IAAEC,mBAAmB;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGC,qCAAiB,CAClG9B,KAAK,EACL;IAAEgB,WAAW;IAAEM;EAAc,CAAE,EAC/BE,WAAW,CACZ;EAED,MAAMO,OAAO,GAAGC,+BAAa,CAACR,WAAW,EAAEb,GAAG,CAAC;EAE/C,MAAM;IAAEV,WAAW;IAAEQ;EAAe,CAAE,GAAGX,kBAAkB,CAACE,KAAK,CAAC;EAElE,OAAO;IACLY,UAAU;IACVC,WAAW;IACXC,IAAI;IACJb,WAAW;IACXwB,UAAU;IACVG,aAAa;IACbF,QAAQ;IACRL,mBAAmB,EAAE;MACnBJ,cAAc;MACdD,WAAW;MACXM,cAAc;MACdC;KACD;IAEDU,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXnB,cAAc,EAAE,KAAK;MACrBoB,QAAQ,EAAE;KACX;IAEDD,IAAI,EAAEF,uCAAqB,CAAC,KAAK,EAAE;MACjCrB,GAAG,EAAEoB,OAAO;MACZK,IAAI,EAAE,OAAO;MACb,GAAG3B,eAAe;MAClB,GAAGT,KAAK;MACR,GAAG2B;KACJ,CAAC;IAEFZ,cAAc,EAAEiB,kCAAgB,CAACjB,cAAc,CAAC;IAChDoB,QAAQ,EAAEN;GACX;AACH,CAAC;AAjDYQ,wBAAgB","names":["focusMap","off","undefined","useCardInteractive","focusMode","props","interactive","some","prop","groupperAttrs","react_tabster_1","tabBehavior","interactiveFocusAttributes","tabIndex","focusAttributes","useCard_unstable","ref","appearance","orientation","size","floatingAction","referenceId","setReferenceId","React","useState","CardContext_1","selectableA11yProps","referenceLabel","setReferenceLabel","cardBaseRef","selectable","selected","selectableCardProps","selectFocused","checkboxSlot","useCardSelectable_1","cardRef","react_utilities_1","components","root","checkbox","role","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCard.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, 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    '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>)[]).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', floatingAction } = 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 } = useCardSelectable(\n    props,\n    { referenceId, referenceLabel },\n    cardBaseRef,\n  );\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: resolveShorthand(floatingAction),\n    checkbox: checkboxSlot,\n  };\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAEA,SAAgBA,mBAAmB,CAAC;EAAEC;AAAmB,CAAa;EACpE,OAAO;IAAEA;EAAmB,CAAE;AAChC;AAFAC","names":["useCardContextValue","selectableA11yProps","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCardContextValue.ts"],"sourcesContent":["import type { CardContextValue, CardState } from './Card.types';\n\nexport function useCardContextValue({ selectableA11yProps }: CardState): CardContextValue {\n  return { selectableA11yProps };\n}\n"]}

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

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCardSelectable = void 0;
+const React = /*#__PURE__*/require("react");
+const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+/**
+ * @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
+ */
+const useCardSelectable = (props, {
+  referenceLabel,
+  referenceId
+}, cardRef) => {
+  const {
+    checkbox = {},
+    selected,
+    defaultSelected,
+    onSelectionChange,
+    floatingAction,
+    onClick,
+    onKeyDown
+  } = props;
+  const {
+    findAllFocusable
+  } = react_tabster_1.useFocusFinders();
+  const checkboxRef = React.useRef(null);
+  const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');
+  const [isCardSelected, setIsCardSelected] = React.useState(false);
+  const [isSelectFocused, setIsSelectFocused] = React.useState(false);
+  const shouldRestrictTriggerAction = React.useCallback(event => {
+    if (!cardRef.current) {
+      return false;
+    }
+    const focusableElements = findAllFocusable(cardRef.current);
+    const target = event.target;
+    const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
+    const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
+    return isElementInFocusableGroup && !isCheckboxSlot;
+  }, [cardRef, findAllFocusable]);
+  const onChangeHandler = React.useCallback(event => {
+    if (shouldRestrictTriggerAction(event)) {
+      return;
+    }
+    const newCheckedValue = !isCardSelected;
+    setIsCardSelected(newCheckedValue);
+    if (onSelectionChange) {
+      onSelectionChange(event, {
+        selected: newCheckedValue
+      });
+    }
+  }, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
+  const onKeyDownHandler = React.useCallback(event => {
+    if ([keyboard_keys_1.Enter, keyboard_keys_1.Space].includes(event.key)) {
+      event.preventDefault();
+      onChangeHandler(event);
+    }
+  }, [onChangeHandler]);
+  const checkboxSlot = React.useMemo(() => {
+    if (!isSelectable || !!floatingAction) {
+      return;
+    }
+    const selectableCheckboxProps = {};
+    if (referenceId) {
+      selectableCheckboxProps['aria-labelledby'] = referenceId;
+    } else if (referenceLabel) {
+      selectableCheckboxProps['aria-label'] = referenceLabel;
+    }
+    return react_utilities_1.resolveShorthand(checkbox, {
+      defaultProps: {
+        ref: checkboxRef,
+        type: 'checkbox',
+        checked: isCardSelected,
+        onChange: event => onChangeHandler(event),
+        onFocus: () => setIsSelectFocused(true),
+        onBlur: () => setIsSelectFocused(false),
+        ...selectableCheckboxProps
+      }
+    });
+  }, [isSelectable, floatingAction, referenceId, referenceLabel, checkbox, isCardSelected, onChangeHandler]);
+  const selectableCardProps = React.useMemo(() => {
+    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(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
+  return {
+    selected: isCardSelected,
+    selectable: isSelectable,
+    selectFocused: isSelectFocused,
+    selectableCardProps,
+    checkboxSlot
+  };
+};
+exports.useCardSelectable = useCardSelectable;
+//# sourceMappingURL=useCardSelectable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":["useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","react_tabster_1","checkboxRef","React","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","keyboard_keys_1","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","react_utilities_1","defaultProps","ref","type","checked","onChange","onFocus","onBlur","selectableCardProps","useEffect","Boolean","selectable","selectFocused","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\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, Space].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  }, [isSelectable, floatingAction, referenceId, referenceLabel, checkbox, isCardSelected, onChangeHandler]);\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(() => setIsCardSelected(Boolean(defaultSelected ?? selected)), [\n    defaultSelected,\n    selected,\n    setIsCardSelected,\n  ]);\n\n  return {\n    selected: isCardSelected,\n    selectable: isSelectable,\n    selectFocused: isSelectFocused,\n    selectableCardProps,\n    checkboxSlot,\n  };\n};\n"]}