@fluentui/react-field 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230227-0424.1

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

@@ -1,105 +1,113 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useField_unstable", {
-    enumerable: true,
-    get: ()=>useField_unstable
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactIcons = require("@fluentui/react-icons");
-const _reactLabel = require("@fluentui/react-label");
-const _reactUtilities = require("@fluentui/react-utilities");
-var _controlProps, _arialabelledby, // Assign the child a generated ID if doesn't already have an ID
-_controlProps1, _controlProps2, _ariainvalid, _controlProps3, _ariarequired;
+exports.useField_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 const validationMessageIcons = {
-    error: /*#__PURE__*/ _react.createElement(_reactIcons.ErrorCircle12Filled, null),
-    warning: /*#__PURE__*/ _react.createElement(_reactIcons.Warning12Filled, null),
-    success: /*#__PURE__*/ _react.createElement(_reactIcons.CheckmarkCircle12Filled, null),
-    none: undefined
+  error: /*#__PURE__*/React.createElement(react_icons_1.ErrorCircle12Filled, null),
+  warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
+  success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null),
+  none: undefined
 };
-const useField_unstable = (props, ref)=>{
-    const { children , orientation ='vertical' , required , validationState =props.validationMessage ? 'error' : 'none' , size  } = props;
-    const baseId = (0, _reactUtilities.useId)('field-');
-    const root = (0, _reactUtilities.getNativeElementProps)('div', {
-        ...props,
-        ref
-    }, /*excludedPropNames:*/ [
-        'children'
-    ]);
-    const label = (0, _reactUtilities.resolveShorthand)(props.label, {
-        defaultProps: {
-            id: baseId + '__label',
-            required,
-            size
-        }
-    });
-    const validationMessage = (0, _reactUtilities.resolveShorthand)(props.validationMessage, {
-        defaultProps: {
-            id: baseId + '__validationMessage',
-            role: validationState === 'error' ? 'alert' : undefined
-        }
-    });
-    const hint = (0, _reactUtilities.resolveShorthand)(props.hint, {
-        defaultProps: {
-            id: baseId + '__hint'
-        }
-    });
-    const defaultIcon = validationMessageIcons[validationState];
-    const validationMessageIcon = (0, _reactUtilities.resolveShorthand)(props.validationMessageIcon, {
-        required: !!defaultIcon,
-        defaultProps: {
-            children: defaultIcon
-        }
-    });
-    const controlProps = /*#__PURE__*/ /*#__PURE__*/ _react.isValidElement(children) ? {
-        ...children.props
-    } : {};
-    if (label) {
-        (_controlProps = controlProps)[_arialabelledby = 'aria-labelledby'] ?? (_controlProps[_arialabelledby] = label.id);
-        if (!label.htmlFor) {
-            (_controlProps1 = controlProps).id ?? (_controlProps1.id = baseId + '__control');
-            label.htmlFor = controlProps.id;
-        }
+/**
+ * Create the state required to render Field.
+ *
+ * The returned state can be modified with hooks such as useFieldStyles_unstable,
+ * before being passed to renderField_unstable.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the root
+ */
+const useField_unstable = (props, ref) => {
+  var _a, _b, _c, _d;
+  const {
+    children,
+    orientation = 'vertical',
+    required,
+    validationState = props.validationMessage ? 'error' : 'none',
+    size
+  } = props;
+  const baseId = react_utilities_1.useId('field-');
+  const root = react_utilities_1.getNativeElementProps('div', {
+    ...props,
+    ref
+  }, /*excludedPropNames:*/['children']);
+  const label = react_utilities_1.resolveShorthand(props.label, {
+    defaultProps: {
+      id: baseId + '__label',
+      required,
+      size
+      // htmlFor is handled below
     }
-    if (validationMessage || hint) {
-        // The control is described by the validation message, or hint, or both
-        // We also preserve and append any aria-describedby supplied by the user
-        // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
-        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(' ');
+  });
+
+  const validationMessage = react_utilities_1.resolveShorthand(props.validationMessage, {
+    defaultProps: {
+      id: baseId + '__validationMessage',
+      role: validationState === 'error' ? 'alert' : undefined
     }
-    if (validationState === 'error') {
-        (_controlProps2 = controlProps)[_ariainvalid = 'aria-invalid'] ?? (_controlProps2[_ariainvalid] = true);
+  });
+  const hint = react_utilities_1.resolveShorthand(props.hint, {
+    defaultProps: {
+      id: baseId + '__hint'
     }
-    if (required) {
-        (_controlProps3 = controlProps)[_ariarequired = 'aria-required'] ?? (_controlProps3[_ariarequired] = true);
+  });
+  const defaultIcon = validationMessageIcons[validationState];
+  const validationMessageIcon = react_utilities_1.resolveShorthand(props.validationMessageIcon, {
+    required: !!defaultIcon,
+    defaultProps: {
+      children: defaultIcon
     }
-    if (/*#__PURE__*/ _react.isValidElement(children)) {
-        root.children = /*#__PURE__*/ _react.cloneElement(children, controlProps);
-    } else if (typeof children === 'function') {
-        root.children = children(controlProps);
+  });
+  const controlProps = React.isValidElement(children) ? {
+    ...children.props
+  } : {};
+  if (label) {
+    (_a = controlProps['aria-labelledby']) !== null && _a !== void 0 ? _a : controlProps['aria-labelledby'] = label.id;
+    if (!label.htmlFor) {
+      // Assign the child a generated ID if doesn't already have an ID
+      (_b = controlProps.id) !== null && _b !== void 0 ? _b : controlProps.id = baseId + '__control';
+      label.htmlFor = controlProps.id;
     }
-    return {
-        orientation,
-        validationState,
-        components: {
-            root: 'div',
-            label: _reactLabel.Label,
-            validationMessage: 'div',
-            validationMessageIcon: 'span',
-            hint: 'div'
-        },
-        root,
-        label,
-        validationMessageIcon,
-        validationMessage,
-        hint
-    };
-}; //# sourceMappingURL=useField.js.map
-
+  }
+  if (validationMessage || hint) {
+    // The control is described by the validation message, or hint, or both
+    // We also preserve and append any aria-describedby supplied by the user
+    // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
+    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(' ');
+  }
+  if (validationState === 'error') {
+    (_c = controlProps['aria-invalid']) !== null && _c !== void 0 ? _c : controlProps['aria-invalid'] = true;
+  }
+  if (required) {
+    (_d = controlProps['aria-required']) !== null && _d !== void 0 ? _d : controlProps['aria-required'] = true;
+  }
+  if (React.isValidElement(children)) {
+    root.children = React.cloneElement(children, controlProps);
+  } else if (typeof children === 'function') {
+    root.children = children(controlProps);
+  }
+  return {
+    orientation,
+    validationState,
+    components: {
+      root: 'div',
+      label: react_label_1.Label,
+      validationMessage: 'div',
+      validationMessageIcon: 'span',
+      hint: 'div'
+    },
+    root,
+    label,
+    validationMessageIcon,
+    validationMessage,
+    hint
+  };
+};
+exports.useField_unstable = useField_unstable;
 //# sourceMappingURL=useField.js.map

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

@@ -1 +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 === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : 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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"}
+{"version":3,"mappings":"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","names":["validationMessageIcons","error","React","react_icons_1","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","react_utilities_1","root","label","defaultProps","id","role","hint","defaultIcon","validationMessageIcon","controlProps","isValidElement","htmlFor","filter","Boolean","join","cloneElement","components","react_label_1","exports"],"sourceRoot":"","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"]}

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

@@ -1,154 +1,113 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    fieldClassNames: ()=>fieldClassNames,
-    useFieldStyles_unstable: ()=>useFieldStyles_unstable
+  value: true
 });
-const _react = require("@griffel/react");
-const fieldClassNames = {
-    root: `fui-Field`,
-    label: `fui-Field__label`,
-    validationMessage: `fui-Field__validationMessage`,
-    validationMessageIcon: `fui-Field__validationMessageIcon`,
-    hint: `fui-Field__hint`
+exports.useFieldStyles_unstable = exports.fieldClassNames = void 0;
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+exports.fieldClassNames = {
+  root: `fui-Field`,
+  label: `fui-Field__label`,
+  validationMessage: `fui-Field__validationMessage`,
+  validationMessageIcon: `fui-Field__validationMessageIcon`,
+  hint: `fui-Field__hint`
 };
 // Size of the icon in the validation message
 const iconSize = '12px';
 /**
  * Styles for the root slot
- */ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    base: {
-        mc9l5x: "f13qh94s"
-    },
-    horizontal: {
-        Budl1dq: "f2wwaib",
-        wkccdc: "f1645dqt"
-    },
-    horizontalNoLabel: {
-        uwmqm3: [
-            "f15jqgz8",
-            "fggqkej"
-        ],
-        Budl1dq: "f1c2z91y"
-    }
+ */
+const useRootStyles = /*#__PURE__*/react_1.__styles({
+  base: {
+    mc9l5x: "f13qh94s"
+  },
+  horizontal: {
+    Budl1dq: "f2wwaib",
+    wkccdc: "f1645dqt"
+  },
+  horizontalNoLabel: {
+    uwmqm3: ["f15jqgz8", "fggqkej"],
+    Budl1dq: "f1c2z91y"
+  }
 }, {
-    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;}"
-    ]
+  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;}"]
 });
