Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,31 @@
"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, {
Textarea: function() {
return _index.Textarea;
},
renderTextarea_unstable: function() {
return _index.renderTextarea_unstable;
},
textareaClassNames: function() {
return _index.textareaClassNames;
},
useTextareaBase_unstable: function() {
return _index.useTextareaBase_unstable;
},
useTextareaStyles_unstable: function() {
return _index.useTextareaStyles_unstable;
},
useTextarea_unstable: function() {
return _index.useTextarea_unstable;
}
});
const _index = require("./components/Textarea/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Textarea.ts"],"sourcesContent":["export type {\n TextareaBaseProps,\n TextareaBaseState,\n TextareaOnChangeData,\n TextareaProps,\n TextareaSlots,\n TextareaState,\n} from './components/Textarea/index';\nexport {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n useTextareaBase_unstable,\n} from './components/Textarea/index';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable","useTextareaBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAGlBG,+BAAwB;;;eAFxBF,iCAA0B;;;eAC1BC,2BAAoB;;;uBAEf,8BAA8B"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Textarea", {
enumerable: true,
get: function() {
return Textarea;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _renderTextarea = require("./renderTextarea");
const _useTextarea = require("./useTextarea");
const _useTextareaStylesstyles = require("./useTextareaStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Textarea = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTextarea.useTextarea_unstable)(props, ref);
(0, _useTextareaStylesstyles.useTextareaStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTextareaStyles_unstable')(state);
return (0, _renderTextarea.renderTextarea_unstable)(state);
});
Textarea.displayName = 'Textarea';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderTextarea_unstable } from './renderTextarea';\nimport { useTextarea_unstable } from './useTextarea';\nimport { useTextareaStyles_unstable } from './useTextareaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { TextareaProps } from './Textarea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Textarea component allows the user to enter and edit text in multiple lines.\n */\nexport const Textarea: ForwardRefComponent<TextareaProps> = React.forwardRef((props, ref) => {\n const state = useTextarea_unstable(props, ref);\n\n useTextareaStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTextareaStyles_unstable')(state);\n\n return renderTextarea_unstable(state);\n});\n\nTextarea.displayName = 'Textarea';\n"],"names":["React","renderTextarea_unstable","useTextarea_unstable","useTextareaStyles_unstable","useCustomStyleHook_unstable","Textarea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;6BACtB,gBAAgB;yCACV,6BAA6B;qCAG5B,kCAAkC;AAKvE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQP,iCAAAA,EAAqBK,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Textarea/Textarea.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TextareaSlots = {\n /**\n * Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\n * indicator border animation. For more information, see Spec.md\n *\n * The root only receives `className` and `style`. All other props are applied to the `textarea` slot.\n */\n root: NonNullable<Slot<'span'>>;\n\n /**\n * The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot.\n */\n textarea: NonNullable<Slot<'textarea'>>;\n};\n\n/**\n * Textarea Props\n */\nexport type TextareaProps = Omit<\n ComponentProps<Partial<TextareaSlots>, 'textarea'>,\n 'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n /**\n * Styling the Textarea should use.\n *\n * @default outline\n *\n * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.\n */\n appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';\n\n /**\n * The default value of the Textarea.\n */\n defaultValue?: string;\n\n /**\n * Callback for when the user changes the value.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void;\n\n /**\n * Which direction the Textarea is allowed to be resized.\n *\n * @default none\n */\n resize?: 'none' | 'horizontal' | 'vertical' | 'both';\n\n /**\n * Size of the Textarea.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value of the Textarea.\n */\n value?: string;\n};\n\n/**\n * Textarea base props, excluding design-related props like appearance and size.\n * Note: resize is kept as it is a structural/behavioral prop.\n */\nexport type TextareaBaseProps = Omit<TextareaProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;\n\n/**\n * Textarea base state, excluding design-related state like appearance and size.\n */\nexport type TextareaBaseState = Omit<TextareaState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when the textarea's value changes.\n */\nexport type TextareaOnChangeData = {\n value: string;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,34 @@
"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, {
Textarea: function() {
return _Textarea.Textarea;
},
renderTextarea_unstable: function() {
return _renderTextarea.renderTextarea_unstable;
},
textareaClassNames: function() {
return _useTextareaStylesstyles.textareaClassNames;
},
useTextareaBase_unstable: function() {
return _useTextarea.useTextareaBase_unstable;
},
useTextareaStyles_unstable: function() {
return _useTextareaStylesstyles.useTextareaStyles_unstable;
},
useTextarea_unstable: function() {
return _useTextarea.useTextarea_unstable;
}
});
const _Textarea = require("./Textarea");
const _renderTextarea = require("./renderTextarea");
const _useTextarea = require("./useTextarea");
const _useTextareaStylesstyles = require("./useTextareaStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Textarea/index.ts"],"sourcesContent":["export { Textarea } from './Textarea';\nexport type {\n TextareaBaseProps,\n TextareaBaseState,\n TextareaOnChangeData,\n TextareaProps,\n TextareaSlots,\n TextareaState,\n} from './Textarea.types';\nexport { renderTextarea_unstable } from './renderTextarea';\nexport { useTextarea_unstable, useTextareaBase_unstable } from './useTextarea';\nexport { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';\n"],"names":["Textarea","renderTextarea_unstable","useTextarea_unstable","useTextareaBase_unstable","textareaClassNames","useTextareaStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eASRC,uCAAuB;;;eAEvBG,2CAAkB;;;eADID,qCAAwB;;;eAC1BE,mDAA0B;;;eAD9CH,iCAAoB;;;0BAVJ,aAAa;gCASE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

View File

@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTextarea_unstable", {
enumerable: true,
get: function() {
return renderTextarea_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderTextarea_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.textarea, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Textarea/renderTextarea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TextareaState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaState): JSXElement => {\n assertSlots<TextareaSlots>(state);\n\n return (\n <state.root>\n <state.textarea />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderTextarea_unstable","state","root","textarea"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,GACE,mBAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACD,MAAME,QAAQ,EAAA,CAAA;;AAGrB,EAAE"}

View File

@@ -0,0 +1,89 @@
'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, {
useTextareaBase_unstable: function() {
return useTextareaBase_unstable;
},
useTextarea_unstable: function() {
return useTextarea_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactfield = require("@fluentui/react-field");
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const useTextarea_unstable = (props, ref)=>{
const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
var _overrides_inputDefaultAppearance;
const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
if (process.env.NODE_ENV !== 'production' && (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {
// eslint-disable-next-line no-console
console.error("The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" + ' future.');
}
const baseState = useTextareaBase_unstable(baseProps, ref);
return {
...baseState,
size,
appearance
};
};
const useTextareaBase_unstable = (props, ref)=>{
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
supportsLabelFor: true,
supportsRequired: true,
supportsSize: true
});
const { resize = 'none', onChange } = props;
const [value, setValue] = (0, _reactutilities.useControllableState)({
state: props.value,
defaultState: props.defaultValue,
initialState: undefined
});
const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'textarea',
excludedPropNames: [
'onChange',
'value',
'defaultValue'
]
});
const state = {
resize,
components: {
root: 'span',
textarea: 'textarea'
},
textarea: _reactutilities.slot.always(props.textarea, {
defaultProps: {
ref,
...nativeProps.primary
},
elementType: 'textarea'
}),
root: _reactutilities.slot.always(props.root, {
defaultProps: nativeProps.root,
elementType: 'span'
})
};
state.textarea.value = value;
state.textarea.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
const newValue = ev.target.value;
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
value: newValue
});
setValue(newValue);
});
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,621 @@
'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, {
textareaClassNames: function() {
return textareaClassNames;
},
useTextareaStyles_unstable: function() {
return useTextareaStyles_unstable;
}
});
const _react = require("@griffel/react");
const textareaClassNames = {
root: 'fui-Textarea',
textarea: 'fui-Textarea__textarea'
};
/**
* Styles for the root(wrapper) slot
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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;}"
]
});
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 = (0, _react.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 = (0, _react.mergeClasses)(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,221 @@
'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, {
textareaClassNames: function() {
return textareaClassNames;
},
useTextareaStyles_unstable: function() {
return useTextareaStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const textareaClassNames = {
root: 'fui-Textarea',
textarea: 'fui-Textarea__textarea'
};
/**
* Styles for the root(wrapper) slot
*/ const useRootStyles = (0, _react.makeStyles)({
base: {
display: 'inline-flex',
boxSizing: 'border-box',
position: 'relative',
// Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.
padding: `0 0 ${_reacttheme.tokens.strokeWidthThick} 0`,
margin: '0',
borderRadius: _reacttheme.tokens.borderRadiusMedium,
verticalAlign: 'top'
},
disabled: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeDisabled}`,
'@media (forced-colors: active)': {
..._react.shorthands.borderColor('GrayText')
}
},
interactive: {
// 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(${_reacttheme.tokens.strokeWidthThick}, ${_reacttheme.tokens.borderRadiusMedium})`,
borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
// Flat 2px border:
// By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
// (This could be done without trimming using `background: linear-gradient(...)`, but using
// borderBottom makes it easier for people to override the color if needed.)
borderBottom: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
clipPath: `inset(calc(100% - ${_reacttheme.tokens.strokeWidthThick}) 0 0 0)`,
// Animation for focus OUT
transform: 'scaleX(0)',
transitionProperty: 'transform',
transitionDuration: _reacttheme.tokens.durationUltraFast,
transitionDelay: _reacttheme.tokens.curveAccelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
':focus-within::after': {
// Animation for focus IN
transform: 'scaleX(1)',
transitionProperty: 'transform',
transitionDuration: _reacttheme.tokens.durationNormal,
transitionDelay: _reacttheme.tokens.curveDecelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
':focus-within:active::after': {
// This is if the user clicks the field again while it's already focused
borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
},
':focus-within': {
outlineWidth: _reacttheme.tokens.strokeWidthThick,
outlineStyle: 'solid',
outlineColor: 'transparent'
}
},
filled: {
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`,
':hover,:focus-within': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive)
}
},
'filled-darker': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground3
},
'filled-lighter': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
},
'filled-darker-shadow': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStrokeInteractive}`,
boxShadow: _reacttheme.tokens.shadow2
},
'filled-lighter-shadow': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStrokeInteractive}`,
boxShadow: _reacttheme.tokens.shadow2
},
outline: {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
},
outlineInteractive: {
':hover': {
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1Hover}`,
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
},
':active': {
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1Pressed}`,
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
},
':focus-within': {
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1Pressed}`,
borderBottomColor: _reacttheme.tokens.colorCompoundBrandStroke
}
},
invalid: {
':not(:focus-within),:hover:not(:focus-within)': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
}
}
});
/**
* Styles for the textarea slot
*/ const useTextareaStyles = (0, _react.makeStyles)({
base: {
..._react.shorthands.borderStyle('none'),
margin: '0',
backgroundColor: 'transparent',
boxSizing: 'border-box',
color: _reacttheme.tokens.colorNeutralForeground1,
flexGrow: 1,
fontFamily: _reacttheme.tokens.fontFamilyBase,
height: '100%',
'::placeholder': {
color: _reacttheme.tokens.colorNeutralForeground4,
opacity: 1
},
outlineStyle: 'none'
},
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed',
'::placeholder': {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
},
// The padding style adds both content and regular padding (from design spec), this is because the handle is not
// affected by changing the padding of the root.
small: {
minHeight: '40px',
padding: `${_reacttheme.tokens.spacingVerticalXS} calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
maxHeight: '200px',
..._reacttheme.typographyStyles.caption1
},
medium: {
minHeight: '52px',
padding: `${_reacttheme.tokens.spacingVerticalSNudge} calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
maxHeight: '260px',
..._reacttheme.typographyStyles.body1
},
large: {
minHeight: '64px',
padding: `${_reacttheme.tokens.spacingVerticalS} calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
maxHeight: '320px',
..._reacttheme.typographyStyles.body2
}
});
/**
* Styles for the textarea's resize property
*/ const useTextareaResizeStyles = (0, _react.makeStyles)({
none: {
resize: 'none'
},
both: {
resize: 'both'
},
horizontal: {
resize: 'horizontal'
},
vertical: {
resize: 'vertical'
}
});
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 = (0, _react.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 = (0, _react.mergeClasses)(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,31 @@
"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, {
Textarea: function() {
return _Textarea.Textarea;
},
renderTextarea_unstable: function() {
return _Textarea.renderTextarea_unstable;
},
textareaClassNames: function() {
return _Textarea.textareaClassNames;
},
useTextareaBase_unstable: function() {
return _Textarea.useTextareaBase_unstable;
},
useTextareaStyles_unstable: function() {
return _Textarea.useTextareaStyles_unstable;
},
useTextarea_unstable: function() {
return _Textarea.useTextarea_unstable;
}
});
const _Textarea = require("./Textarea");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n useTextareaBase_unstable,\n} from './Textarea';\nexport type {\n TextareaOnChangeData,\n TextareaProps,\n TextareaSlots,\n TextareaState,\n TextareaBaseProps,\n TextareaBaseState,\n} from './Textarea';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable","useTextareaBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,kBAAQ;;;eACRC,iCAAuB;;;eACvBC,4BAAkB;;;eAGlBG,kCAAwB;;;eAFxBF,oCAA0B;;;eAC1BC,8BAAoB;;;0BAEf,aAAa"}