403 lines
14 KiB
JavaScript
403 lines
14 KiB
JavaScript
'use client';
|
|
|
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
export const textareaClassNames = {
|
|
root: 'fui-Textarea',
|
|
textarea: 'fui-Textarea__textarea'
|
|
};
|
|
/**
|
|
* Styles for the root(wrapper) slot
|
|
*/
|
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
base: {
|
|
mc9l5x: "ftuwxu6",
|
|
B7ck84d: "f1ewtqcl",
|
|
qhf8xq: "f10pi13n",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f1yiegib",
|
|
jrapky: 0,
|
|
Frg6f3: 0,
|
|
t21cq0: 0,
|
|
B6of3ja: 0,
|
|
B74szlk: "f1s184ao",
|
|
Beyfa6y: 0,
|
|
Bbmb7ep: 0,
|
|
Btl43ni: 0,
|
|
B7oj6ja: 0,
|
|
Dimara: "ft85np5",
|
|
ha4doy: "f12kltsn"
|
|
},
|
|
disabled: {
|
|
De3pzq: "f1c21dwh",
|
|
Bgfg5da: 0,
|
|
B9xav0g: 0,
|
|
oivjwe: 0,
|
|
Bn0qgzm: 0,
|
|
B4g9neb: 0,
|
|
zhjwy3: 0,
|
|
wvpqe5: 0,
|
|
ibv6hh: 0,
|
|
u1mtju: 0,
|
|
h3c5rm: 0,
|
|
vrafjx: 0,
|
|
Bekrc4i: 0,
|
|
i8vvqc: 0,
|
|
g2u3we: 0,
|
|
icvyot: 0,
|
|
B4j52fo: 0,
|
|
irswps: "ff3nzm7",
|
|
Bcq6wej: "f9dbb4x",
|
|
Jcjdmf: ["f3qs60o", "f5u9ap2"],
|
|
sc4o1m: "fwd1oij",
|
|
Bosien3: ["f5u9ap2", "f3qs60o"]
|
|
},
|
|
interactive: {
|
|
li1rpt: "f1gw3sf2",
|
|
Bsft5z2: "f13zj6fq",
|
|
E3zdtr: "f1mdlcz9",
|
|
Eqx8gd: ["f1a7op3", "f1cjjd47"],
|
|
By385i5: "f1gboi2j",
|
|
B1piin3: ["f1cjjd47", "f1a7op3"],
|
|
Dlnsje: "ffyw7fx",
|
|
d9w3h3: ["f1kp91vd", "f1ibwz09"],
|
|
B3778ie: ["f1ibwz09", "f1kp91vd"],
|
|
B1q35kw: 0,
|
|
Bw17bha: 0,
|
|
Bcgy8vk: 0,
|
|
Bjuhk93: "f1mnjydx",
|
|
Gjdm7m: "fj2g8qd",
|
|
b1kco5: "f1yk9hq",
|
|
Ba2ppi3: "fhwpy7i",
|
|
F2fol1: "f14ee0xe",
|
|
lck23g: "f1xhbsuh",
|
|
wi16st: "fsrmcvb",
|
|
ywj3b2: "f1t3k7v9",
|
|
umuwi5: "fjw5xc1",
|
|
Blcqepd: "f1xdyd5c",
|
|
nplu4u: "fatpbeo",
|
|
Bioka5o: "fb7uyps",
|
|
Bnupc0a: "fx04xgm",
|
|
bing71: "f1c7in40",
|
|
Bercvud: "f1ibeo51",
|
|
Bbr2w1p: "f1vnc8sk",
|
|
Bduesf4: "f3e99gv",
|
|
Bpq79vn: "fhljsf7"
|
|
},
|
|
filled: {
|
|
Bgfg5da: 0,
|
|
B9xav0g: 0,
|
|
oivjwe: 0,
|
|
Bn0qgzm: 0,
|
|
B4g9neb: 0,
|
|
zhjwy3: 0,
|
|
wvpqe5: 0,
|
|
ibv6hh: 0,
|
|
u1mtju: 0,
|
|
h3c5rm: 0,
|
|
vrafjx: 0,
|
|
Bekrc4i: 0,
|
|
i8vvqc: 0,
|
|
g2u3we: 0,
|
|
icvyot: 0,
|
|
B4j52fo: 0,
|
|
irswps: "f88035w",
|
|
q7v0qe: "ftmjh5b",
|
|
kmh5ft: ["f17blpuu", "fsrcdbj"],
|
|
nagaa4: "f1tpwn32",
|
|
B1yhkcb: ["fsrcdbj", "f17blpuu"]
|
|
},
|
|
"filled-darker": {
|
|
De3pzq: "f16xq7d1"
|
|
},
|
|
"filled-lighter": {
|
|
De3pzq: "fxugw4r"
|
|
},
|
|
"filled-darker-shadow": {
|
|
De3pzq: "f16xq7d1",
|
|
Bgfg5da: 0,
|
|
B9xav0g: 0,
|
|
oivjwe: 0,
|
|
Bn0qgzm: 0,
|
|
B4g9neb: 0,
|
|
zhjwy3: 0,
|
|
wvpqe5: 0,
|
|
ibv6hh: 0,
|
|
u1mtju: 0,
|
|
h3c5rm: 0,
|
|
vrafjx: 0,
|
|
Bekrc4i: 0,
|
|
i8vvqc: 0,
|
|
g2u3we: 0,
|
|
icvyot: 0,
|
|
B4j52fo: 0,
|
|
irswps: "f1gmd7mu",
|
|
E5pizo: "fyed02w"
|
|
},
|
|
"filled-lighter-shadow": {
|
|
De3pzq: "fxugw4r",
|
|
Bgfg5da: 0,
|
|
B9xav0g: 0,
|
|
oivjwe: 0,
|
|
Bn0qgzm: 0,
|
|
B4g9neb: 0,
|
|
zhjwy3: 0,
|
|
wvpqe5: 0,
|
|
ibv6hh: 0,
|
|
u1mtju: 0,
|
|
h3c5rm: 0,
|
|
vrafjx: 0,
|
|
Bekrc4i: 0,
|
|
i8vvqc: 0,
|
|
g2u3we: 0,
|
|
icvyot: 0,
|
|
B4j52fo: 0,
|
|
irswps: "f1gmd7mu",
|
|
E5pizo: "fyed02w"
|
|
},
|
|
outline: {
|
|
De3pzq: "fxugw4r",
|
|
Bgfg5da: 0,
|
|
B9xav0g: "f1c1zstj",
|
|
oivjwe: 0,
|
|
Bn0qgzm: 0,
|
|
B4g9neb: 0,
|
|
zhjwy3: 0,
|
|
wvpqe5: 0,
|
|
ibv6hh: 0,
|
|
u1mtju: 0,
|
|
h3c5rm: 0,
|
|
vrafjx: 0,
|
|
Bekrc4i: 0,
|
|
i8vvqc: 0,
|
|
g2u3we: 0,
|
|
icvyot: 0,
|
|
B4j52fo: 0,
|
|
irswps: "fhz96rm"
|
|
},
|
|
outlineInteractive: {
|
|
kzujx5: 0,
|
|
oetu4i: "f1l4zc64",
|
|
gvrnp0: 0,
|
|
xv9156: 0,
|
|
jek2p4: 0,
|
|
gg5e9n: 0,
|
|
Beu9t3s: 0,
|
|
dt87k2: 0,
|
|
Bt1vbvt: 0,
|
|
Bwzppfd: 0,
|
|
Bop6t4b: 0,
|
|
B2zwrfe: 0,
|
|
Bwp2tzp: 0,
|
|
Bgoe8wy: 0,
|
|
Bf40cpq: 0,
|
|
ckks6v: 0,
|
|
Baalond: "f9mts5e",
|
|
v2iqwr: 0,
|
|
wmxk5l: "f1z0osm6",
|
|
Bj33j0h: 0,
|
|
Bs0cc2w: 0,
|
|
qwjtx1: 0,
|
|
B50zh58: 0,
|
|
f7epvg: 0,
|
|
e1hlit: 0,
|
|
B7mkhst: 0,
|
|
ak43y8: 0,
|
|
Bbcopvn: 0,
|
|
Bvecx4l: 0,
|
|
lwioe0: 0,
|
|
B6oc9vd: 0,
|
|
e2sjt0: 0,
|
|
uqwnxt: 0,
|
|
asj8p9: "f1acnei2",
|
|
Br8fjdy: 0,
|
|
zoxjo1: "f1so894s",
|
|
Bt3ojkv: 0,
|
|
B7pmvfx: 0,
|
|
Bfht2n1: 0,
|
|
an54nd: 0,
|
|
t1ykpo: 0,
|
|
Belqbek: 0,
|
|
bbt1vd: 0,
|
|
Brahy3i: 0,
|
|
r7b1zc: 0,
|
|
rexu52: 0,
|
|
ovtnii: 0,
|
|
Bvq3b66: 0,
|
|
Bawrxx6: 0,
|
|
Bbs6y8j: 0,
|
|
B2qpgjt: "f19ezbcq"
|
|
},
|
|
invalid: {
|
|
tvckwq: "fs4k3qj",
|
|
gk2u95: ["fcee079", "fmyw78r"],
|
|
hhx65j: "f1fgmyf4",
|
|
Bxowmz0: ["fmyw78r", "fcee079"]
|
|
}
|
|
}, {
|
|
d: [".ftuwxu6{display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f10pi13n{position:relative;}", [".f1yiegib{padding:0 0 var(--strokeWidthThick) 0;}", {
|
|
p: -1
|
|
}], [".f1s184ao{margin:0;}", {
|
|
p: -1
|
|
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
|
|
p: -1
|
|
}], ".f12kltsn{vertical-align:top;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".ff3nzm7{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeDisabled);}", {
|
|
p: -2
|
|
}], ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".f1a7op3::after{left:-1px;}", ".f1cjjd47::after{right:-1px;}", ".f1gboi2j::after{bottom:-1px;}", ".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", [".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}", {
|
|
p: -1
|
|
}], ".fj2g8qd::after{clip-path:inset(calc(100% - var(--strokeWidthThick)) 0 0 0);}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}", [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
|
|
p: -2
|
|
}], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".f1gmd7mu{border:var(--strokeWidthThin) solid var(--colorTransparentStrokeInteractive);}", {
|
|
p: -2
|
|
}], ".fyed02w{box-shadow:var(--shadow2);}", [".f1gmd7mu{border:var(--strokeWidthThin) solid var(--colorTransparentStrokeInteractive);}", {
|
|
p: -2
|
|
}], [".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}", {
|
|
p: -2
|
|
}], ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".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);}"],
|
|
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)"
|
|
}], ["@media screen and (prefers-reduced-motion: reduce){.fsrmcvb::after{transition-duration:0.01ms;}}", {
|
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f1t3k7v9::after{transition-delay:0.01ms;}}", {
|
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
}], ["@media screen and (prefers-reduced-motion: reduce){.fx04xgm:focus-within::after{transition-duration:0.01ms;}}", {
|
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f1c7in40:focus-within::after{transition-delay:0.01ms;}}", {
|
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
}]],
|
|
w: [".fjw5xc1:focus-within::after{transform:scaleX(1);}", ".f1xdyd5c:focus-within::after{transition-property:transform;}", ".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}", ".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}", ".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f1vnc8sk:focus-within{outline-width:var(--strokeWidthThick);}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}", [".f19ezbcq:focus-within{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Pressed);}", {
|
|
p: -2
|
|
}], ".f1so894s:focus-within{border-bottom-color:var(--colorCompoundBrandStroke);}"],
|
|
h: [".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);}", [".f9mts5e:hover{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Hover);}", {
|
|
p: -2
|
|
}], ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"],
|
|
a: [[".f1acnei2:active{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1Pressed);}", {
|
|
p: -2
|
|
}], ".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"]
|
|
});
|
|
/**
|
|
* Styles for the textarea slot
|
|
*/
|
|
const useTextareaStyles = /*#__PURE__*/__styles({
|
|
base: {
|
|
icvyot: "f1ern45e",
|
|
vrafjx: ["f1n71otn", "f1deefiw"],
|
|
oivjwe: "f1h8hb77",
|
|
wvpqe5: ["f1deefiw", "f1n71otn"],
|
|
jrapky: 0,
|
|
Frg6f3: 0,
|
|
t21cq0: 0,
|
|
B6of3ja: 0,
|
|
B74szlk: "f1s184ao",
|
|
De3pzq: "f3rmtva",
|
|
B7ck84d: "f1ewtqcl",
|
|
sj55zd: "f19n0e5",
|
|
Bh6795r: "fqerorx",
|
|
Bahqtrf: "fk6fouc",
|
|
Bqenvij: "f1l02sjl",
|
|
yvdlaj: "fwyc1cq",
|
|
B3o7kgh: "f13ta7ih",
|
|
oeaueh: "f1s6fcnf"
|
|
},
|
|
disabled: {
|
|
sj55zd: "f1s2aq7o",
|
|
Bceei9c: "fdrzuqr",
|
|
yvdlaj: "fahhnxm"
|
|
},
|
|
small: {
|
|
sshi5w: "f1w5jphr",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f1pnffij",
|
|
Bxyxcbc: "f192z54u",
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fy9rknc",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "fwrc4pm"
|
|
},
|
|
medium: {
|
|
sshi5w: "fvmd9f",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f1ww82xo",
|
|
Bxyxcbc: "f1if7ixc",
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
large: {
|
|
sshi5w: "f1kfson",
|
|
Byoj8tv: 0,
|
|
uwmqm3: 0,
|
|
z189sj: 0,
|
|
z8tnut: 0,
|
|
B0ocmuz: "f15hvtkj",
|
|
Bxyxcbc: "f3kip1f",
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fod5ikn",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "faaz57k"
|
|
}
|
|
}, {
|
|
d: [".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", [".f1s184ao{margin:0;}", {
|
|
p: -1
|
|
}], ".f3rmtva{background-color:transparent;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{flex-grow:1;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1l02sjl{height:100%;}", ".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}", ".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}", ".f13ta7ih::-webkit-input-placeholder{opacity:1;}", ".f13ta7ih::-moz-placeholder{opacity:1;}", ".f1s6fcnf{outline-style:none;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".f1w5jphr{min-height:40px;}", [".f1pnffij{padding:var(--spacingVerticalXS) calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
|
|
p: -1
|
|
}], ".f192z54u{max-height:200px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fvmd9f{min-height:52px;}", [".f1ww82xo{padding:var(--spacingVerticalSNudge) calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", {
|
|
p: -1
|
|
}], ".f1if7ixc{max-height:260px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kfson{min-height:64px;}", [".f15hvtkj{padding:var(--spacingVerticalS) calc(var(--spacingHorizontalM) + var(--spacingHorizontalXXS));}", {
|
|
p: -1
|
|
}], ".f3kip1f{max-height:320px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
|
|
});
|
|
/**
|
|
* Styles for the textarea's resize property
|
|
*/
|
|
const useTextareaResizeStyles = /*#__PURE__*/__styles({
|
|
none: {
|
|
B3rzk8w: "f1o1s39h"
|
|
},
|
|
both: {
|
|
B3rzk8w: "f1pxm0xe"
|
|
},
|
|
horizontal: {
|
|
B3rzk8w: "fq6nmtn"
|
|
},
|
|
vertical: {
|
|
B3rzk8w: "f1f5ktr4"
|
|
}
|
|
}, {
|
|
d: [".f1o1s39h{resize:none;}", ".f1pxm0xe{resize:both;}", ".fq6nmtn{resize:horizontal;}", ".f1f5ktr4{resize:vertical;}"]
|
|
});
|
|
/**
|
|
* Apply styling to the Textarea slots based on the state
|
|
*/
|
|
export const useTextareaStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const {
|
|
size,
|
|
appearance,
|
|
resize
|
|
} = state;
|
|
const disabled = state.textarea.disabled;
|
|
const invalid = `${state.textarea['aria-invalid']}` === 'true';
|
|
const filled = appearance.startsWith('filled');
|
|
const rootStyles = useRootStyles();
|
|
state.root.className = mergeClasses(textareaClassNames.root, rootStyles.base, disabled && rootStyles.disabled, !disabled && filled && rootStyles.filled, !disabled && rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && invalid && rootStyles.invalid, state.root.className);
|
|
const textareaStyles = useTextareaStyles();
|
|
const textareaResizeStyles = useTextareaResizeStyles();
|
|
state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
|
|
return state;
|
|
}; |