-const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    base: {
-        z8tnut: "fclwglc",
-        Byoj8tv: "fywfov9"
-    },
-    large: {
-        z8tnut: "f1sl3k7w",
-        Byoj8tv: "f1brlhvm"
-    },
-    vertical: {
-        jrapky: "fyacil5"
-    },
-    verticalLarge: {
-        jrapky: "f8l5zjj"
-    },
-    horizontal: {
-        t21cq0: [
-            "fkujibs",
-            "f199hnxi"
-        ],
-        Ijaq50: "f16hsg94",
-        nk6f5a: "f1nzqi2z"
-    }
+const useLabelStyles = /*#__PURE__*/react_1.__styles({
+  base: {
+    z8tnut: "fclwglc",
+    Byoj8tv: "fywfov9"
+  },
+  large: {
+    z8tnut: "f1sl3k7w",
+    Byoj8tv: "f1brlhvm"
+  },
+  vertical: {
+    jrapky: "fyacil5"
+  },
+  verticalLarge: {
+    jrapky: "f8l5zjj"
+  },
+  horizontal: {
+    t21cq0: ["fkujibs", "f199hnxi"],
+    Ijaq50: "f16hsg94",
+    nk6f5a: "f1nzqi2z"
+  }
 }, {
-    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;}"
-    ]
+  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;}"]
 });
