@fluentui/react-field 0.0.0-nightly-20230316-0427.1 → 0.0.0-nightly-20230317-1454.1

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 (40) hide show
  1. package/.swcrc +39 -0
  2. package/CHANGELOG.json +40 -13
  3. package/CHANGELOG.md +20 -9
  4. package/lib/Field.js +1 -1
  5. package/lib/Field.js.map +1 -1
  6. package/lib/components/Field/Field.js +5 -5
  7. package/lib/components/Field/Field.js.map +1 -1
  8. package/lib/components/Field/Field.types.js +1 -1
  9. package/lib/components/Field/Field.types.js.map +1 -1
  10. package/lib/components/Field/index.js +5 -5
  11. package/lib/components/Field/index.js.map +1 -1
  12. package/lib/components/Field/renderField.js +3 -13
  13. package/lib/components/Field/renderField.js.map +1 -1
  14. package/lib/components/Field/useField.js +28 -29
  15. package/lib/components/Field/useField.js.map +1 -1
  16. package/lib/components/Field/useFieldStyles.js +7 -7
  17. package/lib/components/Field/useFieldStyles.js.map +1 -1
  18. package/lib/index.js +2 -2
  19. package/lib/index.js.map +1 -1
  20. package/lib/util/makeDeprecatedField.js +4 -7
  21. package/lib/util/makeDeprecatedField.js.map +1 -1
  22. package/lib-commonjs/Field.js +5 -4
  23. package/lib-commonjs/Field.js.map +1 -1
  24. package/lib-commonjs/components/Field/Field.js +16 -12
  25. package/lib-commonjs/components/Field/Field.js.map +1 -1
  26. package/lib-commonjs/components/Field/Field.types.js +5 -2
  27. package/lib-commonjs/components/Field/Field.types.js.map +1 -1
  28. package/lib-commonjs/components/Field/index.js +9 -8
  29. package/lib-commonjs/components/Field/index.js.map +1 -1
  30. package/lib-commonjs/components/Field/renderField.js +13 -26
  31. package/lib-commonjs/components/Field/renderField.js.map +1 -1
  32. package/lib-commonjs/components/Field/useField.js +94 -102
  33. package/lib-commonjs/components/Field/useField.js.map +1 -1
  34. package/lib-commonjs/components/Field/useFieldStyles.js +138 -97
  35. package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
  36. package/lib-commonjs/index.js +21 -49
  37. package/lib-commonjs/index.js.map +1 -1
  38. package/lib-commonjs/util/makeDeprecatedField.js +53 -71
  39. package/lib-commonjs/util/makeDeprecatedField.js.map +1 -1
  40. package/package.json +8 -8
@@ -1,6 +1,5 @@
1
- /* eslint-disable deprecation/deprecation */
2
- import * as React from 'react';
3
- import { Field, fieldClassNames } from '../Field';
1
+ /* eslint-disable deprecation/deprecation */import * as React from "react";
2
+ import { Field, fieldClassNames } from "../Field";
4
3
  /**
5
4
  * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
6
5
  */
@@ -17,7 +16,7 @@ function getPartitionedFieldProps(props) {
17
16
  style,
18
17
  validationMessage,
19
18
  validationMessageIcon,
20
- validationState = 'none',
19
+ validationState = "none",
21
20
  ...restOfProps
22
21
  } = props;
23
22
  return [{
@@ -50,9 +49,7 @@ export function makeDeprecatedField(Control, options = {}) {
50
49
  } = options;
51
50
  const DeprecatedField = /*#__PURE__*/React.forwardRef((props, ref) => {
52
51
  const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));
53
- return /*#__PURE__*/React.createElement(Field, {
54
- ...fieldProps
55
- }, /*#__PURE__*/React.createElement(Control, {
52
+ return /*#__PURE__*/React.createElement(Field, fieldProps, /*#__PURE__*/React.createElement(Control, {
56
53
  ...controlProps,
57
54
  ref: ref
58
55
  }));
@@ -1 +1 @@
1
- {"version":3,"names":["React","Field","fieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","forwardRef","ref","fieldProps","controlProps","createElement","getDeprecatedFieldClassNames","controlRootClassName"],"sources":["../../../../../../../../packages/react-components/react-field/src/util/makeDeprecatedField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../Field';\nimport { Field, fieldClassNames } from '../Field';\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport type DeprecatedFieldProps<ControlProps> = ControlProps & {\n root?: FieldProps;\n control?: ControlProps;\n} & Pick<\n FieldProps,\n | 'className'\n | 'hint'\n | 'label'\n | 'orientation'\n | 'style'\n | 'validationMessage'\n | 'validationMessageIcon'\n | 'validationState'\n >;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps<ControlProps>(\n props: DeprecatedFieldProps<ControlProps> & Pick<FieldProps, 'required' | 'size'>,\n) {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n required,\n root,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState = 'none',\n ...restOfProps\n } = props;\n\n return [\n {\n className,\n hint,\n label,\n orientation,\n required,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...root,\n },\n {\n required,\n size,\n ...restOfProps,\n ...control,\n },\n ];\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField<ControlProps>(\n Control: React.ComponentType<ControlProps>,\n options: {\n mapProps?: (props: DeprecatedFieldProps<ControlProps>) => DeprecatedFieldProps<ControlProps>;\n displayName?: string;\n } = {},\n) {\n const { mapProps = props => props, displayName = `${Control.displayName}Field` } = options;\n\n const DeprecatedField = React.forwardRef((props, ref) => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n return (\n <Field {...fieldProps}>\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n <Control {...(controlProps as any)} ref={ref as any} />\n </Field>\n );\n }) as ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;\n\n DeprecatedField.displayName = displayName;\n\n return DeprecatedField;\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = (controlRootClassName: string) => ({\n ...fieldClassNames,\n control: controlRootClassName,\n});\n"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,KAAK,EAAEC,eAAe,QAAQ,UAAU;AAqBjD;;;AAGA,SAASC,wBAAwBA,CAC/BC,KAAiF;EAEjF,MAAM;IACJC,SAAS;IACTC,OAAO;IACPC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe,GAAG,MAAM;IACxB,GAAGC;EAAW,CACf,GAAGb,KAAK;EAET,OAAO,CACL;IACEC,SAAS;IACTE,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRE,IAAI;IACJC,KAAK;IACLC,iBAAiB;IACjBC,qBAAqB;IACrBC,eAAe;IACf,GAAGL;GACJ,EACD;IACED,QAAQ;IACRE,IAAI;IACJ,GAAGK,WAAW;IACd,GAAGX;GACJ,CACF;AACH;AAEA;;;;AAIA,OAAM,SAAUY,mBAAmBA,CACjCC,OAA0C,EAC1CC,OAAA,GAGI,EAAE;EAEN,MAAM;IAAEC,QAAQ,GAAGjB,KAAK,IAAIA,KAAK;IAAEkB,WAAW,GAAG,GAAGH,OAAO,CAACG,WAAW;EAAO,CAAE,GAAGF,OAAO;EAE1F,MAAMG,eAAe,gBAAGvB,KAAK,CAACwB,UAAU,CAAC,CAACpB,KAAK,EAAEqB,GAAG,KAAI;IACtD,MAAM,CAACC,UAAU,EAAEC,YAAY,CAAC,GAAGxB,wBAAwB,CAACkB,QAAQ,CAACjB,KAAK,CAAC,CAAC;IAC5E,oBACEJ,KAAA,CAAA4B,aAAA,CAAC3B,KAAK;MAAA,GAAKyB;IAAU,gBAEnB1B,KAAA,CAAA4B,aAAA,CAACT,OAAO;MAAA,GAAMQ,YAAoB;MAAEF,GAAG,EAAEA;IAAU,EAAI,CACjD;EAEZ,CAAC,CAA4D;EAE7DF,eAAe,CAACD,WAAW,GAAGA,WAAW;EAEzC,OAAOC,eAAe;AACxB;AAEA;;;;AAIA,OAAO,MAAMM,4BAA4B,GAAIC,oBAA4B,KAAM;EAC7E,GAAG5B,eAAe;EAClBI,OAAO,EAAEwB;CACV,CAAC"}
1
+ {"version":3,"names":["React","Field","fieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","forwardRef","ref","fieldProps","controlProps","createElement","getDeprecatedFieldClassNames","controlRootClassName"],"sources":["../../src/util/makeDeprecatedField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../Field';\nimport { Field, fieldClassNames } from '../Field';\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport type DeprecatedFieldProps<ControlProps> = ControlProps & {\n root?: FieldProps;\n control?: ControlProps;\n} & Pick<\n FieldProps,\n | 'className'\n | 'hint'\n | 'label'\n | 'orientation'\n | 'style'\n | 'validationMessage'\n | 'validationMessageIcon'\n | 'validationState'\n >;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps<ControlProps>(\n props: DeprecatedFieldProps<ControlProps> & Pick<FieldProps, 'required' | 'size'>,\n) {\n const {\n className,\n control,\n hint,\n label,\n orientation,\n required,\n root,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState = 'none',\n ...restOfProps\n } = props;\n\n return [\n {\n className,\n hint,\n label,\n orientation,\n required,\n size,\n style,\n validationMessage,\n validationMessageIcon,\n validationState,\n ...root,\n },\n {\n required,\n size,\n ...restOfProps,\n ...control,\n },\n ];\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField<ControlProps>(\n Control: React.ComponentType<ControlProps>,\n options: {\n mapProps?: (props: DeprecatedFieldProps<ControlProps>) => DeprecatedFieldProps<ControlProps>;\n displayName?: string;\n } = {},\n) {\n const { mapProps = props => props, displayName = `${Control.displayName}Field` } = options;\n\n const DeprecatedField = React.forwardRef((props, ref) => {\n const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n return (\n <Field {...fieldProps}>\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n <Control {...(controlProps as any)} ref={ref as any} />\n </Field>\n );\n }) as ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;\n\n DeprecatedField.displayName = displayName;\n\n return DeprecatedField;\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = (controlRootClassName: string) => ({\n ...fieldClassNames,\n control: controlRootClassName,\n});\n"],"mappings":"AAAA,4CACA,YAAYA,KAAA,MAAW;AAGvB,SAASC,KAAK,EAAEC,eAAe,QAAQ;AAqBvC;;;AAGA,SAASC,yBACPC,KAAiF,EACjF;EACA,MAAM;IACJC,SAAA;IACAC,OAAA;IACAC,IAAA;IACAC,KAAA;IACAC,WAAA;IACAC,QAAA;IACAC,IAAA;IACAC,IAAA;IACAC,KAAA;IACAC,iBAAA;IACAC,qBAAA;IACAC,eAAA,GAAkB;IAClB,GAAGC;EAAA,CACJ,GAAGb,KAAA;EAEJ,OAAO,CACL;IACEC,SAAA;IACAE,IAAA;IACAC,KAAA;IACAC,WAAA;IACAC,QAAA;IACAE,IAAA;IACAC,KAAA;IACAC,iBAAA;IACAC,qBAAA;IACAC,eAAA;IACA,GAAGL;EACL,GACA;IACED,QAAA;IACAE,IAAA;IACA,GAAGK,WAAW;IACd,GAAGX;EACL,EACD;AACH;AAEA;;;;AAIA,OAAO,SAASY,oBACdC,OAA0C,EAC1CC,OAAA,GAGI,CAAC,CAAC,EACN;EACA,MAAM;IAAEC,QAAA,GAAWjB,KAAA,IAASA,KAAA;IAAOkB,WAAA,GAAe,GAAEH,OAAA,CAAQG,WAAY;EAAM,CAAE,GAAGF,OAAA;EAEnF,MAAMG,eAAA,gBAAkBvB,KAAA,CAAMwB,UAAU,CAAC,CAACpB,KAAA,EAAOqB,GAAA,KAAQ;IACvD,MAAM,CAACC,UAAA,EAAYC,YAAA,CAAa,GAAGxB,wBAAA,CAAyBkB,QAAA,CAASjB,KAAA;IACrE,oBACEJ,KAAA,CAAA4B,aAAA,CAAC3B,KAAA,EAAUyB,UAAA,eAET1B,KAAA,CAAA4B,aAAA,CAACT,OAAA;MAAS,GAAIQ,YAAY;MAAUF,GAAA,EAAKA;;EAG/C;EAEAF,eAAA,CAAgBD,WAAW,GAAGA,WAAA;EAE9B,OAAOC,eAAA;AACT;AAEA;;;;AAIA,OAAO,MAAMM,4BAAA,GAAgCC,oBAAA,KAAkC;EAC7E,GAAG5B,eAAe;EAClBI,OAAA,EAASwB;AACX"}
@@ -1,8 +1,9 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- const tslib_1 = /*#__PURE__*/require("tslib");
7
- tslib_1.__exportStar(require("./components/Field/index"), exports);
5
+ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
+ _exportStar(require("./components/Field/index"), exports);
7
+ //# sourceMappingURL=Field.js.map
8
+
8
9
  //# sourceMappingURL=Field.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../packages/react-components/react-field/src/Field.ts"],"sourcesContent":["export * from './components/Field/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,8BAAAC,OAAA"}
1
+ {"version":3,"sources":["../lib/Field.js"],"sourcesContent":["export * from \"./components/Field/index\";\n//# sourceMappingURL=Field.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}
@@ -1,17 +1,21 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "Field", {
6
+ enumerable: true,
7
+ get: ()=>Field
5
8
  });
6
- exports.Field = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const renderField_1 = /*#__PURE__*/require("./renderField");
9
- const useField_1 = /*#__PURE__*/require("./useField");
10
- const useFieldStyles_1 = /*#__PURE__*/require("./useFieldStyles");
11
- exports.Field = /*#__PURE__*/React.forwardRef((props, ref) => {
12
- const state = useField_1.useField_unstable(props, ref);
13
- useFieldStyles_1.useFieldStyles_unstable(state);
14
- return renderField_1.renderField_unstable(state);
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _renderField = require("./renderField");
12
+ const _useField = require("./useField");
13
+ const _useFieldStyles = require("./useFieldStyles");
14
+ const Field = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
15
+ const state = (0, _useField.useField_unstable)(props, ref);
16
+ (0, _useFieldStyles.useFieldStyles_unstable)(state);
17
+ return (0, _renderField.renderField_unstable)(state);
15
18
  });
16
- exports.Field.displayName = 'Field';
19
+ Field.displayName = "Field"; //# sourceMappingURL=Field.js.map
20
+
17
21
  //# sourceMappingURL=Field.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","renderField_1","useField_1","useFieldStyles_1","exports","Field","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","renderField_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-field/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';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nField.displayName = 'Field';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAGA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,UAAA,gBAAAF,OAAA;AACA,MAAAG,gBAAA,gBAAAH,OAAA;AAEaI,OAAA,CAAAC,KAAK,gBAAoCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGP,UAAA,CAAAQ,iBAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC3CL,gBAAA,CAAAQ,uBAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOR,aAAA,CAAAW,oBAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,OAAA,CAAAC,KAAK,CAACQ,WAAW,GAAG,OAAO"}
1
+ {"version":3,"sources":["../../../lib/components/Field/Field.js"],"sourcesContent":["import * as React from \"react\";\nimport { renderField_unstable } from \"./renderField\";\nimport { useField_unstable } from \"./useField\";\nimport { useFieldStyles_unstable } from \"./useFieldStyles\";\nexport const Field = /*#__PURE__*/React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref);\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\nField.displayName = \"Field\";\n//# sourceMappingURL=Field.js.map"],"names":["Field","React","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","renderField_unstable","displayName"],"mappings":";;;;+BAIaA;;aAAAA;;;6DAJU;6BACc;0BACH;gCACM;AACjC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,OAAOG,IAAAA,iCAAoB,EAACH;AAC9B;AACAL,MAAMS,WAAW,GAAG,SACpB,iCAAiC"}
@@ -1,6 +1,9 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
5
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
6
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
7
+ //# sourceMappingURL=Field.types.js.map
8
+
6
9
  //# sourceMappingURL=Field.types.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-field/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 Field's child element.\n */\nexport type FieldChildProps = 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>`), as well\n * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they\n * accept FieldChildProps and spread them on the appropriate element.\n *\n * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.\n */\n children?: React.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => 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' | 'validationState'>>;\n"],"mappings":""}
1
+ {"version":3,"sources":["../../../lib/components/Field/Field.types.js"],"sourcesContent":["import * as React from \"react\";\n//# sourceMappingURL=Field.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,uCAAuC"}
@@ -1,12 +1,13 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
5
4
  });
6
- const tslib_1 = /*#__PURE__*/require("tslib");
7
- tslib_1.__exportStar(require("./Field.types"), exports);
8
- tslib_1.__exportStar(require("./Field"), exports);
9
- tslib_1.__exportStar(require("./renderField"), exports);
10
- tslib_1.__exportStar(require("./useField"), exports);
11
- tslib_1.__exportStar(require("./useFieldStyles"), exports);
5
+ const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
6
+ _exportStar(require("./Field.types"), exports);
7
+ _exportStar(require("./Field"), exports);
8
+ _exportStar(require("./renderField"), exports);
9
+ _exportStar(require("./useField"), exports);
10
+ _exportStar(require("./useFieldStyles"), exports);
11
+ //# sourceMappingURL=index.js.map
12
+
12
13
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/index.ts"],"sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,aAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA"}
1
+ {"version":3,"sources":["../../../lib/components/Field/index.js"],"sourcesContent":["export * from \"./Field.types\";\nexport * from \"./Field\";\nexport * from \"./renderField\";\nexport * from \"./useField\";\nexport * from \"./useFieldStyles\";\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
@@ -1,30 +1,17 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "renderField_unstable", {
6
+ enumerable: true,
7
+ get: ()=>renderField_unstable
5
8
  });
6
- exports.renderField_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
- /**
10
- * Render the final JSX of Field
11
- */
12
- const renderField_unstable = state => {
13
- const {
14
- slots,
15
- slotProps
16
- } = react_utilities_1.getSlots(state);
17
- return React.createElement(slots.root, {
18
- ...slotProps.root
19
- }, slots.label && React.createElement(slots.label, {
20
- ...slotProps.label
21
- }), slotProps.root.children, slots.validationMessage && React.createElement(slots.validationMessage, {
22
- ...slotProps.validationMessage
23
- }, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
24
- ...slotProps.validationMessageIcon
25
- }), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
26
- ...slotProps.hint
27
- }));
28
- };
29
- exports.renderField_unstable = renderField_unstable;
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactUtilities = require("@fluentui/react-utilities");
12
+ const renderField_unstable = (state)=>{
13
+ const { slots , slotProps } = (0, _reactUtilities.getSlots)(state);
14
+ return /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/ _react.createElement(slots.label, slotProps.label), slotProps.root.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));
15
+ }; //# sourceMappingURL=renderField.js.map
16
+
30
17
  //# sourceMappingURL=renderField.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_utilities_1","renderField_unstable","state","slots","slotProps","getSlots","createElement","root","label","children","validationMessage","validationMessageIcon","hint","exports"],"sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState) => {\n const { slots, slotProps } = getSlots<FieldSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {slotProps.root.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 );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAaH,KAAK,CAAC;EAExD,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnDJ,SAAS,CAACG,IAAI,CAACE,QAAQ,EACvBN,KAAK,CAACO,iBAAiB,IACtBZ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,GACrDP,KAAK,CAACQ,qBAAqB,IAAIb,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EAAI,EACnGP,SAAS,CAACM,iBAAiB,CAACD,QAAQ,CAExC,EACAN,KAAK,CAACS,IAAI,IAAId,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,EAAI,CACtC;AAEjB,CAAC;AAhBYC,OAAA,CAAAZ,oBAAoB,GAAAA,oBAAA"}
1
+ {"version":3,"sources":["../../../lib/components/Field/renderField.js"],"sourcesContent":["import * as React from \"react\";\nimport { getSlots } from \"@fluentui/react-utilities\";\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = state => {\n const {\n slots,\n slotProps\n } = getSlots(state);\n return /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), slotProps.root.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));\n};\n//# sourceMappingURL=renderField.js.map"],"names":["renderField_unstable","state","slots","slotProps","getSlots","React","createElement","root","label","children","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,uBAAuBC,CAAAA,QAAS;IAC3C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAEL,MAAMM,KAAK,IAAI,WAAW,GAAEH,OAAMC,aAAa,CAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK,GAAGL,UAAUI,IAAI,CAACE,QAAQ,EAAEP,MAAMQ,iBAAiB,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMQ,iBAAiB,EAAEP,UAAUO,iBAAiB,EAAER,MAAMS,qBAAqB,IAAI,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMS,qBAAqB,EAAER,UAAUQ,qBAAqB,GAAGR,UAAUO,iBAAiB,CAACD,QAAQ,GAAGP,MAAMU,IAAI,IAAI,WAAW,GAAEP,OAAMC,aAAa,CAACJ,MAAMU,IAAI,EAAET,UAAUS,IAAI;AAC/gB,GACA,uCAAuC"}
@@ -1,113 +1,105 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useField_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useField_unstable
5
8
  });
6
- exports.useField_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
8
- const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
9
- const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
10
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _reactIcons = require("@fluentui/react-icons");
12
+ const _reactLabel = require("@fluentui/react-label");
13
+ const _reactUtilities = require("@fluentui/react-utilities");
14
+ var _controlProps, _arialabelledby, // Assign the child a generated ID if doesn't already have an ID
15
+ _controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
11
16
  const validationMessageIcons = {
12
- error: /*#__PURE__*/React.createElement(react_icons_1.ErrorCircle12Filled, null),
13
- warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
14
- success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null),
15
- none: undefined
17
+ error: /*#__PURE__*/ _react.createElement(_reactIcons.ErrorCircle12Filled, null),
18
+ warning: /*#__PURE__*/ _react.createElement(_reactIcons.Warning12Filled, null),
19
+ success: /*#__PURE__*/ _react.createElement(_reactIcons.CheckmarkCircle12Filled, null),
20
+ none: undefined
16
21
  };
17
- /**
18
- * Create the state required to render Field.
19
- *
20
- * The returned state can be modified with hooks such as useFieldStyles_unstable,
21
- * before being passed to renderField_unstable.
22
- *
23
- * @param props - Props passed to this field
24
- * @param ref - Ref to the root
25
- */
26
- const useField_unstable = (props, ref) => {
27
- var _a, _b, _c, _d;
28
- const {
29
- children,
30
- orientation = 'vertical',
31
- required,
32
- validationState = props.validationMessage ? 'error' : 'none',
33
- size
34
- } = props;
35
- const baseId = react_utilities_1.useId('field-');
36
- const root = react_utilities_1.getNativeElementProps('div', {
37
- ...props,
38
- ref
39
- }, /*excludedPropNames:*/['children']);
40
- const label = react_utilities_1.resolveShorthand(props.label, {
41
- defaultProps: {
42
- id: baseId + '__label',
43
- required,
44
- size
45
- // htmlFor is handled below
22
+ const useField_unstable = (props, ref)=>{
23
+ const { children , orientation ="vertical" , required , validationState =props.validationMessage ? "error" : "none" , size } = props;
24
+ const baseId = (0, _reactUtilities.useId)("field-");
25
+ const root = (0, _reactUtilities.getNativeElementProps)("div", {
26
+ ...props,
27
+ ref
28
+ }, /*excludedPropNames:*/ [
29
+ "children"
30
+ ]);
31
+ const label = (0, _reactUtilities.resolveShorthand)(props.label, {
32
+ defaultProps: {
33
+ id: baseId + "__label",
34
+ required,
35
+ size
36
+ }
37
+ });
38
+ const validationMessage = (0, _reactUtilities.resolveShorthand)(props.validationMessage, {
39
+ defaultProps: {
40
+ id: baseId + "__validationMessage",
41
+ role: validationState === "error" ? "alert" : undefined
42
+ }
43
+ });
44
+ const hint = (0, _reactUtilities.resolveShorthand)(props.hint, {
45
+ defaultProps: {
46
+ id: baseId + "__hint"
47
+ }
48
+ });
49
+ const defaultIcon = validationMessageIcons[validationState];
50
+ const validationMessageIcon = (0, _reactUtilities.resolveShorthand)(props.validationMessageIcon, {
51
+ required: !!defaultIcon,
52
+ defaultProps: {
53
+ children: defaultIcon
54
+ }
55
+ });
56
+ const controlProps = /*#__PURE__*/ /*#__PURE__*/ _react.isValidElement(children) ? {
57
+ ...children.props
58
+ } : {};
59
+ if (label) {
60
+ (_controlProps = controlProps)[_arialabelledby = "aria-labelledby"] ?? (_controlProps[_arialabelledby] = label.id);
61
+ if (!label.htmlFor) {
62
+ (_controlProps1 = controlProps).id ?? (_controlProps1.id = baseId + "__control");
63
+ label.htmlFor = controlProps.id;
64
+ }
46
65
  }
47
- });
48
-
49
- const validationMessage = react_utilities_1.resolveShorthand(props.validationMessage, {
50
- defaultProps: {
51
- id: baseId + '__validationMessage',
52
- role: validationState === 'error' ? 'alert' : undefined
66
+ if (validationMessage || hint) {
67
+ // The control is described by the validation message, or hint, or both
68
+ // We also preserve and append any aria-describedby supplied by the user
69
+ // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
70
+ controlProps["aria-describedby"] = [
71
+ validationMessage?.id,
72
+ hint?.id,
73
+ controlProps["aria-describedby"]
74
+ ].filter(Boolean).join(" ");
53
75
  }
54
- });
55
- const hint = react_utilities_1.resolveShorthand(props.hint, {
56
- defaultProps: {
57
- id: baseId + '__hint'
76
+ if (validationState === "error") {
77
+ (_controlProps2 = controlProps)[_ariainvalid = "aria-invalid"] ?? (_controlProps2[_ariainvalid] = true);
58
78
  }
59
- });
60
- const defaultIcon = validationMessageIcons[validationState];
61
- const validationMessageIcon = react_utilities_1.resolveShorthand(props.validationMessageIcon, {
62
- required: !!defaultIcon,
63
- defaultProps: {
64
- children: defaultIcon
79
+ if (required) {
80
+ (_controlProps3 = controlProps)[_ariarequired = "aria-required"] ?? (_controlProps3[_ariarequired] = true);
65
81
  }
66
- });
67
- const controlProps = React.isValidElement(children) ? {
68
- ...children.props
69
- } : {};
70
- if (label) {
71
- (_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
72
- if (!label.htmlFor) {
73
- // Assign the child a generated ID if doesn't already have an ID
74
- (_b = controlProps.id) !== null && _b !== void 0 ? _b : controlProps.id = baseId + '__control';
75
- label.htmlFor = controlProps.id;
82
+ if (/*#__PURE__*/ _react.isValidElement(children)) {
83
+ root.children = /*#__PURE__*/ _react.cloneElement(children, controlProps);
84
+ } else if (typeof children === "function") {
85
+ root.children = children(controlProps);
76
86
  }
77
- }
78
- if (validationMessage || hint) {
79
- // The control is described by the validation message, or hint, or both
80
- // We also preserve and append any aria-describedby supplied by the user
81
- // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
82
- controlProps['aria-describedby'] = [validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id, controlProps['aria-describedby']].filter(Boolean).join(' ');
83
- }
84
- if (validationState === 'error') {
85
- (_c = controlProps['aria-invalid']) !== null && _c !== void 0 ? _c : controlProps['aria-invalid'] = true;
86
- }
87
- if (required) {
88
- (_d = controlProps['aria-required']) !== null && _d !== void 0 ? _d : controlProps['aria-required'] = true;
89
- }
90
- if (React.isValidElement(children)) {
91
- root.children = React.cloneElement(children, controlProps);
92
- } else if (typeof children === 'function') {
93
- root.children = children(controlProps);
94
- }
95
- return {
96
- orientation,
97
- validationState,
98
- components: {
99
- root: 'div',
100
- label: react_label_1.Label,
101
- validationMessage: 'div',
102
- validationMessageIcon: 'span',
103
- hint: 'div'
104
- },
105
- root,
106
- label,
107
- validationMessageIcon,
108
- validationMessage,
109
- hint
110
- };
111
- };
112
- exports.useField_unstable = useField_unstable;
87
+ return {
88
+ orientation,
89
+ validationState,
90
+ components: {
91
+ root: "div",
92
+ label: _reactLabel.Label,
93
+ validationMessage: "div",
94
+ validationMessageIcon: "span",
95
+ hint: "div"
96
+ },
97
+ root,
98
+ label,
99
+ validationMessageIcon,
100
+ validationMessage,
101
+ hint
102
+ };
103
+ }; //# sourceMappingURL=useField.js.map
104
+
113
105
  //# sourceMappingURL=useField.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","require","react_icons_1","react_label_1","react_utilities_1","validationMessageIcons","error","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","root","getNativeElementProps","label","resolveShorthand","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","_a","htmlFor","_b","filter","Boolean","join","_c","_d","cloneElement","components","Label","exports"],"sources":["../../../../../../../../../packages/react-components/react-field/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 { FieldChildProps, 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,\n validationState = props.validationMessage ? 'error' : 'none',\n size,\n } = props;\n\n const baseId = useId('field-');\n\n const root = getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']);\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + '__label',\n required,\n size,\n // htmlFor is handled below\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 const controlProps: FieldChildProps = React.isValidElement(children) ? { ...children.props } : {};\n\n if (label) {\n controlProps['aria-labelledby'] ??= label.id;\n\n if (!label.htmlFor) {\n // Assign the child a generated ID if doesn't already have an ID\n controlProps.id ??= baseId + '__control';\n label.htmlFor = controlProps.id;\n }\n }\n\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps['aria-describedby'] = [validationMessage?.id, hint?.id, controlProps['aria-describedby']]\n .filter(Boolean)\n .join(' ');\n }\n\n if (validationState === 'error') {\n controlProps['aria-invalid'] ??= true;\n }\n\n if (required) {\n controlProps['aria-required'] ??= true;\n }\n\n if (React.isValidElement(children)) {\n root.children = React.cloneElement(children, controlProps);\n } else if (typeof children === 'function') {\n root.children = children(controlProps);\n }\n\n return {\n orientation,\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":"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"}
1
+ {"version":3,"sources":["../../../lib/components/Field/useField.js"],"sourcesContent":["var _controlProps, _arialabelledby,\n // Assign the child a generated ID if doesn't already have an ID\n _controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;\nimport * 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\";\nconst validationMessageIcons = {\n error: /*#__PURE__*/React.createElement(ErrorCircle12Filled, null),\n warning: /*#__PURE__*/React.createElement(Warning12Filled, null),\n success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null),\n none: undefined\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, ref) => {\n const {\n children,\n orientation = \"vertical\",\n required,\n validationState = props.validationMessage ? \"error\" : \"none\",\n size\n } = props;\n const baseId = useId(\"field-\");\n const root = getNativeElementProps(\"div\", {\n ...props,\n ref\n }, /*excludedPropNames:*/[\"children\"]);\n const label = resolveShorthand(props.label, {\n defaultProps: {\n id: baseId + \"__label\",\n required,\n size\n }\n });\n const validationMessage = resolveShorthand(props.validationMessage, {\n defaultProps: {\n id: baseId + \"__validationMessage\",\n role: validationState === \"error\" ? \"alert\" : undefined\n }\n });\n const hint = resolveShorthand(props.hint, {\n defaultProps: {\n id: baseId + \"__hint\"\n }\n });\n const defaultIcon = validationMessageIcons[validationState];\n const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {\n required: !!defaultIcon,\n defaultProps: {\n children: defaultIcon\n }\n });\n const controlProps = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(children) ? {\n ...children.props\n } : {};\n if (label) {\n (_controlProps = controlProps)[_arialabelledby = \"aria-labelledby\"] ?? (_controlProps[_arialabelledby] = label.id);\n if (!label.htmlFor) {\n (_controlProps1 = controlProps).id ?? (_controlProps1.id = baseId + \"__control\");\n label.htmlFor = controlProps.id;\n }\n }\n if (validationMessage || hint) {\n // The control is described by the validation message, or hint, or both\n // We also preserve and append any aria-describedby supplied by the user\n // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n controlProps[\"aria-describedby\"] = [validationMessage?.id, hint?.id, controlProps[\"aria-describedby\"]].filter(Boolean).join(\" \");\n }\n if (validationState === \"error\") {\n (_controlProps2 = controlProps)[_ariainvalid = \"aria-invalid\"] ?? (_controlProps2[_ariainvalid] = true);\n }\n if (required) {\n (_controlProps3 = controlProps)[_ariarequired = \"aria-required\"] ?? (_controlProps3[_ariarequired] = true);\n }\n if ( /*#__PURE__*/React.isValidElement(children)) {\n root.children = /*#__PURE__*/React.cloneElement(children, controlProps);\n } else if (typeof children === \"function\") {\n root.children = children(controlProps);\n }\n return {\n orientation,\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//# sourceMappingURL=useField.js.map"],"names":["useField_unstable","_controlProps","_arialabelledby","_controlProps1","_controlProps2","_ariainvalid","_controlProps3","_ariarequired","validationMessageIcons","error","React","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","root","getNativeElementProps","label","resolveShorthand","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","htmlFor","filter","Boolean","join","cloneElement","components","Label"],"mappings":"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"}