@elliemae/ds-form-input-textarea 3.49.0-rc.9 → 3.49.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/dist/cjs/DSControlledLargeTextInput.js +7 -3
- package/dist/cjs/DSControlledLargeTextInput.js.map +2 -2
- package/dist/cjs/exported-related/data-test-ids.js +3 -3
- package/dist/cjs/exported-related/data-test-ids.js.map +2 -2
- package/dist/cjs/exported-related/theming.js +2 -3
- package/dist/cjs/exported-related/theming.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -0
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +17 -8
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSControlledLargeTextInput.js +9 -4
- package/dist/esm/DSControlledLargeTextInput.js.map +2 -2
- package/dist/esm/exported-related/data-test-ids.js +3 -3
- package/dist/esm/exported-related/data-test-ids.js.map +2 -2
- package/dist/esm/exported-related/theming.js +2 -3
- package/dist/esm/exported-related/theming.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +3 -0
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +17 -8
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/DSControlledLargeTextInput.d.ts +1 -0
- package/dist/types/exported-related/data-test-ids.d.ts +2 -3
- package/dist/types/exported-related/theming.d.ts +1 -2
- package/dist/types/react-desc-prop-types.d.ts +460 -456
- package/dist/types/styles.d.ts +1 -0
- package/package.json +9 -6
|
@@ -43,6 +43,7 @@ var import_exported_related = require("./exported-related/index.js");
|
|
|
43
43
|
const DSControlledLargeTextInput = (props) => {
|
|
44
44
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes, import_exported_related.DSControlledLargeTextInputName);
|
|
45
45
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
46
|
+
const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault, { ...props });
|
|
46
47
|
const { value, onChange, readOnly, innerRef, name, id, hasError, maxHeight, applyAriaDisabled, ...otherProps } = propsWithDefault;
|
|
47
48
|
const { className, rows, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(otherProps);
|
|
48
49
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(otherProps);
|
|
@@ -78,10 +79,11 @@ const DSControlledLargeTextInput = (props) => {
|
|
|
78
79
|
className,
|
|
79
80
|
"data-testid": import_exported_related.DSControlledLargetTextInputDatatestids.CONTAINER,
|
|
80
81
|
$isDisabled: otherProps.disabled,
|
|
81
|
-
applyAriaDisabled,
|
|
82
|
+
applyAriaDisabled: applyAriaDisabled || readOnly,
|
|
82
83
|
...xstyledProps,
|
|
84
|
+
...ownerPropsConfig,
|
|
83
85
|
children: [
|
|
84
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.WrapperBorder, { $hasError: hasError, $isDisabled: otherProps.disabled, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.WrapperBorder, { $hasError: hasError, $isDisabled: otherProps.disabled, $isReadOnly: applyAriaDisabled || readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
87
|
import_styles.StyledTextArea,
|
|
86
88
|
{
|
|
87
89
|
innerRef: referenceSetter,
|
|
@@ -99,7 +101,8 @@ const DSControlledLargeTextInput = (props) => {
|
|
|
99
101
|
"aria-disabled": applyAriaDisabled,
|
|
100
102
|
...globalAttributes,
|
|
101
103
|
readOnly,
|
|
102
|
-
"aria-readonly": readOnly
|
|
104
|
+
"aria-readonly": readOnly,
|
|
105
|
+
...ownerPropsConfig
|
|
103
106
|
}
|
|
104
107
|
) }),
|
|
105
108
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -107,6 +110,7 @@ const DSControlledLargeTextInput = (props) => {
|
|
|
107
110
|
{
|
|
108
111
|
disabled: true,
|
|
109
112
|
"aria-label": "ghost textarea",
|
|
113
|
+
"data-testid": "",
|
|
110
114
|
innerRef: ghostRef,
|
|
111
115
|
value,
|
|
112
116
|
$maxHeight: maxHeight,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSControlledLargeTextInput.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useMemo, useRef, useState, useLayoutEffect, useEffect } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextArea, StyledContainer, WrapperBorder } from './styles.js';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related/index.js';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types.js';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.InternalProps>(props, defaultProps);\n\n const { value, onChange, readOnly, innerRef, name, id, hasError, maxHeight, applyAriaDisabled, ...otherProps } =\n propsWithDefault;\n\n const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const [calculatedMinHeight, setCalculatedMinHeight] = useState<number>();\n const [scrollBarWidth, setScrollBarWidth] = useState<number>(0);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback<React.KeyboardEventHandler<HTMLTextAreaElement>>(\n (e) => {\n if (applyAriaDisabled) return;\n onChange(e.currentTarget.value, e);\n },\n [onChange, applyAriaDisabled],\n );\n\n useEffect(() => {\n if (textareaRef && textareaRef.current) {\n const { offsetWidth, clientWidth } = textareaRef.current;\n setScrollBarWidth(offsetWidth - clientWidth);\n }\n }, [value]);\n\n useLayoutEffect(() => {\n if (ghostRef && ghostRef.current) {\n const { offsetHeight, scrollHeight } = ghostRef.current;\n if (rows !== undefined) setCalculatedMinHeight(offsetHeight);\n else if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(maxHeight);\n else setCalculatedMinHeight(scrollHeight);\n }\n }, [maxHeight, value, rows]);\n\n const referenceSetter = useMemo(() => mergeRefs(textareaRef, innerRef), [innerRef]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n $isDisabled={otherProps.disabled}\n applyAriaDisabled={applyAriaDisabled}\n {...xstyledProps}\n >\n <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled}>\n <StyledTextArea\n innerRef={referenceSetter}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n rows={rows}\n aria-describedby={\n id !== undefined ? `${id}_feedback_message ${id}_error_message ${id}_remaining_characters` : undefined\n }\n aria-invalid={hasError}\n aria-disabled={applyAriaDisabled}\n {...globalAttributes}\n readOnly={readOnly}\n aria-readonly={readOnly}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n aria-label=\"ghost textarea\"\n innerRef={ghostRef}\n value={value}\n $maxHeight={maxHeight}\n rows={rows}\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n paddingLeft: '9px',\n paddingRight: `${9 + scrollBarWidth}px`,\n overflow: 'hidden',\n }}\n />\n </StyledContainer>\n );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as ValidationMap<unknown>;\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useMemo, useRef, useState, useLayoutEffect, useEffect } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n type ValidationMap,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextArea, StyledContainer, WrapperBorder } from './styles.js';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related/index.js';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types.js';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.InternalProps>(props, defaultProps);\n\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n const { value, onChange, readOnly, innerRef, name, id, hasError, maxHeight, applyAriaDisabled, ...otherProps } =\n propsWithDefault;\n\n const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const [calculatedMinHeight, setCalculatedMinHeight] = useState<number>();\n const [scrollBarWidth, setScrollBarWidth] = useState<number>(0);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback<React.KeyboardEventHandler<HTMLTextAreaElement>>(\n (e) => {\n if (applyAriaDisabled) return;\n onChange(e.currentTarget.value, e);\n },\n [onChange, applyAriaDisabled],\n );\n\n useEffect(() => {\n if (textareaRef && textareaRef.current) {\n const { offsetWidth, clientWidth } = textareaRef.current;\n setScrollBarWidth(offsetWidth - clientWidth);\n }\n }, [value]);\n\n useLayoutEffect(() => {\n if (ghostRef && ghostRef.current) {\n const { offsetHeight, scrollHeight } = ghostRef.current;\n if (rows !== undefined) setCalculatedMinHeight(offsetHeight);\n else if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(maxHeight);\n else setCalculatedMinHeight(scrollHeight);\n }\n }, [maxHeight, value, rows]);\n\n const referenceSetter = useMemo(() => mergeRefs(textareaRef, innerRef), [innerRef]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n $isDisabled={otherProps.disabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n {...xstyledProps}\n {...ownerPropsConfig}\n >\n <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled} $isReadOnly={applyAriaDisabled || readOnly}>\n <StyledTextArea\n innerRef={referenceSetter}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n rows={rows}\n aria-describedby={\n id !== undefined ? `${id}_feedback_message ${id}_error_message ${id}_remaining_characters` : undefined\n }\n aria-invalid={hasError}\n aria-disabled={applyAriaDisabled}\n {...globalAttributes}\n readOnly={readOnly}\n aria-readonly={readOnly}\n {...ownerPropsConfig}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n aria-label=\"ghost textarea\"\n data-testid=\"\"\n innerRef={ghostRef}\n value={value}\n $maxHeight={maxHeight}\n rows={rows}\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n paddingLeft: '9px',\n paddingRight: `${9 + scrollBarWidth}px`,\n overflow: 'hidden',\n }}\n />\n </StyledContainer>\n );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as ValidationMap<unknown>;\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,9 +32,9 @@ __export(data_test_ids_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(data_test_ids_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
36
|
+
var import_theming = require("./theming.js");
|
|
35
37
|
const DSControlledLargetTextInputDatatestids = {
|
|
36
|
-
|
|
37
|
-
CHAR_COUNTER: "ds-controlled-large-text-input-char-counter",
|
|
38
|
-
INPUT: "ds-controlled-large-text-input"
|
|
38
|
+
...(0, import_ds_system.slotObjectToDataTestIds)(import_theming.DSControlledLargeTextInputName, import_theming.DSControlledLargeTextInputSlots)
|
|
39
39
|
};
|
|
40
40
|
//# sourceMappingURL=data-test-ids.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/data-test-ids.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './theming.js';\n\nexport const DSControlledLargetTextInputDatatestids = {\n ...(slotObjectToDataTestIds(DSControlledLargeTextInputName, DSControlledLargeTextInputSlots) as Record<\n keyof typeof DSControlledLargeTextInputSlots,\n string\n >),\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAExC,qBAAgF;AAEzE,MAAM,yCAAyC;AAAA,EACpD,OAAI,0CAAwB,+CAAgC,8CAA+B;AAI7F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,10 +33,9 @@ __export(theming_exports, {
|
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(theming_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
|
-
const DSControlledLargeTextInputName = "
|
|
36
|
+
const DSControlledLargeTextInputName = "DSControlledlargetextinput";
|
|
37
37
|
const DSControlledLargeTextInputSlots = {
|
|
38
38
|
CONTAINER: "root",
|
|
39
|
-
INPUT: "input"
|
|
40
|
-
CHAR_COUNTER: "char-counter"
|
|
39
|
+
INPUT: "input"
|
|
41
40
|
};
|
|
42
41
|
//# sourceMappingURL=theming.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSControlledLargeTextInputName = '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iCAAiC;AAEvC,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;
|
|
4
|
+
"sourcesContent": ["export const DSControlledLargeTextInputName = 'DSControlledlargetextinput';\n\nexport const DSControlledLargeTextInputSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iCAAiC;AAEvC,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,6 +34,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
|
+
var import_exported_related = require("./exported-related/index.js");
|
|
37
38
|
const noop = () => {
|
|
38
39
|
};
|
|
39
40
|
const defaultProps = {
|
|
@@ -43,6 +44,7 @@ const defaultProps = {
|
|
|
43
44
|
applyAriaDisabled: false
|
|
44
45
|
};
|
|
45
46
|
const propTypes = {
|
|
47
|
+
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_exported_related.DSControlledLargeTextInputName, import_exported_related.DSControlledLargeTextInputSlots),
|
|
46
48
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
47
49
|
...import_ds_props_helpers.xstyledPropTypes,
|
|
48
50
|
value: import_ds_props_helpers.PropTypes.string.description("Text are value.").defaultValue(""),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: (newVal: string, event: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n hasError: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface PropsOptional {\n name?: string;\n id: string;\n rows?: string;\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n\n export interface InternalProps\n extends DefaultProps,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n value: '',\n onChange: noop,\n hasError: false,\n applyAriaDisabled: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Text are value.').defaultValue(''),\n onChange: PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),\n rows: PropTypes.string.description(\n 'Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.',\n ),\n id: PropTypes.string.description('Unique id.'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),\n disabled: PropTypes.bool.description('Set disabled state.'),\n readOnly: PropTypes.bool.description('Set readonly state.'),\n maxHeight: PropTypes.number.description('Set max height to resize input text'),\n hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/index.js';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: (newVal: string, event: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n hasError: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface PropsOptional\n extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSControlledLargeTextInputName,\n typeof DSControlledLargeTextInputSlots\n > {\n name?: string;\n id: string;\n rows?: string;\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n\n export interface InternalProps\n extends DefaultProps,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n value: '',\n onChange: noop,\n hasError: false,\n applyAriaDisabled: false,\n};\n\nexport const propTypes = {\n ...getPropsPerSlotPropTypes(DSControlledLargeTextInputName, DSControlledLargeTextInputSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Text are value.').defaultValue(''),\n onChange: PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),\n rows: PropTypes.string.description(\n 'Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.',\n ),\n id: PropTypes.string.description('Unique id.'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),\n disabled: PropTypes.bool.description('Set disabled state.'),\n readOnly: PropTypes.bool.description('Set readonly state.'),\n maxHeight: PropTypes.number.description('Set max height to resize input text'),\n hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAOO;AAEP,8BAAgF;AAEhF,MAAM,OAAO,MAAM;AAAC;AAyCb,MAAM,eAAyD;AAAA,EACpE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,YAAY;AAAA,EACvB,OAAG,kDAAyB,wDAAgC,uDAA+B;AAAA,EAC3F,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,iBAAiB,EAAE,aAAa,EAAE;AAAA,EACtE,UAAU,kCAAU,KAAK,YAAY,cAAc,EAAE,aAAa,UAAU;AAAA,EAC5E,MAAM,kCAAU,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,IAAI,kCAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvG,UAAU,kCAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,kCAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,WAAW,kCAAU,OAAO,YAAY,qCAAqC;AAAA,EAC7E,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,KAAK;AAAA,EAC3E,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -47,16 +47,19 @@ const StyledContainer = (0, import_ds_system.styled)("div", {
|
|
|
47
47
|
background-color: #EBEDF0;
|
|
48
48
|
color: #616b7f;
|
|
49
49
|
` : ``}
|
|
50
|
-
${({ applyAriaDisabled }) => applyAriaDisabled ? `
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
${({ applyAriaDisabled, theme }) => applyAriaDisabled ? `
|
|
51
|
+
background-color: ${theme.colors.neutral["050"]};
|
|
52
|
+
color: #616b7f;
|
|
53
|
+
textarea {
|
|
54
|
+
background-color: ${theme.colors.neutral["050"]};
|
|
55
|
+
}
|
|
53
56
|
` : ``}
|
|
54
57
|
${import_ds_system.xStyledCommonProps}
|
|
55
58
|
`;
|
|
56
59
|
const WrapperBorder = (0, import_ds_system.styled)("div")`
|
|
57
60
|
${({ $isDisabled, theme }) => !$isDisabled ? `
|
|
58
61
|
&:hover {
|
|
59
|
-
outline: 1px solid ${theme.colors.brand[
|
|
62
|
+
outline: 1px solid ${theme.colors.brand[600]};
|
|
60
63
|
outline-offset: -1px;
|
|
61
64
|
}
|
|
62
65
|
&:focus,
|
|
@@ -74,6 +77,10 @@ const WrapperBorder = (0, import_ds_system.styled)("div")`
|
|
|
74
77
|
border-radius: 2px;
|
|
75
78
|
position: relative;
|
|
76
79
|
box-sizing: content-box;
|
|
80
|
+
${({ $isReadOnly, theme }) => $isReadOnly ? `
|
|
81
|
+
border: 1px solid ${theme.colors.neutral["080"]};
|
|
82
|
+
border-bottom: 1px solid ${theme.colors.neutral["400"]};
|
|
83
|
+
` : ``}
|
|
77
84
|
${({ $hasError, theme }) => $hasError ? `border: 1px solid ${theme.colors.danger[900]};` : ``}
|
|
78
85
|
`;
|
|
79
86
|
const StyledTextArea = (0, import_ds_system.styled)("textarea", {
|
|
@@ -86,17 +93,19 @@ const StyledTextArea = (0, import_ds_system.styled)("textarea", {
|
|
|
86
93
|
border: none;
|
|
87
94
|
padding: 8px;
|
|
88
95
|
resize: none;
|
|
96
|
+
color: ${({ theme }) => theme.colors.neutral["800"]};
|
|
89
97
|
${({ $maxHeight }) => $maxHeight ? `max-height: ${$maxHeight}px;` : ``}
|
|
90
98
|
${({ $minHeight }) => $minHeight ? `min-height: ${$minHeight}px;` : ``}
|
|
91
|
-
${({ disabled }) => disabled ? `
|
|
99
|
+
${({ disabled, theme }) => disabled ? `
|
|
92
100
|
overflow: hidden;
|
|
93
|
-
background-color:
|
|
101
|
+
background-color: ${theme.colors.neutral["080"]};
|
|
102
|
+
color: ${theme.colors.neutral["500"]};
|
|
94
103
|
cursor: not-allowed;
|
|
95
104
|
` : ""}
|
|
96
105
|
&[aria-disabled='true'] {
|
|
97
106
|
overflow: hidden;
|
|
98
|
-
background-color:
|
|
99
|
-
cursor:
|
|
107
|
+
background-color: ${({ theme }) => theme.colors.neutral["050"]};
|
|
108
|
+
cursor: text;
|
|
100
109
|
caret-color: transparent;
|
|
101
110
|
}
|
|
102
111
|
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.CONTAINER,\n})<{ $isDisabled?: boolean; applyAriaDisabled?: boolean }>`\n display: grid;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ${({ $isDisabled }) =>\n $isDisabled\n ? `\n background-color: #EBEDF0;\n color: #616b7f;\n `\n : ``}\n ${({ applyAriaDisabled }) =>\n applyAriaDisabled\n ? `\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,8BAAgF;AAEzE,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,YAAY,MACf,cACI;AAAA;AAAA;AAAA,MAIA,EAAE;AAAA,IACN,CAAC,EAAE,
|
|
4
|
+
"sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.CONTAINER,\n})<{ $isDisabled?: boolean; applyAriaDisabled?: boolean }>`\n display: grid;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ${({ $isDisabled }) =>\n $isDisabled\n ? `\n background-color: #EBEDF0;\n color: #616b7f;\n `\n : ``}\n ${({ applyAriaDisabled, theme }) =>\n applyAriaDisabled\n ? `\n background-color: ${theme.colors.neutral['050']};\n color: #616b7f;\n textarea {\n background-color: ${theme.colors.neutral['050']};\n }\n `\n : ``}\n ${xStyledCommonProps}\n`;\n\nexport const WrapperBorder = styled('div')<{ $hasError?: boolean; $isDisabled?: boolean; $isReadOnly?: boolean }>`\n ${({ $isDisabled, theme }) =>\n !$isDisabled\n ? `\n&:hover {\n outline: 1px solid ${theme.colors.brand[600]};\n outline-offset: -1px;\n}\n&:focus,\n&:focus-within {\n outline: 2px solid ${theme.colors.brand[700]};\n outline-offset: -2px;\n}\n&:hover,\n&:focus,\n&:focus-within {\n border-color: transparent;\n} \n`\n : ``}\n border: 1px solid neutral-400;\n border-radius: 2px;\n position: relative;\n box-sizing: content-box;\n ${({ $isReadOnly, theme }) =>\n $isReadOnly\n ? `\n border: 1px solid ${theme.colors.neutral['080']};\n border-bottom: 1px solid ${theme.colors.neutral['400']};\n `\n : ``}\n ${({ $hasError, theme }) => ($hasError ? `border: 1px solid ${theme.colors.danger[900]};` : ``)}\n`;\n\ninterface StyledTextAreaT {\n resizable?: boolean;\n hasError?: boolean;\n applyAriaDisabled?: boolean;\n $maxHeight?: number;\n $minHeight?: number;\n}\n\nexport const StyledTextArea = styled('textarea', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n line-height: 1;\n outline: none;\n width: 100%;\n border: none;\n padding: 8px;\n resize: none;\n color: ${({ theme }) => theme.colors.neutral['800']};\n ${({ $maxHeight }) => ($maxHeight ? `max-height: ${$maxHeight}px;` : ``)}\n ${({ $minHeight }) => ($minHeight ? `min-height: ${$minHeight}px;` : ``)}\n ${({ disabled, theme }) =>\n disabled\n ? `\n overflow: hidden;\n background-color: ${theme.colors.neutral['080']};\n color: ${theme.colors.neutral['500']};\n cursor: not-allowed;\n `\n : ''}\n &[aria-disabled='true'] {\n overflow: hidden;\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: text;\n caret-color: transparent;\n }\n\n ${({ rows, $maxHeight }) => {\n if (rows === undefined && $maxHeight === undefined) return 'overflow: hidden;';\n return '';\n }}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,8BAAgF;AAEzE,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,YAAY,MACf,cACI;AAAA;AAAA;AAAA,MAIA,EAAE;AAAA,IACN,CAAC,EAAE,mBAAmB,MAAM,MAC5B,oBACI;AAAA,wBACgB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,0BAGzB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,MAG7C,EAAE;AAAA,IACN,mCAAkB;AAAA;AAGf,MAAM,oBAAgB,yBAAO,KAAK;AAAA,IACrC,CAAC,EAAE,aAAa,MAAM,MACtB,CAAC,cACG;AAAA;AAAA,uBAEe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKvB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAStC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,CAAC,EAAE,aAAa,MAAM,MACtB,cACI;AAAA,wBACgB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,+BACpB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,MAElD,EAAE;AAAA,IACN,CAAC,EAAE,WAAW,MAAM,MAAO,YAAY,qBAAqB,MAAM,OAAO,OAAO,GAAG,CAAC,MAAM,EAAG;AAAA;AAW1F,MAAM,qBAAiB,yBAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,wDAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IACjD,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,UAAU,QAAQ,EAAG;AAAA,IACtE,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,UAAU,QAAQ,EAAG;AAAA,IACtE,CAAC,EAAE,UAAU,MAAM,MACnB,WACI;AAAA;AAAA,sBAEc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,WACtC,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,MAG9B,EAAE;AAAA;AAAA;AAAA,wBAGc,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK9D,CAAC,EAAE,MAAM,WAAW,MAAM;AAC1B,MAAI,SAAS,UAAa,eAAe,OAAW,QAAO;AAC3D,SAAO;AACT,CAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,7 +6,8 @@ import {
|
|
|
6
6
|
useValidateTypescriptPropTypes,
|
|
7
7
|
useMemoMergePropsWithDefault,
|
|
8
8
|
useGetGlobalAttributes,
|
|
9
|
-
useGetXstyledProps
|
|
9
|
+
useGetXstyledProps,
|
|
10
|
+
useOwnerProps
|
|
10
11
|
} from "@elliemae/ds-props-helpers";
|
|
11
12
|
import { mergeRefs } from "@elliemae/ds-system";
|
|
12
13
|
import { propTypes, defaultProps } from "./react-desc-prop-types.js";
|
|
@@ -15,6 +16,7 @@ import { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids
|
|
|
15
16
|
const DSControlledLargeTextInput = (props) => {
|
|
16
17
|
useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);
|
|
17
18
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
19
|
+
const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });
|
|
18
20
|
const { value, onChange, readOnly, innerRef, name, id, hasError, maxHeight, applyAriaDisabled, ...otherProps } = propsWithDefault;
|
|
19
21
|
const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);
|
|
20
22
|
const xstyledProps = useGetXstyledProps(otherProps);
|
|
@@ -50,10 +52,11 @@ const DSControlledLargeTextInput = (props) => {
|
|
|
50
52
|
className,
|
|
51
53
|
"data-testid": DSControlledLargetTextInputDatatestids.CONTAINER,
|
|
52
54
|
$isDisabled: otherProps.disabled,
|
|
53
|
-
applyAriaDisabled,
|
|
55
|
+
applyAriaDisabled: applyAriaDisabled || readOnly,
|
|
54
56
|
...xstyledProps,
|
|
57
|
+
...ownerPropsConfig,
|
|
55
58
|
children: [
|
|
56
|
-
/* @__PURE__ */ jsx(WrapperBorder, { $hasError: hasError, $isDisabled: otherProps.disabled, children: /* @__PURE__ */ jsx(
|
|
59
|
+
/* @__PURE__ */ jsx(WrapperBorder, { $hasError: hasError, $isDisabled: otherProps.disabled, $isReadOnly: applyAriaDisabled || readOnly, children: /* @__PURE__ */ jsx(
|
|
57
60
|
StyledTextArea,
|
|
58
61
|
{
|
|
59
62
|
innerRef: referenceSetter,
|
|
@@ -71,7 +74,8 @@ const DSControlledLargeTextInput = (props) => {
|
|
|
71
74
|
"aria-disabled": applyAriaDisabled,
|
|
72
75
|
...globalAttributes,
|
|
73
76
|
readOnly,
|
|
74
|
-
"aria-readonly": readOnly
|
|
77
|
+
"aria-readonly": readOnly,
|
|
78
|
+
...ownerPropsConfig
|
|
75
79
|
}
|
|
76
80
|
) }),
|
|
77
81
|
/* @__PURE__ */ jsx(
|
|
@@ -79,6 +83,7 @@ const DSControlledLargeTextInput = (props) => {
|
|
|
79
83
|
{
|
|
80
84
|
disabled: true,
|
|
81
85
|
"aria-label": "ghost textarea",
|
|
86
|
+
"data-testid": "",
|
|
82
87
|
innerRef: ghostRef,
|
|
83
88
|
value,
|
|
84
89
|
$maxHeight: maxHeight,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSControlledLargeTextInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useRef, useState, useLayoutEffect, useEffect } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextArea, StyledContainer, WrapperBorder } from './styles.js';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related/index.js';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types.js';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.InternalProps>(props, defaultProps);\n\n const { value, onChange, readOnly, innerRef, name, id, hasError, maxHeight, applyAriaDisabled, ...otherProps } =\n propsWithDefault;\n\n const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const [calculatedMinHeight, setCalculatedMinHeight] = useState<number>();\n const [scrollBarWidth, setScrollBarWidth] = useState<number>(0);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback<React.KeyboardEventHandler<HTMLTextAreaElement>>(\n (e) => {\n if (applyAriaDisabled) return;\n onChange(e.currentTarget.value, e);\n },\n [onChange, applyAriaDisabled],\n );\n\n useEffect(() => {\n if (textareaRef && textareaRef.current) {\n const { offsetWidth, clientWidth } = textareaRef.current;\n setScrollBarWidth(offsetWidth - clientWidth);\n }\n }, [value]);\n\n useLayoutEffect(() => {\n if (ghostRef && ghostRef.current) {\n const { offsetHeight, scrollHeight } = ghostRef.current;\n if (rows !== undefined) setCalculatedMinHeight(offsetHeight);\n else if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(maxHeight);\n else setCalculatedMinHeight(scrollHeight);\n }\n }, [maxHeight, value, rows]);\n\n const referenceSetter = useMemo(() => mergeRefs(textareaRef, innerRef), [innerRef]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n $isDisabled={otherProps.disabled}\n applyAriaDisabled={applyAriaDisabled}\n {...xstyledProps}\n >\n <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled}>\n <StyledTextArea\n innerRef={referenceSetter}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n rows={rows}\n aria-describedby={\n id !== undefined ? `${id}_feedback_message ${id}_error_message ${id}_remaining_characters` : undefined\n }\n aria-invalid={hasError}\n aria-disabled={applyAriaDisabled}\n {...globalAttributes}\n readOnly={readOnly}\n aria-readonly={readOnly}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n aria-label=\"ghost textarea\"\n innerRef={ghostRef}\n value={value}\n $maxHeight={maxHeight}\n rows={rows}\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n paddingLeft: '9px',\n paddingRight: `${9 + scrollBarWidth}px`,\n overflow: 'hidden',\n }}\n />\n </StyledContainer>\n );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as ValidationMap<unknown>;\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo, useRef, useState, useLayoutEffect, useEffect } from 'react';\nimport {\n describe,\n useValidateTypescriptPropTypes,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useGetXstyledProps,\n type ValidationMap,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { propTypes, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextArea, StyledContainer, WrapperBorder } from './styles.js';\nimport { DSControlledLargeTextInputName, DSControlledLargetTextInputDatatestids } from './exported-related/index.js';\nimport type { DSControlledLargeTextInputT } from './react-desc-prop-types.js';\n\nconst DSControlledLargeTextInput = (props: DSControlledLargeTextInputT.Props): JSX.Element => {\n useValidateTypescriptPropTypes(props, propTypes, DSControlledLargeTextInputName);\n\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledLargeTextInputT.InternalProps>(props, defaultProps);\n\n const ownerPropsConfig = useOwnerProps(propsWithDefault, { ...props });\n\n const { value, onChange, readOnly, innerRef, name, id, hasError, maxHeight, applyAriaDisabled, ...otherProps } =\n propsWithDefault;\n\n const { className, rows, ...globalAttributes } = useGetGlobalAttributes(otherProps);\n\n const xstyledProps = useGetXstyledProps(otherProps);\n\n const [calculatedMinHeight, setCalculatedMinHeight] = useState<number>();\n const [scrollBarWidth, setScrollBarWidth] = useState<number>(0);\n\n const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n const ghostRef = useRef<HTMLTextAreaElement | null>(null);\n\n const handleOnChange = useCallback<React.KeyboardEventHandler<HTMLTextAreaElement>>(\n (e) => {\n if (applyAriaDisabled) return;\n onChange(e.currentTarget.value, e);\n },\n [onChange, applyAriaDisabled],\n );\n\n useEffect(() => {\n if (textareaRef && textareaRef.current) {\n const { offsetWidth, clientWidth } = textareaRef.current;\n setScrollBarWidth(offsetWidth - clientWidth);\n }\n }, [value]);\n\n useLayoutEffect(() => {\n if (ghostRef && ghostRef.current) {\n const { offsetHeight, scrollHeight } = ghostRef.current;\n if (rows !== undefined) setCalculatedMinHeight(offsetHeight);\n else if (maxHeight !== undefined && scrollHeight >= maxHeight) setCalculatedMinHeight(maxHeight);\n else setCalculatedMinHeight(scrollHeight);\n }\n }, [maxHeight, value, rows]);\n\n const referenceSetter = useMemo(() => mergeRefs(textareaRef, innerRef), [innerRef]);\n\n return (\n <StyledContainer\n className={className}\n data-testid={DSControlledLargetTextInputDatatestids.CONTAINER}\n $isDisabled={otherProps.disabled}\n applyAriaDisabled={applyAriaDisabled || readOnly}\n {...xstyledProps}\n {...ownerPropsConfig}\n >\n <WrapperBorder $hasError={hasError} $isDisabled={otherProps.disabled} $isReadOnly={applyAriaDisabled || readOnly}>\n <StyledTextArea\n innerRef={referenceSetter}\n aria-multiline\n value={value}\n $maxHeight={maxHeight}\n $minHeight={calculatedMinHeight}\n onChange={handleOnChange}\n name={name}\n id={id}\n data-testid={DSControlledLargetTextInputDatatestids.INPUT}\n rows={rows}\n aria-describedby={\n id !== undefined ? `${id}_feedback_message ${id}_error_message ${id}_remaining_characters` : undefined\n }\n aria-invalid={hasError}\n aria-disabled={applyAriaDisabled}\n {...globalAttributes}\n readOnly={readOnly}\n aria-readonly={readOnly}\n {...ownerPropsConfig}\n />\n </WrapperBorder>\n <StyledTextArea\n disabled\n aria-label=\"ghost textarea\"\n data-testid=\"\"\n innerRef={ghostRef}\n value={value}\n $maxHeight={maxHeight}\n rows={rows}\n style={{\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n paddingLeft: '9px',\n paddingRight: `${9 + scrollBarWidth}px`,\n overflow: 'hidden',\n }}\n />\n </StyledContainer>\n );\n};\n\nDSControlledLargeTextInput.displayName = 'DSControlledLargeTextInput';\nconst DSControlledLargeTextInputWithSchema = describe(DSControlledLargeTextInput);\nDSControlledLargeTextInputWithSchema.propTypes = propTypes as ValidationMap<unknown>;\nexport { DSControlledLargeTextInput, DSControlledLargeTextInputWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
+
import { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from "./theming.js";
|
|
2
4
|
const DSControlledLargetTextInputDatatestids = {
|
|
3
|
-
|
|
4
|
-
CHAR_COUNTER: "ds-controlled-large-text-input-char-counter",
|
|
5
|
-
INPUT: "ds-controlled-large-text-input"
|
|
5
|
+
...slotObjectToDataTestIds(DSControlledLargeTextInputName, DSControlledLargeTextInputSlots)
|
|
6
6
|
};
|
|
7
7
|
export {
|
|
8
8
|
DSControlledLargetTextInputDatatestids
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/data-test-ids.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './theming.js';\n\nexport const DSControlledLargetTextInputDatatestids = {\n ...(slotObjectToDataTestIds(DSControlledLargeTextInputName, DSControlledLargeTextInputSlots) as Record<\n keyof typeof DSControlledLargeTextInputSlots,\n string\n >),\n} as const;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAExC,SAAS,gCAAgC,uCAAuC;AAEzE,MAAM,yCAAyC;AAAA,EACpD,GAAI,wBAAwB,gCAAgC,+BAA+B;AAI7F;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
const DSControlledLargeTextInputName = "
|
|
2
|
+
const DSControlledLargeTextInputName = "DSControlledlargetextinput";
|
|
3
3
|
const DSControlledLargeTextInputSlots = {
|
|
4
4
|
CONTAINER: "root",
|
|
5
|
-
INPUT: "input"
|
|
6
|
-
CHAR_COUNTER: "char-counter"
|
|
5
|
+
INPUT: "input"
|
|
7
6
|
};
|
|
8
7
|
export {
|
|
9
8
|
DSControlledLargeTextInputName,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSControlledLargeTextInputName = '
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iCAAiC;AAEvC,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSControlledLargeTextInputName = 'DSControlledlargetextinput';\n\nexport const DSControlledLargeTextInputSlots = {\n CONTAINER: 'root',\n INPUT: 'input',\n} as const;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,iCAAiC;AAEvC,MAAM,kCAAkC;AAAA,EAC7C,WAAW;AAAA,EACX,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import {
|
|
3
3
|
PropTypes,
|
|
4
|
+
getPropsPerSlotPropTypes,
|
|
4
5
|
globalAttributesPropTypes,
|
|
5
6
|
xstyledPropTypes
|
|
6
7
|
} from "@elliemae/ds-props-helpers";
|
|
8
|
+
import { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from "./exported-related/index.js";
|
|
7
9
|
const noop = () => {
|
|
8
10
|
};
|
|
9
11
|
const defaultProps = {
|
|
@@ -13,6 +15,7 @@ const defaultProps = {
|
|
|
13
15
|
applyAriaDisabled: false
|
|
14
16
|
};
|
|
15
17
|
const propTypes = {
|
|
18
|
+
...getPropsPerSlotPropTypes(DSControlledLargeTextInputName, DSControlledLargeTextInputSlots),
|
|
16
19
|
...globalAttributesPropTypes,
|
|
17
20
|
...xstyledPropTypes,
|
|
18
21
|
value: PropTypes.string.description("Text are value.").defaultValue(""),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport {\n PropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: (newVal: string, event: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n hasError: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface PropsOptional {\n name?: string;\n id: string;\n rows?: string;\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n\n export interface InternalProps\n extends DefaultProps,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n value: '',\n onChange: noop,\n hasError: false,\n applyAriaDisabled: false,\n};\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Text are value.').defaultValue(''),\n onChange: PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),\n rows: PropTypes.string.description(\n 'Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.',\n ),\n id: PropTypes.string.description('Unique id.'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),\n disabled: PropTypes.bool.description('Set disabled state.'),\n readOnly: PropTypes.bool.description('Set readonly state.'),\n maxHeight: PropTypes.number.description('Set max height to resize input text'),\n hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,MAAM,OAAO,MAAM;AAAC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n type GlobalAttributesT,\n type XstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/index.js';\n\nconst noop = () => {};\n\nexport declare namespace DSControlledLargeTextInputT {\n export interface DefaultProps {\n value: string;\n onChange: (newVal: string, event: React.SyntheticEvent<HTMLTextAreaElement>) => void;\n hasError: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface PropsOptional\n extends TypescriptHelpersT.PropsForGlobalOnSlots<\n typeof DSControlledLargeTextInputName,\n typeof DSControlledLargeTextInputSlots\n > {\n name?: string;\n id: string;\n rows?: string;\n disabled?: boolean;\n readOnly?: boolean;\n maxHeight?: number;\n innerRef?: React.MutableRefObject<HTMLTextAreaElement | null>;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n\n export interface InternalProps\n extends DefaultProps,\n PropsOptional,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof PropsOptional>,\n Omit<XstyledProps, keyof PropsOptional> {}\n}\n\nexport const defaultProps: DSControlledLargeTextInputT.DefaultProps = {\n value: '',\n onChange: noop,\n hasError: false,\n applyAriaDisabled: false,\n};\n\nexport const propTypes = {\n ...getPropsPerSlotPropTypes(DSControlledLargeTextInputName, DSControlledLargeTextInputSlots),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.string.description('Text are value.').defaultValue(''),\n onChange: PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),\n rows: PropTypes.string.description(\n 'Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.',\n ),\n id: PropTypes.string.description('Unique id.'),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Inner ref to the input.'),\n disabled: PropTypes.bool.description('Set disabled state.'),\n readOnly: PropTypes.bool.description('Set readonly state.'),\n maxHeight: PropTypes.number.description('Set max height to resize input text'),\n hasError: PropTypes.bool.description('Set error state.').defaultValue(false),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,gCAAgC,uCAAuC;AAEhF,MAAM,OAAO,MAAM;AAAC;AAyCb,MAAM,eAAyD;AAAA,EACpE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG,yBAAyB,gCAAgC,+BAA+B;AAAA,EAC3F,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,iBAAiB,EAAE,aAAa,EAAE;AAAA,EACtE,UAAU,UAAU,KAAK,YAAY,cAAc,EAAE,aAAa,UAAU;AAAA,EAC5E,MAAM,UAAU,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,IAAI,UAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,YAAY,yBAAyB;AAAA,EACvG,UAAU,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,UAAU,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAC1D,WAAW,UAAU,OAAO,YAAY,qCAAqC;AAAA,EAC7E,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,KAAK;AAAA,EAC3E,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AACvB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -12,16 +12,19 @@ const StyledContainer = styled("div", {
|
|
|
12
12
|
background-color: #EBEDF0;
|
|
13
13
|
color: #616b7f;
|
|
14
14
|
` : ``}
|
|
15
|
-
${({ applyAriaDisabled }) => applyAriaDisabled ? `
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
${({ applyAriaDisabled, theme }) => applyAriaDisabled ? `
|
|
16
|
+
background-color: ${theme.colors.neutral["050"]};
|
|
17
|
+
color: #616b7f;
|
|
18
|
+
textarea {
|
|
19
|
+
background-color: ${theme.colors.neutral["050"]};
|
|
20
|
+
}
|
|
18
21
|
` : ``}
|
|
19
22
|
${xStyledCommonProps}
|
|
20
23
|
`;
|
|
21
24
|
const WrapperBorder = styled("div")`
|
|
22
25
|
${({ $isDisabled, theme }) => !$isDisabled ? `
|
|
23
26
|
&:hover {
|
|
24
|
-
outline: 1px solid ${theme.colors.brand[
|
|
27
|
+
outline: 1px solid ${theme.colors.brand[600]};
|
|
25
28
|
outline-offset: -1px;
|
|
26
29
|
}
|
|
27
30
|
&:focus,
|
|
@@ -39,6 +42,10 @@ const WrapperBorder = styled("div")`
|
|
|
39
42
|
border-radius: 2px;
|
|
40
43
|
position: relative;
|
|
41
44
|
box-sizing: content-box;
|
|
45
|
+
${({ $isReadOnly, theme }) => $isReadOnly ? `
|
|
46
|
+
border: 1px solid ${theme.colors.neutral["080"]};
|
|
47
|
+
border-bottom: 1px solid ${theme.colors.neutral["400"]};
|
|
48
|
+
` : ``}
|
|
42
49
|
${({ $hasError, theme }) => $hasError ? `border: 1px solid ${theme.colors.danger[900]};` : ``}
|
|
43
50
|
`;
|
|
44
51
|
const StyledTextArea = styled("textarea", {
|
|
@@ -51,17 +58,19 @@ const StyledTextArea = styled("textarea", {
|
|
|
51
58
|
border: none;
|
|
52
59
|
padding: 8px;
|
|
53
60
|
resize: none;
|
|
61
|
+
color: ${({ theme }) => theme.colors.neutral["800"]};
|
|
54
62
|
${({ $maxHeight }) => $maxHeight ? `max-height: ${$maxHeight}px;` : ``}
|
|
55
63
|
${({ $minHeight }) => $minHeight ? `min-height: ${$minHeight}px;` : ``}
|
|
56
|
-
${({ disabled }) => disabled ? `
|
|
64
|
+
${({ disabled, theme }) => disabled ? `
|
|
57
65
|
overflow: hidden;
|
|
58
|
-
background-color:
|
|
66
|
+
background-color: ${theme.colors.neutral["080"]};
|
|
67
|
+
color: ${theme.colors.neutral["500"]};
|
|
59
68
|
cursor: not-allowed;
|
|
60
69
|
` : ""}
|
|
61
70
|
&[aria-disabled='true'] {
|
|
62
71
|
overflow: hidden;
|
|
63
|
-
background-color:
|
|
64
|
-
cursor:
|
|
72
|
+
background-color: ${({ theme }) => theme.colors.neutral["050"]};
|
|
73
|
+
cursor: text;
|
|
65
74
|
caret-color: transparent;
|
|
66
75
|
}
|
|
67
76
|
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.CONTAINER,\n})<{ $isDisabled?: boolean; applyAriaDisabled?: boolean }>`\n display: grid;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ${({ $isDisabled }) =>\n $isDisabled\n ? `\n background-color: #EBEDF0;\n color: #616b7f;\n `\n : ``}\n ${({ applyAriaDisabled }) =>\n applyAriaDisabled\n ? `\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,gCAAgC,uCAAuC;AAEzE,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,YAAY,MACf,cACI;AAAA;AAAA;AAAA,MAIA,EAAE;AAAA,IACN,CAAC,EAAE,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSControlledLargeTextInputName, DSControlledLargeTextInputSlots } from './exported-related/index.js';\n\nexport const StyledContainer = styled('div', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.CONTAINER,\n})<{ $isDisabled?: boolean; applyAriaDisabled?: boolean }>`\n display: grid;\n grid-template-rows: auto auto;\n grid-template-columns: fit-content;\n ${({ $isDisabled }) =>\n $isDisabled\n ? `\n background-color: #EBEDF0;\n color: #616b7f;\n `\n : ``}\n ${({ applyAriaDisabled, theme }) =>\n applyAriaDisabled\n ? `\n background-color: ${theme.colors.neutral['050']};\n color: #616b7f;\n textarea {\n background-color: ${theme.colors.neutral['050']};\n }\n `\n : ``}\n ${xStyledCommonProps}\n`;\n\nexport const WrapperBorder = styled('div')<{ $hasError?: boolean; $isDisabled?: boolean; $isReadOnly?: boolean }>`\n ${({ $isDisabled, theme }) =>\n !$isDisabled\n ? `\n&:hover {\n outline: 1px solid ${theme.colors.brand[600]};\n outline-offset: -1px;\n}\n&:focus,\n&:focus-within {\n outline: 2px solid ${theme.colors.brand[700]};\n outline-offset: -2px;\n}\n&:hover,\n&:focus,\n&:focus-within {\n border-color: transparent;\n} \n`\n : ``}\n border: 1px solid neutral-400;\n border-radius: 2px;\n position: relative;\n box-sizing: content-box;\n ${({ $isReadOnly, theme }) =>\n $isReadOnly\n ? `\n border: 1px solid ${theme.colors.neutral['080']};\n border-bottom: 1px solid ${theme.colors.neutral['400']};\n `\n : ``}\n ${({ $hasError, theme }) => ($hasError ? `border: 1px solid ${theme.colors.danger[900]};` : ``)}\n`;\n\ninterface StyledTextAreaT {\n resizable?: boolean;\n hasError?: boolean;\n applyAriaDisabled?: boolean;\n $maxHeight?: number;\n $minHeight?: number;\n}\n\nexport const StyledTextArea = styled('textarea', {\n name: DSControlledLargeTextInputName,\n slot: DSControlledLargeTextInputSlots.INPUT,\n})<StyledTextAreaT>`\n line-height: 1;\n outline: none;\n width: 100%;\n border: none;\n padding: 8px;\n resize: none;\n color: ${({ theme }) => theme.colors.neutral['800']};\n ${({ $maxHeight }) => ($maxHeight ? `max-height: ${$maxHeight}px;` : ``)}\n ${({ $minHeight }) => ($minHeight ? `min-height: ${$minHeight}px;` : ``)}\n ${({ disabled, theme }) =>\n disabled\n ? `\n overflow: hidden;\n background-color: ${theme.colors.neutral['080']};\n color: ${theme.colors.neutral['500']};\n cursor: not-allowed;\n `\n : ''}\n &[aria-disabled='true'] {\n overflow: hidden;\n background-color: ${({ theme }) => theme.colors.neutral['050']};\n cursor: text;\n caret-color: transparent;\n }\n\n ${({ rows, $maxHeight }) => {\n if (rows === undefined && $maxHeight === undefined) return 'overflow: hidden;';\n return '';\n }}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,gCAAgC,uCAAuC;AAEzE,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA,IAIG,CAAC,EAAE,YAAY,MACf,cACI;AAAA;AAAA;AAAA,MAIA,EAAE;AAAA,IACN,CAAC,EAAE,mBAAmB,MAAM,MAC5B,oBACI;AAAA,wBACgB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,0BAGzB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,MAG7C,EAAE;AAAA,IACN,kBAAkB;AAAA;AAGf,MAAM,gBAAgB,OAAO,KAAK;AAAA,IACrC,CAAC,EAAE,aAAa,MAAM,MACtB,CAAC,cACG;AAAA;AAAA,uBAEe,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKvB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAStC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,CAAC,EAAE,aAAa,MAAM,MACtB,cACI;AAAA,wBACgB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,+BACpB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,MAElD,EAAE;AAAA,IACN,CAAC,EAAE,WAAW,MAAM,MAAO,YAAY,qBAAqB,MAAM,OAAO,OAAO,GAAG,CAAC,MAAM,EAAG;AAAA;AAW1F,MAAM,iBAAiB,OAAO,YAAY;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gCAAgC;AACxC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,IACjD,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,UAAU,QAAQ,EAAG;AAAA,IACtE,CAAC,EAAE,WAAW,MAAO,aAAa,eAAe,UAAU,QAAQ,EAAG;AAAA,IACtE,CAAC,EAAE,UAAU,MAAM,MACnB,WACI;AAAA;AAAA,sBAEc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,WACtC,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,MAG9B,EAAE;AAAA;AAAA;AAAA,wBAGc,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAK9D,CAAC,EAAE,MAAM,WAAW,MAAM;AAC1B,MAAI,SAAS,UAAa,eAAe,OAAW,QAAO;AAC3D,SAAO;AACT,CAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export declare const DSControlledLargetTextInputDatatestids: {
|
|
2
|
-
readonly CONTAINER:
|
|
3
|
-
readonly
|
|
4
|
-
readonly INPUT: "ds-controlled-large-text-input";
|
|
2
|
+
readonly CONTAINER: string;
|
|
3
|
+
readonly INPUT: string;
|
|
5
4
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
export declare const DSControlledLargeTextInputName = "
|
|
1
|
+
export declare const DSControlledLargeTextInputName = "DSControlledlargetextinput";
|
|
2
2
|
export declare const DSControlledLargeTextInputSlots: {
|
|
3
3
|
readonly CONTAINER: "root";
|
|
4
4
|
readonly INPUT: "input";
|
|
5
|
-
readonly CHAR_COUNTER: "char-counter";
|
|
6
5
|
};
|