@fluentui/react-badge 9.0.0-alpha.83 → 9.0.0-alpha.84

Sign up to get free protection for your applications and to get access to all the features.
Files changed (148) hide show
  1. package/CHANGELOG.json +53 -8
  2. package/CHANGELOG.md +22 -8
  3. package/dist/react-badge.d.ts +57 -111
  4. package/lib/Badge.js.map +1 -1
  5. package/lib/CounterBadge.js.map +1 -1
  6. package/lib/PresenceBadge.js.map +1 -1
  7. package/lib/common/isConformant.js +2 -0
  8. package/lib/common/isConformant.js.map +1 -1
  9. package/lib/components/Badge/Badge.d.ts +1 -1
  10. package/lib/components/Badge/Badge.js.map +1 -1
  11. package/lib/components/Badge/Badge.types.d.ts +18 -27
  12. package/lib/components/Badge/Badge.types.js.map +1 -1
  13. package/lib/components/Badge/index.js.map +1 -1
  14. package/lib/components/Badge/renderBadge.js +3 -4
  15. package/lib/components/Badge/renderBadge.js.map +1 -1
  16. package/lib/components/Badge/useBadge.d.ts +1 -5
  17. package/lib/components/Badge/useBadge.js +29 -18
  18. package/lib/components/Badge/useBadge.js.map +1 -1
  19. package/lib/components/Badge/useBadgeStyles.js +1 -1
  20. package/lib/components/Badge/useBadgeStyles.js.map +1 -1
  21. package/lib/components/CounterBadge/CounterBadge.d.ts +2 -8
  22. package/lib/components/CounterBadge/CounterBadge.js.map +1 -1
  23. package/lib/components/CounterBadge/CounterBadge.types.d.ts +23 -37
  24. package/lib/components/CounterBadge/CounterBadge.types.js.map +1 -1
  25. package/lib/components/CounterBadge/index.js.map +1 -1
  26. package/lib/components/CounterBadge/useCounterBadge.d.ts +1 -5
  27. package/lib/components/CounterBadge/useCounterBadge.js +25 -19
  28. package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
  29. package/lib/components/CounterBadge/useCounterBadgeStyles.js +1 -1
  30. package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
  31. package/lib/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +1 -1
  32. package/lib/components/PresenceBadge/PresenceBadge.d.ts +2 -4
  33. package/lib/components/PresenceBadge/PresenceBadge.js.map +1 -1
  34. package/lib/components/PresenceBadge/PresenceBadge.types.d.ts +6 -17
  35. package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
  36. package/lib/components/PresenceBadge/index.js.map +1 -1
  37. package/lib/components/PresenceBadge/usePresenceBadge.d.ts +1 -5
  38. package/lib/components/PresenceBadge/usePresenceBadge.js +15 -21
  39. package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
  40. package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +1 -1
  41. package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
  42. package/lib/index.js.map +1 -1
  43. package/lib-commonjs/Badge.js.map +1 -1
  44. package/lib-commonjs/CounterBadge.js.map +1 -1
  45. package/lib-commonjs/PresenceBadge.js.map +1 -1
  46. package/lib-commonjs/common/isConformant.js +2 -0
  47. package/lib-commonjs/common/isConformant.js.map +1 -1
  48. package/lib-commonjs/components/Badge/Badge.d.ts +1 -1
  49. package/lib-commonjs/components/Badge/Badge.js.map +1 -1
  50. package/lib-commonjs/components/Badge/Badge.types.d.ts +18 -27
  51. package/lib-commonjs/components/Badge/Badge.types.js.map +1 -1
  52. package/lib-commonjs/components/Badge/index.js.map +1 -1
  53. package/lib-commonjs/components/Badge/renderBadge.js +2 -4
  54. package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
  55. package/lib-commonjs/components/Badge/useBadge.d.ts +1 -5
  56. package/lib-commonjs/components/Badge/useBadge.js +30 -19
  57. package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
  58. package/lib-commonjs/components/Badge/useBadgeStyles.js +1 -1
  59. package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
  60. package/lib-commonjs/components/CounterBadge/CounterBadge.d.ts +2 -8
  61. package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
  62. package/lib-commonjs/components/CounterBadge/CounterBadge.types.d.ts +23 -37
  63. package/lib-commonjs/components/CounterBadge/CounterBadge.types.js.map +1 -1
  64. package/lib-commonjs/components/CounterBadge/index.js.map +1 -1
  65. package/lib-commonjs/components/CounterBadge/useCounterBadge.d.ts +1 -5
  66. package/lib-commonjs/components/CounterBadge/useCounterBadge.js +27 -21
  67. package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
  68. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +1 -1
  69. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
  70. package/lib-commonjs/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +1 -1
  71. package/lib-commonjs/components/PresenceBadge/PresenceBadge.d.ts +2 -4
  72. package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
  73. package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts +6 -17
  74. package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
  75. package/lib-commonjs/components/PresenceBadge/index.js.map +1 -1
  76. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.d.ts +1 -5
  77. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +16 -22
  78. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
  79. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +1 -1
  80. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
  81. package/lib-commonjs/index.js.map +1 -1
  82. package/package.json +6 -6
  83. package/lib-amd/Badge.d.ts +0 -1
  84. package/lib-amd/Badge.js +0 -6
  85. package/lib-amd/Badge.js.map +0 -1
  86. package/lib-amd/CounterBadge.d.ts +0 -1
  87. package/lib-amd/CounterBadge.js +0 -6
  88. package/lib-amd/CounterBadge.js.map +0 -1
  89. package/lib-amd/PresenceBadge.d.ts +0 -1
  90. package/lib-amd/PresenceBadge.js +0 -6
  91. package/lib-amd/PresenceBadge.js.map +0 -1
  92. package/lib-amd/common/isConformant.d.ts +0 -4
  93. package/lib-amd/common/isConformant.js +0 -15
  94. package/lib-amd/common/isConformant.js.map +0 -1
  95. package/lib-amd/components/Badge/Badge.d.ts +0 -6
  96. package/lib-amd/components/Badge/Badge.js +0 -15
  97. package/lib-amd/components/Badge/Badge.js.map +0 -1
  98. package/lib-amd/components/Badge/Badge.types.d.ts +0 -47
  99. package/lib-amd/components/Badge/Badge.types.js +0 -5
  100. package/lib-amd/components/Badge/Badge.types.js.map +0 -1
  101. package/lib-amd/components/Badge/index.d.ts +0 -5
  102. package/lib-amd/components/Badge/index.js +0 -10
  103. package/lib-amd/components/Badge/index.js.map +0 -1
  104. package/lib-amd/components/Badge/renderBadge.d.ts +0 -2
  105. package/lib-amd/components/Badge/renderBadge.js +0 -14
  106. package/lib-amd/components/Badge/renderBadge.js.map +0 -1
  107. package/lib-amd/components/Badge/useBadge.d.ts +0 -10
  108. package/lib-amd/components/Badge/useBadge.js +0 -25
  109. package/lib-amd/components/Badge/useBadge.js.map +0 -1
  110. package/lib-amd/components/Badge/useBadgeStyles.d.ts +0 -5
  111. package/lib-amd/components/Badge/useBadgeStyles.js +0 -234
  112. package/lib-amd/components/Badge/useBadgeStyles.js.map +0 -1
  113. package/lib-amd/components/CounterBadge/CounterBadge.d.ts +0 -12
  114. package/lib-amd/components/CounterBadge/CounterBadge.js +0 -15
  115. package/lib-amd/components/CounterBadge/CounterBadge.js.map +0 -1
  116. package/lib-amd/components/CounterBadge/CounterBadge.types.d.ts +0 -55
  117. package/lib-amd/components/CounterBadge/CounterBadge.types.js +0 -5
  118. package/lib-amd/components/CounterBadge/CounterBadge.types.js.map +0 -1
  119. package/lib-amd/components/CounterBadge/index.d.ts +0 -4
  120. package/lib-amd/components/CounterBadge/index.js +0 -9
  121. package/lib-amd/components/CounterBadge/index.js.map +0 -1
  122. package/lib-amd/components/CounterBadge/useCounterBadge.d.ts +0 -10
  123. package/lib-amd/components/CounterBadge/useCounterBadge.js +0 -28
  124. package/lib-amd/components/CounterBadge/useCounterBadge.js.map +0 -1
  125. package/lib-amd/components/CounterBadge/useCounterBadgeStyles.d.ts +0 -5
  126. package/lib-amd/components/CounterBadge/useCounterBadgeStyles.js +0 -46
  127. package/lib-amd/components/CounterBadge/useCounterBadgeStyles.js.map +0 -1
  128. package/lib-amd/components/PresenceBadge/DefaultPresenceBadgeIcons.d.ts +0 -10
  129. package/lib-amd/components/PresenceBadge/DefaultPresenceBadgeIcons.js +0 -64
  130. package/lib-amd/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +0 -1
  131. package/lib-amd/components/PresenceBadge/PresenceBadge.d.ts +0 -8
  132. package/lib-amd/components/PresenceBadge/PresenceBadge.js +0 -15
  133. package/lib-amd/components/PresenceBadge/PresenceBadge.js.map +0 -1
  134. package/lib-amd/components/PresenceBadge/PresenceBadge.types.d.ts +0 -28
  135. package/lib-amd/components/PresenceBadge/PresenceBadge.types.js +0 -5
  136. package/lib-amd/components/PresenceBadge/PresenceBadge.types.js.map +0 -1
  137. package/lib-amd/components/PresenceBadge/index.d.ts +0 -4
  138. package/lib-amd/components/PresenceBadge/index.js +0 -9
  139. package/lib-amd/components/PresenceBadge/index.js.map +0 -1
  140. package/lib-amd/components/PresenceBadge/usePresenceBadge.d.ts +0 -10
  141. package/lib-amd/components/PresenceBadge/usePresenceBadge.js +0 -37
  142. package/lib-amd/components/PresenceBadge/usePresenceBadge.js.map +0 -1
  143. package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.d.ts +0 -5
  144. package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js +0 -58
  145. package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js.map +0 -1
  146. package/lib-amd/index.d.ts +0 -5
  147. package/lib-amd/index.js +0 -10
  148. package/lib-amd/index.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"renderBadge.js","sourceRoot":"../src/","sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":";;;;IAKO,IAAM,WAAW,GAAG,UAAC,KAAiB;QACrC,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,oCAAyB,CAAC,EAArE,KAAK,WAAA,EAAE,SAAS,eAAqD,CAAC;QAE9E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,YAAY,KAAK,QAAQ,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YACrE,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,YAAY,KAAK,OAAO,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAC1D,CACd,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,WAAW,eAUtB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { badgeShorthandPropsCompat } from './useBadge';\nimport type { BadgeState } from './Badge.types';\n\nexport const renderBadge = (state: BadgeState) => {\n const { slots, slotProps } = getSlotsCompat(state, badgeShorthandPropsCompat);\n\n return (\n <slots.root {...slotProps.root}>\n {state.iconPosition === 'before' && <slots.icon {...slotProps.icon} />}\n {state.children}\n {state.iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"]}
