@fluentui/react-field 9.5.0 → 9.5.1

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Wed, 01 Apr 2026 15:50:20 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Apr 2026 11:59:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.1)
+
+Thu, 23 Apr 2026 11:59:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.5.0..@fluentui/react-field_v9.5.1)
+
+### Patches
+
+- fix: add missing base hook export ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-label to v9.4.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.0)
 
-Wed, 01 Apr 2026 15:50:20 GMT 
+Wed, 01 Apr 2026 15:52:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.4.16..@fluentui/react-field_v9.5.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -1,14 +1,19 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export declare const Field: ForwardRefComponent<FieldProps>;
 
+export declare type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;
+
+export declare type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;
+
 export declare const fieldClassNames: SlotClassNames<FieldSlots>;
 
 export declare const FieldContextProvider: React_2.Provider<Readonly<Pick<FieldState, "required" | "size" | "orientation" | "validationState" | "generatedControlId"> & {
@@ -158,7 +163,7 @@ export declare type FieldState = ComponentState<Required<FieldSlots>> & Required
 /**
  * Render the final JSX of Field
  */
-export declare const renderField_unstable: (state: FieldState, contextValues: FieldContextValues) => JSXElement;
+export declare const renderField_unstable: (state: FieldBaseState, contextValues: FieldContextValues) => JSXElement;
 
 /**
  * Create the state required to render Field.
@@ -171,6 +176,15 @@ export declare const renderField_unstable: (state: FieldState, contextValues: Fi
  */
 export declare const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;
 
+/**
+ * Base hook for Field component, which manages state related to validation, ARIA attributes,
+ * ID generation, and slot structure without design props.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the root
+ */
+export declare const useFieldBase_unstable: (props: FieldBaseProps, ref: React_2.Ref<HTMLDivElement>) => FieldBaseState;
+
 export declare const useFieldContext_unstable: () => FieldContextValue | undefined;
 
 /**

package/lib/Field.js

@@ -1 +1 @@
-export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './components/Field/index';
+export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable, useFieldBase_unstable } from './components/Field/index';

package/lib/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable"],"mappings":"AAQA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable"],"mappings":"AAUA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}

package/lib/components/Field/Field.types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n   *\n   * For other controls, there are two options:\n   * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n   *    `<Field>{(props) => <MyInput {...props} />}</Field>`\n   * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n   *    `props = useFieldControlProps_unstable(props);`\n   */\n  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n   *     announced by screen readers.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n  Pick<FieldProps, 'children'> & {\n    /**\n     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n     */\n    generatedControlId: string;\n  };\n\nexport type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\n\nexport type FieldContextValue = Readonly<\n  Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n    /** The label's for prop. Undefined if there is no label. */\n    labelFor?: string;\n    /** The label's id prop. Undefined if there is no label. */\n    labelId?: string;\n    /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n    validationMessageId?: string;\n    /** The hint's id prop. Undefined if there is no hint. */\n    hintId?: string;\n  }\n>;\n\nexport type FieldContextValues = {\n  field: FieldContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n   *\n   * For other controls, there are two options:\n   * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n   *    `<Field>{(props) => <MyInput {...props} />}</Field>`\n   * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n   *    `props = useFieldControlProps_unstable(props);`\n   */\n  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n   *     announced by screen readers.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n  Pick<FieldProps, 'children'> & {\n    /**\n     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n     */\n    generatedControlId: string;\n  };\n\nexport type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\n\nexport type FieldContextValue = Readonly<\n  Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n    /** The label's for prop. Undefined if there is no label. */\n    labelFor?: string;\n    /** The label's id prop. Undefined if there is no label. */\n    labelId?: string;\n    /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n    validationMessageId?: string;\n    /** The hint's id prop. Undefined if there is no hint. */\n    hintId?: string;\n  }\n>;\n\nexport type FieldContextValues = {\n  field: FieldContextValue;\n};\n"],"names":[],"mappings":"AAkIA,WAEE"}

package/lib/components/Field/index.js

@@ -1,4 +1,5 @@
 export { Field } from './Field';
 export { renderField_unstable } from './renderField';
-export { useField_unstable, useFieldBase_unstable } from './useField';
+export { useField_unstable } from './useField';
+export { useFieldBase_unstable } from './useFieldBase';
 export { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';

package/lib/components/Field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable, useFieldBase_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":"AAUA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable } from './useField';\nexport { useFieldBase_unstable } from './useFieldBase';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":"AAUA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

package/lib/components/Field/renderField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC;IACtDL,YAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,qBACE,KAACN;QAAqBO,KAAK,EAAEH,0BAAAA,oCAAAA,cAAeE,KAAK;kBAC/C,cAAA,MAACH,MAAMK,IAAI;;gBACRL,MAAMM,KAAK,kBAAI,KAACN,MAAMM,KAAK;gBAC3BJ;gBACAF,MAAMO,iBAAiB,kBACtB,MAACP,MAAMO,iBAAiB;;wBACrBP,MAAMQ,qBAAqB,kBAAI,KAACR,MAAMQ,qBAAqB;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,kBAAI,KAACT,MAAMS,IAAI;;;;AAIlC,EAAE"}
+{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldBaseState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldBaseState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAuBC;IAC1DL,YAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,qBACE,KAACN;QAAqBO,KAAK,EAAEH,0BAAAA,oCAAAA,cAAeE,KAAK;kBAC/C,cAAA,MAACH,MAAMK,IAAI;;gBACRL,MAAMM,KAAK,kBAAI,KAACN,MAAMM,KAAK;gBAC3BJ;gBACAF,MAAMO,iBAAiB,kBACtB,MAACP,MAAMO,iBAAiB;;wBACrBP,MAAMQ,qBAAqB,kBAAI,KAACR,MAAMQ,qBAAqB;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,kBAAI,KAACT,MAAMS,IAAI;;;;AAIlC,EAAE"}

package/lib/components/Field/useField.js

@@ -2,7 +2,8 @@
 import * as React from 'react';
 import { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
+import { useFieldBase_unstable } from './useFieldBase';
 const validationMessageIcons = {
     error: /*#__PURE__*/ React.createElement(DiamondDismiss12Filled, null),
     warning: /*#__PURE__*/ React.createElement(Warning12Filled, null),
@@ -46,65 +47,3 @@ const validationMessageIcons = {
         size
     };
 };
-/**
- * Base hook for Field component, which manages state related to validation, ARIA attributes,
- * ID generation, and slot structure without design props.
- *
- * @param props - Props passed to this field
- * @param ref - Ref to the root
- */ export const useFieldBase_unstable = (props, ref)=>{
-    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
-    const baseId = useId('field-');
-    const generatedControlId = baseId + '__control';
-    const root = slot.always(getIntrinsicElementProps('div', {
-        ...props,
-        ref
-    }, /*excludedPropNames:*/ [
-        'children'
-    ]), {
-        elementType: 'div'
-    });
-    const label = slot.optional(props.label, {
-        defaultProps: {
-            htmlFor: generatedControlId,
-            id: baseId + '__label',
-            required
-        },
-        elementType: 'label'
-    });
-    const validationMessage = slot.optional(props.validationMessage, {
-        defaultProps: {
-            id: baseId + '__validationMessage',
-            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
-        },
-        elementType: 'div'
-    });
-    const hint = slot.optional(props.hint, {
-        defaultProps: {
-            id: baseId + '__hint'
-        },
-        elementType: 'div'
-    });
-    const validationMessageIcon = slot.optional(props.validationMessageIcon, {
-        renderByDefault: false,
-        elementType: 'span'
-    });
-    return {
-        children,
-        generatedControlId,
-        required,
-        validationState,
-        components: {
-            root: 'div',
-            label: 'label',
-            validationMessage: 'div',
-            validationMessageIcon: 'span',
-            hint: 'div'
-        },
-        root,
-        label,
-        validationMessageIcon,
-        validationMessage,
-        hint
-    };
-};

package/lib/components/Field/useField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","getIntrinsicElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","useFieldBase_unstable","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children","required","validationMessage","baseId","generatedControlId","root","always","htmlFor","id","role","hint"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,wBAAwB;AACzG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACP;IACRQ,uBAAS,oBAACP;IACVQ,uBAAS,oBAACV;IACVW,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQC,sBAAsBF,YAAYH;IAEhD,MAAMM,cAAcd,sBAAsB,CAACY,MAAMG,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGH,KAAK;QACR,4DAA4D;QAC5DI,YAAY;YAAE,GAAGJ,MAAMI,UAAU;YAAEC,OAAOrB;QAAM;QAChDqB,OAAOlB,KAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;YAChCE,cAAc;gBAAET;gBAAM,GAAGE,MAAMK,KAAK;YAAC;YACrCG,aAAaxB;QACf;QACAyB,uBAAuBtB,KAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAX;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMG,wBAAwB,CAACN,OAAuBC;IAC3D,MAAM,EAAEe,QAAQ,EAAEC,WAAW,KAAK,EAAET,kBAAkBR,MAAMkB,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGlB;IAErG,MAAMmB,SAAS5B,MAAM;IACrB,MAAM6B,qBAAqBD,SAAS;IAEpC,MAAME,OAAO7B,KAAK8B,MAAM,CAAChC,yBAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHY,aAAa;IACf;IACA,MAAMH,QAAQlB,KAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;QACvCE,cAAc;YAAEW,SAASH;YAAoBI,IAAIL,SAAS;YAAWF;QAAS;QAC9EJ,aAAa;IACf;IACA,MAAMK,oBAAoB1B,KAAKmB,QAAQ,CAACX,MAAMkB,iBAAiB,EAAE;QAC/DN,cAAc;YACZY,IAAIL,SAAS;YACbM,MAAMjB,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUV;QACjF;QACAe,aAAa;IACf;IACA,MAAMa,OAAOlC,KAAKmB,QAAQ,CAACX,MAAM0B,IAAI,EAAE;QAAEd,cAAc;YAAEY,IAAIL,SAAS;QAAS;QAAGN,aAAa;IAAM;IACrG,MAAMC,wBAAwBtB,KAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBF,aAAa;IACf;IAEA,OAAO;QACLG;QACAI;QACAH;QACAT;QACAC,YAAY;YAAEY,MAAM;YAAOX,OAAO;YAASQ,mBAAmB;YAAOJ,uBAAuB;YAAQY,MAAM;QAAM;QAChHL;QACAX;QACAI;QACAI;QACAQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\nimport { useFieldBase_unstable } from './useFieldBase';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","slot","useFieldBase_unstable","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,wBAAwB;AACzG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACN;IACRO,uBAAS,oBAACN;IACVO,uBAAS,oBAACT;IACVU,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQb,sBAAsBY,YAAYH;IAEhD,MAAMK,cAAcb,sBAAsB,CAACY,MAAME,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGF,KAAK;QACR,4DAA4D;QAC5DG,YAAY;YAAE,GAAGH,MAAMG,UAAU;YAAEC,OAAOnB;QAAM;QAChDmB,OAAOlB,KAAKmB,QAAQ,CAACV,MAAMS,KAAK,EAAE;YAChCE,cAAc;gBAAER;gBAAM,GAAGE,MAAMI,KAAK;YAAC;YACrCG,aAAatB;QACf;QACAuB,uBAAuBtB,KAAKmB,QAAQ,CAACV,MAAMa,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAV;QACAC;IACF;AACF,EAAE"}

package/lib/components/Field/useFieldBase.js

@@ -0,0 +1,63 @@
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+/**
+ * Base hook for Field component, which manages state related to validation, ARIA attributes,
+ * ID generation, and slot structure without design props.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the root
+ */ export const useFieldBase_unstable = (props, ref)=>{
+    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
+    const baseId = useId('field-');
+    const generatedControlId = baseId + '__control';
+    const root = slot.always(getIntrinsicElementProps('div', {
+        ...props,
+        ref
+    }, /*excludedPropNames:*/ [
+        'children'
+    ]), {
+        elementType: 'div'
+    });
+    const label = slot.optional(props.label, {
+        defaultProps: {
+            htmlFor: generatedControlId,
+            id: baseId + '__label',
+            required
+        },
+        elementType: 'label'
+    });
+    const validationMessage = slot.optional(props.validationMessage, {
+        defaultProps: {
+            id: baseId + '__validationMessage',
+            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
+        },
+        elementType: 'div'
+    });
+    const hint = slot.optional(props.hint, {
+        defaultProps: {
+            id: baseId + '__hint'
+        },
+        elementType: 'div'
+    });
+    const validationMessageIcon = slot.optional(props.validationMessageIcon, {
+        renderByDefault: false,
+        elementType: 'span'
+    });
+    return {
+        children,
+        generatedControlId,
+        required,
+        validationState,
+        components: {
+            root: 'div',
+            label: 'label',
+            validationMessage: 'div',
+            validationMessageIcon: 'span',
+            hint: 'div'
+        },
+        root,
+        label,
+        validationMessageIcon,
+        validationMessage,
+        hint
+    };
+};

package/lib/components/Field/useFieldBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/useFieldBase.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState } from './Field.types';\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["getIntrinsicElementProps","useId","slot","useFieldBase_unstable","props","ref","children","required","validationState","validationMessage","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","undefined","hint","validationMessageIcon","renderByDefault","components"],"mappings":"AAEA,SAASA,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAEC,kBAAkBJ,MAAMK,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGL;IAErG,MAAMM,SAAST,MAAM;IACrB,MAAMU,qBAAqBD,SAAS;IAEpC,MAAME,OAAOV,KAAKW,MAAM,CAACb,yBAAyB,OAAO;QAAE,GAAGI,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHS,aAAa;IACf;IACA,MAAMC,QAAQb,KAAKc,QAAQ,CAACZ,MAAMW,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWH;QAAS;QAC9EO,aAAa;IACf;IACA,MAAML,oBAAoBP,KAAKc,QAAQ,CAACZ,MAAMK,iBAAiB,EAAE;QAC/DQ,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMZ,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUa;QACjF;QACAP,aAAa;IACf;IACA,MAAMQ,OAAOpB,KAAKc,QAAQ,CAACZ,MAAMkB,IAAI,EAAE;QAAEL,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMS,wBAAwBrB,KAAKc,QAAQ,CAACZ,MAAMmB,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBV,aAAa;IACf;IAEA,OAAO;QACLR;QACAK;QACAJ;QACAC;QACAiB,YAAY;YAAEb,MAAM;YAAOG,OAAO;YAASN,mBAAmB;YAAOc,uBAAuB;YAAQD,MAAM;QAAM;QAChHV;QACAG;QACAQ;QACAd;QACAa;IACF;AACF,EAAE"}

package/lib/index.js

@@ -1,4 +1,4 @@
-export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
+export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable, useFieldBase_unstable } from './Field';
 export { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';
  // Experimental APIs - will be uncommented in the experimental release branch
  // export { useFieldBase_unstable } from './Field';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field';\nexport {\n  FieldContextProvider,\n  useFieldContext_unstable,\n  useFieldContextValues_unstable,\n  useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU;AASnH,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './Field';\nexport {\n  FieldContextProvider,\n  useFieldContext_unstable,\n  useFieldContextValues_unstable,\n  useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,UAAU;AAWjB,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}

package/lib-commonjs/Field.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderField_unstable: function() {
         return _index.renderField_unstable;
     },
+    useFieldBase_unstable: function() {
+        return _index.useFieldBase_unstable;
+    },
     useFieldStyles_unstable: function() {
         return _index.useFieldStyles_unstable;
     },

package/lib-commonjs/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable"],"mappings":";;;;;;;;;;;;eASEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eACpBC,8BAAuB;;;eACvBC,wBAAiB;;;uBACZ,2BAA2B"}
+{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable"],"mappings":";;;;;;;;;;;;eAWEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,2BAA2B"}

package/lib-commonjs/components/Field/Field.types.js

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/Field/Field.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n   *\n   * For other controls, there are two options:\n   * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n   *    `<Field>{(props) => <MyInput {...props} />}</Field>`\n   * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n   *    `props = useFieldControlProps_unstable(props);`\n   */\n  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n   *     announced by screen readers.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n  Pick<FieldProps, 'children'> & {\n    /**\n     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n     */\n    generatedControlId: string;\n  };\n\nexport type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\n\nexport type FieldContextValue = Readonly<\n  Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n    /** The label's for prop. Undefined if there is no label. */\n    labelFor?: string;\n    /** The label's id prop. Undefined if there is no label. */\n    labelId?: string;\n    /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n    validationMessageId?: string;\n    /** The hint's id prop. Undefined if there is no hint. */\n    hintId?: string;\n  }\n>;\n\nexport type FieldContextValues = {\n  field: FieldContextValue;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n   *\n   * For other controls, there are two options:\n   * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n   *    `<Field>{(props) => <MyInput {...props} />}</Field>`\n   * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n   *    `props = useFieldControlProps_unstable(props);`\n   */\n  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n   *     announced by screen readers.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n  Pick<FieldProps, 'children'> & {\n    /**\n     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n     */\n    generatedControlId: string;\n  };\n\nexport type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\n\nexport type FieldContextValue = Readonly<\n  Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n    /** The label's for prop. Undefined if there is no label. */\n    labelFor?: string;\n    /** The label's id prop. Undefined if there is no label. */\n    labelId?: string;\n    /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n    validationMessageId?: string;\n    /** The hint's id prop. Undefined if there is no hint. */\n    hintId?: string;\n  }\n>;\n\nexport type FieldContextValues = {\n  field: FieldContextValue;\n};\n"],"names":[],"mappings":""}

package/lib-commonjs/components/Field/index.js

@@ -19,7 +19,7 @@ _export(exports, {
         return _renderField.renderField_unstable;
     },
     useFieldBase_unstable: function() {
-        return _useField.useFieldBase_unstable;
+        return _useFieldBase.useFieldBase_unstable;
     },
     useFieldStyles_unstable: function() {
         return _useFieldStylesstyles.useFieldStyles_unstable;
@@ -31,4 +31,5 @@ _export(exports, {
 const _Field = require("./Field");
 const _renderField = require("./renderField");
 const _useField = require("./useField");
+const _useFieldBase = require("./useFieldBase");
 const _useFieldStylesstyles = require("./useFieldStyles.styles");

package/lib-commonjs/components/Field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable, useFieldBase_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":";;;;;;;;;;;;eAUSA,YAAK;;;eAGLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}
+{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable } from './useField';\nexport { useFieldBase_unstable } from './useFieldBase';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":";;;;;;;;;;;;eAUSA,YAAK;;;eAILI,qCAAe;;;eAHfH,iCAAoB;;;eAEpBE,mCAAqB;;;eACJE,6CAAuB;;;eAFxCH,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACnB,aAAa;8BACT,iBAAiB;sCACE,0BAA0B"}

package/lib-commonjs/components/Field/renderField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAWaG;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;uBAEG,uBAAuB;AAM3E,6BAA6B,CAACC,OAAmBC;QACtDL,2BAAAA,EAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,aAASJ,2BAAAA,EAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,OAAA,WAAA,OACE,eAAA,EAACN,2BAAAA,EAAAA;QAAqBO,KAAK,EAAEH,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeE,KAAK;kBAC/C,WAAA,OAAA,gBAAA,EAACH,MAAMK,IAAI,EAAA;;gBACRL,MAAMM,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACN,MAAMM,KAAK,EAAA,CAAA;gBAC3BJ;gBACAF,MAAMO,iBAAiB,IAAA,WAAA,OACtB,gBAAA,EAACP,MAAMO,iBAAiB,EAAA;;wBACrBP,MAAMQ,qBAAqB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,qBAAqB,EAAA,CAAA;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,IAAI,EAAA,CAAA;;;;AAIlC,EAAE"}
+{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldBaseState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldBaseState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAWaG;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;uBAEG,uBAAuB;AAM3E,6BAA6B,CAACC,OAAuBC;QAC1DL,2BAAAA,EAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,aAASJ,2BAAAA,EAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,OAAA,WAAA,OACE,eAAA,EAACN,2BAAAA,EAAAA;QAAqBO,KAAK,EAAEH,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeE,KAAK;kBAC/C,WAAA,OAAA,gBAAA,EAACH,MAAMK,IAAI,EAAA;;gBACRL,MAAMM,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACN,MAAMM,KAAK,EAAA,CAAA;gBAC3BJ;gBACAF,MAAMO,iBAAiB,IAAA,WAAA,OACtB,gBAAA,EAACP,MAAMO,iBAAiB,EAAA;;wBACrBP,MAAMQ,qBAAqB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,qBAAqB,EAAA,CAAA;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,IAAI,EAAA,CAAA;;;;AAIlC,EAAE"}

package/lib-commonjs/components/Field/useField.js

@@ -3,17 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useFieldBase_unstable: function() {
-        return useFieldBase_unstable;
-    },
-    useField_unstable: function() {
+Object.defineProperty(exports, "useField_unstable", {
+    enumerable: true,
+    get: function() {
         return useField_unstable;
     }
 });
@@ -22,6 +14,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacticons = require("@fluentui/react-icons");
 const _reactlabel = require("@fluentui/react-label");
 const _reactutilities = require("@fluentui/react-utilities");
+const _useFieldBase = require("./useFieldBase");
 const validationMessageIcons = {
     error: /*#__PURE__*/ _react.createElement(_reacticons.DiamondDismiss12Filled, null),
     warning: /*#__PURE__*/ _react.createElement(_reacticons.Warning12Filled, null),
@@ -30,7 +23,7 @@ const validationMessageIcons = {
 };
 const useField_unstable = (props, ref)=>{
     const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;
-    const state = useFieldBase_unstable(fieldProps, ref);
+    const state = (0, _useFieldBase.useFieldBase_unstable)(fieldProps, ref);
     const defaultIcon = validationMessageIcons[state.validationState];
     return {
         ...state,
@@ -57,59 +50,3 @@ const useField_unstable = (props, ref)=>{
         size
     };
 };
-const useFieldBase_unstable = (props, ref)=>{
-    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
-    const baseId = (0, _reactutilities.useId)('field-');
-    const generatedControlId = baseId + '__control';
-    const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-        ...props,
-        ref
-    }, /*excludedPropNames:*/ [
-        'children'
-    ]), {
-        elementType: 'div'
-    });
-    const label = _reactutilities.slot.optional(props.label, {
-        defaultProps: {
-            htmlFor: generatedControlId,
-            id: baseId + '__label',
-            required
-        },
-        elementType: 'label'
-    });
-    const validationMessage = _reactutilities.slot.optional(props.validationMessage, {
-        defaultProps: {
-            id: baseId + '__validationMessage',
-            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
-        },
-        elementType: 'div'
-    });
-    const hint = _reactutilities.slot.optional(props.hint, {
-        defaultProps: {
-            id: baseId + '__hint'
-        },
-        elementType: 'div'
-    });
-    const validationMessageIcon = _reactutilities.slot.optional(props.validationMessageIcon, {
-        renderByDefault: false,
-        elementType: 'span'
-    });
-    return {
-        children,
-        generatedControlId,
-        required,
-        validationState,
-        components: {
-            root: 'div',
-            label: 'label',
-            validationMessage: 'div',
-            validationMessageIcon: 'span',
-            hint: 'div'
-        },
-        root,
-        label,
-        validationMessageIcon,
-        validationMessage,
-        hint
-    };
-};

package/lib-commonjs/components/Field/useField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","getIntrinsicElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","useFieldBase_unstable","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children","required","validationMessage","baseId","generatedControlId","root","always","htmlFor","id","role","hint"],"mappings":"AAAA;;;;;;;;;;;;yBAwDaqB;eAAAA;;qBA/BAP;eAAAA;;;;iEAvBU,QAAQ;4BAEkD,wBAAwB;4BACnF,wBAAwB;gCACQ,4BAA4B;AAGlF,MAAMN,yBAAyB;IAC7BC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACP,kCAAAA,EAAAA;IACRQ,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACP,2BAAAA,EAAAA;IACVQ,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACV,mCAAAA,EAAAA;IACVW,MAAMC;AACR;AAWO,0BAA0B,CAACE,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQC,sBAAsBF,YAAYH;IAEhD,MAAMM,cAAcd,sBAAsB,CAACY,MAAMG,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGH,KAAK;QACR,4DAA4D;QAC5DI,YAAY;YAAE,GAAGJ,MAAMI,UAAU;YAAEC,OAAOrB,iBAAAA;QAAM;QAChDqB,OAAOlB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;YAChCE,cAAc;gBAAET;gBAAM,GAAGE,MAAMK,KAAK;YAAC;YACrCG,aAAaxB,iBAAAA;QACf;QACAyB,uBAAuBtB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAX;QACAC;IACF;AACF,EAAE;AASK,8BAA8B,CAACH,OAAuBC;IAC3D,MAAM,EAAEe,QAAQ,EAAEC,WAAW,KAAK,EAAET,kBAAkBR,MAAMkB,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGlB;IAErG,MAAMmB,aAAS5B,qBAAAA,EAAM;IACrB,MAAM6B,qBAAqBD,SAAS;IAEpC,MAAME,OAAO7B,oBAAAA,CAAK8B,MAAM,KAAChC,wCAAAA,EAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHY,aAAa;IACf;IACA,MAAMH,QAAQlB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;QACvCE,cAAc;YAAEW,SAASH;YAAoBI,IAAIL,SAAS;YAAWF;QAAS;QAC9EJ,aAAa;IACf;IACA,MAAMK,oBAAoB1B,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMkB,iBAAiB,EAAE;QAC/DN,cAAc;YACZY,IAAIL,SAAS;YACbM,MAAMjB,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUV;QACjF;QACAe,aAAa;IACf;IACA,MAAMa,OAAOlC,oBAAAA,CAAKmB,QAAQ,CAACX,MAAM0B,IAAI,EAAE;QAAEd,cAAc;YAAEY,IAAIL,SAAS;QAAS;QAAGN,aAAa;IAAM;IACrG,MAAMC,wBAAwBtB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBF,aAAa;IACf;IAEA,OAAO;QACLG;QACAI;QACAH;QACAT;QACAC,YAAY;YAAEY,MAAM;YAAOX,OAAO;YAASQ,mBAAmB;YAAOJ,uBAAuB;YAAQY,MAAM;QAAM;QAChHL;QACAX;QACAI;QACAI;QACAQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\nimport { useFieldBase_unstable } from './useFieldBase';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","slot","useFieldBase_unstable","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children"],"mappings":"AAAA;;;;;+BA0Baa;;;;;;;iEAxBU,QAAQ;4BAEkD,wBAAwB;4BACnF,wBAAwB;gCACzB,4BAA4B;8BAEX,iBAAiB;AAEvD,MAAMN,yBAAyB;IAC7BC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACN,kCAAAA,EAAAA;IACRO,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACN,2BAAAA,EAAAA;IACVO,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACT,mCAAAA,EAAAA;IACVU,MAAMC;AACR;AAWO,0BAA0B,CAACE,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,YAAQb,mCAAAA,EAAsBY,YAAYH;IAEhD,MAAMK,cAAcb,sBAAsB,CAACY,MAAME,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGF,KAAK;QACR,4DAA4D;QAC5DG,YAAY;YAAE,GAAGH,MAAMG,UAAU;YAAEC,OAAOnB,iBAAAA;QAAM;QAChDmB,OAAOlB,oBAAAA,CAAKmB,QAAQ,CAACV,MAAMS,KAAK,EAAE;YAChCE,cAAc;gBAAER;gBAAM,GAAGE,MAAMI,KAAK;YAAC;YACrCG,aAAatB,iBAAAA;QACf;QACAuB,uBAAuBtB,oBAAAA,CAAKmB,QAAQ,CAACV,MAAMa,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAV;QACAC;IACF;AACF,EAAE"}

package/lib-commonjs/components/Field/useFieldBase.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useFieldBase_unstable", {
+    enumerable: true,
+    get: function() {
+        return useFieldBase_unstable;
+    }
+});
+const _reactutilities = require("@fluentui/react-utilities");
+const useFieldBase_unstable = (props, ref)=>{
+    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
+    const baseId = (0, _reactutilities.useId)('field-');
+    const generatedControlId = baseId + '__control';
+    const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+        ...props,
+        ref
+    }, /*excludedPropNames:*/ [
+        'children'
+    ]), {
+        elementType: 'div'
+    });
+    const label = _reactutilities.slot.optional(props.label, {
+        defaultProps: {
+            htmlFor: generatedControlId,
+            id: baseId + '__label',
+            required
+        },
+        elementType: 'label'
+    });
+    const validationMessage = _reactutilities.slot.optional(props.validationMessage, {
+        defaultProps: {
+            id: baseId + '__validationMessage',
+            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
+        },
+        elementType: 'div'
+    });
+    const hint = _reactutilities.slot.optional(props.hint, {
+        defaultProps: {
+            id: baseId + '__hint'
+        },
+        elementType: 'div'
+    });
+    const validationMessageIcon = _reactutilities.slot.optional(props.validationMessageIcon, {
+        renderByDefault: false,
+        elementType: 'span'
+    });
+    return {
+        children,
+        generatedControlId,
+        required,
+        validationState,
+        components: {
+            root: 'div',
+            label: 'label',
+            validationMessage: 'div',
+            validationMessageIcon: 'span',
+            hint: 'div'
+        },
+        root,
+        label,
+        validationMessageIcon,
+        validationMessage,
+        hint
+    };
+};

package/lib-commonjs/components/Field/useFieldBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/useFieldBase.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState } from './Field.types';\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["getIntrinsicElementProps","useId","slot","useFieldBase_unstable","props","ref","children","required","validationState","validationMessage","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","undefined","hint","validationMessageIcon","renderByDefault","components"],"mappings":";;;;+BAYaG;;;;;;gCAVyC,4BAA4B;AAU3E,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAEC,kBAAkBJ,MAAMK,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGL;IAErG,MAAMM,aAAST,qBAAAA,EAAM;IACrB,MAAMU,qBAAqBD,SAAS;IAEpC,MAAME,OAAOV,oBAAAA,CAAKW,MAAM,KAACb,wCAAAA,EAAyB,OAAO;QAAE,GAAGI,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHS,aAAa;IACf;IACA,MAAMC,QAAQb,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMW,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWH;QAAS;QAC9EO,aAAa;IACf;IACA,MAAML,oBAAoBP,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMK,iBAAiB,EAAE;QAC/DQ,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMZ,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUa;QACjF;QACAP,aAAa;IACf;IACA,MAAMQ,OAAOpB,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMkB,IAAI,EAAE;QAAEL,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMS,wBAAwBrB,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMmB,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBV,aAAa;IACf;IAEA,OAAO;QACLR;QACAK;QACAJ;QACAC;QACAiB,YAAY;YAAEb,MAAM;YAAOG,OAAO;YAASN,mBAAmB;YAAOc,uBAAuB;YAAQD,MAAM;QAAM;QAChHV;QACAG;QACAQ;QACAd;QACAa;IACF;AACF,EAAE"}

package/lib-commonjs/index.js

@@ -21,6 +21,9 @@ _export(exports, {
     renderField_unstable: function() {
         return _Field.renderField_unstable;
     },
+    useFieldBase_unstable: function() {
+        return _Field.useFieldBase_unstable;
+    },
     useFieldContextValues_unstable: function() {
         return _index.useFieldContextValues_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field';\nexport {\n  FieldContextProvider,\n  useFieldContext_unstable,\n  useFieldContextValues_unstable,\n  useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IAASA;2BAAK;;;eAUZK,2BAAoB;;;eAVNJ,sBAAe;;;eAAEC,2BAAoB;;kCAYrB;eAA9BK;;;eADAD,+BAAwB;;;eAExBE,oCAA6B;;;eAbwBL,8BAAuB;;qBAAmB;eAAjBC;;;uBAAyB,UAAU;uBAc5G,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './Field';\nexport {\n  FieldContextProvider,\n  useFieldContext_unstable,\n  useFieldContextValues_unstable,\n  useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IACEA;2BAAK;;;eAkBLM,2BAAoB;;;eAjBpBL,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;IAerBG;oDAA8B;;;eAD9BD,+BAAwB;;IAExBE,6BAA6B;;;;eAlB7BN,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,UAAU;uBAgBV,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.5.0",
+  "version": "9.5.1",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,13 +12,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.2.15",
+    "@fluentui/react-context-selector": "^9.2.16",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
-    "@fluentui/react-label": "^9.4.0",
+    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-label": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.3",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },