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
+2376
View File
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/react-badge
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
+43
View File
@@ -0,0 +1,43 @@
# @fluentui/react-badge
**Badge components for [Fluent UI](https://react.fluentui.dev/)**
A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.
## Usage
To import Badge:
```js
import { Badge, CounterBadge, PresenceBadge } from '@fluentui/react-components';
```
### Examples
```jsx
<Badge>999+</Badge>
<Badge appearance="filled">999+</Badge>
<Badge shape="rounded" />
<Badge size="medium" icon={<PasteIcon />} />
<CounterBadge count={5} appearance="ghost" />
<CounterBadge count={0} dot />
<CounterBadge count={5} size="extra-large" />
<PresenceBadge status="available" />
<PresenceBadge status="away" />
<PresenceBadge outOfOffice status="do-not-disturb" />
```
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
Alternatively, run Storybook locally with:
1. `yarn start`
2. Select `react-badge` from the list.
### Specification
See [SPEC.md](./SPEC.md).
### Migration Guide
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Badge component implementations.
+181
View File
@@ -0,0 +1,181 @@
/// <reference types="react" />
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* Define a styled Badge, using the `useBadge_unstable` hook.
*/
export declare const Badge: ForwardRefComponent<BadgeProps>;
export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
/**
* A Badge can be filled, outline, ghost, inverted
* @defaultvalue filled
*/
appearance?: 'filled' | 'ghost' | 'outline' | 'tint';
/**
* A Badge can be one of preset colors
* @defaultvalue brand
*/
color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
/**
* A Badge can position the icon before or after the content.
* @defaultvalue before
*/
iconPosition?: 'before' | 'after';
/**
* A Badge can be square, circular or rounded.
* @defaultvalue circular
*/
shape?: 'circular' | 'rounded' | 'square';
/**
* A Badge can be on of several preset sizes.
* @defaultvalue medium
*/
size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
};
export declare type BadgeSlots = {
root: Slot<'div'>;
icon?: Slot<'span'>;
};
export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;
/**
* Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
*/
export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
/**
* A Badge can have different appearances that emphasize certain parts of it:
* - filled: The default appearance if one is not specified.
* The badge background is filled with color with a contrasting foreground text to match.
* - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.
* @default filled
*/
appearance?: 'filled' | 'ghost';
/**
* Semantic colors for a counter badge
* @default brand
*/
color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
/**
* Value displayed by the Badge
* @default 0
*/
count?: number;
/**
* If a dot should be displayed without the count
* @default false
*/
dot?: boolean;
/**
* Max number to be displayed
* @default 99
*/
overflowCount?: number;
/**
* A Badge can be circular or rounded
* @default circular
*/
shape?: 'circular' | 'rounded';
/**
* If the badge should be shown when count is 0
* @default false
*/
showZero?: boolean;
};
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> & Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;
export declare const presenceAvailableFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceAvailableRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceAwayFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceAwayRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
/**
* Define a styled Badge, using the `useBadge_unstable` hook.
*/
export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> & Pick<BadgeProps, 'size'> & {
/**
* Represents several status
* @default available
*/
status?: PresenceBadgeStatus;
/**
* Modifies the display to indicate that the user is out of office.
* This can be combined with any status to display an out-of-office version of that status
* @default false
*/
outOfOffice?: boolean;
};
export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
export declare type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown' | 'blocked';
export declare const presenceBlockedRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceBusyFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceDndFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceDndRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceOfflineRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceOofRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceUnknownRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
/**
* Returns the props and state required to render the component
*/
export declare const useBadge_unstable: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
/**
* Applies style classnames to slots
*/
export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;
/**
* Returns the props and state required to render the component
*/
export declare const useCounterBadge_unstable: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeState;
/**
* Applies style classnames to slots
*/
export declare const useCounterBadgeStyles_unstable: (state: CounterBadgeState) => CounterBadgeState;
/**
* Returns the props and state required to render the component
*/
export declare const usePresenceBadge_unstable: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeState;
/**
* Applies style classnames to slots
*/
export declare const usePresenceBadgeStyles_unstable: (state: PresenceBadgeState) => PresenceBadgeState;
export { }
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Badge: function() {
return _index.Badge;
},
badgeClassNames: function() {
return _index.badgeClassNames;
},
renderBadge_unstable: function() {
return _index.renderBadge_unstable;
},
useBadgeStyles_unstable: function() {
return _index.useBadgeStyles_unstable;
},
useBadge_unstable: function() {
return _index.useBadge_unstable;
}
});
const _index = require("./components/Badge/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Badge.ts"],"sourcesContent":["export type { BadgeProps, BadgeSlots, BadgeState } from './components/Badge/index';\nexport {\n Badge,\n badgeClassNames,\n renderBadge_unstable,\n useBadgeStyles_unstable,\n useBadge_unstable,\n} from './components/Badge/index';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,KAAK;eAALA,YAAK;;IACLC,eAAe;eAAfA,sBAAe;;IACfC,oBAAoB;eAApBA,2BAAoB;;IACpBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,iBAAiB;eAAjBA,wBAAiB;;;uBACZ"}
+25
View File
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CounterBadge: function() {
return _index.CounterBadge;
},
counterBadgeClassNames: function() {
return _index.counterBadgeClassNames;
},
useCounterBadgeStyles_unstable: function() {
return _index.useCounterBadgeStyles_unstable;
},
useCounterBadge_unstable: function() {
return _index.useCounterBadge_unstable;
}
});
const _index = require("./components/CounterBadge/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CounterBadge.ts"],"sourcesContent":["export type { CounterBadgeProps, CounterBadgeState } from './components/CounterBadge/index';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n} from './components/CounterBadge/index';\n"],"names":["CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,YAAY;eAAZA,mBAAY;;IACZC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,8BAA8B;eAA9BA,qCAA8B;;IAC9BC,wBAAwB;eAAxBA,+BAAwB;;;uBACnB"}
+58
View File
@@ -0,0 +1,58 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
PresenceBadge: function() {
return _index.PresenceBadge;
},
presenceAvailableFilled: function() {
return _index.presenceAvailableFilled;
},
presenceAvailableRegular: function() {
return _index.presenceAvailableRegular;
},
presenceAwayFilled: function() {
return _index.presenceAwayFilled;
},
presenceAwayRegular: function() {
return _index.presenceAwayRegular;
},
presenceBadgeClassNames: function() {
return _index.presenceBadgeClassNames;
},
presenceBlockedRegular: function() {
return _index.presenceBlockedRegular;
},
presenceBusyFilled: function() {
return _index.presenceBusyFilled;
},
presenceDndFilled: function() {
return _index.presenceDndFilled;
},
presenceDndRegular: function() {
return _index.presenceDndRegular;
},
presenceOfflineRegular: function() {
return _index.presenceOfflineRegular;
},
presenceOofRegular: function() {
return _index.presenceOofRegular;
},
presenceUnknownRegular: function() {
return _index.presenceUnknownRegular;
},
usePresenceBadgeStyles_unstable: function() {
return _index.usePresenceBadgeStyles_unstable;
},
usePresenceBadge_unstable: function() {
return _index.usePresenceBadge_unstable;
}
});
const _index = require("./components/PresenceBadge/index");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/PresenceBadge.ts"],"sourcesContent":["export type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './components/PresenceBadge/index';\nexport {\n PresenceBadge,\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceAwayRegular,\n presenceBadgeClassNames,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n} from './components/PresenceBadge/index';\n"],"names":["PresenceBadge","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,aAAa;eAAbA,oBAAa;;IACbC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,iBAAiB;eAAjBA,wBAAiB;;IACjBC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,+BAA+B;eAA/BA,sCAA+B;;IAC/BC,yBAAyB;eAAzBA,gCAAyB;;;uBACpB"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Badge", {
enumerable: true,
get: function() {
return Badge;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useBadge = require("./useBadge");
const _useBadgeStylesstyles = require("./useBadgeStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _renderBadge = require("./renderBadge");
const Badge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useBadge.useBadge_unstable)(props, ref);
(0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useBadgeStyles_unstable')(state);
return (0, _renderBadge.renderBadge_unstable)(state);
});
Badge.displayName = 'Badge';
@@ -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":["Badge","React","forwardRef","props","ref","state","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;0BACW;sCACM;qCACI;6BACP;AAO9B,MAAMA,QAAAA,WAAAA,GAAyCC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQC,IAAAA,2BAAAA,EAAkBH,OAAOC;IAEvCG,IAAAA,6CAAAA,EAAwBF;IAExBG,IAAAA,gDAAAA,EAA4B,2BAA2BH;IAEvD,OAAOI,IAAAA,iCAAAA,EAAqBJ;AAC9B;AAEAL,MAAMU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":""}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Badge: function() {
return _Badge.Badge;
},
badgeClassNames: function() {
return _useBadgeStylesstyles.badgeClassNames;
},
renderBadge_unstable: function() {
return _renderBadge.renderBadge_unstable;
},
useBadgeStyles_unstable: function() {
return _useBadgeStylesstyles.useBadgeStyles_unstable;
},
useBadge_unstable: function() {
return _useBadge.useBadge_unstable;
}
});
const _Badge = require("./Badge");
const _renderBadge = require("./renderBadge");
const _useBadge = require("./useBadge");
const _useBadgeStylesstyles = require("./useBadgeStyles.styles");
@@ -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","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAKLC,eAAe;eAAfA,qCAAe;;IAFfC,oBAAoB;eAApBA,iCAAoB;;IAEHC,uBAAuB;eAAvBA,6CAAuB;;IADxCC,iBAAiB;eAAjBA,2BAAiB;;;uBAJJ;6BAGe;0BACH;sCACuB"}
@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderBadge_unstable", {
enumerable: true,
get: function() {
return renderBadge_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderBadge_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.iconPosition === 'before' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.root.children,
state.iconPosition === 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.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":["renderBadge_unstable","state","assertSlots","_jsxs","root","iconPosition","icon","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;gCAE4B;AAGrB,MAAMA,uBAAuB,CAACC;IACnCC,IAAAA,2BAAAA,EAAwBD;IAExB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,YAAY,KAAK,YAAYJ,MAAMK,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,IAAI,EAAA,CAAA;YAC5DL,MAAMG,IAAI,CAACI,QAAQ;YACnBP,MAAMI,YAAY,KAAK,WAAWJ,MAAMK,IAAI,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACN,MAAMK,IAAI,EAAA,CAAA;;;AAGlE"}
@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useBadge_unstable", {
enumerable: true,
get: function() {
return useBadge_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
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: _reactutilities.slot.always((0, _reactutilities.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: _reactutilities.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":["useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon","slot","always","getIntrinsicElementProps","elementType","optional"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;iEAPU;gCACwB;AAMxC,MAAMA,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,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FZ,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAM;QAEvBJ,MAAMC,oBAAAA,CAAKI,QAAQ,CAACf,MAAMU,IAAI,EAAE;YAAEI,aAAa;QAAO;IACxD;IAEA,OAAOP;AACT"}
@@ -0,0 +1,589 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
badgeClassNames: function() {
return badgeClassNames;
},
useBadgeStyles_unstable: function() {
return useBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
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 = _reacttheme.tokens.spacingHorizontalXXS;
const useRootClassName = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__resetStyles)("rttl5z0", null, [
".rttl5z0{display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"
]);
const useIconStyles = /*#__PURE__*/ (0, _react.__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;}"
]
});
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 = (0, _react.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 = (0, _react.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,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CounterBadge", {
enumerable: true,
get: function() {
return CounterBadge;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCounterBadge = require("./useCounterBadge");
const _useCounterBadgeStylesstyles = require("./useCounterBadgeStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _index = require("../Badge/index");
const CounterBadge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCounterBadge.useCounterBadge_unstable)(props, ref);
(0, _useCounterBadgeStylesstyles.useCounterBadgeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCounterBadgeStyles_unstable')(state);
return (0, _index.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":["CounterBadge","React","forwardRef","props","ref","state","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;iCACkB;6CACM;qCACH;uBACP;AAO9B,MAAMA,eAAAA,WAAAA,GAAuDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQC,IAAAA,yCAAAA,EAAyBH,OAAOC;IAE9CG,IAAAA,2DAAAA,EAA+BF;IAE/BG,IAAAA,gDAAAA,EAA4B,kCAAkCH;IAE9D,OAAOI,IAAAA,2BAAAA,EAAqBJ;AAC9B;AAEAL,aAAaU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":""}
@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
CounterBadge: function() {
return _CounterBadge.CounterBadge;
},
counterBadgeClassNames: function() {
return _useCounterBadgeStylesstyles.counterBadgeClassNames;
},
useCounterBadgeStyles_unstable: function() {
return _useCounterBadgeStylesstyles.useCounterBadgeStyles_unstable;
},
useCounterBadge_unstable: function() {
return _useCounterBadge.useCounterBadge_unstable;
}
});
const _CounterBadge = require("./CounterBadge");
const _useCounterBadge = require("./useCounterBadge");
const _useCounterBadgeStylesstyles = require("./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","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,YAAY;eAAZA,0BAAY;;IAGZC,sBAAsB;eAAtBA,mDAAsB;;IAAEC,8BAA8B;eAA9BA,2DAA8B;;IADtDC,wBAAwB;eAAxBA,yCAAwB;;;8BAFJ;iCAEY;6CAC8B"}
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCounterBadge_unstable", {
enumerable: true,
get: function() {
return useCounterBadge_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _index = require("../Badge/index");
const useCounterBadge_unstable = (props, ref)=>{
const { shape = 'circular', appearance = 'filled', showZero = false, overflowCount = 99, count = 0, dot = false } = props;
const state = {
...(0, _index.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":["useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","useBadge_unstable","root","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;uBAEW;AAM3B,MAAMA,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,GAAIC,IAAAA,wBAAAA,EAAkBT,OAAOC,IAAI;QACjCC;QACAC;QACAC;QACAE;QACAC;IACF;IAEA,IAAI,AAACD,CAAAA,UAAU,KAAKF,QAAAA,KAAa,CAACG,OAAO,CAACC,MAAME,IAAI,CAACC,QAAQ,EAAE;QAC7DH,MAAME,IAAI,CAACC,QAAQ,GAAGL,QAAQD,gBAAgB,CAAC,EAAEA,cAAc,CAAC,CAAC,GAAG,CAAC,EAAEC,MAAM,CAAC;IAChF;IAEA,OAAOE;AACT"}
@@ -0,0 +1,61 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
counterBadgeClassNames: function() {
return counterBadgeClassNames;
},
useCounterBadgeStyles_unstable: function() {
return useCounterBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useBadgeStylesstyles = require("../Badge/useBadgeStyles.styles");
const counterBadgeClassNames = {
root: 'fui-CounterBadge',
icon: 'fui-CounterBadge__icon'
};
const useStyles = /*#__PURE__*/ (0, _react.__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;}"
]
});
const useCounterBadgeStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(counterBadgeClassNames.icon, state.icon.className);
}
return (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
};
@@ -0,0 +1 @@
{"version":3,"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"],"names":["counterBadgeClassNames","useCounterBadgeStyles_unstable","root","icon","useStyles","__styles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","state","styles","className","mergeClasses","children","useBadgeStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,sBAAsB;eAAtBA;;IAiBIC,8BAA8B;eAA9BA;;;uBAnBwB;sCACD;AACjC,MAAMD,yBAAyB;IAClCE,MAAM;IACNC,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,KAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,MAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA;AAaP,MAAMjB,iCAAkCkB,CAAAA;IAC/C;IACA,MAAMC,SAAShB;IACfe,MAAMjB,IAAI,CAACmB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,uBAAuBE,IAAI,EAAEiB,MAAMb,GAAG,IAAIc,OAAOd,GAAG,EAAE,CAACa,MAAMjB,IAAI,CAACqB,QAAQ,IAAI,CAACJ,MAAMb,GAAG,IAAIc,OAAOL,IAAI,EAAEI,MAAMjB,IAAI,CAACmB,SAAS;IACjK,IAAIF,MAAMhB,IAAI,EAAE;QACZgB,MAAMhB,IAAI,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACtB,uBAAuBG,IAAI,EAAEgB,MAAMhB,IAAI,CAACkB,SAAS;IACzF;IACA,OAAOG,IAAAA,6CAAuB,EAACL;AACnC"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "PresenceBadge", {
enumerable: true,
get: function() {
return PresenceBadge;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _usePresenceBadge = require("./usePresenceBadge");
const _usePresenceBadgeStylesstyles = require("./usePresenceBadgeStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _Badge = require("../../Badge");
const PresenceBadge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _usePresenceBadge.usePresenceBadge_unstable)(props, ref);
(0, _usePresenceBadgeStylesstyles.usePresenceBadgeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('usePresenceBadgeStyles_unstable')(state);
return (0, _Badge.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":["PresenceBadge","React","forwardRef","props","ref","state","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;kCACmB;8CACM;qCACJ;uBACP;AAO9B,MAAMA,gBAAAA,WAAAA,GAAyDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQC,IAAAA,2CAAAA,EAA0BH,OAAOC;IAE/CG,IAAAA,6DAAAA,EAAgCF;IAEhCG,IAAAA,gDAAAA,EAA4B,mCAAmCH;IAE/D,OAAOI,IAAAA,2BAAAA,EAAqBJ;AAC9B;AAEAL,cAAcU,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -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":""}
@@ -0,0 +1,61 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
PresenceBadge: function() {
return _PresenceBadge.PresenceBadge;
},
presenceAvailableFilled: function() {
return _presenceIcons.presenceAvailableFilled;
},
presenceAvailableRegular: function() {
return _presenceIcons.presenceAvailableRegular;
},
presenceAwayFilled: function() {
return _presenceIcons.presenceAwayFilled;
},
presenceAwayRegular: function() {
return _presenceIcons.presenceAwayRegular;
},
presenceBadgeClassNames: function() {
return _usePresenceBadgeStylesstyles.presenceBadgeClassNames;
},
presenceBlockedRegular: function() {
return _presenceIcons.presenceBlockedRegular;
},
presenceBusyFilled: function() {
return _presenceIcons.presenceBusyFilled;
},
presenceDndFilled: function() {
return _presenceIcons.presenceDndFilled;
},
presenceDndRegular: function() {
return _presenceIcons.presenceDndRegular;
},
presenceOfflineRegular: function() {
return _presenceIcons.presenceOfflineRegular;
},
presenceOofRegular: function() {
return _presenceIcons.presenceOofRegular;
},
presenceUnknownRegular: function() {
return _presenceIcons.presenceUnknownRegular;
},
usePresenceBadgeStyles_unstable: function() {
return _usePresenceBadgeStylesstyles.usePresenceBadgeStyles_unstable;
},
usePresenceBadge_unstable: function() {
return _usePresenceBadge.usePresenceBadge_unstable;
}
});
const _PresenceBadge = require("./PresenceBadge");
const _usePresenceBadge = require("./usePresenceBadge");
const _usePresenceBadgeStylesstyles = require("./usePresenceBadgeStyles.styles");
const _presenceIcons = require("./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","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,aAAa;eAAbA,4BAAa;;IAKpBC,uBAAuB;eAAvBA,sCAAuB;;IACvBC,wBAAwB;eAAxBA,uCAAwB;;IACxBC,kBAAkB;eAAlBA,iCAAkB;;IAClBC,mBAAmB;eAAnBA,kCAAmB;;IALZC,uBAAuB;eAAvBA,qDAAuB;;IAM9BC,sBAAsB;eAAtBA,qCAAsB;;IACtBC,kBAAkB;eAAlBA,iCAAkB;;IAClBC,iBAAiB;eAAjBA,gCAAiB;;IACjBC,kBAAkB;eAAlBA,iCAAkB;;IAClBC,sBAAsB;eAAtBA,qCAAsB;;IACtBC,kBAAkB;eAAlBA,iCAAkB;;IAClBC,sBAAsB;eAAtBA,qCAAsB;;IAZUC,+BAA+B;eAA/BA,6DAA+B;;IADxDC,yBAAyB;eAAzBA,2CAAyB;;;+BAFJ;kCAEY;8CAC+B;+BAalE"}
@@ -0,0 +1,180 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
presenceAvailableFilled: function() {
return presenceAvailableFilled;
},
presenceAvailableRegular: function() {
return presenceAvailableRegular;
},
presenceAwayFilled: function() {
return presenceAwayFilled;
},
presenceAwayRegular: function() {
return presenceAwayRegular;
},
presenceBlockedRegular: function() {
return presenceBlockedRegular;
},
presenceBusyFilled: function() {
return presenceBusyFilled;
},
presenceDndFilled: function() {
return presenceDndFilled;
},
presenceDndRegular: function() {
return presenceDndRegular;
},
presenceOfflineRegular: function() {
return presenceOfflineRegular;
},
presenceOofRegular: function() {
return presenceOofRegular;
},
presenceUnknownRegular: function() {
return presenceUnknownRegular;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacticons = require("@fluentui/react-icons");
const presenceAwayRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceAway10Regular,
'extra-small': _reacticons.PresenceAway10Regular,
small: _reacticons.PresenceAway12Regular,
medium: _reacticons.PresenceAway16Regular,
large: _reacticons.PresenceAway20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceAway20Regular
};
const presenceAwayFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceAway10Filled,
'extra-small': _reacticons.PresenceAway10Filled,
small: _reacticons.PresenceAway12Filled,
medium: _reacticons.PresenceAway16Filled,
large: _reacticons.PresenceAway20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceAway20Filled
};
const presenceAvailableRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceAvailable10Regular,
'extra-small': _reacticons.PresenceAvailable10Regular,
small: _reacticons.PresenceAvailable12Regular,
medium: _reacticons.PresenceAvailable16Regular,
large: _reacticons.PresenceAvailable20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceAvailable20Regular
};
const presenceAvailableFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceAvailable10Filled,
'extra-small': _reacticons.PresenceAvailable10Filled,
small: _reacticons.PresenceAvailable12Filled,
medium: _reacticons.PresenceAvailable16Filled,
large: _reacticons.PresenceAvailable20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceAvailable20Filled
};
const presenceBlockedRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceBlocked10Regular,
'extra-small': _reacticons.PresenceBlocked10Regular,
small: _reacticons.PresenceBlocked12Regular,
medium: _reacticons.PresenceBlocked16Regular,
large: _reacticons.PresenceBlocked20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceBlocked20Regular
};
const presenceBusyFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceBusy10Filled,
'extra-small': _reacticons.PresenceBusy10Filled,
small: _reacticons.PresenceBusy12Filled,
medium: _reacticons.PresenceBusy16Filled,
large: _reacticons.PresenceBusy20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceBusy20Filled
};
const presenceDndFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceDnd10Filled,
'extra-small': _reacticons.PresenceDnd10Filled,
small: _reacticons.PresenceDnd12Filled,
medium: _reacticons.PresenceDnd16Filled,
large: _reacticons.PresenceDnd20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceDnd20Filled
};
const presenceDndRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceDnd10Regular,
'extra-small': _reacticons.PresenceDnd10Regular,
small: _reacticons.PresenceDnd12Regular,
medium: _reacticons.PresenceDnd16Regular,
large: _reacticons.PresenceDnd20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceDnd20Regular
};
const presenceOofRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceOof10Regular,
'extra-small': _reacticons.PresenceOof10Regular,
small: _reacticons.PresenceOof12Regular,
medium: _reacticons.PresenceOof16Regular,
large: _reacticons.PresenceOof20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceOof20Regular
};
const presenceOfflineRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceOffline10Regular,
'extra-small': _reacticons.PresenceOffline10Regular,
small: _reacticons.PresenceOffline12Regular,
medium: _reacticons.PresenceOffline16Regular,
large: _reacticons.PresenceOffline20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceOffline20Regular
};
const presenceUnknownRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceUnknown10Regular,
'extra-small': _reacticons.PresenceUnknown10Regular,
small: _reacticons.PresenceUnknown12Regular,
medium: _reacticons.PresenceUnknown16Regular,
large: _reacticons.PresenceUnknown20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceUnknown20Regular
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,69 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "usePresenceBadge_unstable", {
enumerable: true,
get: function() {
return usePresenceBadge_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _presenceIcons = require("./presenceIcons");
const _index = require("../Badge/index");
const iconMap = (status, outOfOffice, size)=>{
switch(status){
case 'available':
return outOfOffice ? _presenceIcons.presenceAvailableRegular[size] : _presenceIcons.presenceAvailableFilled[size];
case 'away':
return outOfOffice ? _presenceIcons.presenceOofRegular[size] : _presenceIcons.presenceAwayFilled[size];
case 'blocked':
return _presenceIcons.presenceBlockedRegular[size];
case 'busy':
return outOfOffice ? _presenceIcons.presenceUnknownRegular[size] : _presenceIcons.presenceBusyFilled[size];
case 'do-not-disturb':
return outOfOffice ? _presenceIcons.presenceDndRegular[size] : _presenceIcons.presenceDndFilled[size];
case 'offline':
return outOfOffice ? _presenceIcons.presenceOofRegular[size] : _presenceIcons.presenceOfflineRegular[size];
case 'out-of-office':
return _presenceIcons.presenceOofRegular[size];
case 'unknown':
return _presenceIcons.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'
};
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 = {
...(0, _index.useBadge_unstable)({
'aria-label': statusText + oofText,
role: 'img',
...props,
size,
icon: _reactutilities.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":["usePresenceBadge_unstable","iconMap","status","outOfOffice","size","presenceAvailableRegular","presenceAvailableFilled","presenceOofRegular","presenceAwayFilled","presenceBlockedRegular","presenceUnknownRegular","presenceBusyFilled","presenceDndRegular","presenceDndFilled","presenceOfflineRegular","DEFAULT_STRINGS","busy","away","available","offline","unknown","blocked","props","ref","statusText","oofText","IconElement","state","useBadge_unstable","role","icon","slot","optional","defaultProps","children","React","createElement","renderByDefault","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoDaA;;;eAAAA;;;;iEApDU;gCACF;+BAYd;uBAC2B;AAGlC,MAAMC,UAAU,CAACC,QAAsCC,aAAsBC;IAC3E,OAAQF;QACN,KAAK;YACH,OAAOC,cAAcE,uCAAwB,CAACD,KAAK,GAAGE,sCAAuB,CAACF,KAAK;QACrF,KAAK;YACH,OAAOD,cAAcI,iCAAkB,CAACH,KAAK,GAAGI,iCAAkB,CAACJ,KAAK;QAC1E,KAAK;YACH,OAAOK,qCAAsB,CAACL,KAAK;QACrC,KAAK;YACH,OAAOD,cAAcO,qCAAsB,CAACN,KAAK,GAAGO,iCAAkB,CAACP,KAAK;QAC9E,KAAK;YACH,OAAOD,cAAcS,iCAAkB,CAACR,KAAK,GAAGS,gCAAiB,CAACT,KAAK;QACzE,KAAK;YACH,OAAOD,cAAcI,iCAAkB,CAACH,KAAK,GAAGU,qCAAsB,CAACV,KAAK;QAC9E,KAAK;YACH,OAAOG,iCAAkB,CAACH,KAAK;QACjC,KAAK;YACH,OAAOM,qCAAsB,CAACN,KAAK;IACvC;AACF;AAEA,MAAMW,kBAAkB;IACtBC,MAAM;IACN,iBAAiB;IACjBC,MAAM;IACNC,WAAW;IACXC,SAAS;IACT,kBAAkB;IAClBC,SAAS;IACTC,SAAS;AACX;AAKO,MAAMrB,4BAA4B,CACvCsB,OACAC;IAEA,MAAM,EAAEnB,OAAO,QAAQ,EAAEF,SAAS,WAAW,EAAEC,cAAc,KAAK,EAAE,GAAGmB;IAEvE,MAAME,aAAaT,eAAe,CAACb,OAAO;IAC1C,MAAMuB,UAAUH,MAAMnB,WAAW,IAAImB,MAAMpB,MAAM,KAAK,kBAAkB,CAAC,CAAC,EAAEa,eAAe,CAAC,gBAAgB,CAAC,CAAC,GAAG;IAEjH,MAAMW,cAAczB,QAAQC,QAAQC,aAAaC;IAEjD,MAAMuB,QAA4B;QAChC,GAAGC,IAAAA,wBAAAA,EACD;YACE,cAAcJ,aAAaC;YAC3BI,MAAM;YACN,GAAGP,KAAK;YACRlB;YACA0B,MAAMC,oBAAAA,CAAKC,QAAQ,CAACV,MAAMQ,IAAI,EAAE;gBAC9BG,cAAc;oBACZC,UAAUR,cAAAA,WAAAA,GAAcS,OAAAC,aAAA,CAACV,aAAAA,QAAiB;gBAC5C;gBACAW,iBAAiB;gBACjBC,aAAa;YACf;QACF,GACAf,IACD;QACDrB;QACAC;IACF;IAEA,OAAOwB;AACT"}
@@ -0,0 +1,118 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
presenceBadgeClassNames: function() {
return presenceBadgeClassNames;
},
usePresenceBadgeStyles_unstable: function() {
return usePresenceBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
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__*/ (0, _react.__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__*/ (0, _react.__resetStyles)("r11ag4qr", null, [
".r11ag4qr{display:flex;margin:-1px;}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__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;}"
]
});
const usePresenceBadgeStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
const iconClassName = useIconClassName();
const styles = useStyles();
const isBusy = getIsBusy(state.status);
state.root.className = (0, _react.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 = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
}
return state;
};
File diff suppressed because one or more lines are too long
+87
View File
@@ -0,0 +1,87 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Badge: function() {
return _Badge.Badge;
},
CounterBadge: function() {
return _CounterBadge.CounterBadge;
},
PresenceBadge: function() {
return _PresenceBadge.PresenceBadge;
},
badgeClassNames: function() {
return _Badge.badgeClassNames;
},
counterBadgeClassNames: function() {
return _CounterBadge.counterBadgeClassNames;
},
presenceAvailableFilled: function() {
return _PresenceBadge.presenceAvailableFilled;
},
presenceAvailableRegular: function() {
return _PresenceBadge.presenceAvailableRegular;
},
presenceAwayFilled: function() {
return _PresenceBadge.presenceAwayFilled;
},
presenceAwayRegular: function() {
return _PresenceBadge.presenceAwayRegular;
},
presenceBadgeClassNames: function() {
return _PresenceBadge.presenceBadgeClassNames;
},
presenceBlockedRegular: function() {
return _PresenceBadge.presenceBlockedRegular;
},
presenceBusyFilled: function() {
return _PresenceBadge.presenceBusyFilled;
},
presenceDndFilled: function() {
return _PresenceBadge.presenceDndFilled;
},
presenceDndRegular: function() {
return _PresenceBadge.presenceDndRegular;
},
presenceOfflineRegular: function() {
return _PresenceBadge.presenceOfflineRegular;
},
presenceOofRegular: function() {
return _PresenceBadge.presenceOofRegular;
},
presenceUnknownRegular: function() {
return _PresenceBadge.presenceUnknownRegular;
},
renderBadge_unstable: function() {
return _Badge.renderBadge_unstable;
},
useBadgeStyles_unstable: function() {
return _Badge.useBadgeStyles_unstable;
},
useBadge_unstable: function() {
return _Badge.useBadge_unstable;
},
useCounterBadgeStyles_unstable: function() {
return _CounterBadge.useCounterBadgeStyles_unstable;
},
useCounterBadge_unstable: function() {
return _CounterBadge.useCounterBadge_unstable;
},
usePresenceBadgeStyles_unstable: function() {
return _PresenceBadge.usePresenceBadgeStyles_unstable;
},
usePresenceBadge_unstable: function() {
return _PresenceBadge.usePresenceBadge_unstable;
}
});
const _Badge = require("./Badge");
const _PresenceBadge = require("./PresenceBadge");
const _CounterBadge = require("./CounterBadge");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n PresenceBadge,\n presenceBadgeClassNames,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n presenceAwayRegular,\n presenceAwayFilled,\n presenceAvailableRegular,\n presenceAvailableFilled,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndRegular,\n presenceDndFilled,\n presenceOofRegular,\n presenceOfflineRegular,\n presenceUnknownRegular,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"names":["Badge","CounterBadge","PresenceBadge","badgeClassNames","counterBadgeClassNames","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useCounterBadgeStyles_unstable","useCounterBadge_unstable","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAqBZC,YAAY;eAAZA,0BAAY;;IAlBZC,aAAa;eAAbA,4BAAa;;IAHCC,eAAe;eAAfA,sBAAe;;IAsB7BC,sBAAsB;eAAtBA,oCAAsB;;IAZtBC,uBAAuB;eAAvBA,sCAAuB;;IADvBC,wBAAwB;eAAxBA,uCAAwB;;IADxBC,kBAAkB;eAAlBA,iCAAkB;;IADlBC,mBAAmB;eAAnBA,kCAAmB;;IAHnBC,uBAAuB;eAAvBA,sCAAuB;;IAOvBC,sBAAsB;eAAtBA,qCAAsB;;IACtBC,kBAAkB;eAAlBA,iCAAkB;;IAElBC,iBAAiB;eAAjBA,gCAAiB;;IADjBC,kBAAkB;eAAlBA,iCAAkB;;IAGlBC,sBAAsB;eAAtBA,qCAAsB;;IADtBC,kBAAkB;eAAlBA,iCAAkB;;IAElBC,sBAAsB;eAAtBA,qCAAsB;;IAjBSC,oBAAoB;eAApBA,2BAAoB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAuB/FC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;IAnBxBC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;;uBAN8E;+BAkBlG;8BAOA"}
+1
View File
@@ -0,0 +1 @@
export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './components/Badge/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/Badge.ts"],"sourcesContent":["export type { BadgeProps, BadgeSlots, BadgeState } from './components/Badge/index';\nexport {\n Badge,\n badgeClassNames,\n renderBadge_unstable,\n useBadgeStyles_unstable,\n useBadge_unstable,\n} from './components/Badge/index';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+1
View File
@@ -0,0 +1 @@
export { CounterBadge, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable } from './components/CounterBadge/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/CounterBadge.ts"],"sourcesContent":["export type { CounterBadgeProps, CounterBadgeState } from './components/CounterBadge/index';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n} from './components/CounterBadge/index';\n"],"names":["CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
+1
View File
@@ -0,0 +1 @@
export { PresenceBadge, presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceAwayRegular, presenceBadgeClassNames, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable } from './components/PresenceBadge/index';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/PresenceBadge.ts"],"sourcesContent":["export type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './components/PresenceBadge/index';\nexport {\n PresenceBadge,\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceAwayRegular,\n presenceBadgeClassNames,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n} from './components/PresenceBadge/index';\n"],"names":["PresenceBadge","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,mBAAmB,EACnBC,uBAAuB,EACvBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,EACtBC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}
+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
+3
View File
@@ -0,0 +1,3 @@
export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';
export { PresenceBadge, presenceBadgeClassNames, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, presenceAwayRegular, presenceAwayFilled, presenceAvailableRegular, presenceAvailableFilled, presenceBlockedRegular, presenceBusyFilled, presenceDndRegular, presenceDndFilled, presenceOofRegular, presenceOfflineRegular, presenceUnknownRegular } from './PresenceBadge';
export { CounterBadge, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable } from './CounterBadge';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n PresenceBadge,\n presenceBadgeClassNames,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n presenceAwayRegular,\n presenceAwayFilled,\n presenceAvailableRegular,\n presenceAvailableFilled,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndRegular,\n presenceDndFilled,\n presenceOofRegular,\n presenceOfflineRegular,\n presenceUnknownRegular,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","PresenceBadge","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","presenceAwayRegular","presenceAwayFilled","presenceAvailableRegular","presenceAvailableFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndRegular","presenceDndFilled","presenceOofRegular","presenceOfflineRegular","presenceUnknownRegular","CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable"],"rangeMappings":";;","mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU;AAEnH,SACEC,aAAa,EACbC,uBAAuB,EACvBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,mBAAmB,EACnBC,kBAAkB,EAClBC,wBAAwB,EACxBC,uBAAuB,EACvBC,sBAAsB,EACtBC,kBAAkB,EAClBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,sBAAsB,QACjB,kBAAkB;AAEzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB"}
+56
View File
@@ -0,0 +1,56 @@
{
"name": "@fluentui/react-badge",
"version": "9.2.50",
"description": "React components for building web experiences",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
"typings": "./dist/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "https://github.com/microsoft/fluentui"
},
"license": "MIT",
"devDependencies": {
"@fluentui/eslint-plugin": "*",
"@fluentui/react-conformance": "*",
"@fluentui/react-conformance-griffel": "*",
"@fluentui/scripts-api-extractor": "*"
},
"dependencies": {
"@fluentui/react-icons": "^2.0.245",
"@fluentui/react-jsx-runtime": "^9.0.50",
"@fluentui/react-shared-contexts": "^9.21.2",
"@fluentui/react-theme": "^9.1.24",
"@fluentui/react-utilities": "^9.18.20",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
"@types/react": ">=16.14.0 <19.0.0",
"@types/react-dom": ">=16.9.0 <19.0.0",
"react": ">=16.14.0 <19.0.0",
"react-dom": ">=16.14.0 <19.0.0"
},
"beachball": {
"disallowedChangeTypes": [
"major",
"prerelease"
]
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./lib-commonjs/index.js",
"import": "./lib/index.js",
"require": "./lib-commonjs/index.js"
},
"./package.json": "./package.json"
},
"files": [
"*.md",
"dist/*.d.ts",
"lib",
"lib-commonjs"
]
}