@fluentui/react-card 0.0.0-nightly-20230502-0418.1 → 0.0.0-nightly-20230503-0419.1

package/lib/components/CardHeader/index.js

@@ -0,0 +1,6 @@
+export * from './CardHeader';
+export * from './CardHeader.types';
+export * from './renderCardHeader';
+export * from './useCardHeader';
+export * from './useCardHeaderStyles.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/CardHeader/index.ts"],"sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/CardHeader/renderCardHeader.js

@@ -0,0 +1,13 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CardHeader.
+ */
+export const renderCardHeader_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.image && /*#__PURE__*/createElement(slots.image, slotProps.image), /*#__PURE__*/createElement(slots.header, slotProps.header), slots.description && /*#__PURE__*/createElement(slots.description, slotProps.description), slots.action && /*#__PURE__*/createElement(slots.action, slotProps.action));
+};
+//# sourceMappingURL=renderCardHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderCardHeader_unstable","state","slots","slotProps","root","image","header","description","action"],"sources":["../../../src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAA2B;EACnE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA8BE,KAAA;EAE3D,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,KAAK,iBAAIP,aAftB,CAeuBI,KAAA,CAAMG,KAAK,EAAKF,SAAA,CAAUE,KAAK,gBAChDP,aAhBN,CAgBOI,KAAA,CAAMI,MAAM,EAAKH,SAAA,CAAUG,MAAM,GACjCJ,KAAA,CAAMK,WAAW,iBAAIT,aAjB5B,CAiB6BI,KAAA,CAAMK,WAAW,EAAKJ,SAAA,CAAUI,WAAW,GACjEL,KAAA,CAAMM,MAAM,iBAAIV,aAlBvB,CAkBwBI,KAAA,CAAMM,MAAM,EAAKL,SAAA,CAAUK,MAAM;AAGzD"}

