@fluentui/react-badge - npm Package Compare versions

Comparing version 9.0.0-alpha.83 to 9.0.0-alpha.84

CHANGELOG.md

 # Change Log - @fluentui/react-badge
 
-This log was last generated on Tue, 21 Sep 2021 07:40:35 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Sep 2021 10:08:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.84](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.84)
+
+Wed, 22 Sep 2021 10:08:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-alpha.83..@fluentui/react-badge_v9.0.0-alpha.84)
+
+### Changes
+
+- refactor(Badge): Remove `mergeProps` and migrate to simple slots ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by [e-mail])
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.70 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.50 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-alpha.52 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.45 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/bc3f1ec72fc7784a558b0dd6598ee0662f4649c1) by beachball)
+
 ## [9.0.0-alpha.83](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.83)
 
-Tue, 21 Sep 2021 07:40:35 GMT 
+Tue, 21 Sep 2021 07:42:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-alpha.82..@fluentui/react-badge_v9.0.0-alpha.83)
@@ -14,8 +28,8 @@
 
-- Updating to types over interfaces ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by [e-mail])
-- Bump @fluentui/react-make-styles to v9.0.0-alpha.69 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
-- Bump @fluentui/react-theme to v9.0.0-alpha.23 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
-- Bump @fluentui/babel-make-styles to v9.0.0-alpha.51 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.44 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.13 ([PR #19880](https://github.com/microsoft/fluentui/pull/19880) by beachball)
+- Updating to types over interfaces ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by [e-mail])
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.69 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-alpha.23 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-alpha.51 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.44 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.13 ([PR #19865](https://github.com/microsoft/fluentui/pull/19865) by beachball)
 
@@ -22,0 +36,0 @@ ## [9.0.0-alpha.82](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.82)

dist/react-badge.d.ts

@@ -1,5 +0,5 @@
-import type { ComponentPropsCompat } from '@fluentui/react-utilities';
-import type { ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import type { ShorthandPropsCompat } from '@fluentui/react-utilities';
 
@@ -9,3 +9,3 @@ /**
  */
-export declare const Badge: React_2.FunctionComponent<BadgeProps & React_2.RefAttributes<HTMLElement>>;
+export declare const Badge: React_2.ForwardRefExoticComponent<Pick<BadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition"> & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -16,113 +16,57 @@ export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
 
-export declare type BadgeProps = ComponentPropsCompat & React_2.HTMLAttributes<HTMLElement> & {
+export declare type BadgeCommons = {
     /**
      * A Badge can be sized.
-     * @defaultvalue medium
+     * @default medium
      */
-    size?: BadgeSize;
+    size: BadgeSize;
     /**
      * A Badge can be square, circular or rounded
-     * @defaultvalue circular
+     * @default circular
      */
-    shape?: BadgeShape;
+    shape: BadgeShape;
     /**
      * A Badge can be filled, outline, ghost, inverted
-     * @defaultvalue filled
+     * @default filled
      */
-    appearance?: BadgeAppearance;
+    appearance: BadgeAppearance;
     /**
      * A Badge has a preset of colors
-     * @defaultvalue filled
+     * @default brand
      */
-    color?: BadgeColors;
+    color: BadgeColors;
     /**
-     * Icon slot
-     */
-    icon?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
-    /**
      * Position for Icon to be rendered
-     * @defaultvalue before
+     * @default before
      */
-    iconPosition?: 'before' | 'after';
+    iconPosition: 'before' | 'after';
 };
 
+export declare type BadgeProps = ComponentProps<Partial<BadgeSlots>> & Partial<BadgeCommons>;
+
 export declare type BadgeShape = 'rounded' | 'square' | 'circular';
 
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const badgeShorthandPropsCompat: readonly ["icon"];
-
 export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
 
-export declare type BadgeState = BadgeProps & {
-    /**
-     * Ref to the root slot
-     */
-    ref: React_2.RefObject<HTMLElement>;
-    /**
-     * Icon slot when processed by internal state
-     */
-    icon?: ObjectShorthandPropsCompat<React_2.HTMLAttributes<HTMLSpanElement>>;
+export declare type BadgeSlots = {
+    root: Omit<IntrinsicShorthandProps<'div'>, 'color'>;
+    icon?: IntrinsicShorthandProps<'span'>;
 };
 
+export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
+
 /**
  * Define a styled CounterBadge, using the `useCounterBadge` hook.
  */
-export declare const CounterBadge: React_2.ForwardRefExoticComponent<Pick<BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "iconPosition"> & {
-    shape?: "rounded" | "circular" | undefined;
-    appearance?: "filled" | "ghost" | undefined;
-    overflowCount?: number | undefined;
-    count?: number | undefined;
-    showZero?: boolean | undefined;
-    dot?: boolean | undefined;
-} & React_2.RefAttributes<HTMLElement>>;
+export declare const CounterBadge: React_2.ForwardRefExoticComponent<Pick<CounterBadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition" | "overflowCount" | "count" | "showZero" | "dot"> & React_2.RefAttributes<HTMLElement>>;
 
-export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & {
+export declare type CounterBadgeCommons = {
     /**
-     * A Badge can be circular or rounded
-     * @defaultvalue circular
-     */
-    shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;
-    /**
-     * A Badge can be filled, ghost
-     * @defaultvalue filled
-     */
-    appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;
-    /**
      * Max number to be displayed
-     * @defaultvalue 99
+     * @default 99
      */
-    overflowCount?: number;
-    /**
-     * Value displayed by the Badge
-     * @defaultvalue 0
-     */
-    count?: number;
-    /**
-     * If the badge should be shown when count is 0
-     * @defaultvalue false
-     */
-    showZero?: boolean;
-    /**
-     * If a dot badge should be displayed
-     * @defaultvalue false
-     */
-    dot?: boolean;
-};
-
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const counterBadgeShorthandPropsCompat: readonly ["icon"];
-
-export declare type CounterBadgeState = BadgeState & {
-    /**
-     * Max number to be displayed
-     * @defaultvalue 99
-     */
     overflowCount: number;
     /**
      * Value displayed by the Badge
-     * @defaultvalue 0
+     * @default 0
      */
@@ -132,3 +76,3 @@ count: number;
      * If the badge should be shown when count is 0
-     * @defaultvalue false
+     * @default false
      */
@@ -138,38 +82,36 @@ showZero: boolean;
      * If a dot badge should be displayed
-     * @defaultvalue false
+     * @default false
      */
     dot: boolean;
-};
-
-/**
- * Define a styled Badge, using the `useBadge` hook.
- */
-export declare const PresenceBadge: React_2.ForwardRefExoticComponent<Pick<BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "iconPosition"> & {
-    status?: "available" | "busy" | "outOfOffice" | "away" | "offline" | "doNotDisturb" | undefined;
-    outOfOffice?: boolean | undefined;
-} & React_2.RefAttributes<HTMLElement>>;
-
-export declare type PresenceBadgeProps = Omit<BadgeProps, 'shape' | 'appearance'> & {
     /**
-     * Represents several status
-     * @defaultvalue available
+     * A Badge can be circular or rounded
+     * @default circular
      */
-    status?: PresenceBadgeStatus;
+    shape: 'rounded' | 'circular';
     /**
-     * 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
-     * @defaultvalue false
+     * A Badge can be filled, ghost
+     * @default filled
      */
-    outOfOffice?: boolean;
+    appearance: 'filled' | 'ghost';
 };
 
 /**
- * Consts listing which props are shorthand props.
+ * {@docCategory CounterBadge}
  */
-export declare const presenceBadgeShorthandPropsCompat: (keyof PresenceBadgeProps)[];
+export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
 
-export declare type PresenceBadgeState = Omit<BadgeState, 'shape' | 'appearance'> & {
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape'> & CounterBadgeCommons;
+
+/**
+ * Define a styled Badge, using the `useBadge` hook.
+ */
+export declare const PresenceBadge: React_2.ForwardRefExoticComponent<Pick<PresenceBadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition" | "outOfOffice" | "status"> & React_2.RefAttributes<HTMLElement>>;
+
+export declare interface PresenceBadgeCommons {
     /**
      * Represents several status
-     * @defaultvalue available
+     * @default available
      */
@@ -180,7 +122,11 @@ status: PresenceBadgeStatus;
      * This can be combined with any status to display an out-of-office version of that status
-     * @defaultvalue false
+     * @default false
      */
     outOfOffice: boolean;
-};
+}
 
+export declare type PresenceBadgeProps = BadgeProps & Partial<PresenceBadgeCommons>;
+
+export declare type PresenceBadgeState = BadgeState & PresenceBadgeCommons;
+
 export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
@@ -193,3 +139,3 @@
  */
-export declare const useBadge: (props: BadgeProps, ref: React_2.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;
+export declare const useBadge: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
 
@@ -204,3 +150,3 @@ /**
  */
-export declare const useCounterBadge: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CounterBadgeProps | undefined) => CounterBadgeState;
+export declare const useCounterBadge: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeState;
 
@@ -215,3 +161,3 @@ /**
  */
-export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>, defaultProps?: PresenceBadgeProps | undefined) => PresenceBadgeState;
+export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeState;
 
@@ -218,0 +164,0 @@ /**

lib-commonjs/common/isConformant.js

@@ -16,2 +16,4 @@ "use strict";
     componentPath: module.parent.filename.replace('.test', ''),
+    // https://github.com/microsoft/fluentui/issues/19522
+    skipAsPropTests: true,
     extraTests: react_conformance_make_styles_1.default
@@ -18,0 +20,0 @@ };

lib-commonjs/components/Badge/Badge.d.ts

@@ -6,2 +6,2 @@ import * as React from 'react';
  */
-export declare const Badge: React.FunctionComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
+export declare const Badge: React.ForwardRefExoticComponent<Pick<BadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition"> & React.RefAttributes<HTMLDivElement>>;

lib-commonjs/components/Badge/Badge.types.d.ts

@@ -1,3 +0,2 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ShorthandPropsCompat, ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { IntrinsicShorthandProps, ComponentProps, ComponentState } from '@fluentui/react-utilities';
 export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
@@ -7,42 +6,34 @@ export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
 export declare type BadgeColors = 'brand' | 'danger' | 'severe' | 'warning' | 'success' | 'important' | 'informative' | 'subtle';
-export declare type BadgeProps = ComponentPropsCompat & React.HTMLAttributes<HTMLElement> & {
+export declare type BadgeSlots = {
+    root: Omit<IntrinsicShorthandProps<'div'>, 'color'>;
+    icon?: IntrinsicShorthandProps<'span'>;
+};
+export declare type BadgeCommons = {
     /**
      * A Badge can be sized.
-     * @defaultvalue medium
+     * @default medium
      */
-    size?: BadgeSize;
+    size: BadgeSize;
     /**
      * A Badge can be square, circular or rounded
-     * @defaultvalue circular
+     * @default circular
      */
-    shape?: BadgeShape;
+    shape: BadgeShape;
     /**
      * A Badge can be filled, outline, ghost, inverted
-     * @defaultvalue filled
+     * @default filled
      */
-    appearance?: BadgeAppearance;
+    appearance: BadgeAppearance;
     /**
      * A Badge has a preset of colors
-     * @defaultvalue filled
+     * @default brand
      */
-    color?: BadgeColors;
+    color: BadgeColors;
     /**
-     * Icon slot
-     */
-    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
      * Position for Icon to be rendered
-     * @defaultvalue before
+     * @default before
      */
-    iconPosition?: 'before' | 'after';
+    iconPosition: 'before' | 'after';
 };
-export declare type BadgeState = BadgeProps & {
-    /**
-     * Ref to the root slot
-     */
-    ref: React.RefObject<HTMLElement>;
-    /**
-     * Icon slot when processed by internal state
-     */
-    icon?: ObjectShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;
-};
+export declare type BadgeProps = ComponentProps<Partial<BadgeSlots>> & Partial<BadgeCommons>;
+export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;

lib-commonjs/components/Badge/renderBadge.js

@@ -14,10 +14,8 @@ "use strict";
 
-var useBadge_1 = /*#__PURE__*/require("./useBadge");
-
 var renderBadge = function (state) {
-  var _a = react_utilities_1.getSlotsCompat(state, useBadge_1.badgeShorthandPropsCompat),
+  var _a = react_utilities_1.getSlots(state, ['icon', 'root']),
       slots = _a.slots,
       slotProps = _a.slotProps;
 
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.iconPosition === 'before' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), state.children, state.iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)));
+  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.iconPosition === 'before' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), state.root.children, state.iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)));
 };
@@ -24,0 +22,0 @@

lib-commonjs/components/Badge/useBadge.d.ts

 import * as React from 'react';
 import type { BadgeProps, BadgeState } from './Badge.types';
 /**
- * Consts listing which props are shorthand props.
- */
-export declare const badgeShorthandPropsCompat: readonly ["icon"];
-/**
  * Returns the props and state required to render the component
  */
-export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;
+export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>) => BadgeState;

lib-commonjs/components/Badge/useBadge.js

@@ -6,28 +6,39 @@ "use strict";
 });
-exports.useBadge = exports.badgeShorthandPropsCompat = void 0;
+exports.useBadge = void 0;
 
-var React = /*#__PURE__*/require("react");
+var tslib_1 = /*#__PURE__*/require("tslib");
 
 var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
- * Consts listing which props are shorthand props.
+ * Returns the props and state required to render the component
  */
 
 
-exports.badgeShorthandPropsCompat = ['icon'];
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({
-  deepMerge: exports.badgeShorthandPropsCompat
-});
-/**
- * Returns the props and state required to render the component
- */
-
-var useBadge = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
-    shape: 'circular',
-    size: 'medium',
-    iconPosition: 'before',
-    'aria-hidden': true
-  }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.badgeShorthandPropsCompat), react_utilities_1.resolveShorthandProps(props, exports.badgeShorthandPropsCompat));
+var useBadge = function (props, ref) {
+  var _a = props.shape,
+      shape = _a === void 0 ? 'circular' : _a,
+      _b = props.size,
+      size = _b === void 0 ? 'medium' : _b,
+      _c = props.iconPosition,
+      iconPosition = _c === void 0 ? 'before' : _c,
+      _d = props.appearance,
+      appearance = _d === void 0 ? 'filled' : _d,
+      _e = props.color,
+      color = _e === void 0 ? 'brand' : _e;
+  var state = {
+    shape: shape,
+    size: size,
+    iconPosition: iconPosition,
+    appearance: appearance,
+    color: color,
+    components: {
+      root: 'div',
+      icon: 'span'
+    },
+    root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({
+      ref: ref,
+      'aria-hidden': true
+    }, props)),
+    icon: react_utilities_1.resolveShorthand(props.icon)
+  };
   return state;
@@ -34,0 +45,0 @@ };

lib-commonjs/components/Badge/useBadgeStyles.js

@@ -323,3 +323,3 @@ "use strict";
   var isSubtle = state.color === 'subtle';
-  state.className = react_make_styles_1.mergeClasses(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' && (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') && styles.rootRoundedSmallSmallerSmallest, isGhost && styles.rootGhost, isOutline && styles.rootOutline, isTint && styles.rootTint, isFilled && isDanger && styles.rootFilledDanger, isOutline && isDanger && styles.rootOutlineDanger, isTint && isDanger && styles.rootTintDanger, isGhost && isDanger && styles.rootGhostDanger, isFilled && isSevere && styles.rootFilledSevere, isOutline && isSevere && styles.rootOutlineSevere, isTint && isSevere && styles.rootTintSevere, isGhost && isSevere && styles.rootGhostSevere, isFilled && isWarning && styles.rootFilledWarning, isOutline && isWarning && styles.rootOutlineWarning, isTint && isWarning && styles.rootTintWarning, isGhost && isWarning && styles.rootGhostWarning, isFilled && isSuccess && styles.rootFilledSuccess, isOutline && isSuccess && styles.rootOutlineSuccess, isTint && isSuccess && styles.rootTintSuccess, isGhost && isSuccess && styles.rootGhostSuccess, isFilled && isImportant && styles.rootFilledImportant, isOutline && isImportant && styles.rootOutlineImportant, isTint && isImportant && styles.rootTintImportant, isGhost && isImportant && styles.rootGhostImportant, isFilled && isInformative && styles.rootFilledInformative, isOutline && isInformative && styles.rootOutlineInformative, isTint && isInformative && styles.rootTintInformative, isGhost && isInformative && styles.rootGhostInformative, isFilled && isSubtle && styles.rootFilledSubtle, isOutline && isSubtle && styles.rootOutlineSubtle, isTint && isSubtle && styles.rootTintSubtle, isGhost && isSubtle && styles.rootGhostSubtle, state.className);
+  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' && (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') && styles.rootRoundedSmallSmallerSmallest, isGhost && styles.rootGhost, isOutline && styles.rootOutline, isTint && styles.rootTint, isFilled && isDanger && styles.rootFilledDanger, isOutline && isDanger && styles.rootOutlineDanger, isTint && isDanger && styles.rootTintDanger, isGhost && isDanger && styles.rootGhostDanger, isFilled && isSevere && styles.rootFilledSevere, isOutline && isSevere && styles.rootOutlineSevere, isTint && isSevere && styles.rootTintSevere, isGhost && isSevere && styles.rootGhostSevere, isFilled && isWarning && styles.rootFilledWarning, isOutline && isWarning && styles.rootOutlineWarning, isTint && isWarning && styles.rootTintWarning, isGhost && isWarning && styles.rootGhostWarning, isFilled && isSuccess && styles.rootFilledSuccess, isOutline && isSuccess && styles.rootOutlineSuccess, isTint && isSuccess && styles.rootTintSuccess, isGhost && isSuccess && styles.rootGhostSuccess, isFilled && isImportant && styles.rootFilledImportant, isOutline && isImportant && styles.rootOutlineImportant, isTint && isImportant && styles.rootTintImportant, isGhost && isImportant && styles.rootGhostImportant, isFilled && isInformative && styles.rootFilledInformative, isOutline && isInformative && styles.rootOutlineInformative, isTint && isInformative && styles.rootTintInformative, isGhost && isInformative && styles.rootGhostInformative, isFilled && isSubtle && styles.rootFilledSubtle, isOutline && isSubtle && styles.rootOutlineSubtle, isTint && isSubtle && styles.rootTintSubtle, isGhost && isSubtle && styles.rootGhostSubtle, state.root.className);
 
@@ -326,0 +326,0 @@ if (state.icon) {

lib-commonjs/components/CounterBadge/CounterBadge.d.ts

 import * as React from 'react';
+import type { CounterBadgeProps } from './CounterBadge.types';
 /**
  * Define a styled CounterBadge, using the `useCounterBadge` hook.
  */
-export declare const CounterBadge: React.ForwardRefExoticComponent<Pick<import("../Badge").BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "iconPosition"> & {
-    shape?: "rounded" | "circular" | undefined;
-    appearance?: "filled" | "ghost" | undefined;
-    overflowCount?: number | undefined;
-    count?: number | undefined;
-    showZero?: boolean | undefined;
-    dot?: boolean | undefined;
-} & React.RefAttributes<HTMLElement>>;
+export declare const CounterBadge: React.ForwardRefExoticComponent<Pick<CounterBadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition" | "overflowCount" | "count" | "showZero" | "dot"> & React.RefAttributes<HTMLElement>>;

lib-commonjs/components/CounterBadge/CounterBadge.types.d.ts

 import type { BadgeProps, BadgeState } from '../Badge/index';
-export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & {
+export declare type CounterBadgeCommons = {
     /**
-     * A Badge can be circular or rounded
-     * @defaultvalue circular
-     */
-    shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;
-    /**
-     * A Badge can be filled, ghost
-     * @defaultvalue filled
-     */
-    appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;
-    /**
      * Max number to be displayed
-     * @defaultvalue 99
+     * @default 99
      */
-    overflowCount?: number;
+    overflowCount: number;
     /**
      * Value displayed by the Badge
-     * @defaultvalue 0
+     * @default 0
      */
-    count?: number;
+    count: number;
     /**
      * If the badge should be shown when count is 0
-     * @defaultvalue false
+     * @default false
      */
-    showZero?: boolean;
+    showZero: boolean;
     /**
      * If a dot badge should be displayed
-     * @defaultvalue false
+     * @default false
      */
-    dot?: boolean;
-};
-export declare type CounterBadgeState = BadgeState & {
+    dot: boolean;
     /**
-     * Max number to be displayed
-     * @defaultvalue 99
+     * A Badge can be circular or rounded
+     * @default circular
      */
-    overflowCount: number;
+    shape: 'rounded' | 'circular';
     /**
-     * Value displayed by the Badge
-     * @defaultvalue 0
+     * A Badge can be filled, ghost
+     * @default filled
      */
-    count: number;
-    /**
-     * If the badge should be shown when count is 0
-     * @defaultvalue false
-     */
-    showZero: boolean;
-    /**
-     * If a dot badge should be displayed
-     * @defaultvalue false
-     */
-    dot: boolean;
+    appearance: 'filled' | 'ghost';
 };
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape'> & CounterBadgeCommons;

lib-commonjs/components/CounterBadge/useCounterBadge.d.ts

 import * as React from 'react';
 import type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';
 /**
- * Consts listing which props are shorthand props.
- */
-export declare const counterBadgeShorthandPropsCompat: readonly ["icon"];
-/**
  * Returns the props and state required to render the component
  */
-export declare const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: CounterBadgeProps | undefined) => CounterBadgeState;
+export declare const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>) => CounterBadgeState;

lib-commonjs/components/CounterBadge/useCounterBadge.js

@@ -6,31 +6,37 @@ "use strict";
 });
-exports.useCounterBadge = exports.counterBadgeShorthandPropsCompat = void 0;
+exports.useCounterBadge = void 0;
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+var tslib_1 = /*#__PURE__*/require("tslib");
 
 var index_1 = /*#__PURE__*/require("../Badge/index");
 /**
- * Consts listing which props are shorthand props.
+ * Returns the props and state required to render the component
  */
 
 
-exports.counterBadgeShorthandPropsCompat = ['icon']; // eslint-disable-next-line deprecation/deprecation
+var useCounterBadge = function (props, ref) {
+  var _a = props.shape,
+      shape = _a === void 0 ? 'circular' : _a,
+      _b = props.appearance,
+      appearance = _b === void 0 ? 'filled' : _b,
+      _c = props.showZero,
+      showZero = _c === void 0 ? false : _c,
+      _d = props.overflowCount,
+      overflowCount = _d === void 0 ? 99 : _d,
+      _e = props.count,
+      count = _e === void 0 ? 0 : _e,
+      _f = props.dot,
+      dot = _f === void 0 ? false : _f;
 
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergePropsCompat({
-  deepMerge: exports.counterBadgeShorthandPropsCompat
-});
-/**
- * Returns the props and state required to render the component
- */
+  var state = tslib_1.__assign(tslib_1.__assign({}, index_1.useBadge(props, ref)), {
+    shape: shape,
+    appearance: appearance,
+    showZero: showZero,
+    overflowCount: overflowCount,
+    count: count,
+    dot: dot
+  });
 
-var useCounterBadge = function (props, ref, defaultProps) {
-  var state = index_1.useBadge(props, ref, mergeProps({
-    showZero: false,
-    overflowCount: 99,
-    count: 0,
-    dot: false
-  }, defaultProps));
-
-  if (!state.dot && !state.children) {
-    state.children = state.count > state.overflowCount ? state.overflowCount + "+" : "" + state.count;
+  if (!state.dot && !state.root.children) {
+    state.root.children = state.count > state.overflowCount ? state.overflowCount + "+" : "" + state.count;
   }
@@ -37,0 +43,0 @@

lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js

@@ -66,3 +66,3 @@ "use strict";
   var styles = useStyles();
-  state.className = react_make_styles_1.mergeClasses(styles.root, state.color === 'warning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.className);
+  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.color === 'warning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
   return useBadgeStyles_1.useBadgeStyles(state);
@@ -69,0 +69,0 @@ };

lib-commonjs/components/PresenceBadge/PresenceBadge.d.ts

 import * as React from 'react';
+import type { PresenceBadgeProps } from './PresenceBadge.types';
 /**
  * Define a styled Badge, using the `useBadge` hook.
  */
-export declare const PresenceBadge: React.ForwardRefExoticComponent<Pick<import("../Badge/Badge.types").BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "iconPosition"> & {
-    status?: "available" | "busy" | "outOfOffice" | "away" | "offline" | "doNotDisturb" | undefined;
-    outOfOffice?: boolean | undefined;
-} & React.RefAttributes<HTMLElement>>;
+export declare const PresenceBadge: React.ForwardRefExoticComponent<Pick<PresenceBadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition" | "outOfOffice" | "status"> & React.RefAttributes<HTMLElement>>;

lib-commonjs/components/PresenceBadge/PresenceBadge.types.d.ts

 import type { BadgeProps, BadgeState } from '../Badge/index';
 export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
-export declare type PresenceBadgeProps = Omit<BadgeProps, 'shape' | 'appearance'> & {
+export interface PresenceBadgeCommons {
     /**
      * Represents several status
-     * @defaultvalue available
+     * @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
-     * @defaultvalue false
-     */
-    outOfOffice?: boolean;
-};
-export declare type PresenceBadgeState = Omit<BadgeState, 'shape' | 'appearance'> & {
-    /**
-     * Represents several status
-     * @defaultvalue available
-     */
     status: PresenceBadgeStatus;
@@ -25,5 +12,7 @@ /**
      * This can be combined with any status to display an out-of-office version of that status
-     * @defaultvalue false
+     * @default false
      */
     outOfOffice: boolean;
-};
+}
+export declare type PresenceBadgeProps = BadgeProps & Partial<PresenceBadgeCommons>;
+export declare type PresenceBadgeState = BadgeState & PresenceBadgeCommons;

lib-commonjs/components/PresenceBadge/usePresenceBadge.d.ts

 import * as React from 'react';
 import type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';
 /**
- * Consts listing which props are shorthand props.
- */
-export declare const presenceBadgeShorthandPropsCompat: (keyof PresenceBadgeProps)[];
-/**
  * Returns the props and state required to render the component
  */
-export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: PresenceBadgeProps | undefined) => PresenceBadgeState;
+export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React.Ref<HTMLElement>) => PresenceBadgeState;

lib-commonjs/components/PresenceBadge/usePresenceBadge.js

@@ -6,4 +6,6 @@ "use strict";
 });
-exports.usePresenceBadge = exports.presenceBadgeShorthandPropsCompat = void 0;
+exports.usePresenceBadge = void 0;
 
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 var React = /*#__PURE__*/require("react");
@@ -16,13 +18,3 @@
 var DefaultPresenceBadgeIcons_1 = /*#__PURE__*/require("./DefaultPresenceBadgeIcons");
-/**
- * Consts listing which props are shorthand props.
- */
 
-
-exports.presenceBadgeShorthandPropsCompat = ['icon']; // eslint-disable-next-line deprecation/deprecation
-
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergePropsCompat({
-  deepMerge: exports.presenceBadgeShorthandPropsCompat
-});
-
 var iconMap = function (outOfOffice) {
@@ -43,15 +35,17 @@ return {
 
-var usePresenceBadge = function (props, ref, defaultProps) {
-  var _a;
+var usePresenceBadge = function (props, ref) {
+  var _a, _b, _c;
 
-  var state = index_1.useBadge(props, ref, mergeProps({
-    size: 'small',
-    status: 'available',
-    outOfOffice: false,
-    icon: {
-      as: 'span'
-    }
-  }, defaultProps));
+  var state = tslib_1.__assign(tslib_1.__assign({}, index_1.useBadge(tslib_1.__assign(tslib_1.__assign({
+    size: 'small'
+  }, props), {
+    icon: react_utilities_1.resolveShorthand(props.icon, {
+      required: true
+    })
+  }), ref)), {
+    status: (_a = props.status) !== null && _a !== void 0 ? _a : 'available',
+    outOfOffice: (_b = props.outOfOffice) !== null && _b !== void 0 ? _b : false
+  });
 
-  if (!((_a = state.icon) === null || _a === void 0 ? void 0 : _a.children)) {
+  if (!((_c = state.icon) === null || _c === void 0 ? void 0 : _c.children)) {
     state.icon.children = iconMap(state.outOfOffice)[state.status];
@@ -58,0 +52,0 @@ }

lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.js

@@ -88,3 +88,3 @@ "use strict";
   var styles = useStyles();
-  state.className = react_make_styles_1.mergeClasses(styles.root, (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'outOfOffice' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, (state.size === 'smallest' || state.size === 'smaller') && styles.thinBorder, state.className);
+  state.root.className = react_make_styles_1.mergeClasses(styles.root, (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'outOfOffice' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, (state.size === 'smallest' || state.size === 'smaller') && styles.thinBorder, state.root.className);
   return Badge_1.useBadgeStyles(state);
@@ -91,0 +91,0 @@ };

lib/common/isConformant.js

@@ -7,2 +7,4 @@ import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
     componentPath: module.parent.filename.replace('.test', ''),
+    // https://github.com/microsoft/fluentui/issues/19522
+    skipAsPropTests: true,
     extraTests: makeStylesTests
@@ -9,0 +11,0 @@ };

lib/components/Badge/Badge.d.ts

@@ -6,2 +6,2 @@ import * as React from 'react';
  */
-export declare const Badge: React.FunctionComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
+export declare const Badge: React.ForwardRefExoticComponent<Pick<BadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition"> & React.RefAttributes<HTMLDivElement>>;

lib/components/Badge/Badge.types.d.ts

@@ -1,3 +0,2 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ShorthandPropsCompat, ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { IntrinsicShorthandProps, ComponentProps, ComponentState } from '@fluentui/react-utilities';
 export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
@@ -7,42 +6,34 @@ export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
 export declare type BadgeColors = 'brand' | 'danger' | 'severe' | 'warning' | 'success' | 'important' | 'informative' | 'subtle';
-export declare type BadgeProps = ComponentPropsCompat & React.HTMLAttributes<HTMLElement> & {
+export declare type BadgeSlots = {
+    root: Omit<IntrinsicShorthandProps<'div'>, 'color'>;
+    icon?: IntrinsicShorthandProps<'span'>;
+};
+export declare type BadgeCommons = {
     /**
      * A Badge can be sized.
-     * @defaultvalue medium
+     * @default medium
      */
-    size?: BadgeSize;
+    size: BadgeSize;
     /**
      * A Badge can be square, circular or rounded
-     * @defaultvalue circular
+     * @default circular
      */
-    shape?: BadgeShape;
+    shape: BadgeShape;
     /**
      * A Badge can be filled, outline, ghost, inverted
-     * @defaultvalue filled
+     * @default filled
      */
-    appearance?: BadgeAppearance;
+    appearance: BadgeAppearance;
     /**
      * A Badge has a preset of colors
-     * @defaultvalue filled
+     * @default brand
      */
-    color?: BadgeColors;
+    color: BadgeColors;
     /**
-     * Icon slot
-     */
-    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
-    /**
      * Position for Icon to be rendered
-     * @defaultvalue before
+     * @default before
      */
-    iconPosition?: 'before' | 'after';
+    iconPosition: 'before' | 'after';
 };
-export declare type BadgeState = BadgeProps & {
-    /**
-     * Ref to the root slot
-     */
-    ref: React.RefObject<HTMLElement>;
-    /**
-     * Icon slot when processed by internal state
-     */
-    icon?: ObjectShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;
-};
+export declare type BadgeProps = ComponentProps<Partial<BadgeSlots>> & Partial<BadgeCommons>;
+export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;

lib/components/Badge/renderBadge.js

 import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
-import { badgeShorthandPropsCompat } from './useBadge';
+import { getSlots } from '@fluentui/react-utilities';
 export var renderBadge = function (state) {
-  var _a = getSlotsCompat(state, badgeShorthandPropsCompat),
+  var _a = getSlots(state, ['icon', 'root']),
       slots = _a.slots,
       slotProps = _a.slotProps;
 
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.iconPosition === 'before' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), state.children, state.iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.iconPosition === 'before' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), state.root.children, state.iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
 };
 //# sourceMappingURL=renderBadge.js.map

lib/components/Badge/useBadge.d.ts

 import * as React from 'react';
 import type { BadgeProps, BadgeState } from './Badge.types';
 /**
- * Consts listing which props are shorthand props.
- */
-export declare const badgeShorthandPropsCompat: readonly ["icon"];
-/**
  * Returns the props and state required to render the component
  */
-export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;
+export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>) => BadgeState;

lib/components/Badge/useBadge.js

@@ -1,25 +0,36 @@
-import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
+import { __assign } from "tslib";
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
- * Consts listing which props are shorthand props.
- */
-
-export var badgeShorthandPropsCompat = ['icon'];
-var mergeProps = /*#__PURE__*/makeMergeProps({
-  deepMerge: badgeShorthandPropsCompat
-});
-/**
  * Returns the props and state required to render the component
  */
 
-export var useBadge = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: useMergedRefs(ref, React.useRef(null)),
-    shape: 'circular',
-    size: 'medium',
-    iconPosition: 'before',
-    'aria-hidden': true
-  }, defaultProps && resolveShorthandProps(defaultProps, badgeShorthandPropsCompat), resolveShorthandProps(props, badgeShorthandPropsCompat));
+export var useBadge = function (props, ref) {
+  var _a = props.shape,
+      shape = _a === void 0 ? 'circular' : _a,
+      _b = props.size,
+      size = _b === void 0 ? 'medium' : _b,
+      _c = props.iconPosition,
+      iconPosition = _c === void 0 ? 'before' : _c,
+      _d = props.appearance,
+      appearance = _d === void 0 ? 'filled' : _d,
+      _e = props.color,
+      color = _e === void 0 ? 'brand' : _e;
+  var state = {
+    shape: shape,
+    size: size,
+    iconPosition: iconPosition,
+    appearance: appearance,
+    color: color,
+    components: {
+      root: 'div',
+      icon: 'span'
+    },
+    root: getNativeElementProps('div', __assign({
+      ref: ref,
+      'aria-hidden': true
+    }, props)),
+    icon: resolveShorthand(props.icon)
+  };
   return state;
 };
 //# sourceMappingURL=useBadge.js.map

lib/components/Badge/useBadgeStyles.js

@@ -316,3 +316,3 @@ import { mergeClasses, __styles } from '@fluentui/react-make-styles';
   var isSubtle = state.color === 'subtle';
-  state.className = mergeClasses(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' && (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') && styles.rootRoundedSmallSmallerSmallest, isGhost && styles.rootGhost, isOutline && styles.rootOutline, isTint && styles.rootTint, isFilled && isDanger && styles.rootFilledDanger, isOutline && isDanger && styles.rootOutlineDanger, isTint && isDanger && styles.rootTintDanger, isGhost && isDanger && styles.rootGhostDanger, isFilled && isSevere && styles.rootFilledSevere, isOutline && isSevere && styles.rootOutlineSevere, isTint && isSevere && styles.rootTintSevere, isGhost && isSevere && styles.rootGhostSevere, isFilled && isWarning && styles.rootFilledWarning, isOutline && isWarning && styles.rootOutlineWarning, isTint && isWarning && styles.rootTintWarning, isGhost && isWarning && styles.rootGhostWarning, isFilled && isSuccess && styles.rootFilledSuccess, isOutline && isSuccess && styles.rootOutlineSuccess, isTint && isSuccess && styles.rootTintSuccess, isGhost && isSuccess && styles.rootGhostSuccess, isFilled && isImportant && styles.rootFilledImportant, isOutline && isImportant && styles.rootOutlineImportant, isTint && isImportant && styles.rootTintImportant, isGhost && isImportant && styles.rootGhostImportant, isFilled && isInformative && styles.rootFilledInformative, isOutline && isInformative && styles.rootOutlineInformative, isTint && isInformative && styles.rootTintInformative, isGhost && isInformative && styles.rootGhostInformative, isFilled && isSubtle && styles.rootFilledSubtle, isOutline && isSubtle && styles.rootOutlineSubtle, isTint && isSubtle && styles.rootTintSubtle, isGhost && isSubtle && styles.rootGhostSubtle, state.className);
+  state.root.className = mergeClasses(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' && (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') && styles.rootRoundedSmallSmallerSmallest, isGhost && styles.rootGhost, isOutline && styles.rootOutline, isTint && styles.rootTint, isFilled && isDanger && styles.rootFilledDanger, isOutline && isDanger && styles.rootOutlineDanger, isTint && isDanger && styles.rootTintDanger, isGhost && isDanger && styles.rootGhostDanger, isFilled && isSevere && styles.rootFilledSevere, isOutline && isSevere && styles.rootOutlineSevere, isTint && isSevere && styles.rootTintSevere, isGhost && isSevere && styles.rootGhostSevere, isFilled && isWarning && styles.rootFilledWarning, isOutline && isWarning && styles.rootOutlineWarning, isTint && isWarning && styles.rootTintWarning, isGhost && isWarning && styles.rootGhostWarning, isFilled && isSuccess && styles.rootFilledSuccess, isOutline && isSuccess && styles.rootOutlineSuccess, isTint && isSuccess && styles.rootTintSuccess, isGhost && isSuccess && styles.rootGhostSuccess, isFilled && isImportant && styles.rootFilledImportant, isOutline && isImportant && styles.rootOutlineImportant, isTint && isImportant && styles.rootTintImportant, isGhost && isImportant && styles.rootGhostImportant, isFilled && isInformative && styles.rootFilledInformative, isOutline && isInformative && styles.rootOutlineInformative, isTint && isInformative && styles.rootTintInformative, isGhost && isInformative && styles.rootGhostInformative, isFilled && isSubtle && styles.rootFilledSubtle, isOutline && isSubtle && styles.rootOutlineSubtle, isTint && isSubtle && styles.rootTintSubtle, isGhost && isSubtle && styles.rootGhostSubtle, state.root.className);
 
@@ -319,0 +319,0 @@ if (state.icon) {

lib/components/CounterBadge/CounterBadge.d.ts

 import * as React from 'react';
+import type { CounterBadgeProps } from './CounterBadge.types';
 /**
  * Define a styled CounterBadge, using the `useCounterBadge` hook.
  */
-export declare const CounterBadge: React.ForwardRefExoticComponent<Pick<import("../Badge").BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "iconPosition"> & {
-    shape?: "rounded" | "circular" | undefined;
-    appearance?: "filled" | "ghost" | undefined;
-    overflowCount?: number | undefined;
-    count?: number | undefined;
-    showZero?: boolean | undefined;
-    dot?: boolean | undefined;
-} & React.RefAttributes<HTMLElement>>;
+export declare const CounterBadge: React.ForwardRefExoticComponent<Pick<CounterBadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition" | "overflowCount" | "count" | "showZero" | "dot"> & React.RefAttributes<HTMLElement>>;

lib/components/CounterBadge/CounterBadge.types.d.ts

 import type { BadgeProps, BadgeState } from '../Badge/index';
-export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & {
+export declare type CounterBadgeCommons = {
     /**
-     * A Badge can be circular or rounded
-     * @defaultvalue circular
-     */
-    shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;
-    /**
-     * A Badge can be filled, ghost
-     * @defaultvalue filled
-     */
-    appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;
-    /**
      * Max number to be displayed
-     * @defaultvalue 99
+     * @default 99
      */
-    overflowCount?: number;
+    overflowCount: number;
     /**
      * Value displayed by the Badge
-     * @defaultvalue 0
+     * @default 0
      */
-    count?: number;
+    count: number;
     /**
      * If the badge should be shown when count is 0
-     * @defaultvalue false
+     * @default false
      */
-    showZero?: boolean;
+    showZero: boolean;
     /**
      * If a dot badge should be displayed
-     * @defaultvalue false
+     * @default false
      */
-    dot?: boolean;
-};
-export declare type CounterBadgeState = BadgeState & {
+    dot: boolean;
     /**
-     * Max number to be displayed
-     * @defaultvalue 99
+     * A Badge can be circular or rounded
+     * @default circular
      */
-    overflowCount: number;
+    shape: 'rounded' | 'circular';
     /**
-     * Value displayed by the Badge
-     * @defaultvalue 0
+     * A Badge can be filled, ghost
+     * @default filled
      */
-    count: number;
-    /**
-     * If the badge should be shown when count is 0
-     * @defaultvalue false
-     */
-    showZero: boolean;
-    /**
-     * If a dot badge should be displayed
-     * @defaultvalue false
-     */
-    dot: boolean;
+    appearance: 'filled' | 'ghost';
 };
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape'> & CounterBadgeCommons;

lib/components/CounterBadge/useCounterBadge.d.ts

 import * as React from 'react';
 import type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';
 /**
- * Consts listing which props are shorthand props.
- */
-export declare const counterBadgeShorthandPropsCompat: readonly ["icon"];
-/**
  * Returns the props and state required to render the component
  */
-export declare const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: CounterBadgeProps | undefined) => CounterBadgeState;
+export declare const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>) => CounterBadgeState;

lib/components/CounterBadge/useCounterBadge.js

@@ -1,26 +0,32 @@
-import { makeMergePropsCompat } from '@fluentui/react-utilities';
+import { __assign } from "tslib";
 import { useBadge } from '../Badge/index';
 /**
- * Consts listing which props are shorthand props.
+ * Returns the props and state required to render the component
  */
 
-export var counterBadgeShorthandPropsCompat = ['icon']; // eslint-disable-next-line deprecation/deprecation
+export var useCounterBadge = function (props, ref) {
+  var _a = props.shape,
+      shape = _a === void 0 ? 'circular' : _a,
+      _b = props.appearance,
+      appearance = _b === void 0 ? 'filled' : _b,
+      _c = props.showZero,
+      showZero = _c === void 0 ? false : _c,
+      _d = props.overflowCount,
+      overflowCount = _d === void 0 ? 99 : _d,
+      _e = props.count,
+      count = _e === void 0 ? 0 : _e,
+      _f = props.dot,
+      dot = _f === void 0 ? false : _f;
 
-var mergeProps = /*#__PURE__*/makeMergePropsCompat({
-  deepMerge: counterBadgeShorthandPropsCompat
-});
-/**
- * Returns the props and state required to render the component
- */
+  var state = __assign(__assign({}, useBadge(props, ref)), {
+    shape: shape,
+    appearance: appearance,
+    showZero: showZero,
+    overflowCount: overflowCount,
+    count: count,
+    dot: dot
+  });
 
-export var useCounterBadge = function (props, ref, defaultProps) {
-  var state = useBadge(props, ref, mergeProps({
-    showZero: false,
-    overflowCount: 99,
-    count: 0,
-    dot: false
-  }, defaultProps));
-
-  if (!state.dot && !state.children) {
-    state.children = state.count > state.overflowCount ? state.overflowCount + "+" : "" + state.count;
+  if (!state.dot && !state.root.children) {
+    state.root.children = state.count > state.overflowCount ? state.overflowCount + "+" : "" + state.count;
   }
@@ -27,0 +33,0 @@

lib/components/CounterBadge/useCounterBadgeStyles.js

@@ -58,5 +58,5 @@ import { mergeClasses, __styles } from '@fluentui/react-make-styles';
   var styles = useStyles();
-  state.className = mergeClasses(styles.root, state.color === 'warning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.className);
+  state.root.className = mergeClasses(styles.root, state.color === 'warning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
   return useBadgeStyles(state);
 };
 //# sourceMappingURL=useCounterBadgeStyles.js.map

lib/components/PresenceBadge/PresenceBadge.d.ts

 import * as React from 'react';
+import type { PresenceBadgeProps } from './PresenceBadge.types';
 /**
  * Define a styled Badge, using the `useBadge` hook.
  */
-export declare const PresenceBadge: React.ForwardRefExoticComponent<Pick<import("../Badge/Badge.types").BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "size" | "iconPosition"> & {
-    status?: "available" | "busy" | "outOfOffice" | "away" | "offline" | "doNotDisturb" | undefined;
-    outOfOffice?: boolean | undefined;
-} & React.RefAttributes<HTMLElement>>;
+export declare const PresenceBadge: React.ForwardRefExoticComponent<Pick<PresenceBadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition" | "outOfOffice" | "status"> & React.RefAttributes<HTMLElement>>;

lib/components/PresenceBadge/PresenceBadge.types.d.ts

 import type { BadgeProps, BadgeState } from '../Badge/index';
 export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
-export declare type PresenceBadgeProps = Omit<BadgeProps, 'shape' | 'appearance'> & {
+export interface PresenceBadgeCommons {
     /**
      * Represents several status
-     * @defaultvalue available
+     * @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
-     * @defaultvalue false
-     */
-    outOfOffice?: boolean;
-};
-export declare type PresenceBadgeState = Omit<BadgeState, 'shape' | 'appearance'> & {
-    /**
-     * Represents several status
-     * @defaultvalue available
-     */
     status: PresenceBadgeStatus;
@@ -25,5 +12,7 @@ /**
      * This can be combined with any status to display an out-of-office version of that status
-     * @defaultvalue false
+     * @default false
      */
     outOfOffice: boolean;
-};
+}
+export declare type PresenceBadgeProps = BadgeProps & Partial<PresenceBadgeCommons>;
+export declare type PresenceBadgeState = BadgeState & PresenceBadgeCommons;

lib/components/PresenceBadge/usePresenceBadge.d.ts

 import * as React from 'react';
 import type { PresenceBadgeProps, PresenceBadgeState } from './PresenceBadge.types';
 /**
- * Consts listing which props are shorthand props.
- */
-export declare const presenceBadgeShorthandPropsCompat: (keyof PresenceBadgeProps)[];
-/**
  * Returns the props and state required to render the component
  */
-export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: PresenceBadgeProps | undefined) => PresenceBadgeState;
+export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React.Ref<HTMLElement>) => PresenceBadgeState;

lib/components/PresenceBadge/usePresenceBadge.js

@@ -0,15 +1,7 @@
+import { __assign } from "tslib";
 import * as React from 'react';
-import { makeMergePropsCompat } from '@fluentui/react-utilities';
+import { resolveShorthand } from '@fluentui/react-utilities';
 import { useBadge } from '../Badge/index';
 import { SkypeMinusIcon, SkypeClockIcon, SkypeArrowIcon, SkypeCheckIcon, CancelIcon } from './DefaultPresenceBadgeIcons';
-/**
- * Consts listing which props are shorthand props.
- */
 
-export var presenceBadgeShorthandPropsCompat = ['icon']; // eslint-disable-next-line deprecation/deprecation
-
-var mergeProps = /*#__PURE__*/makeMergePropsCompat({
-  deepMerge: presenceBadgeShorthandPropsCompat
-});
-
 var iconMap = function (outOfOffice) {
@@ -30,15 +22,17 @@ return {
 
-export var usePresenceBadge = function (props, ref, defaultProps) {
-  var _a;
+export var usePresenceBadge = function (props, ref) {
+  var _a, _b, _c;
 
-  var state = useBadge(props, ref, mergeProps({
-    size: 'small',
-    status: 'available',
-    outOfOffice: false,
-    icon: {
-      as: 'span'
-    }
-  }, defaultProps));
+  var state = __assign(__assign({}, useBadge(__assign(__assign({
+    size: 'small'
+  }, props), {
+    icon: resolveShorthand(props.icon, {
+      required: true
+    })
+  }), ref)), {
+    status: (_a = props.status) !== null && _a !== void 0 ? _a : 'available',
+    outOfOffice: (_b = props.outOfOffice) !== null && _b !== void 0 ? _b : false
+  });
 
-  if (!((_a = state.icon) === null || _a === void 0 ? void 0 : _a.children)) {
+  if (!((_c = state.icon) === null || _c === void 0 ? void 0 : _c.children)) {
     state.icon.children = iconMap(state.outOfOffice)[state.status];
@@ -45,0 +39,0 @@ }

lib/components/PresenceBadge/usePresenceBadgeStyles.js

@@ -80,5 +80,5 @@ import { mergeClasses, __styles } from '@fluentui/react-make-styles';
   var styles = useStyles();
-  state.className = mergeClasses(styles.root, (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'outOfOffice' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, (state.size === 'smallest' || state.size === 'smaller') && styles.thinBorder, state.className);
+  state.root.className = mergeClasses(styles.root, (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'outOfOffice' && styles.statusOutOfOffice, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, (state.size === 'smallest' || state.size === 'smaller') && styles.thinBorder, state.root.className);
   return useBadgeStyles(state);
 };
 //# sourceMappingURL=usePresenceBadgeStyles.js.map

package.json

 {
   "name": "@fluentui/react-badge",
-  "version": "9.0.0-alpha.83",
+  "version": "9.0.0-alpha.84",
   "description": "React components for building web experiences",
@@ -28,7 +28,7 @@ "main": "lib-commonjs/index.js",
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-alpha.51",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.52",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.44",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.45",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.13",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.14",
     "@fluentui/scripts": "^1.0.0",
@@ -47,5 +47,5 @@ "@types/enzyme": "3.10.3",
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-alpha.69",
+    "@fluentui/react-make-styles": "9.0.0-alpha.70",
     "@fluentui/react-theme": "9.0.0-alpha.23",
-    "@fluentui/react-utilities": "9.0.0-alpha.49",
+    "@fluentui/react-utilities": "9.0.0-alpha.50",
     "tslib": "^2.1.0"
@@ -52,0 +52,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

310288

decreased by-32.71%

Number of package files

140

decreased by-32.04%

Lines of code

4518

decreased by-17.12%

Dependency changes

• + Added@fluentui/react-make-styles@9.0.0-alpha.70(transitive)

• + Added@fluentui/react-utilities@9.0.0-alpha.50(transitive)

• - Removed@fluentui/react-make-styles@9.0.0-alpha.69(transitive)

• - Removed@fluentui/react-utilities@9.0.0-alpha.49(transitive)

• Updated@fluentui/react-make-styles@9.0.0-alpha.70

• Updated@fluentui/react-utilities@9.0.0-alpha.50