@fluentui/react-input 9.6.7 → 9.7.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.7.0)
+
+Thu, 17 Jul 2025 13:45:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.6.7..@fluentui/react-input_v9.7.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.6.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.6.6..@fluentui/react-input_v9.6.7)
 
 ### Patches

package/lib/components/Input/useInputStyles.styles.raw.js

@@ -0,0 +1,330 @@
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+export const inputClassNames = {
+    root: 'fui-Input',
+    input: 'fui-Input__input',
+    contentBefore: 'fui-Input__contentBefore',
+    contentAfter: 'fui-Input__contentAfter'
+};
+// TODO(sharing) should these be shared somewhere?
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
+// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
+const horizontalPadding = {
+    root: {
+        small: tokens.spacingHorizontalSNudge,
+        medium: tokens.spacingHorizontalMNudge,
+        large: tokens.spacingHorizontalM
+    },
+    input: {
+        small: tokens.spacingHorizontalXXS,
+        medium: tokens.spacingHorizontalXXS,
+        large: tokens.spacingHorizontalSNudge
+    },
+    combined: {
+        small: tokens.spacingHorizontalS,
+        medium: tokens.spacingHorizontalM,
+        large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
+    }
+};
+const useRootClassName = makeResetStyles({
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    gap: tokens.spacingHorizontalXXS,
+    borderRadius: tokens.borderRadiusMedium,
+    position: 'relative',
+    boxSizing: 'border-box',
+    verticalAlign: 'middle',
+    // size: medium (default)
+    minHeight: fieldHeights.medium,
+    ...typographyStyles.body1,
+    // appearance: outline (default)
+    backgroundColor: tokens.colorNeutralBackground1,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    borderBottomColor: tokens.colorNeutralStrokeAccessible,
+    // 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': {
+        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, ${tokens.borderRadiusMedium})`,
+        borderBottomLeftRadius: tokens.borderRadiusMedium,
+        borderBottomRightRadius: tokens.borderRadiusMedium,
+        // Flat 2px border:
+        // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
+        // (This could be done without trimming using `background: linear-gradient(...)`, but using
+        // borderBottom makes it easier for people to override the color if needed.)
+        borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,
+        clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+        // Animation for focus OUT
+        transform: 'scaleX(0)',
+        transitionProperty: 'transform',
+        transitionDuration: tokens.durationUltraFast,
+        transitionDelay: 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: tokens.durationNormal,
+        transitionDelay: 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: tokens.colorCompoundBrandStrokePressed
+    },
+    ':focus-within': {
+        outline: '2px solid transparent'
+    }
+});
+const useRootStyles = makeStyles({
+    small: {
+        minHeight: fieldHeights.small,
+        ...typographyStyles.caption1
+    },
+    medium: {
+    },
+    large: {
+        minHeight: fieldHeights.large,
+        ...typographyStyles.body2,
+        gap: tokens.spacingHorizontalSNudge
+    },
+    outline: {
+    },
+    outlineInteractive: {
+        ':hover': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
+            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    underline: {
+        backgroundColor: tokens.colorTransparentBackground,
+        borderRadius: '0',
+        // border is specified in rootBaseStyles, but we only want a bottom border here
+        borderTopStyle: 'none',
+        borderRightStyle: 'none',
+        borderLeftStyle: 'none',
+        // Make the focus underline (::after) match the width of the bottom border
+        '::after': {
+            left: 0,
+            right: 0
+        }
+    },
+    underlineInteractive: {
+        ':hover': {
+            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
+        },
+        '::after': {
+            // remove rounded corners from focus underline
+            borderRadius: '0'
+        }
+    },
+    filled: {
+        ...shorthands.borderColor(tokens.colorTransparentStroke)
+    },
+    filledInteractive: {
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':hover,:focus-within': {
+            // also handles pressed border color (:active)
+            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)
+        }
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)
+        }
+    },
+    'filled-darker': {
+        backgroundColor: tokens.colorNeutralBackground3
+    },
+    'filled-lighter': {
+        backgroundColor: tokens.colorNeutralBackground1
+    },
+    // This shadow appearance is deprecated and will be removed in a future release.
+    'filled-darker-shadow': {
+        backgroundColor: tokens.colorNeutralBackground3,
+        boxShadow: tokens.shadow2
+    },
+    // This shadow appearance is deprecated and will be removed in a future release.
+    'filled-lighter-shadow': {
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: tokens.shadow2
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorTransparentBackground,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ...shorthands.borderColor('GrayText')
+        },
+        // remove the focus border
+        '::after': {
+            content: 'unset'
+        },
+        // remove the focus outline
+        ':focus-within': {
+            outlineStyle: 'none'
+        }
+    },
+    smallWithContentBefore: {
+        paddingLeft: horizontalPadding.root.small
+    },
+    smallWithContentAfter: {
+        paddingRight: horizontalPadding.root.small
+    },
+    mediumWithContentBefore: {
+        paddingLeft: horizontalPadding.root.medium
+    },
+    mediumWithContentAfter: {
+        paddingRight: horizontalPadding.root.medium
+    },
+    largeWithContentBefore: {
+        paddingLeft: horizontalPadding.root.large
+    },
+    largeWithContentAfter: {
+        paddingRight: horizontalPadding.root.large
+    }
+});
+const useInputClassName = makeResetStyles({
+    alignSelf: 'stretch',
+    boxSizing: 'border-box',
+    flexGrow: 1,
+    minWidth: 0,
+    borderStyle: 'none',
+    padding: `0 ${horizontalPadding.combined.medium}`,
+    color: tokens.colorNeutralForeground1,
+    // Use literal "transparent" (not from the theme) to always let the color from the root show through
+    backgroundColor: 'transparent',
+    '::placeholder': {
+        color: tokens.colorNeutralForeground4,
+        opacity: 1
+    },
+    outlineStyle: 'none',
+    // Inherit typography styles from root
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight: 'inherit'
+});
+const useInputElementStyles = makeStyles({
+    small: {
+        paddingLeft: horizontalPadding.combined.small,
+        paddingRight: horizontalPadding.combined.small
+    },
+    medium: {
+    },
+    large: {
+        paddingLeft: horizontalPadding.combined.large,
+        paddingRight: horizontalPadding.combined.large
+    },
+    smallWithContentBefore: {
+        paddingLeft: horizontalPadding.input.small
+    },
+    smallWithContentAfter: {
+        paddingRight: horizontalPadding.input.small
+    },
+    mediumWithContentBefore: {
+        paddingLeft: horizontalPadding.input.medium
+    },
+    mediumWithContentAfter: {
+        paddingRight: horizontalPadding.input.medium
+    },
+    largeWithContentBefore: {
+        paddingLeft: horizontalPadding.input.large
+    },
+    largeWithContentAfter: {
+        paddingRight: horizontalPadding.input.large
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        backgroundColor: tokens.colorTransparentBackground,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useContentClassName = makeResetStyles({
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground3,
+    display: 'flex',
+    // special case styling for icons (most common case) to ensure they're centered vertically
+    // size: medium (default)
+    '> svg': {
+        fontSize: '20px'
+    }
+});
+const useContentStyles = makeStyles({
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    // Ensure resizable icons show up with the proper font size
+    small: {
+        '> svg': {
+            fontSize: '16px'
+        }
+    },
+    medium: {
+    },
+    large: {
+        '> svg': {
+            fontSize: '24px'
+        }
+    }
+});
+/**
+ * Apply styling to the Input slots based on the state
+ */ export const useInputStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, appearance } = state;
+    const disabled = state.input.disabled;
+    const invalid = `${state.input['aria-invalid']}` === 'true';
+    const filled = appearance.startsWith('filled');
+    const rootStyles = useRootStyles();
+    const inputStyles = useInputElementStyles();
+    const contentStyles = useContentStyles();
+    state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !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 = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
+    const contentClasses = [
+        useContentClassName(),
+        disabled && contentStyles.disabled,
+        contentStyles[size]
+    ];
+    if (state.contentBefore) {
+        state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
+    }
+    if (state.contentAfter) {
+        state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
+    }
+    return state;
+};

package/lib/components/Input/useInputStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\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) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n  root: {\n    small: tokens.spacingHorizontalSNudge,\n    medium: tokens.spacingHorizontalMNudge,\n    large: tokens.spacingHorizontalM,\n  },\n  input: {\n    small: tokens.spacingHorizontalXXS,\n    medium: tokens.spacingHorizontalXXS,\n    large: tokens.spacingHorizontalSNudge,\n  },\n  combined: {\n    small: tokens.spacingHorizontalS, // SNudge + XXS\n    medium: tokens.spacingHorizontalM, // MNudge + XXS\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n  },\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  gap: tokens.spacingHorizontalXXS,\n  borderRadius: tokens.borderRadiusMedium, // used for all but underline\n  position: 'relative',\n  boxSizing: 'border-box',\n  verticalAlign: 'middle',\n\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  ...typographyStyles.body1,\n\n  // appearance: outline (default)\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\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    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    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...typographyStyles.body2,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  outline: {\n    // included in rootBaseStyles\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    borderRadius: '0', // corners look strange if rounded\n    // border is specified in rootBaseStyles, but we only want a bottom border here\n    borderTopStyle: 'none',\n    borderRightStyle: 'none',\n    borderLeftStyle: 'none',\n    // Make the focus underline (::after) match the width of the bottom border\n    '::after': {\n      left: 0,\n      right: 0,\n    },\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': {\n      // remove rounded corners from focus underline\n      borderRadius: '0',\n    },\n  },\n  filled: {\n    ...shorthands.borderColor(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  // This shadow appearance is deprecated and will be removed in a future release.\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\n  // This shadow appearance is deprecated and will be removed in a future release.\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    // remove the focus border\n    '::after': {\n      content: 'unset',\n    },\n    // remove the focus outline\n    ':focus-within': {\n      outlineStyle: 'none',\n    },\n  },\n  smallWithContentBefore: {\n    paddingLeft: horizontalPadding.root.small,\n  },\n  smallWithContentAfter: {\n    paddingRight: horizontalPadding.root.small,\n  },\n  mediumWithContentBefore: {\n    paddingLeft: horizontalPadding.root.medium,\n  },\n  mediumWithContentAfter: {\n    paddingRight: horizontalPadding.root.medium,\n  },\n  largeWithContentBefore: {\n    paddingLeft: horizontalPadding.root.large,\n  },\n  largeWithContentAfter: {\n    paddingRight: horizontalPadding.root.large,\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  alignSelf: 'stretch',\n  boxSizing: 'border-box',\n  flexGrow: 1,\n  minWidth: 0, // required to make the input shrink to fit the wrapper\n  borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n  padding: `0 ${horizontalPadding.combined.medium}`,\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  // Inherit typography styles from root\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n  small: {\n    paddingLeft: horizontalPadding.combined.small,\n    paddingRight: horizontalPadding.combined.small,\n  },\n  medium: {\n    // Included in useInputClassName\n  },\n  large: {\n    paddingLeft: horizontalPadding.combined.large,\n    paddingRight: horizontalPadding.combined.large,\n  },\n  smallWithContentBefore: {\n    paddingLeft: horizontalPadding.input.small,\n  },\n  smallWithContentAfter: {\n    paddingRight: horizontalPadding.input.small,\n  },\n  mediumWithContentBefore: {\n    paddingLeft: horizontalPadding.input.medium,\n  },\n  mediumWithContentAfter: {\n    paddingRight: horizontalPadding.input.medium,\n  },\n  largeWithContentBefore: {\n    paddingLeft: horizontalPadding.input.large,\n  },\n  largeWithContentAfter: {\n    paddingRight: horizontalPadding.input.large,\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 useContentClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n  display: 'flex',\n  // special case styling for icons (most common case) to ensure they're centered vertically\n  // size: medium (default)\n  '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\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    // included in useContentClassName\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  'use no memo';\n\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    useRootClassName(),\n    rootStyles[size],\n    state.contentBefore && rootStyles[`${size}WithContentBefore`],\n    state.contentAfter && rootStyles[`${size}WithContentAfter`],\n    rootStyles[appearance],\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    useInputClassName(),\n    inputStyles[size],\n    state.contentBefore && inputStyles[`${size}WithContentBefore`],\n    state.contentAfter && inputStyles[`${size}WithContentAfter`],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), 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"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","display","alignItems","flexWrap","gap","borderRadius","borderRadiusMedium","position","boxSizing","verticalAlign","minHeight","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","body2","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","borderTopStyle","borderRightStyle","borderLeftStyle","underlineInteractive","filled","colorTransparentStroke","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","colorNeutralBackground3","boxShadow","shadow2","disabled","cursor","colorNeutralStrokeDisabled","outlineStyle","smallWithContentBefore","paddingLeft","smallWithContentAfter","paddingRight","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","useInputClassName","alignSelf","flexGrow","minWidth","borderStyle","padding","color","colorNeutralForeground1","colorNeutralForeground4","opacity","fontFamily","fontSize","fontWeight","lineHeight","useInputElementStyles","colorNeutralForegroundDisabled","useContentClassName","colorNeutralForeground3","useContentStyles","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,342 @@
+"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, {
+    inputClassNames: function() {
+        return inputClassNames;
+    },
+    useInputStyles_unstable: function() {
+        return useInputStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const inputClassNames = {
+    root: 'fui-Input',
+    input: 'fui-Input__input',
+    contentBefore: 'fui-Input__contentBefore',
+    contentAfter: 'fui-Input__contentAfter'
+};
+// TODO(sharing) should these be shared somewhere?
+const fieldHeights = {
+    small: '24px',
+    medium: '32px',
+    large: '40px'
+};
+// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
+// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
+const horizontalPadding = {
+    root: {
+        small: _reacttheme.tokens.spacingHorizontalSNudge,
+        medium: _reacttheme.tokens.spacingHorizontalMNudge,
+        large: _reacttheme.tokens.spacingHorizontalM
+    },
+    input: {
+        small: _reacttheme.tokens.spacingHorizontalXXS,
+        medium: _reacttheme.tokens.spacingHorizontalXXS,
+        large: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    combined: {
+        small: _reacttheme.tokens.spacingHorizontalS,
+        medium: _reacttheme.tokens.spacingHorizontalM,
+        large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
+    }
+};
+const useRootClassName = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    gap: _reacttheme.tokens.spacingHorizontalXXS,
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    position: 'relative',
+    boxSizing: 'border-box',
+    verticalAlign: 'middle',
+    // size: medium (default)
+    minHeight: fieldHeights.medium,
+    ..._reacttheme.typographyStyles.body1,
+    // appearance: outline (default)
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+    borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible,
+    // 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': {
+        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, ${_reacttheme.tokens.borderRadiusMedium})`,
+        borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
+        borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
+        // Flat 2px border:
+        // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
+        // (This could be done without trimming using `background: linear-gradient(...)`, but using
+        // borderBottom makes it easier for people to override the color if needed.)
+        borderBottom: `2px solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
+        clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+        // Animation for focus OUT
+        transform: 'scaleX(0)',
+        transitionProperty: 'transform',
+        transitionDuration: _reacttheme.tokens.durationUltraFast,
+        transitionDelay: _reacttheme.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: _reacttheme.tokens.durationNormal,
+        transitionDelay: _reacttheme.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: _reacttheme.tokens.colorCompoundBrandStrokePressed
+    },
+    ':focus-within': {
+        outline: '2px solid transparent'
+    }
+});
+const useRootStyles = (0, _react.makeStyles)({
+    small: {
+        minHeight: fieldHeights.small,
+        ..._reacttheme.typographyStyles.caption1
+    },
+    medium: {},
+    large: {
+        minHeight: fieldHeights.large,
+        ..._reacttheme.typographyStyles.body2,
+        gap: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    outline: {},
+    outlineInteractive: {
+        ':hover': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    underline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        borderRadius: '0',
+        // border is specified in rootBaseStyles, but we only want a bottom border here
+        borderTopStyle: 'none',
+        borderRightStyle: 'none',
+        borderLeftStyle: 'none',
+        // Make the focus underline (::after) match the width of the bottom border
+        '::after': {
+            left: 0,
+            right: 0
+        }
+    },
+    underlineInteractive: {
+        ':hover': {
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        },
+        '::after': {
+            // remove rounded corners from focus underline
+            borderRadius: '0'
+        }
+    },
+    filled: {
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+    },
+    filledInteractive: {
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':hover,:focus-within': {
+            // also handles pressed border color (:active)
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive)
+        }
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+        }
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    },
+    // This shadow appearance is deprecated and will be removed in a future release.
+    'filled-darker-shadow': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
+        boxShadow: _reacttheme.tokens.shadow2
+    },
+    // This shadow appearance is deprecated and will be removed in a future release.
+    'filled-lighter-shadow': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        boxShadow: _reacttheme.tokens.shadow2
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+        '@media (forced-colors: active)': {
+            ..._react.shorthands.borderColor('GrayText')
+        },
+        // remove the focus border
+        '::after': {
+            content: 'unset'
+        },
+        // remove the focus outline
+        ':focus-within': {
+            outlineStyle: 'none'
+        }
+    },
+    smallWithContentBefore: {
+        paddingLeft: horizontalPadding.root.small
+    },
+    smallWithContentAfter: {
+        paddingRight: horizontalPadding.root.small
+    },
+    mediumWithContentBefore: {
+        paddingLeft: horizontalPadding.root.medium
+    },
+    mediumWithContentAfter: {
+        paddingRight: horizontalPadding.root.medium
+    },
+    largeWithContentBefore: {
+        paddingLeft: horizontalPadding.root.large
+    },
+    largeWithContentAfter: {
+        paddingRight: horizontalPadding.root.large
+    }
+});
+const useInputClassName = (0, _react.makeResetStyles)({
+    alignSelf: 'stretch',
+    boxSizing: 'border-box',
+    flexGrow: 1,
+    minWidth: 0,
+    borderStyle: 'none',
+    padding: `0 ${horizontalPadding.combined.medium}`,
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    // Use literal "transparent" (not from the theme) to always let the color from the root show through
+    backgroundColor: 'transparent',
+    '::placeholder': {
+        color: _reacttheme.tokens.colorNeutralForeground4,
+        opacity: 1
+    },
+    outlineStyle: 'none',
+    // Inherit typography styles from root
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight: 'inherit'
+});
+const useInputElementStyles = (0, _react.makeStyles)({
+    small: {
+        paddingLeft: horizontalPadding.combined.small,
+        paddingRight: horizontalPadding.combined.small
+    },
+    medium: {},
+    large: {
+        paddingLeft: horizontalPadding.combined.large,
+        paddingRight: horizontalPadding.combined.large
+    },
+    smallWithContentBefore: {
+        paddingLeft: horizontalPadding.input.small
+    },
+    smallWithContentAfter: {
+        paddingRight: horizontalPadding.input.small
+    },
+    mediumWithContentBefore: {
+        paddingLeft: horizontalPadding.input.medium
+    },
+    mediumWithContentAfter: {
+        paddingRight: horizontalPadding.input.medium
+    },
+    largeWithContentBefore: {
+        paddingLeft: horizontalPadding.input.large
+    },
+    largeWithContentAfter: {
+        paddingRight: horizontalPadding.input.large
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        cursor: 'not-allowed',
+        '::placeholder': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useContentClassName = (0, _react.makeResetStyles)({
+    boxSizing: 'border-box',
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    display: 'flex',
+    // special case styling for icons (most common case) to ensure they're centered vertically
+    // size: medium (default)
+    '> svg': {
+        fontSize: '20px'
+    }
+});
+const useContentStyles = (0, _react.makeStyles)({
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled
+    },
+    // Ensure resizable icons show up with the proper font size
+    small: {
+        '> svg': {
+            fontSize: '16px'
+        }
+    },
+    medium: {},
+    large: {
+        '> svg': {
+            fontSize: '24px'
+        }
+    }
+});
+const useInputStyles_unstable = (state)=>{
+    'use no memo';
+    const { size, appearance } = state;
+    const disabled = state.input.disabled;
+    const invalid = `${state.input['aria-invalid']}` === 'true';
+    const filled = appearance.startsWith('filled');
+    const rootStyles = useRootStyles();
+    const inputStyles = useInputElementStyles();
+    const contentStyles = useContentStyles();
+    state.root.className = (0, _react.mergeClasses)(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !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 = (0, _react.mergeClasses)(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
+    const contentClasses = [
+        useContentClassName(),
+        disabled && contentStyles.disabled,
+        contentStyles[size]
+    ];
+    if (state.contentBefore) {
+        state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
+    }
+    if (state.contentAfter) {
+        state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\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) should these be shared somewhere?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n  root: {\n    small: tokens.spacingHorizontalSNudge,\n    medium: tokens.spacingHorizontalMNudge,\n    large: tokens.spacingHorizontalM,\n  },\n  input: {\n    small: tokens.spacingHorizontalXXS,\n    medium: tokens.spacingHorizontalXXS,\n    large: tokens.spacingHorizontalSNudge,\n  },\n  combined: {\n    small: tokens.spacingHorizontalS, // SNudge + XXS\n    medium: tokens.spacingHorizontalM, // MNudge + XXS\n    large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n  },\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  flexWrap: 'nowrap',\n  gap: tokens.spacingHorizontalXXS,\n  borderRadius: tokens.borderRadiusMedium, // used for all but underline\n  position: 'relative',\n  boxSizing: 'border-box',\n  verticalAlign: 'middle',\n\n  // size: medium (default)\n  minHeight: fieldHeights.medium,\n  ...typographyStyles.body1,\n\n  // appearance: outline (default)\n  backgroundColor: tokens.colorNeutralBackground1,\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\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    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    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    // included in rootBaseStyles\n  },\n  large: {\n    minHeight: fieldHeights.large,\n    ...typographyStyles.body2,\n    gap: tokens.spacingHorizontalSNudge,\n  },\n  outline: {\n    // included in rootBaseStyles\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    borderRadius: '0', // corners look strange if rounded\n    // border is specified in rootBaseStyles, but we only want a bottom border here\n    borderTopStyle: 'none',\n    borderRightStyle: 'none',\n    borderLeftStyle: 'none',\n    // Make the focus underline (::after) match the width of the bottom border\n    '::after': {\n      left: 0,\n      right: 0,\n    },\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': {\n      // remove rounded corners from focus underline\n      borderRadius: '0',\n    },\n  },\n  filled: {\n    ...shorthands.borderColor(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  // This shadow appearance is deprecated and will be removed in a future release.\n  'filled-darker-shadow': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    boxShadow: tokens.shadow2,\n  },\n  // This shadow appearance is deprecated and will be removed in a future release.\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    // remove the focus border\n    '::after': {\n      content: 'unset',\n    },\n    // remove the focus outline\n    ':focus-within': {\n      outlineStyle: 'none',\n    },\n  },\n  smallWithContentBefore: {\n    paddingLeft: horizontalPadding.root.small,\n  },\n  smallWithContentAfter: {\n    paddingRight: horizontalPadding.root.small,\n  },\n  mediumWithContentBefore: {\n    paddingLeft: horizontalPadding.root.medium,\n  },\n  mediumWithContentAfter: {\n    paddingRight: horizontalPadding.root.medium,\n  },\n  largeWithContentBefore: {\n    paddingLeft: horizontalPadding.root.large,\n  },\n  largeWithContentAfter: {\n    paddingRight: horizontalPadding.root.large,\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  alignSelf: 'stretch',\n  boxSizing: 'border-box',\n  flexGrow: 1,\n  minWidth: 0, // required to make the input shrink to fit the wrapper\n  borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n  padding: `0 ${horizontalPadding.combined.medium}`,\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  // Inherit typography styles from root\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n  small: {\n    paddingLeft: horizontalPadding.combined.small,\n    paddingRight: horizontalPadding.combined.small,\n  },\n  medium: {\n    // Included in useInputClassName\n  },\n  large: {\n    paddingLeft: horizontalPadding.combined.large,\n    paddingRight: horizontalPadding.combined.large,\n  },\n  smallWithContentBefore: {\n    paddingLeft: horizontalPadding.input.small,\n  },\n  smallWithContentAfter: {\n    paddingRight: horizontalPadding.input.small,\n  },\n  mediumWithContentBefore: {\n    paddingLeft: horizontalPadding.input.medium,\n  },\n  mediumWithContentAfter: {\n    paddingRight: horizontalPadding.input.medium,\n  },\n  largeWithContentBefore: {\n    paddingLeft: horizontalPadding.input.large,\n  },\n  largeWithContentAfter: {\n    paddingRight: horizontalPadding.input.large,\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 useContentClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n  display: 'flex',\n  // special case styling for icons (most common case) to ensure they're centered vertically\n  // size: medium (default)\n  '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\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    // included in useContentClassName\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  'use no memo';\n\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    useRootClassName(),\n    rootStyles[size],\n    state.contentBefore && rootStyles[`${size}WithContentBefore`],\n    state.contentAfter && rootStyles[`${size}WithContentAfter`],\n    rootStyles[appearance],\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    useInputClassName(),\n    inputStyles[size],\n    state.contentBefore && inputStyles[`${size}WithContentBefore`],\n    state.contentAfter && inputStyles[`${size}WithContentAfter`],\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  const contentClasses = [useContentClassName(), 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"],"names":["inputClassNames","useInputStyles_unstable","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","tokens","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","makeResetStyles","display","alignItems","flexWrap","gap","borderRadius","borderRadiusMedium","position","boxSizing","verticalAlign","minHeight","typographyStyles","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","makeStyles","caption1","body2","outlineInteractive","shorthands","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","borderTopStyle","borderRightStyle","borderLeftStyle","underlineInteractive","filled","colorTransparentStroke","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","colorNeutralBackground3","boxShadow","shadow2","disabled","cursor","colorNeutralStrokeDisabled","outlineStyle","smallWithContentBefore","paddingLeft","smallWithContentAfter","paddingRight","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","useInputClassName","alignSelf","flexGrow","minWidth","borderStyle","padding","color","colorNeutralForeground1","colorNeutralForeground4","opacity","fontFamily","fontSize","fontWeight","lineHeight","useInputElementStyles","colorNeutralForegroundDisabled","useContentClassName","colorNeutralForeground3","useContentStyles","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","mergeClasses","contentClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.6.7",
+  "version": "9.7.0",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,7 +19,7 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.3.7",
+    "@fluentui/react-field": "^9.4.0",
     "@fluentui/react-jsx-runtime": "^9.1.2",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",