Private
Public Access
1
0
Files
power-apps-codeapps-blog-part2/node_modules/@fluentui/react-input/lib-commonjs/components/Input/useInputStyles.styles.js

492 lines
18 KiB
JavaScript

'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
inputClassNames: function() {
return inputClassNames;
},
useInputStyles_unstable: function() {
return useInputStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const inputClassNames = {
root: 'fui-Input',
input: 'fui-Input__input',
contentBefore: 'fui-Input__contentBefore',
contentAfter: 'fui-Input__contentAfter'
};
// TODO(sharing) should these be shared somewhere?
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
const horizontalPadding = {
root: {
small: _reacttheme.tokens.spacingHorizontalSNudge,
medium: _reacttheme.tokens.spacingHorizontalMNudge,
large: _reacttheme.tokens.spacingHorizontalM
},
input: {
small: _reacttheme.tokens.spacingHorizontalXXS,
medium: _reacttheme.tokens.spacingHorizontalXXS,
large: _reacttheme.tokens.spacingHorizontalSNudge
},
combined: {
small: _reacttheme.tokens.spacingHorizontalS,
medium: _reacttheme.tokens.spacingHorizontalM,
large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
}
};
const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1oeeo9n", "r9sxh5", {
r: [
".r1oeeo9n{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;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);}",
".r1oeeo9n::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
".r1oeeo9n:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
".r1oeeo9n:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
".r1oeeo9n:focus-within{outline:2px solid transparent;}",
".r9sxh5{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;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);}",
".r9sxh5::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
".r9sxh5:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
".r9sxh5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
".r9sxh5:focus-within{outline:2px solid transparent;}"
],
s: [
"@media screen and (prefers-reduced-motion: reduce){.r1oeeo9n::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
"@media screen and (prefers-reduced-motion: reduce){.r1oeeo9n:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
"@media screen and (prefers-reduced-motion: reduce){.r9sxh5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
"@media screen and (prefers-reduced-motion: reduce){.r9sxh5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
]
});
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
small: {
sshi5w: "f1pha7fy",
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm"
},
medium: {},
large: {
sshi5w: "f1w5jphr",
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k",
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f1eyhf9v"
},
outline: {},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "f1l4zc64",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
Drbcw7: "f8vnjqi",
udz0bu: [
"fz1etlk",
"f1hc16gm"
],
Be8ivqh: "f1klwx88",
ofdepl: [
"f1hc16gm",
"fz1etlk"
]
},
underline: {
De3pzq: "f1c21dwh",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779",
icvyot: "f1ern45e",
vrafjx: [
"f1n71otn",
"f1deefiw"
],
wvpqe5: [
"f1deefiw",
"f1n71otn"
],
Eqx8gd: [
"f1n6gb5g",
"f15yvnhg"
],
B1piin3: [
"f15yvnhg",
"f1n6gb5g"
]
},
underlineInteractive: {
oetu4i: "f1l4zc64",
Be8ivqh: "f1klwx88",
d9w3h3: 0,
B3778ie: 0,
B4j8arr: 0,
Bl18szs: 0,
Blrzh8d: "f2ale1x"
},
filled: {
g2u3we: "fghlq4f",
h3c5rm: [
"f1gn591s",
"fjscplz"
],
B9xav0g: "fb073pr",
zhjwy3: [
"fjscplz",
"f1gn591s"
]
},
filledInteractive: {
q7v0qe: "ftmjh5b",
kmh5ft: [
"f17blpuu",
"fsrcdbj"
],
nagaa4: "f1tpwn32",
B1yhkcb: [
"fsrcdbj",
"f17blpuu"
]
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: [
"fcee079",
"fmyw78r"
],
hhx65j: "f1fgmyf4",
Bxowmz0: [
"fmyw78r",
"fcee079"
]
},
"filled-darker": {
De3pzq: "f16xq7d1"
},
"filled-lighter": {
De3pzq: "fxugw4r"
},
"filled-darker-shadow": {
De3pzq: "f16xq7d1",
E5pizo: "fyed02w"
},
"filled-lighter-shadow": {
De3pzq: "fxugw4r",
E5pizo: "fyed02w"
},
disabled: {
Bceei9c: "fdrzuqr",
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
Bcq6wej: "f9dbb4x",
Jcjdmf: [
"f3qs60o",
"f5u9ap2"
],
sc4o1m: "fwd1oij",
Bosien3: [
"f5u9ap2",
"f3qs60o"
],
Bsft5z2: "fhr9occ",
Bduesf4: "f99w1ws"
},
smallWithContentBefore: {
uwmqm3: [
"fk8j09s",
"fdw0yi8"
]
},
smallWithContentAfter: {
z189sj: [
"fdw0yi8",
"fk8j09s"
]
},
mediumWithContentBefore: {
uwmqm3: [
"f1ng84yb",
"f11gcy0p"
]
},
mediumWithContentAfter: {
z189sj: [
"f11gcy0p",
"f1ng84yb"
]
},
largeWithContentBefore: {
uwmqm3: [
"f1uw59to",
"fw5db7e"
]
},
largeWithContentAfter: {
z189sj: [
"fw5db7e",
"f1uw59to"
]
}
}, {
d: [
".f1pha7fy{min-height:24px;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".f1w5jphr{min-height:40px;}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
[
".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}",
{
p: -1
}
],
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
[
".fokr779{border-radius:0;}",
{
p: -1
}
],
".f1ern45e{border-top-style:none;}",
".f1n71otn{border-right-style:none;}",
".f1deefiw{border-left-style:none;}",
".f1n6gb5g::after{left:0;}",
".f15yvnhg::after{right:0;}",
[
".f2ale1x::after{border-radius:0;}",
{
p: -1
}
],
".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;}",
".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}",
".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
".f1uw59to{padding-left:var(--spacingHorizontalM);}",
".fw5db7e{padding-right:var(--spacingHorizontalM);}"
],
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){.f9dbb4x{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
],
w: [
".f99w1ws:focus-within{outline-style:none;}"
]
});
const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r12stul0", null, [
".r12stul0{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalM);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}",
".r12stul0::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
".r12stul0::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
".r12stul0::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"
]);
const useInputElementStyles = /*#__PURE__*/ (0, _react.__styles)({
small: {
uwmqm3: [
"f1f5gg8d",
"f1vdfbxk"
],
z189sj: [
"f1vdfbxk",
"f1f5gg8d"
]
},
medium: {},
large: {
uwmqm3: [
"fnphzt9",
"flt1dlf"
],
z189sj: [
"flt1dlf",
"fnphzt9"
]
},
smallWithContentBefore: {
uwmqm3: [
"fgiv446",
"ffczdla"
]
},
smallWithContentAfter: {
z189sj: [
"ffczdla",
"fgiv446"
]
},
mediumWithContentBefore: {
uwmqm3: [
"fgiv446",
"ffczdla"
]
},
mediumWithContentAfter: {
z189sj: [
"ffczdla",
"fgiv446"
]
},
largeWithContentBefore: {
uwmqm3: [
"fk8j09s",
"fdw0yi8"
]
},
largeWithContentAfter: {
z189sj: [
"fdw0yi8",
"fk8j09s"
]
},
disabled: {
sj55zd: "f1s2aq7o",
De3pzq: "f1c21dwh",
Bceei9c: "fdrzuqr",
yvdlaj: "fahhnxm"
}
}, {
d: [
".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
".fgiv446{padding-left:var(--spacingHorizontalXXS);}",
".ffczdla{padding-right:var(--spacingHorizontalXXS);}",
".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
".fdrzuqr{cursor:not-allowed;}",
".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
]
});
const useContentClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1572tok", null, [
".r1572tok{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;}",
".r1572tok>svg{font-size:20px;}"
]);
const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
disabled: {
sj55zd: "f1s2aq7o"
},
small: {
Duoase: "f3qv9w"
},
medium: {},
large: {
Duoase: "f16u2scb"
}
}, {
d: [
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".f3qv9w>svg{font-size:16px;}",
".f16u2scb>svg{font-size:24px;}"
]
});
const useInputStyles_unstable = (state)=>{
'use no memo';
const { size, appearance } = state;
const disabled = state.input.disabled;
const invalid = `${state.input['aria-invalid']}` === 'true';
const filled = appearance.startsWith('filled');
const rootStyles = useRootStyles();
const inputStyles = useInputElementStyles();
const contentStyles = useContentStyles();
state.root.className = (0, _react.mergeClasses)(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
state.input.className = (0, _react.mergeClasses)(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
const contentClasses = [
useContentClassName(),
disabled && contentStyles.disabled,
contentStyles[size]
];
if (state.contentBefore) {
state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
}
if (state.contentAfter) {
state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
}
return state;
};