@fluentui/react-label 9.0.0-alpha.45 → 9.0.0-alpha.46

package/CHANGELOG.json

@@ -2,7 +2,54 @@
   "name": "@fluentui/react-label",
   "entries": [
     {
-      "date": "Fri, 24 Sep 2021 09:16:15 GMT",
+      "date": "Mon, 27 Sep 2021 08:04:28 GMT",
+      "tag": "@fluentui/react-label_v9.0.0-alpha.46",
+      "version": "9.0.0-alpha.46",
+      "comments": {
+        "none": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/react-label",
+            "comment": "refactor: simplify mergeprops for label",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.73",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.53",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-alpha.55",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.48",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-label",
+            "comment": "Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.17",
+            "commit": "7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 24 Sep 2021 09:17:17 GMT",
       "tag": "@fluentui/react-label_v9.0.0-alpha.45",
       "version": "9.0.0-alpha.45",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-label
 
-This log was last generated on Fri, 24 Sep 2021 09:16:15 GMT and should not be manually modified.
+This log was last generated on Mon, 27 Sep 2021 08:04:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.46](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-alpha.46)
+
+Mon, 27 Sep 2021 08:04:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-alpha.45..@fluentui/react-label_v9.0.0-alpha.46)
+
+### Changes
+
+- Bump @fluentui/react-make-styles to v9.0.0-alpha.73 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-alpha.53 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/babel-make-styles to v9.0.0-alpha.55 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/jest-serializer-make-styles to v9.0.0-alpha.48 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+- Bump @fluentui/react-conformance-make-styles to v9.0.0-alpha.17 ([commit](https://github.com/microsoft/fluentui/commit/7a6d4d03fc1157272a6641fd05fc27f51ba1cc0e) by beachball)
+
 ## [9.0.0-alpha.45](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-alpha.45)
 
-Fri, 24 Sep 2021 09:16:15 GMT 
+Fri, 24 Sep 2021 09:17:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-alpha.44..@fluentui/react-label_v9.0.0-alpha.45)
 
 ### Changes

package/dist/react-label.d.ts

@@ -1,75 +1,61 @@
-import { ComponentPropsCompat } from '@fluentui/react-utilities';
-import type { ComponentStateCompat } from '@fluentui/react-utilities';
-import { ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
+import { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import { ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import type { ShorthandPropsCompat } from '@fluentui/react-utilities';
 
 /**
  * A label component provides a title or name to a component.
  */
-export declare const Label: React_2.ForwardRefExoticComponent<ComponentPropsCompat & React_2.LabelHTMLAttributes<HTMLLabelElement> & {
-    disabled?: boolean | undefined;
-    required?: string | number | boolean | React_2.ReactElement<any, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)> | React_2.ReactNodeArray | React_2.ReactPortal | ObjectShorthandPropsCompat<ComponentPropsCompat> | null | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    strong?: boolean | undefined;
+export declare const Label: React_2.ForwardRefExoticComponent<Pick<ComponentProps<LabelSlots, "root">, "form" | "slot" | "style" | "title" | "key" | "htmlFor" | "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" | "as"> & Partial<LabelCommons> & {
+    required?: string | number | boolean | {} | React_2.ReactElement<any, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)> | React_2.ReactNodeArray | React_2.ReactPortal | ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>> | null | undefined;
 } & React_2.RefAttributes<HTMLElement>>;
 
-/**
- * Names of LabelProps that have a default value in useLabel
- */
-export declare type LabelDefaultedProps = 'size';
-
 /**
  * Label Props
  */
-export declare type LabelProps = ComponentPropsCompat & React_2.LabelHTMLAttributes<HTMLLabelElement> & {
+export declare type LabelCommons = {
     /**
      * Renders the label as disabled
      * @defaultvalue false
      */
-    disabled?: boolean;
-    /**
-     * Displays and indicator that the label is for a required field. The required prop can be set to true to display
-     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
-     * @defaultvalue false
-     */
-    required?: boolean | ShorthandPropsCompat<ComponentPropsCompat>;
+    disabled: boolean;
     /**
      * A label supports different sizes.
      * @defaultvalue 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size: 'small' | 'medium' | 'large';
     /**
      * A label supports semibold/strong fontweight.
      * @defaultvalue false
      */
-    strong?: boolean;
+    strong: boolean;
 };
 
-/**
- * Names of the shorthand properties in LabelProps
- */
-export declare type LabelShorthandProps = 'required';
+export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
+    /**
+     * Displays and indicator that the label is for a required field. The required prop can be set to true to display
+     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
+     * @defaultvalue false
+     */
+    required?: boolean | ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>> | React_2.ReactNode;
+};
 
 /**
  * Array of all shorthand properties listed in LabelShorthandProps
  * {@docCatergory Label}
  */
-export declare const labelShorthandProps: LabelShorthandProps[];
+export declare const labelShorthandProps: Array<keyof LabelSlots>;
+
+export declare type LabelSlots = {
+    root: IntrinsicShorthandProps<'label'>;
+    required?: IntrinsicShorthandProps<'span'>;
+};
 
 /**
  * State used in rendering Label
  */
-export declare type LabelState = ComponentStateCompat<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
-    /**
-     * Ref to the root element
-     */
-    ref: React_2.Ref<HTMLElement>;
-    /**
-     * The required prop resolved to a slot object
-     */
-    required?: ObjectShorthandPropsCompat<ComponentPropsCompat>;
-};
+export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
 
 /**
  * Render the final JSX of Label
@@ -84,9 +70,8 @@ export declare const renderLabel: (state: LabelState) => JSX.Element;
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
+export declare const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
 
 /**
  * Apply styling to the Label slots based on the state

package/lib/components/Label/Label.d.ts

@@ -2,9 +2,6 @@ import * as React from 'react';
 /**
  * A label component provides a title or name to a component.
  */
-export declare const Label: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.LabelHTMLAttributes<HTMLLabelElement> & {
-    disabled?: boolean | undefined;
-    required?: string | number | boolean | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ObjectShorthandPropsCompat<import("@fluentui/react-utilities").ComponentPropsCompat> | null | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    strong?: boolean | undefined;
+export declare const Label: React.ForwardRefExoticComponent<Pick<import("@fluentui/react-utilities").ComponentProps<import("./Label.types").LabelSlots, "root">, "form" | "slot" | "style" | "title" | "key" | "htmlFor" | "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" | "as"> & Partial<import("./Label.types").LabelCommons> & {
+    required?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | null | undefined;
 } & React.RefAttributes<HTMLElement>>;

package/lib/components/Label/Label.types.d.ts

@@ -1,49 +1,38 @@
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ObjectShorthandPropsCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 /**
  * Label Props
  */
-export declare type LabelProps = ComponentPropsCompat & React.LabelHTMLAttributes<HTMLLabelElement> & {
+export declare type LabelCommons = {
     /**
      * Renders the label as disabled
      * @defaultvalue false
      */
-    disabled?: boolean;
-    /**
-     * Displays and indicator that the label is for a required field. The required prop can be set to true to display
-     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
-     * @defaultvalue false
-     */
-    required?: boolean | ShorthandPropsCompat<ComponentPropsCompat>;
+    disabled: boolean;
     /**
      * A label supports different sizes.
      * @defaultvalue 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size: 'small' | 'medium' | 'large';
     /**
      * A label supports semibold/strong fontweight.
      * @defaultvalue false
      */
-    strong?: boolean;
+    strong: boolean;
+};
+export declare type LabelSlots = {
+    root: IntrinsicShorthandProps<'label'>;
+    required?: IntrinsicShorthandProps<'span'>;
 };
-/**
- * Names of the shorthand properties in LabelProps
- */
-export declare type LabelShorthandProps = 'required';
-/**
- * Names of LabelProps that have a default value in useLabel
- */
-export declare type LabelDefaultedProps = 'size';
 /**
  * State used in rendering Label
  */
-export declare type LabelState = ComponentStateCompat<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
+export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
+export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
     /**
-     * The required prop resolved to a slot object
+     * Displays and indicator that the label is for a required field. The required prop can be set to true to display
+     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
+     * @defaultvalue false
      */
-    required?: ObjectShorthandPropsCompat<ComponentPropsCompat>;
+    required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
 };

package/lib/components/Label/renderLabel.js

@@ -1,16 +1,16 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
+import { getSlots } from '@fluentui/react-utilities';
 import { labelShorthandProps } from './useLabel';
 /**
  * Render the final JSX of Label
  */
 
 export var renderLabel = function (state) {
-  var _a = getSlotsCompat(state, labelShorthandProps),
+  var _a = getSlots(state, labelShorthandProps),
       slots = _a.slots,
       slotProps = _a.slotProps;
 
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.children, state.required && /*#__PURE__*/React.createElement(slots.required, __assign({}, slotProps.required)));
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.root.children, /*#__PURE__*/React.createElement(slots.required, __assign({}, slotProps.required)));
 };
 //# sourceMappingURL=renderLabel.js.map

package/lib/components/Label/renderLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,mBAAT,QAAoC,YAApC;AAGA;;AAEG;;AACH,OAAO,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,mBAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFrB,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,mBAAT,QAAoC,YAApC;AAGA;;AAEG;;AACH,OAAO,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,QAAQ,CAAa,KAAb,EAAoB,mBAApB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFF,CADF;AAMD,CATM","sourceRoot":""}

package/lib/components/Label/useLabel.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
+import type { LabelProps, LabelSlots, LabelState } from './Label.types';
 /**
  * Array of all shorthand properties listed in LabelShorthandProps
  * {@docCatergory Label}
  */
-export declare const labelShorthandProps: LabelShorthandProps[];
+export declare const labelShorthandProps: Array<keyof LabelSlots>;
 /**
  * Create the state required to render Label.
  *
@@ -13,6 +13,5 @@ export declare const labelShorthandProps: LabelShorthandProps[];
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
+export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;

package/lib/components/Label/useLabel.js

@@ -1,14 +1,12 @@
 import { __assign } from "tslib";
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import { resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Array of all shorthand properties listed in LabelShorthandProps
  * {@docCatergory Label}
  */
 
-export var labelShorthandProps = ['required'];
-var mergeProps = /*#__PURE__*/makeMergeProps({
-  deepMerge: labelShorthandProps
-});
+export var labelShorthandProps = ['root', 'required'];
 /**
  * Create the state required to render Label.
  *
@@ -17,44 +15,34 @@ var mergeProps = /*#__PURE__*/makeMergeProps({
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-export var useLabel = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref,
-    as: 'label',
-    size: 'medium',
-    required: {
-      as: 'span'
-    }
-  }, defaultProps && resolveLabelShorthandProps(defaultProps), resolveLabelShorthandProps(props));
-  return state;
-};
-/**
- * Label will first need to check if required is a boolean or shorthandprops,
- * this allows for the required prop to handle both the default asterisk for required
- * or a custom required text.
- */
-
-var resolveLabelShorthandProps = function (props) {
-  var propsNormalized;
-
-  if (props.required === true) {
-    propsNormalized = __assign(__assign({}, props), {
-      required: {
+export var useLabel = function (props, ref) {
+  var _a = props.disabled,
+      disabled = _a === void 0 ? false : _a,
+      _b = props.required,
+      required = _b === void 0 ? false : _b,
+      _c = props.strong,
+      strong = _c === void 0 ? false : _c,
+      _d = props.size,
+      size = _d === void 0 ? 'medium' : _d;
+  return {
+    disabled: disabled,
+    required: resolveShorthand(required === false ? null : required, {
+      required: !!required,
+      defaultProps: {
         children: '*'
       }
-    });
-  } else if (props.required === false) {
-    propsNormalized = __assign(__assign({}, props), {
-      required: undefined
-    });
-  } else {
-    // TypeScript needs a nudge to figure out that props.required won't be a boolean here
-    propsNormalized = props;
-  }
-
-  return resolveShorthandProps(propsNormalized, labelShorthandProps);
+    }),
+    strong: strong,
+    size: size,
+    components: {
+      root: 'label',
+      required: 'span'
+    },
+    root: getNativeElementProps('label', __assign({
+      ref: ref
+    }, props))
+  };
 };
 //# sourceMappingURL=useLabel.js.map

package/lib/components/Label/useLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA;;;AAGG;;AACH,OAAO,IAAM,mBAAmB,GAA0B,CAAC,UAAD,CAAnD;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAa;AAAE,EAAA,SAAS,EAAE;AAAb,CAAb,CAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAiD,YAAjD,EAA0E;AAChG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,OAFN;AAGE,IAAA,IAAI,EAAE,QAHR;AAIE,IAAA,QAAQ,EAAE;AACR,MAAA,EAAE,EAAE;AADI;AAJZ,GADsB,EAStB,YAAY,IAAI,0BAA0B,CAAC,YAAD,CATpB,EAUtB,0BAA0B,CAAC,KAAD,CAVJ,CAAxB;AAaA,SAAO,KAAP;AACD,CAfM;AAiBP;;;;AAIG;;AACH,IAAM,0BAA0B,GAAG,UAAC,KAAD,EAAkB;AACnD,MAAI,eAAJ;;AACA,MAAI,KAAK,CAAC,QAAN,KAAmB,IAAvB,EAA6B;AAC3B,IAAA,eAAe,GAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAA,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAE,QAAA,QAAQ,EAAE;AAAZ;AAAZ,KAAb,CAAf;AACD,GAFD,MAEO,IAAI,KAAK,CAAC,QAAN,KAAmB,KAAvB,EAA8B;AACnC,IAAA,eAAe,GAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAA,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAb,CAAf;AACD,GAFM,MAEA;AACL;AACA,IAAA,eAAe,GAAG,KAAlB;AACD;;AAED,SAAO,qBAAqB,CAAC,eAAD,EAAkB,mBAAlB,CAA5B;AACD,CAZD","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;AAGG;;AACH,OAAO,IAAM,mBAAmB,GAA4B,CAAC,MAAD,EAAS,UAAT,CAArD;AAEP;;;;;;;;AAQG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAA+C;AAC7D,MAAA,EAAA,GAAwE,KAAK,CAA7D,QAAhB;AAAA,MAAA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAhB;AAAA,MAAkB,EAAA,GAAsD,KAAK,CAA3C,QAAlC;AAAA,MAAkB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlC;AAAA,MAAoC,EAAA,GAAoC,KAAK,CAA3B,MAAlD;AAAA,MAAoC,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlD;AAAA,MAAoD,EAAA,GAAoB,KAAK,CAAV,IAAnE;AAAA,MAAoD,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAnE;AACR,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;AAEL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7B,EAAuC;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE;AAAZ;AAFiD,KAAvC,CAFrB;AAML,IAAA,MAAM,EAAA,MAND;AAOL,IAAA,IAAI,EAAA,IAPC;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAQ,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAAR;AATtB,GAAP;AAWD,CAbM","sourceRoot":""}

package/lib/components/Label/useLabelStyles.js

@@ -41,7 +41,7 @@ var useStyles = /*#__PURE__*/__styles({
 
 export var useLabelStyles = function (state) {
   var styles = useStyles();
-  state.className = mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.className);
+  state.root.className = mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
 
   if (state.required) {
     state.required.className = mergeClasses(styles.required, state.required.className);

package/lib/components/Label/useLabelStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,MAAM,CAAC,IADqB,EAE5B,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFG,EAG5B,MAAM,CAAC,KAAK,CAAC,IAAP,CAHsB,EAI5B,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJK,EAK5B,KAAK,CAAC,SALsB,CAA9B;;AAQA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,QAAR,EAAkB,KAAK,CAAC,QAAN,CAAe,SAAjC,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAfM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFQ,EAGjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAH2B,EAIjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJU,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,QAAR,EAAkB,KAAK,CAAC,QAAN,CAAe,SAAjC,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAfM","sourceRoot":""}

package/lib-commonjs/components/Label/Label.d.ts

@@ -2,9 +2,6 @@ import * as React from 'react';
 /**
  * A label component provides a title or name to a component.
  */
-export declare const Label: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.LabelHTMLAttributes<HTMLLabelElement> & {
-    disabled?: boolean | undefined;
-    required?: string | number | boolean | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ObjectShorthandPropsCompat<import("@fluentui/react-utilities").ComponentPropsCompat> | null | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    strong?: boolean | undefined;
+export declare const Label: React.ForwardRefExoticComponent<Pick<import("@fluentui/react-utilities").ComponentProps<import("./Label.types").LabelSlots, "root">, "form" | "slot" | "style" | "title" | "key" | "htmlFor" | "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" | "as"> & Partial<import("./Label.types").LabelCommons> & {
+    required?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | null | undefined;
 } & React.RefAttributes<HTMLElement>>;

package/lib-commonjs/components/Label/Label.types.d.ts

@@ -1,49 +1,38 @@
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat, ObjectShorthandPropsCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 /**
  * Label Props
  */
-export declare type LabelProps = ComponentPropsCompat & React.LabelHTMLAttributes<HTMLLabelElement> & {
+export declare type LabelCommons = {
     /**
      * Renders the label as disabled
      * @defaultvalue false
      */
-    disabled?: boolean;
-    /**
-     * Displays and indicator that the label is for a required field. The required prop can be set to true to display
-     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
-     * @defaultvalue false
-     */
-    required?: boolean | ShorthandPropsCompat<ComponentPropsCompat>;
+    disabled: boolean;
     /**
      * A label supports different sizes.
      * @defaultvalue 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size: 'small' | 'medium' | 'large';
     /**
      * A label supports semibold/strong fontweight.
      * @defaultvalue false
      */
-    strong?: boolean;
+    strong: boolean;
+};
+export declare type LabelSlots = {
+    root: IntrinsicShorthandProps<'label'>;
+    required?: IntrinsicShorthandProps<'span'>;
 };
-/**
- * Names of the shorthand properties in LabelProps
- */
-export declare type LabelShorthandProps = 'required';
-/**
- * Names of LabelProps that have a default value in useLabel
- */
-export declare type LabelDefaultedProps = 'size';
 /**
  * State used in rendering Label
  */
-export declare type LabelState = ComponentStateCompat<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
+export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
+export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
     /**
-     * The required prop resolved to a slot object
+     * Displays and indicator that the label is for a required field. The required prop can be set to true to display
+     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
+     * @defaultvalue false
      */
-    required?: ObjectShorthandPropsCompat<ComponentPropsCompat>;
+    required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
 };

package/lib-commonjs/components/Label/renderLabel.js

@@ -18,11 +18,11 @@ var useLabel_1 = /*#__PURE__*/require("./useLabel");
 
 
 var renderLabel = function (state) {
-  var _a = react_utilities_1.getSlotsCompat(state, useLabel_1.labelShorthandProps),
+  var _a = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps),
       slots = _a.slots,
       slotProps = _a.slotProps;
 
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.children, state.required && React.createElement(slots.required, tslib_1.__assign({}, slotProps.required)));
+  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.root.children, React.createElement(slots.required, tslib_1.__assign({}, slotProps.required)));
 };
 
 exports.renderLabel = renderLabel;

package/lib-commonjs/components/Label/renderLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,iBAAA,CAAA,cAAA,CAAe,KAAf,EAAsB,UAAA,CAAA,mBAAtB,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFrB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,EAA4B,UAAA,CAAA,mBAA5B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}

package/lib-commonjs/components/Label/useLabel.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
+import type { LabelProps, LabelSlots, LabelState } from './Label.types';
 /**
  * Array of all shorthand properties listed in LabelShorthandProps
  * {@docCatergory Label}
  */
-export declare const labelShorthandProps: LabelShorthandProps[];
+export declare const labelShorthandProps: Array<keyof LabelSlots>;
 /**
  * Create the state required to render Label.
  *
@@ -13,6 +13,5 @@ export declare const labelShorthandProps: LabelShorthandProps[];
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
+export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;

package/lib-commonjs/components/Label/useLabel.js

@@ -8,16 +8,15 @@ exports.useLabel = exports.labelShorthandProps = void 0;
 var tslib_1 = /*#__PURE__*/require("tslib");
 
 var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Array of all shorthand properties listed in LabelShorthandProps
  * {@docCatergory Label}
  */
 
 
-exports.labelShorthandProps = ['required'];
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({
-  deepMerge: exports.labelShorthandProps
-});
+exports.labelShorthandProps = ['root', 'required'];
 /**
  * Create the state required to render Label.
  *
@@ -26,46 +25,36 @@ var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
- * @param defaultProps - (optional) default prop values provided by the implementing type
- */
-
-var useLabel = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref,
-    as: 'label',
-    size: 'medium',
-    required: {
-      as: 'span'
-    }
-  }, defaultProps && resolveLabelShorthandProps(defaultProps), resolveLabelShorthandProps(props));
-  return state;
-};
-
-exports.useLabel = useLabel;
-/**
- * Label will first need to check if required is a boolean or shorthandprops,
- * this allows for the required prop to handle both the default asterisk for required
- * or a custom required text.
  */
 
-var resolveLabelShorthandProps = function (props) {
-  var propsNormalized;
-
-  if (props.required === true) {
-    propsNormalized = tslib_1.__assign(tslib_1.__assign({}, props), {
-      required: {
+var useLabel = function (props, ref) {
+  var _a = props.disabled,
+      disabled = _a === void 0 ? false : _a,
+      _b = props.required,
+      required = _b === void 0 ? false : _b,
+      _c = props.strong,
+      strong = _c === void 0 ? false : _c,
+      _d = props.size,
+      size = _d === void 0 ? 'medium' : _d;
+  return {
+    disabled: disabled,
+    required: react_utilities_2.resolveShorthand(required === false ? null : required, {
+      required: !!required,
+      defaultProps: {
         children: '*'
       }
-    });
-  } else if (props.required === false) {
-    propsNormalized = tslib_1.__assign(tslib_1.__assign({}, props), {
-      required: undefined
-    });
-  } else {
-    // TypeScript needs a nudge to figure out that props.required won't be a boolean here
-    propsNormalized = props;
-  }
-
-  return react_utilities_1.resolveShorthandProps(propsNormalized, exports.labelShorthandProps);
+    }),
+    strong: strong,
+    size: size,
+    components: {
+      root: 'label',
+      required: 'span'
+    },
+    root: react_utilities_1.getNativeElementProps('label', tslib_1.__assign({
+      ref: ref
+    }, props))
+  };
 };
+
+exports.useLabel = useLabel;
 //# sourceMappingURL=useLabel.js.map

package/lib-commonjs/components/Label/useLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,mBAAA,GAA6C,CAAC,UAAD,CAA7C;AAEb,IAAM,UAAU,gBAAG,iBAAA,CAAA,cAAA,CAA2B;AAAE,EAAA,SAAS,EAAE,OAAA,CAAA;AAAb,CAA3B,CAAnB;AAEA;;;;;;;;;AASG;;AACI,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAiD,YAAjD,EAA0E;AAChG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,OAFN;AAGE,IAAA,IAAI,EAAE,QAHR;AAIE,IAAA,QAAQ,EAAE;AACR,MAAA,EAAE,EAAE;AADI;AAJZ,GADsB,EAStB,YAAY,IAAI,0BAA0B,CAAC,YAAD,CATpB,EAUtB,0BAA0B,CAAC,KAAD,CAVJ,CAAxB;AAaA,SAAO,KAAP;AACD,CAfM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR;AAiBb;;;;AAIG;;AACH,IAAM,0BAA0B,GAAG,UAAC,KAAD,EAAkB;AACnD,MAAI,eAAJ;;AACA,MAAI,KAAK,CAAC,QAAN,KAAmB,IAAvB,EAA6B;AAC3B,IAAA,eAAe,GAAA,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAA,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAE,QAAA,QAAQ,EAAE;AAAZ;AAAZ,KAAb,CAAf;AACD,GAFD,MAEO,IAAI,KAAK,CAAC,QAAN,KAAmB,KAAvB,EAA8B;AACnC,IAAA,eAAe,GAAA,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAA,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAb,CAAf;AACD,GAFM,MAEA;AACL;AACA,IAAA,eAAe,GAAG,KAAlB;AACD;;AAED,SAAO,iBAAA,CAAA,qBAAA,CAAsB,eAAtB,EAAuC,OAAA,CAAA,mBAAvC,CAAP;AACD,CAZD","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,mBAAA,GAA+C,CAAC,MAAD,EAAS,UAAT,CAA/C;AAEb;;;;;;;;AAQG;;AACI,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAA+C;AAC7D,MAAA,EAAA,GAAwE,KAAK,CAA7D,QAAhB;AAAA,MAAA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAhB;AAAA,MAAkB,EAAA,GAAsD,KAAK,CAA3C,QAAlC;AAAA,MAAkB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlC;AAAA,MAAoC,EAAA,GAAoC,KAAK,CAA3B,MAAlD;AAAA,MAAoC,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlD;AAAA,MAAoD,EAAA,GAAoB,KAAK,CAAV,IAAnE;AAAA,MAAoD,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAnE;AACR,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;AAEL,IAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7C,EAAuD;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE;AAAZ;AAFiD,KAAvD,CAFL;AAML,IAAA,MAAM,EAAA,MAND;AAOL,IAAA,IAAI,EAAA,IAPC;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA6B,OAAA,CAAA,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAA7B;AATD,GAAP;AAWD,CAbM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}

package/lib-commonjs/components/Label/useLabelStyles.js

@@ -49,7 +49,7 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
 
 var useLabelStyles = function (state) {
   var styles = useStyles();
-  state.className = react_make_styles_1.mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.className);
+  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
 
   if (state.required) {
     state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);

package/lib-commonjs/components/Label/useLabelStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACI,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,mBAAA,CAAA,YAAA,CAChB,MAAM,CAAC,IADS,EAEhB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFT,EAGhB,MAAM,CAAC,KAAK,CAAC,IAAP,CAHU,EAIhB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJP,EAKhB,KAAK,CAAC,SALU,CAAlB;;AAQA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,QAApB,EAA8B,KAAK,CAAC,QAAN,CAAe,SAA7C,CAA3B;AACD;;AAED,SAAO,KAAP;AACD,CAfM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACI,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFJ,EAGrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAHe,EAIrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJF,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;AAQA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,QAApB,EAA8B,KAAK,CAAC,QAAN,CAAe,SAA7C,CAA3B;AACD;;AAED,SAAO,KAAP;AACD,CAfM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-label",
-  "version": "9.0.0-alpha.45",
+  "version": "9.0.0-alpha.46",
   "description": "Label component for FluentUI library.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,11 +25,11 @@
     "storybook": "start-storybook"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-alpha.54",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.55",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.47",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.48",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.16",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.17",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -43,8 +43,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-alpha.72",
-    "@fluentui/react-utilities": "9.0.0-alpha.52",
+    "@fluentui/react-make-styles": "9.0.0-alpha.73",
+    "@fluentui/react-utilities": "9.0.0-alpha.53",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {