@fluentui/react-textarea 9.6.0 → 9.6.1
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.
- package/CHANGELOG.md +13 -2
- package/lib/Textarea.js.map +1 -1
- package/lib/components/Textarea/Textarea.js.map +1 -1
- package/lib/components/Textarea/Textarea.types.js.map +1 -1
- package/lib/components/Textarea/index.js.map +1 -1
- package/lib/components/Textarea/renderTextarea.js.map +1 -1
- package/lib/components/Textarea/useTextarea.js.map +1 -1
- package/lib/components/Textarea/useTextareaStyles.styles.raw.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Textarea.js.map +1 -1
- package/lib-commonjs/components/Textarea/Textarea.js.map +1 -1
- package/lib-commonjs/components/Textarea/Textarea.types.js.map +1 -1
- package/lib-commonjs/components/Textarea/index.js.map +1 -1
- package/lib-commonjs/components/Textarea/renderTextarea.js.map +1 -1
- package/lib-commonjs/components/Textarea/useTextarea.js.map +1 -1
- package/lib-commonjs/components/Textarea/useTextareaStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Textarea/useTextareaStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-textarea
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.6.1)
|
|
8
|
+
|
|
9
|
+
Mon, 28 Jul 2025 18:44:12 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.6.0..@fluentui/react-textarea_v9.6.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-field to v9.4.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-textarea_v9.6.0)
|
|
8
19
|
|
|
9
|
-
Thu, 17 Jul 2025 13:
|
|
20
|
+
Thu, 17 Jul 2025 13:49:50 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-textarea_v9.5.7..@fluentui/react-textarea_v9.6.0)
|
|
11
22
|
|
|
12
23
|
### Minor changes
|
package/lib/Textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Textarea.ts"],"sourcesContent":["export type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './components/Textarea/index';\nexport {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n} from './components/Textarea/index';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable"],"
|
|
1
|
+
{"version":3,"sources":["../src/Textarea.ts"],"sourcesContent":["export type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './components/Textarea/index';\nexport {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n} from './components/Textarea/index';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable"],"mappings":"AACA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * 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"],"
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
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 * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n Required<Pick<TextareaProps, 'appearance' | 'resize' | '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"],"
|
|
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 * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n Required<Pick<TextareaProps, 'appearance' | 'resize' | '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":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/index.ts"],"sourcesContent":["export { Textarea } from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea.types';\nexport { renderTextarea_unstable } from './renderTextarea';\nexport { useTextarea_unstable } from './useTextarea';\nexport { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';\n"],"names":["Textarea","renderTextarea_unstable","useTextarea_unstable","textareaClassNames","useTextareaStyles_unstable"],"
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/index.ts"],"sourcesContent":["export { Textarea } from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea.types';\nexport { renderTextarea_unstable } from './renderTextarea';\nexport { useTextarea_unstable } from './useTextarea';\nexport { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';\n"],"names":["Textarea","renderTextarea_unstable","useTextarea_unstable","textareaClassNames","useTextareaStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
|
|
@@ -1 +1 @@
|
|
|
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 { TextareaState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaState) => {\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"],"
|
|
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 { TextareaState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaState) => {\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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,QAAQ;;AAGrB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n const overrides = useOverrides();\n\n const {\n size = 'medium',\n appearance = overrides.inputDefaultAppearance ?? 'outline',\n resize = 'none',\n onChange,\n } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: undefined,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'textarea',\n excludedPropNames: ['onChange', 'value', 'defaultValue'],\n });\n\n const state: TextareaState = {\n size,\n appearance,\n resize,\n components: {\n root: 'span',\n textarea: 'textarea',\n },\n textarea: slot.always(props.textarea, {\n defaultProps: {\n ref,\n ...nativeProps.primary,\n },\n elementType: 'textarea',\n }),\n root: slot.always(props.root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.textarea.value = value;\n state.textarea.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","resize","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n const overrides = useOverrides();\n\n const {\n size = 'medium',\n appearance = overrides.inputDefaultAppearance ?? 'outline',\n resize = 'none',\n onChange,\n } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: undefined,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'textarea',\n excludedPropNames: ['onChange', 'value', 'defaultValue'],\n });\n\n const state: TextareaState = {\n size,\n appearance,\n resize,\n components: {\n root: 'span',\n textarea: 'textarea',\n },\n textarea: slot.always(props.textarea, {\n defaultProps: {\n ref,\n ...nativeProps.primary,\n },\n elementType: 'textarea',\n }),\n root: slot.always(props.root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.textarea.value = value;\n state.textarea.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","resize","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYP;QAIHO;IAFf,MAAM,EACJC,OAAO,QAAQ,EACfC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAC1DI,SAAS,MAAM,EACfC,QAAQ,EACT,GAAGV;IAEJ,IACEW,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBN,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCO,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGvB,qBAAqB;QAC7CwB,OAAOlB,MAAMgB,KAAK;QAClBG,cAAcnB,MAAMoB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,cAAc9B,0BAA0B;QAC5CO;QACAwB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAAuB;QAC3BZ;QACAC;QACAE;QACAiB,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUhC,KAAKiC,MAAM,CAAC7B,MAAM4B,QAAQ,EAAE;YACpCE,cAAc;gBACZ7B;gBACA,GAAGsB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAM/B,KAAKiC,MAAM,CAAC7B,MAAM2B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAAClB,QAAQ,GAAGf,iBAAiBsC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCN,qBAAAA,+BAAAA,SAAWuB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top',\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${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: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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 border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke,\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n\n outlineStyle: 'none', // disable default browser outline\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1,\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2,\n },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none',\n },\n both: {\n resize: 'both',\n },\n horizontal: {\n resize: 'horizontal',\n },\n vertical: {\n resize: 'vertical',\n },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n 'use no memo';\n\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n disabled && rootStyles.disabled,\n !disabled && filled && rootStyles.filled,\n !disabled && rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && invalid && rootStyles.invalid,\n state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n disabled && textareaStyles.disabled,\n state.textarea.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundInverted","colorNeutralBackgroundInverted","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top',\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${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: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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 border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke,\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n\n outlineStyle: 'none', // disable default browser outline\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1,\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2,\n },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none',\n },\n both: {\n resize: 'both',\n },\n horizontal: {\n resize: 'horizontal',\n },\n vertical: {\n resize: 'vertical',\n },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n 'use no memo';\n\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n disabled && rootStyles.disabled,\n !disabled && filled && rootStyles.filled,\n !disabled && rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && invalid && rootStyles.invalid,\n state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n disabled && textareaStyles.disabled,\n state.textarea.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundInverted","colorNeutralBackgroundInverted","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable"],"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable"],"mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Textarea.ts"],"sourcesContent":["export type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './components/Textarea/index';\nexport {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n} from './components/Textarea/index';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable"],"
|
|
1
|
+
{"version":3,"sources":["../src/Textarea.ts"],"sourcesContent":["export type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './components/Textarea/index';\nexport {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n} from './components/Textarea/index';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable"],"mappings":";;;;;;;;;;;;eAEEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAClBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * 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":["
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * 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":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;gCACS,mBAAmB;6BACtB,gBAAgB;yCACV,6BAA6B;qCAG5B,kCAAkC;AAKvE,iBAAMA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQP,qCAAAA,EAAqBK,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
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 * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n Required<Pick<TextareaProps, 'appearance' | 'resize' | '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":[
|
|
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 * State used in rendering Textarea\n */\nexport type TextareaState = ComponentState<TextareaSlots> &\n Required<Pick<TextareaProps, 'appearance' | 'resize' | '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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/index.ts"],"sourcesContent":["export { Textarea } from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea.types';\nexport { renderTextarea_unstable } from './renderTextarea';\nexport { useTextarea_unstable } from './useTextarea';\nexport { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';\n"],"names":["Textarea","renderTextarea_unstable","
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/index.ts"],"sourcesContent":["export { Textarea } from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea.types';\nexport { renderTextarea_unstable } from './renderTextarea';\nexport { useTextarea_unstable } from './useTextarea';\nexport { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';\n"],"names":["Textarea","renderTextarea_unstable","useTextarea_unstable","textareaClassNames","useTextareaStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAERC,uCAAuB;;;eAEvBE,2CAAkB;;;eAAEC,mDAA0B;;;eAD9CF,iCAAoB;;;0BAHJ,aAAa;gCAEE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}
|
|
@@ -1 +1 @@
|
|
|
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 { TextareaState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaState) => {\n assertSlots<TextareaSlots>(state);\n\n return (\n <state.root>\n <state.textarea />\n </state.root>\n );\n};\n"],"names":["
|
|
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 { TextareaState, TextareaSlots } from './Textarea.types';\n\n/**\n * Render the final JSX of Textarea\n */\nexport const renderTextarea_unstable = (state: TextareaState) => {\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":";;;;+BASaC;;;;;;4BARb,gDAAiD;gCAErB,4BAA4B;AAMjD,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n const overrides = useOverrides();\n\n const {\n size = 'medium',\n appearance = overrides.inputDefaultAppearance ?? 'outline',\n resize = 'none',\n onChange,\n } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: undefined,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'textarea',\n excludedPropNames: ['onChange', 'value', 'defaultValue'],\n });\n\n const state: TextareaState = {\n size,\n appearance,\n resize,\n components: {\n root: 'span',\n textarea: 'textarea',\n },\n textarea: slot.always(props.textarea, {\n defaultProps: {\n ref,\n ...nativeProps.primary,\n },\n elementType: 'textarea',\n }),\n root: slot.always(props.root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.textarea.value = value;\n state.textarea.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"names":["useTextarea_unstable","props","ref","
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/useTextarea.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TextareaProps, TextareaState } from './Textarea.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Textarea.\n *\n * The returned state can be modified with hooks such as useTextareaStyles_unstable,\n * before being passed to renderTextarea_unstable.\n *\n * @param props - props from this instance of Textarea\n * @param ref - reference to root HTMLElement of Textarea\n */\nexport const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n const overrides = useOverrides();\n\n const {\n size = 'medium',\n appearance = overrides.inputDefaultAppearance ?? 'outline',\n resize = 'none',\n onChange,\n } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: undefined,\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'textarea',\n excludedPropNames: ['onChange', 'value', 'defaultValue'],\n });\n\n const state: TextareaState = {\n size,\n appearance,\n resize,\n components: {\n root: 'span',\n textarea: 'textarea',\n },\n textarea: slot.always(props.textarea, {\n defaultProps: {\n ref,\n ...nativeProps.primary,\n },\n elementType: 'textarea',\n }),\n root: slot.always(props.root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.textarea.value = value;\n state.textarea.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useTextarea_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","resize","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","undefined","nativeProps","primarySlotTagName","excludedPropNames","components","root","textarea","always","defaultProps","primary","elementType","ev","newValue","target"],"mappings":";;;;+BAeaQ;;;;;;;iEAfU,QAAQ;4BACe,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,6BAA6B,CAACC,OAAsBC;IACzD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAIHO;IAFf,MAAM,EACJC,OAAO,QAAQ,EACfC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAAA,AAAsB,MAAA,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAC1DI,SAAS,MAAM,EACfC,QAAQ,EACT,GAAGV;IAEJ,IACEW,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBN,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCO,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAM,CAACC,OAAOC,SAAS,OAAGvB,oCAAAA,EAAqB;QAC7CwB,OAAOlB,MAAMgB,KAAK;QAClBG,cAAcnB,MAAMoB,YAAY;QAChCC,cAAcC;IAChB;IAEA,MAAMC,kBAAc9B,yCAAAA,EAA0B;QAC5CO;QACAwB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMP,QAAuB;QAC3BZ;QACAC;QACAE;QACAiB,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUhC,oBAAAA,CAAKiC,MAAM,CAAC7B,MAAM4B,QAAQ,EAAE;YACpCE,cAAc;gBACZ7B;gBACA,GAAGsB,YAAYQ,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,MAAM/B,oBAAAA,CAAKiC,MAAM,CAAC7B,MAAM2B,IAAI,EAAE;YAC5BG,cAAcP,YAAYI,IAAI;YAC9BK,aAAa;QACf;IACF;IAEAd,MAAMU,QAAQ,CAACZ,KAAK,GAAGA;IACvBE,MAAMU,QAAQ,CAAClB,QAAQ,OAAGf,gCAAAA,EAAiBsC,CAAAA;QACzC,MAAMC,WAAWD,GAAGE,MAAM,CAACnB,KAAK;QAChCN,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWuB,IAAI;YAAEjB,OAAOkB;QAAS;QACjCjB,SAASiB;IACX;IAEA,OAAOhB;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTextareaStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top'\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // 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(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\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: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n }\n },\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\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 border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted\n },\n outlineStyle: 'none'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2\n }\n});\n/**\n * Styles for the textarea's resize property\n */ const useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none'\n },\n both: {\n resize: 'both'\n },\n horizontal: {\n resize: 'horizontal'\n },\n vertical: {\n resize: 'vertical'\n }\n});\n/**\n * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n 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);\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n return state;\n};\n"],"names":["textareaClassNames","useTextareaStyles_unstable","root","textarea","useRootStyles","__styles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","B4brmom","Brrnbx2","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","state","size","appearance","resize","startsWith","rootStyles","className","mergeClasses","textareaStyles","textareaResizeStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTextareaStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const textareaClassNames = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea'\n};\n/**\n * Styles for the root(wrapper) slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top'\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n },\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // 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(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\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: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent'\n }\n },\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\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 border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n});\n/**\n * Styles for the textarea slot\n */ const useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted\n },\n outlineStyle: 'none'\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2\n }\n});\n/**\n * Styles for the textarea's resize property\n */ const useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none'\n },\n both: {\n resize: 'both'\n },\n horizontal: {\n resize: 'horizontal'\n },\n vertical: {\n resize: 'vertical'\n }\n});\n/**\n * Apply styling to the Textarea slots based on the state\n */ export const useTextareaStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n 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);\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(textareaClassNames.textarea, textareaStyles.base, textareaStyles[size], textareaResizeStyles[resize], disabled && textareaStyles.disabled, state.textarea.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","mc9l5x","B7ck84d","qhf8xq","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","ha4doy","disabled","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","interactive","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","Bbr2w1p","Bduesf4","Bpq79vn","filled","q7v0qe","kmh5ft","nagaa4","B1yhkcb","E5pizo","outline","outlineInteractive","kzujx5","oetu4i","gvrnp0","xv9156","jek2p4","gg5e9n","Beu9t3s","dt87k2","Bt1vbvt","Bwzppfd","Bop6t4b","B2zwrfe","Bwp2tzp","Bgoe8wy","Bf40cpq","ckks6v","Baalond","v2iqwr","wmxk5l","Bj33j0h","Bs0cc2w","qwjtx1","B50zh58","f7epvg","e1hlit","B7mkhst","ak43y8","Bbcopvn","Bvecx4l","lwioe0","B6oc9vd","e2sjt0","uqwnxt","asj8p9","Br8fjdy","zoxjo1","Bt3ojkv","B7pmvfx","Bfht2n1","an54nd","t1ykpo","Belqbek","bbt1vd","Brahy3i","r7b1zc","rexu52","ovtnii","Bvq3b66","Bawrxx6","Bbs6y8j","B2qpgjt","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","d","p","m","w","h","a","useTextareaStyles","sj55zd","Bh6795r","Bahqtrf","Bqenvij","yvdlaj","B3o7kgh","B4brmom","Brrnbx2","oeaueh","Bceei9c","small","sshi5w","Bxyxcbc","Be2twd7","Bhrd7zp","Bg96gwp","medium","large","useTextareaResizeStyles","none","B3rzk8w","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","resize","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top',\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${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: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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 border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke,\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n\n outlineStyle: 'none', // disable default browser outline\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1,\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2,\n },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none',\n },\n both: {\n resize: 'both',\n },\n horizontal: {\n resize: 'horizontal',\n },\n vertical: {\n resize: 'vertical',\n },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n 'use no memo';\n\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n disabled && rootStyles.disabled,\n !disabled && filled && rootStyles.filled,\n !disabled && rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && invalid && rootStyles.invalid,\n state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n disabled && textareaStyles.disabled,\n state.textarea.className,\n );\n\n return state;\n};\n"],"names":["textareaClassNames","useTextareaStyles_unstable","root","textarea","useRootStyles","makeStyles","base","display","boxSizing","position","padding","tokens","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","shorthands","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundInverted","colorNeutralBackgroundInverted","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","typographyStyles","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","state","size","appearance","startsWith","rootStyles","className","mergeClasses","textareaStyles","textareaResizeStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Textarea/useTextareaStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TextareaSlots, TextareaState } from './Textarea.types';\n\nexport const textareaClassNames: SlotClassNames<TextareaSlots> = {\n root: 'fui-Textarea',\n textarea: 'fui-Textarea__textarea',\n};\n\n/**\n * Styles for the root(wrapper) slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n boxSizing: 'border-box',\n position: 'relative',\n // Padding needed so the focus indicator does not overlap the resize handle, this should match focus indicator size.\n padding: `0 0 ${tokens.strokeWidthThick} 0`,\n margin: '0',\n borderRadius: tokens.borderRadiusMedium,\n verticalAlign: 'top',\n },\n\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeDisabled}`,\n\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n interactive: {\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(${tokens.strokeWidthThick}, ${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: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: `inset(calc(100% - ${tokens.strokeWidthThick}) 0 0 0)`,\n\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n\n filled: {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ':hover,:focus-within': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\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 border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStrokeInteractive}`,\n boxShadow: tokens.shadow2,\n },\n\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n outlineInteractive: {\n ':hover': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Hover}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n\n ':active': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n\n ':focus-within': {\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1Pressed}`,\n borderBottomColor: tokens.colorCompoundBrandStroke,\n },\n },\n\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n});\n\n/**\n * Styles for the textarea slot\n */\nconst useTextareaStyles = makeStyles({\n base: {\n ...shorthands.borderStyle('none'),\n margin: '0',\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n fontFamily: tokens.fontFamilyBase,\n height: '100%',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1,\n },\n\n '::selection': {\n color: tokens.colorNeutralForegroundInverted,\n backgroundColor: tokens.colorNeutralBackgroundInverted,\n },\n\n outlineStyle: 'none', // disable default browser outline\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // The padding style adds both content and regular padding (from design spec), this is because the handle is not\n // affected by changing the padding of the root.\n small: {\n minHeight: '40px',\n padding: `${tokens.spacingVerticalXS} calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '200px',\n ...typographyStyles.caption1,\n },\n medium: {\n minHeight: '52px',\n padding: `${tokens.spacingVerticalSNudge} calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '260px',\n ...typographyStyles.body1,\n },\n large: {\n minHeight: '64px',\n padding: `${tokens.spacingVerticalS} calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalXXS})`,\n maxHeight: '320px',\n ...typographyStyles.body2,\n },\n});\n\n/**\n * Styles for the textarea's resize property\n */\nconst useTextareaResizeStyles = makeStyles({\n none: {\n resize: 'none',\n },\n both: {\n resize: 'both',\n },\n horizontal: {\n resize: 'horizontal',\n },\n vertical: {\n resize: 'vertical',\n },\n});\n\n/**\n * Apply styling to the Textarea slots based on the state\n */\nexport const useTextareaStyles_unstable = (state: TextareaState): TextareaState => {\n 'use no memo';\n\n const { size, appearance, resize } = state;\n const disabled = state.textarea.disabled;\n const invalid = `${state.textarea['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n textareaClassNames.root,\n rootStyles.base,\n disabled && rootStyles.disabled,\n !disabled && filled && rootStyles.filled,\n !disabled && rootStyles[appearance],\n !disabled && rootStyles.interactive,\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && invalid && rootStyles.invalid,\n state.root.className,\n );\n\n const textareaStyles = useTextareaStyles();\n const textareaResizeStyles = useTextareaResizeStyles();\n state.textarea.className = mergeClasses(\n textareaClassNames.textarea,\n textareaStyles.base,\n textareaStyles[size],\n textareaResizeStyles[resize],\n disabled && textareaStyles.disabled,\n state.textarea.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","textareaClassNames","root","textarea","useRootStyles","base","display","boxSizing","position","padding","strokeWidthThick","margin","borderRadius","borderRadiusMedium","verticalAlign","disabled","backgroundColor","colorTransparentBackground","border","strokeWidthThin","colorNeutralStrokeDisabled","borderColor","interactive","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","outlineWidth","outlineStyle","outlineColor","filled","colorTransparentStroke","colorTransparentStrokeInteractive","colorNeutralBackground3","colorNeutralBackground1","boxShadow","shadow2","outline","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","invalid","colorPaletteRedBorder2","useTextareaStyles","borderStyle","color","colorNeutralForeground1","flexGrow","fontFamily","fontFamilyBase","colorNeutralForeground4","opacity","colorNeutralForegroundInverted","colorNeutralBackgroundInverted","colorNeutralForegroundDisabled","cursor","small","minHeight","spacingVerticalXS","spacingHorizontalSNudge","spacingHorizontalXXS","maxHeight","caption1","medium","spacingVerticalSNudge","spacingHorizontalMNudge","body1","large","spacingVerticalS","spacingHorizontalM","body2","useTextareaResizeStyles","none","resize","both","horizontal","vertical","useTextareaStyles_unstable","state","size","appearance","startsWith","rootStyles","className","textareaStyles","textareaResizeStyles"],"mappings":";;;;;;;;;;;IAKaK,kBAAAA;;;8BA2NAgG;eAAAA;;;uBAhOwC,iBAAiB;4BAC7B,wBAAwB;AAI1D,2BAA0D;IAC/D/F,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,oBAAgBR,iBAAAA,EAAW;IAC/BS,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACV,oHAAoH;QACpHC,SAAS,CAAC,IAAI,EAAEV,kBAAAA,CAAOW,gBAAgB,CAAC,EAAE,CAAC;QAC3CC,QAAQ;QACRC,cAAcb,kBAAAA,CAAOc,kBAAkB;QACvCC,eAAe;IACjB;IAEAC,UAAU;QACRC,iBAAiBjB,kBAAAA,CAAOkB,0BAA0B;QAClDC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOqB,0BAA0B,EAAE;QAE9E,kCAAkC;YAChC,GAAGtB,iBAAAA,CAAWuB,WAAW,CAAC,WAAW;QACvC;IACF;IAEAC,aAAa;QACX,2CAA2C;QAC3C,+FAA+F;QAC/F,WAAW;YACTf,WAAW;YACXgB,SAAS;YACTf,UAAU;YACVgB,MAAM;YACNC,QAAQ;YACRC,OAAO;YAEP,yCAAyC;YACzC,sFAAsF;YACtF,gFAAgF;YAChF,qGAAqG;YACrGC,QAAQ,CAAC,IAAI,EAAE5B,kBAAAA,CAAOW,gBAAgB,CAAC,EAAE,EAAEX,kBAAAA,CAAOc,kBAAkB,CAAC,CAAC,CAAC;YACvEe,wBAAwB7B,kBAAAA,CAAOc,kBAAkB;YACjDgB,yBAAyB9B,kBAAAA,CAAOc,kBAAkB;YAElD,mBAAmB;YACnB,8FAA8F;YAC9F,2FAA2F;YAC3F,4EAA4E;YAC5EiB,cAAc,GAAG/B,kBAAAA,CAAOW,gBAAgB,CAAC,OAAO,EAAEX,kBAAAA,CAAOgC,wBAAwB,EAAE;YACnFC,UAAU,CAAC,kBAAkB,EAAEjC,kBAAAA,CAAOW,gBAAgB,CAAC,QAAQ,CAAC;YAEhE,0BAA0B;YAC1BuB,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,kBAAAA,CAAOqC,iBAAiB;YAC5CC,iBAAiBtC,kBAAAA,CAAOuC,kBAAkB;YAE1C,sDAAsD;gBACpDH,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,wBAAwB;YACtB,yBAAyB;YACzBJ,WAAW;YACXC,oBAAoB;YACpBC,oBAAoBpC,kBAAAA,CAAOwC,cAAc;YACzCF,iBAAiBtC,kBAAAA,CAAOyC,kBAAkB;YAE1C,sDAAsD;gBACpDL,oBAAoB;gBACpBE,iBAAiB;YACnB;QACF;QACA,+BAA+B;YAC7B,wEAAwE;YACxEI,mBAAmB1C,kBAAAA,CAAO2C,+BAA+B;QAC3D;QACA,iBAAiB;YACfC,cAAc5C,kBAAAA,CAAOW,gBAAgB;YACrCkC,cAAc;YACdC,cAAc;QAChB;IACF;IAEAC,QAAQ;QACN5B,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOgD,sBAAsB,EAAE;QAC1E,wBAAwB;YACtB,GAAGjD,iBAAAA,CAAWuB,WAAW,CAACtB,kBAAAA,CAAOiD,iCAAiC,CAAC;QACrE;IACF;IACA,iBAAiB;QACfhC,iBAAiBjB,kBAAAA,CAAOkD,uBAAuB;IACjD;IACA,kBAAkB;QAChBjC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;IACjD;IACA,wBAAwB;QACtBlC,iBAAiBjB,kBAAAA,CAAOkD,uBAAuB;QAC/C/B,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,kBAAAA,CAAOqD,OAAO;IAC3B;IACA,yBAAyB;QACvBpC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOiD,iCAAiC,EAAE;QACrFG,WAAWpD,kBAAAA,CAAOqD,OAAO;IAC3B;IAEAC,SAAS;QACPrC,iBAAiBjB,kBAAAA,CAAOmD,uBAAuB;QAC/ChC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAOuD,mBAAmB,EAAE;QACvEb,mBAAmB1C,kBAAAA,CAAOwD,4BAA4B;IACxD;IACAC,oBAAoB;QAClB,UAAU;YACRtC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO0D,wBAAwB,EAAE;YAC5EhB,mBAAmB1C,kBAAAA,CAAO2D,iCAAiC;QAC7D;QAEA,WAAW;YACTxC,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,kBAAAA,CAAO6D,mCAAmC;QAC/D;QAEA,iBAAiB;YACf1C,QAAQ,GAAGnB,kBAAAA,CAAOoB,eAAe,CAAC,OAAO,EAAEpB,kBAAAA,CAAO4D,0BAA0B,EAAE;YAC9ElB,mBAAmB1C,kBAAAA,CAAOgC,wBAAwB;QACpD;IACF;IAEA8B,SAAS;QACP,iDAAiD;YAC/C,GAAG/D,iBAAAA,CAAWuB,WAAW,CAACtB,kBAAAA,CAAO+D,sBAAsB,CAAC;QAC1D;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,wBAAoBnE,iBAAAA,EAAW;IACnCS,MAAM;QACJ,GAAGP,iBAAAA,CAAWkE,WAAW,CAAC,OAAO;QACjCrD,QAAQ;QACRK,iBAAiB;QACjBT,WAAW;QACX0D,OAAOlE,kBAAAA,CAAOmE,uBAAuB;QACrCC,UAAU;QACVC,YAAYrE,kBAAAA,CAAOsE,cAAc;QACjC1C,QAAQ;QAER,iBAAiB;YACfsC,OAAOlE,kBAAAA,CAAOuE,uBAAuB;YACrCC,SAAS;QACX;QAEA,eAAe;YACbN,OAAOlE,kBAAAA,CAAOyE,8BAA8B;YAC5CxD,iBAAiBjB,kBAAAA,CAAO0E,8BAA8B;QACxD;QAEA7B,cAAc;IAChB;IAEA7B,UAAU;QACRkD,OAAOlE,kBAAAA,CAAO2E,8BAA8B;QAC5CC,QAAQ;QACR,iBAAiB;YACfV,OAAOlE,kBAAAA,CAAO2E,8BAA8B;QAC9C;IACF;IAEA,gHAAgH;IAChH,gDAAgD;IAChDE,OAAO;QACLC,WAAW;QACXpE,SAAS,GAAGV,kBAAAA,CAAO+E,iBAAiB,CAAC,MAAM,EAAE/E,kBAAAA,CAAOgF,uBAAuB,CAAC,GAAG,EAAEhF,kBAAAA,CAAOiF,oBAAoB,CAAC,CAAC,CAAC;QAC/GC,WAAW;QACX,GAAGjF,4BAAAA,CAAiBkF,QAAQ;IAC9B;IACAC,QAAQ;QACNN,WAAW;QACXpE,SAAS,GAAGV,kBAAAA,CAAOqF,qBAAqB,CAAC,MAAM,EAAErF,kBAAAA,CAAOsF,uBAAuB,CAAC,GAAG,EAAEtF,kBAAAA,CAAOiF,oBAAoB,CAAC,CAAC,CAAC;QACnHC,WAAW;QACX,GAAGjF,4BAAAA,CAAiBsF,KAAK;IAC3B;IACAC,OAAO;QACLV,WAAW;QACXpE,SAAS,GAAGV,kBAAAA,CAAOyF,gBAAgB,CAAC,MAAM,EAAEzF,kBAAAA,CAAO0F,kBAAkB,CAAC,GAAG,EAAE1F,kBAAAA,CAAOiF,oBAAoB,CAAC,CAAC,CAAC;QACzGC,WAAW;QACX,GAAGjF,4BAAAA,CAAiB0F,KAAK;IAC3B;AACF;AAEA;;CAEC,GACD,MAAMC,0BAA0B/F,qBAAAA,EAAW;IACzCgG,MAAM;QACJC,QAAQ;IACV;IACAC,MAAM;QACJD,QAAQ;IACV;IACAE,YAAY;QACVF,QAAQ;IACV;IACAG,UAAU;QACRH,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACK;IACzC;IAEA,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEP,MAAM,EAAE,GAAGK;IACrC,MAAMnF,WAAWmF,MAAM/F,QAAQ,CAACY,QAAQ;IACxC,MAAM8C,UAAU,GAAGqC,MAAM/F,QAAQ,CAAC,eAAe,EAAE,KAAK;IACxD,MAAM2C,SAASsD,WAAWC,UAAU,CAAC;IAErC,MAAMC,aAAalG;IACnB8F,MAAMhG,IAAI,CAACqG,SAAS,OAAG1G,mBAAAA,EACrBI,mBAAmBC,IAAI,EACvBoG,WAAWjG,IAAI,EACfU,YAAYuF,WAAWvF,QAAQ,EAC/B,CAACA,YAAY+B,UAAUwD,WAAWxD,MAAM,EACxC,CAAC/B,YAAYuF,UAAU,CAACF,WAAW,EACnC,CAACrF,YAAYuF,WAAWhF,WAAW,EACnC,CAACP,YAAYqF,eAAe,aAAaE,WAAW9C,kBAAkB,EACtE,CAACzC,YAAY8C,WAAWyC,WAAWzC,OAAO,EAC1CqC,MAAMhG,IAAI,CAACqG,SAAS;IAGtB,MAAMC,iBAAiBzC;IACvB,MAAM0C,uBAAuBd;IAC7BO,MAAM/F,QAAQ,CAACoG,SAAS,OAAG1G,mBAAAA,EACzBI,mBAAmBE,QAAQ,EAC3BqG,eAAenG,IAAI,EACnBmG,cAAc,CAACL,KAAK,EACpBM,oBAAoB,CAACZ,OAAO,EAC5B9E,YAAYyF,eAAezF,QAAQ,EACnCmF,MAAM/F,QAAQ,CAACoG,SAAS;IAG1B,OAAOL;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable"],"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Textarea,\n renderTextarea_unstable,\n textareaClassNames,\n useTextareaStyles_unstable,\n useTextarea_unstable,\n} from './Textarea';\nexport type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea';\n"],"names":["Textarea","renderTextarea_unstable","textareaClassNames","useTextareaStyles_unstable","useTextarea_unstable"],"mappings":";;;;;;;;;;;;eACEA,kBAAQ;;;eACRC,iCAAuB;;;eACvBC,4BAAkB;;;eAClBC,oCAA0B;;;eAC1BC,8BAAoB;;;0BACf,aAAa"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-textarea",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.1",
|
|
4
4
|
"description": "Fluent UI TextArea component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-field": "^9.4.
|
|
21
|
+
"@fluentui/react-field": "^9.4.1",
|
|
22
22
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
|
23
23
|
"@fluentui/react-theme": "^9.1.24",
|
|
24
|
-
"@fluentui/react-utilities": "^9.
|
|
25
|
-
"@fluentui/react-jsx-runtime": "^9.1.
|
|
24
|
+
"@fluentui/react-utilities": "^9.23.0",
|
|
25
|
+
"@fluentui/react-jsx-runtime": "^9.1.3",
|
|
26
26
|
"@griffel/react": "^1.5.22",
|
|
27
27
|
"@swc/helpers": "^0.5.1"
|
|
28
28
|
},
|