-const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react["__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);}"
-]);
-const useSecondaryTextStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    error: {
-        sj55zd: "f1hcrxcs"
-    },
-    withIcon: {
-        uwmqm3: [
-            "frawy03",
-            "fg4c52"
-        ]
-    }
+const useSecondaryTextBaseClassName = /*#__PURE__*/react_1.__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);}"]);
+const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
+  error: {
+    sj55zd: "f1hcrxcs"
+  },
+  withIcon: {
+    uwmqm3: ["frawy03", "fg4c52"]
+  }
 }, {
-    d: [
-        ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
-        ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}",
-        ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"
-    ]
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
 });
-const useValidationMessageIconBaseClassName = /*#__PURE__*/ (0, _react["__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;}"
-]);
-const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    error: {
-        sj55zd: "f1hcrxcs"
-    },
-    warning: {
-        sj55zd: "f1k5f75o"
-    },
-    success: {
-        sj55zd: "ffmvakt"
-    }
+const useValidationMessageIconBaseClassName = /*#__PURE__*/react_1.__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;}"]);
+const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
+  error: {
+    sj55zd: "f1hcrxcs"
+  },
+  warning: {
+    sj55zd: "f1k5f75o"
+  },
+  success: {
+    sj55zd: "ffmvakt"
+  }
 }, {
-    d: [
-        ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
-        ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}",
-        ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"
-    ]
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
 });
-const useFieldStyles_unstable = (state)=>{
-    const { validationState  } = state;
-    const horizontal = state.orientation === 'horizontal';
-    const rootStyles = useRootStyles();
-    state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
-    const labelStyles = useLabelStyles();
-    if (state.label) {
-        state.label.className = (0, _react.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);
-    }
-    const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
-    const validationMessageIconStyles = useValidationMessageIconStyles();
-    if (state.validationMessageIcon) {
-        state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
-    }
-    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
-    const secondaryTextStyles = useSecondaryTextStyles();
-    if (state.validationMessage) {
-        state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
-    }
-    if (state.hint) {
-        state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
-    }
-}; //# sourceMappingURL=useFieldStyles.js.map
-
+/**
+ * Apply styling to the Field slots based on the state
+ */
+const useFieldStyles_unstable = state => {
+  const {
+    validationState
+  } = state;
+  const horizontal = state.orientation === 'horizontal';
+  const rootStyles = useRootStyles();
+  state.root.className = react_1.mergeClasses(exports.fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
+  const labelStyles = useLabelStyles();
+  if (state.label) {
+    state.label.className = react_1.mergeClasses(exports.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);
+  }
+  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
+  const validationMessageIconStyles = useValidationMessageIconStyles();
+  if (state.validationMessageIcon) {
+    state.validationMessageIcon.className = react_1.mergeClasses(exports.fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+  }
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
+  const secondaryTextStyles = useSecondaryTextStyles();
+  if (state.validationMessage) {
+    state.validationMessage.className = react_1.mergeClasses(exports.fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
+  }
+  if (state.hint) {
+    state.hint.className = react_1.mergeClasses(exports.fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
+  }
+};
+exports.useFieldStyles_unstable = useFieldStyles_unstable;
 //# sourceMappingURL=useFieldStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Field/useFieldStyles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\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// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f13qh94s\"\n  },\n  horizontal: {\n    Budl1dq: \"f2wwaib\",\n    wkccdc: \"f1645dqt\"\n  },\n  horizontalNoLabel: {\n    uwmqm3: [\"f15jqgz8\", \"fggqkej\"],\n    Budl1dq: \"f1c2z91y\"\n  }\n}, {\n  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;}\"]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    z8tnut: \"fclwglc\",\n    Byoj8tv: \"fywfov9\"\n  },\n  large: {\n    z8tnut: \"f1sl3k7w\",\n    Byoj8tv: \"f1brlhvm\"\n  },\n  vertical: {\n    jrapky: \"fyacil5\"\n  },\n  verticalLarge: {\n    jrapky: \"f8l5zjj\"\n  },\n  horizontal: {\n    t21cq0: [\"fkujibs\", \"f199hnxi\"],\n    Ijaq50: \"f16hsg94\",\n    nk6f5a: \"f1nzqi2z\"\n  }\n}, {\n  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;}\"]\n});\nconst 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);}\"]);\nconst useSecondaryTextStyles = /*#__PURE__*/__styles({\n  error: {\n    sj55zd: \"f1hcrxcs\"\n  },\n  withIcon: {\n    uwmqm3: [\"frawy03\", \"fg4c52\"]\n  }\n}, {\n  d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}\", \".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}\"]\n});\nconst 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;}\"]);\nconst useValidationMessageIconStyles = /*#__PURE__*/__styles({\n  error: {\n    sj55zd: \"f1hcrxcs\"\n  },\n  warning: {\n    sj55zd: \"f1k5f75o\"\n  },\n  success: {\n    sj55zd: \"ffmvakt\"\n  }\n}, {\n  d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}\", \".ffmvakt{color:var(--colorPaletteGreenForeground1);}\"]\n});\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = state => {\n  const {\n    validationState\n  } = state;\n  const horizontal = state.orientation === 'horizontal';\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    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);\n  }\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n  }\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n  }\n  if (state.hint) {\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n};\n//# sourceMappingURL=useFieldStyles.js.map"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","orientation","rootStyles","className","mergeClasses","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
+{"version":3,"mappings":"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","names":["exports","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","react_1","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","validationState","horizontal","orientation","rootStyles","className","base","horizontalNoLabel","labelStyles","vertical","size","large","verticalLarge","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles","error","withIcon"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/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"]}

package/lib-commonjs/index.js

@@ -1,24 +1,52 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    Field: ()=>_field.Field,
-    fieldClassNames: ()=>_field.fieldClassNames,
-    renderField_unstable: ()=>_field.renderField_unstable,
-    useFieldStyles_unstable: ()=>_field.useFieldStyles_unstable,
-    useField_unstable: ()=>_field.useField_unstable,
-    getDeprecatedFieldClassNames: ()=>_makeDeprecatedField.getDeprecatedFieldClassNames,
-    makeDeprecatedField: ()=>_makeDeprecatedField.makeDeprecatedField
-});
-const _field = require("./Field");
-const _makeDeprecatedField = require("./util/makeDeprecatedField");
- //# sourceMappingURL=index.js.map
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeDeprecatedField = exports.getDeprecatedFieldClassNames = exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.fieldClassNames = exports.Field = void 0;
+var Field_1 = /*#__PURE__*/require("./Field");
+Object.defineProperty(exports, "Field", {
+  enumerable: true,
+  get: function () {
+    return Field_1.Field;
+  }
+});
+Object.defineProperty(exports, "fieldClassNames", {
+  enumerable: true,
+  get: function () {
+    return Field_1.fieldClassNames;
+  }
+});
+Object.defineProperty(exports, "renderField_unstable", {
+  enumerable: true,
+  get: function () {
+    return Field_1.renderField_unstable;
+  }
+});
+Object.defineProperty(exports, "useFieldStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return Field_1.useFieldStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useField_unstable", {
+  enumerable: true,
+  get: function () {
+    return Field_1.useField_unstable;
+  }
+});
+// eslint-disable-next-line deprecation/deprecation
+var makeDeprecatedField_1 = /*#__PURE__*/require("./util/makeDeprecatedField");
+Object.defineProperty(exports, "getDeprecatedFieldClassNames", {
+  enumerable: true,
+  get: function () {
+    return makeDeprecatedField_1.getDeprecatedFieldClassNames;
+  }
+});
+Object.defineProperty(exports, "makeDeprecatedField", {
+  enumerable: true,
+  get: function () {
+    return makeDeprecatedField_1.makeDeprecatedField;
+  }
+});
 //# sourceMappingURL=index.js.map