@fluentui/react-card 9.6.0 → 9.7.0

package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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<keyof CardHeaderSlots>({\n  root: {\n    [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n    alignItems: 'center',\n  },\n  image: {\n    display: 'inline-flex',\n    marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n  },\n  header: {\n    display: 'flex',\n  },\n  description: {\n    display: 'flex',\n  },\n  action: {\n    marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n    // when the card is selected or hovered, it has custom high contrast color and background styles\n    // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n    '@media (forced-colors: active)': {\n      '& .fui-Button, & .fui-Link': {\n        ...shorthands.borderColor('currentColor'),\n        color: 'currentColor',\n        outlineColor: 'currentColor',\n      },\n    },\n  },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n  root: {\n    display: 'grid',\n    gridAutoColumns: 'min-content 1fr min-content',\n  },\n\n  image: {\n    gridColumnStart: '1',\n    gridRowStart: 'span 2',\n  },\n\n  header: {\n    gridColumnStart: '2',\n    gridRowStart: '1',\n  },\n\n  description: {\n    gridColumnStart: '2',\n    gridRowStart: '2',\n  },\n\n  action: {\n    gridColumnStart: '3',\n    gridRowStart: 'span 2',\n  },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n  root: {\n    display: 'flex',\n  },\n\n  header: {\n    flexGrow: 1,\n  },\n\n  image: {},\n  description: {},\n  action: {},\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const stylesGrid = useStylesGrid();\n  const stylesFlex = useStylesFlex();\n\n  const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n\n  const getSlotStyles = (slotName: keyof CardHeaderSlots): string => {\n    return mergeClasses(\n      cardHeaderClassNames[slotName],\n      styles[slotName],\n      boxModelStyles[slotName],\n      state[slotName]?.className,\n    );\n  };\n\n  state.root.className = getSlotStyles('root');\n\n  if (state.image) {\n    state.image.className = getSlotStyles('image');\n  }\n\n  if (state.header) {\n    state.header.className = getSlotStyles('header');\n  }\n\n  if (state.description) {\n    state.description.className = getSlotStyles('description');\n  }\n\n  if (state.action) {\n    state.action.className = getSlotStyles('action');\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","alignItems","display","marginRight","marginLeft","borderColor","color","outlineColor","useStylesGrid","gridAutoColumns","gridColumnStart","gridRowStart","useStylesFlex","flexGrow","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","className"],"mappings":"AAAA;;;;;;;;;;;;IAoBaS,iBAAAA;;;wBAXAN;;;gCAyFAsB;eAAAA;;;uBA/FwC,iBAAiB;AAM/D,MAAMtB,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,aAAa;IACbC,QAAQ;AACV,EAAE;AAKK,0BAA0B;IAC/BE,kBAAkB;AACpB,EAAE;AAEF,MAAMC,YAAYX,qBAAAA,EAAkC;IAClDI,MAAM;QACJ,CAACK,kBAAkBC,gBAAgB,CAAC,EAAE;QACtCE,YAAY;IACd;IACAP,OAAO;QACLQ,SAAS;QACTC,aAAa,CAAC,IAAI,EAAEL,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;IAC3D;IACAJ,QAAQ;QACNO,SAAS;IACX;IACAN,aAAa;QACXM,SAAS;IACX;IACAL,QAAQ;QACNO,YAAY,CAAC,IAAI,EAAEN,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;QAExD,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,iBAAAA,CAAWc,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA,MAAMC,gBAAgBnB,qBAAAA,EAAkC;IACtDI,MAAM;QACJS,SAAS;QACTO,iBAAiB;IACnB;IAEAf,OAAO;QACLgB,iBAAiB;QACjBC,cAAc;IAChB;IAEAhB,QAAQ;QACNe,iBAAiB;QACjBC,cAAc;IAChB;IAEAf,aAAa;QACXc,iBAAiB;QACjBC,cAAc;IAChB;IAEAd,QAAQ;QACNa,iBAAiB;QACjBC,cAAc;IAChB;AACF;AAEA,MAAMC,oBAAgBvB,iBAAAA,EAAkC;IACtDI,MAAM;QACJS,SAAS;IACX;IAEAP,QAAQ;QACNkB,UAAU;IACZ;IAEAnB,OAAO,CAAC;IACRE,aAAa,CAAC;IACdC,QAAQ,CAAC;AACX;AAKO,qCAAqC,CAACkB;IAC3C;IAEA,MAAMC,SAAShB;IACf,MAAMiB,aAAaT;IACnB,MAAMU,aAAaN;IAEnB,MAAMO,iBAAiBJ,MAAMnB,WAAW,GAAGqB,aAAaC;IAExD,MAAME,gBAAgB,CAACC;YAKnBN;QAJF,OAAOzB,uBAAAA,EACLE,oBAAoB,CAAC6B,SAAS,EAC9BL,MAAM,CAACK,SAAS,EAChBF,cAAc,CAACE,SAAS,EAAA,AACxBN,mBAAAA,KAAK,CAACM,SAAAA,AAAS,MAAA,QAAfN,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAiBO,SAAS;IAE9B;IAEAP,MAAMtB,IAAI,CAAC6B,SAAS,GAAGF,cAAc;IAErC,IAAIL,MAAMrB,KAAK,EAAE;QACfqB,MAAMrB,KAAK,CAAC4B,SAAS,GAAGF,cAAc;IACxC;IAEA,IAAIL,MAAMpB,MAAM,EAAE;QAChBoB,MAAMpB,MAAM,CAAC2B,SAAS,GAAGF,cAAc;IACzC;IAEA,IAAIL,MAAMnB,WAAW,EAAE;QACrBmB,MAAMnB,WAAW,CAAC0B,SAAS,GAAGF,cAAc;IAC9C;IAEA,IAAIL,MAAMlB,MAAM,EAAE;QAChBkB,MAAMlB,MAAM,CAACyB,SAAS,GAAGF,cAAc;IACzC;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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<keyof CardHeaderSlots>({\n  root: {\n    [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n    alignItems: 'center',\n  },\n  image: {\n    display: 'inline-flex',\n    marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n  },\n  header: {\n    display: 'flex',\n  },\n  description: {\n    display: 'flex',\n  },\n  action: {\n    marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n    // when the card is selected or hovered, it has custom high contrast color and background styles\n    // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n    '@media (forced-colors: active)': {\n      '& .fui-Button, & .fui-Link': {\n        ...shorthands.borderColor('currentColor'),\n        color: 'currentColor',\n        outlineColor: 'currentColor',\n      },\n    },\n  },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n  root: {\n    display: 'grid',\n    gridAutoColumns: 'min-content 1fr min-content',\n  },\n\n  image: {\n    gridColumnStart: '1',\n    gridRowStart: 'span 2',\n  },\n\n  header: {\n    gridColumnStart: '2',\n    gridRowStart: '1',\n  },\n\n  description: {\n    gridColumnStart: '2',\n    gridRowStart: '2',\n  },\n\n  action: {\n    gridColumnStart: '3',\n    gridRowStart: 'span 2',\n  },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n  root: {\n    display: 'flex',\n  },\n\n  header: {\n    flexGrow: 1,\n  },\n\n  image: {},\n  description: {},\n  action: {},\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const stylesGrid = useStylesGrid();\n  const stylesFlex = useStylesFlex();\n\n  const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n\n  const getSlotStyles = (slotName: keyof CardHeaderSlots): string => {\n    return mergeClasses(\n      cardHeaderClassNames[slotName],\n      styles[slotName],\n      boxModelStyles[slotName],\n      state[slotName]?.className,\n    );\n  };\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = getSlotStyles('root');\n\n  if (state.image) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.image.className = getSlotStyles('image');\n  }\n\n  if (state.header) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.header.className = getSlotStyles('header');\n  }\n\n  if (state.description) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.description.className = getSlotStyles('description');\n  }\n\n  if (state.action) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.action.className = getSlotStyles('action');\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","alignItems","display","marginRight","marginLeft","borderColor","color","outlineColor","useStylesGrid","gridAutoColumns","gridColumnStart","gridRowStart","useStylesFlex","flexGrow","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","className"],"mappings":"AAAA;;;;;;;;;;;;IAoBaS,iBAAAA;;;wBAXAN;;;IAyFAsB,4BAAAA;;;;uBA/FwC,iBAAiB;AAM/D,MAAMtB,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,aAAa;IACbC,QAAQ;AACV,EAAE;AAKK,0BAA0B;IAC/BE,kBAAkB;AACpB,EAAE;AAEF,MAAMC,YAAYX,qBAAAA,EAAkC;IAClDI,MAAM;QACJ,CAACK,kBAAkBC,gBAAgB,CAAC,EAAE;QACtCE,YAAY;IACd;IACAP,OAAO;QACLQ,SAAS;QACTC,aAAa,CAAC,IAAI,EAAEL,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;IAC3D;IACAJ,QAAQ;QACNO,SAAS;IACX;IACAN,aAAa;QACXM,SAAS;IACX;IACAL,QAAQ;QACNO,YAAY,CAAC,IAAI,EAAEN,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;QAExD,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,iBAAAA,CAAWc,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA,MAAMC,oBAAgBnB,iBAAAA,EAAkC;IACtDI,MAAM;QACJS,SAAS;QACTO,iBAAiB;IACnB;IAEAf,OAAO;QACLgB,iBAAiB;QACjBC,cAAc;IAChB;IAEAhB,QAAQ;QACNe,iBAAiB;QACjBC,cAAc;IAChB;IAEAf,aAAa;QACXc,iBAAiB;QACjBC,cAAc;IAChB;IAEAd,QAAQ;QACNa,iBAAiB;QACjBC,cAAc;IAChB;AACF;AAEA,MAAMC,oBAAgBvB,iBAAAA,EAAkC;IACtDI,MAAM;QACJS,SAAS;IACX;IAEAP,QAAQ;QACNkB,UAAU;IACZ;IAEAnB,OAAO,CAAC;IACRE,aAAa,CAAC;IACdC,QAAQ,CAAC;AACX;AAKO,qCAAqC,CAACkB;IAC3C;IAEA,MAAMC,SAAShB;IACf,MAAMiB,aAAaT;IACnB,MAAMU,aAAaN;IAEnB,MAAMO,iBAAiBJ,MAAMnB,WAAW,GAAGqB,aAAaC;IAExD,MAAME,gBAAgB,CAACC;YAKnBN;QAJF,WAAOzB,mBAAAA,EACLE,oBAAoB,CAAC6B,SAAS,EAC9BL,MAAM,CAACK,SAAS,EAChBF,cAAc,CAACE,SAAS,EAAA,CACxBN,kBAAAA,KAAK,CAACM,SAAAA,AAAS,MAAA,QAAfN,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAiBO,SAAS;IAE9B;IAEA,oDAAoD;IACpDP,MAAMtB,IAAI,CAAC6B,SAAS,GAAGF,cAAc;IAErC,IAAIL,MAAMrB,KAAK,EAAE;QACf,oDAAoD;QACpDqB,MAAMrB,KAAK,CAAC4B,SAAS,GAAGF,cAAc;IACxC;IAEA,IAAIL,MAAMpB,MAAM,EAAE;QAChB,oDAAoD;QACpDoB,MAAMpB,MAAM,CAAC2B,SAAS,GAAGF,cAAc;IACzC;IAEA,IAAIL,MAAMnB,WAAW,EAAE;QACrB,oDAAoD;QACpDmB,MAAMnB,WAAW,CAAC0B,SAAS,GAAGF,cAAc;IAC9C;IAEA,IAAIL,MAAMlB,MAAM,EAAE;QAChB,oDAAoD;QACpDkB,MAAMlB,MAAM,CAACyB,SAAS,GAAGF,cAAc;IACzC;IAEA,OAAOL;AACT,EAAE"}

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

@@ -21,7 +21,6 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _CardContext = require("../Card/CardContext");
-const _useCardPreviewStylesstyles = require("./useCardPreviewStyles.styles");
 const useCardPreview_unstable = (props, ref)=>{
     return useCardPreviewBase_unstable(props, ref);
 };
@@ -37,7 +36,7 @@ const useCardPreviewBase_unstable = (props, ref)=>{
             return;
         }
         if (previewRef.current && previewRef.current.parentNode) {
-            const img = previewRef.current.parentNode.querySelector(`.${_useCardPreviewStylesstyles.cardPreviewClassNames.root} > img`);
+            const img = previewRef.current.parentNode.querySelector(`.fui-CardPreview > img`);
             if (img) {
                 const ariaLabel = img.getAttribute('aria-label');
                 const ariaDescribedby = img.getAttribute('aria-describedby');

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n  CardPreviewBaseProps,\n  CardPreviewBaseState,\n  CardPreviewProps,\n  CardPreviewState,\n} from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardPreviewClassNames } from './useCardPreviewStyles.styles';\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  return useCardPreviewBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardPreview component, which manages state related to slots structure\n * and the card's selectable accessibility label.\n * Note: CardPreview has no design props, so this is equivalent to useCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreviewBase_unstable = (\n  props: CardPreviewBaseProps,\n  ref: React.Ref<HTMLElement>,\n): CardPreviewBaseState => {\n  const { logo } = props;\n\n  const {\n    selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n  } = useCardContext_unstable();\n  // FIXME:\n  // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n  // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n  const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, 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: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: previewRef,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    logo: slot.optional(logo, { elementType: 'div' }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useCardContext_unstable","cardPreviewClassNames","useCardPreview_unstable","props","ref","useCardPreviewBase_unstable","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","root","ariaLabel","getAttribute","ariaDescribedby","alt","components","always","elementType","optional"],"mappings":"AAAA;;;;;;;;;;;;IAkCaS,2BAAAA;;;2BAZAH;;;;;iEApBU,QAAQ;gCAC+B,4BAA4B;6BAOlD,sBAAsB;4CACxB,gCAAgC;AAW/D,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,OAAOC,4BAA4BF,OAAOC;AAC5C,EAAE;AAUK,oCAAoC,CACzCD,OACAC;IAEA,MAAM,EAAEE,IAAI,EAAE,GAAGH;IAEjB,MAAM,EACJI,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EACxF,OAAGX,oCAAAA;IACJ,SAAS;IACT,4EAA4E;IAC5E,4FAA4F;IAC5F,MAAMY,iBAAad,6BAAAA,EAAcM,KAAkCR,OAAMiB,MAAM,CAAiB;IAEhGjB,OAAMkB,SAAS,CAAC;QACd,IAAIN,kBAAkBC,aAAa;YACjC;QACF;QAEA,IAAIG,WAAWG,OAAO,IAAIH,WAAWG,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAML,WAAWG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,CAAC,EAAEjB,iDAAAA,CAAsBkB,IAAI,CAAC,MAAM,CAAC;YAEhH,IAAIF,KAAK;gBACP,MAAMG,YAAYH,IAAII,YAAY,CAAC;gBACnC,MAAMC,kBAAkBL,IAAII,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBX,eAAeW;gBACjB,OAAO,IAAIL,IAAIM,GAAG,EAAE;oBAClBb,kBAAkBO,IAAIM,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBV,kBAAkBU;gBACpB;YACF;QACF;IACF,GAAG;QAACV;QAAmBF;QAAgBI;QAAYH;QAAaE;KAAe;IAE/E,OAAO;QACLa,YAAY;YACVL,MAAM;YACNb,MAAM;QACR;QAEAa,MAAMpB,oBAAAA,CAAK0B,MAAM,KACf5B,wCAAAA,EAAyB,OAAO;YAC9BO,KAAKQ;YACL,GAAGT,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;QAEvBpB,MAAMP,oBAAAA,CAAK4B,QAAQ,CAACrB,MAAM;YAAEoB,aAAa;QAAM;IACjD;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CardPreview/useCardPreview.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport type {\n  CardPreviewBaseProps,\n  CardPreviewBaseState,\n  CardPreviewProps,\n  CardPreviewState,\n} from './CardPreview.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\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  return useCardPreviewBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardPreview component, which manages state related to slots structure\n * and the card's selectable accessibility label.\n * Note: CardPreview has no design props, so this is equivalent to useCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreviewBase_unstable = (\n  props: CardPreviewBaseProps,\n  ref: React.Ref<HTMLElement>,\n): CardPreviewBaseState => {\n  const { logo } = props;\n\n  const {\n    selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },\n  } = useCardContext_unstable();\n  // FIXME:\n  // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n  // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n  const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, 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>(`.fui-CardPreview > 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: slot.always(\n      // eslint-disable-next-line react-hooks/refs\n      getIntrinsicElementProps('div', {\n        ref: previewRef,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    logo: slot.optional(logo, { elementType: 'div' }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useCardContext_unstable","useCardPreview_unstable","props","ref","useCardPreviewBase_unstable","logo","selectableA11yProps","referenceLabel","referenceId","setReferenceLabel","setReferenceId","previewRef","useRef","useEffect","current","parentNode","img","querySelector","ariaLabel","getAttribute","ariaDescribedby","alt","components","root","always","elementType","optional"],"mappings":"AAAA;;;;;;;;;;;;IAiCaQ,2BAAAA;;;2BAZAH;;;;;iEAnBU,QAAQ;gCAC+B,4BAA4B;6BAOlD,sBAAsB;AAWvD,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,OAAOC,4BAA4BF,OAAOC;AAC5C,EAAE;AAUK,oCAAoC,CACzCD,OACAC;IAEA,MAAM,EAAEE,IAAI,EAAE,GAAGH;IAEjB,MAAM,EACJI,qBAAqB,EAAEC,cAAc,EAAEC,WAAW,EAAEC,iBAAiB,EAAEC,cAAc,EAAE,EACxF,OAAGV,oCAAAA;IACJ,SAAS;IACT,4EAA4E;IAC5E,4FAA4F;IAC5F,MAAMW,iBAAab,6BAAAA,EAAcK,KAAkCP,OAAMgB,MAAM,CAAiB;IAEhGhB,OAAMiB,SAAS,CAAC;QACd,IAAIN,kBAAkBC,aAAa;YACjC;QACF;QAEA,IAAIG,WAAWG,OAAO,IAAIH,WAAWG,OAAO,CAACC,UAAU,EAAE;YACvD,MAAMC,MAAML,WAAWG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAmB,CAAC,sBAAsB,CAAC;YAElG,IAAID,KAAK;gBACP,MAAME,YAAYF,IAAIG,YAAY,CAAC;gBACnC,MAAMC,kBAAkBJ,IAAIG,YAAY,CAAC;gBAEzC,IAAIC,iBAAiB;oBACnBV,eAAeU;gBACjB,OAAO,IAAIJ,IAAIK,GAAG,EAAE;oBAClBZ,kBAAkBO,IAAIK,GAAG;gBAC3B,OAAO,IAAIH,WAAW;oBACpBT,kBAAkBS;gBACpB;YACF;QACF;IACF,GAAG;QAACT;QAAmBF;QAAgBI;QAAYH;QAAaE;KAAe;IAE/E,OAAO;QACLY,YAAY;YACVC,MAAM;YACNlB,MAAM;QACR;QAEAkB,MAAMxB,oBAAAA,CAAKyB,MAAM,CACf,IACA3B,wCAD4C,AAC5CA,EAAyB,OAAO;YAC9BM,KAAKQ;YACL,GAAGT,KAAK;QACV,IACA;YAAEuB,aAAa;QAAM;QAEvBpB,MAAMN,oBAAAA,CAAK2B,QAAQ,CAACrB,MAAM;YAAEoB,aAAa;QAAM;IACjD;AACF,EAAE"}

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.js

@@ -56,8 +56,10 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useCardPreviewStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(cardPreviewClassNames.root, styles.root, state.root.className);
     if (state.logo) {
+        // eslint-disable-next-line react-hooks/immutability
         state.logo.className = (0, _react.mergeClasses)(cardPreviewClassNames.logo, styles.logo, state.logo.className);
     }
     return state;

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n    root: 'fui-CardPreview',\n    logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        [`> :not(.${cardPreviewClassNames.logo})`]: {\n            display: 'block',\n            height: '100%',\n            width: '100%'\n        }\n    },\n    logo: {\n        position: 'absolute',\n        bottom: '12px',\n        left: '12px',\n        width: '32px',\n        height: '32px'\n    }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n    if (state.logo) {\n        state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAIKE,qBAAqB;;;iCAuBQ;;;;uBA1BL,gBAAgB;AAG9C,8BAA8B;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAL,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgBjB,CAAC;AAGS,MAAMC,iCAAiCC,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGjB,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IAClG,IAAIF,KAAK,CAACZ,IAAI,EAAE;QACZY,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACC,qBAAqB,CAACE,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACtG;IACA,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n    root: 'fui-CardPreview',\n    logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        [`> :not(.${cardPreviewClassNames.logo})`]: {\n            display: 'block',\n            height: '100%',\n            width: '100%'\n        }\n    },\n    logo: {\n        position: 'absolute',\n        bottom: '12px',\n        left: '12px',\n        width: '32px',\n        height: '32px'\n    }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n    if (state.logo) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAIKE,qBAAqB;;;iCAuBQ;eAA7Ba;;;uBA1BwB,gBAAgB;AAG9C,8BAA8B;IACrCZ,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAL,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgBjB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAW,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGjB,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IAClG,IAAIF,KAAK,CAACZ,IAAI,EAAE;QACZ,oDAAA;QACAY,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACC,qBAAqB,CAACE,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACtG;IACA,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js

@@ -42,8 +42,10 @@ const useStyles = (0, _react.makeStyles)({
 const useCardPreviewStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(cardPreviewClassNames.root, styles.root, state.root.className);
     if (state.logo) {
+        // eslint-disable-next-line react-hooks/immutability
         state.logo.className = (0, _react.mergeClasses)(cardPreviewClassNames.logo, styles.logo, state.logo.className);
     }
     return state;

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n  root: 'fui-CardPreview',\n  logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n\n    [`> :not(.${cardPreviewClassNames.logo})`]: {\n      display: 'block',\n      height: '100%',\n      width: '100%',\n    },\n  },\n\n  logo: {\n    position: 'absolute',\n    bottom: '12px',\n    left: '12px',\n    width: '32px',\n    height: '32px',\n  },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n  if (state.logo) {\n    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","position","display","height","width","bottom","left","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaE,qBAAAA;;;IA4BAU,6BAAAA;;;;uBAlC4B,iBAAiB;AAMnD,8BAAgE;IACrET,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BG,MAAM;QACJG,UAAU;QAEV,CAAC,CAAC,QAAQ,EAAEJ,sBAAsBE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;YAC1CG,SAAS;YACTC,QAAQ;YACRC,OAAO;QACT;IACF;IAEAL,MAAM;QACJE,UAAU;QACVI,QAAQ;QACRC,MAAM;QACNF,OAAO;QACPD,QAAQ;IACV;AACF;AAKO,sCAAsC,CAACK;IAC5C;IAEA,MAAMC,SAAST;IACfQ,MAAMV,IAAI,CAACY,SAAS,OAAGd,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IAEjG,IAAIF,MAAMT,IAAI,EAAE;QACdS,MAAMT,IAAI,CAACW,SAAS,OAAGd,mBAAAA,EAAaC,sBAAsBE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACnG;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n  root: 'fui-CardPreview',\n  logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n\n    [`> :not(.${cardPreviewClassNames.logo})`]: {\n      display: 'block',\n      height: '100%',\n      width: '100%',\n    },\n  },\n\n  logo: {\n    position: 'absolute',\n    bottom: '12px',\n    left: '12px',\n    width: '32px',\n    height: '32px',\n  },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n  if (state.logo) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","position","display","height","width","bottom","left","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaE,qBAAAA;;;IA4BAU,6BAAAA;;;;uBAlC4B,iBAAiB;AAMnD,8BAAgE;IACrET,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BG,MAAM;QACJG,UAAU;QAEV,CAAC,CAAC,QAAQ,EAAEJ,sBAAsBE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;YAC1CG,SAAS;YACTC,QAAQ;YACRC,OAAO;QACT;IACF;IAEAL,MAAM;QACJE,UAAU;QACVI,QAAQ;QACRC,MAAM;QACNF,OAAO;QACPD,QAAQ;IACV;AACF;AAKO,sCAAsC,CAACK;IAC5C;IAEA,MAAMC,SAAST;IACf,oDAAoD;IACpDQ,MAAMV,IAAI,CAACY,SAAS,OAAGd,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IAEjG,IAAIF,MAAMT,IAAI,EAAE;QACd,oDAAoD;QACpDS,MAAMT,IAAI,CAACW,SAAS,OAAGd,mBAAAA,EAAaC,sBAAsBE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACnG;IAEA,OAAOF;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "9.6.0",
+  "version": "9.7.0",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -14,12 +14,12 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.13",
-    "@fluentui/react-text": "^9.6.15",
+    "@fluentui/react-tabster": "^9.26.15",
+    "@fluentui/react-text": "^9.6.17",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },