Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+14
View File
@@ -0,0 +1,14 @@
import * as React from 'react';
import { useBadge_unstable } from './useBadge';
import { useBadgeStyles_unstable } from './useBadgeStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { renderBadge_unstable } from './renderBadge';
/**
* Define a styled Badge, using the `useBadge_unstable` hook.
*/ export const Badge = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useBadge_unstable(props, ref);
useBadgeStyles_unstable(state);
useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);
return renderBadge_unstable(state);
});
Badge.displayName = 'Badge';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n const state = useBadge_unstable(props, ref);\n\n useBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AAIrD;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCN,wBAAwBO;IAExBN,4BAA4B,2BAA2BM;IAEvD,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/Badge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n /**\n * A Badge can be one of preset colors\n * @defaultvalue brand\n */\n color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n /**\n * A Badge can position the icon before or after the content.\n * @defaultvalue before\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A Badge can be square, circular or rounded.\n * @defaultvalue circular\n */\n shape?: 'circular' | 'rounded' | 'square';\n\n /**\n * A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n"],"names":[],"rangeMappings":"","mappings":"AAyCA,WACyF"}
+4
View File
@@ -0,0 +1,4 @@
export { Badge } from './Badge';
export { renderBadge_unstable } from './renderBadge';
export { useBadge_unstable } from './useBadge';
export { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/index.ts"],"sourcesContent":["export { Badge } from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport { renderBadge_unstable } from './renderBadge';\nexport { useBadge_unstable } from './useBadge';\nexport { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';\n"],"names":["Badge","renderBadge_unstable","useBadge_unstable","badgeClassNames","useBadgeStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAGhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+12
View File
@@ -0,0 +1,12 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
export const renderBadge_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.iconPosition === 'before' && state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
state.root.children,
state.iconPosition === 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {})
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n assertSlots<BadgeSlots>(state);\n\n return (\n <state.root>\n {state.iconPosition === 'before' && state.icon && <state.icon />}\n {state.root.children}\n {state.iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderBadge_unstable","state","root","iconPosition","icon","children"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;;;AAGlE,EAAE"}
+31
View File
@@ -0,0 +1,31 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Returns the props and state required to render the component
*/ export const useBadge_unstable = (props, ref)=>{
const { shape = 'circular', size = 'medium', iconPosition = 'before', appearance = 'filled', color = 'brand' } = props;
const state = {
shape,
size,
iconPosition,
appearance,
color,
components: {
root: 'div',
icon: 'span'
},
root: slot.always(getIntrinsicElementProps('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
...props
}), {
elementType: 'div'
}),
icon: slot.optional(props.icon, {
elementType: 'span'
})
};
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/useBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } 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: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { elementType: 'span' }),\n };\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon","always","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EACJC,QAAQ,UAAU,EAClBC,OAAO,QAAQ,EACfC,eAAe,QAAQ,EACvBC,aAAa,QAAQ,EACrBC,QAAQ,OAAO,EAChB,GAAGN;IAEJ,MAAMO,QAAoB;QACxBL;QACAC;QACAC;QACAC;QACAC;QACAE,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMX,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;QAEvBF,MAAMZ,KAAKe,QAAQ,CAACb,MAAMU,IAAI,EAAE;YAAEE,aAAa;QAAO;IACxD;IAEA,OAAOL;AACT,EAAE"}
@@ -0,0 +1,340 @@
import { shorthands, __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const badgeClassNames = {
root: 'fui-Badge',
icon: 'fui-Badge__icon'
};
// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
const textPadding = tokens.spacingHorizontalXXS;
const useRootClassName = /*#__PURE__*/__resetStyles("r1l7mb74", "rntuq2r", [".r1l7mb74{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r1l7mb74::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}", ".rntuq2r{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;width:20px;min-width:max-content;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".rntuq2r::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"]);
const useRootStyles = /*#__PURE__*/__styles({
fontSmallToTiny: {
Bahqtrf: "fk6fouc",
Be2twd7: "f13mqy1h",
Bhrd7zp: "fl43uef",
Bg96gwp: "fcpl73t"
},
tiny: {
a9b677: "f16dn6v3",
Bqenvij: "f3mu39s",
Be2twd7: "f130uwy9",
Bg96gwp: "fod1mrr",
Bf4jedk: "f18p0k4z",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f19jm9xf"
},
"extra-small": {
a9b677: "fpd43o0",
Bqenvij: "f30q22z",
Be2twd7: "f1tccstq",
Bg96gwp: "f1y3arg5",
Bf4jedk: "f18p0k4z",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f19jm9xf"
},
small: {
a9b677: "fjw5fx7",
Bqenvij: "fd461yt",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fupdldz"
},
medium: {},
large: {
a9b677: "fq4mcun",
Bqenvij: "frvgh55",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1996nqw"
},
"extra-large": {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fty64o7"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw"
},
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5"
},
roundedSmallToTiny: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fq9zq91"
},
circular: {},
borderGhost: {
ap17g6: "f10ludwy"
},
filled: {},
"filled-brand": {
De3pzq: "ffp7eso",
sj55zd: "f1phragk"
},
"filled-danger": {
De3pzq: "fdl5y0r",
sj55zd: "f1phragk"
},
"filled-important": {
De3pzq: "f1c73kur",
sj55zd: "fr0bkrk"
},
"filled-informative": {
De3pzq: "f3vzo32",
sj55zd: "f11d4kpn"
},
"filled-severe": {
De3pzq: "f1s438gw",
sj55zd: "f1phragk"
},
"filled-subtle": {
De3pzq: "fxugw4r",
sj55zd: "f19n0e5"
},
"filled-success": {
De3pzq: "flxk52p",
sj55zd: "f1phragk"
},
"filled-warning": {
De3pzq: "ffq97bm",
sj55zd: "ff5vbop"
},
ghost: {},
"ghost-brand": {
sj55zd: "f16muhyy"
},
"ghost-danger": {
sj55zd: "f1whyuy6"
},
"ghost-important": {
sj55zd: "f19n0e5"
},
"ghost-informative": {
sj55zd: "f11d4kpn"
},
"ghost-severe": {
sj55zd: "f1l8vj45"
},
"ghost-subtle": {
sj55zd: "fonrgv7"
},
"ghost-success": {
sj55zd: "f1m7fhi8"
},
"ghost-warning": {
sj55zd: "fpti2h4"
},
outline: {
g2u3we: "f23ftbb",
h3c5rm: ["f1gkuv52", "f1p1bl80"],
B9xav0g: "fioka3i",
zhjwy3: ["f1p1bl80", "f1gkuv52"]
},
"outline-brand": {
sj55zd: "f16muhyy"
},
"outline-danger": {
sj55zd: "f1whyuy6",
g2u3we: "fyqpifd",
h3c5rm: ["f3ukxca", "f1k7dugc"],
B9xav0g: "f1njxb2b",
zhjwy3: ["f1k7dugc", "f3ukxca"]
},
"outline-important": {
sj55zd: "f11d4kpn",
g2u3we: "fq0vr37",
h3c5rm: ["f1byw159", "f11cr0be"],
B9xav0g: "f1c1zstj",
zhjwy3: ["f11cr0be", "f1byw159"]
},
"outline-informative": {
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: ["f7pw515", "fw35ms5"],
B9xav0g: "frpde29",
zhjwy3: ["fw35ms5", "f7pw515"]
},
"outline-severe": {
sj55zd: "f1l8vj45"
},
"outline-subtle": {
sj55zd: "fonrgv7"
},
"outline-success": {
sj55zd: "f1m7fhi8",
g2u3we: "f1mmhl11",
h3c5rm: ["f1tjpp2f", "f1ocn5n7"],
B9xav0g: "f1gjv25d",
zhjwy3: ["f1ocn5n7", "f1tjpp2f"]
},
"outline-warning": {
sj55zd: "fpti2h4"
},
tint: {},
"tint-brand": {
De3pzq: "f16xkysk",
sj55zd: "faj9fo0",
g2u3we: "f161y7kd",
h3c5rm: ["f1c8dzaj", "f1sl6hi9"],
B9xav0g: "f1619yhw",
zhjwy3: ["f1sl6hi9", "f1c8dzaj"]
},
"tint-danger": {
De3pzq: "ff0poqj",
sj55zd: "f1hcrxcs",
g2u3we: "f1oqjm8o",
h3c5rm: ["fkgrb8g", "frb5wm0"],
B9xav0g: "f1iai1ph",
zhjwy3: ["frb5wm0", "fkgrb8g"]
},
"tint-important": {
De3pzq: "f945g0u",
sj55zd: "fr0bkrk",
g2u3we: "fghlq4f",
h3c5rm: ["f1gn591s", "fjscplz"],
B9xav0g: "fb073pr",
zhjwy3: ["fjscplz", "f1gn591s"]
},
"tint-informative": {
De3pzq: "f1ctqxl6",
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: ["f7pw515", "fw35ms5"],
B9xav0g: "frpde29",
zhjwy3: ["fw35ms5", "f7pw515"]
},
"tint-severe": {
De3pzq: "f1xzsg4",
sj55zd: "f1k5f75o",
g2u3we: "fxy9dsj",
h3c5rm: ["f54u6j2", "fcm23ze"],
B9xav0g: "f4vf0uq",
zhjwy3: ["fcm23ze", "f54u6j2"]
},
"tint-subtle": {
De3pzq: "fxugw4r",
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: ["f7pw515", "fw35ms5"],
B9xav0g: "frpde29",
zhjwy3: ["fw35ms5", "f7pw515"]
},
"tint-success": {
De3pzq: "f2vsrz6",
sj55zd: "ffmvakt",
g2u3we: "fdmic9h",
h3c5rm: ["f196y6m", "fetptd8"],
B9xav0g: "f1pev5xq",
zhjwy3: ["fetptd8", "f196y6m"]
},
"tint-warning": {
De3pzq: "f10s6hli",
sj55zd: "f42v8de",
g2u3we: "fn9i3n",
h3c5rm: ["f1aw8cx4", "f51if14"],
B9xav0g: "fvq8iai",
zhjwy3: ["f51if14", "f1aw8cx4"]
}
}, {
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".f18p0k4z{min-width:unset;}", [".f19jm9xf{padding:unset;}", {
p: -1
}], ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", [".f19jm9xf{padding:unset;}", {
p: -1
}], ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", [".fupdldz{padding:0 calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", {
p: -1
}], ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", [".f1996nqw{padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", {
p: -1
}], ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", [".fty64o7{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
p: -1
}], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
p: -1
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
p: -1
}], ".f10ludwy::after{display:none;}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
});
const useIconRootClassName = /*#__PURE__*/__resetStyles("rttl5z0", null, [".rttl5z0{display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"]);
const useIconStyles = /*#__PURE__*/__styles({
beforeText: {
t21cq0: ["f1t8l4o1", "f11juvx6"]
},
afterText: {
Frg6f3: ["f11juvx6", "f1t8l4o1"]
},
beforeTextXL: {
t21cq0: ["f1rs9grm", "f1kwmkpi"]
},
afterTextXL: {
Frg6f3: ["f1kwmkpi", "f1rs9grm"]
},
tiny: {
Be2twd7: "f1tccstq"
},
"extra-small": {
Be2twd7: "fnmn6fi"
},
small: {
Be2twd7: "f1ugzwwg"
},
medium: {},
large: {
Be2twd7: "f4ybsrx"
},
"extra-large": {
Be2twd7: "fe5j1ua"
}
}, {
d: [".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
});
/**
* Applies style classnames to slots
*/
export const useBadgeStyles_unstable = state => {
'use no memo';
const rootClassName = useRootClassName();
const rootStyles = useRootStyles();
const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
const iconRootClassName = useIconRootClassName();
const iconStyles = useIconStyles();
if (state.icon) {
let iconPositionClass;
if (state.root.children) {
if (state.size === 'extra-large') {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
} else {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
}
}
state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,14 @@
import * as React from 'react';
import { useCounterBadge_unstable } from './useCounterBadge';
import { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { renderBadge_unstable } from '../Badge/index';
/**
* Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
*/ export const CounterBadge = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useCounterBadge_unstable(props, ref);
useCounterBadgeStyles_unstable(state);
useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);
return renderBadge_unstable(state);
});
CounterBadge.displayName = 'CounterBadge';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCounterBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,iBAAiB;AAItD;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CN,+BAA+BO;IAE/BN,4BAA4B,kCAAkCM;IAE9D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.types.ts"],"sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n /**\n * A Badge can have different appearances that emphasize certain parts of it:\n * - filled: The default appearance if one is not specified.\n * The badge background is filled with color with a contrasting foreground text to match.\n * - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n * @default filled\n */\n appearance?: 'filled' | 'ghost';\n\n /**\n * Semantic colors for a counter badge\n * @default brand\n */\n color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n /**\n * Value displayed by the Badge\n * @default 0\n */\n count?: number;\n\n /**\n * If a dot should be displayed without the count\n * @default false\n */\n dot?: boolean;\n\n /**\n * Max number to be displayed\n * @default 99\n */\n overflowCount?: number;\n\n /**\n * A Badge can be circular or rounded\n * @default circular\n */\n shape?: 'circular' | 'rounded';\n\n /**\n * If the badge should be shown when count is 0\n * @default false\n */\n showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n"],"names":[],"rangeMappings":"","mappings":"AAiDA,WACqG"}
@@ -0,0 +1,3 @@
export { CounterBadge } from './CounterBadge';
export { useCounterBadge_unstable } from './useCounterBadge';
export { counterBadgeClassNames, useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/index.ts"],"sourcesContent":["export { CounterBadge } from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\nexport { useCounterBadge_unstable } from './useCounterBadge';\nexport { counterBadgeClassNames, useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\n"],"names":["CounterBadge","useCounterBadge_unstable","counterBadgeClassNames","useCounterBadgeStyles_unstable"],"rangeMappings":";;","mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
@@ -0,0 +1,19 @@
import * as React from 'react';
import { useBadge_unstable } from '../Badge/index';
/**
* Returns the props and state required to render the component
*/ export const useCounterBadge_unstable = (props, ref)=>{
const { shape = 'circular', appearance = 'filled', showZero = false, overflowCount = 99, count = 0, dot = false } = props;
const state = {
...useBadge_unstable(props, ref),
shape,
appearance,
showZero,
count,
dot
};
if ((count !== 0 || showZero) && !dot && !state.root.children) {
state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport type { BadgeState } from '../Badge/index';\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 Pick<CounterBadgeState, keyof BadgeState>),\n shape,\n appearance,\n showZero,\n count,\n dot,\n };\n\n if ((count !== 0 || showZero) && !dot && !state.root.children) {\n state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n }\n\n return state;\n};\n"],"names":["React","useBadge_unstable","useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","root","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,iBAAiB,QAAQ,iBAAiB;AAGnD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EACJC,QAAQ,UAAU,EAClBC,aAAa,QAAQ,EACrBC,WAAW,KAAK,EAChBC,gBAAgB,EAAE,EAClBC,QAAQ,CAAC,EACTC,MAAM,KAAK,EACZ,GAAGP;IAEJ,MAAMQ,QAA2B;QAC/B,GAAIV,kBAAkBE,OAAOC,IAAI;QACjCC;QACAC;QACAC;QACAE;QACAC;IACF;IAEA,IAAI,AAACD,CAAAA,UAAU,KAAKF,QAAO,KAAM,CAACG,OAAO,CAACC,MAAMC,IAAI,CAACC,QAAQ,EAAE;QAC7DF,MAAMC,IAAI,CAACC,QAAQ,GAAGJ,QAAQD,gBAAgB,CAAC,EAAEA,cAAc,CAAC,CAAC,GAAG,CAAC,EAAEC,MAAM,CAAC;IAChF;IAEA,OAAOE;AACT,EAAE"}
@@ -0,0 +1,38 @@
import { mergeClasses, __styles } from '@griffel/react';
import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
export const counterBadgeClassNames = {
root: 'fui-CounterBadge',
icon: 'fui-CounterBadge__icon'
};
const useStyles = /*#__PURE__*/__styles({
dot: {
Bf4jedk: "fgfkb25",
a9b677: "f16dn6v3",
Bqenvij: "f3mu39s",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai"
},
hide: {
mc9l5x: "fjseox"
}
}, {
d: [".fgfkb25{min-width:auto;}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", [".f1mk8lai{padding:0;}", {
p: -1
}], ".fjseox{display:none;}"]
});
/**
* Applies style classnames to slots
*/
export const useCounterBadgeStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
if (state.icon) {
state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
}
return useBadgeStyles_unstable(state);
};
@@ -0,0 +1 @@
{"version":3,"names":["mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n padding: '0'\n },\n hide: {\n display: 'none'\n }\n});\n/**\n * Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n }\n return useBadgeStyles_unstable(state);\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACjB,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEiB,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACf,GAAG,EAAE,CAACc,KAAK,CAACjB,IAAI,CAACoB,QAAQ,IAAI,CAACH,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;EAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;IACZgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;EAC1F;EACA,OAAOrB,uBAAuB,CAACmB,KAAK,CAAC;AACzC,CAAC","ignoreList":[]}
@@ -0,0 +1,14 @@
import * as React from 'react';
import { usePresenceBadge_unstable } from './usePresenceBadge';
import { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { renderBadge_unstable } from '../../Badge';
/**
* Define a styled Badge, using the `useBadge_unstable` hook.
*/ export const PresenceBadge = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = usePresenceBadge_unstable(props, ref);
usePresenceBadgeStyles_unstable(state);
useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);
return renderBadge_unstable(state);
});
PresenceBadge.displayName = 'PresenceBadge';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n usePresenceBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,cAAc;AAInD;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CN,gCAAgCO;IAEhCN,4BAA4B,mCAAmCM;IAE/D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/PresenceBadge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n | 'busy'\n | 'out-of-office'\n | 'away'\n | 'available'\n | 'offline'\n | 'do-not-disturb'\n | 'unknown'\n | 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /**\n * Represents several status\n * @default available\n */\n status?: PresenceBadgeStatus;\n\n /**\n * Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;\n"],"names":[],"rangeMappings":"","mappings":"AA6BA,WAE+D"}
@@ -0,0 +1,4 @@
export { PresenceBadge } from './PresenceBadge';
export { usePresenceBadge_unstable } from './usePresenceBadge';
export { presenceBadgeClassNames, usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';
export { presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceAwayRegular, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular } from './presenceIcons';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/index.ts"],"sourcesContent":["export { PresenceBadge } from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\nexport { usePresenceBadge_unstable } from './usePresenceBadge';\nexport { presenceBadgeClassNames, usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nexport {\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceAwayRegular,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n} from './presenceIcons';\n"],"names":["PresenceBadge","usePresenceBadge_unstable","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular"],"rangeMappings":";;;","mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,mBAAmB,EACnBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,QACjB,kBAAkB"}
@@ -0,0 +1,134 @@
import * as React from 'react';
import { PresenceAvailable10Regular, PresenceAvailable12Regular, PresenceAvailable16Regular, PresenceAvailable20Regular, PresenceAvailable10Filled, PresenceAvailable12Filled, PresenceAvailable16Filled, PresenceAvailable20Filled, PresenceAway10Regular, PresenceAway12Regular, PresenceAway16Regular, PresenceAway20Regular, PresenceAway10Filled, PresenceAway12Filled, PresenceAway16Filled, PresenceAway20Filled, PresenceBlocked10Regular, PresenceBlocked12Regular, PresenceBlocked16Regular, PresenceBlocked20Regular, PresenceBusy10Filled, PresenceBusy12Filled, PresenceBusy16Filled, PresenceBusy20Filled, PresenceDnd10Regular, PresenceDnd12Regular, PresenceDnd16Regular, PresenceDnd20Regular, PresenceDnd10Filled, PresenceDnd12Filled, PresenceDnd16Filled, PresenceDnd20Filled, PresenceOof10Regular, PresenceOof12Regular, PresenceOof16Regular, PresenceOof20Regular, PresenceOffline10Regular, PresenceOffline12Regular, PresenceOffline16Regular, PresenceOffline20Regular, PresenceUnknown10Regular, PresenceUnknown12Regular, PresenceUnknown16Regular, PresenceUnknown20Regular } from '@fluentui/react-icons';
export const presenceAwayRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceAway10Regular,
'extra-small': PresenceAway10Regular,
small: PresenceAway12Regular,
medium: PresenceAway16Regular,
large: PresenceAway20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceAway20Regular
};
export const presenceAwayFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceAway10Filled,
'extra-small': PresenceAway10Filled,
small: PresenceAway12Filled,
medium: PresenceAway16Filled,
large: PresenceAway20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceAway20Filled
};
export const presenceAvailableRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceAvailable10Regular,
'extra-small': PresenceAvailable10Regular,
small: PresenceAvailable12Regular,
medium: PresenceAvailable16Regular,
large: PresenceAvailable20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceAvailable20Regular
};
export const presenceAvailableFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceAvailable10Filled,
'extra-small': PresenceAvailable10Filled,
small: PresenceAvailable12Filled,
medium: PresenceAvailable16Filled,
large: PresenceAvailable20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceAvailable20Filled
};
export const presenceBlockedRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceBlocked10Regular,
'extra-small': PresenceBlocked10Regular,
small: PresenceBlocked12Regular,
medium: PresenceBlocked16Regular,
large: PresenceBlocked20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceBlocked20Regular
};
export const presenceBusyFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceBusy10Filled,
'extra-small': PresenceBusy10Filled,
small: PresenceBusy12Filled,
medium: PresenceBusy16Filled,
large: PresenceBusy20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceBusy20Filled
};
export const presenceDndFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceDnd10Filled,
'extra-small': PresenceDnd10Filled,
small: PresenceDnd12Filled,
medium: PresenceDnd16Filled,
large: PresenceDnd20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceDnd20Filled
};
export const presenceDndRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceDnd10Regular,
'extra-small': PresenceDnd10Regular,
small: PresenceDnd12Regular,
medium: PresenceDnd16Regular,
large: PresenceDnd20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceDnd20Regular
};
export const presenceOofRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceOof10Regular,
'extra-small': PresenceOof10Regular,
small: PresenceOof12Regular,
medium: PresenceOof16Regular,
large: PresenceOof20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceOof20Regular
};
export const presenceOfflineRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceOffline10Regular,
'extra-small': PresenceOffline10Regular,
small: PresenceOffline12Regular,
medium: PresenceOffline16Regular,
large: PresenceOffline20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceOffline20Regular
};
export const presenceUnknownRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceUnknown10Regular,
'extra-small': PresenceUnknown10Regular,
small: PresenceUnknown12Regular,
medium: PresenceUnknown16Regular,
large: PresenceUnknown20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceUnknown20Regular
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,60 @@
import * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import { presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular } from './presenceIcons';
import { useBadge_unstable } from '../Badge/index';
const iconMap = (status, outOfOffice, size)=>{
switch(status){
case 'available':
return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];
case 'away':
return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];
case 'blocked':
return presenceBlockedRegular[size];
case 'busy':
return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];
case 'do-not-disturb':
return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];
case 'offline':
return outOfOffice ? presenceOofRegular[size] : presenceOfflineRegular[size];
case 'out-of-office':
return presenceOofRegular[size];
case 'unknown':
return presenceUnknownRegular[size];
}
};
const DEFAULT_STRINGS = {
busy: 'busy',
'out-of-office': 'out of office',
away: 'away',
available: 'available',
offline: 'offline',
'do-not-disturb': 'do not disturb',
unknown: 'unknown',
blocked: 'blocked'
};
/**
* Returns the props and state required to render the component
*/ export const usePresenceBadge_unstable = (props, ref)=>{
const { size = 'medium', status = 'available', outOfOffice = false } = props;
const statusText = DEFAULT_STRINGS[status];
const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';
const IconElement = iconMap(status, outOfOffice, size);
const state = {
...useBadge_unstable({
'aria-label': statusText + oofText,
role: 'img',
...props,
size,
icon: slot.optional(props.icon, {
defaultProps: {
children: IconElement ? /*#__PURE__*/ React.createElement(IconElement, null) : null
},
renderByDefault: true,
elementType: 'span'
})
}, ref),
status,
outOfOffice
};
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot } 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 outOfOffice ? presenceOofRegular[size] : 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: slot.optional(props.icon, {\n defaultProps: {\n children: IconElement ? <IconElement /> : null,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n },\n ref,\n ),\n status,\n outOfOffice,\n };\n\n return state;\n};\n"],"names":["React","slot","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","optional","defaultProps","children","renderByDefault","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,QACjB,kBAAkB;AACzB,SAASC,iBAAiB,QAAQ,iBAAiB;AAGnD,MAAMC,UAAU,CAACC,QAAsCC,aAAsBC;IAC3E,OAAQF;QACN,KAAK;YACH,OAAOC,cAAcZ,wBAAwB,CAACa,KAAK,GAAGd,uBAAuB,CAACc,KAAK;QACrF,KAAK;YACH,OAAOD,cAAcL,kBAAkB,CAACM,KAAK,GAAGZ,kBAAkB,CAACY,KAAK;QAC1E,KAAK;YACH,OAAOX,sBAAsB,CAACW,KAAK;QACrC,KAAK;YACH,OAAOD,cAAcJ,sBAAsB,CAACK,KAAK,GAAGV,kBAAkB,CAACU,KAAK;QAC9E,KAAK;YACH,OAAOD,cAAcP,kBAAkB,CAACQ,KAAK,GAAGT,iBAAiB,CAACS,KAAK;QACzE,KAAK;YACH,OAAOD,cAAcL,kBAAkB,CAACM,KAAK,GAAGP,sBAAsB,CAACO,KAAK;QAC9E,KAAK;YACH,OAAON,kBAAkB,CAACM,KAAK;QACjC,KAAK;YACH,OAAOL,sBAAsB,CAACK,KAAK;IACvC;AACF;AAEA,MAAMC,kBAAkB;IACtBC,MAAM;IACN,iBAAiB;IACjBC,MAAM;IACNC,WAAW;IACXC,SAAS;IACT,kBAAkB;IAClBC,SAAS;IACTC,SAAS;AACX;AAEA;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEV,OAAO,QAAQ,EAAEF,SAAS,WAAW,EAAEC,cAAc,KAAK,EAAE,GAAGU;IAEvE,MAAME,aAAaV,eAAe,CAACH,OAAO;IAC1C,MAAMc,UAAUH,MAAMV,WAAW,IAAIU,MAAMX,MAAM,KAAK,kBAAkB,CAAC,CAAC,EAAEG,eAAe,CAAC,gBAAgB,CAAC,CAAC,GAAG;IAEjH,MAAMY,cAAchB,QAAQC,QAAQC,aAAaC;IAEjD,MAAMc,QAA4B;QAChC,GAAGlB,kBACD;YACE,cAAce,aAAaC;YAC3BG,MAAM;YACN,GAAGN,KAAK;YACRT;YACAgB,MAAM/B,KAAKgC,QAAQ,CAACR,MAAMO,IAAI,EAAE;gBAC9BE,cAAc;oBACZC,UAAUN,4BAAc,oBAACA,qBAAiB;gBAC5C;gBACAO,iBAAiB;gBACjBC,aAAa;YACf;QACF,GACAX,IACD;QACDZ;QACAC;IACF;IAEA,OAAOe;AACT,EAAE"}
@@ -0,0 +1,83 @@
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const presenceBadgeClassNames = {
root: 'fui-PresenceBadge',
icon: 'fui-PresenceBadge__icon'
};
const getIsBusy = status => {
if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
return true;
}
return false;
};
const useRootClassName = /*#__PURE__*/__resetStyles("r832ydo", null, [".r832ydo{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--borderRadiusCircular);background-color:var(--colorNeutralBackground1);padding:1px;background-clip:content-box;}"]);
const useIconClassName = /*#__PURE__*/__resetStyles("r11ag4qr", null, [".r11ag4qr{display:flex;margin:-1px;}"]);
const useStyles = /*#__PURE__*/__styles({
statusBusy: {
sj55zd: "fvi85wt"
},
statusAway: {
sj55zd: "f14k8a89"
},
statusAvailable: {
sj55zd: "fqa5hgp"
},
statusOffline: {
sj55zd: "f11d4kpn"
},
statusOutOfOffice: {
sj55zd: "fdce8r3"
},
statusUnknown: {
sj55zd: "f11d4kpn"
},
outOfOffice: {
sj55zd: "fr0bkrk"
},
outOfOfficeAvailable: {
sj55zd: "fqa5hgp"
},
outOfOfficeBusy: {
sj55zd: "fvi85wt"
},
outOfOfficeUnknown: {
sj55zd: "f11d4kpn"
},
tiny: {
Bubjx69: "f9ikmtg",
a9b677: "f16dn6v3",
B2eet1l: "f1w2irj7",
B5pe6w7: "fab5kbq",
p4uzdd: "f1ms1d91"
},
large: {
Bubjx69: "f9ikmtg",
a9b677: "f64fuq3",
B5pe6w7: "f1vfi1yj",
p4uzdd: "f15s34gz"
},
extraLarge: {
Bubjx69: "f9ikmtg",
a9b677: "f1w9dchk",
B5pe6w7: "f14efy9b",
p4uzdd: "fhipgdu"
}
}, {
d: [".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}", ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fdce8r3{color:var(--colorPaletteBerryForeground3);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f9ikmtg{aspect-ratio:1;}", ".f16dn6v3{width:6px;}", ".f1w2irj7{background-clip:unset;}", ".fab5kbq svg{width:6px!important;}", ".f1ms1d91 svg{height:6px!important;}", ".f64fuq3{width:20px;}", ".f1vfi1yj svg{width:20px!important;}", ".f15s34gz svg{height:20px!important;}", ".f1w9dchk{width:28px;}", ".f14efy9b svg{width:28px!important;}", ".fhipgdu svg{height:28px!important;}"]
});
/**
* Applies style classnames to slots
*/
export const usePresenceBadgeStyles_unstable = state => {
'use no memo';
const rootClassName = useRootClassName();
const iconClassName = useIconClassName();
const styles = useStyles();
const isBusy = getIsBusy(state.status);
state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, 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.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
if (state.icon) {
state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
}
return state;
};
File diff suppressed because one or more lines are too long