npm - @fluentui/react-input - Versions diffs - 9.3.5 → 9.3.7 - Mend

@fluentui/react-input 9.3.5 → 9.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.json +37 -1
package/CHANGELOG.md +21 -2
package/lib/components/Input/useInputStyles.js +10 -78
package/lib/components/Input/useInputStyles.js.map +1 -1
package/lib-amd/components/Input/useInputStyles.js +21 -18
package/lib-amd/components/Input/useInputStyles.js.map +1 -1
package/lib-commonjs/components/Input/useInputStyles.js +10 -78
package/lib-commonjs/components/Input/useInputStyles.js.map +1 -1
package/package.json +1 -1

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,43 @@
   "name": "@fluentui/react-input",
   "entries": [
     {
-      "date": "Wed, 15 Feb 2023 23:35:10 GMT",
+      "date": "Wed, 22 Feb 2023 23:04:46 GMT",
+      "tag": "@fluentui/react-input_v9.3.7",
+      "version": "9.3.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-input",
+            "commit": "fbee0f3858ee67d53ee2540531a0cfb6497165cb",
+            "comment": "chore: Clean up Input's interactive styles"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-input",
+            "commit": "29ed7fb57a05a6595835f947193460886e80cfc5",
+            "comment": "fix: Fix the width of Input's focus border with appearance=underline"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Feb 2023 19:18:47 GMT",
+      "tag": "@fluentui/react-input_v9.3.6",
+      "version": "9.3.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "mgodbolt@microsoft.com",
+            "package": "@fluentui/react-input",
+            "commit": "c6f47613e95f8e43ef00792ea673d673881e14fb",
+            "comment": "fixing build issues"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Feb 2023 16:18:01 GMT",
       "tag": "@fluentui/react-input_v9.3.5",
       "version": "9.3.5",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-input
-This log was last generated on Wed, 15 Feb 2023 23:35:10 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Feb 2023 23:04:46 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.3.7)
+Wed, 22 Feb 2023 23:04:46 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.3.6..@fluentui/react-input_v9.3.7)
+### Patches
+- chore: Clean up Input's interactive styles ([PR #26865](https://github.com/microsoft/fluentui/pull/26865) by behowell@microsoft.com)
+- fix: Fix the width of Input's focus border with appearance=underline ([PR #26881](https://github.com/microsoft/fluentui/pull/26881) by behowell@microsoft.com)
+## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.3.6)
+Thu, 16 Feb 2023 19:18:47 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.3.5..@fluentui/react-input_v9.3.6)
+### Patches
+- fixing build issues ([PR #26877](https://github.com/microsoft/fluentui/pull/26877) by mgodbolt@microsoft.com)
 ## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.3.5)
-Wed, 15 Feb 2023 23:35:10 GMT
+Thu, 16 Feb 2023 16:18:01 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.3.4..@fluentui/react-input_v9.3.5)
 ### Patches

package/lib/components/Input/useInputStyles.js CHANGED Viewed

@@ -12,77 +12,7 @@ const fieldHeights = {
   medium: '32px',
   large: '40px'
 };
-const rootBaseStyles = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  flexWrap: 'nowrap',
-  gap: tokens.spacingHorizontalXXS,
-  borderRadius: tokens.borderRadiusMedium,
-  position: 'relative',
-  boxSizing: 'border-box',
-  // size: medium (default)
-  minHeight: fieldHeights.medium,
-  padding: `0 ${tokens.spacingHorizontalMNudge}`,
-  ...typographyStyles.body1,
-  // appearance: outline (default)
-  backgroundColor: tokens.colorNeutralBackground1,
-  border: `1px solid ${tokens.colorNeutralStroke1}`,
-  borderBottomColor: tokens.colorNeutralStrokeAccessible
-};
-const rootInteractiveStyles = {
-  // 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 useRootNonInteractiveClassName = /*#__PURE__*/__resetStyles("rqztyh5", null, [".rqztyh5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}"]);
-const useRootInteractiveClassName = /*#__PURE__*/__resetStyles("r1jtohuq", "rl1z2p5", [".r1jtohuq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1jtohuq::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".rl1z2p5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"]);
+const useRootClassName = /*#__PURE__*/__resetStyles("r1jtohuq", "rl1z2p5", [".r1jtohuq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1jtohuq::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".rl1z2p5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
   small: {
     sshi5w: "f1pha7fy",
@@ -124,7 +54,9 @@ const useRootStyles = /*#__PURE__*/__styles({
     Btl43ni: ["f1ozlkrg", "f10ostut"],
     icvyot: "f1ern45e",
     vrafjx: ["f1n71otn", "f1deefiw"],
-    wvpqe5: ["f1deefiw", "f1n71otn"]
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
+    B1piin3: ["f15yvnhg", "f1n6gb5g"]
   },
   underlineInteractive: {
     oetu4i: "f1l4zc64",
@@ -176,10 +108,12 @@ const useRootStyles = /*#__PURE__*/__styles({
     Bjwas2f: "fg455y9",
     Bn1d65q: ["f1rvyvqg", "f14g86mu"],
     Bxeuatn: "f1cwzwz",
-    n51gp8: ["f14g86mu", "f1rvyvqg"]
+    n51gp8: ["f14g86mu", "f1rvyvqg"],
+    Bsft5z2: "fhr9occ",
+    Bduesf4: "f99w1ws"
   }
 }, {
-  d: [".f1pha7fy{min-height:24px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".f1pha7fy{min-height:24px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhr9occ::after{content:unset;}"],
   h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
   a: [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
   m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
@@ -190,7 +124,8 @@ const useRootStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
     m: "(forced-colors: active)"
-  }]]
+  }]],
+  w: [".f99w1ws:focus-within{outline-style:none;}"]
 });
 const useInputClassName = /*#__PURE__*/__resetStyles("rvp2gzh", null, [".rvp2gzh{box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalXXS);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}", ".rvp2gzh::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"]);
 const useInputElementStyles = /*#__PURE__*/__styles({
@@ -233,9 +168,6 @@ export const useInputStyles_unstable = state => {
   const disabled = state.input.disabled;
   const invalid = `${state.input['aria-invalid']}` === 'true';
   const filled = appearance.startsWith('filled');
-  // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with
-  // different styles applied, which makes it ok to conditionally change which hook is called.
-  const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","rootBaseStyles","display","alignItems","flexWrap","gap","spacingHorizontalXXS","borderRadius","borderRadiusMedium","position","boxSizing","minHeight","padding","spacingHorizontalMNudge","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","rootInteractiveStyles","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootNonInteractiveClassName","useRootInteractiveClassName","useRootStyles","useInputClassName","useInputElementStyles","useContentClassName","useContentStyles","useInputStyles_unstable","state","size","appearance","disabled","invalid","filled","startsWith","useRootClassName","rootStyles","inputStyles","contentStyles","className","outlineInteractive","underlineInteractive","filledInteractive","contentClasses"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { GriffelResetStyle } from '@griffel/react';\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\nconst rootBaseStyles: GriffelResetStyle = {\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\n // size: medium (default)\n minHeight: fieldHeights.medium,\n padding: `0 ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n};\n\nconst rootInteractiveStyles: GriffelResetStyle = {\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 useRootNonInteractiveClassName = makeResetStyles(rootBaseStyles);\nconst useRootInteractiveClassName = makeResetStyles({ ...rootBaseStyles, ...rootInteractiveStyles });\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n paddingLeft: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.body2,\n ...shorthands.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 ...shorthands.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 },\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.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 '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 useInputClassName = makeResetStyles({\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 ${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 // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n large: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 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 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 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 // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with\n // different styles applied, which makes it ok to conditionally change which hook is called.\n const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;\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 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 size === 'large' && inputStyles.large,\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"]}
1	+ {"version":3,"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAEhE,kCAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGtF,OAAO,MAAMC,eAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,kBAAkB;EACzBC,aAAa,EAAE,0BAA0B;EACzCC,YAAY,EAAE;CACf;AAED;AACA,MAAMC,YAAY,GAAG;EACnBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;CACR;AAED,MAAMC,gBAAgB,gBAAG,uhIA0EvB;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAmGpB;AAEF,MAAMC,iBAAiB,gBAAG,srBAsBxB;AAEF,MAAMC,qBAAqB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAa5B;AAEF,MAAMC,mBAAmB,gBAAG,uNAO1B;AAEF,MAAMC,gBAAgB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAcvB;AAEF;;;AAGA,OAAO,MAAMC,uBAAuB,GAAIC,KAAiB,IAAgB;EACvE,MAAM;IAAEC,IAAI;IAAEC;EAAU,CAAE,GAAGF,KAAK;EAClC,MAAMG,QAAQ,GAAGH,KAAK,CAACd,KAAK,CAACiB,QAAQ;EACrC,MAAMC,OAAO,GAAG,GAAGJ,KAAK,CAACd,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;EAC3D,MAAMmB,MAAM,GAAGH,UAAU,CAACI,UAAU,CAAC,QAAQ,CAAC;EAE9C,MAAMC,UAAU,GAAGb,aAAa,EAAE;EAClC,MAAMc,WAAW,GAAGZ,qBAAqB,EAAE;EAC3C,MAAMa,aAAa,GAAGX,gBAAgB,EAAE;EAExCE,KAAK,CAACf,IAAI,CAACyB,SAAS,GAAG5B,YAAY,CACjCE,eAAe,CAACC,IAAI,EACpBQ,gBAAgB,EAAE,EAClBc,UAAU,CAACN,IAAI,CAAC,EAChBM,UAAU,CAACL,UAAU,CAAC,EACtB,CAACC,QAAQ,IAAID,UAAU,KAAK,SAAS,IAAIK,UAAU,CAACI,kBAAkB,EACtE,CAACR,QAAQ,IAAID,UAAU,KAAK,WAAW,IAAIK,UAAU,CAACK,oBAAoB,EAC1E,CAACT,QAAQ,IAAIE,MAAM,IAAIE,UAAU,CAACM,iBAAiB,EACnDR,MAAM,IAAIE,UAAU,CAACF,MAAM,EAC3B,CAACF,QAAQ,IAAIC,OAAO,IAAIG,UAAU,CAACH,OAAO,EAC1CD,QAAQ,IAAII,UAAU,CAACJ,QAAQ,EAC/BH,KAAK,CAACf,IAAI,CAACyB,SAAS,CACrB;EAEDV,KAAK,CAACd,KAAK,CAACwB,SAAS,GAAG5B,YAAY,CAClCE,eAAe,CAACE,KAAK,EACrBS,iBAAiB,EAAE,EACnBM,IAAI,KAAK,OAAO,IAAIO,WAAW,CAAChB,KAAK,EACrCW,QAAQ,IAAIK,WAAW,CAACL,QAAQ,EAChCH,KAAK,CAACd,KAAK,CAACwB,SAAS,CACtB;EAED,MAAMI,cAAc,GAAG,CAACjB,mBAAmB,EAAE,EAAEM,QAAQ,IAAIM,aAAa,CAACN,QAAQ,EAAEM,aAAa,CAACR,IAAI,CAAC,CAAC;EACvG,IAAID,KAAK,CAACb,aAAa,EAAE;IACvBa,KAAK,CAACb,aAAa,CAACuB,SAAS,GAAG5B,YAAY,CAC1CE,eAAe,CAACG,aAAa,EAC7B,GAAG2B,cAAc,EACjBd,KAAK,CAACb,aAAa,CAACuB,SAAS,CAC9B;;EAEH,IAAIV,KAAK,CAACZ,YAAY,EAAE;IACtBY,KAAK,CAACZ,YAAY,CAACsB,SAAS,GAAG5B,YAAY,CACzCE,eAAe,CAACI,YAAY,EAC5B,GAAG0B,cAAc,EACjBd,KAAK,CAACZ,YAAY,CAACsB,SAAS,CAC7B;;EAGH,OAAOV,KAAK;AACd,CAAC","names":["tokens","typographyStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","useRootClassName","useRootStyles","useInputClassName","useInputElementStyles","useContentClassName","useContentStyles","useInputStyles_unstable","state","size","appearance","disabled","invalid","filled","startsWith","rootStyles","inputStyles","contentStyles","className","outlineInteractive","underlineInteractive","filledInteractive","contentClasses"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInputStyles.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\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\n // size: medium (default)\n minHeight: fieldHeights.medium,\n padding: `0 ${tokens.spacingHorizontalMNudge}`,\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 paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n paddingLeft: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.body2,\n ...shorthands.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 ...shorthands.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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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 '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 // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\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 ${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 // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n large: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 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 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 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 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 size === 'large' && inputStyles.large,\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"]}

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

@@ -14,12 +14,11 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
         medium: '32px',
         large: '40px',
     };
-    var rootBaseStyles = tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', alignItems: 'center', flexWrap: 'nowrap', gap: react_theme_1.tokens.spacingHorizontalXXS, borderRadius: react_theme_1.tokens.borderRadiusMedium, position: 'relative', boxSizing: 'border-box',
+    var useRootClassName = react_1.makeResetStyles(tslib_1.__assign(tslib_1.__assign({ display: 'inline-flex', alignItems: 'center', flexWrap: 'nowrap', gap: react_theme_1.tokens.spacingHorizontalXXS, borderRadius: react_theme_1.tokens.borderRadiusMedium, position: 'relative', boxSizing: 'border-box',
         // size: medium (default)
         minHeight: fieldHeights.medium, padding: "0 " + react_theme_1.tokens.spacingHorizontalMNudge }, react_theme_1.typographyStyles.body1), {
         // appearance: outline (default)
-        backgroundColor: react_theme_1.tokens.colorNeutralBackground1, border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1, borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible });
-    var rootInteractiveStyles = {
+        backgroundColor: react_theme_1.tokens.colorNeutralBackground1, border: "1px solid " + react_theme_1.tokens.colorNeutralStroke1, borderBottomColor: react_theme_1.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': {
@@ -51,8 +50,7 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
                 transitionDuration: '0.01ms',
                 transitionDelay: '0.01ms',
             },
-        },
-        ':focus-within::after': {
+        }, ':focus-within::after': {
             // Animation for focus IN
             transform: 'scaleX(1)',
             transitionProperty: 'transform',
@@ -62,17 +60,12 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
                 transitionDuration: '0.01ms',
                 transitionDelay: '0.01ms',
             },
-        },
-        ':focus-within:active::after': {
+        }, ':focus-within:active::after': {
             // This is if the user clicks the field again while it's already focused
             borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed,
-        },
-        ':focus-within': {
+        }, ':focus-within': {
             outline: '2px solid transparent',
-        },
-    };
-    var useRootNonInteractiveClassName = react_1.makeResetStyles(rootBaseStyles);
-    var useRootInteractiveClassName = react_1.makeResetStyles(tslib_1.__assign(tslib_1.__assign({}, rootBaseStyles), rootInteractiveStyles));
+        } }));
     var useRootStyles = react_1.makeStyles({
         small: tslib_1.__assign({ minHeight: fieldHeights.small, paddingLeft: react_theme_1.tokens.spacingHorizontalSNudge, paddingRight: react_theme_1.tokens.spacingHorizontalSNudge }, react_theme_1.typographyStyles.caption1),
         medium: {
@@ -89,7 +82,12 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
         },
         underline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderRadius(0)), {
             // border is specified in rootBaseStyles, but we only want a bottom border here
-            borderTopStyle: 'none', borderRightStyle: 'none', borderLeftStyle: 'none' }),
+            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: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
@@ -122,7 +120,15 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
             backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
             boxShadow: react_theme_1.tokens.shadow2,
         },
-        disabled: tslib_1.__assign(tslib_1.__assign({ cursor: 'not-allowed', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
+        disabled: tslib_1.__assign(tslib_1.__assign({ cursor: 'not-allowed', backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')),
+            // remove the focus border
+            '::after': {
+                content: 'unset',
+            },
+            // remove the focus outline
+            ':focus-within': {
+                outlineStyle: 'none',
+            } }),
     });
     var useInputClassName = react_1.makeResetStyles({
         boxSizing: 'border-box',
@@ -189,9 +195,6 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"
         var disabled = state.input.disabled;
         var invalid = "" + state.input['aria-invalid'] === 'true';
         var filled = appearance.startsWith('filled');
-        // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with
-        // different styles applied, which makes it ok to conditionally change which hook is called.
-        var useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;
         var rootStyles = useRootStyles();
         var inputStyles = useInputElementStyles();
         var contentStyles = useContentStyles();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useInputStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { GriffelResetStyle } from '@griffel/react';\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\nconst rootBaseStyles: GriffelResetStyle = {\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\n // size: medium (default)\n minHeight: fieldHeights.medium,\n padding: `0 ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n};\n\nconst rootInteractiveStyles: GriffelResetStyle = {\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 useRootNonInteractiveClassName = makeResetStyles(rootBaseStyles);\nconst useRootInteractiveClassName = makeResetStyles({ ...rootBaseStyles, ...rootInteractiveStyles });\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n paddingLeft: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.body2,\n ...shorthands.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 ...shorthands.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 },\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.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 '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 useInputClassName = makeResetStyles({\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 ${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 // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n large: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 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 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 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 // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with\n // different styles applied, which makes it ok to conditionally change which hook is called.\n const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;\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 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 size === 'large' && inputStyles.large,\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"]}
1	+ {"version":3,"file":"useInputStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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\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\n // size: medium (default)\n minHeight: fieldHeights.medium,\n padding: `0 ${tokens.spacingHorizontalMNudge}`,\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 paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n paddingLeft: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.body2,\n ...shorthands.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 ...shorthands.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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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 '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 // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\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 ${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 // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n large: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 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 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 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 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 size === 'large' && inputStyles.large,\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"]}

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

@@ -18,77 +18,7 @@ const fieldHeights = {
   medium: '32px',
   large: '40px'
 };
-const rootBaseStyles = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  flexWrap: 'nowrap',
-  gap: react_theme_1.tokens.spacingHorizontalXXS,
-  borderRadius: react_theme_1.tokens.borderRadiusMedium,
-  position: 'relative',
-  boxSizing: 'border-box',
-  // size: medium (default)
-  minHeight: fieldHeights.medium,
-  padding: `0 ${react_theme_1.tokens.spacingHorizontalMNudge}`,
-  ...react_theme_1.typographyStyles.body1,
-  // appearance: outline (default)
-  backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
-  border: `1px solid ${react_theme_1.tokens.colorNeutralStroke1}`,
-  borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible
-};
-const rootInteractiveStyles = {
-  // 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, ${react_theme_1.tokens.borderRadiusMedium})`,
-    borderBottomLeftRadius: react_theme_1.tokens.borderRadiusMedium,
-    borderBottomRightRadius: react_theme_1.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 ${react_theme_1.tokens.colorCompoundBrandStroke}`,
-    clipPath: 'inset(calc(100% - 2px) 0 0 0)',
-    // Animation for focus OUT
-    transform: 'scaleX(0)',
-    transitionProperty: 'transform',
-    transitionDuration: react_theme_1.tokens.durationUltraFast,
-    transitionDelay: react_theme_1.tokens.curveAccelerateMid,
-    '@media screen and (prefers-reduced-motion: reduce)': {
-      transitionDuration: '0.01ms',
-      transitionDelay: '0.01ms'
-    }
-  },
-  ':focus-within::after': {
-    // Animation for focus IN
-    transform: 'scaleX(1)',
-    transitionProperty: 'transform',
-    transitionDuration: react_theme_1.tokens.durationNormal,
-    transitionDelay: react_theme_1.tokens.curveDecelerateMid,
-    '@media screen and (prefers-reduced-motion: reduce)': {
-      transitionDuration: '0.01ms',
-      transitionDelay: '0.01ms'
-    }
-  },
-  ':focus-within:active::after': {
-    // This is if the user clicks the field again while it's already focused
-    borderBottomColor: react_theme_1.tokens.colorCompoundBrandStrokePressed
-  },
-  ':focus-within': {
-    outline: '2px solid transparent'
-  }
-};
-const useRootNonInteractiveClassName = /*#__PURE__*/react_1.__resetStyles("rqztyh5", null, [".rqztyh5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}"]);
-const useRootInteractiveClassName = /*#__PURE__*/react_1.__resetStyles("r1jtohuq", "rl1z2p5", [".r1jtohuq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1jtohuq::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".rl1z2p5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"]);
+const useRootClassName = /*#__PURE__*/react_1.__resetStyles("r1jtohuq", "rl1z2p5", [".r1jtohuq{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1jtohuq::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1jtohuq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1jtohuq:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1jtohuq:focus-within{outline:2px solid transparent;}", ".rl1z2p5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;min-height:32px;padding:0 var(--spacingHorizontalMNudge);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".rl1z2p5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rl1z2p5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rl1z2p5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rl1z2p5:focus-within{outline:2px solid transparent;}"]);
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   small: {
     sshi5w: "f1pha7fy",
@@ -130,7 +60,9 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Btl43ni: ["f1ozlkrg", "f10ostut"],
     icvyot: "f1ern45e",
     vrafjx: ["f1n71otn", "f1deefiw"],
-    wvpqe5: ["f1deefiw", "f1n71otn"]
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
+    B1piin3: ["f15yvnhg", "f1n6gb5g"]
   },
   underlineInteractive: {
     oetu4i: "f1l4zc64",
@@ -182,10 +114,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Bjwas2f: "fg455y9",
     Bn1d65q: ["f1rvyvqg", "f14g86mu"],
     Bxeuatn: "f1cwzwz",
-    n51gp8: ["f14g86mu", "f1rvyvqg"]
+    n51gp8: ["f14g86mu", "f1rvyvqg"],
+    Bsft5z2: "fhr9occ",
+    Bduesf4: "f99w1ws"
   }
 }, {
-  d: [".f1pha7fy{min-height:24px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".f1pha7fy{min-height:24px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rjii52{-webkit-column-gap:var(--spacingHorizontalSNudge);column-gap:var(--spacingHorizontalSNudge);}", ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".f1nf3wye::after{border-bottom-right-radius:0;}", ".feulmo5::after{border-bottom-left-radius:0;}", ".f18vqdqu::after{border-top-right-radius:0;}", ".f53nyzz::after{border-top-left-radius:0;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhr9occ::after{content:unset;}"],
   h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
   a: [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
   m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
@@ -196,7 +130,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
     m: "(forced-colors: active)"
-  }]]
+  }]],
+  w: [".f99w1ws:focus-within{outline-style:none;}"]
 });
 const useInputClassName = /*#__PURE__*/react_1.__resetStyles("rvp2gzh", null, [".rvp2gzh{box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalXXS);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}", ".rvp2gzh::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rvp2gzh::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"]);
 const useInputElementStyles = /*#__PURE__*/react_1.__styles({
@@ -239,9 +174,6 @@ const useInputStyles_unstable = state => {
   const disabled = state.input.disabled;
   const invalid = `${state.input['aria-invalid']}` === 'true';
   const filled = appearance.startsWith('filled');
-  // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with
-  // different styles applied, which makes it ok to conditionally change which hook is called.
-  const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":";;;;;;AAAA;AAGA;AAGaA,uBAAe,GAA+B;EACzDC,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,kBAAkB;EACzBC,aAAa,EAAE,0BAA0B;EACzCC,YAAY,EAAE;CACf;AAED;AACA,MAAMC,YAAY,GAAG;EACnBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;CACR;AAED,MAAMC,cAAc,GAAsB;EACxCC,OAAO,EAAE,aAAa;EACtBC,UAAU,EAAE,QAAQ;EACpBC,QAAQ,EAAE,QAAQ;EAClBC,GAAG,EAAEC,oBAAM,CAACC,oBAAoB;EAChCC,YAAY,EAAEF,oBAAM,CAACG,kBAAkB;EACvCC,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE,YAAY;EAEvB;EACAC,SAAS,EAAEf,YAAY,CAACE,MAAM;EAC9Bc,OAAO,EAAE,KAAKP,oBAAM,CAACQ,uBAAuB,EAAE;EAC9C,GAAGR,8BAAgB,CAACS,KAAK;EAEzB;EACAC,eAAe,EAAEV,oBAAM,CAACW,uBAAuB;EAC/CC,MAAM,EAAE,aAAaZ,oBAAM,CAACa,mBAAmB,EAAE;EACjDC,iBAAiB,EAAEd,oBAAM,CAACe;CAC3B;AAED,MAAMC,qBAAqB,GAAsB;EAC/C;EACA;EACA,SAAS,EAAE;IACTX,SAAS,EAAE,YAAY;IACvBY,OAAO,EAAE,IAAI;IACbb,QAAQ,EAAE,UAAU;IACpBc,IAAI,EAAE,MAAM;IACZC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE,MAAM;IAEb;IACA;IACA;IACA;IACAC,MAAM,EAAE,YAAYrB,oBAAM,CAACG,kBAAkB,GAAG;IAChDmB,sBAAsB,EAAEtB,oBAAM,CAACG,kBAAkB;IACjDoB,uBAAuB,EAAEvB,oBAAM,CAACG,kBAAkB;IAElD;IACA;IACA;IACA;IACAqB,YAAY,EAAE,aAAaxB,oBAAM,CAACyB,wBAAwB,EAAE;IAC5DC,QAAQ,EAAE,+BAA+B;IAEzC;IACAC,SAAS,EAAE,WAAW;IACtBC,kBAAkB,EAAE,WAAW;IAC/BC,kBAAkB,EAAE7B,oBAAM,CAAC8B,iBAAiB;IAC5CC,eAAe,EAAE/B,oBAAM,CAACgC,kBAAkB;IAE1C,oDAAoD,EAAE;MACpDH,kBAAkB,EAAE,QAAQ;MAC5BE,eAAe,EAAE;;GAEpB;EACD,sBAAsB,EAAE;IACtB;IACAJ,SAAS,EAAE,WAAW;IACtBC,kBAAkB,EAAE,WAAW;IAC/BC,kBAAkB,EAAE7B,oBAAM,CAACiC,cAAc;IACzCF,eAAe,EAAE/B,oBAAM,CAACkC,kBAAkB;IAE1C,oDAAoD,EAAE;MACpDL,kBAAkB,EAAE,QAAQ;MAC5BE,eAAe,EAAE;;GAEpB;EACD,6BAA6B,EAAE;IAC7B;IACAjB,iBAAiB,EAAEd,oBAAM,CAACmC;GAC3B;EACD,eAAe,EAAE;IACfC,OAAO,EAAE;;CAEZ;AAED,MAAMC,8BAA8B,gBAAGC,qBAAe,0wBAAgB;AACtE,MAAMC,2BAA2B,gBAAGD,qBAAe,0gIAAiD;AAEpG,MAAME,aAAa,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAsF9B;AAEF,MAAMG,iBAAiB,gBAAGH,qBAAe,yqBAsBvC;AAEF,MAAMI,qBAAqB,gBAAGJ,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAatC;AAEF,MAAMK,mBAAmB,gBAAGL,qBAAe,0MAOzC;AAEF,MAAMM,gBAAgB,gBAAGN,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAcjC;AAEF;;;AAGO,MAAMO,uBAAuB,GAAIC,KAAiB,IAAgB;EACvE,MAAM;IAAEC,IAAI;IAAEC;EAAU,CAAE,GAAGF,KAAK;EAClC,MAAMG,QAAQ,GAAGH,KAAK,CAAC1D,KAAK,CAAC6D,QAAQ;EACrC,MAAMC,OAAO,GAAG,GAAGJ,KAAK,CAAC1D,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;EAC3D,MAAM+D,MAAM,GAAGH,UAAU,CAACI,UAAU,CAAC,QAAQ,CAAC;EAE9C;EACA;EACA,MAAMC,gBAAgB,GAAGJ,QAAQ,GAAGZ,8BAA8B,GAAGE,2BAA2B;EAEhG,MAAMe,UAAU,GAAGd,aAAa,EAAE;EAClC,MAAMe,WAAW,GAAGb,qBAAqB,EAAE;EAC3C,MAAMc,aAAa,GAAGZ,gBAAgB,EAAE;EAExCE,KAAK,CAAC3D,IAAI,CAACsE,SAAS,GAAGnB,oBAAY,CACjCpD,uBAAe,CAACC,IAAI,EACpBkE,gBAAgB,EAAE,EAClBC,UAAU,CAACP,IAAI,CAAC,EAChBO,UAAU,CAACN,UAAU,CAAC,EACtB,CAACC,QAAQ,IAAID,UAAU,KAAK,SAAS,IAAIM,UAAU,CAACI,kBAAkB,EACtE,CAACT,QAAQ,IAAID,UAAU,KAAK,WAAW,IAAIM,UAAU,CAACK,oBAAoB,EAC1E,CAACV,QAAQ,IAAIE,MAAM,IAAIG,UAAU,CAACM,iBAAiB,EACnDT,MAAM,IAAIG,UAAU,CAACH,MAAM,EAC3B,CAACF,QAAQ,IAAIC,OAAO,IAAII,UAAU,CAACJ,OAAO,EAC1CD,QAAQ,IAAIK,UAAU,CAACL,QAAQ,EAC/BH,KAAK,CAAC3D,IAAI,CAACsE,SAAS,CACrB;EAEDX,KAAK,CAAC1D,KAAK,CAACqE,SAAS,GAAGnB,oBAAY,CAClCpD,uBAAe,CAACE,KAAK,EACrBqD,iBAAiB,EAAE,EACnBM,IAAI,KAAK,OAAO,IAAIQ,WAAW,CAAC7D,KAAK,EACrCuD,QAAQ,IAAIM,WAAW,CAACN,QAAQ,EAChCH,KAAK,CAAC1D,KAAK,CAACqE,SAAS,CACtB;EAED,MAAMI,cAAc,GAAG,CAAClB,mBAAmB,EAAE,EAAEM,QAAQ,IAAIO,aAAa,CAACP,QAAQ,EAAEO,aAAa,CAACT,IAAI,CAAC,CAAC;EACvG,IAAID,KAAK,CAACzD,aAAa,EAAE;IACvByD,KAAK,CAACzD,aAAa,CAACoE,SAAS,GAAGnB,oBAAY,CAC1CpD,uBAAe,CAACG,aAAa,EAC7B,GAAGwE,cAAc,EACjBf,KAAK,CAACzD,aAAa,CAACoE,SAAS,CAC9B;;EAEH,IAAIX,KAAK,CAACxD,YAAY,EAAE;IACtBwD,KAAK,CAACxD,YAAY,CAACmE,SAAS,GAAGnB,oBAAY,CACzCpD,uBAAe,CAACI,YAAY,EAC5B,GAAGuE,cAAc,EACjBf,KAAK,CAACxD,YAAY,CAACmE,SAAS,CAC7B;;EAGH,OAAOX,KAAK;AACd,CAAC;AArDY5D,+BAAuB","names":["exports","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","rootBaseStyles","display","alignItems","flexWrap","gap","react_theme_1","spacingHorizontalXXS","borderRadius","borderRadiusMedium","position","boxSizing","minHeight","padding","spacingHorizontalMNudge","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","rootInteractiveStyles","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootNonInteractiveClassName","react_1","useRootInteractiveClassName","useRootStyles","useInputClassName","useInputElementStyles","useContentClassName","useContentStyles","useInputStyles_unstable","state","size","appearance","disabled","invalid","filled","startsWith","useRootClassName","rootStyles","inputStyles","contentStyles","className","outlineInteractive","underlineInteractive","filledInteractive","contentClasses"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInputStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { GriffelResetStyle } from '@griffel/react';\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\nconst rootBaseStyles: GriffelResetStyle = {\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\n // size: medium (default)\n minHeight: fieldHeights.medium,\n padding: `0 ${tokens.spacingHorizontalMNudge}`,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n};\n\nconst rootInteractiveStyles: GriffelResetStyle = {\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 useRootNonInteractiveClassName = makeResetStyles(rootBaseStyles);\nconst useRootInteractiveClassName = makeResetStyles({ ...rootBaseStyles, ...rootInteractiveStyles });\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n paddingLeft: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.body2,\n ...shorthands.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 ...shorthands.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 },\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.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 '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 useInputClassName = makeResetStyles({\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 ${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 // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n large: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 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 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 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 // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with\n // different styles applied, which makes it ok to conditionally change which hook is called.\n const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;\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 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 size === 'large' && inputStyles.large,\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"]}
1	+ {"version":3,"mappings":"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","names":["exports","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","useRootClassName","react_1","useRootStyles","useInputClassName","useInputElementStyles","useContentClassName","useContentStyles","useInputStyles_unstable","state","size","appearance","disabled","invalid","filled","startsWith","rootStyles","inputStyles","contentStyles","className","outlineInteractive","underlineInteractive","filledInteractive","contentClasses"],"sourceRoot":"../src/","sources":["packages/react-components/react-input/src/components/Input/useInputStyles.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\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\n // size: medium (default)\n minHeight: fieldHeights.medium,\n padding: `0 ${tokens.spacingHorizontalMNudge}`,\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 paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: tokens.spacingHorizontalSNudge,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n paddingLeft: tokens.spacingHorizontalM,\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.body2,\n ...shorthands.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 ...shorthands.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': shorthands.borderRadius(0), // remove rounded corners from focus underline\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 '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 // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n});\n\nconst useInputClassName = makeResetStyles({\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 ${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 // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n large: {\n paddingLeft: tokens.spacingHorizontalSNudge,\n paddingRight: 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 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 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 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 size === 'large' && inputStyles.large,\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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.3.5",
+  "version": "9.3.7",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",