@fluentui/react-badge 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.11
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +672 -18
- package/CHANGELOG.md +274 -103
- package/dist/index.d.ts +157 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/Badge.js.map +1 -1
- package/lib/CounterBadge.js.map +1 -1
- package/lib/PresenceBadge.js.map +1 -1
- package/lib/components/Badge/Badge.js +8 -8
- package/lib/components/Badge/Badge.js.map +1 -1
- package/lib/components/Badge/Badge.types.js.map +1 -1
- package/lib/components/Badge/index.js +0 -1
- package/lib/components/Badge/index.js.map +1 -1
- package/lib/components/Badge/renderBadge.js +9 -7
- package/lib/components/Badge/renderBadge.js.map +1 -1
- package/lib/components/Badge/useBadge.js +18 -22
- package/lib/components/Badge/useBadge.js.map +1 -1
- package/lib/components/Badge/useBadgeStyles.js +213 -203
- package/lib/components/Badge/useBadgeStyles.js.map +1 -1
- package/lib/components/CounterBadge/CounterBadge.js +8 -8
- package/lib/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/CounterBadge.types.js.map +1 -1
- package/lib/components/CounterBadge/index.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadge.js +18 -25
- package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadgeStyles.js +18 -40
- package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.js +8 -8
- package/lib/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
- package/lib/components/PresenceBadge/index.js.map +1 -1
- package/lib/components/PresenceBadge/presenceIcons.js +128 -0
- package/lib/components/PresenceBadge/presenceIcons.js.map +1 -0
- package/lib/components/PresenceBadge/usePresenceBadge.js +52 -26
- package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +60 -46
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib/index.js +3 -5
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Badge.js +1 -1
- package/lib-commonjs/Badge.js.map +1 -1
- package/lib-commonjs/CounterBadge.js +1 -1
- package/lib-commonjs/CounterBadge.js.map +1 -1
- package/lib-commonjs/PresenceBadge.js +1 -1
- package/lib-commonjs/PresenceBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/Badge.js +9 -9
- package/lib-commonjs/components/Badge/Badge.js.map +1 -1
- package/lib-commonjs/components/Badge/Badge.types.js.map +1 -1
- package/lib-commonjs/components/Badge/index.js +1 -3
- package/lib-commonjs/components/Badge/index.js.map +1 -1
- package/lib-commonjs/components/Badge/renderBadge.js +13 -12
- package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadge.js +21 -26
- package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadgeStyles.js +217 -205
- package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/CounterBadge.js +9 -9
- package/lib-commonjs/components/CounterBadge/CounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/CounterBadge.types.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/index.js +1 -1
- package/lib-commonjs/components/CounterBadge/index.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js +20 -28
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +21 -42
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.js +9 -9
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/index.js +1 -1
- package/lib-commonjs/components/PresenceBadge/index.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/presenceIcons.js +136 -0
- package/lib-commonjs/components/PresenceBadge/presenceIcons.js.map +1 -0
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +54 -29
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +63 -48
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib-commonjs/index.js +82 -6
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +23 -27
- package/dist/react-badge.d.ts +0 -154
- package/lib/Badge.d.ts +0 -1
- package/lib/CounterBadge.d.ts +0 -1
- package/lib/PresenceBadge.d.ts +0 -1
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -13
- package/lib/common/isConformant.js.map +0 -1
- package/lib/components/Badge/Badge.d.ts +0 -6
- package/lib/components/Badge/Badge.types.d.ts +0 -35
- package/lib/components/Badge/index.d.ts +0 -5
- package/lib/components/Badge/renderBadge.d.ts +0 -2
- package/lib/components/Badge/useBadge.d.ts +0 -6
- package/lib/components/Badge/useBadgeStyles.d.ts +0 -5
- package/lib/components/CounterBadge/CounterBadge.d.ts +0 -6
- package/lib/components/CounterBadge/CounterBadge.types.d.ts +0 -41
- package/lib/components/CounterBadge/index.d.ts +0 -4
- package/lib/components/CounterBadge/useCounterBadge.d.ts +0 -6
- package/lib/components/CounterBadge/useCounterBadgeStyles.d.ts +0 -5
- package/lib/components/PresenceBadge/DefaultPresenceBadgeIcons.d.ts +0 -10
- package/lib/components/PresenceBadge/DefaultPresenceBadgeIcons.js +0 -111
- package/lib/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +0 -1
- package/lib/components/PresenceBadge/PresenceBadge.d.ts +0 -6
- package/lib/components/PresenceBadge/PresenceBadge.types.d.ts +0 -17
- package/lib/components/PresenceBadge/index.d.ts +0 -4
- package/lib/components/PresenceBadge/usePresenceBadge.d.ts +0 -6
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.d.ts +0 -5
- package/lib/index.d.ts +0 -5
- package/lib-commonjs/Badge.d.ts +0 -1
- package/lib-commonjs/CounterBadge.d.ts +0 -1
- package/lib-commonjs/PresenceBadge.d.ts +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -24
- package/lib-commonjs/common/isConformant.js.map +0 -1
- package/lib-commonjs/components/Badge/Badge.d.ts +0 -6
- package/lib-commonjs/components/Badge/Badge.types.d.ts +0 -35
- package/lib-commonjs/components/Badge/index.d.ts +0 -5
- package/lib-commonjs/components/Badge/renderBadge.d.ts +0 -2
- package/lib-commonjs/components/Badge/useBadge.d.ts +0 -6
- package/lib-commonjs/components/Badge/useBadgeStyles.d.ts +0 -5
- package/lib-commonjs/components/CounterBadge/CounterBadge.d.ts +0 -6
- package/lib-commonjs/components/CounterBadge/CounterBadge.types.d.ts +0 -41
- package/lib-commonjs/components/CounterBadge/index.d.ts +0 -4
- package/lib-commonjs/components/CounterBadge/useCounterBadge.d.ts +0 -6
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.d.ts +0 -5
- package/lib-commonjs/components/PresenceBadge/DefaultPresenceBadgeIcons.d.ts +0 -10
- package/lib-commonjs/components/PresenceBadge/DefaultPresenceBadgeIcons.js +0 -127
- package/lib-commonjs/components/PresenceBadge/DefaultPresenceBadgeIcons.js.map +0 -1
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.d.ts +0 -6
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts +0 -17
- package/lib-commonjs/components/PresenceBadge/index.d.ts +0 -4
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.d.ts +0 -6
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.d.ts +0 -5
- package/lib-commonjs/index.d.ts +0 -5
package/dist/index.d.ts
ADDED
@@ -0,0 +1,157 @@
|
|
1
|
+
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
|
+
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
4
|
+
import * as React_2 from 'react';
|
5
|
+
import type { Slot } from '@fluentui/react-utilities';
|
6
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Define a styled Badge, using the `useBadge_unstable` hook.
|
10
|
+
*/
|
11
|
+
export declare const Badge: ForwardRefComponent<BadgeProps>;
|
12
|
+
|
13
|
+
export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
|
14
|
+
|
15
|
+
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
|
16
|
+
/**
|
17
|
+
* A Badge can be filled, outline, ghost, inverted
|
18
|
+
* @defaultvalue filled
|
19
|
+
*/
|
20
|
+
appearance?: 'filled' | 'ghost' | 'outline' | 'tint';
|
21
|
+
/**
|
22
|
+
* A Badge can be one of preset colors
|
23
|
+
* @defaultvalue brand
|
24
|
+
*/
|
25
|
+
color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
|
26
|
+
/**
|
27
|
+
* A Badge can position the icon before or after the content.
|
28
|
+
* @defaultvalue before
|
29
|
+
*/
|
30
|
+
iconPosition?: 'before' | 'after';
|
31
|
+
/**
|
32
|
+
* A Badge can be square, circular or rounded.
|
33
|
+
* @defaultvalue circular
|
34
|
+
*/
|
35
|
+
shape?: 'circular' | 'rounded' | 'square';
|
36
|
+
/**
|
37
|
+
* A Badge can be on of several preset sizes.
|
38
|
+
* @defaultvalue medium
|
39
|
+
*/
|
40
|
+
size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
41
|
+
};
|
42
|
+
|
43
|
+
export declare type BadgeSlots = {
|
44
|
+
root: Slot<'div'>;
|
45
|
+
icon?: Slot<'span'>;
|
46
|
+
};
|
47
|
+
|
48
|
+
export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;
|
49
|
+
|
50
|
+
/**
|
51
|
+
* Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
|
52
|
+
*/
|
53
|
+
export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
|
54
|
+
|
55
|
+
export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
|
56
|
+
|
57
|
+
export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
|
58
|
+
/**
|
59
|
+
* A Badge can have different appearances that emphasize certain parts of it:
|
60
|
+
* - filled: The default appearance if one is not specified.
|
61
|
+
* The badge background is filled with color with a contrasting foreground text to match.
|
62
|
+
* - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.
|
63
|
+
* @default filled
|
64
|
+
*/
|
65
|
+
appearance?: 'filled' | 'ghost';
|
66
|
+
/**
|
67
|
+
* Semantic colors for a counter badge
|
68
|
+
* @default brand
|
69
|
+
*/
|
70
|
+
color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
|
71
|
+
/**
|
72
|
+
* Value displayed by the Badge
|
73
|
+
* @default 0
|
74
|
+
*/
|
75
|
+
count?: number;
|
76
|
+
/**
|
77
|
+
* If a dot should be displayed without the count
|
78
|
+
* @default false
|
79
|
+
*/
|
80
|
+
dot?: boolean;
|
81
|
+
/**
|
82
|
+
* Max number to be displayed
|
83
|
+
* @default 99
|
84
|
+
*/
|
85
|
+
overflowCount?: number;
|
86
|
+
/**
|
87
|
+
* A Badge can be circular or rounded
|
88
|
+
* @default circular
|
89
|
+
*/
|
90
|
+
shape?: 'circular' | 'rounded';
|
91
|
+
/**
|
92
|
+
* If the badge should be shown when count is 0
|
93
|
+
* @default false
|
94
|
+
*/
|
95
|
+
showZero?: boolean;
|
96
|
+
};
|
97
|
+
|
98
|
+
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> & Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;
|
99
|
+
|
100
|
+
/**
|
101
|
+
* Define a styled Badge, using the `useBadge_unstable` hook.
|
102
|
+
*/
|
103
|
+
export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
|
104
|
+
|
105
|
+
export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
|
106
|
+
|
107
|
+
export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> & Pick<BadgeProps, 'size'> & {
|
108
|
+
/**
|
109
|
+
* Represents several status
|
110
|
+
* @default available
|
111
|
+
*/
|
112
|
+
status?: PresenceBadgeStatus;
|
113
|
+
/**
|
114
|
+
* Modifies the display to indicate that the user is out of office.
|
115
|
+
* This can be combined with any status to display an out-of-office version of that status
|
116
|
+
* @default false
|
117
|
+
*/
|
118
|
+
outOfOffice?: boolean;
|
119
|
+
};
|
120
|
+
|
121
|
+
export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
|
122
|
+
|
123
|
+
export declare type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown';
|
124
|
+
|
125
|
+
export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
|
126
|
+
|
127
|
+
/**
|
128
|
+
* Returns the props and state required to render the component
|
129
|
+
*/
|
130
|
+
export declare const useBadge_unstable: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
|
131
|
+
|
132
|
+
/**
|
133
|
+
* Applies style classnames to slots
|
134
|
+
*/
|
135
|
+
export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;
|
136
|
+
|
137
|
+
/**
|
138
|
+
* Returns the props and state required to render the component
|
139
|
+
*/
|
140
|
+
export declare const useCounterBadge_unstable: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeState;
|
141
|
+
|
142
|
+
/**
|
143
|
+
* Applies style classnames to slots
|
144
|
+
*/
|
145
|
+
export declare const useCounterBadgeStyles_unstable: (state: CounterBadgeState) => CounterBadgeState;
|
146
|
+
|
147
|
+
/**
|
148
|
+
* Returns the props and state required to render the component
|
149
|
+
*/
|
150
|
+
export declare const usePresenceBadge_unstable: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeState;
|
151
|
+
|
152
|
+
/**
|
153
|
+
* Applies style classnames to slots
|
154
|
+
*/
|
155
|
+
export declare const usePresenceBadgeStyles_unstable: (state: PresenceBadgeState) => PresenceBadgeState;
|
156
|
+
|
157
|
+
export { }
|
File without changes
|
package/lib/Badge.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"../src/","sources":["Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Badge/index';\n"]}
|
package/lib/CounterBadge.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CounterBadge.js","sourceRoot":"","sources":["
|
1
|
+
{"version":3,"file":"CounterBadge.js","sourceRoot":"../src/","sources":["CounterBadge.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './components/CounterBadge/index';\n"]}
|
package/lib/PresenceBadge.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"PresenceBadge.js","sourceRoot":"","sources":["
|
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,15 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import {
|
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 `
|
6
|
+
* Define a styled Badge, using the `useBadge_unstable` hook.
|
7
7
|
*/
|
8
8
|
|
9
|
-
export
|
10
|
-
|
11
|
-
|
12
|
-
return
|
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":["
|
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 +1 @@
|
|
1
|
-
{"version":3,"file":"Badge.types.js","sourceRoot":"","sources":["
|
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\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'> & {\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\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
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,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
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
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":["
|
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/"}
|
@@ -1,34 +1,30 @@
|
|
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
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
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',
|
29
|
-
ref
|
30
|
-
|
31
|
-
}
|
24
|
+
root: getNativeElementProps('div', {
|
25
|
+
ref,
|
26
|
+
...props
|
27
|
+
}),
|
32
28
|
icon: resolveShorthand(props.icon)
|
33
29
|
};
|
34
30
|
return state;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
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,SAAG;AAF8B,KAAR,CAVH;AAcxB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;AAdE,GAA1B;AAiBA,SAAO,KAAP;AACD,CA3BM","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 ...props,\n }),\n icon: resolveShorthand(props.icon),\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|