@fluentui/react-badge 9.0.0-rc.1 → 9.0.0-rc.10
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +293 -1
- package/CHANGELOG.md +194 -97
- package/dist/{react-badge.d.ts → index.d.ts} +40 -42
- 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.map +1 -1
- package/lib/components/Badge/Badge.types.js.map +1 -1
- package/lib/components/Badge/index.js.map +1 -1
- package/lib/components/Badge/renderBadge.js.map +1 -1
- package/lib/components/Badge/useBadge.js.map +1 -1
- package/lib/components/Badge/useBadgeStyles.js +6 -3
- package/lib/components/Badge/useBadgeStyles.js.map +1 -1
- 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 +1 -2
- package/lib/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib/components/CounterBadge/useCounterBadgeStyles.js +10 -2
- package/lib/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- 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.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadge.js +20 -5
- package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +19 -2
- 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.map +1 -1
- package/lib-commonjs/CounterBadge.js.map +1 -1
- package/lib-commonjs/PresenceBadge.js.map +1 -1
- 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.map +1 -1
- package/lib-commonjs/components/Badge/renderBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadge.js.map +1 -1
- package/lib-commonjs/components/Badge/useBadgeStyles.js +7 -4
- package/lib-commonjs/components/Badge/useBadgeStyles.js.map +1 -1
- 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.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js +1 -2
- package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map +1 -1
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js +11 -3
- package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js.map +1 -1
- 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.map +1 -1
- package/lib-commonjs/components/PresenceBadge/presenceIcons.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +20 -5
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +20 -3
- 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 +17 -20
- package/lib/Badge.d.ts +0 -1
- package/lib/CounterBadge.d.ts +0 -1
- package/lib/PresenceBadge.d.ts +0 -1
- package/lib/components/Badge/Badge.d.ts +0 -6
- package/lib/components/Badge/Badge.types.d.ts +0 -34
- 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 -6
- 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 -6
- package/lib/components/PresenceBadge/PresenceBadge.d.ts +0 -6
- package/lib/components/PresenceBadge/PresenceBadge.types.d.ts +0 -19
- package/lib/components/PresenceBadge/index.d.ts +0 -4
- package/lib/components/PresenceBadge/presenceIcons.d.ts +0 -11
- package/lib/components/PresenceBadge/usePresenceBadge.d.ts +0 -6
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.d.ts +0 -6
- 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/components/Badge/Badge.d.ts +0 -6
- package/lib-commonjs/components/Badge/Badge.types.d.ts +0 -34
- 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 -6
- 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 -6
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.d.ts +0 -6
- package/lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts +0 -19
- package/lib-commonjs/components/PresenceBadge/index.d.ts +0 -4
- package/lib-commonjs/components/PresenceBadge/presenceIcons.d.ts +0 -11
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.d.ts +0 -6
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.d.ts +0 -6
- package/lib-commonjs/index.d.ts +0 -5
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Badge/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","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"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,IAAmC,KAAK,CAAC,IAAzC,IAAiD,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,IAAgD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAHnD,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Badge/useBadge.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,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,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,qBAAe,IAFkB;AAGjC,SAAG;AAH8B,KAA7B,CAVkB;AAexB,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB;AAfkB,GAA1B;AAkBA,SAAO,KAAP;AACD,CA5BM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","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/"}
|
@@ -3,13 +3,16 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useBadgeStyles_unstable = exports.
|
6
|
+
exports.useBadgeStyles_unstable = exports.badgeClassNames = void 0;
|
7
7
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
9
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
11
|
|
12
|
-
exports.
|
12
|
+
exports.badgeClassNames = {
|
13
|
+
root: 'fui-Badge',
|
14
|
+
icon: 'fui-Badge__icon'
|
15
|
+
};
|
13
16
|
|
14
17
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
15
18
|
"base": {
|
@@ -328,11 +331,11 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
|
|
328
331
|
|
329
332
|
const useBadgeStyles_unstable = state => {
|
330
333
|
const rootStyles = useRootStyles();
|
331
|
-
state.root.className = react_1.mergeClasses(exports.
|
334
|
+
state.root.className = react_1.mergeClasses(exports.badgeClassNames.root, rootStyles.base, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') && rootStyles.roundedSmallToTiny, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
|
332
335
|
const iconStyles = useIconStyles();
|
333
336
|
|
334
337
|
if (state.icon) {
|
335
|
-
state.icon.className = react_1.mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
|
338
|
+
state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconStyles.base, iconStyles[state.size], state.icon.className);
|
336
339
|
}
|
337
340
|
|
338
341
|
return state;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Badge/useBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;;AAEb,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA4NA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;AA8BA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,UAAU,GAAG,aAAa,EAAhC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,CAAC,KAAK,CAAC,IAAP,CAHW,EAIrB,UAAU,CAAC,KAAK,CAAC,KAAP,CAJW,EAKrB,KAAK,CAAC,KAAN,KAAgB,SAAhB,KACG,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,KAAK,CAAC,IAAN,KAAe,aAAzC,IAA0D,KAAK,CAAC,IAAN,KAAe,MAD5E,KAEE,UAAU,CAAC,kBAPQ,EAQrB,UAAU,CAAC,KAAK,CAAC,UAAP,CARW,EASrB,UAAU,CAAC,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK,EAAnC,CATW,EAUrB,KAAK,CAAC,IAAN,CAAW,SAVU,CAAvB;AAaA,QAAM,UAAU,GAAG,aAAa,EAAhC;;AACA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,UAAU,CAAC,IAAxB,EAA8B,UAAU,CAAC,KAAK,CAAC,IAAP,CAAxC,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CAtBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}
|
1
|
+
{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-Badge',\n icon: 'fui-Badge__icon',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: tokens.fontWeightSemibold,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderStyle('solid'),\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n },\n\n // size\n\n tiny: {\n width: '6px',\n height: '6px',\n fontSize: '4px',\n },\n 'extra-small': {\n width: '10px',\n height: '10px',\n fontSize: '6px',\n },\n small: {\n minWidth: '16px',\n height: '16px',\n ...shorthands.padding('2px'),\n ...shorthands.gap('4px'),\n fontSize: '8px',\n },\n medium: {\n height: '20px',\n minWidth: '20px',\n ...shorthands.gap('4px'),\n ...shorthands.padding('4px'),\n fontSize: '10px',\n },\n large: {\n minWidth: '24px',\n height: '24px',\n ...shorthands.padding('4px'),\n fontSize: '12px',\n ...shorthands.gap('4px'),\n },\n 'extra-large': {\n minWidth: '32px',\n height: '32px',\n ...shorthands.padding('6px'),\n ...shorthands.gap('6px'),\n fontSize: '12px',\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n\n // shape\n\n square: {\n // Default border radius\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n roundedSmallToTiny: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n circular: {\n ...shorthands.borderRadius('99px'),\n },\n\n // appearance: filled\n\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'filled-brand': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandBackground),\n },\n 'filled-danger': {\n backgroundColor: tokens.colorPaletteRedBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorPaletteRedBackground3),\n },\n 'filled-important': {\n backgroundColor: tokens.colorNeutralForeground1,\n color: tokens.colorNeutralBackground1,\n },\n 'filled-informative': {\n backgroundColor: tokens.colorNeutralBackground5,\n color: tokens.colorNeutralForeground3,\n },\n 'filled-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n },\n 'filled-success': {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n color: tokens.colorNeutralForegroundOnBrand,\n },\n 'filled-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground3,\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderColor(tokens.colorPaletteYellowBackground3),\n },\n\n // appearance: ghost\n\n ghost: {\n ...shorthands.borderStyle('none'),\n },\n 'ghost-brand': {\n color: tokens.colorBrandBackground,\n },\n 'ghost-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'ghost-important': {\n color: tokens.colorNeutralForeground1,\n },\n 'ghost-informative': {\n color: tokens.colorNeutralForeground3,\n },\n 'ghost-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'ghost-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'ghost-success': {\n color: tokens.colorPaletteGreenForeground3,\n },\n 'ghost-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: outline\n\n outline: {\n ...shorthands.borderColor('currentColor'),\n },\n 'outline-brand': {\n color: tokens.colorBrandBackground,\n },\n 'outline-danger': {\n color: tokens.colorPaletteRedForeground3,\n },\n 'outline-important': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n 'outline-informative': {\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'outline-severe': {\n color: tokens.colorPaletteDarkOrangeForeground3,\n },\n 'outline-subtle': {\n color: tokens.colorNeutralForegroundInverted,\n },\n 'outline-success': {\n color: tokens.colorPaletteGreenForeground2,\n },\n 'outline-warning': {\n color: tokens.colorPaletteYellowForeground2,\n },\n\n // appearance: tint\n\n tint: {\n // No shared colors between tint appearances\n },\n 'tint-brand': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ...shorthands.borderColor(tokens.colorBrandStroke2),\n },\n 'tint-danger': {\n backgroundColor: tokens.colorPaletteRedBackground1,\n color: tokens.colorPaletteRedForeground1,\n ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n },\n 'tint-important': {\n backgroundColor: tokens.colorNeutralForeground3,\n color: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n 'tint-informative': {\n backgroundColor: tokens.colorNeutralBackground4,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-severe': {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n color: tokens.colorPaletteDarkOrangeForeground1,\n ...shorthands.borderColor(tokens.colorPaletteDarkOrangeForeground2),\n },\n 'tint-subtle': {\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground3,\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n 'tint-success': {\n backgroundColor: tokens.colorPaletteGreenBackground1,\n color: tokens.colorPaletteGreenForeground1,\n ...shorthands.borderColor(tokens.colorPaletteGreenBackground2),\n },\n 'tint-warning': {\n backgroundColor: tokens.colorPaletteYellowBackground1,\n color: tokens.colorPaletteYellowForeground2,\n ...shorthands.borderColor(tokens.colorPaletteYellowBackground2),\n },\n});\n\nconst useIconStyles = makeStyles({\n base: {\n display: 'flex',\n alignContent: 'center',\n alignItems: 'center',\n height: '100%',\n },\n\n // size\n\n tiny: {\n fontSize: '6px',\n },\n 'extra-small': {\n fontSize: '10px',\n },\n small: {\n fontSize: '12px',\n },\n medium: {\n fontSize: '12px',\n },\n large: {\n fontSize: '16px',\n },\n 'extra-large': {\n fontSize: '20px',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n const rootStyles = useRootStyles();\n\n state.root.className = mergeClasses(\n badgeClassNames.root,\n rootStyles.base,\n rootStyles[state.size],\n rootStyles[state.shape],\n state.shape === 'rounded' &&\n (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') &&\n rootStyles.roundedSmallToTiny,\n rootStyles[state.appearance],\n rootStyles[`${state.appearance}-${state.color}` as const],\n state.root.className,\n );\n\n const iconStyles = useIconStyles();\n if (state.icon) {\n state.icon.className = mergeClasses(\n badgeClassNames.icon,\n iconStyles.base,\n iconStyles[state.size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,GAAhC,CAAd;AACA,EAAA,uBAAA,CAAA,8BAAA,CAA+B,KAA/B;AAEA,SAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALmE,CAAvD;AAOb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n const state = useCounterBadge_unstable(props, ref);\n useCounterBadgeStyles_unstable(state);\n\n return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CounterBadge/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"],"sourceRoot":"../src/"}
|
@@ -24,13 +24,12 @@ const useCounterBadge_unstable = (props, ref) => {
|
|
24
24
|
shape,
|
25
25
|
appearance,
|
26
26
|
showZero,
|
27
|
-
overflowCount,
|
28
27
|
count,
|
29
28
|
dot
|
30
29
|
};
|
31
30
|
|
32
31
|
if (!state.dot && !state.root.children) {
|
33
|
-
state.root.children = state.count >
|
32
|
+
state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;
|
34
33
|
}
|
35
34
|
|
36
35
|
return state;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;AACnH,QAAM;AACJ,IAAA,KAAK,GAAG,UADJ;AAEJ,IAAA,UAAU,GAAG,QAFT;AAGJ,IAAA,QAAQ,GAAG,KAHP;AAIJ,IAAA,aAAa,GAAG,EAJZ;AAKJ,IAAA,KAAK,GAAG,CALJ;AAMJ,IAAA,GAAG,GAAG;AANF,MAOF,KAPJ;AASA,QAAM,KAAK,GAAsB,EAC/B,GAAI,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAD2B;AAE/B,IAAA,KAF+B;AAG/B,IAAA,UAH+B;AAI/B,IAAA,QAJ+B;AAK/B,IAAA,KAL+B;AAM/B,IAAA;AAN+B,GAAjC;;AASA,MAAI,CAAC,KAAK,CAAC,GAAP,IAAc,CAAC,KAAK,CAAC,IAAN,CAAW,QAA9B,EAAwC;AACtC,IAAA,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,KAAK,CAAC,KAAN,GAAc,aAAd,GAA8B,GAAG,aAAa,GAA9C,GAAoD,GAAG,KAAK,CAAC,KAAK,EAAxF;AACD;;AAED,SAAO,KAAP;AACD,CAxBM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n const {\n shape = 'circular',\n appearance = 'filled',\n showZero = false,\n overflowCount = 99,\n count = 0,\n dot = false,\n } = props;\n\n const state: CounterBadgeState = {\n ...(useBadge_unstable(props, ref) as CounterBadgeState),\n shape,\n appearance,\n showZero,\n count,\n dot,\n };\n\n if (!state.dot && !state.root.children) {\n state.root.children = state.count > overflowCount ? `${overflowCount}+` : `${state.count}`;\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -3,13 +3,16 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.useCounterBadgeStyles_unstable = exports.
|
6
|
+
exports.useCounterBadgeStyles_unstable = exports.counterBadgeClassNames = void 0;
|
7
7
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
9
|
|
10
10
|
const useBadgeStyles_1 = /*#__PURE__*/require("../Badge/useBadgeStyles");
|
11
11
|
|
12
|
-
exports.
|
12
|
+
exports.counterBadgeClassNames = {
|
13
|
+
root: 'fui-CounterBadge',
|
14
|
+
icon: 'fui-CounterBadge__icon'
|
15
|
+
};
|
13
16
|
|
14
17
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
15
18
|
"dot": {
|
@@ -34,7 +37,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
34
37
|
|
35
38
|
const useCounterBadgeStyles_unstable = state => {
|
36
39
|
const styles = useStyles();
|
37
|
-
state.root.className = react_1.mergeClasses(exports.
|
40
|
+
state.root.className = react_1.mergeClasses(exports.counterBadgeClassNames.root, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
|
41
|
+
|
42
|
+
if (state.icon) {
|
43
|
+
state.icon.className = react_1.mergeClasses(exports.counterBadgeClassNames.icon, state.icon.className);
|
44
|
+
}
|
45
|
+
|
38
46
|
return useBadgeStyles_1.useBadgeStyles_unstable(state);
|
39
47
|
};
|
40
48
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAKa,OAAA,CAAA,sBAAA,GAAqD;AAChE,EAAA,IAAI,EAAE,kBAD0D;AAEhE,EAAA,IAAI,EAAE;AAF0D,CAArD;;AAKb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,sBAAA,CAAuB,IADF,EAErB,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GAFC,EAGrB,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAK,CAAC,KAAN,KAAgB,CAAnC,IAAwC,CAAC,KAAK,CAAC,GAA/C,IAAsD,MAAM,CAAC,IAHxC,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;AAOA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAA,CAAuB,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAvB;AACD;;AAED,SAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAdM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n ...shorthands.padding('0'),\n },\n hide: {\n display: 'none',\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n counterBadgeClassNames.root,\n state.dot && styles.dot,\n !state.showZero && state.count === 0 && !state.dot && styles.hide,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n }\n\n return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/PresenceBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpG,QAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,GAAjC,CAAd;AACA,EAAA,wBAAA,CAAA,+BAAA,CAAgC,KAAhC;AAEA,SAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqE,CAAzD;AAOb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n usePresenceBadgeStyles_unstable(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './PresenceBadge';\nexport * from './PresenceBadge.types';\nexport * from './usePresenceBadge';\nexport * from './usePresenceBadgeStyles';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/presenceIcons.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n PresenceAvailable10Regular,\n PresenceAvailable12Regular,\n PresenceAvailable16Regular,\n PresenceAvailable10Filled,\n PresenceAvailable12Filled,\n PresenceAvailable16Filled,\n PresenceAway10Filled,\n PresenceAway12Filled,\n PresenceAway16Filled,\n PresenceBusy10Filled,\n PresenceBusy12Filled,\n PresenceBusy16Filled,\n PresenceDnd10Regular,\n PresenceDnd12Regular,\n PresenceDnd16Regular,\n PresenceDnd10Filled,\n PresenceDnd12Filled,\n PresenceDnd16Filled,\n PresenceOof10Regular,\n PresenceOof12Regular,\n PresenceOof16Regular,\n PresenceOffline10Regular,\n PresenceOffline12Regular,\n PresenceOffline16Regular,\n PresenceUnknown10Regular,\n PresenceUnknown12Regular,\n PresenceUnknown16Regular,\n} from '@fluentui/react-icons';\nimport type { PresenceBadgeState } from './PresenceBadge.types';\n\nexport const presenceAwayFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceAway10Filled,\n 'extra-small': PresenceAway10Filled,\n small: PresenceAway12Filled,\n medium: PresenceAway16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceAway16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceAway16Filled,\n};\n\nexport const presenceAvailableRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceAvailable10Regular,\n 'extra-small': PresenceAvailable10Regular,\n small: PresenceAvailable12Regular,\n medium: PresenceAvailable16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceAvailable16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceAvailable16Regular,\n};\n\nexport const presenceAvailableFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceAvailable10Filled,\n 'extra-small': PresenceAvailable10Filled,\n small: PresenceAvailable12Filled,\n medium: PresenceAvailable16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceAvailable16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceAvailable16Filled,\n};\n\nexport const presenceBusyFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceBusy10Filled,\n 'extra-small': PresenceBusy10Filled,\n small: PresenceBusy12Filled,\n medium: PresenceBusy16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceBusy16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceBusy16Filled,\n};\n\nexport const presenceDndFilled: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceDnd10Filled,\n 'extra-small': PresenceDnd10Filled,\n small: PresenceDnd12Filled,\n medium: PresenceDnd16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceDnd16Filled,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceDnd16Filled,\n};\n\nexport const presenceDndRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceDnd10Regular,\n 'extra-small': PresenceDnd10Regular,\n small: PresenceDnd12Regular,\n medium: PresenceDnd16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceDnd16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceDnd16Regular,\n};\n\nexport const presenceOofRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceOof10Regular,\n 'extra-small': PresenceOof10Regular,\n small: PresenceOof12Regular,\n medium: PresenceOof16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceOof16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceOof16Regular,\n};\n\nexport const presenceOfflineRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceOffline10Regular,\n 'extra-small': PresenceOffline10Regular,\n small: PresenceOffline12Regular,\n medium: PresenceOffline16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceOffline16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceOffline16Regular,\n};\n\nexport const presenceUnknownRegular: Record<PresenceBadgeState['size'], React.FunctionComponent | null> = {\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n tiny: PresenceUnknown10Regular,\n 'extra-small': PresenceUnknown10Regular,\n small: PresenceUnknown12Regular,\n medium: PresenceUnknown16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n large: PresenceUnknown16Regular,\n // FIXME not all presence icon sizes are available\n // https://github.com/microsoft/fluentui/issues/20650\n 'extra-large': PresenceUnknown16Regular,\n};\n"],"sourceRoot":"../src/"}
|
@@ -24,29 +24,44 @@ const iconMap = (status, outOfOffice, size) => {
|
|
24
24
|
case 'busy':
|
25
25
|
return outOfOffice ? presenceIcons_1.presenceUnknownRegular[size] : presenceIcons_1.presenceBusyFilled[size];
|
26
26
|
|
27
|
-
case '
|
27
|
+
case 'do-not-disturb':
|
28
28
|
return outOfOffice ? presenceIcons_1.presenceDndRegular[size] : presenceIcons_1.presenceDndFilled[size];
|
29
29
|
|
30
30
|
case 'offline':
|
31
31
|
return presenceIcons_1.presenceOfflineRegular[size];
|
32
32
|
|
33
|
-
case '
|
33
|
+
case 'out-of-office':
|
34
34
|
return presenceIcons_1.presenceOofRegular[size];
|
35
|
+
|
36
|
+
case 'unknown':
|
37
|
+
return presenceIcons_1.presenceUnknownRegular[size];
|
35
38
|
}
|
36
39
|
};
|
40
|
+
|
41
|
+
const DEFAULT_STRINGS = {
|
42
|
+
busy: 'busy',
|
43
|
+
'out-of-office': 'out of office',
|
44
|
+
away: 'away',
|
45
|
+
available: 'available',
|
46
|
+
offline: 'offline',
|
47
|
+
'do-not-disturb': 'do not disturb',
|
48
|
+
unknown: 'unknown'
|
49
|
+
};
|
37
50
|
/**
|
38
51
|
* Returns the props and state required to render the component
|
39
52
|
*/
|
40
53
|
|
41
|
-
|
42
54
|
const usePresenceBadge_unstable = (props, ref) => {
|
43
55
|
var _a, _b;
|
44
56
|
|
45
57
|
const state = { ...index_1.useBadge_unstable({
|
46
58
|
size: 'medium',
|
47
59
|
...props,
|
48
|
-
icon: react_utilities_1.resolveShorthand(
|
49
|
-
required: true
|
60
|
+
icon: react_utilities_1.resolveShorthand(props.icon, {
|
61
|
+
required: true,
|
62
|
+
defaultProps: {
|
63
|
+
'aria-label': props.status && DEFAULT_STRINGS[props.status]
|
64
|
+
}
|
50
65
|
})
|
51
66
|
}, ref),
|
52
67
|
status: (_a = props.status) !== null && _a !== void 0 ? _a : 'available',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAWA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAM,OAAO,GAAG,CACd,MADc,EAEd,WAFc,EAGd,IAHc,KAIoB;AAClC,UAAQ,MAAR;AACE,SAAK,WAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,wBAAA,CAAyB,IAAzB,CAAH,GAAoC,eAAA,CAAA,uBAAA,CAAwB,IAAxB,CAAtD;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAH,GAAkC,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAApD;;AACF,SAAK,MAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAH,GAAkC,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAApD;;AACF,SAAK,gBAAL;AACE,aAAO,WAAW,GAAG,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAAH,GAA8B,eAAA,CAAA,iBAAA,CAAkB,IAAlB,CAAhD;;AACF,SAAK,SAAL;AACE,aAAO,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAP;;AACF,SAAK,eAAL;AACE,aAAO,eAAA,CAAA,kBAAA,CAAmB,IAAnB,CAAP;;AACF,SAAK,SAAL;AACE,aAAO,eAAA,CAAA,sBAAA,CAAuB,IAAvB,CAAP;AAdJ;AAgBD,CArBD;;AAuBA,MAAM,eAAe,GAAG;AACtB,EAAA,IAAI,EAAE,MADgB;AAEtB,mBAAiB,eAFK;AAGtB,EAAA,IAAI,EAAE,MAHgB;AAItB,EAAA,SAAS,EAAE,WAJW;AAKtB,EAAA,OAAO,EAAE,SALa;AAMtB,oBAAkB,gBANI;AAOtB,EAAA,OAAO,EAAE;AAPa,CAAxB;AAUA;;AAEG;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;;;AACtB,QAAM,KAAK,GAAuB,EAChC,GAAG,OAAA,CAAA,iBAAA,CACD;AACE,MAAA,IAAI,EAAE,QADR;AAEE,SAAG,KAFL;AAGE,MAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;AACjC,QAAA,QAAQ,EAAE,IADuB;AAEjC,QAAA,YAAY,EAAE;AACZ,wBAAc,KAAK,CAAC,MAAN,IAAgB,eAAe,CAAC,KAAK,CAAC,MAAP;AADjC;AAFmB,OAA7B;AAHR,KADC,EAWD,GAXC,CAD6B;AAchC,IAAA,MAAM,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,MAAN,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,EAAZ,GAAgB,WAdQ;AAehC,IAAA,WAAW,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,WAAN,MAAiB,IAAjB,IAAiB,EAAA,KAAA,KAAA,CAAjB,GAAiB,EAAjB,GAAqB;AAfF,GAAlC;AAkBA,QAAM,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC,MAAP,EAAe,KAAK,CAAC,WAArB,EAAkC,KAAK,CAAC,IAAxC,CAA3B;;AACA,MAAI,WAAJ,EAAiB;AACf,IAAA,KAAK,CAAC,IAAN,CAAY,QAAZ,GAAuB,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CA5BM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n} from './presenceIcons';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';\n\nconst iconMap = (\n status: PresenceBadgeState['status'],\n outOfOffice: boolean,\n size: PresenceBadgeState['size'],\n): React.FunctionComponent | null => {\n switch (status) {\n case 'available':\n return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n case 'away':\n return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size];\n case 'busy':\n return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];\n case 'do-not-disturb':\n return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];\n case 'offline':\n return presenceOfflineRegular[size];\n case 'out-of-office':\n return presenceOofRegular[size];\n case 'unknown':\n return presenceUnknownRegular[size];\n }\n};\n\nconst DEFAULT_STRINGS = {\n busy: 'busy',\n 'out-of-office': 'out of office',\n away: 'away',\n available: 'available',\n offline: 'offline',\n 'do-not-disturb': 'do not disturb',\n unknown: 'unknown',\n};\n\n/**\n * Returns the props and state required to render the component\n */\nexport const usePresenceBadge_unstable = (\n props: PresenceBadgeProps,\n ref: React.Ref<HTMLElement>,\n): PresenceBadgeState => {\n const state: PresenceBadgeState = {\n ...useBadge_unstable(\n {\n size: 'medium',\n ...props,\n icon: resolveShorthand(props.icon, {\n required: true,\n defaultProps: {\n 'aria-label': props.status && DEFAULT_STRINGS[props.status],\n },\n }),\n },\n ref,\n ),\n status: props.status ?? 'available',\n outOfOffice: props.outOfOffice ?? false,\n };\n\n const IconElement = iconMap(state.status, state.outOfOffice, state.size);\n if (IconElement) {\n state.icon!.children = <IconElement />;\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -3,13 +3,24 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.usePresenceBadgeStyles_unstable = exports.
|
6
|
+
exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassNames = void 0;
|
7
7
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
9
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
11
|
|
12
|
-
exports.
|
12
|
+
exports.presenceBadgeClassNames = {
|
13
|
+
root: 'fui-PresenceBadge',
|
14
|
+
icon: 'fui-PresenceBadge__icon'
|
15
|
+
};
|
16
|
+
|
17
|
+
const getIsBusy = status => {
|
18
|
+
if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown') {
|
19
|
+
return true;
|
20
|
+
}
|
21
|
+
|
22
|
+
return false;
|
23
|
+
};
|
13
24
|
|
14
25
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
15
26
|
"root": {
|
@@ -83,7 +94,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
83
94
|
|
84
95
|
const usePresenceBadgeStyles_unstable = state => {
|
85
96
|
const styles = useStyles();
|
86
|
-
|
97
|
+
const isBusy = getIsBusy(state.status);
|
98
|
+
state.root.className = react_1.mergeClasses(exports.presenceBadgeClassNames.root, styles.root, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
|
99
|
+
|
100
|
+
if (state.icon) {
|
101
|
+
state.icon.className = react_1.mergeClasses(exports.presenceBadgeClassNames.icon, state.icon.className);
|
102
|
+
}
|
103
|
+
|
87
104
|
return state;
|
88
105
|
};
|
89
106
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n root: 'fui-PresenceBadge',\n icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown') {\n return true;\n }\n\n return false;\n};\n\nconst useStyles = makeStyles({\n root: {\n ...shorthands.padding(0),\n display: 'inline-flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n justifyContent: 'center',\n\n '& span': {\n display: 'flex',\n },\n ...shorthands.borderRadius('50%'),\n backgroundColor: tokens.colorNeutralBackground1,\n },\n statusBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n statusAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n statusAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n statusOffline: {\n color: tokens.colorNeutralForeground3,\n },\n statusOutOfOffice: {\n color: tokens.colorPaletteBerryForeground3,\n },\n outOfOffice: {\n color: tokens.colorNeutralBackground1,\n },\n outOfOfficeAvailable: {\n color: tokens.colorPaletteLightGreenForeground3,\n },\n outOfOfficeBusy: {\n color: tokens.colorPaletteRedBackground3,\n },\n outOfOfficeAway: {\n color: tokens.colorPaletteMarigoldBackground3,\n },\n\n // Icons are not resizeable, and these sizes are currently missing\n // use `!important` to size the currently available icons to the missing ones\n //\n tiny: {\n aspectRatio: '1',\n width: '6px',\n '& svg': {\n width: '6px !important',\n height: '6px !important',\n },\n },\n large: {\n aspectRatio: '1',\n width: '20px',\n '& svg': {\n width: '20px !important',\n height: '20px !important',\n },\n },\n extraLarge: {\n aspectRatio: '1',\n width: '28px',\n '& svg': {\n width: '28px !important',\n height: '28px !important',\n },\n },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n const styles = useStyles();\n const isBusy = getIsBusy(state.status);\n state.root.className = mergeClasses(\n presenceBadgeClassNames.root,\n styles.root,\n isBusy && styles.statusBusy,\n state.status === 'away' && styles.statusAway,\n state.status === 'available' && styles.statusAvailable,\n state.status === 'offline' && styles.statusOffline,\n state.status === 'out-of-office' && styles.statusOutOfOffice,\n state.outOfOffice && styles.outOfOffice,\n state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,\n state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice,\n state.size === 'tiny' && styles.tiny,\n state.size === 'large' && styles.large,\n state.size === 'extra-large' && styles.extraLarge,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.js
CHANGED
@@ -3,16 +3,92 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
+
exports.useCounterBadge_unstable = exports.useCounterBadgeStyles_unstable = exports.counterBadgeClassNames = exports.CounterBadge = exports.usePresenceBadge_unstable = exports.usePresenceBadgeStyles_unstable = exports.presenceBadgeClassNames = exports.PresenceBadge = exports.useBadge_unstable = exports.useBadgeStyles_unstable = exports.renderBadge_unstable = exports.badgeClassNames = exports.Badge = void 0;
|
6
7
|
|
7
|
-
|
8
|
+
var Badge_1 = /*#__PURE__*/require("./Badge");
|
8
9
|
|
9
|
-
|
10
|
+
Object.defineProperty(exports, "Badge", {
|
11
|
+
enumerable: true,
|
12
|
+
get: function () {
|
13
|
+
return Badge_1.Badge;
|
14
|
+
}
|
15
|
+
});
|
16
|
+
Object.defineProperty(exports, "badgeClassNames", {
|
17
|
+
enumerable: true,
|
18
|
+
get: function () {
|
19
|
+
return Badge_1.badgeClassNames;
|
20
|
+
}
|
21
|
+
});
|
22
|
+
Object.defineProperty(exports, "renderBadge_unstable", {
|
23
|
+
enumerable: true,
|
24
|
+
get: function () {
|
25
|
+
return Badge_1.renderBadge_unstable;
|
26
|
+
}
|
27
|
+
});
|
28
|
+
Object.defineProperty(exports, "useBadgeStyles_unstable", {
|
29
|
+
enumerable: true,
|
30
|
+
get: function () {
|
31
|
+
return Badge_1.useBadgeStyles_unstable;
|
32
|
+
}
|
33
|
+
});
|
34
|
+
Object.defineProperty(exports, "useBadge_unstable", {
|
35
|
+
enumerable: true,
|
36
|
+
get: function () {
|
37
|
+
return Badge_1.useBadge_unstable;
|
38
|
+
}
|
39
|
+
});
|
10
40
|
|
11
|
-
|
41
|
+
var PresenceBadge_1 = /*#__PURE__*/require("./PresenceBadge");
|
12
42
|
|
13
|
-
|
43
|
+
Object.defineProperty(exports, "PresenceBadge", {
|
44
|
+
enumerable: true,
|
45
|
+
get: function () {
|
46
|
+
return PresenceBadge_1.PresenceBadge;
|
47
|
+
}
|
48
|
+
});
|
49
|
+
Object.defineProperty(exports, "presenceBadgeClassNames", {
|
50
|
+
enumerable: true,
|
51
|
+
get: function () {
|
52
|
+
return PresenceBadge_1.presenceBadgeClassNames;
|
53
|
+
}
|
54
|
+
});
|
55
|
+
Object.defineProperty(exports, "usePresenceBadgeStyles_unstable", {
|
56
|
+
enumerable: true,
|
57
|
+
get: function () {
|
58
|
+
return PresenceBadge_1.usePresenceBadgeStyles_unstable;
|
59
|
+
}
|
60
|
+
});
|
61
|
+
Object.defineProperty(exports, "usePresenceBadge_unstable", {
|
62
|
+
enumerable: true,
|
63
|
+
get: function () {
|
64
|
+
return PresenceBadge_1.usePresenceBadge_unstable;
|
65
|
+
}
|
66
|
+
});
|
14
67
|
|
15
|
-
|
68
|
+
var CounterBadge_1 = /*#__PURE__*/require("./CounterBadge");
|
16
69
|
|
17
|
-
|
70
|
+
Object.defineProperty(exports, "CounterBadge", {
|
71
|
+
enumerable: true,
|
72
|
+
get: function () {
|
73
|
+
return CounterBadge_1.CounterBadge;
|
74
|
+
}
|
75
|
+
});
|
76
|
+
Object.defineProperty(exports, "counterBadgeClassNames", {
|
77
|
+
enumerable: true,
|
78
|
+
get: function () {
|
79
|
+
return CounterBadge_1.counterBadgeClassNames;
|
80
|
+
}
|
81
|
+
});
|
82
|
+
Object.defineProperty(exports, "useCounterBadgeStyles_unstable", {
|
83
|
+
enumerable: true,
|
84
|
+
get: function () {
|
85
|
+
return CounterBadge_1.useCounterBadgeStyles_unstable;
|
86
|
+
}
|
87
|
+
});
|
88
|
+
Object.defineProperty(exports, "useCounterBadge_unstable", {
|
89
|
+
enumerable: true,
|
90
|
+
get: function () {
|
91
|
+
return CounterBadge_1.useCounterBadge_unstable;
|
92
|
+
}
|
93
|
+
});
|
18
94
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,KAAA;AAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,eAAA;AAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,OAAA,CAAA,iBAAA;AAAiB;AAAjB,CAAA;;AAEhF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,eAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,eAAA,CAAA,aAAA;AAAa;AAAb,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,eAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,eAAA,CAAA,+BAAA;AAA+B;AAA/B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,eAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;;AAGF,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,YAAA;AAAY;AAAZ,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,8BAAA;AAA8B;AAA9B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA","sourcesContent":["export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n PresenceBadge,\n presenceBadgeClassNames,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-badge",
|
3
|
-
"version": "9.0.0-rc.
|
3
|
+
"version": "9.0.0-rc.10",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
7
|
-
"typings": "
|
7
|
+
"typings": "dist/index.d.ts",
|
8
8
|
"sideEffects": false,
|
9
9
|
"repository": {
|
10
10
|
"type": "git",
|
@@ -21,31 +21,21 @@
|
|
21
21
|
"start": "yarn storybook",
|
22
22
|
"test": "jest --passWithNoTests",
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node
|
25
|
-
"storybook": "node
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-badge/src && yarn docs",
|
25
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
27
27
|
},
|
28
28
|
"devDependencies": {
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
30
|
"@fluentui/react-conformance": "*",
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
32
|
-
"@fluentui/scripts": "^1.0.0"
|
33
|
-
"@types/enzyme": "3.10.3",
|
34
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
35
|
-
"@types/react": "16.9.42",
|
36
|
-
"@types/react-dom": "16.9.10",
|
37
|
-
"@types/react-test-renderer": "^16.0.0",
|
38
|
-
"enzyme": "~3.10.0",
|
39
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
40
|
-
"react": "16.8.6",
|
41
|
-
"react-dom": "16.8.6",
|
42
|
-
"react-test-renderer": "^16.3.0"
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.7",
|
32
|
+
"@fluentui/scripts": "^1.0.0"
|
43
33
|
},
|
44
34
|
"dependencies": {
|
45
|
-
"@fluentui/react-icons": "^2.0.
|
46
|
-
"@griffel/react": "1.0.
|
47
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
48
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
35
|
+
"@fluentui/react-icons": "^2.0.166-rc.3",
|
36
|
+
"@griffel/react": "1.0.5",
|
37
|
+
"@fluentui/react-theme": "9.0.0-rc.9",
|
38
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
49
39
|
"tslib": "^2.1.0"
|
50
40
|
},
|
51
41
|
"peerDependencies": {
|
@@ -60,5 +50,12 @@
|
|
60
50
|
"minor",
|
61
51
|
"patch"
|
62
52
|
]
|
53
|
+
},
|
54
|
+
"exports": {
|
55
|
+
".": {
|
56
|
+
"types": "./lib/index.d.ts",
|
57
|
+
"import": "./lib/index.js",
|
58
|
+
"require": "./lib-commonjs/index.js"
|
59
|
+
}
|
63
60
|
}
|
64
61
|
}
|
package/lib/Badge.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Badge/index';
|
package/lib/CounterBadge.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/CounterBadge/index';
|
package/lib/PresenceBadge.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/PresenceBadge/index';
|
@@ -1,34 +0,0 @@
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
2
|
-
export declare type BadgeSlots = {
|
3
|
-
root: Slot<'div'>;
|
4
|
-
icon?: Slot<'span'>;
|
5
|
-
};
|
6
|
-
export declare type BadgeCommons = {
|
7
|
-
/**
|
8
|
-
* A Badge can be filled, outline, ghost, inverted
|
9
|
-
* @defaultvalue filled
|
10
|
-
*/
|
11
|
-
appearance: 'filled' | 'ghost' | 'outline' | 'tint';
|
12
|
-
/**
|
13
|
-
* A Badge can be one of preset colors
|
14
|
-
* @defaultvalue brand
|
15
|
-
*/
|
16
|
-
color: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
|
17
|
-
/**
|
18
|
-
* A Badge can position the icon before or after the content.
|
19
|
-
* @defaultvalue before
|
20
|
-
*/
|
21
|
-
iconPosition: 'before' | 'after';
|
22
|
-
/**
|
23
|
-
* A Badge can be square, circular or rounded.
|
24
|
-
* @defaultvalue circular
|
25
|
-
*/
|
26
|
-
shape: 'circular' | 'rounded' | 'square';
|
27
|
-
/**
|
28
|
-
* A Badge can be on of several preset sizes.
|
29
|
-
* @defaultvalue medium
|
30
|
-
*/
|
31
|
-
size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
32
|
-
};
|
33
|
-
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;
|
34
|
-
export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
|