@fluentui/react-badge 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (118) hide show
  1. package/CHANGELOG.json +413 -18
  2. package/CHANGELOG.md +97 -11
  3. package/dist/react-badge.d.ts +33 -28
  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/components/Badge/Badge.d.ts +1 -1
  8. package/lib/components/Badge/Badge.js +8 -8
  9. package/lib/components/Badge/Badge.js.map +1 -1
  10. package/lib/components/Badge/Badge.types.d.ts +4 -5
  11. package/lib/components/Badge/Badge.types.js.map +1 -1
  12. package/lib/components/Badge/index.d.ts +1 -1
  13. package/lib/components/Badge/index.js +0 -1
  14. package/lib/components/Badge/index.js.map +1 -1
  15. package/lib/components/Badge/renderBadge.d.ts +1 -1
  16. package/lib/components/Badge/renderBadge.js +9 -7
  17. package/lib/components/Badge/renderBadge.js.map +1 -1
  18. package/lib/components/Badge/useBadge.d.ts +1 -1
  19. package/lib/components/Badge/useBadge.js +19 -22
  20. package/lib/components/Badge/useBadge.js.map +1 -1
  21. package/lib/components/Badge/useBadgeStyles.d.ts +2 -1
  22. package/lib/components/Badge/useBadgeStyles.js +210 -203
  23. package/lib/components/Badge/useBadgeStyles.js.map +1 -1
  24. package/lib/components/CounterBadge/CounterBadge.d.ts +1 -1
  25. package/lib/components/CounterBadge/CounterBadge.js +8 -8
  26. package/lib/components/CounterBadge/CounterBadge.js.map +1 -1
  27. package/lib/components/CounterBadge/CounterBadge.types.d.ts +9 -9
  28. package/lib/components/CounterBadge/CounterBadge.types.js.map +1 -1
  29. package/lib/components/CounterBadge/index.js.map +1 -1
  30. package/lib/components/CounterBadge/useCounterBadge.d.ts +1 -1
  31. package/lib/components/CounterBadge/useCounterBadge.js +19 -25
  32. package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
  33. package/lib/components/CounterBadge/useCounterBadgeStyles.d.ts +2 -1
  34. package/lib/components/CounterBadge/useCounterBadgeStyles.js +10 -40
  35. package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
  36. package/lib/components/PresenceBadge/PresenceBadge.d.ts +1 -1
  37. package/lib/components/PresenceBadge/PresenceBadge.js +8 -8
  38. package/lib/components/PresenceBadge/PresenceBadge.js.map +1 -1
  39. package/lib/components/PresenceBadge/PresenceBadge.types.d.ts +7 -5
  40. package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
  41. package/lib/components/PresenceBadge/index.js.map +1 -1
  42. package/lib/components/PresenceBadge/presenceIcons.d.ts +11 -0
  43. package/lib/components/PresenceBadge/presenceIcons.js +128 -0
  44. package/lib/components/PresenceBadge/presenceIcons.js.map +1 -0
  45. package/lib/components/PresenceBadge/usePresenceBadge.d.ts +1 -1
  46. package/lib/components/PresenceBadge/usePresenceBadge.js +36 -25
  47. package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
  48. package/lib/components/PresenceBadge/usePresenceBadgeStyles.d.ts +2 -1
  49. package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +43 -46
  50. package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
  51. package/lib/index.js.map +1 -1
  52. package/lib-commonjs/Badge.js +1 -1
  53. package/lib-commonjs/Badge.js.map +1 -1
  54. package/lib-commonjs/CounterBadge.js +1 -1
  55. package/lib-commonjs/CounterBadge.js.map +1 -1
  56. package/lib-commonjs/PresenceBadge.js +1 -1
  57. package/lib-commonjs/PresenceBadge.js.map +1 -1
  58. package/lib-commonjs/components/Badge/Badge.d.ts +1 -1
  59. package/lib-commonjs/components/Badge/Badge.js +9 -9
  60. package/lib-commonjs/components/Badge/Badge.js.map +1 -1
  61. package/lib-commonjs/components/Badge/Badge.types.d.ts +4 -5
  62. package/lib-commonjs/components/Badge/Badge.types.js.map +1 -1
  63. package/lib-commonjs/components/Badge/index.d.ts +1 -1
  64. package/lib-commonjs/components/Badge/index.js +1 -3
  65. package/lib-commonjs/components/Badge/index.js.map +1 -1
  66. package/lib-commonjs/components/Badge/renderBadge.d.ts +1 -1
  67. package/lib-commonjs/components/Badge/renderBadge.js +13 -12
  68. package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
  69. package/lib-commonjs/components/Badge/useBadge.d.ts +1 -1
  70. package/lib-commonjs/components/Badge/useBadge.js +22 -26
  71. package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
  72. package/lib-commonjs/components/Badge/useBadgeStyles.d.ts +2 -1
  73. package/lib-commonjs/components/Badge/useBadgeStyles.js +214 -205
  74. package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
  75. package/lib-commonjs/components/CounterBadge/CounterBadge.d.ts +1 -1
  76. package/lib-commonjs/components/CounterBadge/CounterBadge.js +9 -9
  77. package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
  78. package/lib-commonjs/components/CounterBadge/CounterBadge.types.d.ts +9 -9
  79. package/lib-commonjs/components/CounterBadge/CounterBadge.types.js.map +1 -1
  80. package/lib-commonjs/components/CounterBadge/index.js +1 -1
  81. package/lib-commonjs/components/CounterBadge/index.js.map +1 -1
  82. package/lib-commonjs/components/CounterBadge/useCounterBadge.d.ts +1 -1
  83. package/lib-commonjs/components/CounterBadge/useCounterBadge.js +21 -28
  84. package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
  85. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.d.ts +2 -1
  86. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +13 -42
  87. package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
  88. package/lib-commonjs/components/PresenceBadge/PresenceBadge.d.ts +1 -1
  89. package/lib-commonjs/components/PresenceBadge/PresenceBadge.js +9 -9
  90. package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
  91. package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts +7 -5
  92. package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
  93. package/lib-commonjs/components/PresenceBadge/index.js +1 -1
  94. package/lib-commonjs/components/PresenceBadge/index.js.map +1 -1
  95. package/lib-commonjs/components/PresenceBadge/presenceIcons.d.ts +11 -0
  96. package/lib-commonjs/components/PresenceBadge/presenceIcons.js +136 -0
  97. package/lib-commonjs/components/PresenceBadge/presenceIcons.js.map +1 -0
  98. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.d.ts +1 -1
  99. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +38 -28
  100. package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
  101. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.d.ts +2 -1
  102. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +46 -48
  103. package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
  104. package/lib-commonjs/index.js +1 -1
  105. package/lib-commonjs/index.js.map +1 -1
  106. package/package.json +14 -15
  107. package/lib/common/isConformant.d.ts +0 -4
  108. package/lib/common/isConformant.js +0 -13
  109. package/lib/common/isConformant.js.map +0 -1
  110. package/lib/components/PresenceBadge/DefaultPresenceBadgeIcons.d.ts +0 -10
  111. package/lib/components/PresenceBadge/DefaultPresenceBadgeIcons.js +0 -111
  112. package/lib/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +0 -1
  113. package/lib-commonjs/common/isConformant.d.ts +0 -4
  114. package/lib-commonjs/common/isConformant.js +0 -24
  115. package/lib-commonjs/common/isConformant.js.map +0 -1
  116. package/lib-commonjs/components/PresenceBadge/DefaultPresenceBadgeIcons.d.ts +0 -10
  117. package/lib-commonjs/components/PresenceBadge/DefaultPresenceBadgeIcons.js +0 -127
  118. package/lib-commonjs/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +0 -1
@@ -1,15 +1,17 @@
1
1
  import type { ComponentProps } from '@fluentui/react-utilities';
2
2
  import type { ComponentState } from '@fluentui/react-utilities';
3
3
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
4
- import type { ObjectShorthandProps } from '@fluentui/react-utilities';
5
4
  import * as React_2 from 'react';
5
+ import type { Slot } from '@fluentui/react-utilities';
6
6
 
7
7
  /**
8
- * Define a styled Badge, using the `useBadge` hook.
8
+ * Define a styled Badge, using the `useBadge_unstable` hook.
9
9
  */
10
10
  export declare const Badge: ForwardRefComponent<BadgeProps>;
11
11
 
12
- export declare type BadgeCommons = {
12
+ export declare const badgeClassName = "fui-Badge";
13
+
14
+ declare type BadgeCommons = {
13
15
  /**
14
16
  * A Badge can be filled, outline, ghost, inverted
15
17
  * @defaultvalue filled
@@ -37,21 +39,23 @@ export declare type BadgeCommons = {
37
39
  size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
38
40
  };
39
41
 
40
- export declare type BadgeProps = ComponentProps<Partial<BadgeSlots>> & Partial<BadgeCommons>;
42
+ export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;
41
43
 
42
44
  export declare type BadgeSlots = {
43
- root: ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
44
- icon?: ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
45
+ root: Slot<'div'>;
46
+ icon?: Slot<'span'>;
45
47
  };
46
48
 
47
49
  export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
48
50
 
49
51
  /**
50
- * Define a styled CounterBadge, using the `useCounterBadge` hook.
52
+ * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
51
53
  */
52
54
  export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
53
55
 
54
- export declare type CounterBadgeCommons = {
56
+ export declare const counterBadgeClassName = "fui-CounterBadge";
57
+
58
+ declare type CounterBadgeCommons = {
55
59
  /**
56
60
  * Max number to be displayed
57
61
  * @default 99
@@ -82,24 +86,25 @@ export declare type CounterBadgeCommons = {
82
86
  * @default filled
83
87
  */
84
88
  appearance: 'filled' | 'ghost';
89
+ /**
90
+ * Semantic colors for a counter badge
91
+ * @default brand
92
+ */
93
+ color: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
85
94
  };
86
95
 
87
- /**
88
- * {@docCategory CounterBadge}
89
- */
90
- export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
96
+ export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape' | 'color'> & Partial<CounterBadgeCommons>;
91
97
 
92
- /**
93
- * {@docCategory CounterBadge}
94
- */
95
- export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape'> & CounterBadgeCommons;
98
+ export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color'> & CounterBadgeCommons;
96
99
 
97
100
  /**
98
- * Define a styled Badge, using the `useBadge` hook.
101
+ * Define a styled Badge, using the `useBadge_unstable` hook.
99
102
  */
100
103
  export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
101
104
 
102
- export declare interface PresenceBadgeCommons {
105
+ export declare const presenceBadgeClassName = "fui-PresenceBadge";
106
+
107
+ declare type PresenceBadgeCommons = {
103
108
  /**
104
109
  * Represents several status
105
110
  * @default available
@@ -111,44 +116,44 @@ export declare interface PresenceBadgeCommons {
111
116
  * @default false
112
117
  */
113
118
  outOfOffice: boolean;
114
- }
119
+ } & BadgeCommons;
115
120
 
116
- export declare type PresenceBadgeProps = BadgeProps & Partial<PresenceBadgeCommons>;
121
+ export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size'>>;
117
122
 
118
- export declare type PresenceBadgeState = BadgeState & PresenceBadgeCommons;
123
+ export declare type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;
119
124
 
120
125
  export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
121
126
 
122
- export declare const renderBadge: (state: BadgeState) => JSX.Element;
127
+ export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
123
128
 
124
129
  /**
125
130
  * Returns the props and state required to render the component
126
131
  */
127
- export declare const useBadge: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
132
+ export declare const useBadge_unstable: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
128
133
 
129
134
  /**
130
135
  * Applies style classnames to slots
131
136
  */
132
- export declare const useBadgeStyles: (state: BadgeState) => BadgeState;
137
+ export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;
133
138
 
134
139
  /**
135
140
  * Returns the props and state required to render the component
136
141
  */
137
- export declare const useCounterBadge: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeState;
142
+ export declare const useCounterBadge_unstable: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeState;
138
143
 
139
144
  /**
140
145
  * Applies style classnames to slots
141
146
  */
142
- export declare const useCounterBadgeStyles: (state: CounterBadgeState) => CounterBadgeState;
147
+ export declare const useCounterBadgeStyles_unstable: (state: CounterBadgeState) => CounterBadgeState;
143
148
 
144
149
  /**
145
150
  * Returns the props and state required to render the component
146
151
  */
147
- export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeState;
152
+ export declare const usePresenceBadge_unstable: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeState;
148
153
 
149
154
  /**
150
155
  * Applies style classnames to slots
151
156
  */
152
- export declare const usePresenceBadgeStyles: (state: PresenceBadgeState) => PresenceBadgeState;
157
+ export declare const usePresenceBadgeStyles_unstable: (state: PresenceBadgeState) => PresenceBadgeState;
153
158
 
154
159
  export { }
package/lib/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
1
+ {"version":3,"file":"Badge.js","sourceRoot":"../src/","sources":["Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Badge/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"CounterBadge.js","sourceRoot":"","sources":["../src/CounterBadge.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC"}
1
+ {"version":3,"file":"CounterBadge.js","sourceRoot":"../src/","sources":["CounterBadge.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './components/CounterBadge/index';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"PresenceBadge.js","sourceRoot":"","sources":["../src/PresenceBadge.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
1
+ {"version":3,"file":"PresenceBadge.js","sourceRoot":"../src/","sources":["PresenceBadge.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/PresenceBadge/index';\n"]}
@@ -1,6 +1,6 @@
1
1
  import type { BadgeProps } from './Badge.types';
2
2
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
3
  /**
4
- * Define a styled Badge, using the `useBadge` hook.
4
+ * Define a styled Badge, using the `useBadge_unstable` hook.
5
5
  */
6
6
  export declare const Badge: ForwardRefComponent<BadgeProps>;
@@ -1,15 +1,15 @@
1
1
  import * as React from 'react';
2
- import { useBadge } from './useBadge';
3
- import { useBadgeStyles } from './useBadgeStyles';
4
- import { renderBadge } from './renderBadge';
2
+ import { useBadge_unstable } from './useBadge';
3
+ import { useBadgeStyles_unstable } from './useBadgeStyles';
4
+ import { renderBadge_unstable } from './renderBadge';
5
5
  /**
6
- * Define a styled Badge, using the `useBadge` hook.
6
+ * Define a styled Badge, using the `useBadge_unstable` hook.
7
7
  */
8
8
 
9
- export var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
10
- var state = useBadge(props, ref);
11
- useBadgeStyles(state);
12
- return renderBadge(state);
9
+ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
10
+ const state = useBadge_unstable(props, ref);
11
+ useBadgeStyles_unstable(state);
12
+ return renderBadge_unstable(state);
13
13
  });
14
14
  Badge.displayName = 'Badge';
15
15
  //# sourceMappingURL=Badge.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,WAAT,QAA4B,eAA5B;AAIA;;AAEG;;AACH,OAAO,IAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAChF,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AACA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}
1
+ {"version":3,"sources":["components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,oBAAT,QAAqC,eAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AACA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n const state = useBadge_unstable(props, ref);\n useBadgeStyles_unstable(state);\n\n return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"sourceRoot":"../src/"}
@@ -1,8 +1,7 @@
1
- import * as React from 'react';
2
- import type { ComponentProps, ComponentState, ObjectShorthandProps } from '@fluentui/react-utilities';
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
3
2
  export declare type BadgeSlots = {
4
- root: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
5
- icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
3
+ root: Slot<'div'>;
4
+ icon?: Slot<'span'>;
6
5
  };
7
6
  export declare type BadgeCommons = {
8
7
  /**
@@ -31,5 +30,5 @@ export declare type BadgeCommons = {
31
30
  */
32
31
  size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
33
32
  };
34
- export declare type BadgeProps = ComponentProps<Partial<BadgeSlots>> & Partial<BadgeCommons>;
33
+ export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;
35
34
  export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.types.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"Badge.types.js","sourceRoot":"../src/","sources":["components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\nexport type BadgeCommons = {\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance: 'filled' | 'ghost' | 'outline' | 'tint';\n\n /**\n * A Badge can be one of preset colors\n * @defaultvalue brand\n */\n color: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n /**\n * A Badge can position the icon before or after the content.\n * @defaultvalue before\n */\n iconPosition: 'before' | 'after';\n\n /**\n * A Badge can be square, circular or rounded.\n * @defaultvalue circular\n */\n shape: 'circular' | 'rounded' | 'square';\n\n /**\n * A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;\nexport type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;\n"]}
@@ -1,5 +1,5 @@
1
1
  export * from './Badge';
2
- export * from './Badge.types';
2
+ export type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';
3
3
  export * from './renderBadge';
4
4
  export * from './useBadge';
5
5
  export * from './useBadgeStyles';
@@ -1,5 +1,4 @@
1
1
  export * from './Badge';
2
- export * from './Badge.types';
3
2
  export * from './renderBadge';
4
3
  export * from './useBadge';
5
4
  export * from './useBadgeStyles';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAGxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"]}
@@ -1,2 +1,2 @@
1
1
  import type { BadgeState } from './Badge.types';
2
- export declare const renderBadge: (state: BadgeState) => JSX.Element;
2
+ export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
@@ -1,11 +1,13 @@
1
- import { __assign } from "tslib";
2
1
  import * as React from 'react';
3
2
  import { getSlots } from '@fluentui/react-utilities';
4
- export var renderBadge = function (state) {
5
- var _a = getSlots(state, ['icon', 'root']),
6
- slots = _a.slots,
7
- slotProps = _a.slotProps;
8
-
9
- return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.iconPosition === 'before' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), state.root.children, state.iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
3
+ export const renderBadge_unstable = state => {
4
+ const {
5
+ slots,
6
+ slotProps
7
+ } = getSlots(state);
8
+ return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
9
+ }, state.iconPosition === 'before' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
10
+ }), state.root.children, state.iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
11
+ }));
10
12
  };
11
13
  //# sourceMappingURL=renderBadge.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Badge/renderBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,QAAQ,CAAa,KAAb,EAAoB,CAAC,MAAD,EAAS,MAAT,CAApB,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,KAAK,CAAC,YAAN,KAAuB,QAAvB,iBAAmC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADtC,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,iBAAkC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAHrC,CADF;AAOD,CAVM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,IAAmC,KAAK,CAAC,IAAzC,iBAAiD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADpD,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,IAAkC,KAAK,CAAC,IAAxC,iBAAgD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAHnD,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n {state.root.children}\n {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
@@ -3,4 +3,4 @@ import type { BadgeProps, BadgeState } from './Badge.types';
3
3
  /**
4
4
  * Returns the props and state required to render the component
5
5
  */
6
- export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>) => BadgeState;
6
+ export declare const useBadge_unstable: (props: BadgeProps, ref: React.Ref<HTMLElement>) => BadgeState;
@@ -1,34 +1,31 @@
1
- import { __assign } from "tslib";
2
1
  import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
3
2
  /**
4
3
  * Returns the props and state required to render the component
5
4
  */
6
5
 
7
- export var useBadge = function (props, ref) {
8
- var _a = props.shape,
9
- shape = _a === void 0 ? 'circular' : _a,
10
- _b = props.size,
11
- size = _b === void 0 ? 'medium' : _b,
12
- _c = props.iconPosition,
13
- iconPosition = _c === void 0 ? 'before' : _c,
14
- _d = props.appearance,
15
- appearance = _d === void 0 ? 'filled' : _d,
16
- _e = props.color,
17
- color = _e === void 0 ? 'brand' : _e;
18
- var state = {
19
- shape: shape,
20
- size: size,
21
- iconPosition: iconPosition,
22
- appearance: appearance,
23
- color: color,
6
+ export const useBadge_unstable = (props, ref) => {
7
+ const {
8
+ shape = 'circular',
9
+ size = 'medium',
10
+ iconPosition = 'before',
11
+ appearance = 'filled',
12
+ color = 'brand'
13
+ } = props;
14
+ const state = {
15
+ shape,
16
+ size,
17
+ iconPosition,
18
+ appearance,
19
+ color,
24
20
  components: {
25
21
  root: 'div',
26
22
  icon: 'span'
27
23
  },
28
- root: getNativeElementProps('div', __assign({
29
- ref: ref,
30
- 'aria-hidden': true
31
- }, props)),
24
+ root: getNativeElementProps('div', {
25
+ ref,
26
+ 'aria-hidden': true,
27
+ ...props
28
+ }),
32
29
  icon: resolveShorthand(props.icon)
33
30
  };
34
31
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Badge/useBadge.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAA+C;AAEnE,MAAA,EAAA,GAKE,KAAK,CALW,KAAlB;AAAA,MAAA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,UAAH,GAAa,EAAlB;AAAA,MACA,EAAA,GAIE,KAAK,CAJQ,IADf;AAAA,MACA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EADf;AAAA,MAEA,EAAA,GAGE,KAAK,CAHgB,YAFvB;AAAA,MAEA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAFvB;AAAA,MAGA,EAAA,GAEE,KAAK,CAFc,UAHrB;AAAA,MAGA,UAAU,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAHrB;AAAA,MAIA,EAAA,GACE,KAAK,CADQ,KAJf;AAAA,MAIA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,OAAH,GAAU,EAJf;AAOF,MAAM,KAAK,GAAe;AACxB,IAAA,KAAK,EAAA,KADmB;AAExB,IAAA,IAAI,EAAA,IAFoB;AAGxB,IAAA,YAAY,EAAA,YAHY;AAIxB,IAAA,UAAU,EAAA,UAJc;AAKxB,IAAA,KAAK,EAAA,KALmB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KANY;AAUxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA,GAD4B;AAE/B,qBAAe;AAFgB,KAAA,EAG5B,KAH4B,CAAN,CAVH;AAexB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;AAfE,GAA1B;AAkBA,SAAO,KAAP;AACD,CA5BM","sourceRoot":""}
1
+ {"version":3,"sources":["components/Badge/useBadge.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AACJ,IAAA,KAAK,GAAG,UADJ;AAEJ,IAAA,IAAI,GAAG,QAFH;AAGJ,IAAA,YAAY,GAAG,QAHX;AAIJ,IAAA,UAAU,GAAG,QAJT;AAKJ,IAAA,KAAK,GAAG;AALJ,MAMF,KANJ;AAQA,QAAM,KAAK,GAAe;AACxB,IAAA,KADwB;AAExB,IAAA,IAFwB;AAGxB,IAAA,YAHwB;AAIxB,IAAA,UAJwB;AAKxB,IAAA,KALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KANY;AAUxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,qBAAe,IAFkB;AAGjC,SAAG;AAH8B,KAAR,CAVH;AAexB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;AAfE,GAA1B;AAkBA,SAAO,KAAP;AACD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n const {\n shape = 'circular',\n size = 'medium',\n iconPosition = 'before',\n appearance = 'filled',\n color = 'brand',\n } = props;\n\n const state: BadgeState = {\n shape,\n size,\n iconPosition,\n appearance,\n color,\n components: {\n root: 'div',\n icon: 'span',\n },\n root: getNativeElementProps('div', {\n ref,\n 'aria-hidden': true,\n ...props,\n }),\n icon: resolveShorthand(props.icon),\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1,5 +1,6 @@
1
1
  import type { BadgeState } from './Badge.types';
2
+ export declare const badgeClassName = "fui-Badge";
2
3
  /**
3
4
  * Applies style classnames to slots
4
5
  */
5
- export declare const useBadgeStyles: (state: BadgeState) => BadgeState;
6
+ export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;