@fluentui/react-input 9.2.9 → 9.2.11

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

@@ -1 +1 @@
-{"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) 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    ...typographyStyles.body2,\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    ...typographyStyles.body2,\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,"mappings":"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","names":["mergeClasses","shorthands","tokens","typographyStyles","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","useRootStyles","useInputElementStyles","useContentStyles","useInputStyles_unstable","state","size","appearance","disabled","invalid","filled","startsWith","rootStyles","inputStyles","contentStyles","className","base","interactive","outlineInteractive","underlineInteractive","filledInteractive","contentClasses"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"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) 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    ...typographyStyles.body2,\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    ...typographyStyles.body2,\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/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-input/src/components/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,KAAT,QAAsB,aAAtB;AAIA,OAAO,MAAM,oBAAoB,gBAAG,kBAAkB,CAAC,YAAD,CAA/C;AAEP,OAAO,MAAM,UAAU,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,KAAb;IAAoB,UAAU,EAAE;EAAhC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAJ+D,CAAzD;AAMP,UAAU,CAAC,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/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SACEC,kBAAkB,EAClBC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,uBAAuB;AAE9B,SAASC,KAAK,QAAQ,aAAa;AAInC,OAAO,MAAMC,oBAAoB,gBAAGL,kBAAkB,CAAC,YAAY,CAAC;AAEpE,OAAO,MAAMM,UAAU,gBAAyCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,iBAAiB,CAACK,KAAK,EAAEC,GAAG,EAAE;IAAEE,SAAS,EAAEP,KAAK;IAAEQ,UAAU,EAAEP;EAAoB,CAAE,CAAC;EACnGH,uBAAuB,CAACQ,KAAK,CAAC;EAC9B,OAAOT,oBAAoB,CAACS,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFJ,UAAU,CAACO,WAAW,GAAG,YAAY","names":["React","getFieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","Input","inputFieldClassNames","InputField","forwardRef","props","ref","state","component","classNames","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/InputField/InputField.tsx"],"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-commonjs/Input.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Input/index"), exports);
 //# sourceMappingURL=Input.js.map

package/lib-commonjs/Input.js.map

@@ -1 +1 @@
-{"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/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/Input.ts"],"sourcesContent":["export * from './components/Input/index';\n"]}

package/lib-commonjs/InputField.js

@@ -3,8 +3,6 @@
 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

@@ -1 +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/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/InputField.ts"],"sourcesContent":["export * from './components/InputField/index';\n"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useInput_1 = /*#__PURE__*/require("./useInput");
-
 const renderInput_1 = /*#__PURE__*/require("./renderInput");
-
 const useInputStyles_1 = /*#__PURE__*/require("./useInputStyles");
 /**
  * The Input component allows people to enter and edit text.
  */
-
-
 exports.Input = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useInput_1.useInput_unstable(props, ref);
   useInputStyles_1.useInputStyles_unstable(state);

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

@@ -1 +1 @@
-{"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/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE3CG,wCAAuB,CAACF,KAAK,CAAC;EAC9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useInput_1","useInputStyles_1","renderInput_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/Input.tsx"],"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"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Input"), exports);
-
 tslib_1.__exportStar(require("./Input.types"), exports);
-
 tslib_1.__exportStar(require("./renderInput"), exports);
-
 tslib_1.__exportStar(require("./useInput"), exports);
-
 tslib_1.__exportStar(require("./useInputStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/index.ts"],"sourcesContent":["export * from './Input';\nexport * from './Input.types';\nexport * from './renderInput';\nexport * from './useInput';\nexport * from './useInputStyles';\n"]}

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

@@ -4,26 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderInput_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Input
  */
-
-
 const renderInput_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, slots.contentBefore && React.createElement(slots.contentBefore, { ...slotProps.contentBefore
-  }), React.createElement(slots.input, { ...slotProps.input
-  }), slots.contentAfter && React.createElement(slots.contentAfter, { ...slotProps.contentAfter
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.contentBefore && React.createElement(slots.contentBefore, {
+    ...slotProps.contentBefore
+  }), React.createElement(slots.input, {
+    ...slotProps.input
+  }), slots.contentAfter && React.createElement(slots.contentAfter, {
+    ...slotProps.contentAfter
   }));
 };
-
 exports.renderInput_unstable = renderInput_unstable;
 //# sourceMappingURL=renderInput.js.map

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

@@ -1 +1 @@
-{"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/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EACxD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,aAAa,IAAIF,oBAACH,KAAK,CAACK,aAAa;IAAA,GAAKJ,SAAS,CAACI;EAAa,EAAI,EAC5EF,oBAACH,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EACnCN,KAAK,CAACO,YAAY,IAAIJ,oBAACH,KAAK,CAACO,YAAY;IAAA,GAAKN,SAAS,CAACM;EAAY,EAAI,CAC9D;AAEjB,CAAC;AATYC,4BAAoB","names":["renderInput_unstable","state","slots","slotProps","react_utilities_1","React","root","contentBefore","input","contentAfter","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/renderInput.tsx"],"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"]}

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useInput_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Create the state required to render Input.
@@ -15,20 +14,16 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  * @param props - props from this instance of Input
  * @param ref - reference to `<input>` element of Input
  */
-
-
 const useInput_unstable = (props, ref) => {
   const {
     size = 'medium',
     appearance = 'outline',
     onChange
   } = props;
-
   if (process.env.NODE_ENV !== 'production' && (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {
     // eslint-disable-next-line no-console
     console.error("The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" + ' future.');
   }
-
   const [value, setValue] = react_utilities_1.useControllableState({
     state: props.value,
     defaultState: props.defaultValue,
@@ -73,6 +68,5 @@ const useInput_unstable = (props, ref) => {
   });
   return state;
 };
-
 exports.useInput_unstable = useInput_unstable;
 //# sourceMappingURL=useInput.js.map

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

@@ -1 +1 @@
-{"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/"}
+{"version":3,"mappings":";;;;;;AACA;AAQA;;;;;;;;;AASO,MAAMA,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAAgC,KAAgB;EACnG,MAAM;IAAEC,IAAI,GAAG,QAAQ;IAAEC,UAAU,GAAG,SAAS;IAAEC;EAAQ,CAAE,GAAGJ,KAAK;EAEnE,IACEK,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,KACpCJ,UAAU,KAAK,sBAAsB,IAAIA,UAAU,KAAK,uBAAuB,CAAC,EACjF;IACA;IACAK,OAAO,CAACC,KAAK,CACX,8GAA8G,GAC5G,UAAU,CACb;;EAGH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,sCAAoB,CAAC;IAC7CC,KAAK,EAAEb,KAAK,CAACU,KAAK;IAClBI,YAAY,EAAEd,KAAK,CAACe,YAAY;IAChCC,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,WAAW,GAAGL,2CAAyB,CAAC;IAC5CZ,KAAK;IACLkB,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;GAChE,CAAC;EAEF,MAAMN,KAAK,GAAe;IACxBX,IAAI;IACJC,UAAU;IACViB,UAAU,EAAE;MACVC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE,OAAO;MACdC,aAAa,EAAE,MAAM;MACrBC,YAAY,EAAE;KACf;IACDF,KAAK,EAAEV,kCAAgB,CAACZ,KAAK,CAACsB,KAAK,EAAE;MACnCG,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,IAAI,EAAE,MAAM;QACZ1B,GAAG;QACH,GAAGgB,WAAW,CAACW;;KAElB,CAAC;IACFJ,YAAY,EAAEZ,kCAAgB,CAACZ,KAAK,CAACwB,YAAY,CAAC;IAClDD,aAAa,EAAEX,kCAAgB,CAACZ,KAAK,CAACuB,aAAa,CAAC;IACpDF,IAAI,EAAET,kCAAgB,CAACZ,KAAK,CAACqB,IAAI,EAAE;MACjCI,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAET,WAAW,CAACI;KAC3B;GACF;EAEDR,KAAK,CAACS,KAAK,CAACZ,KAAK,GAAGA,KAAK;EACzBG,KAAK,CAACS,KAAK,CAAClB,QAAQ,GAAGQ,kCAAgB,CAACiB,EAAE,IAAG;IAC3C,MAAMC,QAAQ,GAAGD,EAAE,CAACE,MAAM,CAACrB,KAAK;IAChCN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGyB,EAAE,EAAE;MAAEnB,KAAK,EAAEoB;IAAQ,CAAE,CAAC;IACnCnB,QAAQ,CAACmB,QAAQ,CAAC;EACpB,CAAC,CAAC;EAEF,OAAOjB,KAAK;AACd,CAAC;AA3DYmB,yBAAiB","names":["useInput_unstable","props","ref","size","appearance","onChange","process","env","NODE_ENV","console","error","value","setValue","react_utilities_1","state","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","required","defaultProps","type","primary","ev","newValue","target","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInput.ts"],"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"]}