package/lib/components/CardHeader/useCardHeader.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { useCardContext_unstable } from '../Card/CardContext';
+import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
+/**
+ * Create the state required to render CardHeader.
+ *
+ * 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 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',
+      header: 'div',
+      description: 'div',
+      action: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props
+    }),
+    image: resolveShorthand(image),
+    header: resolveShorthand(header, {
+      required: true,
+      defaultProps: {
+        ref: headerRef,
+        id: referenceId
+      }
+    }),
+    description: resolveShorthand(description),
+    action: resolveShorthand(action)
+  };
+};
+//# sourceMappingURL=useCardHeader.js.map

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

@@ -0,0 +1 @@
+{"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/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.styles';\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,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAE/D,SAASC,uBAAuB,QAAQ;AACxC,SAASC,oBAAoB,QAAQ;AAErC;;;;;;;;;AASA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAwBC,GAAA,KAAiD;EAC9G,MAAM;IAAEC,KAAA;IAAOC,MAAA;IAAQC,WAAA;IAAaC;EAAM,CAAE,GAAGL,KAAA;EAE/C,MAAM;IACJM,mBAAA,EAAqB;MAAEC,WAAA;MAAaC;IAAc;EAAE,CACrD,GAAGX,uBAAA;EACJ,MAAMY,SAAA,GAAYhB,KAAA,CAAMiB,MAAM,CAAiB,IAAI;EAEnD,MAAMC,WAAA,GAAcf,KAAA,CAAME,oBAAA,CAAqBK,MAAM,EAAEI,WAAA;EAEvDd,KAAA,CAAMmB,SAAS,CAAC,MAAM;IACpB,IAAIT,MAAA,IAAUM,SAAA,CAAUI,OAAO,EAAE;MAC/B,MAAM;QAAEC;MAAE,CAAE,GAAGL,SAAA,CAAUI,OAAO;MAEhCL,cAAA,CAAeM,EAAA,GAAKA,EAAA,GAAKH,WAAW;IACtC;EACF,GAAG,CAACR,MAAA,EAAQK,cAAA,EAAgBG,WAAA,CAAY;EAExC,OAAO;IACLI,UAAA,EAAY;MACVC,IAAA,EAAM;MACNd,KAAA,EAAO;MACPC,MAAA,EAAQ;MACRC,WAAA,EAAa;MACbC,MAAA,EAAQ;IACV;IAEAW,IAAA,EAAMtB,qBAAA,CAAsB,OAAO;MACjCO,GAAA;MACA,GAAGD;IACL;IACAE,KAAA,EAAOP,gBAAA,CAAiBO,KAAA;IACxBC,MAAA,EAAQR,gBAAA,CAAiBQ,MAAA,EAAQ;MAC/Bc,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZjB,GAAA,EAAKQ,SAAA;QACLK,EAAA,EAAIP;MACN;IACF;IACAH,WAAA,EAAaT,gBAAA,CAAiBS,WAAA;IAC9BC,MAAA,EAAQV,gBAAA,CAAiBU,MAAA;EAC3B;AACF"}

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

@@ -0,0 +1,68 @@
+import { __styles, mergeClasses } from '@griffel/react';
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+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: {
+    mc9l5x: "ftuwxu6",
+    t21cq0: ["fql5097", "f6yss9k"],
+    Br312pm: "fwpfdsa",
+    Ijaq50: "fldnz9j"
+  },
+  header: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "f16hsg94"
+  },
+  description: {
+    Br312pm: "fd46tj4",
+    Ijaq50: "faunodf"
+  },
+  action: {
+    Frg6f3: ["f6yss9k", "fql5097"],
+    Br312pm: "fis13di",
+    Ijaq50: "fldnz9j"
+  }
+}, {
+  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.
+ */
+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(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.action) {
+    state.action.className = mergeClasses(cardHeaderClassNames.action, styles.action, state.action.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useCardHeaderStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"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/components/CardHeader/useCardHeaderStyles.styles.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;AAGzC;;;AAGA,OAAO,MAAMC,oBAAA,GAAwD;EACnEC,IAAA,EAAM;EACNC,KAAA,EAAO;EACPC,MAAA,EAAQ;EACRC,WAAA,EAAa;EACbC,MAAA,EAAQ;AACV;AAEA;;;AAGA,OAAO,MAAMC,iBAAA,GAAoB;EAC/BC,gBAAA,EAAkB;AACpB;AAEA,MAAMC,SAAA,gBAAYV,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,EA2BlB;AAEA;;;AAGA,OAAO,MAAMC,4BAAA,GAAgCC,KAAA,IAA4C;EACvF,MAAMC,MAAA,GAASb,SAAA;EACfY,KAAA,CAAMnB,IAAI,CAACqB,SAAS,GAAGvB,YAAA,CAAaC,oBAAA,CAAqBC,IAAI,EAAEoB,MAAA,CAAOpB,IAAI,EAAEmB,KAAA,CAAMnB,IAAI,CAACqB,SAAS;EAEhG,IAAIF,KAAA,CAAMlB,KAAK,EAAE;IACfkB,KAAA,CAAMlB,KAAK,CAACoB,SAAS,GAAGvB,YAAA,CAAaC,oBAAA,CAAqBE,KAAK,EAAEmB,MAAA,CAAOnB,KAAK,EAAEkB,KAAA,CAAMlB,KAAK,CAACoB,SAAS;EACtG;EAEA,IAAIF,KAAA,CAAMjB,MAAM,EAAE;IAChBiB,KAAA,CAAMjB,MAAM,CAACmB,SAAS,GAAGvB,YAAA,CAAaC,oBAAA,CAAqBG,MAAM,EAAEkB,MAAA,CAAOlB,MAAM,EAAEiB,KAAA,CAAMjB,MAAM,CAACmB,SAAS;EAC1G;EAEA,IAAIF,KAAA,CAAMhB,WAAW,EAAE;IACrBgB,KAAA,CAAMhB,WAAW,CAACkB,SAAS,GAAGvB,YAAA,CAC5BC,oBAAA,CAAqBI,WAAW,EAChCiB,MAAA,CAAOjB,WAAW,EAClBgB,KAAA,CAAMhB,WAAW,CAACkB,SAAS;EAE/B;EAEA,IAAIF,KAAA,CAAMf,MAAM,EAAE;IAChBe,KAAA,CAAMf,MAAM,CAACiB,SAAS,GAAGvB,YAAA,CAAaC,oBAAA,CAAqBK,MAAM,EAAEgB,MAAA,CAAOhB,MAAM,EAAEe,KAAA,CAAMf,MAAM,CAACiB,SAAS;EAC1G;EAEA,OAAOF,KAAA;AACT"}

package/lib/components/CardPreview/CardPreview.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useCardPreview_unstable } from './useCardPreview';
+import { renderCardPreview_unstable } from './renderCardPreview';
+import { useCardPreviewStyles_unstable } from './useCardPreviewStyles.styles';
+/**
+ * Component to render image previews of documents or articles in a Card component.
+ */
+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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCardPreview_unstable","renderCardPreview_unstable","useCardPreviewStyles_unstable","CardPreview","forwardRef","props","ref","state","displayName"],"sources":["../../../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.styles';\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,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAI9C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQP,uBAAA,CAAwBK,KAAA,EAAOC,GAAA;EAE7CJ,6BAAA,CAA8BK,KAAA;EAC9B,OAAON,0BAAA,CAA2BM,KAAA;AACpC;AAEAJ,WAAA,CAAYK,WAAW,GAAG"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CardPreview.types.js.map

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

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

package/lib/components/CardPreview/index.js

@@ -0,0 +1,6 @@
+export * from './CardPreview';
+export * from './CardPreview.types';
+export * from './renderCardPreview';
+export * from './useCardPreview';
+export * from './useCardPreviewStyles.styles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/components/CardPreview/index.ts"],"sourcesContent":["export * from './CardPreview';\nexport * from './CardPreview.types';\nexport * from './renderCardPreview';\nexport * from './useCardPreview';\nexport * from './useCardPreviewStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/CardPreview/renderCardPreview.js

@@ -0,0 +1,13 @@
+/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CardPreview.
+ */
+export const renderCardPreview_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlotsNext(state);
+  return /*#__PURE__*/createElement(slots.root, slotProps.root, slotProps.root.children, slots.logo && /*#__PURE__*/createElement(slots.logo, slotProps.logo));
+};
+//# sourceMappingURL=renderCardPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","getSlotsNext","renderCardPreview_unstable","state","slots","slotProps","root","children","logo"],"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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 } = getSlotsNext<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,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA+BE,KAAA;EAE5D,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BD,SAAA,CAAUC,IAAI,CAACC,QAAQ,EACvBH,KAAA,CAAMI,IAAI,iBAAIR,aAhBrB,CAgBsBI,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI;AAGnD"}

package/lib/components/CardPreview/useCardPreview.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
+import { useCardContext_unstable } from '../Card/CardContext';
+import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
+/**
+ * Create the state required to render CardPreview.
+ *
+ * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
+ * before being passed to renderCardPreview_unstable.
+ *
+ * @param props - props from this instance of CardPreview
+ * @param ref - reference to root HTMLElement of CardPreview
+ */
+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', {
+      ref: previewRef,
+      ...props
+    }),
+    logo: resolveShorthand(logo)
+  };
+};
+//# sourceMappingURL=useCardPreview.js.map

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

@@ -0,0 +1 @@
+{"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/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.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  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,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ;AAEvE,SAASC,uBAAuB,QAAQ;AACxC,SAASC,qBAAqB,QAAQ;AAEtC;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAM;IAAEC;EAAI,CAAE,GAAGF,KAAA;EAEjB,MAAM;IACJG,mBAAA,EAAqB;MAAEC,cAAA;MAAgBC,WAAA;MAAaC,iBAAA;MAAmBC;IAAc;EAAE,CACxF,GAAGV,uBAAA;EACJ,MAAMW,UAAA,GAAaZ,aAAA,CAAcK,GAAA,EAAKR,KAAA,CAAMgB,MAAM,CAAiB,IAAI;EAEvEhB,KAAA,CAAMiB,SAAS,CAAC,MAAM;IACpB,IAAIN,cAAA,IAAkBC,WAAA,EAAa;MACjC;IACF;IAEA,IAAIG,UAAA,CAAWG,OAAO,IAAIH,UAAA,CAAWG,OAAO,CAACC,UAAU,EAAE;MACvD,MAAMC,GAAA,GAAML,UAAA,CAAWG,OAAO,CAACC,UAAU,CAACE,aAAa,CAAoB,IAAGhB,qBAAA,CAAsBiB,IAAK,QAAO;MAEhH,IAAIF,GAAA,EAAK;QACP,MAAMG,SAAA,GAAYH,GAAA,CAAII,YAAY,CAAC;QACnC,MAAMC,eAAA,GAAkBL,GAAA,CAAII,YAAY,CAAC;QAEzC,IAAIC,eAAA,EAAiB;UACnBX,cAAA,CAAeW,eAAA;QACjB,OAAO,IAAIL,GAAA,CAAIM,GAAG,EAAE;UAClBb,iBAAA,CAAkBO,GAAA,CAAIM,GAAG;QAC3B,OAAO,IAAIH,SAAA,EAAW;UACpBV,iBAAA,CAAkBU,SAAA;QACpB;MACF;IACF;EACF,GAAG,CAACV,iBAAA,EAAmBF,cAAA,EAAgBI,UAAA,EAAYH,WAAA,EAAaE,cAAA,CAAe;EAE/E,OAAO;IACLa,UAAA,EAAY;MACVL,IAAA,EAAM;MACNb,IAAA,EAAM;IACR;IAEAa,IAAA,EAAMrB,qBAAA,CAAsB,OAAO;MACjCO,GAAA,EAAKO,UAAA;MACL,GAAGR;IACL;IACAE,IAAA,EAAMP,gBAAA,CAAiBO,IAAA;EACzB;AACF"}

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

@@ -0,0 +1,37 @@
+import { __styles, mergeClasses } from '@griffel/react';
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+export const cardPreviewClassNames = {
+  root: 'fui-CardPreview',
+  logo: 'fui-CardPreview__logo'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    qhf8xq: "f10pi13n",
+    pnb5jt: "f1rzl30s",
+    Elg2ur: "f1chxnfo",
+    B184ckt: "f17xb19f"
+  },
+  logo: {
+    qhf8xq: "f1euv43f",
+    B5kzvoi: "f1gcvs1y",
+    oyh7mz: ["f1t6tvco", "ffrfxm3"],
+    a9b677: "f1szoe96",
+    Bqenvij: "f1d2rq10"
+  }
+}, {
+  d: [".f10pi13n{position:relative;}", ".f1rzl30s>:not(.fui-CardPreview__logo){display:block;}", ".f1chxnfo>:not(.fui-CardPreview__logo){height:100%;}", ".f17xb19f>:not(.fui-CardPreview__logo){width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
+});
+/**
+ * Apply styling to the CardPreview slots based on the state.
+ */
+export const useCardPreviewStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
+  if (state.logo) {
+    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useCardPreviewStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","pnb5jt","Elg2ur","B184ckt","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"sources":["../../../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n  root: 'fui-CardPreview',\n  logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n\n    [`> :not(.${cardPreviewClassNames.logo})`]: {\n      display: 'block',\n      height: '100%',\n      width: '100%',\n    },\n  },\n\n  logo: {\n    position: 'absolute',\n    bottom: '12px',\n    left: '12px',\n    width: '32px',\n    height: '32px',\n  },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n  if (state.logo) {\n    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n  }\n\n  return state;\n};\n"],"mappings":"AACA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AAGzC;;;AAGA,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,IAAA,EAAM;AACR;AAEA,MAAMC,SAAA,gBAAYL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAL,IAAA;IAAAE,MAAA;IAAAI,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAkBlB;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,MAAA,GAASZ,SAAA;EACfW,KAAA,CAAMb,IAAI,CAACe,SAAS,GAAGjB,YAAA,CAAaC,qBAAA,CAAsBC,IAAI,EAAEc,MAAA,CAAOd,IAAI,EAAEa,KAAA,CAAMb,IAAI,CAACe,SAAS;EAEjG,IAAIF,KAAA,CAAMZ,IAAI,EAAE;IACdY,KAAA,CAAMZ,IAAI,CAACc,SAAS,GAAGjB,YAAA,CAAaC,qBAAA,CAAsBE,IAAI,EAAEa,MAAA,CAAOb,IAAI,EAAEY,KAAA,CAAMZ,IAAI,CAACc,SAAS;EACnG;EAEA,OAAOF,KAAA;AACT"}

package/lib/index.js

@@ -0,0 +1,6 @@
+export { Card, cardClassNames, cardCSSVars, renderCard_unstable, useCardStyles_unstable, useCard_unstable } from './Card';
+export { CardFooter, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable } from './CardFooter';
+export { CardHeader, cardHeaderClassNames, cardHeaderCSSVars, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable } from './CardHeader';
+export { CardPreview, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable } from './CardPreview';
+export { CardProvider, useCardContext_unstable } from './Card';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Card","cardClassNames","cardCSSVars","renderCard_unstable","useCardStyles_unstable","useCard_unstable","CardFooter","cardFooterClassNames","renderCardFooter_unstable","useCardFooterStyles_unstable","useCardFooter_unstable","CardHeader","cardHeaderClassNames","cardHeaderCSSVars","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCardHeader_unstable","CardPreview","cardPreviewClassNames","renderCardPreview_unstable","useCardPreviewStyles_unstable","useCardPreview_unstable","CardProvider","useCardContext_unstable"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  Card,\n  cardClassNames,\n  cardCSSVars,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState, CardOnSelectionChangeEvent } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassNames,\n  cardHeaderCSSVars,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\nexport { CardProvider, useCardContext_unstable } from './Card';\nexport type { CardContextValue } from './Card';\n"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,WAAW,EACXC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QACX;AAEP,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB;AAEP,SACEC,UAAU,EACVC,oBAAoB,EACpBC,iBAAiB,EACjBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB;AAEP,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB;AAEP,SAASC,YAAY,EAAEC,uBAAuB,QAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-card",
-  "version": "0.0.0-nightly-20230502-0418.1",
+  "version": "0.0.0-nightly-20230503-0419.1",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
@@ -29,19 +29,19 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230503-0419.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-button": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/react-button": "0.0.0-nightly-20230503-0419.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230503-0419.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230503-0419.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },