@fluentui/react-card 9.0.0-beta.2 → 9.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (138) hide show
  1. package/CHANGELOG.json +359 -1
  2. package/CHANGELOG.md +77 -2
  3. package/README.md +3 -1
  4. package/Spec.md +523 -0
  5. package/assets/Card.png +0 -0
  6. package/assets/CardHeader.png +0 -0
  7. package/assets/CardPreview.png +0 -0
  8. package/assets/context-interaction-keyboard.png +0 -0
  9. package/assets/context-interaction-mouse.png +0 -0
  10. package/assets/context-narrator.png +0 -0
  11. package/assets/disabled-narrator.png +0 -0
  12. package/assets/disabled.png +0 -0
  13. package/assets/interactive-interaction-keyboard.png +0 -0
  14. package/assets/interactive-interaction-mouse.png +0 -0
  15. package/assets/interactive-narrator.png +0 -0
  16. package/assets/non-interactive-interaction-keyboard.png +0 -0
  17. package/assets/non-interactive-interaction-mouse.png +0 -0
  18. package/assets/non-interactive-narrator.png +0 -0
  19. package/assets/non-interactive-selectable-interaction-keyboard.png +0 -0
  20. package/assets/non-interactive-selectable-interaction-mouse.png +0 -0
  21. package/assets/selectable-interaction-keyboard.png +0 -0
  22. package/assets/selectable-interaction-mouse.png +0 -0
  23. package/assets/selectable-narrator.png +0 -0
  24. package/dist/react-card.d.ts +43 -49
  25. package/lib/components/Card/Card.d.ts +1 -1
  26. package/lib/components/Card/Card.js +8 -8
  27. package/lib/components/Card/Card.js.map +1 -1
  28. package/lib/components/Card/Card.types.d.ts +4 -5
  29. package/lib/components/Card/renderCard.d.ts +1 -1
  30. package/lib/components/Card/renderCard.js +7 -7
  31. package/lib/components/Card/renderCard.js.map +1 -1
  32. package/lib/components/Card/useCard.d.ts +3 -3
  33. package/lib/components/Card/useCard.js +12 -11
  34. package/lib/components/Card/useCard.js.map +1 -1
  35. package/lib/components/Card/useCardStyles.d.ts +2 -1
  36. package/lib/components/Card/useCardStyles.js +21 -13
  37. package/lib/components/Card/useCardStyles.js.map +1 -1
  38. package/lib/components/CardFooter/CardFooter.js +7 -7
  39. package/lib/components/CardFooter/CardFooter.js.map +1 -1
  40. package/lib/components/CardFooter/CardFooter.types.d.ts +3 -3
  41. package/lib/components/CardFooter/renderCardFooter.d.ts +1 -1
  42. package/lib/components/CardFooter/renderCardFooter.js +8 -8
  43. package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
  44. package/lib/components/CardFooter/useCardFooter.d.ts +4 -8
  45. package/lib/components/CardFooter/useCardFooter.js +10 -13
  46. package/lib/components/CardFooter/useCardFooter.js.map +1 -1
  47. package/lib/components/CardFooter/useCardFooterStyles.d.ts +2 -1
  48. package/lib/components/CardFooter/useCardFooterStyles.js +9 -7
  49. package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
  50. package/lib/components/CardHeader/CardHeader.js +7 -7
  51. package/lib/components/CardHeader/CardHeader.js.map +1 -1
  52. package/lib/components/CardHeader/CardHeader.types.d.ts +8 -8
  53. package/lib/components/CardHeader/renderCardHeader.d.ts +1 -1
  54. package/lib/components/CardHeader/renderCardHeader.js +12 -8
  55. package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
  56. package/lib/components/CardHeader/useCardHeader.d.ts +4 -5
  57. package/lib/components/CardHeader/useCardHeader.js +14 -13
  58. package/lib/components/CardHeader/useCardHeader.js.map +1 -1
  59. package/lib/components/CardHeader/useCardHeaderStyles.d.ts +2 -1
  60. package/lib/components/CardHeader/useCardHeaderStyles.js +9 -7
  61. package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  62. package/lib/components/CardPreview/CardPreview.js +7 -7
  63. package/lib/components/CardPreview/CardPreview.js.map +1 -1
  64. package/lib/components/CardPreview/CardPreview.types.d.ts +3 -3
  65. package/lib/components/CardPreview/renderCardPreview.d.ts +1 -1
  66. package/lib/components/CardPreview/renderCardPreview.js +8 -8
  67. package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
  68. package/lib/components/CardPreview/useCardPreview.d.ts +4 -8
  69. package/lib/components/CardPreview/useCardPreview.js +10 -13
  70. package/lib/components/CardPreview/useCardPreview.js.map +1 -1
  71. package/lib/components/CardPreview/useCardPreviewStyles.d.ts +2 -1
  72. package/lib/components/CardPreview/useCardPreviewStyles.js +6 -5
  73. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  74. package/lib-commonjs/Card.js +1 -1
  75. package/lib-commonjs/CardFooter.js +1 -1
  76. package/lib-commonjs/CardHeader.js +1 -1
  77. package/lib-commonjs/CardPreview.js +1 -1
  78. package/lib-commonjs/components/Card/Card.d.ts +1 -1
  79. package/lib-commonjs/components/Card/Card.js +9 -9
  80. package/lib-commonjs/components/Card/Card.js.map +1 -1
  81. package/lib-commonjs/components/Card/Card.types.d.ts +4 -5
  82. package/lib-commonjs/components/Card/index.js +1 -1
  83. package/lib-commonjs/components/Card/renderCard.d.ts +1 -1
  84. package/lib-commonjs/components/Card/renderCard.js +11 -12
  85. package/lib-commonjs/components/Card/renderCard.js.map +1 -1
  86. package/lib-commonjs/components/Card/useCard.d.ts +3 -3
  87. package/lib-commonjs/components/Card/useCard.js +15 -15
  88. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  89. package/lib-commonjs/components/Card/useCardStyles.d.ts +2 -1
  90. package/lib-commonjs/components/Card/useCardStyles.js +26 -16
  91. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  92. package/lib-commonjs/components/CardFooter/CardFooter.js +8 -8
  93. package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
  94. package/lib-commonjs/components/CardFooter/CardFooter.types.d.ts +3 -3
  95. package/lib-commonjs/components/CardFooter/index.js +1 -1
  96. package/lib-commonjs/components/CardFooter/renderCardFooter.d.ts +1 -1
  97. package/lib-commonjs/components/CardFooter/renderCardFooter.js +12 -14
  98. package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
  99. package/lib-commonjs/components/CardFooter/useCardFooter.d.ts +4 -8
  100. package/lib-commonjs/components/CardFooter/useCardFooter.js +14 -18
  101. package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
  102. package/lib-commonjs/components/CardFooter/useCardFooterStyles.d.ts +2 -1
  103. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +13 -11
  104. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
  105. package/lib-commonjs/components/CardHeader/CardHeader.js +8 -8
  106. package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
  107. package/lib-commonjs/components/CardHeader/CardHeader.types.d.ts +8 -8
  108. package/lib-commonjs/components/CardHeader/index.js +1 -1
  109. package/lib-commonjs/components/CardHeader/renderCardHeader.d.ts +1 -1
  110. package/lib-commonjs/components/CardHeader/renderCardHeader.js +16 -14
  111. package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
  112. package/lib-commonjs/components/CardHeader/useCardHeader.d.ts +4 -5
  113. package/lib-commonjs/components/CardHeader/useCardHeader.js +19 -19
  114. package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
  115. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.d.ts +2 -1
  116. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +14 -12
  117. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  118. package/lib-commonjs/components/CardPreview/CardPreview.js +8 -8
  119. package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
  120. package/lib-commonjs/components/CardPreview/CardPreview.types.d.ts +3 -3
  121. package/lib-commonjs/components/CardPreview/index.js +1 -1
  122. package/lib-commonjs/components/CardPreview/renderCardPreview.d.ts +1 -1
  123. package/lib-commonjs/components/CardPreview/renderCardPreview.js +12 -14
  124. package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
  125. package/lib-commonjs/components/CardPreview/useCardPreview.d.ts +4 -8
  126. package/lib-commonjs/components/CardPreview/useCardPreview.js +14 -18
  127. package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
  128. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.d.ts +2 -1
  129. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +10 -9
  130. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  131. package/lib-commonjs/index.js +1 -1
  132. package/package.json +11 -13
  133. package/lib/common/isConformant.d.ts +0 -4
  134. package/lib/common/isConformant.js +0 -11
  135. package/lib/common/isConformant.js.map +0 -1
  136. package/lib-commonjs/common/isConformant.d.ts +0 -4
  137. package/lib-commonjs/common/isConformant.js +0 -22
  138. package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1,28 +1,30 @@
1
- import { __styles, mergeClasses } from '@fluentui/react-make-styles';
1
+ import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
+ export const cardFooterClassName = 'fui-CardFooter';
2
3
  /**
3
4
  * Styles for the root slot
4
5
  */
5
6
 
6
- var useStyles = /*#__PURE__*/__styles({
7
+ const useStyles = /*#__PURE__*/__styles({
7
8
  "root": {
8
9
  "mc9l5x": "f22iagw",
9
10
  "Beiy3e4": "f1063pyq",
10
- "rmohyg": "fsbu5mz"
11
+ "i8kkvl": "f4akndk",
12
+ "Belr9w4": "fe5j3v"
11
13
  },
12
14
  "action": {
13
15
  "Frg6f3": ["fcgxt0o", "f1ujusj6"]
14
16
  }
15
17
  }, {
16
- "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;}"]
18
+ "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;}"]
17
19
  });
18
20
  /**
19
21
  * Apply styling to the CardFooter slots based on the state
20
22
  */
21
23
 
22
24
 
23
- export var useCardFooterStyles = function (state) {
24
- var styles = useStyles();
25
- state.root.className = mergeClasses(styles.root, state.root.className);
25
+ export const useCardFooterStyles_unstable = state => {
26
+ const styles = useStyles();
27
+ state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
26
28
 
27
29
  if (state.action) {
28
30
  state.action.className = mergeClasses(styles.action, state.action.className);
@@ -1 +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":""}
1
+ {"version":3,"sources":["../../../src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,MAAM,CAAC,IAA7B,EAAmC,KAAK,CAAC,IAAN,CAAW,SAA9C,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":""}
@@ -1,15 +1,15 @@
1
1
  import * as React from 'react';
2
- import { useCardHeader } from './useCardHeader';
3
- import { renderCardHeader } from './renderCardHeader';
4
- import { useCardHeaderStyles } from './useCardHeaderStyles';
2
+ import { useCardHeader_unstable } from './useCardHeader';
3
+ import { renderCardHeader_unstable } from './renderCardHeader';
4
+ import { useCardHeaderStyles_unstable } from './useCardHeaderStyles';
5
5
  /**
6
6
  * Component to render an image, text and an action in a Card component.
7
7
  */
8
8
 
9
- export var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
10
- var state = useCardHeader(props, ref);
11
- useCardHeaderStyles(state);
12
- return renderCardHeader(state);
9
+ export const CardHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
10
+ const state = useCardHeader_unstable(props, ref);
11
+ useCardHeaderStyles_unstable(state);
12
+ return renderCardHeader_unstable(state);
13
13
  });
14
14
  CardHeader.displayName = 'CardHeader';
15
15
  //# sourceMappingURL=CardHeader.js.map
@@ -1 +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":""}
1
+ {"version":3,"sources":["../../../src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AACA,SAAS,4BAAT,QAA6C,uBAA7C;AAIA;;AAEG;;AACH,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,sBAAsB,CAAC,KAAD,EAAQ,GAAR,CAApC;AAEA,EAAA,4BAA4B,CAAC,KAAD,CAA5B;AACA,SAAO,yBAAyB,CAAC,KAAD,CAAhC;AACD,CAL+D,CAAzD;AAOP,UAAU,CAAC,WAAX,GAAyB,YAAzB","sourceRoot":""}
@@ -1,16 +1,16 @@
1
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
2
  export declare type CardHeaderSlots = {
3
- root: IntrinsicShorthandProps<'div'>;
4
- image: IntrinsicShorthandProps<'div'>;
5
- content?: IntrinsicShorthandProps<'div'>;
6
- header: IntrinsicShorthandProps<'span'>;
7
- description: IntrinsicShorthandProps<'span'>;
8
- action?: IntrinsicShorthandProps<'div'>;
3
+ root: Slot<'div'>;
4
+ image: Slot<'div'>;
5
+ content?: Slot<'div'>;
6
+ header: Slot<'span'>;
7
+ description: Slot<'span'>;
8
+ action?: Slot<'div'>;
9
9
  };
10
10
  /**
11
11
  * CardHeader props
12
12
  */
13
- export declare type CardHeaderProps = ComponentProps<CardHeaderSlots>;
13
+ export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
14
14
  /**
15
15
  * State used in rendering CardHeader
16
16
  */
@@ -2,4 +2,4 @@ import type { CardHeaderState } from './CardHeader.types';
2
2
  /**
3
3
  * Render the final JSX of CardHeader
4
4
  */
5
- export declare const renderCardHeader: (state: CardHeaderState) => JSX.Element;
5
+ export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;
@@ -1,16 +1,20 @@
1
- import { __assign } from "tslib";
2
1
  import * as React from 'react';
3
2
  import { getSlots } from '@fluentui/react-utilities';
4
- import { cardHeaderShorthandProps } from './useCardHeader';
5
3
  /**
6
4
  * Render the final JSX of CardHeader
7
5
  */
8
6
 
9
- export var renderCardHeader = function (state) {
10
- var _a = getSlots(state, cardHeaderShorthandProps),
11
- slots = _a.slots,
12
- slotProps = _a.slotProps;
13
-
14
- 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)));
7
+ export const renderCardHeader_unstable = state => {
8
+ const {
9
+ slots,
10
+ slotProps
11
+ } = getSlots(state);
12
+ return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
13
+ }, /*#__PURE__*/React.createElement(slots.image, { ...slotProps.image
14
+ }), slots.content && /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
15
+ }, /*#__PURE__*/React.createElement(slots.header, { ...slotProps.header
16
+ }), /*#__PURE__*/React.createElement(slots.description, { ...slotProps.description
17
+ })), slots.action && /*#__PURE__*/React.createElement(slots.action, { ...slotProps.action
18
+ }));
15
19
  };
16
20
  //# sourceMappingURL=renderCardHeader.js.map
@@ -1 +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":""}
1
+ {"version":3,"sources":["../../../src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAA2B;AAClE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAkB,KAAlB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEG,KAAK,CAAC,OAAN,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAlB,CAFF,CAHJ,EAQG,KAAK,CAAC,MAAN,iBAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,CARnB,CADF;AAYD,CAfM","sourceRoot":""}
@@ -1,13 +1,12 @@
1
1
  import * as React from 'react';
2
- import type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader.types';
3
- export declare const cardHeaderShorthandProps: Array<keyof CardHeaderSlots>;
2
+ import type { CardHeaderProps, CardHeaderState } from './CardHeader.types';
4
3
  /**
5
4
  * Create the state required to render CardHeader.
6
5
  *
7
- * The returned state can be modified with hooks such as useCardHeaderStyles,
8
- * before being passed to renderCardHeader.
6
+ * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
7
+ * before being passed to renderCardHeader_unstable.
9
8
  *
10
9
  * @param props - props from this instance of CardHeader
11
10
  * @param ref - reference to root HTMLElement of CardHeader
12
11
  */
13
- export declare const useCardHeader: (props: CardHeaderProps, ref: React.Ref<HTMLElement>) => CardHeaderState;
12
+ export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React.Ref<HTMLElement>) => CardHeaderState;
@@ -1,23 +1,23 @@
1
- import { __assign } from "tslib";
2
1
  import * as React from 'react';
