@fluentui/react-input 9.2.4 → 9.2.6

package/lib-amd/components/Input/useInputStyles.js

@@ -0,0 +1,171 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useInputStyles_unstable = exports.inputClassNames = void 0;
+    exports.inputClassNames = {
+        root: 'fui-Input',
+        input: 'fui-Input__input',
+        contentBefore: 'fui-Input__contentBefore',
+        contentAfter: 'fui-Input__contentAfter',
+    };
+    // TODO(sharing) use theme values once available
+    var contentSizes = {
+        // TODO: This 400 style is not in the typography styles.
+        // May need a design change
+        400: {
+            fontSize: react_theme_1.tokens.fontSizeBase400,
+            lineHeight: react_theme_1.tokens.lineHeightBase400,
+        },
+    };
+    // TODO(sharing) should these be shared somewhere?
+    var fieldHeights = {
+        small: '24px',
+        medium: '32px',
+        large: '40px',
+    };
+    var useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', alignItems: 'center', flexWrap: 'nowrap' }, react_1.shorthands.gap(react_theme_1.tokens.spacingHorizontalXXS)), { fontFamily: react_theme_1.tokens.fontFamilyBase }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { position: 'relative', boxSizing: 'border-box' }),
+        interactive: {
+            // This is all for the bottom focus border.
+            // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
+            '::after': tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', content: '""', position: 'absolute', left: '-1px', bottom: '-1px', right: '-1px', 
+                // Maintaining the correct corner radius:
+                // Use the whole border-radius as the height and only put radii on the bottom corners.
+                // (Otherwise the radius would be automatically reduced to fit available space.)
+                // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
+                height: "max(2px, " + react_theme_1.tokens.borderRadiusMedium + ")", borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium, borderBottomRightRadius: react_theme_1.tokens.borderRadiusMedium }, react_1.shorthands.borderBottom('2px', 'solid', react_theme_1.tokens.colorCompoundBrandStroke)), { clipPath: 'inset(calc(100% - 2px) 0 0 0)', 
+                // Animation for focus OUT
+                transform: 'scaleX(0)', transitionProperty: 'transform', transitionDuration: react_theme_1.tokens.durationUltraFast, transitionDelay: react_theme_1.tokens.curveAccelerateMid, '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                } }),
+            ':focus-within::after': {
+                // Animation for focus IN
+                transform: 'scaleX(1)',
+                transitionProperty: 'transform',
+                transitionDuration: react_theme_1.tokens.durationNormal,
+                transitionDelay: react_theme_1.tokens.curveDecelerateMid,
+                '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                },
+            },
+            ':focus-within:active::after': {
+                // This is if the user clicks the field again while it's already focused
+                borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
+            },
+            ':focus-within': {
+                outlineWidth: '2px',
+                outlineStyle: 'solid',
+                outlineColor: 'transparent',
+            },
+        },
+        small: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.small }, react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalSNudge)), react_theme_1.typographyStyles.caption1),
+        medium: tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.medium }, react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalMNudge)), react_theme_1.typographyStyles.body1),
+        large: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ minHeight: fieldHeights.large }, react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalM)), contentSizes[400]), react_1.shorthands.gap(react_theme_1.tokens.spacingHorizontalSNudge)),
+        outline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+        outlineInteractive: {
+            ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }),
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':active,:focus-within': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }),
+        },
+        underline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderRadius(0)), react_1.shorthands.borderBottom('1px', 'solid', react_theme_1.tokens.colorNeutralStrokeAccessible)),
+        underlineInteractive: {
+            ':hover': {
+                borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
+            },
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':active,:focus-within': {
+                borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
+            },
+            '::after': react_1.shorthands.borderRadius(0), // remove rounded corners from focus underline
+        },
+        filled: tslib_1.__assign({}, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)),
+        filledInteractive: {
+            // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+            ':hover,:focus-within': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
+        },
+        invalid: {
+            ':not(:focus-within),:hover:not(:focus-within)': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
+        },
+        'filled-darker': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
+        },
+        'filled-lighter': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+        },
+        'filled-darker-shadow': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
+            boxShadow: react_theme_1.tokens.shadow2,
+        },
+        'filled-lighter-shadow': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+            boxShadow: react_theme_1.tokens.shadow2,
+        },
+        disabled: tslib_1.__assign(tslib_1.__assign({ cursor: 'not-allowed', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
+    });
+    var useInputElementStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', flexGrow: 1, minWidth: 0 }, react_1.shorthands.borderStyle('none')), react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalXXS)), { color: react_theme_1.tokens.colorNeutralForeground1, 
+            // Use literal "transparent" (not from the theme) to always let the color from the root show through
+            backgroundColor: 'transparent', '::placeholder': {
+                color: react_theme_1.tokens.colorNeutralForeground4,
+                opacity: 1, // browser style override
+            }, outlineStyle: 'none' }),
+        small: tslib_1.__assign({}, react_theme_1.typographyStyles.caption1),
+        medium: tslib_1.__assign({}, react_theme_1.typographyStyles.body1),
+        large: tslib_1.__assign(tslib_1.__assign({}, contentSizes[400]), react_1.shorthands.padding('0', react_theme_1.tokens.spacingHorizontalSNudge)),
+        disabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            cursor: 'not-allowed',
+            '::placeholder': {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+        },
+    });
+    var useContentStyles = react_1.makeStyles({
+        base: {
+            boxSizing: 'border-box',
+            color: react_theme_1.tokens.colorNeutralForeground3,
+            // special case styling for icons (most common case) to ensure they're centered vertically
+            '> svg': { display: 'block' },
+        },
+        disabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+        },
+        // Ensure resizable icons show up with the proper font size
+        small: {
+            '> svg': { fontSize: '16px' },
+        },
+        medium: {
+            '> svg': { fontSize: '20px' },
+        },
+        large: {
+            '> svg': { fontSize: '24px' },
+        },
+    });
+    /**
+     * Apply styling to the Input slots based on the state
+     */
+    var useInputStyles_unstable = function (state) {
+        var size = state.size, appearance = state.appearance;
+        var disabled = state.input.disabled;
+        var invalid = "" + state.input['aria-invalid'] === 'true';
+        var filled = appearance.startsWith('filled');
+        var rootStyles = useRootStyles();
+        var inputStyles = useInputElementStyles();
+        var contentStyles = useContentStyles();
+        state.root.className = react_1.mergeClasses(exports.inputClassNames.root, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+        state.input.className = react_1.mergeClasses(exports.inputClassNames.input, inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
+        var contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];
+        if (state.contentBefore) {
+            state.contentBefore.className = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([exports.inputClassNames.contentBefore], contentClasses), [state.contentBefore.className]));
+        }
+        if (state.contentAfter) {
+            state.contentAfter.className = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([exports.inputClassNames.contentAfter], contentClasses), [state.contentAfter.className]));
+        }
+        return state;
+    };
+    exports.useInputStyles_unstable = useInputStyles_unstable;
+});
+//# sourceMappingURL=useInputStyles.js.map

package/lib-amd/components/Input/useInputStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInputStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst contentSizes = {\n  // TODO: This 400 style is not in the typography styles.\n  // May need a design change\n  400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    ...shorthands.gap(tokens.spacingHorizontalXXS),\n    fontFamily: tokens.fontFamilyBase,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n    position: 'relative',\n    boxSizing: 'border-box',\n  },\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  small: {\n    minHeight: fieldHeights.small,\n    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: fieldHeights.medium,\n    ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...shorthands.padding('0', tokens.spacingHorizontalM),\n    ...contentSizes[400],\n    ...shorthands.gap(tokens.spacingHorizontalSNudge),\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderRadius(0), // corners look strange if rounded\n    ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n  },\n  underlineInteractive: {\n    ':hover': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n    '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n  },\n  filled: {\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      // also handles pressed border color (:active)\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow2,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputElementStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0, // required to make the input shrink to fit the wrapper\n    ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n    ...shorthands.padding('0', tokens.spacingHorizontalXXS),\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1, // browser style override\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n  small: {\n    // This is set on root but doesn't inherit\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    ...typographyStyles.body1,\n  },\n  large: {\n    ...contentSizes[400],\n    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useContentStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    '> svg': { display: 'block' },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  // Ensure resizable icons show up with the proper font size\n  small: {\n    '> svg': { fontSize: '16px' },\n  },\n  medium: {\n    '> svg': { fontSize: '20px' },\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n  const { size, appearance } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    rootStyles.base,\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-amd/components/InputField/InputField.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "react", "@fluentui/react-field", "../../Input"], function (require, exports, React, react_field_1, Input_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InputField = exports.inputFieldClassNames = void 0;
+    exports.inputFieldClassNames = react_field_1.getFieldClassNames('InputField');
+    exports.InputField = React.forwardRef(function (props, ref) {
+        var state = react_field_1.useField_unstable(props, ref, { component: Input_1.Input, classNames: exports.inputFieldClassNames });
+        react_field_1.useFieldStyles_unstable(state);
+        return react_field_1.renderField_unstable(state);
+    });
+    exports.InputField.displayName = 'InputField';
+});
+//# sourceMappingURL=InputField.js.map

package/lib-amd/components/InputField/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/InputField/InputField.tsx"],"names":[],"mappings":";;;;IAaa,QAAA,oBAAoB,GAAG,gCAAkB,CAAC,YAAY,CAAC,CAAC;IAExD,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,+BAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,aAAK,EAAE,UAAU,EAAE,4BAAoB,EAAE,CAAC,CAAC;QACpG,qCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input } from '../../Input';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"]}

package/lib-amd/components/InputField/index.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./InputField"], function (require, exports, tslib_1, InputField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(InputField_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/InputField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/InputField/index.ts"],"names":[],"mappings":";;;IAAA,4CAA6B","sourcesContent":["export * from './InputField';\n"]}

package/lib-amd/index.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "./Input", "./InputField"], function (require, exports, Input_1, InputField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.inputFieldClassNames = exports.InputField_unstable = exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.Input = void 0;
+    Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+    Object.defineProperty(exports, "inputClassNames", { enumerable: true, get: function () { return Input_1.inputClassNames; } });
+    Object.defineProperty(exports, "renderInput_unstable", { enumerable: true, get: function () { return Input_1.renderInput_unstable; } });
+    Object.defineProperty(exports, "useInputStyles_unstable", { enumerable: true, get: function () { return Input_1.useInputStyles_unstable; } });
+    Object.defineProperty(exports, "useInput_unstable", { enumerable: true, get: function () { return Input_1.useInput_unstable; } });
+    Object.defineProperty(exports, "InputField_unstable", { enumerable: true, get: function () { return InputField_1.InputField; } });
+    Object.defineProperty(exports, "inputFieldClassNames", { enumerable: true, get: function () { return InputField_1.inputFieldClassNames; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-input/src/index.ts"],"names":[],"mappings":";;;;IAAS,8FAAA,KAAK,OAAA;IAAE,wGAAA,eAAe,OAAA;IAAE,6GAAA,oBAAoB,OAAA;IAAE,gHAAA,uBAAuB,OAAA;IAAE,0GAAA,iBAAiB,OAAA;IAGxF,iHAAA,UAAU,OAAuB;IAAE,kHAAA,oBAAoB,OAAA","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"]}

package/lib-commonjs/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Input.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Input/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/Input.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Input/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/InputField.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/InputField/index"), exports);
+//# sourceMappingURL=InputField.js.map

package/lib-commonjs/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-input/src/InputField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/InputField/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/Input.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/Input.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EAEA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Input/renderInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/renderInput.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,IAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFF,EAGG,KAAK,CAAC,YAAN,IAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAHzB,CADF;AAOD,CATM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/renderInput.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,aAAN,IAAuB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CAD1B,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFF,EAGG,KAAK,CAAC,YAAN,IAAsB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAnB,CAHzB,CADF;AAOD,CATM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\n  const { slots, slotProps } = getSlots<InputSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}\n      <slots.input {...slotProps.input} />\n      {slots.contentAfter && <slots.contentAfter {...slotProps.contentAfter} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Input/useInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/useInput.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAArB,CAA1B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAA9B,CATiB;IAiBxB,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAjBU;IAkBxB,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAlBS;IAmBxB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAA7B;EAnBkB,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsB,CAAvB;EAMA,OAAO,KAAP;AACD,CA3DM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const { size = 'medium', appearance = 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/useInput.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAQA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,IAAI,GAAG,QAAT;IAAmB,UAAU,GAAG,SAAhC;IAA2C;EAA3C,IAAwD,KAA9D;;EAEA,IACE,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,KACC,UAAU,KAAK,sBAAf,IAAyC,UAAU,KAAK,uBADzD,CADF,EAGE;IACA;IACA,OAAO,CAAC,KAAR,CACE,iHACE,UAFJ;EAID;;EAED,MAAM,CAAC,KAAD,EAAQ,QAAR,IAAoB,iBAAA,CAAA,oBAAA,CAAqB;IAC7C,KAAK,EAAE,KAAK,CAAC,KADgC;IAE7C,YAAY,EAAE,KAAK,CAAC,YAFyB;IAG7C,YAAY,EAAE;EAH+B,CAArB,CAA1B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,MAAD,EAAS,UAAT,EAAqB,OAArB,EAA8B,cAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAe;IACxB,IADwB;IAExB,UAFwB;IAGxB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,aAAa,EAAE,MAHL;MAIV,YAAY,EAAE;IAJJ,CAHY;IASxB,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,MADM;QAEZ,GAFY;QAGZ,GAAG,WAAW,CAAC;MAHH;IAFqB,CAA9B,CATiB;IAiBxB,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,YAAvB,CAjBU;IAkBxB,aAAa,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,aAAvB,CAlBS;IAmBxB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE,WAAW,CAAC;IAFO,CAA7B;EAnBkB,CAA1B;EAyBA,KAAK,CAAC,KAAN,CAAY,KAAZ,GAAoB,KAApB;EACA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAH,CAAU,KAA3B;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,KAAK,EAAE;IAAT,CAAP,CAAR;IACA,QAAQ,CAAC,QAAD,CAAR;EACD,CAJsB,CAAvB;EAMA,OAAO,KAAP;AACD,CA3DM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { InputProps, InputState } from './Input.types';\n\n/**\n * Create the state required to render Input.\n *\n * The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n *\n * @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n */\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n  const { size = 'medium', appearance = 'outline', onChange } = props;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n        ' future.',\n    );\n  }\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: '',\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'text',\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    contentAfter: resolveShorthand(props.contentAfter),\n    contentBefore: resolveShorthand(props.contentBefore),\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.input.value = value;\n  state.input.onChange = useEventCallback(ev => {\n    const newValue = ev.target.value;\n    onChange?.(ev, { value: newValue });\n    setValue(newValue);\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Input/useInputStyles.js

@@ -196,22 +196,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
   "disabled": {
     "Bceei9c": "fdrzuqr",
     "De3pzq": "f1c21dwh",
-    "B4j52fo": "f5ogflp",
-    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
-    "Bn0qgzm": "f1f09k3d",
-    "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
     "g2u3we": "f1jj8ep1",
     "h3c5rm": ["f15xbau", "fy0fskl"],
     "B9xav0g": "f4ikngz",
     "zhjwy3": ["fy0fskl", "f15xbau"],
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"],
     "Bjwas2f": "fg455y9",
     "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
     "Bxeuatn": "f1cwzwz",

package/lib-commonjs/components/Input/useInputStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst contentSizes = {\n  // TODO: This 400 style is not in the typography styles.\n  // May need a design change\n  400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    ...shorthands.gap(tokens.spacingHorizontalXXS),\n    fontFamily: tokens.fontFamilyBase,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n    position: 'relative',\n    boxSizing: 'border-box',\n  },\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  small: {\n    minHeight: fieldHeights.small,\n    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: fieldHeights.medium,\n    ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...shorthands.padding('0', tokens.spacingHorizontalM),\n    ...contentSizes[400],\n    ...shorthands.gap(tokens.spacingHorizontalSNudge),\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderRadius(0), // corners look strange if rounded\n    ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n  },\n  underlineInteractive: {\n    ':hover': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n    '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n  },\n  filled: {\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      // also handles pressed border color (:active)\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow2,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputElementStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0, // required to make the input shrink to fit the wrapper\n    ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n    ...shorthands.padding('0', tokens.spacingHorizontalXXS),\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1, // browser style override\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n  small: {\n    // This is set on root but doesn't inherit\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    ...typographyStyles.body1,\n  },\n  large: {\n    ...contentSizes[400],\n    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useContentStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    '> svg': { display: 'block' },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  // Ensure resizable icons show up with the proper font size\n  small: {\n    '> svg': { fontSize: '16px' },\n  },\n  medium: {\n    '> svg': { fontSize: '20px' },\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n  const { size, appearance } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    rootStyles.base,\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { InputSlots, InputState } from './Input.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n  root: 'fui-Input',\n  input: 'fui-Input__input',\n  contentBefore: 'fui-Input__contentBefore',\n  contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) use theme values once available\nconst contentSizes = {\n  // TODO: This 400 style is not in the typography styles.\n  // May need a design change\n  400: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexWrap: 'nowrap',\n    ...shorthands.gap(tokens.spacingHorizontalXXS),\n    fontFamily: tokens.fontFamilyBase,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium), // used for all but underline\n    position: 'relative',\n    boxSizing: 'border-box',\n  },\n  interactive: {\n    // This is all for the bottom focus border.\n    // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n\n      // Maintaining the correct corner radius:\n      // Use the whole border-radius as the height and only put radii on the bottom corners.\n      // (Otherwise the radius would be automatically reduced to fit available space.)\n      // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n      height: `max(2px, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n\n      // Flat 2px border:\n      // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n      // (This could be done without trimming using `background: linear-gradient(...)`, but using\n      // borderBottom makes it easier for people to override the color if needed.)\n      ...shorthands.borderBottom('2px', 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n      // Animation for focus OUT\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      // Animation for focus IN\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      // This is if the user clicks the field again while it's already focused\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  small: {\n    minHeight: fieldHeights.small,\n    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    minHeight: fieldHeights.medium,\n    ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n    ...typographyStyles.body1,\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...shorthands.padding('0', tokens.spacingHorizontalM),\n    ...contentSizes[400],\n    ...shorthands.gap(tokens.spacingHorizontalSNudge),\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    ':hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderRadius(0), // corners look strange if rounded\n    ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n  },\n  underlineInteractive: {\n    ':hover': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n    '::after': shorthands.borderRadius(0), // remove rounded corners from focus underline\n  },\n  filled: {\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      // also handles pressed border color (:active)\n      ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n    },\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\n  'filled-lighter-shadow': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxShadow: tokens.shadow2,\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n});\n\nconst useInputElementStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    flexGrow: 1,\n    minWidth: 0, // required to make the input shrink to fit the wrapper\n    ...shorthands.borderStyle('none'), // input itself never has a border (this is handled by inputWrapper)\n    ...shorthands.padding('0', tokens.spacingHorizontalXXS),\n    color: tokens.colorNeutralForeground1,\n    // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n    backgroundColor: 'transparent',\n\n    '::placeholder': {\n      color: tokens.colorNeutralForeground4,\n      opacity: 1, // browser style override\n    },\n\n    outlineStyle: 'none', // disable default browser outline\n  },\n  small: {\n    // This is set on root but doesn't inherit\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    ...typographyStyles.body1,\n  },\n  large: {\n    ...contentSizes[400],\n    ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    backgroundColor: tokens.colorTransparentBackground,\n    cursor: 'not-allowed',\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useContentStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n    // special case styling for icons (most common case) to ensure they're centered vertically\n    '> svg': { display: 'block' },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n  // Ensure resizable icons show up with the proper font size\n  small: {\n    '> svg': { fontSize: '16px' },\n  },\n  medium: {\n    '> svg': { fontSize: '20px' },\n  },\n  large: {\n    '> svg': { fontSize: '24px' },\n  },\n});\n\n/**\n * Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n  const { size, appearance } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const inputStyles = useInputElementStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    inputClassNames.root,\n    rootStyles.base,\n    rootStyles[size],\n    rootStyles[appearance],\n    !disabled && rootStyles.interactive,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    filled && rootStyles.filled,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.input.className = mergeClasses(\n    inputClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [contentStyles.base, disabled && contentStyles.disabled, contentStyles[size]];\n  if (state.contentBefore) {\n    state.contentBefore.className = mergeClasses(\n      inputClassNames.contentBefore,\n      ...contentClasses,\n      state.contentBefore.className,\n    );\n  }\n  if (state.contentAfter) {\n    state.contentAfter.className = mergeClasses(\n      inputClassNames.contentAfter,\n      ...contentClasses,\n      state.contentAfter.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/InputField/InputField.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputField = exports.inputFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
+
+const Input_1 = /*#__PURE__*/require("../../Input");
+
+exports.inputFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('InputField');
+exports.InputField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = react_field_1.useField_unstable(props, ref, {
+    component: Input_1.Input,
+    classNames: exports.inputFieldClassNames
+  });
+  react_field_1.useFieldStyles_unstable(state);
+  return react_field_1.renderField_unstable(state);
+});
+exports.InputField.displayName = 'InputField';
+//# sourceMappingURL=InputField.js.map

package/lib-commonjs/components/InputField/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-input/src/components/InputField/InputField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,oBAAA,gBAAuB,aAAA,CAAA,kBAAA,CAAmB,YAAnB,CAAvB;AAEA,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,OAAA,CAAA,KAAb;IAAoB,UAAU,EAAE,OAAA,CAAA;EAAhC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJ+D,CAAnD;AAMb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Input } from '../../Input';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./InputField"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-input/src/components/InputField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './InputField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.Input = void 0;
+exports.inputFieldClassNames = exports.InputField_unstable = exports.useInput_unstable = exports.useInputStyles_unstable = exports.renderInput_unstable = exports.inputClassNames = exports.Input = void 0;
 
 var Input_1 = /*#__PURE__*/require("./Input");
 
@@ -37,4 +37,19 @@ Object.defineProperty(exports, "useInput_unstable", {
     return Input_1.useInput_unstable;
   }
 });
+
+var InputField_1 = /*#__PURE__*/require("./InputField");
+
+Object.defineProperty(exports, "InputField_unstable", {
+  enumerable: true,
+  get: function () {
+    return InputField_1.InputField;
+  }
+});
+Object.defineProperty(exports, "inputFieldClassNames", {
+  enumerable: true,
+  get: function () {
+    return InputField_1.inputFieldClassNames;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-input/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;;AAGhF,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AAAmC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA","sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n\nexport { InputField as InputField_unstable, inputFieldClassNames } from './InputField';\nexport type { InputFieldProps as InputFieldProps_unstable } from './InputField';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.2.4",
+  "version": "9.2.6",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -20,21 +20,21 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-input/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.17",
-    "@fluentui/react-text": "^9.1.5",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
+    "@fluentui/react-text": "^9.1.7",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-theme": "^9.1.1",
-    "@fluentui/react-utilities": "^9.2.0",
+    "@fluentui/react-field": "9.0.0-alpha.9",
+    "@fluentui/react-theme": "^9.1.2",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },
@@ -52,9 +52,10 @@
   },
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }