@fluentui/react-card 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.2

package/lib/components/CardFooter/useCardFooterStyles.js

@@ -1,33 +1,33 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
 /**
- * Styles for the root slot
+ * Static CSS class names used internally for the component slots.
  */
-
-var useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1063pyq",
-    "rmohyg": "fsbu5mz"
+export const cardFooterClassNames = {
+  root: 'fui-CardFooter',
+  action: 'fui-CardFooter__action'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    i8kkvl: "f4akndk",
+    Belr9w4: "fe5j3v"
   },
-  "action": {
-    "Frg6f3": ["fcgxt0o", "f1ujusj6"]
+  action: {
+    Frg6f3: ["fcgxt0o", "f1ujusj6"]
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fsbu5mz{gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
 });
 /**
- * Apply styling to the CardFooter slots based on the state
+ * Apply styling to the CardFooter slots based on the state.
  */
-
-
-export var useCardFooterStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.root.className);
-
+export const useCardFooterStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
   if (state.action) {
-    state.action.className = mergeClasses(styles.action, state.action.className);
+    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useCardFooterStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,IAAA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CAAC,MAAM,CAAC,MAAR,EAAgB,KAAK,CAAC,MAAN,CAAa,SAA7B,CAArC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}
+{"version":3,"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","Frg6f3","d","useCardFooterStyles_unstable","state","styles","className"],"sources":["../src/packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n  root: 'fui-CardFooter',\n  action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    ...shorthands.gap('12px'),\n  },\n  action: {\n    marginLeft: 'auto',\n  },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE;;;AAGA,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,MAAM,EAAE;CACT;AAED,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAL,MAAA;IAAAM,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAShB;AAEF;;;AAGA,OAAO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGT,SAAS,EAAE;EAC1BQ,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EAEjG,IAAIF,KAAK,CAACT,MAAM,EAAE;IAChBS,KAAK,CAACT,MAAM,CAACW,SAAS,GAAGf,YAAY,CAACE,oBAAoB,CAACE,MAAM,EAAEU,MAAM,CAACV,MAAM,EAAES,KAAK,CAACT,MAAM,CAACW,SAAS,CAAC;;EAG3G,OAAOF,KAAK;AACd,CAAC"}

package/lib/components/CardHeader/CardHeader.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import { useCardHeader } from './useCardHeader';
-import { renderCardHeader } from './renderCardHeader';
-import { useCardHeaderStyles } from './useCardHeaderStyles';
+import { useCardHeader_unstable } from './useCardHeader';
+import { renderCardHeader_unstable } from './renderCardHeader';
+import { useCardHeaderStyles_unstable } from './useCardHeaderStyles';
 /**
  * Component to render an image, text and an action in a Card component.
  */
-
-export var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardHeader(props, ref);
-  useCardHeaderStyles(state);
-  return renderCardHeader(state);
+export const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCardHeader_unstable(props, ref);
+  useCardHeaderStyles_unstable(state);
+  return renderCardHeader_unstable(state);
 });
 CardHeader.displayName = 'CardHeader';
 //# sourceMappingURL=CardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA;;AAEG;;AACH,OAAO,IAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC1F,MAAM,KAAK,GAAG,aAAa,CAAC,KAAD,EAAQ,GAAR,CAA3B;AAEA,EAAA,mBAAmB,CAAC,KAAD,CAAnB;AACA,SAAO,gBAAgB,CAAC,KAAD,CAAvB;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
+{"version":3,"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"sources":["../src/packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useCardHeader_unstable(props, ref);\n\n  useCardHeaderStyles_unstable(state);\n  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,4BAA4B,QAAQ,uBAAuB;AAIpE;;;AAGA,OAAO,MAAMC,UAAU,gBAAyCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,sBAAsB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEhDJ,4BAA4B,CAACK,KAAK,CAAC;EACnC,OAAON,yBAAyB,CAACM,KAAK,CAAC;AACzC,CAAC,CAAC;AAEFJ,UAAU,CAACK,WAAW,GAAG,YAAY"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.types.js","sourceRoot":"","sources":["../../../src/components/CardHeader/CardHeader.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"CardHeader.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/CardHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardHeader component.\n */\nexport type CardHeaderSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Element used to render an image or avatar related to the card.\n   */\n  image: Slot<'div', 'img'>;\n\n  /**\n   * Element used to render the main header title.\n   */\n  header: Slot<'div'>;\n\n  /**\n   * Element used to render short descriptions related to the title.\n   */\n  description: Slot<'div'>;\n\n  /**\n   * Container that renders on the far end of the footer, used for action buttons.\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * CardHeader component props.\n */\nexport type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;\n\n/**\n * State used in rendering CardHeader.\n */\nexport type CardHeaderState = ComponentState<CardHeaderSlots>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles';\n"]}

package/lib/components/CardHeader/renderCardHeader.js

@@ -1,16 +1,23 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { cardHeaderShorthandProps } from './useCardHeader';
 /**
- * Render the final JSX of CardHeader
+ * Render the final JSX of CardHeader.
  */
-
-export var renderCardHeader = function (state) {
-  var _a = getSlots(state, cardHeaderShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.image, __assign({}, slotProps.image)), /*#__PURE__*/React.createElement(slots.content, __assign({}, slotProps.content), /*#__PURE__*/React.createElement(slots.header, __assign({}, slotProps.header)), /*#__PURE__*/React.createElement(slots.description, __assign({}, slotProps.description))), /*#__PURE__*/React.createElement(slots.action, __assign({}, slotProps.action)));
+export const renderCardHeader_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.image && /*#__PURE__*/React.createElement(slots.image, {
+    ...slotProps.image
+  }), /*#__PURE__*/React.createElement(slots.header, {
+    ...slotProps.header
+  }), slots.description && /*#__PURE__*/React.createElement(slots.description, {
+    ...slotProps.description
+  }), slots.action && /*#__PURE__*/React.createElement(slots.action, {
+    ...slotProps.action
+  }));
 };
 //# sourceMappingURL=renderCardHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,wBAAT,QAAyC,iBAAzC;AAEA;;AAEG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAuB;AAC/C,MAAA,EAAA,GAAuB,QAAQ,CAAkB,KAAlB,EAAyB,wBAAzB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,KAAf,CAAZ,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,WAAf,CAAlB,CAFF,CAFF,eAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,MAAf,CAAb,CANF,CADF;AAUD,CAbM","sourceRoot":""}
+{"version":3,"names":["React","getSlots","renderCardHeader_unstable","state","slots","slotProps","createElement","root","image","header","description","action"],"sources":["../src/packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  const { slots, slotProps } = getSlots<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.image && <slots.image {...slotProps.image} />}\n      <slots.header {...slotProps.header} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAsB,IAAI;EAClE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAkBE,KAAK,CAAC;EAE7D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,KAAK,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,eACpDR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,EAAI,EACrCL,KAAK,CAACM,WAAW,iBAAIV,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,WAAW;IAAA,GAAKL,SAAS,CAACK;EAAW,EAAI,EACrEN,KAAK,CAACO,MAAM,iBAAIX,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACO,MAAM;IAAA,GAAKN,SAAS,CAACM;EAAM,EAAI,CAC5C;AAEjB,CAAC"}

package/lib/components/CardHeader/useCardHeader.js

@@ -1,45 +1,60 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-export var cardHeaderShorthandProps = ['root', 'image', 'content', 'header', 'description', 'action'];
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { useCardContext_unstable } from '../Card/CardContext';
+import { cardHeaderClassNames } from './useCardHeaderStyles';
 /**
  * Create the state required to render CardHeader.
  *
- * The returned state can be modified with hooks such as useCardHeaderStyles,
- * before being passed to renderCardHeader.
+ * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
+ * before being passed to renderCardHeader_unstable.
  *
  * @param props - props from this instance of CardHeader
  * @param ref - reference to root HTMLElement of CardHeader
  */
-
-export var useCardHeader = function (props, ref) {
-  var image = props.image,
-      content = props.content,
-      header = props.header,
-      description = props.description,
-      action = props.action;
+export const useCardHeader_unstable = (props, ref) => {
+  const {
+    image,
+    header,
+    description,
+    action
+  } = props;
+  const {
+    selectableA11yProps: {
+      referenceId,
+      setReferenceId
+    }
+  } = useCardContext_unstable();
+  const headerRef = React.useRef(null);
+  const generatedId = useId(cardHeaderClassNames.header, referenceId);
+  React.useEffect(() => {
+    if (header && headerRef.current) {
+      const {
+        id
+      } = headerRef.current;
+      setReferenceId(id ? id : generatedId);
+    }
+  }, [header, setReferenceId, generatedId]);
   return {
     components: {
       root: 'div',
       image: 'div',
-      content: 'div',
-      header: React.Fragment,
-      description: React.Fragment,
+      header: 'div',
+      description: 'div',
       action: 'div'
     },
-    root: getNativeElementProps('div', __assign({
-      ref: ref
-    }, props)),
-    image: resolveShorthand(image, {
-      required: true
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
     }),
-    content: resolveShorthand(content || {}),
+    image: resolveShorthand(image),
     header: resolveShorthand(header, {
-      required: true
-    }),
-    description: resolveShorthand(description, {
-      required: true
+      required: true,
+      defaultProps: {
+        ref: headerRef,
+        id: referenceId
+      }
     }),
+    description: resolveShorthand(description),
     action: resolveShorthand(action)
   };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA,OAAO,IAAM,wBAAwB,GAAiC,CACpE,MADoE,EAEpE,OAFoE,EAGpE,SAHoE,EAIpE,QAJoE,EAKpE,aALoE,EAMpE,QANoE,CAA/D;AASP;;;;;;;;AAQG;;AACH,OAAO,IAAM,aAAa,GAAG,UAAC,KAAD,EAAyB,GAAzB,EAAoD;AACvE,MAAA,KAAK,GAA2C,KAAK,CAAhD,KAAL;AAAA,MAAO,OAAO,GAAkC,KAAK,CAAvC,OAAd;AAAA,MAAgB,MAAM,GAA0B,KAAK,CAA/B,MAAtB;AAAA,MAAwB,WAAW,GAAa,KAAK,CAAlB,WAAnC;AAAA,MAAqC,MAAM,GAAK,KAAK,CAAV,MAA3C;AAER,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,OAAO,EAAE,KAHC;AAIV,MAAA,MAAM,EAAE,KAAK,CAAC,QAJJ;AAKV,MAAA,WAAW,EAAE,KAAK,CAAC,QALT;AAMV,MAAA,MAAM,EAAE;AANE,KADP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAAN,CAVtB;AAcL,IAAA,KAAK,EAAE,gBAAgB,CAAC,KAAD,EAAQ;AAC7B,MAAA,QAAQ,EAAE;AADmB,KAAR,CAdlB;AAiBL,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAO,IAAI,EAAZ,CAjBpB;AAkBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD,EAAS;AAC/B,MAAA,QAAQ,EAAE;AADqB,KAAT,CAlBnB;AAqBL,IAAA,WAAW,EAAE,gBAAgB,CAAC,WAAD,EAAc;AACzC,MAAA,QAAQ,EAAE;AAD+B,KAAd,CArBxB;AAwBL,IAAA,MAAM,EAAE,gBAAgB,CAAC,MAAD;AAxBnB,GAAP;AA0BD,CA7BM","sourceRoot":""}
+{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","useCardContext_unstable","cardHeaderClassNames","useCardHeader_unstable","props","ref","image","header","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","generatedId","useEffect","current","id","components","root","required","defaultProps"],"sources":["../src/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n  const { image, header, description, action } = props;\n\n  const {\n    selectableA11yProps: { referenceId, setReferenceId },\n  } = useCardContext_unstable();\n  const headerRef = React.useRef<HTMLDivElement>(null);\n\n  const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n  React.useEffect(() => {\n    if (header && headerRef.current) {\n      const { id } = headerRef.current;\n\n      setReferenceId(id ? id : generatedId);\n    }\n  }, [header, setReferenceId, generatedId]);\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      header: 'div',\n      description: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image),\n    header: resolveShorthand(header, {\n      required: true,\n      defaultProps: {\n        ref: headerRef,\n        id: referenceId,\n      },\n    }),\n    description: resolveShorthand(description),\n    action: resolveShorthand(action),\n  };\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAE1F,SAASC,uBAAuB,QAAQ,qBAAqB;AAC7D,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D;;;;;;;;;AASA,OAAO,MAAMC,sBAAsB,GAAGA,CAACC,KAAsB,EAAEC,GAA2B,KAAqB;EAC7G,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,WAAW;IAAEC;EAAM,CAAE,GAAGL,KAAK;EAEpD,MAAM;IACJM,mBAAmB,EAAE;MAAEC,WAAW;MAAEC;IAAc;EAAE,CACrD,GAAGX,uBAAuB,EAAE;EAC7B,MAAMY,SAAS,GAAGhB,KAAK,CAACiB,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAMC,WAAW,GAAGf,KAAK,CAACE,oBAAoB,CAACK,MAAM,EAAEI,WAAW,CAAC;EAEnEd,KAAK,CAACmB,SAAS,CAAC,MAAK;IACnB,IAAIT,MAAM,IAAIM,SAAS,CAACI,OAAO,EAAE;MAC/B,MAAM;QAAEC;MAAE,CAAE,GAAGL,SAAS,CAACI,OAAO;MAEhCL,cAAc,CAACM,EAAE,GAAGA,EAAE,GAAGH,WAAW,CAAC;;EAEzC,CAAC,EAAE,CAACR,MAAM,EAAEK,cAAc,EAAEG,WAAW,CAAC,CAAC;EAEzC,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXd,KAAK,EAAE,KAAK;MACZC,MAAM,EAAE,KAAK;MACbC,WAAW,EAAE,KAAK;MAClBC,MAAM,EAAE;KACT;IAEDW,IAAI,EAAEtB,qBAAqB,CAAC,KAAK,EAAE;MACjCO,GAAG;MACH,GAAGD;KACJ,CAAC;IACFE,KAAK,EAAEP,gBAAgB,CAACO,KAAK,CAAC;IAC9BC,MAAM,EAAER,gBAAgB,CAACQ,MAAM,EAAE;MAC/Bc,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZjB,GAAG,EAAEQ,SAAS;QACdK,EAAE,EAAEP;;KAEP,CAAC;IACFH,WAAW,EAAET,gBAAgB,CAACS,WAAW,CAAC;IAC1CC,MAAM,EAAEV,gBAAgB,CAACU,MAAM;GAChC;AACH,CAAC"}

package/lib/components/CardHeader/useCardHeaderStyles.js

@@ -1,55 +1,68 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@griffel/react';
 /**
- * Styles for the root slot
+ * Static CSS class names used internally for the component slots.
  */
-
-var useStyles = /*#__PURE__*/__styles({
-  "root": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1063pyq",
-    "Bt984gj": "f122n59",
-    "rmohyg": "fsbu5mz",
-    "Bqenvij": "f1d2rq10"
+export const 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.
+ */
+export const cardHeaderCSSVars = {
+  cardHeaderGapVar: '--fui-CardHeader--gap'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bkc6ea2: "fkufhic",
+    mc9l5x: "f13qh94s",
+    t4k1zu: "f8a668j",
+    v29qe6: "f4h39za",
+    Bt984gj: "f122n59"
   },
-  "image": {
-    "Bf4jedk": "f17fgpbq",
-    "sshi5w": "f1pha7fy",
-    "B2u0y6b": "f44c6la",
-    "Bxyxcbc": "f17bzqcb",
-    "mc9l5x": "f22iagw",
-    "Bt984gj": "f122n59",
-    "uw7vt1": "fgn7ydb",
-    "Dzuj6k": "f1jevvm1",
-    "zsb7ef": "fqihwjc",
-    "f2epyl": "f6x1sus"
+  image: {
+    mc9l5x: "ftuwxu6",
+    t21cq0: ["fql5097", "f6yss9k"],
+    Br312pm: "fwpfdsa",
+    Ijaq50: "fldnz9j"
   },
-  "textContainer": {
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "Bh6795r": "fqerorx",
-    "Bqenvij": "fwk23hs",
-    "Bn3e79g": "f1con4nn"
+  header: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "f16hsg94"
+  },
+  description: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "faunodf"
+  },
+  action: {
+    Frg6f3: ["f6yss9k", "fql5097"],
+    Br312pm: "fis13di",
+    Ijaq50: "fldnz9j"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fsbu5mz{gap:12px;}", ".f1d2rq10{height:32px;}", ".f17fgpbq{min-width:24px;}", ".f1pha7fy{min-height:24px;}", ".f44c6la{max-width:32px;}", ".f17bzqcb{max-height:32px;}", ".fgn7ydb>*{min-width:inherit;}", ".f1jevvm1>*{min-height:inherit;}", ".fqihwjc>*{max-width:100%;}", ".f6x1sus>*{max-height:100%;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwk23hs{height:inherit;}", ".f1con4nn>*{height:50%;}"]
+  d: [".fkufhic{--fui-CardHeader--gap:12px;}", ".f13qh94s{display:grid;}", ".f8a668j{grid-auto-columns:min-content 1fr min-content;}", ".f4h39za{grid-auto-rows:1fr min-content;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fql5097{margin-right:var(--fui-CardHeader--gap);}", ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}", ".fwpfdsa{grid-column-start:1;}", ".fldnz9j{grid-row-start:span 2;}", ".fd46tj4{grid-column-start:2;}", ".f16hsg94{grid-row-start:1;}", ".faunodf{grid-row-start:2;}", ".fis13di{grid-column-start:3;}"]
 });
 /**
- * Apply styling to the CardHeader slots based on the state
+ * Apply styling to the CardHeader slots based on the state.
  */
-
-
-export var useCardHeaderStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.root.className);
-
+export const useCardHeaderStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
+  }
+  if (state.header) {
+    state.header.className = mergeClasses(cardHeaderClassNames.header, styles.header, state.header.className);
+  }
+  if (state.description) {
+    state.description.className = mergeClasses(cardHeaderClassNames.description, styles.description, state.description.className);
   }
-
-  if (state.content) {
-    state.content.className = mergeClasses(styles.textContainer, state.content.className);
+  if (state.action) {
+    state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useCardHeaderStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,IAAM,mBAAmB,GAAG,UAAC,KAAD,EAAuB;AACxD,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;;AAEA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,MAAM,CAAC,KAAR,EAAe,KAAK,CAAC,KAAN,CAAY,SAA3B,CAApC;AACD;;AAED,MAAI,KAAK,CAAC,OAAV,EAAmB;AACjB,IAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CAAC,MAAM,CAAC,aAAR,EAAuB,KAAK,CAAC,OAAN,CAAc,SAArC,CAAtC;AACD;;AAED,SAAO,KAAP;AACD,CAbM","sourceRoot":""}
+{"version":3,"names":["__styles","mergeClasses","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","Bkc6ea2","mc9l5x","t4k1zu","v29qe6","Bt984gj","t21cq0","Br312pm","Ijaq50","Frg6f3","d","useCardHeaderStyles_unstable","state","styles","className"],"sources":["../src/packages/react-components/react-card/src/components/CardHeader/useCardHeaderStyles.ts"],"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"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AAGzD;;;AAGA,OAAO,MAAMC,oBAAoB,GAAoC;EACnEC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE,wBAAwB;EAChCC,WAAW,EAAE,6BAA6B;EAC1CC,MAAM,EAAE;CACT;AAED;;;AAGA,OAAO,MAAMC,iBAAiB,GAAG;EAC/BC,gBAAgB,EAAE;CACnB;AAED,MAAMC,SAAS,gBAAGV,QAAA;EAAAG,IAAA;IAAAQ,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAX,KAAA;IAAAQ,MAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAb,MAAA;IAAAY,OAAA;IAAAC,MAAA;EAAA;EAAAZ,WAAA;IAAAW,OAAA;IAAAC,MAAA;EAAA;EAAAX,MAAA;IAAAY,MAAA;IAAAF,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,EA2BhB;AAEF;;;AAGA,OAAO,MAAMC,4BAA4B,GAAIC,KAAsB,IAAqB;EACtF,MAAMC,MAAM,GAAGb,SAAS,EAAE;EAC1BY,KAAK,CAACnB,IAAI,CAACqB,SAAS,GAAGvB,YAAY,CAACC,oBAAoB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEmB,KAAK,CAACnB,IAAI,CAACqB,SAAS,CAAC;EAEjG,IAAIF,KAAK,CAAClB,KAAK,EAAE;IACfkB,KAAK,CAAClB,KAAK,CAACoB,SAAS,GAAGvB,YAAY,CAACC,oBAAoB,CAACE,KAAK,EAAEmB,MAAM,CAACnB,KAAK,EAAEkB,KAAK,CAAClB,KAAK,CAACoB,SAAS,CAAC;;EAGvG,IAAIF,KAAK,CAACjB,MAAM,EAAE;IAChBiB,KAAK,CAACjB,MAAM,CAACmB,SAAS,GAAGvB,YAAY,CAACC,oBAAoB,CAACG,MAAM,EAAEkB,MAAM,CAAClB,MAAM,EAAEiB,KAAK,CAACjB,MAAM,CAACmB,SAAS,CAAC;;EAG3G,IAAIF,KAAK,CAAChB,WAAW,EAAE;IACrBgB,KAAK,CAAChB,WAAW,CAACkB,SAAS,GAAGvB,YAAY,CACxCC,oBAAoB,CAACI,WAAW,EAChCiB,MAAM,CAACjB,WAAW,EAClBgB,KAAK,CAAChB,WAAW,CAACkB,SAAS,CAC5B;;EAGH,IAAIF,KAAK,CAACf,MAAM,EAAE;IAChBe,KAAK,CAACf,MAAM,CAACiB,SAAS,GAAGvB,YAAY,CAACC,oBAAoB,CAACK,MAAM,EAAEgB,MAAM,CAAChB,MAAM,EAAEe,KAAK,CAACf,MAAM,CAACiB,SAAS,CAAC;;EAG3G,OAAOF,KAAK;AACd,CAAC"}

package/lib/components/CardPreview/CardPreview.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import { useCardPreview } from './useCardPreview';
-import { renderCardPreview } from './renderCardPreview';
-import { useCardPreviewStyles } from './useCardPreviewStyles';
+import { useCardPreview_unstable } from './useCardPreview';
+import { renderCardPreview_unstable } from './renderCardPreview';
+import { useCardPreviewStyles_unstable } from './useCardPreviewStyles';
 /**
  * Component to render image previews of documents or articles in a Card component.
  */
-
-export var CardPreview = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCardPreview(props, ref);
-  useCardPreviewStyles(state);
-  return renderCardPreview(state);
+export const CardPreview = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCardPreview_unstable(props, ref);
+  useCardPreviewStyles_unstable(state);
+  return renderCardPreview_unstable(state);
 });
 CardPreview.displayName = 'CardPreview';
 //# sourceMappingURL=CardPreview.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/CardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AAIA;;AAEG;;AACH,OAAO,IAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC5F,MAAM,KAAK,GAAG,cAAc,CAAC,KAAD,EAAQ,GAAR,CAA5B;AAEA,EAAA,oBAAoB,CAAC,KAAD,CAApB;AACA,SAAO,iBAAiB,CAAC,KAAD,CAAxB;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
+{"version":3,"names":["React","useCardPreview_unstable","renderCardPreview_unstable","useCardPreviewStyles_unstable","CardPreview","forwardRef","props","ref","state","displayName"],"sources":["../src/packages/react-components/react-card/src/components/CardPreview/CardPreview.tsx"],"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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardPreview.types.js","sourceRoot":"","sources":["../../../src/components/CardPreview/CardPreview.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"CardPreview.types.js","sourceRoot":"../src/","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/components/CardPreview/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardPreview/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-card/src/components/CardPreview/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './CardPreview';\nexport * from './CardPreview.types';\nexport * from './renderCardPreview';\nexport * from './useCardPreview';\nexport * from './useCardPreviewStyles';\n"]}

package/lib/components/CardPreview/renderCardPreview.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,yBAAT,QAA0C,kBAA1C;AAGA;;AAEG;;AACH,OAAO,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACjD,MAAA,EAAA,GAAuB,QAAQ,CAAmB,KAAnB,EAA0B,yBAA1B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"names":["React","getSlots","renderCardPreview_unstable","state","slots","slotProps","createElement","root","children","logo"],"sources":["../src/packages/react-components/react-card/src/components/CardPreview/renderCardPreview.tsx"],"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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAE9D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BF,SAAS,CAACE,IAAI,CAACC,QAAQ,EACvBJ,KAAK,CAACK,IAAI,iBAAIT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CACtC;AAEjB,CAAC"}

package/lib/components/CardPreview/useCardPreview.js

@@ -1,30 +1,57 @@
-import { __assign } from "tslib";
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in CardPreviewShorthandProps
- */
-
-export var cardPreviewShorthandProps = ['root', 'logo'];
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { useCardContext_unstable } from '../Card/CardContext';
+import { cardPreviewClassNames } from './useCardPreviewStyles';
 /**
  * Create the state required to render CardPreview.
  *
- * The returned state can be modified with hooks such as useCardPreviewStyles,
- * before being passed to renderCardPreview.
+ * 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
  */
-
-export var useCardPreview = function (props, ref) {
-  var logo = props.logo;
+export const useCardPreview_unstable = (props, ref) => {
+  const {
+    logo
+  } = props;
+  const {
+    selectableA11yProps: {
+      referenceLabel,
+      referenceId,
+      setReferenceLabel,
+      setReferenceId
+    }
+  } = useCardContext_unstable();
+  const previewRef = useMergedRefs(ref, React.useRef(null));
+  React.useEffect(() => {
+    if (referenceLabel && referenceId) {
+      return;
+    }
+    if (previewRef.current && previewRef.current.parentNode) {
+      const img = previewRef.current.parentNode.querySelector(`.${cardPreviewClassNames.root} > img`);
+      if (img) {
+        const ariaLabel = img.getAttribute('aria-label');
+        const 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: getNativeElementProps('div', __assign({
-      ref: ref
-    }, props)),
+    root: getNativeElementProps('div', {
+      ref: previewRef,
+      ...props
+    }),
     logo: resolveShorthand(logo)
   };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,IAAM,yBAAyB,GAAkC,CAAC,MAAD,EAAS,MAAT,CAAjE;AAEP;;;;;;;;AAQG;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAA0B,GAA1B,EAAqD;AACzE,MAAA,IAAI,GAAK,KAAK,CAAV,IAAJ;AACR,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAAN,CANtB;AAUL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD;AAVjB,GAAP;AAYD,CAdM","sourceRoot":""}
+{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components"],"sources":["../src/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles';\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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,2BAA2B;AAElG,SAASC,uBAAuB,QAAQ,qBAAqB;AAC7D,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAK;EAEtB,MAAM;IACJG,mBAAmB,EAAE;MAAEC,cAAc;MAAEC,WAAW;MAAEC,iBAAiB;MAAEC;IAAc;EAAE,CACxF,GAAGV,uBAAuB,EAAE;EAC7B,MAAMW,UAAU,GAAGZ,aAAa,CAACK,GAAG,EAAER,KAAK,CAACgB,MAAM,CAAiB,IAAI,CAAC,CAAC;EAEzEhB,KAAK,CAACiB,SAAS,CAAC,MAAK;IACnB,IAAIN,cAAc,IAAIC,WAAW,EAAE;MACjC;;IAGF,IAAIG,UAAU,CAACG,OAAO,IAAIH,UAAU,CAACG,OAAO,CAACC,UAAU,EAAE;MACvD,MAAMC,GAAG,GAAGL,UAAU,CAACG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,IAAIhB,qBAAqB,CAACiB,IAAI,QAAQ,CAAC;MAEjH,IAAIF,GAAG,EAAE;QACP,MAAMG,SAAS,GAAGH,GAAG,CAACI,YAAY,CAAC,YAAY,CAAC;QAChD,MAAMC,eAAe,GAAGL,GAAG,CAACI,YAAY,CAAC,kBAAkB,CAAC;QAE5D,IAAIC,eAAe,EAAE;UACnBX,cAAc,CAACW,eAAe,CAAC;SAChC,MAAM,IAAIL,GAAG,CAACM,GAAG,EAAE;UAClBb,iBAAiB,CAACO,GAAG,CAACM,GAAG,CAAC;SAC3B,MAAM,IAAIH,SAAS,EAAE;UACpBV,iBAAiB,CAACU,SAAS,CAAC;;;;EAIpC,CAAC,EAAE,CAACV,iBAAiB,EAAEF,cAAc,EAAEI,UAAU,EAAEH,WAAW,EAAEE,cAAc,CAAC,CAAC;EAEhF,OAAO;IACLa,UAAU,EAAE;MACVL,IAAI,EAAE,KAAK;MACXb,IAAI,EAAE;KACP;IAEDa,IAAI,EAAErB,qBAAqB,CAAC,KAAK,EAAE;MACjCO,GAAG,EAAEO,UAAU;MACf,GAAGR;KACJ,CAAC;IACFE,IAAI,EAAEP,gBAAgB,CAACO,IAAI;GAC5B;AACH,CAAC"}