3
2
  import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
4
- export var cardHeaderShorthandProps = ['root', 'image', 'content', 'header', 'description', 'action'];
5
3
  /**
6
4
  * Create the state required to render CardHeader.
7
5
  *
8
- * The returned state can be modified with hooks such as useCardHeaderStyles,
9
- * before being passed to renderCardHeader.
6
+ * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
7
+ * before being passed to renderCardHeader_unstable.
10
8
  *
11
9
  * @param props - props from this instance of CardHeader
12
10
  * @param ref - reference to root HTMLElement of CardHeader
13
11
  */
14
12
 
15
- export var useCardHeader = function (props, ref) {
16
- var image = props.image,
17
- content = props.content,
18
- header = props.header,
19
- description = props.description,
20
- action = props.action;
13
+ export const useCardHeader_unstable = (props, ref) => {
14
+ const {
15
+ image,
16
+ content,
17
+ header,
18
+ description,
19
+ action
20
+ } = props;
21
21
  return {
22
22
  components: {
23
23
  root: 'div',
@@ -27,9 +27,10 @@ export var useCardHeader = function (props, ref) {
27
27
  description: React.Fragment,
28
28
  action: 'div'
29
29
  },
30
- root: getNativeElementProps('div', __assign({
31
- ref: ref
32
- }, props)),
30
+ root: getNativeElementProps('div', {
31
+ ref,
32
+ ...props
33
+ }),
33
34
  image: resolveShorthand(image, {
34
35
  required: true
35
36
  }),
@@ -1 +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":""}
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;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;AAC7G,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,OAAT;AAAkB,IAAA,MAAlB;AAA0B,IAAA,WAA1B;AAAuC,IAAA;AAAvC,MAAkD,KAAxD;AAEA,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,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,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":""}
@@ -1,5 +1,6 @@
1
1
  import type { CardHeaderState } from './CardHeader.types';
2
+ export declare const cardHeaderClassName = "fui-CardHeader";
2
3
  /**
3
4
  * Apply styling to the CardHeader slots based on the state
4
5
  */
5
- export declare const useCardHeaderStyles: (state: CardHeaderState) => CardHeaderState;
6
+ export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;
@@ -1,14 +1,16 @@
1
- import { __styles, mergeClasses } from '@fluentui/react-make-styles';
1
+ import { __styles, mergeClasses, shorthands } from '@griffel/react';
2
+ export const cardHeaderClassName = 'fui-CardHeader';
2
3
  /**
3
4
  * Styles for the root slot
4
5
  */
5
6
 
6
- var useStyles = /*#__PURE__*/__styles({
7
+ const useStyles = /*#__PURE__*/__styles({
7
8
  "root": {
8
9
  "mc9l5x": "f22iagw",
9
10
  "Beiy3e4": "f1063pyq",
10
11
  "Bt984gj": "f122n59",
11
- "rmohyg": "fsbu5mz",
12
+ "i8kkvl": "f4akndk",
13
+ "Belr9w4": "fe5j3v",
12
14
  "Bqenvij": "f1d2rq10"
13
15
  },
14
16
  "image": {
@@ -31,16 +33,16 @@ var useStyles = /*#__PURE__*/__styles({
31
33
  "Bn3e79g": "f1con4nn"
32
34
  }
33
35
  }, {
34
- "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%;}"]
36
+ "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;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-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%;}"]
35
37
  });
36
38
  /**
37
39
  * Apply styling to the CardHeader slots based on the state
38
40
  */
39
41
 
40
42
 
41
- export var useCardHeaderStyles = function (state) {
42
- var styles = useStyles();
43
- state.root.className = mergeClasses(styles.root, state.root.className);
43
+ export const useCardHeaderStyles_unstable = state => {
44
+ const styles = useStyles();
45
+ state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);
44
46
 
45
47
  if (state.image) {
46
48
  state.image.className = mergeClasses(styles.image, state.image.className);
@@ -1 +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":""}
1
+ {"version":3,"sources":["../../../src/components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,mBAAmB,GAAG,gBAA5B;AAEP;;AAEG;;AACH,MAAM,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;AAAA,EAAlB;AAqCA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,mBAAD,EAAsB,MAAM,CAAC,IAA7B,EAAmC,KAAK,CAAC,IAAN,CAAW,SAA9C,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":""}
@@ -1,15 +1,15 @@
1
1
  import * as React from 'react';
2
- import { useCardPreview } from './useCardPreview';
3
- import { renderCardPreview } from './renderCardPreview';
4
- import { useCardPreviewStyles } from './useCardPreviewStyles';
2
+ import { useCardPreview_unstable } from './useCardPreview';
3
+ import { renderCardPreview_unstable } from './renderCardPreview';
4
+ import { useCardPreviewStyles_unstable } from './useCardPreviewStyles';
5
5
  /**
6
6
  * Component to render image previews of documents or articles in a Card component.
7
7
  */
8
8
 
9
- export var CardPreview = /*#__PURE__*/React.forwardRef(function (props, ref) {
10
- var state = useCardPreview(props, ref);
11
- useCardPreviewStyles(state);
12
- return renderCardPreview(state);
9
+ export const CardPreview = /*#__PURE__*/React.forwardRef((props, ref) => {
10
+ const state = useCardPreview_unstable(props, ref);
11
+ useCardPreviewStyles_unstable(state);
12
+ return renderCardPreview_unstable(state);
13
13
  });
14
14
  CardPreview.displayName = 'CardPreview';
15
15
  //# sourceMappingURL=CardPreview.js.map
@@ -1 +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":""}
1
+ {"version":3,"sources":["../../../src/components/CardPreview/CardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAChG,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;AAEA,EAAA,6BAA6B,CAAC,KAAD,CAA7B;AACA,SAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","sourceRoot":""}
@@ -1,7 +1,7 @@
1
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
2
  export declare type CardPreviewSlots = {
3
- root: IntrinsicShorthandProps<'div'>;
4
- logo?: IntrinsicShorthandProps<'div'>;
3
+ root: Slot<'div'>;
4
+ logo?: Slot<'div'>;
5
5
  };
6
6
  /**
7
7
  * CardPreview props
@@ -2,4 +2,4 @@ import type { CardPreviewState } from './CardPreview.types';
2
2
  /**
3
3
  * Render the final JSX of CardPreview
4
4
  */
5
- export declare const renderCardPreview: (state: CardPreviewState) => JSX.Element;
5
+ export declare const renderCardPreview_unstable: (state: CardPreviewState) => JSX.Element;
@@ -1,16 +1,16 @@
1
- import { __assign } from "tslib";
2
1
  import * as React from 'react';
3
2
  import { getSlots } from '@fluentui/react-utilities';
4
- import { cardPreviewShorthandProps } from './useCardPreview';
5
3
  /**
6
4
  * Render the final JSX of CardPreview
7
5
  */
8
6
 
9
- export var renderCardPreview = function (state) {
10
- var _a = getSlots(state, cardPreviewShorthandProps),
11
- slots = _a.slots,
12
- slotProps = _a.slotProps;
13
-
14
- return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), slotProps.root.children, /*#__PURE__*/React.createElement(slots.logo, __assign({}, slotProps.logo)));
7
+ export const renderCardPreview_unstable = state => {
8
+ const {
9
+ slots,
10
+ slotProps
11
+ } = getSlots(state);
12
+ return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
13
+ }, slotProps.root.children, slots.logo && /*#__PURE__*/React.createElement(slots.logo, { ...slotProps.logo
14
+ }));
15
15
  };
16
16
  //# sourceMappingURL=renderCardPreview.js.map
@@ -1 +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":""}
1
+ {"version":3,"sources":["../../../src/components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,CADF;AAMD,CATM","sourceRoot":""}
@@ -1,16 +1,12 @@
1
1
  import * as React from 'react';
2
- import type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview.types';
3
- /**
4
- * Array of all shorthand properties listed in CardPreviewShorthandProps
5
- */
6
- export declare const cardPreviewShorthandProps: Array<keyof CardPreviewSlots>;
2
+ import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
7
3
  /**
8
4
  * Create the state required to render CardPreview.
9
5
  *
10
- * The returned state can be modified with hooks such as useCardPreviewStyles,
11
- * before being passed to renderCardPreview.
6
+ * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
7
+ * before being passed to renderCardPreview_unstable.
12
8
  *
13
9
  * @param props - props from this instance of CardPreview
14
10
  * @param ref - reference to root HTMLElement of CardPreview
15
11
  */
16
- export declare const useCardPreview: (props: CardPreviewProps, ref: React.Ref<HTMLElement>) => CardPreviewState;
12
+ export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React.Ref<HTMLElement>) => CardPreviewState;
@@ -1,30 +1,27 @@
1
- import { __assign } from "tslib";
2
1
  import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
3
- /**
4
- * Array of all shorthand properties listed in CardPreviewShorthandProps
5
- */
6
-
7
- export var cardPreviewShorthandProps = ['root', 'logo'];
8
2
  /**
9
3
  * Create the state required to render CardPreview.
10
4
  *
11
- * The returned state can be modified with hooks such as useCardPreviewStyles,
12
- * before being passed to renderCardPreview.
5
+ * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
6
+ * before being passed to renderCardPreview_unstable.
13
7
  *
14
8
  * @param props - props from this instance of CardPreview
15
9
  * @param ref - reference to root HTMLElement of CardPreview
16
10
  */
17
11
 
18
- export var useCardPreview = function (props, ref) {
19
- var logo = props.logo;
12
+ export const useCardPreview_unstable = (props, ref) => {
13
+ const {
14
+ logo
15
+ } = props;
20
16
  return {
21
17
  components: {
22
18
  root: 'div',
23
19
  logo: 'div'
24
20
  },
25
- root: getNativeElementProps('div', __assign({
26
- ref: ref
27
- }, props)),
21
+ root: getNativeElementProps('div', {
22
+ ref,
23
+ ...props
24
+ }),
28
25
  logo: resolveShorthand(logo)
29
26
  };
30
27
  };
@@ -1 +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":""}
1
+ {"version":3,"sources":["../../../src/components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,QAAM;AAAE,IAAA;AAAF,MAAW,KAAjB;AACA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD;AAVjB,GAAP;AAYD,CAdM","sourceRoot":""}
@@ -1,5 +1,6 @@
1
1
  import type { CardPreviewState } from './CardPreview.types';
2
+ export declare const cardPreviewClassName = "fui-CardPreview";
2
3
  /**
3
4
  * Apply styling to the CardPreview slots based on the state
4
5
  */
5
- export declare const useCardPreviewStyles: (state: CardPreviewState) => CardPreviewState;
6
+ export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
@@ -1,9 +1,10 @@
1
- import { __styles, mergeClasses } from '@fluentui/react-make-styles';
1
+ import { shorthands, __styles, mergeClasses } from '@griffel/react';
2
+ export const cardPreviewClassName = 'fui-CardPreview';
2
3
  /**
3
4
  * Styles for the root slot
4
5
  */
5
6
 
6
- var useStyles = /*#__PURE__*/__styles({
7
+ const useStyles = /*#__PURE__*/__styles({
7
8
  "root": {
8
9
  "qhf8xq": "f10pi13n",
9
10
  "B6of3ja": "f1hu3pq6",
@@ -28,9 +29,9 @@ var useStyles = /*#__PURE__*/__styles({
28
29
  */
29
30
 
30
31
 
31
- export var useCardPreviewStyles = function (state) {
32
- var styles = useStyles();
33
- state.root.className = mergeClasses('fluentui-react-card-preview', styles.root, state.root.className);
32
+ export const useCardPreviewStyles_unstable = state => {
33
+ const styles = useStyles();
34
+ state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);
34
35
 
35
36
  if (state.logo) {
36
37
  state.logo.className = mergeClasses(styles.logo, state.logo.className);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CardPreview/useCardPreviewStyles.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,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,6BAAD,EAAgC,MAAM,CAAC,IAAvC,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourceRoot":""}
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./components/Card/index"), exports);
10
10
  //# sourceMappingURL=Card.js.map
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./components/CardFooter/index"), exports);
10
10
  //# sourceMappingURL=CardFooter.js.map
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./components/CardHeader/index"), exports);
10
10
  //# sourceMappingURL=CardHeader.js.map
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./components/CardPreview/index"), exports);
10
10
  //# sourceMappingURL=CardPreview.js.map
@@ -1,6 +1,6 @@
1
1
  import type { CardProps } from './Card.types';
2
2
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
3
  /**
4
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
4
+ * A card provides scaffolding for hosting actions and content for a single topic.
5
5
  */
6
6
  export declare const Card: ForwardRefComponent<CardProps>;
@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.Card = void 0;
7
7
 
8
- var React = /*#__PURE__*/require("react");
8
+ const React = /*#__PURE__*/require("react");
9
9
 
10
- var useCard_1 = /*#__PURE__*/require("./useCard");
10
+ const useCard_1 = /*#__PURE__*/require("./useCard");
11
11
 
12
- var renderCard_1 = /*#__PURE__*/require("./renderCard");
12
+ const renderCard_1 = /*#__PURE__*/require("./renderCard");
13
13
 
14
- var useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
14
+ const useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
15
15
  /**
16
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
16
+ * A card provides scaffolding for hosting actions and content for a single topic.
17
17
  */
18
18
 
19
19
 
20
- exports.Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
21
- var state = useCard_1.useCard(props, ref);
22
- useCardStyles_1.useCardStyles(state);
23
- return renderCard_1.renderCard(state);
20
+ exports.Card = /*#__PURE__*/React.forwardRef((props, ref) => {
21
+ const state = useCard_1.useCard_unstable(props, ref);
22
+ useCardStyles_1.useCardStyles_unstable(state);
23
+ return renderCard_1.renderCard_unstable(state);
24
24
  });
25
25
  exports.Card.displayName = 'Card';
26
26
  //# sourceMappingURL=Card.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9E,MAAM,KAAK,GAAG,SAAA,CAAA,OAAA,CAAQ,KAAR,EAAe,GAAf,CAAd;AAEA,EAAA,eAAA,CAAA,aAAA,CAAc,KAAd;AACA,SAAO,YAAA,CAAA,UAAA,CAAW,KAAX,CAAP;AACD,CALmD,CAAvC;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,SAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB,GAAxB,CAAd;AAEA,EAAA,eAAA,CAAA,sBAAA,CAAuB,KAAvB;AACA,SAAO,YAAA,CAAA,mBAAA,CAAoB,KAApB,CAAP;AACD,CALmD,CAAvC;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourceRoot":""}
@@ -1,13 +1,12 @@
1
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
2
  export declare type CardSlots = {
3
- root: IntrinsicShorthandProps<'div'>;
3
+ root: Slot<'div'>;
4
4
  };
5
- export declare type CardCommons = {};
6
5
  /**
7
6
  * Card Props
8
7
  */
9
- export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
8
+ export declare type CardProps = ComponentProps<CardSlots>;
10
9
  /**
11
10
  * State used in rendering Card
12
11
  */
13
- export declare type CardState = ComponentState<CardSlots> & CardCommons;
12
+ export declare type CardState = ComponentState<CardSlots>;
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
8
 
9
9
  tslib_1.__exportStar(require("./Card"), exports);
10
10
 
@@ -2,4 +2,4 @@ import type { CardState } from './Card.types';
2
2
  /**
3
3
  * Render the final JSX of Card
4
4
  */
5
- export declare const renderCard: (state: CardState) => JSX.Element;
5
+ export declare const renderCard_unstable: (state: CardState) => JSX.Element;