@fluentui/react-badge 9.0.22 → 9.0.23
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +17 -2
- package/CHANGELOG.md +12 -3
- package/lib/components/PresenceBadge/usePresenceBadge.js +1 -1
- package/lib/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js +1 -4
- package/lib/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib-amd/components/PresenceBadge/usePresenceBadge.js +1 -1
- package/lib-amd/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js +1 -4
- package/lib-amd/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadge.js.map +1 -1
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js +1 -4
- package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui/react-badge",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 07 Feb 2023 14:10:46 GMT",
|
|
6
|
+
"tag": "@fluentui/react-badge_v9.0.23",
|
|
7
|
+
"version": "9.0.23",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "makotom@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-badge",
|
|
13
|
+
"commit": "fe583c0be359e23a4ae6c4f1ab69d359800393e5",
|
|
14
|
+
"comment": "fix: Using correct icon and color for away + out-of-office PresenceBadge."
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Tue, 31 Jan 2023 19:53:53 GMT",
|
|
6
21
|
"tag": "@fluentui/react-badge_v9.0.22",
|
|
7
22
|
"version": "9.0.22",
|
|
8
23
|
"comments": {
|
|
@@ -17,7 +32,7 @@
|
|
|
17
32
|
"author": "beachball",
|
|
18
33
|
"package": "@fluentui/react-badge",
|
|
19
34
|
"comment": "Bump @fluentui/react-utilities to v9.5.1",
|
|
20
|
-
"commit": "
|
|
35
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746"
|
|
21
36
|
}
|
|
22
37
|
]
|
|
23
38
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-badge
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 07 Feb 2023 14:10:46 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.23)
|
|
8
|
+
|
|
9
|
+
Tue, 07 Feb 2023 14:10:46 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.22..@fluentui/react-badge_v9.0.23)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Using correct icon and color for away + out-of-office PresenceBadge. ([PR #26655](https://github.com/microsoft/fluentui/pull/26655) by makotom@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [9.0.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.22)
|
|
8
17
|
|
|
9
|
-
Tue, 31 Jan 2023 19:
|
|
18
|
+
Tue, 31 Jan 2023 19:53:53 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.21..@fluentui/react-badge_v9.0.22)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
13
22
|
|
|
14
23
|
- chore: Updates border-radius to use proper token ([PR #26531](https://github.com/microsoft/fluentui/pull/26531) by bernardo.sunderhus@gmail.com)
|
|
15
|
-
- Bump @fluentui/react-utilities to v9.5.1 ([PR #
|
|
24
|
+
- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
|
|
16
25
|
|
|
17
26
|
## [9.0.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.21)
|
|
18
27
|
|
|
@@ -7,7 +7,7 @@ const iconMap = (status, outOfOffice, size) => {
|
|
|
7
7
|
case 'available':
|
|
8
8
|
return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];
|
|
9
9
|
case 'away':
|
|
10
|
-
return outOfOffice ?
|
|
10
|
+
return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];
|
|
11
11
|
case 'blocked':
|
|
12
12
|
return presenceBlockedRegular[size];
|
|
13
13
|
case 'busy':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,QACjB,iBAAiB;AACxB,SAASC,iBAAiB,QAAQ,gBAAgB;AAGlD,MAAMC,OAAO,GAAG,CAACC,MAAoC,EAAEC,WAAoB,EAAEC,IAAgC,KAAI;EAC/G,QAAQF,MAAM;IACZ,KAAK,WAAW;MACd,OAAOC,WAAW,GAAGZ,wBAAwB,CAACa,IAAI,CAAC,GAAGd,uBAAuB,CAACc,IAAI,CAAC;IACrF,KAAK,MAAM;MACT,OAAOD,WAAW,
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,QACjB,iBAAiB;AACxB,SAASC,iBAAiB,QAAQ,gBAAgB;AAGlD,MAAMC,OAAO,GAAG,CAACC,MAAoC,EAAEC,WAAoB,EAAEC,IAAgC,KAAI;EAC/G,QAAQF,MAAM;IACZ,KAAK,WAAW;MACd,OAAOC,WAAW,GAAGZ,wBAAwB,CAACa,IAAI,CAAC,GAAGd,uBAAuB,CAACc,IAAI,CAAC;IACrF,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGL,kBAAkB,CAACM,IAAI,CAAC,GAAGZ,kBAAkB,CAACY,IAAI,CAAC;IAC1E,KAAK,SAAS;MACZ,OAAOX,sBAAsB,CAACW,IAAI,CAAC;IACrC,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGJ,sBAAsB,CAACK,IAAI,CAAC,GAAGV,kBAAkB,CAACU,IAAI,CAAC;IAC9E,KAAK,gBAAgB;MACnB,OAAOD,WAAW,GAAGP,kBAAkB,CAACQ,IAAI,CAAC,GAAGT,iBAAiB,CAACS,IAAI,CAAC;IACzE,KAAK,SAAS;MACZ,OAAOP,sBAAsB,CAACO,IAAI,CAAC;IACrC,KAAK,eAAe;MAClB,OAAON,kBAAkB,CAACM,IAAI,CAAC;IACjC,KAAK,SAAS;MACZ,OAAOL,sBAAsB,CAACK,IAAI,CAAC;EAAC;AAE1C,CAAC;AAED,MAAMC,eAAe,GAAG;EACtBC,IAAI,EAAE,MAAM;EACZ,eAAe,EAAE,eAAe;EAChCC,IAAI,EAAE,MAAM;EACZC,SAAS,EAAE,WAAW;EACtBC,OAAO,EAAE,SAAS;EAClB,gBAAgB,EAAE,gBAAgB;EAClCC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE;CACV;AAED;;;AAGA,OAAO,MAAMC,yBAAyB,GAAG,CACvCC,KAAyB,EACzBC,GAA2B,KACL;EACtB,MAAM;IAAEV,IAAI,GAAG,QAAQ;IAAEF,MAAM,GAAG,WAAW;IAAEC,WAAW,GAAG;EAAK,CAAE,GAAGU,KAAK;EAE5E,MAAME,UAAU,GAAGV,eAAe,CAACH,MAAM,CAAC;EAC1C,MAAMc,OAAO,GAAGH,KAAK,CAACV,WAAW,IAAIU,KAAK,CAACX,MAAM,KAAK,eAAe,GAAG,IAAIG,eAAe,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE;EAEnH,MAAMY,WAAW,GAAGhB,OAAO,CAACC,MAAM,EAAEC,WAAW,EAAEC,IAAI,CAAC;EAEtD,MAAMc,KAAK,GAAuB;IAChC,GAAGlB,iBAAiB,CAClB;MACE,YAAY,EAAEe,UAAU,GAAGC,OAAO;MAClCG,IAAI,EAAE,KAAK;MACX,GAAGN,KAAK;MACRT,IAAI;MACJgB,IAAI,EAAE/B,gBAAgB,CAACwB,KAAK,CAACO,IAAI,EAAE;QACjCC,YAAY,EAAE;UACZC,QAAQ,EAAEL,WAAW,gBAAG7B,oBAAC6B,WAAW,OAAG,GAAG;SAC3C;QACDM,QAAQ,EAAE;OACX;KACF,EACDT,GAAG,CACJ;IACDZ,MAAM;IACNC;GACD;EAED,OAAOe,KAAK;AACd,CAAC","names":["React","resolveShorthand","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","useBadge_unstable","iconMap","status","outOfOffice","size","DEFAULT_STRINGS","busy","away","available","offline","unknown","blocked","usePresenceBadge_unstable","props","ref","statusText","oofText","IconElement","state","role","icon","defaultProps","children","required"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceBlockedRegular,\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 = (status: PresenceBadgeState['status'], outOfOffice: boolean, size: PresenceBadgeState['size']) => {\n switch (status) {\n case 'available':\n return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n case 'away':\n return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];\n case 'blocked':\n return presenceBlockedRegular[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 blocked: 'blocked',\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 { size = 'medium', status = 'available', outOfOffice = false } = props;\n\n const statusText = DEFAULT_STRINGS[status];\n const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';\n\n const IconElement = iconMap(status, outOfOffice, size);\n\n const state: PresenceBadgeState = {\n ...useBadge_unstable(\n {\n 'aria-label': statusText + oofText,\n role: 'img',\n ...props,\n size,\n icon: resolveShorthand(props.icon, {\n defaultProps: {\n children: IconElement ? <IconElement /> : null,\n },\n required: true,\n }),\n },\n ref,\n ),\n status,\n outOfOffice,\n };\n\n return state;\n};\n"]}
|
|
@@ -51,9 +51,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
51
51
|
outOfOfficeBusy: {
|
|
52
52
|
sj55zd: "fvi85wt"
|
|
53
53
|
},
|
|
54
|
-
outOfOfficeAway: {
|
|
55
|
-
sj55zd: "f14k8a89"
|
|
56
|
-
},
|
|
57
54
|
tiny: {
|
|
58
55
|
Bubjx69: "f9ikmtg",
|
|
59
56
|
a9b677: "f16dn6v3",
|
|
@@ -81,7 +78,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
81
78
|
export const usePresenceBadgeStyles_unstable = state => {
|
|
82
79
|
const styles = useStyles();
|
|
83
80
|
const isBusy = getIsBusy(state.status);
|
|
84
|
-
state.root.className = mergeClasses(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.
|
|
81
|
+
state.root.className = mergeClasses(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.statusOutOfOffice, 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);
|
|
85
82
|
if (state.icon) {
|
|
86
83
|
state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);
|
|
87
84
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA,YAAY,YAAcC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAK9C,OAAO,MAAMC,uBAAuB,GAA+B;EACjEC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,GAAIC,MAA2B,IAAa;EACzD,IAAIA,MAAM,KAAK,MAAM,IAAIA,MAAM,KAAK,gBAAgB,IAAIA,MAAM,KAAK,SAAS,IAAIA,MAAM,KAAK,SAAS,EAAE;IACpG,OAAO,IAAI;;EAGb,OAAO,KAAK;AACd,CAAC;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,YAAY,YAAcC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAK9C,OAAO,MAAMC,uBAAuB,GAA+B;EACjEC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,GAAIC,MAA2B,IAAa;EACzD,IAAIA,MAAM,KAAK,MAAM,IAAIA,MAAM,KAAK,gBAAgB,IAAIA,MAAM,KAAK,SAAS,IAAIA,MAAM,KAAK,SAAS,EAAE;IACpG,OAAO,IAAI;;EAGb,OAAO,KAAK;AACd,CAAC;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAkEhB;AAEF;;;AAGA,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,MAAM,GAAGN,SAAS,CAACI,KAAK,CAACH,MAAM,CAAC;EACtCG,KAAK,CAACN,IAAI,CAACS,SAAS,GAAGb,YAAY,CACjCG,uBAAuB,CAACC,IAAI,EAC5BO,MAAM,CAACP,IAAI,EACXQ,MAAM,IAAID,MAAM,CAACG,UAAU,EAC3BJ,KAAK,CAACH,MAAM,KAAK,MAAM,IAAII,MAAM,CAACI,UAAU,EAC5CL,KAAK,CAACH,MAAM,KAAK,WAAW,IAAII,MAAM,CAACK,eAAe,EACtDN,KAAK,CAACH,MAAM,KAAK,SAAS,IAAII,MAAM,CAACM,aAAa,EAClDP,KAAK,CAACH,MAAM,KAAK,eAAe,IAAII,MAAM,CAACO,iBAAiB,EAC5DR,KAAK,CAACS,WAAW,IAAIR,MAAM,CAACQ,WAAW,EACvCT,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACH,MAAM,KAAK,WAAW,IAAII,MAAM,CAACS,oBAAoB,EAChFV,KAAK,CAACS,WAAW,IAAIP,MAAM,IAAID,MAAM,CAACU,eAAe,EACrDX,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACH,MAAM,KAAK,MAAM,IAAII,MAAM,CAACO,iBAAiB,EACxER,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACH,MAAM,KAAK,SAAS,IAAII,MAAM,CAACM,aAAa,EACvEP,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACH,MAAM,KAAK,eAAe,IAAII,MAAM,CAACO,iBAAiB,EACjFR,KAAK,CAACY,IAAI,KAAK,MAAM,IAAIX,MAAM,CAACY,IAAI,EACpCb,KAAK,CAACY,IAAI,KAAK,OAAO,IAAIX,MAAM,CAACa,KAAK,EACtCd,KAAK,CAACY,IAAI,KAAK,aAAa,IAAIX,MAAM,CAACc,UAAU,EACjDf,KAAK,CAACN,IAAI,CAACS,SAAS,CACrB;EAED,IAAIH,KAAK,CAACL,IAAI,EAAE;IACdK,KAAK,CAACL,IAAI,CAACQ,SAAS,GAAGb,YAAY,CAACG,uBAAuB,CAACE,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACQ,SAAS,CAAC;;EAGzF,OAAOH,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useStyles","usePresenceBadgeStyles_unstable","state","styles","isBusy","className","statusBusy","statusAway","statusAvailable","statusOffline","statusOutOfOffice","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","size","tiny","large","extraLarge"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"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' || status === 'blocked') {\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(tokens.borderRadiusCircular),\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\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.statusOutOfOffice,\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"]}
|
|
@@ -7,7 +7,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./
|
|
|
7
7
|
case 'available':
|
|
8
8
|
return outOfOffice ? presenceIcons_1.presenceAvailableRegular[size] : presenceIcons_1.presenceAvailableFilled[size];
|
|
9
9
|
case 'away':
|
|
10
|
-
return outOfOffice ? presenceIcons_1.
|
|
10
|
+
return outOfOffice ? presenceIcons_1.presenceOofRegular[size] : presenceIcons_1.presenceAwayFilled[size];
|
|
11
11
|
case 'blocked':
|
|
12
12
|
return presenceIcons_1.presenceBlockedRegular[size];
|
|
13
13
|
case 'busy':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePresenceBadge.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":";;;;IAiBA,IAAM,OAAO,GAAG,UAAC,MAAoC,EAAE,WAAoB,EAAE,IAAgC;QAC3G,QAAQ,MAAM,EAAE;YACd,KAAK,WAAW;gBACd,OAAO,WAAW,CAAC,CAAC,CAAC,wCAAwB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,uCAAuB,CAAC,IAAI,CAAC,CAAC;YACtF,KAAK,MAAM;gBACT,OAAO,WAAW,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"usePresenceBadge.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx"],"names":[],"mappings":";;;;IAiBA,IAAM,OAAO,GAAG,UAAC,MAAoC,EAAE,WAAoB,EAAE,IAAgC;QAC3G,QAAQ,MAAM,EAAE;YACd,KAAK,WAAW;gBACd,OAAO,WAAW,CAAC,CAAC,CAAC,wCAAwB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,uCAAuB,CAAC,IAAI,CAAC,CAAC;YACtF,KAAK,MAAM;gBACT,OAAO,WAAW,CAAC,CAAC,CAAC,kCAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,kCAAkB,CAAC,IAAI,CAAC,CAAC;YAC3E,KAAK,SAAS;gBACZ,OAAO,sCAAsB,CAAC,IAAI,CAAC,CAAC;YACtC,KAAK,MAAM;gBACT,OAAO,WAAW,CAAC,CAAC,CAAC,sCAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,kCAAkB,CAAC,IAAI,CAAC,CAAC;YAC/E,KAAK,gBAAgB;gBACnB,OAAO,WAAW,CAAC,CAAC,CAAC,kCAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,iCAAiB,CAAC,IAAI,CAAC,CAAC;YAC1E,KAAK,SAAS;gBACZ,OAAO,sCAAsB,CAAC,IAAI,CAAC,CAAC;YACtC,KAAK,eAAe;gBAClB,OAAO,kCAAkB,CAAC,IAAI,CAAC,CAAC;YAClC,KAAK,SAAS;gBACZ,OAAO,sCAAsB,CAAC,IAAI,CAAC,CAAC;SACvC;IACH,CAAC,CAAC;IAEF,IAAM,eAAe,GAAG;QACtB,IAAI,EAAE,MAAM;QACZ,eAAe,EAAE,eAAe;QAChC,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,WAAW;QACtB,OAAO,EAAE,SAAS;QAClB,gBAAgB,EAAE,gBAAgB;QAClC,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;KACnB,CAAC;IAEF;;OAEG;IACI,IAAM,yBAAyB,GAAG,UACvC,KAAyB,EACzB,GAA2B;QAEnB,IAAA,KAA+D,KAAK,KAArD,EAAf,IAAI,mBAAG,QAAQ,KAAA,EAAE,KAA8C,KAAK,OAA/B,EAApB,MAAM,mBAAG,WAAW,KAAA,EAAE,KAAwB,KAAK,YAAV,EAAnB,WAAW,mBAAG,KAAK,KAAA,CAAW;QAE7E,IAAM,UAAU,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,eAAe,CAAC,CAAC,CAAC,MAAI,eAAe,CAAC,eAAe,CAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QAEpH,IAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;QAEvD,IAAM,KAAK,yCACN,yBAAiB,qCAEhB,YAAY,EAAE,UAAU,GAAG,OAAO,EAClC,IAAI,EAAE,KAAK,IACR,KAAK,KACR,IAAI,MAAA,EACJ,IAAI,EAAE,kCAAgB,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,YAAY,EAAE;oBACZ,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CAAC,CAAC,CAAC,IAAI;iBAC/C;gBACD,QAAQ,EAAE,IAAI;aACf,CAAC,KAEJ,GAAG,CACJ,KACD,MAAM,QAAA,EACN,WAAW,aAAA,GACZ,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAhCW,QAAA,yBAAyB,6BAgCpC","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceBlockedRegular,\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 = (status: PresenceBadgeState['status'], outOfOffice: boolean, size: PresenceBadgeState['size']) => {\n switch (status) {\n case 'available':\n return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n case 'away':\n return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];\n case 'blocked':\n return presenceBlockedRegular[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 blocked: 'blocked',\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 { size = 'medium', status = 'available', outOfOffice = false } = props;\n\n const statusText = DEFAULT_STRINGS[status];\n const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';\n\n const IconElement = iconMap(status, outOfOffice, size);\n\n const state: PresenceBadgeState = {\n ...useBadge_unstable(\n {\n 'aria-label': statusText + oofText,\n role: 'img',\n ...props,\n size,\n icon: resolveShorthand(props.icon, {\n defaultProps: {\n children: IconElement ? <IconElement /> : null,\n },\n required: true,\n }),\n },\n ref,\n ),\n status,\n outOfOffice,\n };\n\n return state;\n};\n"]}
|
|
@@ -40,9 +40,6 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
40
40
|
outOfOfficeBusy: {
|
|
41
41
|
color: react_theme_1.tokens.colorPaletteRedBackground3,
|
|
42
42
|
},
|
|
43
|
-
outOfOfficeAway: {
|
|
44
|
-
color: react_theme_1.tokens.colorPaletteMarigoldBackground3,
|
|
45
|
-
},
|
|
46
43
|
// Icons are not resizeable, and these sizes are currently missing
|
|
47
44
|
// use `!important` to size the currently available icons to the missing ones
|
|
48
45
|
//
|
|
@@ -77,7 +74,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
|
|
|
77
74
|
var usePresenceBadgeStyles_unstable = function (state) {
|
|
78
75
|
var styles = useStyles();
|
|
79
76
|
var isBusy = getIsBusy(state.status);
|
|
80
|
-
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.
|
|
77
|
+
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.statusOutOfOffice, 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);
|
|
81
78
|
if (state.icon) {
|
|
82
79
|
state.icon.className = react_1.mergeClasses(exports.presenceBadgeClassNames.icon, state.icon.className);
|
|
83
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePresenceBadgeStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":";;;;IAMa,QAAA,uBAAuB,GAA+B;QACjE,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,yBAAyB;KAChC,CAAC;IAEF,IAAM,SAAS,GAAG,UAAC,MAA2B;QAC5C,IAAI,MAAM,KAAK,MAAM,IAAI,MAAM,KAAK,gBAAgB,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,SAAS,EAAE;YACpG,OAAO,IAAI,CAAC;SACb;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,0EACC,kBAAU,CAAC,OAAO,CAAC,CAAC,CAAC,KACxB,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,YAAY,EACvB,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EAExB,QAAQ,EAAE;gBACR,OAAO,EAAE,MAAM;aAChB,KACE,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,oBAAoB,CAAC,KACvD,eAAe,EAAE,oBAAM,CAAC,uBAAuB,GAChD;QACD,UAAU,EAAE;YACV,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;QACD,UAAU,EAAE;YACV,KAAK,EAAE,oBAAM,CAAC,+BAA+B;SAC9C;QACD,eAAe,EAAE;YACf,KAAK,EAAE,oBAAM,CAAC,iCAAiC;SAChD;QACD,aAAa,EAAE;YACb,KAAK,EAAE,oBAAM,CAAC,uBAAuB;SACtC;QACD,iBAAiB,EAAE;YACjB,KAAK,EAAE,oBAAM,CAAC,4BAA4B;SAC3C;QACD,WAAW,EAAE;YACX,KAAK,EAAE,oBAAM,CAAC,uBAAuB;SACtC;QACD,oBAAoB,EAAE;YACpB,KAAK,EAAE,oBAAM,CAAC,iCAAiC;SAChD;QACD,eAAe,EAAE;YACf,KAAK,EAAE,oBAAM,CAAC,0BAA0B;SACzC;
|
|
1
|
+
{"version":3,"file":"usePresenceBadgeStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/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' || status === 'blocked') {\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(tokens.borderRadiusCircular),\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\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.statusOutOfOffice,\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"]}
|
|
@@ -13,7 +13,7 @@ const iconMap = (status, outOfOffice, size) => {
|
|
|
13
13
|
case 'available':
|
|
14
14
|
return outOfOffice ? presenceIcons_1.presenceAvailableRegular[size] : presenceIcons_1.presenceAvailableFilled[size];
|
|
15
15
|
case 'away':
|
|
16
|
-
return outOfOffice ? presenceIcons_1.
|
|
16
|
+
return outOfOffice ? presenceIcons_1.presenceOofRegular[size] : presenceIcons_1.presenceAwayFilled[size];
|
|
17
17
|
case 'blocked':
|
|
18
18
|
return presenceIcons_1.presenceBlockedRegular[size];
|
|
19
19
|
case 'busy':
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAYA;AAGA,MAAMA,OAAO,GAAG,CAACC,MAAoC,EAAEC,WAAoB,EAAEC,IAAgC,KAAI;EAC/G,QAAQF,MAAM;IACZ,KAAK,WAAW;MACd,OAAOC,WAAW,GAAGE,wCAAwB,CAACD,IAAI,CAAC,GAAGC,uCAAuB,CAACD,IAAI,CAAC;IACrF,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGE,
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAYA;AAGA,MAAMA,OAAO,GAAG,CAACC,MAAoC,EAAEC,WAAoB,EAAEC,IAAgC,KAAI;EAC/G,QAAQF,MAAM;IACZ,KAAK,WAAW;MACd,OAAOC,WAAW,GAAGE,wCAAwB,CAACD,IAAI,CAAC,GAAGC,uCAAuB,CAACD,IAAI,CAAC;IACrF,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGE,kCAAkB,CAACD,IAAI,CAAC,GAAGC,kCAAkB,CAACD,IAAI,CAAC;IAC1E,KAAK,SAAS;MACZ,OAAOC,sCAAsB,CAACD,IAAI,CAAC;IACrC,KAAK,MAAM;MACT,OAAOD,WAAW,GAAGE,sCAAsB,CAACD,IAAI,CAAC,GAAGC,kCAAkB,CAACD,IAAI,CAAC;IAC9E,KAAK,gBAAgB;MACnB,OAAOD,WAAW,GAAGE,kCAAkB,CAACD,IAAI,CAAC,GAAGC,iCAAiB,CAACD,IAAI,CAAC;IACzE,KAAK,SAAS;MACZ,OAAOC,sCAAsB,CAACD,IAAI,CAAC;IACrC,KAAK,eAAe;MAClB,OAAOC,kCAAkB,CAACD,IAAI,CAAC;IACjC,KAAK,SAAS;MACZ,OAAOC,sCAAsB,CAACD,IAAI,CAAC;EAAC;AAE1C,CAAC;AAED,MAAME,eAAe,GAAG;EACtBC,IAAI,EAAE,MAAM;EACZ,eAAe,EAAE,eAAe;EAChCC,IAAI,EAAE,MAAM;EACZC,SAAS,EAAE,WAAW;EACtBC,OAAO,EAAE,SAAS;EAClB,gBAAgB,EAAE,gBAAgB;EAClCC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE;CACV;AAED;;;AAGO,MAAMC,yBAAyB,GAAG,CACvCC,KAAyB,EACzBC,GAA2B,KACL;EACtB,MAAM;IAAEX,IAAI,GAAG,QAAQ;IAAEF,MAAM,GAAG,WAAW;IAAEC,WAAW,GAAG;EAAK,CAAE,GAAGW,KAAK;EAE5E,MAAME,UAAU,GAAGV,eAAe,CAACJ,MAAM,CAAC;EAC1C,MAAMe,OAAO,GAAGH,KAAK,CAACX,WAAW,IAAIW,KAAK,CAACZ,MAAM,KAAK,eAAe,GAAG,IAAII,eAAe,CAAC,eAAe,CAAC,EAAE,GAAG,EAAE;EAEnH,MAAMY,WAAW,GAAGjB,OAAO,CAACC,MAAM,EAAEC,WAAW,EAAEC,IAAI,CAAC;EAEtD,MAAMe,KAAK,GAAuB;IAChC,GAAGC,yBAAiB,CAClB;MACE,YAAY,EAAEJ,UAAU,GAAGC,OAAO;MAClCI,IAAI,EAAE,KAAK;MACX,GAAGP,KAAK;MACRV,IAAI;MACJkB,IAAI,EAAEC,kCAAgB,CAACT,KAAK,CAACQ,IAAI,EAAE;QACjCE,YAAY,EAAE;UACZC,QAAQ,EAAEP,WAAW,GAAGQ,oBAACR,WAAW,OAAG,GAAG;SAC3C;QACDS,QAAQ,EAAE;OACX;KACF,EACDZ,GAAG,CACJ;IACDb,MAAM;IACNC;GACD;EAED,OAAOgB,KAAK;AACd,CAAC;AAhCYS,iCAAyB","names":["iconMap","status","outOfOffice","size","presenceIcons_1","DEFAULT_STRINGS","busy","away","available","offline","unknown","blocked","usePresenceBadge_unstable","props","ref","statusText","oofText","IconElement","state","index_1","role","icon","react_utilities_1","defaultProps","children","React","required","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport {\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceBlockedRegular,\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 = (status: PresenceBadgeState['status'], outOfOffice: boolean, size: PresenceBadgeState['size']) => {\n switch (status) {\n case 'available':\n return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];\n case 'away':\n return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];\n case 'blocked':\n return presenceBlockedRegular[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 blocked: 'blocked',\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 { size = 'medium', status = 'available', outOfOffice = false } = props;\n\n const statusText = DEFAULT_STRINGS[status];\n const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';\n\n const IconElement = iconMap(status, outOfOffice, size);\n\n const state: PresenceBadgeState = {\n ...useBadge_unstable(\n {\n 'aria-label': statusText + oofText,\n role: 'img',\n ...props,\n size,\n icon: resolveShorthand(props.icon, {\n defaultProps: {\n children: IconElement ? <IconElement /> : null,\n },\n required: true,\n }),\n },\n ref,\n ),\n status,\n outOfOffice,\n };\n\n return state;\n};\n"]}
|
|
@@ -57,9 +57,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
57
57
|
outOfOfficeBusy: {
|
|
58
58
|
sj55zd: "fvi85wt"
|
|
59
59
|
},
|
|
60
|
-
outOfOfficeAway: {
|
|
61
|
-
sj55zd: "f14k8a89"
|
|
62
|
-
},
|
|
63
60
|
tiny: {
|
|
64
61
|
Bubjx69: "f9ikmtg",
|
|
65
62
|
a9b677: "f16dn6v3",
|
|
@@ -87,7 +84,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
87
84
|
const usePresenceBadgeStyles_unstable = state => {
|
|
88
85
|
const styles = useStyles();
|
|
89
86
|
const isBusy = getIsBusy(state.status);
|
|
90
|
-
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.
|
|
87
|
+
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.statusOutOfOffice, 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);
|
|
91
88
|
if (state.icon) {
|
|
92
89
|
state.icon.className = react_1.mergeClasses(exports.presenceBadgeClassNames.icon, state.icon.className);
|
|
93
90
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAKaA,+BAAuB,GAA+B;EACjEC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,GAAIC,MAA2B,IAAa;EACzD,IAAIA,MAAM,KAAK,MAAM,IAAIA,MAAM,KAAK,gBAAgB,IAAIA,MAAM,KAAK,SAAS,IAAIA,MAAM,KAAK,SAAS,EAAE;IACpG,OAAO,IAAI;;EAGb,OAAO,KAAK;AACd,CAAC;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAKaA,+BAAuB,GAA+B;EACjEC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,GAAIC,MAA2B,IAAa;EACzD,IAAIA,MAAM,KAAK,MAAM,IAAIA,MAAM,KAAK,gBAAgB,IAAIA,MAAM,KAAK,SAAS,IAAIA,MAAM,KAAK,SAAS,EAAE;IACpG,OAAO,IAAI;;EAGb,OAAO,KAAK;AACd,CAAC;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAkE1B;AAEF;;;AAGO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1B,MAAMK,MAAM,GAAGP,SAAS,CAACK,KAAK,CAACJ,MAAM,CAAC;EACtCI,KAAK,CAACP,IAAI,CAACU,SAAS,GAAGL,oBAAY,CACjCN,+BAAuB,CAACC,IAAI,EAC5BQ,MAAM,CAACR,IAAI,EACXS,MAAM,IAAID,MAAM,CAACG,UAAU,EAC3BJ,KAAK,CAACJ,MAAM,KAAK,MAAM,IAAIK,MAAM,CAACI,UAAU,EAC5CL,KAAK,CAACJ,MAAM,KAAK,WAAW,IAAIK,MAAM,CAACK,eAAe,EACtDN,KAAK,CAACJ,MAAM,KAAK,SAAS,IAAIK,MAAM,CAACM,aAAa,EAClDP,KAAK,CAACJ,MAAM,KAAK,eAAe,IAAIK,MAAM,CAACO,iBAAiB,EAC5DR,KAAK,CAACS,WAAW,IAAIR,MAAM,CAACQ,WAAW,EACvCT,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACJ,MAAM,KAAK,WAAW,IAAIK,MAAM,CAACS,oBAAoB,EAChFV,KAAK,CAACS,WAAW,IAAIP,MAAM,IAAID,MAAM,CAACU,eAAe,EACrDX,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACJ,MAAM,KAAK,MAAM,IAAIK,MAAM,CAACO,iBAAiB,EACxER,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACJ,MAAM,KAAK,SAAS,IAAIK,MAAM,CAACM,aAAa,EACvEP,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACJ,MAAM,KAAK,eAAe,IAAIK,MAAM,CAACO,iBAAiB,EACjFR,KAAK,CAACY,IAAI,KAAK,MAAM,IAAIX,MAAM,CAACY,IAAI,EACpCb,KAAK,CAACY,IAAI,KAAK,OAAO,IAAIX,MAAM,CAACa,KAAK,EACtCd,KAAK,CAACY,IAAI,KAAK,aAAa,IAAIX,MAAM,CAACc,UAAU,EACjDf,KAAK,CAACP,IAAI,CAACU,SAAS,CACrB;EAED,IAAIH,KAAK,CAACN,IAAI,EAAE;IACdM,KAAK,CAACN,IAAI,CAACS,SAAS,GAAGL,oBAAY,CAACN,+BAAuB,CAACE,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,SAAS,CAAC;;EAGzF,OAAOH,KAAK;AACd,CAAC;AA5BYR,uCAA+B","names":["exports","root","icon","getIsBusy","status","useStyles","react_1","usePresenceBadgeStyles_unstable","state","styles","isBusy","className","statusBusy","statusAway","statusAvailable","statusOffline","statusOutOfOffice","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","size","tiny","large","extraLarge"],"sourceRoot":"../src/","sources":["packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"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' || status === 'blocked') {\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(tokens.borderRadiusCircular),\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\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.statusOutOfOffice,\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"]}
|