@fluentui/react-label 9.0.0-alpha.8 → 9.0.0-beta.10

package/Spec.md

@@ -75,58 +75,48 @@ The Label component should be simple as shown below. It will just need the text
 ## API
 
 ```ts
-/**
- * Label Props
- * {@docCategory Label}
- */
-export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLElement> {
+export type LabelCommons = {
   /**
    * Renders the label as disabled
    * @defaultvalue false
    */
-  disabled?: boolean;
-
-  /**
-   * Whether the associated form field is required or not. If true it will be an asterisk, otherwise it will be what is provided.
-   * @defaultvalue false
-   */
-  required?: boolean | ShorthandProps<ComponentProps>;
+  disabled: boolean;
 
   /**
-   * A label supports different font sizes, see tokens for reference.
+   * A label supports different sizes.
    * @defaultvalue 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size: 'small' | 'medium' | 'large';
 
   /**
-   * A label supports semibold/strong fontweight. When size is set to large, label strong will be set by default.
+   * A label supports semibold/strong fontweight.
    * @defaultvalue false
    */
-  strong?: boolean;
-}
+  strong: boolean;
+};
 
-/**
- * Names of the shorthand properties in LabelProps
- * {@docCategory Label}
- */
-export type LabelShorthandProps = 'required';
+export type LabelSlots = {
+  root: IntrinsicSlotProps<'label'>;
+  required?: IntrinsicSlotProps<'span'>;
+};
 
 /**
- * Names of LabelProps that have a default value in useLabel
- * {@docCategory Label}
+ * State used in rendering Label
  */
-export type LabelDefaultedProps = never;
+export type LabelState = ComponentState<LabelSlots> & LabelCommons;
 
 /**
- * State used in rendering Label
- * {@docCategory Label}
+ * Label Props
  */
-export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
-  /**
-   * Ref to the root element
-   */
-  ref: React.Ref<HTMLElement>;
-}
+export 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 | IntrinsicSlotProps<'span'> | React.ReactNode;
+  };
 ```
 
 ## Structure

package/dist/react-label.d.ts

@@ -1,99 +1,81 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
-import { ObjectShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import { ShorthandProps } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * A label component provides a title or name to a component.
- * {@docCategory Label}
  */
-export declare const Label: React_2.ForwardRefExoticComponent<LabelProps & React_2.RefAttributes<HTMLElement>>;
+export declare const Label: ForwardRefComponent<LabelProps>;
 
 /**
- * Names of LabelProps that have a default value in useLabel
- * {@docCategory Label}
+ * @deprecated Use `labelClassNames.root` instead.
  */
-export declare type LabelDefaultedProps = 'size';
+export declare const labelClassName = "fui-Label";
 
-/**
- * Label Props
- * {@docCategory Label}
- */
-export declare interface LabelProps extends ComponentProps, React_2.LabelHTMLAttributes<HTMLLabelElement> {
+export declare const labelClassNames: SlotClassNames<LabelSlots>;
+
+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 | ShorthandProps<ComponentProps>;
+    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
- * {@docCategory Label}
+ * Label Props
  */
-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 | Slot<'span'>;
+};
 
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export declare const labelShorthandProps: LabelShorthandProps[];
+export declare type LabelSlots = {
+    root: Slot<'label'>;
+    required?: Slot<'span'>;
+};
 
 /**
  * State used in rendering Label
- * {@docCategory Label}
  */
-export declare interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React_2.Ref<HTMLElement>;
-    /**
-     * The required prop resolved to a slot object
-     */
-    required?: ObjectShorthandProps<ComponentProps>;
-}
+export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
 
 /**
  * Render the final JSX of Label
- * {@docCategory Label}
  */
-export declare const renderLabel: (state: LabelState) => JSX.Element;
+export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
 
 /**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
  * @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
- *
- * {@docCategory Label}
  */
-export declare const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
+export declare const useLabel_unstable: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
 
 /**
  * Apply styling to the Label slots based on the state
  */
-export declare const useLabelStyles: (state: LabelState) => LabelState;
+export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
 
 export { }

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

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { LabelProps } from './Label.types';
+import type { LabelProps } from './Label.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
  * A label component provides a title or name to a component.
- * {@docCategory Label}
  */
-export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
+export declare const Label: ForwardRefComponent<LabelProps>;

package/lib/components/Label/Label.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useLabel } from './useLabel';
-import { renderLabel } from './renderLabel';
-import { useLabelStyles } from './useLabelStyles';
+import { useLabel_unstable } from './useLabel';
+import { renderLabel_unstable } from './renderLabel';
+import { useLabelStyles_unstable } from './useLabelStyles';
 /**
  * A label component provides a title or name to a component.
- * {@docCategory Label}
  */
-export var Label = React.forwardRef(function (props, ref) {
-    var state = useLabel(props, ref);
-    useLabelStyles(state);
-    return renderLabel(state);
+
+export const Label = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useLabel_unstable(props, ref);
+  useLabelStyles_unstable(state);
+  return renderLabel_unstable(state);
 });
 Label.displayName = 'Label';
 //# sourceMappingURL=Label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;;GAGG;AACH,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA0B,UAAC,KAAK,EAAE,GAAG;IACxE,IAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEnC,cAAc,CAAC,KAAK,CAAC,CAAC;IACtB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useLabel } from './useLabel';\nimport { LabelProps } from './Label.types';\nimport { renderLabel } from './renderLabel';\nimport { useLabelStyles } from './useLabelStyles';\n\n/**\n * A label component provides a title or name to a component.\n * {@docCategory Label}\n */\nexport const Label = React.forwardRef<HTMLElement, LabelProps>((props, ref) => {\n  const state = useLabel(props, ref);\n\n  useLabelStyles(state);\n  return renderLabel(state);\n});\n\nLabel.displayName = 'Label';\n"]}
+{"version":3,"sources":["components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AACA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useLabel_unstable } from './useLabel';\nimport { renderLabel_unstable } from './renderLabel';\nimport { useLabelStyles_unstable } from './useLabelStyles';\nimport type { LabelProps } from './Label.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A label component provides a title or name to a component.\n */\nexport const Label: ForwardRefComponent<LabelProps> = React.forwardRef((props, ref) => {\n  const state = useLabel_unstable(props, ref);\n\n  useLabelStyles_unstable(state);\n  return renderLabel_unstable(state);\n});\n\nLabel.displayName = 'Label';\n"],"sourceRoot":"../src/"}

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

@@ -1,53 +1,38 @@
-import * as React from 'react';
-import { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';
-/**
- * Label Props
- * {@docCategory Label}
- */
-export interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+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 | ShorthandProps<ComponentProps>;
+    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;
-}
-/**
- * Names of the shorthand properties in LabelProps
- * {@docCategory Label}
- */
-export declare type LabelShorthandProps = 'required';
+    strong: boolean;
+};
+export declare type LabelSlots = {
+    root: Slot<'label'>;
+    required?: Slot<'span'>;
+};
 /**
- * Names of LabelProps that have a default value in useLabel
- * {@docCategory Label}
+ * State used in rendering Label
  */
-export declare type LabelDefaultedProps = 'size';
+export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
 /**
- * State used in rendering Label
- * {@docCategory Label}
+ * Label Props
  */
-export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
+export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
     /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-    /**
-     * 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?: ObjectShorthandProps<ComponentProps>;
-}
+    required?: boolean | Slot<'span'>;
+};
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState, ObjectShorthandProps, ShorthandProps } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n * {@docCategory Label}\n */\nexport interface LabelProps extends ComponentProps, React.LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * Renders the label as disabled\n   * @defaultvalue false\n   */\n  disabled?: boolean;\n\n  /**\n   * Displays and indicator that the label is for a required field. The required prop can be set to true to display\n   * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n   * @defaultvalue false\n   */\n  required?: boolean | ShorthandProps<ComponentProps>;\n\n  /**\n   * A label supports different sizes.\n   * @defaultvalue 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * A label supports semibold/strong fontweight.\n   * @defaultvalue false\n   */\n  strong?: boolean;\n}\n\n/**\n * Names of the shorthand properties in LabelProps\n * {@docCategory Label}\n */\nexport type LabelShorthandProps = 'required';\n\n/**\n * Names of LabelProps that have a default value in useLabel\n * {@docCategory Label}\n */\nexport type LabelDefaultedProps = 'size';\n\n/**\n * State used in rendering Label\n * {@docCategory Label}\n */\nexport interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n\n  /**\n   * The required prop resolved to a slot object\n   */\n  required?: ObjectShorthandProps<ComponentProps>;\n}\n"]}
+{"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ntype LabelCommons = {\n  /**\n   * Renders the label as disabled\n   * @defaultvalue false\n   */\n  disabled: boolean;\n\n  /**\n   * A label supports different sizes.\n   * @defaultvalue 'medium'\n   */\n  size: 'small' | 'medium' | 'large';\n\n  /**\n   * A label supports semibold/strong fontweight.\n   * @defaultvalue false\n   */\n  strong: boolean;\n};\n\nexport type LabelSlots = {\n  root: Slot<'label'>;\n  required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & LabelCommons;\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &\n  Partial<LabelCommons> & {\n    /**\n     * Displays and indicator that the label is for a required field. The required prop can be set to true to display\n     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n     * @defaultvalue false\n     */\n    required?: boolean | Slot<'span'>;\n  };\n"]}

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

@@ -1,6 +1,5 @@
-import { LabelState } from './Label.types';
+import type { LabelState } from './Label.types';
 /**
  * Render the final JSX of Label
- * {@docCategory Label}
  */
-export declare const renderLabel: (state: LabelState) => JSX.Element;
+export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;

package/lib/components/Label/renderLabel.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"renderLabel.js","sourceRoot":"../src/","sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAiB;IACrC,IAAA,KAAuB,QAAQ,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;IAElE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI;QAC3B,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,eAAK,SAAS,CAAC,QAAQ,EAAI,CAClD,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { LabelState } from './Label.types';\nimport { labelShorthandProps } from './useLabel';\n\n/**\n * Render the final JSX of Label\n * {@docCategory Label}\n */\nexport const renderLabel = (state: LabelState) => {\n  const { slots, slotProps } = getSlots(state, labelShorthandProps);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.children}\n      {state.required && <slots.required {...slotProps.required} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAFrB,CADF;AAMD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { LabelState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelState) => {\n  const { slots, slotProps } = getSlots<LabelSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.root.children}\n      {slots.required && <slots.required {...slotProps.required} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,20 +1,12 @@
 import * as React from 'react';
-import { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export declare const labelShorthandProps: LabelShorthandProps[];
+import type { LabelProps, LabelState } from './Label.types';
 /**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
  * @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
- *
- * {@docCategory Label}
  */
-export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps | undefined) => LabelState;
+export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;

package/lib/components/Label/useLabel.js

@@ -1,51 +1,39 @@
-import { __assign } from "tslib";
-import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export var labelShorthandProps = ['required'];
-var mergeProps = makeMergeProps({ deepMerge: labelShorthandProps });
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import { resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
  * @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
- *
- * {@docCategory Label}
- */
-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: { 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);
+
+export const useLabel_unstable = (props, ref) => {
+  const {
+    disabled = false,
+    required = false,
+    strong = false,
+    size = 'medium'
+  } = props;
+  return {
+    disabled,
+    required: resolveShorthand(required === true ? '*' : required || undefined, {
+      defaultProps: {
+        'aria-hidden': 'true'
+      }
+    }),
+    strong,
+    size,
+    components: {
+      root: 'label',
+      required: 'span'
+    },
+    root: getNativeElementProps('label', {
+      ref,
+      ...props
+    })
+  };
 };
 //# sourceMappingURL=useLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useLabel.js","sourceRoot":"../src/","sources":["components/Label/useLabel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGlF;;;GAGG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAA0B,CAAC,UAAU,CAAC,CAAC;AAEvE,IAAM,UAAU,GAAG,cAAc,CAAa,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAC;AAElF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;IAChG,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,KAAA;QACH,EAAE,EAAE,OAAO;QACX,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE;YACR,EAAE,EAAE,MAAM;SACX;KACF,EACD,YAAY,IAAI,0BAA0B,CAAC,YAAY,CAAC,EACxD,0BAA0B,CAAC,KAAK,CAAC,CAClC,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;GAIG;AACH,IAAM,0BAA0B,GAAG,UAAC,KAAiB;IACnD,IAAI,eAAe,CAAC;IACpB,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC3B,eAAe,yBAAQ,KAAK,KAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;KAC7D;SAAM,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK,EAAE;QACnC,eAAe,yBAAQ,KAAK,KAAE,QAAQ,EAAE,SAAS,GAAE,CAAC;KACrD;SAAM;QACL,qFAAqF;QACrF,eAAe,GAAG,KAA6E,CAAC;KACjG;IAED,OAAO,qBAAqB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAC;AACrE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { LabelProps, LabelShorthandProps, LabelState } from './Label.types';\n\n/**\n * Array of all shorthand properties listed in LabelShorthandProps\n * {@docCatergory Label}\n */\nexport const labelShorthandProps: LabelShorthandProps[] = ['required'];\n\nconst mergeProps = makeMergeProps<LabelState>({ deepMerge: labelShorthandProps });\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles,\n * before being passed to renderLabel.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n * @param defaultProps - (optional) default prop values provided by the implementing type\n *\n * {@docCategory Label}\n */\nexport const useLabel = (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps): LabelState => {\n  const state = mergeProps(\n    {\n      ref,\n      as: 'label',\n      size: 'medium',\n      required: {\n        as: 'span',\n      },\n    },\n    defaultProps && resolveLabelShorthandProps(defaultProps),\n    resolveLabelShorthandProps(props),\n  );\n\n  return state;\n};\n\n/**\n * Label will first need to check if required is a boolean or shorthandprops,\n * this allows for the required prop to handle both the default asterisk for required\n * or a custom required text.\n */\nconst resolveLabelShorthandProps = (props: LabelProps) => {\n  let propsNormalized;\n  if (props.required === true) {\n    propsNormalized = { ...props, required: { children: '*' } };\n  } else if (props.required === false) {\n    propsNormalized = { ...props, required: undefined };\n  } else {\n    // TypeScript needs a nudge to figure out that props.required won't be a boolean here\n    propsNormalized = props as LabelProps & { required?: Exclude<LabelProps['required'], boolean> };\n  }\n\n  return resolveShorthandProps(propsNormalized, labelShorthandProps);\n};\n"]}
+{"version":3,"sources":["components/Label/useLabel.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvC,EAAkD;AAC1E,MAAA,YAAY,EAAE;AAAE,uBAAe;AAAjB;AAD4D,KAAlD,CAFrB;AAKL,IAAA,MALK;AAML,IAAA,IANK;AAOL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KAPP;AAQL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAU;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAV;AARtB,GAAP;AAUD,CAZM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { LabelProps, LabelState } from './Label.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n  const { disabled = false, required = false, strong = false, size = 'medium' } = props;\n  return {\n    disabled,\n    required: resolveShorthand(required === true ? '*' : required || undefined, {\n      defaultProps: { 'aria-hidden': 'true' },\n    }),\n    strong,\n    size,\n    components: { root: 'label', required: 'span' },\n    root: getNativeElementProps('label', { ref, ...props }),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -1,5 +1,11 @@
-import { LabelState } from './Label.types';
+import type { LabelSlots, LabelState } from './Label.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * @deprecated Use `labelClassNames.root` instead.
+ */
+export declare const labelClassName = "fui-Label";
+export declare const labelClassNames: SlotClassNames<LabelSlots>;
 /**
  * Apply styling to the Label slots based on the state
  */
-export declare const useLabelStyles: (state: LabelState) => LabelState;
+export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;