@@ -1,10 +0,0 @@
1
- import * as React from 'react';
2
- import type { BadgeProps, BadgeState } from './Badge.types';
3
- /**
4
- * Consts listing which props are shorthand props.
5
- */
6
- export declare const badgeShorthandPropsCompat: readonly ["icon"];
7
- /**
8
- * Returns the props and state required to render the component
9
- */
10
- export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;
@@ -1,25 +0,0 @@
1
- define(["require", "exports", "react", "@fluentui/react-utilities"], function (require, exports, React, react_utilities_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useBadge = exports.badgeShorthandPropsCompat = void 0;
5
- /**
6
- * Consts listing which props are shorthand props.
7
- */
8
- exports.badgeShorthandPropsCompat = ['icon'];
9
- var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.badgeShorthandPropsCompat });
10
- /**
11
- * Returns the props and state required to render the component
12
- */
13
- var useBadge = function (props, ref, defaultProps) {
14
- var state = mergeProps({
15
- ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
16
- shape: 'circular',
17
- size: 'medium',
18
- iconPosition: 'before',
19
- 'aria-hidden': true,
20
- }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.badgeShorthandPropsCompat), react_utilities_1.resolveShorthandProps(props, exports.badgeShorthandPropsCompat));
21
- return state;
22
- };
23
- exports.useBadge = useBadge;
24
- });
25
- //# sourceMappingURL=useBadge.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useBadge.js","sourceRoot":"../src/","sources":["components/Badge/useBadge.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACU,QAAA,yBAAyB,GAAG,CAAC,MAAM,CAAU,CAAC;IAE3D,IAAM,UAAU,GAAG,gCAAc,CAAa,EAAE,SAAS,EAAE,iCAAyB,EAAE,CAAC,CAAC;IAExF;;OAEG;IACI,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;QAChG,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3C,KAAK,EAAE,UAAU;YACjB,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,QAAQ;YACtB,aAAa,EAAE,IAAI;SACpB,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,iCAAyB,CAAC,EAC9E,uCAAqB,CAAC,KAAK,EAAE,iCAAyB,CAAC,CACxD,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAdW,QAAA,QAAQ,YAcnB","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const badgeShorthandPropsCompat = ['icon'] as const;\n\nconst mergeProps = makeMergeProps<BadgeState>({ deepMerge: badgeShorthandPropsCompat });\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge = (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps): BadgeState => {\n const state = mergeProps(\n {\n ref: useMergedRefs(ref, React.useRef(null)),\n shape: 'circular',\n size: 'medium',\n iconPosition: 'before',\n 'aria-hidden': true,\n },\n defaultProps && resolveShorthandProps(defaultProps, badgeShorthandPropsCompat),\n resolveShorthandProps(props, badgeShorthandPropsCompat),\n );\n\n return state;\n};\n"]}
@@ -1,5 +0,0 @@
1
- import type { BadgeState } from './Badge.types';
2
- /**
3
- * Applies style classnames to slots
4
- */
5
- export declare const useBadgeStyles: (state: BadgeState) => BadgeState;
@@ -1,234 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useBadgeStyles = void 0;
5
- var useStyles = react_make_styles_1.makeStyles({
6
- root: function (theme) { return ({
7
- display: 'inline-flex',
8
- boxSizing: 'border-box',
9
- alignItems: 'center',
10
- justifyContent: 'center',
11
- backgroundColor: theme.alias.color.neutral.brandBackground,
12
- borderColor: theme.alias.color.neutral.brandBackground,
13
- color: theme.alias.color.neutral.neutralForegroundOnBrand,
14
- fontWeight: theme.global.type.fontWeights.semibold,
15
- borderWidth: theme.global.strokeWidth.thin,
16
- borderStyle: 'solid',
17
- fontFamily: theme.global.type.fontFamilies.base,
18
- position: 'relative',
19
- }); },
20
- rootSmallest: {
21
- width: '6px',
22
- height: '6px',
23
- fontSize: '4px',
24
- },
25
- rootSmaller: {
26
- width: '10px',
27
- height: '10px',
28
- fontSize: '6px',
29
- },
30
- rootSmall: {
31
- minWidth: '16px',
32
- height: '16px',
33
- paddingRight: '6px',
34
- paddingLeft: '6px',
35
- gap: '4px',
36
- fontSize: '8px',
37
- },
38
- rootMedium: {
39
- height: '20px',
40
- minWidth: '20px',
41
- gap: '4px',
42
- paddingRight: '8px',
43
- paddingLeft: '8px',
44
- fontSize: '10px',
45
- },
46
- rootLarge: {
47
- minWidth: '24px',
48
- height: '24px',
49
- paddingRight: '8px',
50
- paddingLeft: '8px',
51
- fontSize: '12px',
52
- gap: '6px',
53
- },
54
- rootLargerLargest: function (theme) { return ({
55
- minWidth: '32px',
56
- height: '32px',
57
- paddingRight: '12px',
58
- paddingLeft: '12px',
59
- gap: '6px',
60
- fontSize: '12px',
61
- borderWidth: theme.global.strokeWidth.thick,
62
- }); },
63
- rootRounded: function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); },
64
- rootRoundedSmallSmallerSmallest: function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
65
- rootCircular: { borderRadius: '99px' },
66
- rootGhost: function (theme) { return ({
67
- background: 'transparent',
68
- border: 'none',
69
- color: theme.alias.color.neutral.brandBackground,
70
- }); },
71
- rootOutline: function (theme) { return ({
72
- background: 'transparent',
73
- borderColor: theme.alias.color.neutral.brandBackground,
74
- color: theme.alias.color.neutral.brandBackground,
75
- }); },
76
- rootTint: function (theme) { return ({
77
- backgroundColor: theme.global.palette.brand.tint60,
78
- color: theme.global.palette.brand.shade40,
79
- borderColor: 'none',
80
- }); },
81
- rootFilledDanger: function (theme) { return ({
82
- backgroundColor: theme.alias.color.red.background3,
83
- color: theme.alias.color.neutral.neutralForegroundOnBrand,
84
- borderColor: theme.alias.color.red.background3,
85
- }); },
86
- rootOutlineDanger: function (theme) { return ({
87
- color: theme.alias.color.red.foreground3,
88
- borderColor: theme.alias.color.red.foreground3,
89
- }); },
90
- rootTintDanger: function (theme) { return ({
91
- backgroundColor: theme.alias.color.red.background1,
92
- color: theme.alias.color.red.foreground1,
93
- borderColor: theme.alias.color.red.foreground2,
94
- }); },
95
- rootGhostDanger: function (theme) { return ({
96
- color: theme.alias.color.red.foreground3,
97
- }); },
98
- rootFilledSevere: function (theme) { return ({
99
- backgroundColor: theme.alias.color.darkOrange.background3,
100
- color: theme.alias.color.neutral.neutralForegroundOnBrand,
101
- borderColor: 'none',
102
- }); },
103
- rootOutlineSevere: function (theme) { return ({
104
- color: theme.alias.color.darkOrange.foreground3,
105
- borderColor: theme.alias.color.darkOrange.foreground3,
106
- }); },
107
- rootTintSevere: function (theme) { return ({
108
- backgroundColor: theme.alias.color.darkOrange.background1,
109
- color: theme.alias.color.darkOrange.foreground1,
110
- borderColor: theme.alias.color.darkOrange.foreground2,
111
- }); },
112
- rootGhostSevere: function (theme) { return ({
113
- color: theme.alias.color.darkOrange.foreground3,
114
- }); },
115
- rootFilledWarning: function (theme) { return ({
116
- backgroundColor: theme.alias.color.yellow.background3,
117
- color: theme.alias.color.neutral.neutralForeground1,
118
- borderColor: theme.alias.color.yellow.background3,
119
- }); },
120
- rootOutlineWarning: function (theme) { return ({
121
- color: theme.alias.color.yellow.foreground2,
122
- borderColor: theme.alias.color.yellow.foreground2,
123
- }); },
124
- rootTintWarning: function (theme) { return ({
125
- backgroundColor: theme.alias.color.yellow.background1,
126
- color: theme.alias.color.yellow.foreground2,
127
- borderColor: theme.alias.color.yellow.background2,
128
- }); },
129
- rootGhostWarning: function (theme) { return ({
130
- color: theme.alias.color.yellow.foreground2,
131
- }); },
132
- rootFilledSuccess: function (theme) { return ({
133
- backgroundColor: theme.alias.color.green.background3,
134
- color: theme.alias.color.neutral.neutralForegroundOnBrand,
135
- borderColor: 'none',
136
- }); },
137
- rootOutlineSuccess: function (theme) { return ({
138
- color: theme.alias.color.green.foreground2,
139
- borderColor: theme.alias.color.green.foreground2,
140
- }); },
141
- rootTintSuccess: function (theme) { return ({
142
- backgroundColor: theme.alias.color.green.background1,
143
- color: theme.alias.color.green.foreground1,
144
- borderColor: theme.alias.color.green.background2,
145
- }); },
146
- rootGhostSuccess: function (theme) { return ({
147
- color: theme.alias.color.green.foreground3,
148
- }); },
149
- rootFilledImportant: function (theme) { return ({
150
- backgroundColor: theme.alias.color.neutral.neutralForeground1,
151
- color: theme.alias.color.neutral.neutralBackground1,
152
- borderColor: theme.alias.color.neutral.transparentStroke,
153
- }); },
154
- rootOutlineImportant: function (theme) { return ({
155
- color: theme.alias.color.neutral.neutralForeground1,
156
- borderColor: theme.alias.color.neutral.neutralForeground1,
157
- }); },
158
- rootTintImportant: function (theme) { return ({
159
- backgroundColor: theme.alias.color.neutral.neutralForeground3,
160
- color: theme.alias.color.neutral.neutralBackground1,
161
- borderColor: theme.alias.color.neutral.transparentStroke,
162
- }); },
163
- rootGhostImportant: function (theme) { return ({
164
- color: theme.alias.color.neutral.neutralForeground1,
165
- }); },
166
- rootFilledInformative: function (theme) { return ({
167
- backgroundColor: theme.alias.color.neutral.neutralBackground5,
168
- color: theme.alias.color.neutral.neutralForeground3,
169
- borderColor: theme.alias.color.neutral.transparentStroke,
170
- }); },
171
- rootOutlineInformative: function (theme) { return ({
172
- backgroundColor: theme.alias.color.darkOrange.background3,
173
- color: theme.alias.color.neutral.neutralBackground5,
174
- borderColor: theme.alias.color.neutral.neutralBackground5,
175
- }); },
176
- rootTintInformative: function (theme) { return ({
177
- backgroundColor: theme.alias.color.neutral.neutralBackground4,
178
- color: theme.alias.color.neutral.neutralForeground3,
179
- borderColor: theme.alias.color.neutral.neutralStroke2,
180
- }); },
181
- rootGhostInformative: function (theme) { return ({
182
- color: theme.alias.color.neutral.neutralBackground5,
183
- }); },
184
- rootFilledSubtle: function (theme) { return ({
185
- backgroundColor: theme.alias.color.neutral.neutralBackground1,
186
- color: theme.alias.color.neutral.neutralForeground1,
187
- borderColor: theme.alias.color.neutral.transparentStroke,
188
- }); },
189
- rootOutlineSubtle: function (theme) { return ({
190
- color: theme.alias.color.neutral.neutralForegroundOnBrand,
191
- borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,
192
- }); },
193
- rootTintSubtle: function (theme) { return ({
194
- backgroundColor: theme.alias.color.neutral.neutralBackground1,
195
- color: theme.alias.color.neutral.neutralForeground3,
196
- borderColor: theme.alias.color.neutral.neutralStroke2,
197
- }); },
198
- rootGhostSubtle: function (theme) { return ({
199
- color: theme.alias.color.neutral.neutralForegroundOnBrand,
200
- }); },
201
- icon: {
202
- display: 'flex',
203
- alignContent: 'center',
204
- alignItems: 'center',
205
- height: '100%',
206
- },
207
- });
208
- /**
209
- * Applies style classnames to slots
210
- */
211
- var useBadgeStyles = function (state) {
212
- var styles = useStyles();
213
- var isGhost = state.appearance === 'ghost';
214
- var isOutline = state.appearance === 'outline';
215
- var isTint = state.appearance === 'tint';
216
- var isFilled = state.appearance === 'filled';
217
- var isDanger = state.color === 'danger';
218
- var isSevere = state.color === 'severe';
219
- var isWarning = state.color === 'warning';
220
- var isSuccess = state.color === 'success';
221
- var isImportant = state.color === 'important';
222
- var isInformative = state.color === 'informative';
223
- var isSubtle = state.color === 'subtle';
224
- state.className = react_make_styles_1.mergeClasses(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' &&
225
- (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') &&
226
- styles.rootRoundedSmallSmallerSmallest, isGhost && styles.rootGhost, isOutline && styles.rootOutline, isTint && styles.rootTint, isFilled && isDanger && styles.rootFilledDanger, isOutline && isDanger && styles.rootOutlineDanger, isTint && isDanger && styles.rootTintDanger, isGhost && isDanger && styles.rootGhostDanger, isFilled && isSevere && styles.rootFilledSevere, isOutline && isSevere && styles.rootOutlineSevere, isTint && isSevere && styles.rootTintSevere, isGhost && isSevere && styles.rootGhostSevere, isFilled && isWarning && styles.rootFilledWarning, isOutline && isWarning && styles.rootOutlineWarning, isTint && isWarning && styles.rootTintWarning, isGhost && isWarning && styles.rootGhostWarning, isFilled && isSuccess && styles.rootFilledSuccess, isOutline && isSuccess && styles.rootOutlineSuccess, isTint && isSuccess && styles.rootTintSuccess, isGhost && isSuccess && styles.rootGhostSuccess, isFilled && isImportant && styles.rootFilledImportant, isOutline && isImportant && styles.rootOutlineImportant, isTint && isImportant && styles.rootTintImportant, isGhost && isImportant && styles.rootGhostImportant, isFilled && isInformative && styles.rootFilledInformative, isOutline && isInformative && styles.rootOutlineInformative, isTint && isInformative && styles.rootTintInformative, isGhost && isInformative && styles.rootGhostInformative, isFilled && isSubtle && styles.rootFilledSubtle, isOutline && isSubtle && styles.rootOutlineSubtle, isTint && isSubtle && styles.rootTintSubtle, isGhost && isSubtle && styles.rootGhostSubtle, state.className);
227
- if (state.icon) {
228
- state.icon.className = react_make_styles_1.mergeClasses(styles.icon, state.icon.className);
229
- }
230
- return state;
231
- };
232
- exports.useBadgeStyles = useBadgeStyles;
233
- });
234
- //# sourceMappingURL=useBadgeStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useBadgeStyles.js","sourceRoot":"../src/","sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { BadgeState } from './Badge.types';\n\nconst useStyles = makeStyles({\n root: theme => ({\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.alias.color.neutral.brandBackground,\n borderColor: theme.alias.color.neutral.brandBackground,\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n fontWeight: theme.global.type.fontWeights.semibold,\n borderWidth: theme.global.strokeWidth.thin,\n borderStyle: 'solid',\n fontFamily: theme.global.type.fontFamilies.base,\n position: 'relative',\n }),\n rootSmallest: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n },\n rootSmaller: {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n },\n rootSmall: {\n minWidth: '16px',\n height: '16px',\n paddingRight: '6px',\n paddingLeft: '6px',\n gap: '4px',\n fontSize: '8px',\n },\n rootMedium: {\n height: '20px',\n minWidth: '20px',\n gap: '4px',\n paddingRight: '8px',\n paddingLeft: '8px',\n fontSize: '10px',\n },\n rootLarge: {\n minWidth: '24px',\n height: '24px',\n paddingRight: '8px',\n paddingLeft: '8px',\n fontSize: '12px',\n gap: '6px',\n },\n rootLargerLargest: theme => ({\n minWidth: '32px',\n height: '32px',\n paddingRight: '12px',\n paddingLeft: '12px',\n gap: '6px',\n fontSize: '12px',\n borderWidth: theme.global.strokeWidth.thick,\n }),\n rootRounded: theme => ({ borderRadius: theme.global.borderRadius.medium }),\n rootRoundedSmallSmallerSmallest: theme => ({ borderRadius: theme.global.borderRadius.small }),\n rootCircular: { borderRadius: '99px' },\n rootGhost: theme => ({\n background: 'transparent',\n border: 'none',\n color: theme.alias.color.neutral.brandBackground,\n }),\n rootOutline: theme => ({\n background: 'transparent',\n borderColor: theme.alias.color.neutral.brandBackground,\n color: theme.alias.color.neutral.brandBackground,\n }),\n rootTint: theme => ({\n backgroundColor: theme.global.palette.brand.tint60,\n color: theme.global.palette.brand.shade40,\n borderColor: 'none',\n }),\n rootFilledDanger: theme => ({\n backgroundColor: theme.alias.color.red.background3,\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n borderColor: theme.alias.color.red.background3,\n }),\n rootOutlineDanger: theme => ({\n color: theme.alias.color.red.foreground3,\n borderColor: theme.alias.color.red.foreground3,\n }),\n rootTintDanger: theme => ({\n backgroundColor: theme.alias.color.red.background1,\n color: theme.alias.color.red.foreground1,\n borderColor: theme.alias.color.red.foreground2,\n }),\n rootGhostDanger: theme => ({\n color: theme.alias.color.red.foreground3,\n }),\n rootFilledSevere: theme => ({\n backgroundColor: theme.alias.color.darkOrange.background3,\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n borderColor: 'none',\n }),\n rootOutlineSevere: theme => ({\n color: theme.alias.color.darkOrange.foreground3,\n borderColor: theme.alias.color.darkOrange.foreground3,\n }),\n rootTintSevere: theme => ({\n backgroundColor: theme.alias.color.darkOrange.background1,\n color: theme.alias.color.darkOrange.foreground1,\n borderColor: theme.alias.color.darkOrange.foreground2,\n }),\n rootGhostSevere: theme => ({\n color: theme.alias.color.darkOrange.foreground3,\n }),\n rootFilledWarning: theme => ({\n backgroundColor: theme.alias.color.yellow.background3,\n color: theme.alias.color.neutral.neutralForeground1,\n borderColor: theme.alias.color.yellow.background3,\n }),\n rootOutlineWarning: theme => ({\n color: theme.alias.color.yellow.foreground2,\n borderColor: theme.alias.color.yellow.foreground2,\n }),\n rootTintWarning: theme => ({\n backgroundColor: theme.alias.color.yellow.background1,\n color: theme.alias.color.yellow.foreground2,\n borderColor: theme.alias.color.yellow.background2,\n }),\n rootGhostWarning: theme => ({\n color: theme.alias.color.yellow.foreground2,\n }),\n rootFilledSuccess: theme => ({\n backgroundColor: theme.alias.color.green.background3,\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n borderColor: 'none',\n }),\n rootOutlineSuccess: theme => ({\n color: theme.alias.color.green.foreground2,\n borderColor: theme.alias.color.green.foreground2,\n }),\n rootTintSuccess: theme => ({\n backgroundColor: theme.alias.color.green.background1,\n color: theme.alias.color.green.foreground1,\n borderColor: theme.alias.color.green.background2,\n }),\n rootGhostSuccess: theme => ({\n color: theme.alias.color.green.foreground3,\n }),\n rootFilledImportant: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralForeground1,\n color: theme.alias.color.neutral.neutralBackground1,\n borderColor: theme.alias.color.neutral.transparentStroke,\n }),\n rootOutlineImportant: theme => ({\n color: theme.alias.color.neutral.neutralForeground1,\n borderColor: theme.alias.color.neutral.neutralForeground1,\n }),\n rootTintImportant: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralForeground3,\n color: theme.alias.color.neutral.neutralBackground1,\n borderColor: theme.alias.color.neutral.transparentStroke,\n }),\n rootGhostImportant: theme => ({\n color: theme.alias.color.neutral.neutralForeground1,\n }),\n rootFilledInformative: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralBackground5,\n color: theme.alias.color.neutral.neutralForeground3,\n borderColor: theme.alias.color.neutral.transparentStroke,\n }),\n rootOutlineInformative: theme => ({\n backgroundColor: theme.alias.color.darkOrange.background3,\n color: theme.alias.color.neutral.neutralBackground5,\n borderColor: theme.alias.color.neutral.neutralBackground5,\n }),\n rootTintInformative: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralBackground4,\n color: theme.alias.color.neutral.neutralForeground3,\n borderColor: theme.alias.color.neutral.neutralStroke2,\n }),\n rootGhostInformative: theme => ({\n color: theme.alias.color.neutral.neutralBackground5,\n }),\n rootFilledSubtle: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralBackground1,\n color: theme.alias.color.neutral.neutralForeground1,\n borderColor: theme.alias.color.neutral.transparentStroke,\n }),\n rootOutlineSubtle: theme => ({\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n rootTintSubtle: theme => ({\n backgroundColor: theme.alias.color.neutral.neutralBackground1,\n color: theme.alias.color.neutral.neutralForeground3,\n borderColor: theme.alias.color.neutral.neutralStroke2,\n }),\n rootGhostSubtle: theme => ({\n color: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n icon: {\n display: 'flex',\n alignContent: 'center',\n alignItems: 'center',\n height: '100%',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles = (state: BadgeState): BadgeState => {\n const styles = useStyles();\n const isGhost = state.appearance === 'ghost';\n const isOutline = state.appearance === 'outline';\n const isTint = state.appearance === 'tint';\n const isFilled = state.appearance === 'filled';\n const isDanger = state.color === 'danger';\n const isSevere = state.color === 'severe';\n const isWarning = state.color === 'warning';\n const isSuccess = state.color === 'success';\n const isImportant = state.color === 'important';\n const isInformative = state.color === 'informative';\n const isSubtle = state.color === 'subtle';\n\n state.className = mergeClasses(\n styles.root,\n state.size === 'smallest' && styles.rootSmallest,\n state.size === 'smaller' && styles.rootSmaller,\n state.size === 'small' && styles.rootSmall,\n state.size === 'medium' && styles.rootMedium,\n state.size === 'large' && styles.rootLarge,\n (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest,\n state.shape === 'circular' && styles.rootCircular,\n state.shape === 'rounded' && styles.rootRounded,\n state.shape === 'rounded' &&\n (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') &&\n styles.rootRoundedSmallSmallerSmallest,\n isGhost && styles.rootGhost,\n isOutline && styles.rootOutline,\n isTint && styles.rootTint,\n isFilled && isDanger && styles.rootFilledDanger,\n isOutline && isDanger && styles.rootOutlineDanger,\n isTint && isDanger && styles.rootTintDanger,\n isGhost && isDanger && styles.rootGhostDanger,\n isFilled && isSevere && styles.rootFilledSevere,\n isOutline && isSevere && styles.rootOutlineSevere,\n isTint && isSevere && styles.rootTintSevere,\n isGhost && isSevere && styles.rootGhostSevere,\n isFilled && isWarning && styles.rootFilledWarning,\n isOutline && isWarning && styles.rootOutlineWarning,\n isTint && isWarning && styles.rootTintWarning,\n isGhost && isWarning && styles.rootGhostWarning,\n isFilled && isSuccess && styles.rootFilledSuccess,\n isOutline && isSuccess && styles.rootOutlineSuccess,\n isTint && isSuccess && styles.rootTintSuccess,\n isGhost && isSuccess && styles.rootGhostSuccess,\n isFilled && isImportant && styles.rootFilledImportant,\n isOutline && isImportant && styles.rootOutlineImportant,\n isTint && isImportant && styles.rootTintImportant,\n isGhost && isImportant && styles.rootGhostImportant,\n isFilled && isInformative && styles.rootFilledInformative,\n isOutline && isInformative && styles.rootOutlineInformative,\n isTint && isInformative && styles.rootTintInformative,\n isGhost && isInformative && styles.rootGhostInformative,\n isFilled && isSubtle && styles.rootFilledSubtle,\n isOutline && isSubtle && styles.rootOutlineSubtle,\n isTint && isSubtle && styles.rootTintSubtle,\n isGhost && isSubtle && styles.rootGhostSubtle,\n state.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(styles.icon, state.icon.className);\n }\n\n return state;\n};\n"]}
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * Define a styled CounterBadge, using the `useCounterBadge` hook.
4
- */
5
- export declare const CounterBadge: React.ForwardRefExoticComponent<Pick<import("../Badge").BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "iconPosition"> & {
6
- shape?: "rounded" | "circular" | undefined;
7
- appearance?: "filled" | "ghost" | undefined;
8
- overflowCount?: number | undefined;
9
- count?: number | undefined;
10
- showZero?: boolean | undefined;
11
- dot?: boolean | undefined;
12
- } & React.RefAttributes<HTMLElement>>;
@@ -1,15 +0,0 @@
1
- define(["require", "exports", "react", "./useCounterBadge", "./useCounterBadgeStyles", "../Badge/index"], function (require, exports, React, useCounterBadge_1, useCounterBadgeStyles_1, index_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.CounterBadge = void 0;
5
- /**
6
- * Define a styled CounterBadge, using the `useCounterBadge` hook.
7
- */
8
- exports.CounterBadge = React.forwardRef(function (props, ref) {
9
- var state = useCounterBadge_1.useCounterBadge(props, ref);
10
- useCounterBadgeStyles_1.useCounterBadgeStyles(state);
11
- return index_1.renderBadge(state);
12
- });
13
- exports.CounterBadge.displayName = 'CounterBadge';
14
- });
15
- //# sourceMappingURL=CounterBadge.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CounterBadge.js","sourceRoot":"../src/","sources":["components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAAiC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,iCAAe,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC1C,6CAAqB,CAAC,KAAK,CAAC,CAAC;QAE7B,OAAO,mBAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCounterBadge } from './useCounterBadge';\nimport { useCounterBadgeStyles } from './useCounterBadgeStyles';\nimport { renderBadge } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge` hook.\n */\nexport const CounterBadge = React.forwardRef<HTMLElement, CounterBadgeProps>((props, ref) => {\n const state = useCounterBadge(props, ref);\n useCounterBadgeStyles(state);\n\n return renderBadge(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"]}
@@ -1,55 +0,0 @@
1
- import type { BadgeProps, BadgeState } from '../Badge/index';
2
- export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & {
3
- /**
4
- * A Badge can be circular or rounded
5
- * @defaultvalue circular
6
- */
7
- shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;
8
- /**
9
- * A Badge can be filled, ghost
10
- * @defaultvalue filled
11
- */
12
- appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;
13
- /**
14
- * Max number to be displayed
15
- * @defaultvalue 99
16
- */
17
- overflowCount?: number;
18
- /**
19
- * Value displayed by the Badge
20
- * @defaultvalue 0
21
- */
22
- count?: number;
23
- /**
24
- * If the badge should be shown when count is 0
25
- * @defaultvalue false
26
- */
27
- showZero?: boolean;
28
- /**
29
- * If a dot badge should be displayed
30
- * @defaultvalue false
31
- */
32
- dot?: boolean;
33
- };
34
- export declare type CounterBadgeState = BadgeState & {
35
- /**
36
- * Max number to be displayed
37
- * @defaultvalue 99
38
- */
39
- overflowCount: number;
40
- /**
41
- * Value displayed by the Badge
42
- * @defaultvalue 0
43
- */
44
- count: number;
45
- /**
46
- * If the badge should be shown when count is 0
47
- * @defaultvalue false
48
- */
49
- showZero: boolean;
50
- /**
51
- * If a dot badge should be displayed
52
- * @defaultvalue false
53
- */
54
- dot: boolean;
55
- };
@@ -1,5 +0,0 @@
1
- define(["require", "exports"], function (require, exports) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- });
5
- //# sourceMappingURL=CounterBadge.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CounterBadge.types.js","sourceRoot":"../src/","sources":["components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & {\n /**\n * A Badge can be circular or rounded\n * @defaultvalue circular\n */\n shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;\n\n /**\n * A Badge can be filled, ghost\n * @defaultvalue filled\n */\n appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;\n\n /**\n * Max number to be displayed\n * @defaultvalue 99\n */\n overflowCount?: number;\n\n /**\n * Value displayed by the Badge\n * @defaultvalue 0\n */\n count?: number;\n\n /**\n * If the badge should be shown when count is 0\n * @defaultvalue false\n */\n showZero?: boolean;\n\n /**\n * If a dot badge should be displayed\n * @defaultvalue false\n */\n dot?: boolean;\n};\n\nexport type CounterBadgeState = BadgeState & {\n /**\n * Max number to be displayed\n * @defaultvalue 99\n */\n overflowCount: number;\n\n /**\n * Value displayed by the Badge\n * @defaultvalue 0\n */\n count: number;\n\n /**\n * If the badge should be shown when count is 0\n * @defaultvalue false\n */\n showZero: boolean;\n\n /**\n * If a dot badge should be displayed\n * @defaultvalue false\n */\n dot: boolean;\n};\n"]}
@@ -1,4 +0,0 @@
1
- export * from './CounterBadge';
2
- export * from './CounterBadge.types';
3
- export * from './useCounterBadge';
4
- export * from './useCounterBadgeStyles';
@@ -1,9 +0,0 @@
1
- define(["require", "exports", "tslib", "./CounterBadge", "./CounterBadge.types", "./useCounterBadge", "./useCounterBadgeStyles"], function (require, exports, tslib_1, CounterBadge_1, CounterBadge_types_1, useCounterBadge_1, useCounterBadgeStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- tslib_1.__exportStar(CounterBadge_1, exports);
5
- tslib_1.__exportStar(CounterBadge_types_1, exports);
6
- tslib_1.__exportStar(useCounterBadge_1, exports);
7
- tslib_1.__exportStar(useCounterBadgeStyles_1, exports);
8
- });
9
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CounterBadge/index.ts"],"names":[],"mappings":";;;IAAA,8CAA+B;IAC/B,oDAAqC;IACrC,iDAAkC;IAClC,uDAAwC","sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"]}
@@ -1,10 +0,0 @@
1
- import * as React from 'react';
2
- import type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';
3
- /**
4
- * Consts listing which props are shorthand props.
5
- */
6
- export declare const counterBadgeShorthandPropsCompat: readonly ["icon"];
7
- /**
8
- * Returns the props and state required to render the component
9
- */
10
- export declare const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: CounterBadgeProps | undefined) => CounterBadgeState;
@@ -1,28 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-utilities", "../Badge/index"], function (require, exports, react_utilities_1, index_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useCounterBadge = exports.counterBadgeShorthandPropsCompat = void 0;
5
- /**
6
- * Consts listing which props are shorthand props.
7
- */
8
- exports.counterBadgeShorthandPropsCompat = ['icon'];
9
- // eslint-disable-next-line deprecation/deprecation
10
- var mergeProps = react_utilities_1.makeMergePropsCompat({ deepMerge: exports.counterBadgeShorthandPropsCompat });
11
- /**
12
- * Returns the props and state required to render the component
13
- */
14
- var useCounterBadge = function (props, ref, defaultProps) {
15
- var state = index_1.useBadge(props, ref, mergeProps({
16
- showZero: false,
17
- overflowCount: 99,
18
- count: 0,
19
- dot: false,
20
- }, defaultProps));
21
- if (!state.dot && !state.children) {
22
- state.children = state.count > state.overflowCount ? state.overflowCount + "+" : "" + state.count;
23
- }
24
- return state;
25
- };
26
- exports.useCounterBadge = useCounterBadge;
27
- });
28
- //# sourceMappingURL=useCounterBadge.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCounterBadge.js","sourceRoot":"../src/","sources":["components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,gCAAgC,GAAG,CAAC,MAAM,CAAU,CAAC;IAElE,mDAAmD;IACnD,IAAM,UAAU,GAAG,sCAAoB,CAAoB,EAAE,SAAS,EAAE,wCAAgC,EAAE,CAAC,CAAC;IAE5G;;OAEG;IACI,IAAM,eAAe,GAAG,UAC7B,KAAwB,EACxB,GAA2B,EAC3B,YAAgC;QAEhC,IAAM,KAAK,GAAG,gBAAQ,CACpB,KAAK,EACL,GAAG,EACH,UAAU,CACR;YACE,QAAQ,EAAE,KAAK;YACf,aAAa,EAAE,EAAE;YACjB,KAAK,EAAE,CAAC;YACR,GAAG,EAAE,KAAK;SACX,EACD,YAAY,CACC,CACK,CAAC;QAEvB,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACjC,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAI,KAAK,CAAC,aAAa,MAAG,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,KAAO,CAAC;SACnG;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAxBW,QAAA,eAAe,mBAwB1B","sourcesContent":["import * as React from 'react';\nimport { makeMergePropsCompat } from '@fluentui/react-utilities';\nimport { useBadge } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\nimport type { BadgeProps } from '../Badge/index';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const counterBadgeShorthandPropsCompat = ['icon'] as const;\n\n// eslint-disable-next-line deprecation/deprecation\nconst mergeProps = makeMergePropsCompat<CounterBadgeState>({ deepMerge: counterBadgeShorthandPropsCompat });\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge = (\n props: CounterBadgeProps,\n ref: React.Ref<HTMLElement>,\n defaultProps?: CounterBadgeProps,\n): CounterBadgeState => {\n const state = useBadge(\n props,\n ref,\n mergeProps(\n {\n showZero: false,\n overflowCount: 99,\n count: 0,\n dot: false,\n },\n defaultProps,\n ) as BadgeProps,\n ) as CounterBadgeState;\n\n if (!state.dot && !state.children) {\n state.children = state.count > state.overflowCount ? `${state.overflowCount}+` : `${state.count}`;\n }\n\n return state;\n};\n"]}
@@ -1,5 +0,0 @@
1
- import type { CounterBadgeState } from './CounterBadge.types';
2
- /**
3
- * Applies style classnames to slots
4
- */
5
- export declare const useCounterBadgeStyles: (state: CounterBadgeState) => CounterBadgeState;
@@ -1,46 +0,0 @@
1
- define(["require", "exports", "@fluentui/react-make-styles", "../Badge/useBadgeStyles"], function (require, exports, react_make_styles_1, useBadgeStyles_1) {
2
- "use strict";
3
- Object.defineProperty(exports, "__esModule", { value: true });
4
- exports.useCounterBadgeStyles = void 0;
5
- var useStyles = react_make_styles_1.makeStyles({
6
- root: {
7
- minWidth: 'auto',
8
- },
9
- warning: function (theme) { return ({
10
- backgroundColor: theme.global.palette.cranberry.primary,
11
- borderColor: theme.global.palette.cranberry.primary,
12
- }); },
13
- important: function (theme) { return ({
14
- backgroundColor: theme.global.palette.grey[14],
15
- borderColor: theme.global.palette.grey[14],
16
- }); },
17
- severe: function (theme) { return ({
18
- // TODO: update these colors once the color used in the design spec has existing color token
19
- backgroundColor: theme.global.palette.red.primary,
20
- borderColor: theme.global.palette.red.primary,
21
- }); },
22
- informative: function (theme) { return ({
23
- backgroundColor: theme.global.palette.grey[92],
24
- borderColor: theme.global.palette.grey[92],
25
- color: theme.alias.color.neutral.neutralForeground3,
26
- }); },
27
- dot: {
28
- width: '6px',
29
- height: '6px',
30
- padding: '0',
31
- },
32
- hide: {
33
- display: 'none',
34
- },
35
- });
36
- /**
37
- * Applies style classnames to slots
38
- */
39
- var useCounterBadgeStyles = function (state) {
40
- var styles = useStyles();
41
- state.className = react_make_styles_1.mergeClasses(styles.root, state.color === 'warning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.className);
42
- return useBadgeStyles_1.useBadgeStyles(state);
43
- };
44
- exports.useCounterBadgeStyles = useCounterBadgeStyles;
45
- });
46
- //# sourceMappingURL=useCounterBadgeStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCounterBadgeStyles.js","sourceRoot":"../src/","sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":";;;;IAIA,IAAM,SAAS,GAAG,8BAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM;SACjB;QACD,OAAO,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACjB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO;YACvD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO;SACpD,CAAC,EAHgB,CAGhB;QACF,SAAS,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACnB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9C,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;SAC3C,CAAC,EAHkB,CAGlB;QACF,MAAM,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YAChB,4FAA4F;YAC5F,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO;YACjD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO;SAC9C,CAAC,EAJe,CAIf;QACF,WAAW,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;YACrB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAC9C,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB;SACpD,CAAC,EAJoB,CAIpB;QACF,GAAG,EAAE;YACH,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,GAAG;SACb;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;SAChB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAwB;QAC5D,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,SAAS,GAAG,gCAAY,CAC5B,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,EAC3C,KAAK,CAAC,KAAK,KAAK,WAAW,IAAI,MAAM,CAAC,SAAS,EAC/C,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,MAAM,EACzC,KAAK,CAAC,KAAK,KAAK,aAAa,IAAI,MAAM,CAAC,WAAW,EACnD,KAAK,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EACvB,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,MAAM,CAAC,IAAI,EACjE,KAAK,CAAC,SAAS,CAChB,CAAC;QACF,OAAO,+BAAc,CAAC,KAAK,CAAsB,CAAC;IACpD,CAAC,CAAC;IAbW,QAAA,qBAAqB,yBAahC","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { useBadgeStyles } from '../Badge/useBadgeStyles';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nconst useStyles = makeStyles({\n root: {\n minWidth: 'auto',\n },\n warning: theme => ({\n backgroundColor: theme.global.palette.cranberry.primary,\n borderColor: theme.global.palette.cranberry.primary,\n }),\n important: theme => ({\n backgroundColor: theme.global.palette.grey[14],\n borderColor: theme.global.palette.grey[14],\n }),\n severe: theme => ({\n // TODO: update these colors once the color used in the design spec has existing color token\n backgroundColor: theme.global.palette.red.primary,\n borderColor: theme.global.palette.red.primary,\n }),\n informative: theme => ({\n backgroundColor: theme.global.palette.grey[92],\n borderColor: theme.global.palette.grey[92],\n color: theme.alias.color.neutral.neutralForeground3,\n }),\n dot: {\n width: '6px',\n height: '6px',\n padding: '0',\n },\n hide: {\n display: 'none',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles = (state: CounterBadgeState): CounterBadgeState => {\n const styles = useStyles();\n state.className = mergeClasses(\n styles.root,\n state.color === 'warning' && styles.warning,\n state.color === 'important' && styles.important,\n state.color === 'severe' && styles.severe,\n state.color === 'informative' && styles.informative,\n state.dot && styles.dot,\n !state.showZero && state.count === 0 && !state.dot && styles.hide,\n state.className,\n );\n return useBadgeStyles(state) as CounterBadgeState;\n};\n"]}
@@ -1,10 +0,0 @@
1
- import * as React from 'react';
2
- export declare const renderIcon: (SVGElement: (props: {
3
- svgClasses: string;
4
- }) => JSX.Element) => React.FC<React.HTMLAttributes<HTMLSpanElement>>;
5
- declare const SkypeMinusIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
6
- declare const SkypeClockIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
7
- declare const SkypeCheckIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
8
- declare const SkypeArrowIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
9
- declare const CancelIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
10
- export { SkypeMinusIcon, SkypeClockIcon, SkypeCheckIcon, SkypeArrowIcon, CancelIcon };