@fluentui/react-field 9.0.0-alpha.9 → 9.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +666 -1
  3. package/CHANGELOG.md +242 -2
  4. package/README.md +66 -1
  5. package/dist/index.d.ts +153 -80
  6. package/lib/Field.js.map +1 -1
  7. package/lib/components/Field/Field.js +13 -0
  8. package/lib/components/Field/Field.js.map +1 -0
  9. package/lib/components/Field/Field.types.js +1 -1
  10. package/lib/components/Field/Field.types.js.map +1 -1
  11. package/lib/components/Field/index.js +1 -0
  12. package/lib/components/Field/index.js.map +1 -1
  13. package/lib/components/Field/renderField.js +11 -9
  14. package/lib/components/Field/renderField.js.map +1 -1
  15. package/lib/components/Field/useField.js +32 -98
  16. package/lib/components/Field/useField.js.map +1 -1
  17. package/lib/components/Field/useFieldStyles.js +61 -76
  18. package/lib/components/Field/useFieldStyles.js.map +1 -1
  19. package/lib/contexts/FieldContext.js +5 -0
  20. package/lib/contexts/FieldContext.js.map +1 -0
  21. package/lib/contexts/index.js +4 -0
  22. package/lib/contexts/index.js.map +1 -0
  23. package/lib/contexts/useFieldContextValues.js +33 -0
  24. package/lib/contexts/useFieldContextValues.js.map +1 -0
  25. package/lib/contexts/useFieldControlProps.js +65 -0
  26. package/lib/contexts/useFieldControlProps.js.map +1 -0
  27. package/lib/index.js +4 -1
  28. package/lib/index.js.map +1 -1
  29. package/lib/util/makeDeprecatedField.js +68 -0
  30. package/lib/util/makeDeprecatedField.js.map +1 -0
  31. package/lib-commonjs/Field.js +4 -5
  32. package/lib-commonjs/Field.js.map +1 -1
  33. package/lib-commonjs/components/Field/Field.js +23 -0
  34. package/lib-commonjs/components/Field/Field.js.map +1 -0
  35. package/lib-commonjs/components/Field/Field.types.js +5 -2
  36. package/lib-commonjs/components/Field/Field.types.js.map +1 -1
  37. package/lib-commonjs/components/Field/index.js +8 -11
  38. package/lib-commonjs/components/Field/index.js.map +1 -1
  39. package/lib-commonjs/components/Field/renderField.js +19 -26
  40. package/lib-commonjs/components/Field/renderField.js.map +1 -1
  41. package/lib-commonjs/components/Field/useField.js +71 -155
  42. package/lib-commonjs/components/Field/useField.js.map +1 -1
  43. package/lib-commonjs/components/Field/useFieldStyles.js +138 -118
  44. package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
  45. package/lib-commonjs/contexts/FieldContext.js +21 -0
  46. package/lib-commonjs/contexts/FieldContext.js.map +1 -0
  47. package/lib-commonjs/contexts/index.js +11 -0
  48. package/lib-commonjs/contexts/index.js.map +1 -0
  49. package/lib-commonjs/contexts/useFieldContextValues.js +44 -0
  50. package/lib-commonjs/contexts/useFieldContextValues.js.map +1 -0
  51. package/lib-commonjs/contexts/useFieldControlProps.js +71 -0
  52. package/lib-commonjs/contexts/useFieldControlProps.js.map +1 -0
  53. package/lib-commonjs/index.js +24 -29
  54. package/lib-commonjs/index.js.map +1 -1
  55. package/lib-commonjs/util/makeDeprecatedField.js +61 -0
  56. package/lib-commonjs/util/makeDeprecatedField.js.map +1 -0
  57. package/package.json +14 -11
  58. package/Spec.md +0 -354
  59. package/lib/components/Field/SlotComponent.types.js +0 -2
  60. package/lib/components/Field/SlotComponent.types.js.map +0 -1
  61. package/lib-amd/Field.js +0 -6
  62. package/lib-amd/Field.js.map +0 -1
  63. package/lib-amd/components/Field/Field.types.js +0 -5
  64. package/lib-amd/components/Field/Field.types.js.map +0 -1
  65. package/lib-amd/components/Field/SlotComponent.types.js +0 -5
  66. package/lib-amd/components/Field/SlotComponent.types.js.map +0 -1
  67. package/lib-amd/components/Field/index.js +0 -9
  68. package/lib-amd/components/Field/index.js.map +0 -1
  69. package/lib-amd/components/Field/renderField.js +0 -20
  70. package/lib-amd/components/Field/renderField.js.map +0 -1
  71. package/lib-amd/components/Field/useField.js +0 -121
  72. package/lib-amd/components/Field/useField.js.map +0 -1
  73. package/lib-amd/components/Field/useFieldStyles.js +0 -97
  74. package/lib-amd/components/Field/useFieldStyles.js.map +0 -1
  75. package/lib-amd/index.js +0 -10
  76. package/lib-amd/index.js.map +0 -1
  77. package/lib-commonjs/components/Field/SlotComponent.types.js +0 -6
  78. package/lib-commonjs/components/Field/SlotComponent.types.js.map +0 -1
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { renderField_unstable } from './renderField';
3
+ import { useField_unstable } from './useField';
4
+ import { useFieldStyles_unstable } from './useFieldStyles';
5
+ import { useFieldContextValues_unstable } from '../../contexts/index';
6
+ export const Field = /*#__PURE__*/React.forwardRef((props, ref) => {
7
+ const state = useField_unstable(props, ref);
8
+ useFieldStyles_unstable(state);
9
+ const context = useFieldContextValues_unstable(state);
10
+ return renderField_unstable(state, context);
11
+ });
12
+ Field.displayName = 'Field';
13
+ //# sourceMappingURL=Field.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","useFieldContextValues_unstable","Field","forwardRef","props","ref","state","context","displayName"],"sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n const context = useFieldContextValues_unstable(state);\n return renderField_unstable(state, context);\n});\n\nField.displayName = 'Field';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,KAAA,gBAAyCL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQP,iBAAA,CAAkBK,KAAA,EAAOC,GAAA;EACvCL,uBAAA,CAAwBM,KAAA;EACxB,MAAMC,OAAA,GAAUN,8BAAA,CAA+BK,KAAA;EAC/C,OAAOR,oBAAA,CAAqBQ,KAAA,EAAOC,OAAA;AACrC;AAEAL,KAAA,CAAMM,WAAW,GAAG"}
@@ -1,2 +1,2 @@
1
- export {};
1
+ import * as React from 'react';
2
2
  //# sourceMappingURL=Field.types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Field.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot, SlotClassNames } from '@fluentui/react-utilities';\nimport type { SlotComponent } from './SlotComponent.types';\n\n/**\n * The minimum requirement for a component used by Field.\n *\n * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,\n * but it is still allowed to have a children prop.\n */\nexport type FieldControl = React.VoidFunctionComponent<\n Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'\n >\n>;\n\n/**\n * Slots added by Field\n */\nexport type FieldSlots<T extends FieldControl> = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The underlying component wrapped by this field.\n */\n control: SlotComponent<T>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an\n * icon corresponding to that state.\n *\n * This will only be displayed if `validationMessage` is set.\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<T extends FieldControl> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {\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 color of the `validationMessage`, the `validationMessageIcon`, and for some\n * field components, an `validationState=\"error\"` causes the border to become red.\n *\n * @default undefined\n */\n validationState?: 'error' | 'warning' | 'success';\n};\n\n/**\n * FieldProps plus extra optional props that are supported by useField_unstable, but not required to be part of the\n * API of every Field component.\n *\n * This allows Field to forward the required and size props to the label if the underlying component supports them,\n * but doesn't add them to the public API of fields that don't support them.\n */\nexport type FieldPropsWithOptionalComponentProps<T extends FieldControl> = FieldProps<T> & {\n /**\n * Whether the field label should be marked as required.\n */\n required?: boolean;\n\n /**\n * Size of the field label.\n *\n * Number sizes will be ignored, but are allowed because the HTML `<input>` element has a prop `size?: number`.\n */\n size?: 'small' | 'medium' | 'large' | number;\n};\n\n/**\n * Configuration parameters for a Field class, passed to useField_unstable\n */\nexport type FieldConfig<T extends FieldControl> = {\n /**\n * The underlying input component that this field is wrapping.\n */\n component: T;\n\n /**\n * Class names for this component, created by `getFieldClassNames`.\n */\n classNames: SlotClassNames<FieldSlots<T>>;\n\n /**\n * How the label be connected to the control.\n * * htmlFor - Set the Label's htmlFor prop to the component's ID (and generate an ID if not provided).\n * This is the preferred method for components that use the underlying <input> tag.\n * * aria-labelledby - Set the component's aria-labelledby prop to the Label's ID. Use this for components\n * that are not directly <input> elements (such as RadioGroup).\n *\n * @default htmlFor\n */\n labelConnection?: 'htmlFor' | 'aria-labelledby';\n\n /**\n * Should the aria-invalid and aria-errormessage attributes be set when validationState=\"error\".\n *\n * @default true\n */\n ariaInvalidOnError?: boolean;\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState<T extends FieldControl> = ComponentState<Required<FieldSlots<T>>> &\n Pick<FieldProps<T>, 'orientation' | 'validationState'> & {\n classNames: SlotClassNames<FieldSlots<T>>;\n };\n"]}
1
+ {"version":3,"names":["React"],"sources":["../../../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, 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.\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 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW"}
@@ -1,4 +1,5 @@
1
1
  export * from './Field.types';
2
+ export * from './Field';
2
3
  export * from './renderField';
3
4
  export * from './useField';
4
5
  export * from './useFieldStyles';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"]}
1
+ {"version":3,"names":[],"sources":["../../../src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
@@ -1,20 +1,22 @@
1
1
  import * as React from 'react';
2
2
  import { getSlots } from '@fluentui/react-utilities';
3
+ import { FieldContextProvider, getFieldControlProps } from '../../contexts/index';
3
4
  /**
4
5
  * Render the final JSX of Field
5
6
  */
6
-
7
- export const renderField_unstable = state => {
7
+ export const renderField_unstable = (state, contextValues) => {
8
8
  const {
9
9
  slots,
10
10
  slotProps
11
11
  } = getSlots(state);
12
- return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
13
- }, slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
14
- }), slots.control && /*#__PURE__*/React.createElement(slots.control, { ...slotProps.control
15
- }), slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, { ...slotProps.validationMessage
16
- }, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, { ...slotProps.validationMessageIcon
17
- }), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, { ...slotProps.hint
18
- }));
12
+ let {
13
+ children
14
+ } = state;
15
+ if (typeof children === 'function') {
16
+ children = children(getFieldControlProps(contextValues.field) || {});
17
+ }
18
+ return /*#__PURE__*/React.createElement(FieldContextProvider, {
19
+ value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
20
+ }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint)));
19
21
  };
20
22
  //# sourceMappingURL=renderField.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-field/src/components/Field/renderField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAA4B,KAAzB,IAAiD;EACnF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAA2B,KAA3B,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,EAGG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,CAHpB,EAIG,KAAK,CAAC,iBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAxB,EACG,KAAK,CAAC,qBAAN,iBAA+B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,qBAAP,EAA4B,EAAA,GAAK,SAAS,CAAC;EAAf,CAA5B,CADlC,EAEG,SAAS,CAAC,iBAAV,CAA4B,QAF/B,CALJ,EAUG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAVjB,CADF;AAcD,CAjBM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"names":["React","getSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","slots","slotProps","children","field","createElement","value","root","label","validationMessage","validationMessageIcon","hint"],"sources":["../../../src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getSlots } 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) => {\n const { slots, slotProps } = getSlots<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 <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {children}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n </FieldContextProvider>\n );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ;AAG3D;;;AAGA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAmBC,aAAA,KAAsC;EAC5F,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGP,QAAA,CAAqBI,KAAA;EAElD,IAAI;IAAEI;EAAQ,CAAE,GAAGJ,KAAA;EACnB,IAAI,OAAOI,QAAA,KAAa,YAAY;IAClCA,QAAA,GAAWA,QAAA,CAASN,oBAAA,CAAqBG,aAAA,CAAcI,KAAK,KAAK,CAAC;EACpE;EAEA,oBACEV,KAAA,CAAAW,aAAA,CAACT,oBAAA;IAAqBU,KAAA,EAAON,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeI;kBAC1CV,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI,EAC3BN,KAAA,CAAMO,KAAK,iBAAId,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMO,KAAK,EAAKN,SAAA,CAAUM,KAAK,GAC/CL,QAAA,EACAF,KAAA,CAAMQ,iBAAiB,iBACtBf,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMQ,iBAAiB,EAAKP,SAAA,CAAUO,iBAAiB,EACrDR,KAAA,CAAMS,qBAAqB,iBAAIhB,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMS,qBAAqB,EAAKR,SAAA,CAAUQ,qBAAqB,GAC/FR,SAAA,CAAUO,iBAAiB,CAACN,QAAQ,GAGxCF,KAAA,CAAMU,IAAI,iBAAIjB,KAAA,CAAAW,aAAA,CAACJ,KAAA,CAAMU,IAAI,EAAKT,SAAA,CAAUS,IAAI;AAIrD"}
@@ -5,39 +5,8 @@ import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-
5
5
  const validationMessageIcons = {
6
6
  error: /*#__PURE__*/React.createElement(ErrorCircle12Filled, null),
7
7
  warning: /*#__PURE__*/React.createElement(Warning12Filled, null),
8
- success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null)
9
- };
10
- /**
11
- * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
12
- */
13
-
14
- export const getPartitionedFieldProps = props => {
15
- const {
16
- className,
17
- control,
18
- hint,
19
- label,
20
- orientation,
21
- root,
22
- style,
23
- validationMessage,
24
- validationMessageIcon,
25
- validationState,
26
- ...restOfProps
27
- } = props;
28
- const fieldProps = {
29
- className,
30
- control,
31
- hint,
32
- label,
33
- orientation,
34
- root,
35
- style,
36
- validationMessage,
37
- validationMessageIcon,
38
- validationState
39
- };
40
- return [fieldProps, restOfProps];
8
+ success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null),
9
+ none: undefined
41
10
  };
42
11
  /**
43
12
  * Create the state required to render Field.
@@ -46,102 +15,67 @@ export const getPartitionedFieldProps = props => {
46
15
  * before being passed to renderField_unstable.
47
16
  *
48
17
  * @param props - Props passed to this field
49
- * @param ref - Ref to the control slot (primary slot)
50
- * @param params - Configuration parameters for this Field
18
+ * @param ref - Ref to the root
51
19
  */
52
-
53
- export const useField_unstable = (props, ref, params) => {
54
- var _a, _b, _c, _d, _e;
55
-
56
- const [fieldProps, controlProps] = getPartitionedFieldProps(props);
20
+ export const useField_unstable = (props, ref) => {
57
21
  const {
22
+ children,
58
23
  orientation = 'vertical',
59
- validationState
60
- } = fieldProps;
61
- const {
62
- labelConnection = 'htmlFor',
63
- ariaInvalidOnError = true
64
- } = params;
24
+ required = false,
25
+ validationState = props.validationMessage ? 'error' : 'none',
26
+ size = 'medium'
27
+ } = props;
65
28
  const baseId = useId('field-');
66
- const root = resolveShorthand(fieldProps.root, {
67
- required: true,
68
- defaultProps: getNativeElementProps('div', fieldProps)
69
- });
70
- const control = resolveShorthand(fieldProps.control, {
71
- required: true,
72
- defaultProps: {
73
- ref,
74
- id: baseId + '__control',
75
- ...controlProps
76
- }
77
- });
78
- const label = resolveShorthand(fieldProps.label, {
29
+ const generatedControlId = baseId + '__control';
30
+ const root = getNativeElementProps('div', {
31
+ ...props,
32
+ ref
33
+ }, /*excludedPropNames:*/['children']);
34
+ const label = resolveShorthand(props.label, {
79
35
  defaultProps: {
36
+ htmlFor: generatedControlId,
80
37
  id: baseId + '__label',
81
- required: controlProps.required,
82
- size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
83
- htmlFor: labelConnection === 'htmlFor' ? control.id : undefined
38
+ required,
39
+ size
84
40
  }
85
41
  });
86
- const validationMessage = resolveShorthand(fieldProps.validationMessage, {
42
+ const validationMessage = resolveShorthand(props.validationMessage, {
87
43
  defaultProps: {
88
- id: baseId + '__validationMessage'
44
+ id: baseId + '__validationMessage',
45
+ role: validationState === 'error' ? 'alert' : undefined
89
46
  }
90
47
  });
91
- const hint = resolveShorthand(fieldProps.hint, {
48
+ const hint = resolveShorthand(props.hint, {
92
49
  defaultProps: {
93
50
  id: baseId + '__hint'
94
51
  }
95
52
  });
96
- const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {
97
- required: !!validationState,
53
+ const defaultIcon = validationMessageIcons[validationState];
54
+ const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {
55
+ required: !!defaultIcon,
98
56
  defaultProps: {
99
- children: validationState ? validationMessageIcons[validationState] : undefined
100
- }
101
- }); // Hook up aria props on the control
102
-
103
- if (label && labelConnection === 'aria-labelledby') {
104
- (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
105
- }
106
-
107
- if (validationState === 'error' && ariaInvalidOnError) {
108
- (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
109
-
110
- if (validationMessage) {
111
- (_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : control['aria-errormessage'] = validationMessage.id;
57
+ children: defaultIcon
112
58
  }
113
-
114
- if (hint) {
115
- (_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : control['aria-describedby'] = hint.id;
116
- }
117
- } else {
118
- // If the state is not an error, then the control is described by the validation message, or hint, or both
119
- const describedby = validationMessage || hint;
120
-
121
- if (describedby) {
122
- (_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : control['aria-describedby'] = validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;
123
- }
124
- }
125
-
126
- const state = {
59
+ });
60
+ return {
61
+ children,
62
+ generatedControlId,
127
63
  orientation,
64
+ required,
65
+ size,
128
66
  validationState,
129
- classNames: params.classNames,
130
67
  components: {
131
68
  root: 'div',
132
- control: params.component,
133
69
  label: Label,
134
70
  validationMessage: 'div',
135
71
  validationMessageIcon: 'span',
136
72
  hint: 'div'
137
73
  },
138
74
  root,
139
- control,
140
75
  label,
141
76
  validationMessageIcon,
142
77
  validationMessage,
143
78
  hint
144
79
  };
145
- return state;
146
80
  };
147
81
  //# sourceMappingURL=useField.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-field/src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n FieldConfig,\n FieldControl,\n FieldProps,\n FieldPropsWithOptionalComponentProps,\n FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\n warning: <Warning12Filled />,\n success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldControl>>(props: Props) => {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...restOfProps\n } = props;\n\n const fieldProps = {\n className,\n control,\n hint,\n label,\n orientation,\n root,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n };\n\n return [fieldProps, restOfProps] as const;\n};\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 control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldControl>(\n props: FieldPropsWithOptionalComponentProps<T>,\n ref: React.Ref<HTMLElement>,\n params: FieldConfig<T>,\n): FieldState<T> => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n const { orientation = 'vertical', validationState } = fieldProps;\n const { labelConnection = 'htmlFor', ariaInvalidOnError = true } = params;\n\n const baseId = useId('field-');\n\n const root = resolveShorthand(fieldProps.root, {\n required: true,\n defaultProps: getNativeElementProps('div', fieldProps),\n });\n\n const control = resolveShorthand(fieldProps.control, {\n required: true,\n defaultProps: {\n ref,\n id: baseId + '__control',\n ...controlProps,\n },\n });\n\n const label = resolveShorthand(fieldProps.label, {\n defaultProps: {\n id: baseId + '__label',\n required: controlProps.required,\n size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n htmlFor: labelConnection === 'htmlFor' ? control.id : undefined,\n },\n });\n\n const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n },\n });\n\n const hint = resolveShorthand(fieldProps.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n required: !!validationState,\n defaultProps: {\n children: validationState ? validationMessageIcons[validationState] : undefined,\n },\n });\n\n // Hook up aria props on the control\n if (label && labelConnection === 'aria-labelledby') {\n control['aria-labelledby'] ??= label.id;\n }\n\n if (validationState === 'error' && ariaInvalidOnError) {\n control['aria-invalid'] ??= true;\n if (validationMessage) {\n control['aria-errormessage'] ??= validationMessage.id;\n }\n if (hint) {\n control['aria-describedby'] ??= hint.id;\n }\n } else {\n // If the state is not an error, then the control is described by the validation message, or hint, or both\n const describedby = validationMessage || hint;\n if (describedby) {\n control['aria-describedby'] ??= validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;\n }\n }\n\n const state: FieldState<FieldControl> = {\n orientation,\n validationState,\n classNames: params.classNames,\n components: {\n root: 'div',\n control: params.component,\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n control,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n\n return state as FieldState<T>;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","resolveShorthand","useId","validationMessageIcons","error","createElement","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","generatedControlId","root","label","defaultProps","htmlFor","id","role","hint","defaultIcon","validationMessageIcon","components"],"sources":["../../../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n error: <ErrorCircle12Filled />,\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 {\n children,\n orientation = 'vertical',\n required = false,\n validationState = props.validationMessage ? 'error' : 'none',\n size = 'medium',\n } = props;\n\n const baseId = useId('field-');\n const generatedControlId = baseId + '__control';\n\n const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: generatedControlId,\n id: baseId + '__label',\n required,\n size,\n },\n });\n\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + '__validationMessage',\n role: validationState === 'error' ? 'alert' : undefined,\n },\n });\n\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + '__hint',\n },\n });\n\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon,\n },\n });\n\n return {\n children,\n generatedControlId,\n orientation,\n required,\n size,\n validationState,\n components: {\n root: 'div',\n label: Label,\n validationMessage: 'div',\n validationMessageIcon: 'span',\n hint: 'div',\n },\n root,\n label,\n validationMessageIcon,\n validationMessage,\n hint,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAEvB,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ;AAC9E,SAASC,KAAK,QAAQ;AACtB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAG/D,MAAMC,sBAAA,GAAyB;EAC7BC,KAAA,eAAOT,KAAA,CAAAU,aAAA,CAACR,mBAAA;EACRS,OAAA,eAASX,KAAA,CAAAU,aAAA,CAACP,eAAA;EACVS,OAAA,eAASZ,KAAA,CAAAU,aAAA,CAACT,uBAAA;EACVY,IAAA,EAAMC;AACR;AAEA;;;;;;;;;AASA,OAAO,MAAMC,iBAAA,GAAoBA,CAACC,KAAA,EAAmBC,GAAA,KAA+C;EAClG,MAAM;IACJC,QAAA;IACAC,WAAA,GAAc;IACdC,QAAA,GAAW,KAAK;IAChBC,eAAA,GAAkBL,KAAA,CAAMM,iBAAiB,GAAG,UAAU,MAAM;IAC5DC,IAAA,GAAO;EAAQ,CAChB,GAAGP,KAAA;EAEJ,MAAMQ,MAAA,GAASjB,KAAA,CAAM;EACrB,MAAMkB,kBAAA,GAAqBD,MAAA,GAAS;EAEpC,MAAME,IAAA,GAAOrB,qBAAA,CAAsB,OAAO;IAAE,GAAGW,KAAK;IAAEC;EAAI,GAAG,sBAAuB,CAAC,WAAW;EAEhG,MAAMU,KAAA,GAAQrB,gBAAA,CAAiBU,KAAA,CAAMW,KAAK,EAAE;IAC1CC,YAAA,EAAc;MACZC,OAAA,EAASJ,kBAAA;MACTK,EAAA,EAAIN,MAAA,GAAS;MACbJ,QAAA;MACAG;IACF;EACF;EAEA,MAAMD,iBAAA,GAAoBhB,gBAAA,CAAiBU,KAAA,CAAMM,iBAAiB,EAAE;IAClEM,YAAA,EAAc;MACZE,EAAA,EAAIN,MAAA,GAAS;MACbO,IAAA,EAAMV,eAAA,KAAoB,UAAU,UAAUP;IAChD;EACF;EAEA,MAAMkB,IAAA,GAAO1B,gBAAA,CAAiBU,KAAA,CAAMgB,IAAI,EAAE;IACxCJ,YAAA,EAAc;MACZE,EAAA,EAAIN,MAAA,GAAS;IACf;EACF;EAEA,MAAMS,WAAA,GAAczB,sBAAsB,CAACa,eAAA,CAAgB;EAC3D,MAAMa,qBAAA,GAAwB5B,gBAAA,CAAiBU,KAAA,CAAMkB,qBAAqB,EAAE;IAC1Ed,QAAA,EAAU,CAAC,CAACa,WAAA;IACZL,YAAA,EAAc;MACZV,QAAA,EAAUe;IACZ;EACF;EAEA,OAAO;IACLf,QAAA;IACAO,kBAAA;IACAN,WAAA;IACAC,QAAA;IACAG,IAAA;IACAF,eAAA;IACAc,UAAA,EAAY;MACVT,IAAA,EAAM;MACNC,KAAA,EAAOvB,KAAA;MACPkB,iBAAA,EAAmB;MACnBY,qBAAA,EAAuB;MACvBF,IAAA,EAAM;IACR;IACAN,IAAA;IACAC,KAAA;IACAO,qBAAA;IACAZ,iBAAA;IACAU;EACF;AACF"}
@@ -1,121 +1,106 @@
1
1
  import { tokens, typographyStyles } from '@fluentui/react-theme';
2
- import { __styles, mergeClasses } from '@griffel/react';
3
- export const getFieldClassNames = name => ({
4
- root: `fui-${name}`,
5
- control: `fui-${name}__control`,
6
- label: `fui-${name}__label`,
7
- validationMessage: `fui-${name}__validationMessage`,
8
- validationMessageIcon: `fui-${name}__validationMessageIcon`,
9
- hint: `fui-${name}__hint`
10
- });
2
+ import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
3
+ export const fieldClassNames = {
4
+ root: `fui-Field`,
5
+ label: `fui-Field__label`,
6
+ validationMessage: `fui-Field__validationMessage`,
7
+ validationMessageIcon: `fui-Field__validationMessageIcon`,
8
+ hint: `fui-Field__hint`
9
+ };
10
+ // Size of the icon in the validation message
11
+ const iconSize = '12px';
11
12
  /**
12
13
  * Styles for the root slot
13
14
  */
14
-
15
15
  const useRootStyles = /*#__PURE__*/__styles({
16
- "base": {
17
- "mc9l5x": "f13qh94s",
18
- "Bxotwcr": "f14np9u9",
19
- "B7hvi0a": "f1m2n5bn"
16
+ base: {
17
+ mc9l5x: "f13qh94s"
20
18
  },
21
- "horizontal": {
22
- "wkccdc": "fai812u",
23
- "Budl1dq": "fckz59x"
19
+ horizontal: {
20
+ Budl1dq: "f2wwaib",
21
+ wkccdc: "f1645dqt"
24
22
  },
25
- "secondColumn": {
26
- "Br312pm": "fd46tj4"
23
+ horizontalNoLabel: {
24
+ uwmqm3: ["f15jqgz8", "fggqkej"],
25
+ Budl1dq: "f1c2z91y"
27
26
  }
28
27
  }, {
29
- "d": [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
28
+ d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
30
29
  });
31
-
32
30
  const useLabelStyles = /*#__PURE__*/__styles({
33
- "base": {
34
- "B6of3ja": "fg30ohd",
35
- "jrapky": "fyacil5"
31
+ base: {
32
+ z8tnut: "fclwglc",
33
+ Byoj8tv: "fywfov9"
34
+ },
35
+ large: {
36
+ z8tnut: "f1sl3k7w",
37
+ Byoj8tv: "f1brlhvm"
38
+ },
39
+ vertical: {
40
+ jrapky: "fyacil5"
36
41
  },
37
- "horizontal": {
38
- "Ijaq50": "f16hsg94",
39
- "nk6f5a": "f1nzqi2z",
40
- "t21cq0": ["fkujibs", "f199hnxi"],
41
- "qb2dma": "f9h729m",
42
- "Bdqf98w": "fhb5wj7"
42
+ verticalLarge: {
43
+ jrapky: "f8l5zjj"
44
+ },
45
+ horizontal: {
46
+ t21cq0: ["fkujibs", "f199hnxi"],
47
+ Ijaq50: "f16hsg94",
48
+ nk6f5a: "f1nzqi2z"
43
49
  }
44
50
  }, {
45
- "d": [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
51
+ d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}"]
46
52
  });
47
-
53
+ const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
48
54
  const useSecondaryTextStyles = /*#__PURE__*/__styles({
49
- "base": {
50
- "B6of3ja": "fg30ohd",
51
- "sj55zd": "f11d4kpn",
52
- "Bahqtrf": "fk6fouc",
53
- "Be2twd7": "fy9rknc",
54
- "Bhrd7zp": "figsok6",
55
- "Bg96gwp": "fwrc4pm"
55
+ error: {
56
+ sj55zd: "f1hcrxcs"
56
57
  },
57
- "error": {
58
- "sj55zd": "f1hcrxcs"
58
+ withIcon: {
59
+ uwmqm3: ["frawy03", "fg4c52"]
59
60
  }
60
61
  }, {
61
- "d": [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
62
+ d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
62
63
  });
63
-
64
+ const useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles("ra7h1uk", "r1rh6bd7", [".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}", ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"]);
64
65
  const useValidationMessageIconStyles = /*#__PURE__*/__styles({
65
- "base": {
66
- "Be2twd7": "f1ugzwwg",
67
- "Bg96gwp": "fp4gqsa",
68
- "ha4doy": "fmrv4ls",
69
- "t21cq0": ["fm0x6gh", "fbyavb5"]
70
- },
71
- "error": {
72
- "sj55zd": "f1hcrxcs"
66
+ error: {
67
+ sj55zd: "f1hcrxcs"
73
68
  },
74
- "warning": {
75
- "sj55zd": "f1k5f75o"
69
+ warning: {
70
+ sj55zd: "f1k5f75o"
76
71
  },
77
- "success": {
78
- "sj55zd": "ffmvakt"
72
+ success: {
73
+ sj55zd: "ffmvakt"
79
74
  }
80
75
  }, {
81
- "d": [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fmrv4ls{vertical-align:middle;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
76
+ d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
82
77
  });
83
78
  /**
84
79
  * Apply styling to the Field slots based on the state
85
80
  */
86
-
87
-
88
81
  export const useFieldStyles_unstable = state => {
89
- const classNames = state.classNames;
90
- const validationState = state.validationState;
82
+ const {
83
+ validationState
84
+ } = state;
91
85
  const horizontal = state.orientation === 'horizontal';
92
86
  const rootStyles = useRootStyles();
93
- state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
94
-
95
- if (state.control) {
96
- state.control.className = mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
97
- }
98
-
87
+ state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
99
88
  const labelStyles = useLabelStyles();
100
-
101
89
  if (state.label) {
102
- state.label.className = mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
90
+ state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
103
91
  }
104
-
92
+ const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
105
93
  const validationMessageIconStyles = useValidationMessageIconStyles();
106
-
107
94
  if (state.validationMessageIcon) {
108
- state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
95
+ state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
109
96
  }
110
-
97
+ const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
111
98
  const secondaryTextStyles = useSecondaryTextStyles();
112
-
113
99
  if (state.validationMessage) {
114
- state.validationMessage.className = mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
100
+ state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
115
101
  }
116
-
117
102
  if (state.hint) {
118
- state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
103
+ state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
119
104
  }
120
105
  };
121
106
  //# sourceMappingURL=useFieldStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n gridAutoFlow: 'row',\n justifyItems: 'start',\n },\n\n horizontal: {\n gridTemplateRows: 'auto auto auto auto',\n gridTemplateColumns: '1fr 2fr',\n },\n\n secondColumn: {\n gridColumnStart: '2',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n gridRowStart: '1',\n gridRowEnd: '-1',\n marginRight: tokens.spacingHorizontalM,\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n base: {\n fontSize: '12px',\n lineHeight: '12px',\n verticalAlign: 'middle',\n marginRight: tokens.spacingHorizontalXS,\n },\n\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(\n classNames.control,\n horizontal && rootStyles.secondColumn,\n state.control.className,\n );\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n state.label.className,\n );\n }\n\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconStyles.base,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\n validationState === 'error' && secondaryTextStyles.error,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(\n classNames.hint,\n secondaryTextStyles.base,\n horizontal && rootStyles.secondColumn,\n state.hint.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","orientation","rootStyles","className","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["../../../src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n },\n\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr',\n },\n\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n },\n\n large: {\n paddingTop: '1px',\n paddingBottom: '1px',\n },\n\n vertical: {\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n verticalLarge: {\n marginBottom: tokens.spacingVerticalXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n color: tokens.colorPaletteGreenForeground1,\n },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState) => {\n const { validationState } = state;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n fieldClassNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n fieldClassNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n !horizontal && labelStyles.vertical,\n state.label.size === 'large' && labelStyles.large,\n !horizontal && state.label.size === 'large' && labelStyles.verticalLarge,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n fieldClassNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n validationState !== 'none' && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n fieldClassNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ;AAEzC,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ;AAG1D,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAO,WAAU;EACjBC,KAAA,EAAQ,kBAAiB;EACzBC,iBAAA,EAAoB,8BAA6B;EACjDC,qBAAA,EAAwB,kCAAiC;EACzDC,IAAA,EAAO;AACT;AAEA;AACA,MAAMC,QAAA,GAAW;AAEjB;;;AAGA,MAAMC,aAAA,gBAAgBT,QAAA;EAAAU,IAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAC,MAAA;IAAAH,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,EAkBtB;AAEA,MAAMC,cAAA,gBAAiBlB,QAAA;EAAAU,IAAA;IAAAS,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,QAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAD,MAAA;EAAA;EAAAX,UAAA;IAAAa,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAV,CAAA;AAAA,EAwBvB;AAEA,MAAMW,6BAAA,gBAAgC7B,aAAA,wPAItC;AAEA,MAAM8B,sBAAA,gBAAyB7B,QAAA;EAAA8B,KAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAhB,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAS/B;AAEA,MAAMgB,qCAAA,gBAAwClC,aAAA,4XAU9C;AAEA,MAAMmC,8BAAA,gBAAiClC,QAAA;EAAA8B,KAAA;IAAAC,MAAA;EAAA;EAAAI,OAAA;IAAAJ,MAAA;EAAA;EAAAK,OAAA;IAAAL,MAAA;EAAA;AAAA;EAAAd,CAAA;AAAA,EAUvC;AAEA;;;AAGA,OAAO,MAAMoB,uBAAA,GAA2BC,KAAA,IAAsB;EAC5D,MAAM;IAAEC;EAAe,CAAE,GAAGD,KAAA;EAC5B,MAAM1B,UAAA,GAAa0B,KAAA,CAAME,WAAW,KAAK;EAEzC,MAAMC,UAAA,GAAahC,aAAA;EACnB6B,KAAA,CAAMnC,IAAI,CAACuC,SAAS,GAAGzC,YAAA,CACrBC,eAAA,CAAgBC,IAAI,EACpBsC,UAAA,CAAW/B,IAAI,EACfE,UAAA,IAAc6B,UAAA,CAAW7B,UAAU,EACnCA,UAAA,IAAc,CAAC0B,KAAA,CAAMlC,KAAK,IAAIqC,UAAA,CAAW1B,iBAAiB,EAC1DuB,KAAA,CAAMnC,IAAI,CAACuC,SAAS;EAGtB,MAAMC,WAAA,GAAczB,cAAA;EACpB,IAAIoB,KAAA,CAAMlC,KAAK,EAAE;IACfkC,KAAA,CAAMlC,KAAK,CAACsC,SAAS,GAAGzC,YAAA,CACtBC,eAAA,CAAgBE,KAAK,EACrBuC,WAAA,CAAYjC,IAAI,EAChBE,UAAA,IAAc+B,WAAA,CAAY/B,UAAU,EACpC,CAACA,UAAA,IAAc+B,WAAA,CAAYrB,QAAQ,EACnCgB,KAAA,CAAMlC,KAAK,CAACwC,IAAI,KAAK,WAAWD,WAAA,CAAYtB,KAAK,EACjD,CAACT,UAAA,IAAc0B,KAAA,CAAMlC,KAAK,CAACwC,IAAI,KAAK,WAAWD,WAAA,CAAYnB,aAAa,EACxEc,KAAA,CAAMlC,KAAK,CAACsC,SAAS;EAEzB;EAEA,MAAMG,kCAAA,GAAqCZ,qCAAA;EAC3C,MAAMa,2BAAA,GAA8BZ,8BAAA;EACpC,IAAII,KAAA,CAAMhC,qBAAqB,EAAE;IAC/BgC,KAAA,CAAMhC,qBAAqB,CAACoC,SAAS,GAAGzC,YAAA,CACtCC,eAAA,CAAgBI,qBAAqB,EACrCuC,kCAAA,EACAN,eAAA,KAAoB,UAAUO,2BAA2B,CAACP,eAAA,CAAgB,EAC1ED,KAAA,CAAMhC,qBAAqB,CAACoC,SAAS;EAEzC;EAEA,MAAMK,0BAAA,GAA6BnB,6BAAA;EACnC,MAAMoB,mBAAA,GAAsBnB,sBAAA;EAC5B,IAAIS,KAAA,CAAMjC,iBAAiB,EAAE;IAC3BiC,KAAA,CAAMjC,iBAAiB,CAACqC,SAAS,GAAGzC,YAAA,CAClCC,eAAA,CAAgBG,iBAAiB,EACjC0C,0BAAA,EACAR,eAAA,KAAoB,WAAWS,mBAAA,CAAoBlB,KAAK,EACxD,CAAC,CAACQ,KAAA,CAAMhC,qBAAqB,IAAI0C,mBAAA,CAAoBhB,QAAQ,EAC7DM,KAAA,CAAMjC,iBAAiB,CAACqC,SAAS;EAErC;EAEA,IAAIJ,KAAA,CAAM/B,IAAI,EAAE;IACd+B,KAAA,CAAM/B,IAAI,CAACmC,SAAS,GAAGzC,YAAA,CAAaC,eAAA,CAAgBK,IAAI,EAAEwC,0BAAA,EAA4BT,KAAA,CAAM/B,IAAI,CAACmC,SAAS;EAC5G;AACF"}
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ const FieldContext = /*#__PURE__*/React.createContext(undefined);
3
+ export const FieldContextProvider = FieldContext.Provider;
4
+ export const useFieldContext_unstable = () => React.useContext(FieldContext);
5
+ //# sourceMappingURL=FieldContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","FieldContext","createContext","undefined","FieldContextProvider","Provider","useFieldContext_unstable","useContext"],"sources":["../../src/contexts/FieldContext.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { FieldContextValue } from '../Field';\n\nconst FieldContext = React.createContext<FieldContextValue | undefined>(undefined);\n\nexport const FieldContextProvider = FieldContext.Provider;\n\nexport const useFieldContext_unstable = () => React.useContext(FieldContext);\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAIvB,MAAMC,YAAA,gBAAeD,KAAA,CAAME,aAAa,CAAgCC,SAAA;AAExE,OAAO,MAAMC,oBAAA,GAAuBH,YAAA,CAAaI,QAAQ;AAEzD,OAAO,MAAMC,wBAAA,GAA2BA,CAAA,KAAMN,KAAA,CAAMO,UAAU,CAACN,YAAA"}
@@ -0,0 +1,4 @@
1
+ export * from './FieldContext';
2
+ export * from './useFieldContextValues';
3
+ export * from './useFieldControlProps';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":[],"sources":["../../src/contexts/index.ts"],"sourcesContent":["export * from './FieldContext';\nexport * from './useFieldContextValues';\nexport * from './useFieldControlProps';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc"}