@elliemae/ds-legacy-form-input-text 1.0.0-rc.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.
Files changed (52) hide show
  1. package/dist/cjs/DSInputText.js +106 -0
  2. package/dist/cjs/DSInputText.js.map +7 -0
  3. package/dist/cjs/config/useInputText.js +77 -0
  4. package/dist/cjs/config/useInputText.js.map +7 -0
  5. package/dist/cjs/exported-related/data-test-ids.js +39 -0
  6. package/dist/cjs/exported-related/data-test-ids.js.map +7 -0
  7. package/dist/cjs/exported-related/index.js +31 -0
  8. package/dist/cjs/exported-related/index.js.map +7 -0
  9. package/dist/cjs/exported-related/theming.js +42 -0
  10. package/dist/cjs/exported-related/theming.js.map +7 -0
  11. package/dist/cjs/index.js +31 -0
  12. package/dist/cjs/index.js.map +7 -0
  13. package/dist/cjs/package.json +7 -0
  14. package/dist/cjs/react-desc-prop-types.js +61 -0
  15. package/dist/cjs/react-desc-prop-types.js.map +7 -0
  16. package/dist/cjs/styled/borders.js +78 -0
  17. package/dist/cjs/styled/borders.js.map +7 -0
  18. package/dist/cjs/styled/components.js +94 -0
  19. package/dist/cjs/styled/components.js.map +7 -0
  20. package/dist/esm/DSInputText.js +76 -0
  21. package/dist/esm/DSInputText.js.map +7 -0
  22. package/dist/esm/config/useInputText.js +52 -0
  23. package/dist/esm/config/useInputText.js.map +7 -0
  24. package/dist/esm/exported-related/data-test-ids.js +9 -0
  25. package/dist/esm/exported-related/data-test-ids.js.map +7 -0
  26. package/dist/esm/exported-related/index.js +4 -0
  27. package/dist/esm/exported-related/index.js.map +7 -0
  28. package/dist/esm/exported-related/theming.js +12 -0
  29. package/dist/esm/exported-related/theming.js.map +7 -0
  30. package/dist/esm/index.js +4 -0
  31. package/dist/esm/index.js.map +7 -0
  32. package/dist/esm/package.json +7 -0
  33. package/dist/esm/react-desc-prop-types.js +31 -0
  34. package/dist/esm/react-desc-prop-types.js.map +7 -0
  35. package/dist/esm/styled/borders.js +48 -0
  36. package/dist/esm/styled/borders.js.map +7 -0
  37. package/dist/esm/styled/components.js +64 -0
  38. package/dist/esm/styled/components.js.map +7 -0
  39. package/dist/types/DSInputText.d.ts +4 -0
  40. package/dist/types/config/useInputText.d.ts +13 -0
  41. package/dist/types/exported-related/data-test-ids.d.ts +4 -0
  42. package/dist/types/exported-related/index.d.ts +2 -0
  43. package/dist/types/exported-related/theming.d.ts +6 -0
  44. package/dist/types/index.d.ts +3 -0
  45. package/dist/types/react-desc-prop-types.d.ts +21 -0
  46. package/dist/types/styled/borders.d.ts +10 -0
  47. package/dist/types/styled/components.d.ts +12 -0
  48. package/dist/types/tests/DSInput.events.test.d.ts +1 -0
  49. package/dist/types/tests/DSInput.keyboard.test.d.ts +1 -0
  50. package/dist/types/tests/DSInput.test.d.ts +1 -0
  51. package/dist/types/tests/axe.test.d.ts +1 -0
  52. package/package.json +75 -0
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var components_exports = {};
30
+ __export(components_exports, {
31
+ StyledClearButton: () => StyledClearButton,
32
+ StyledInput: () => StyledInput,
33
+ StyledInputWrapper: () => StyledInputWrapper
34
+ });
35
+ module.exports = __toCommonJS(components_exports);
36
+ var React = __toESM(require("react"));
37
+ var import_ds_legacy_button_v2 = require("@elliemae/ds-legacy-button-v2");
38
+ var import_ds_legacy_grid = require("@elliemae/ds-legacy-grid");
39
+ var import_ds_legacy_system = require("@elliemae/ds-legacy-system");
40
+ var import_exported_related = require("../exported-related/index.js");
41
+ var import_borders = require("./borders.js");
42
+ const StyledInputWrapper = (0, import_ds_legacy_system.styled)(import_ds_legacy_grid.Grid, {
43
+ name: import_exported_related.DSInputTextName,
44
+ slot: import_exported_related.DSInputTextSlots.INPUT_WRAPPER
45
+ })`
46
+ height: ${({ inputSize }) => inputSize === "m" ? "28px" : "24px"};
47
+
48
+ ${import_borders.getBorderCss}
49
+ border-radius: 2px;
50
+
51
+ :hover {
52
+ ${import_borders.getHoverBorderCss}
53
+ }
54
+ ${import_ds_legacy_system.xStyledCommonProps}
55
+ `;
56
+ const StyledInput = (0, import_ds_legacy_system.styled)("input", { name: import_exported_related.DSInputTextName, slot: import_exported_related.DSInputTextSlots.INPUT })`
57
+ padding: 0 ${import_ds_legacy_system.th.space("xxs")};
58
+ border: none;
59
+ outline: none;
60
+ border-radius: 2px;
61
+
62
+ width: 100%;
63
+ height: 100%;
64
+ color: ${import_ds_legacy_system.th.color("neutral-800")};
65
+
66
+ ::placeholder {
67
+ font-weight: ${import_ds_legacy_system.th.fontWeight("regular")};
68
+ font-style: italic;
69
+ color: ${import_ds_legacy_system.th.color("neutral-500")};
70
+ }
71
+
72
+ :disabled {
73
+ background-color: ${import_ds_legacy_system.th.color("neutral-080")};
74
+ color: #616b7f;
75
+ cursor: not-allowed;
76
+ }
77
+ `;
78
+ const StyledClearButton = (0, import_ds_legacy_system.styled)(import_ds_legacy_button_v2.DSButtonV2, { name: import_exported_related.DSInputTextName, slot: import_exported_related.DSInputTextSlots.CLEAR_BUTTON })`
79
+ height: 100%;
80
+ min-width: 20px;
81
+ width: 20px;
82
+ &:after {
83
+ border-top-left-radius: 0px !important;
84
+ border-bottom-left-radius: 0px !important;
85
+ }
86
+ :focus {
87
+ border-width: 0px;
88
+ }
89
+
90
+ &:hover:not(:disabled) {
91
+ background-color: transparent;
92
+ }
93
+ `;
94
+ //# sourceMappingURL=components.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/styled/components.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-legacy-button-v2';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-legacy-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n inputSize: string;\n isDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n\n ${getBorderCss}\n border-radius: 2px;\n\n :hover {\n ${getHoverBorderCss}\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })`\n padding: 0 ${th.space('xxs')};\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\n color: ${th.color('neutral-800')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n font-style: italic;\n color: ${th.color('neutral-500')};\n }\n\n :disabled {\n background-color: ${th.color('neutral-080')};\n color: #616b7f;\n cursor: not-allowed;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n min-width: 20px;\n width: 20px;\n &:after {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n }\n :focus {\n border-width: 0px;\n }\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAA2B;AAC3B,4BAAqB;AACrB,8BAA+C;AAC/C,8BAAkD;AAClD,qBAAgD;AAUzC,MAAM,yBAAqB,gCAAO,4BAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAiB;AACzB,CAAC;AAAA,YACW,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS;AAAA;AAAA,IAEzD;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA;AAAA,IAEF;AAAA;AAGG,MAAM,kBAAc,gCAAO,SAAS,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,MAAM,CAAC;AAAA,eACnF,2BAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOlB,2BAAG,MAAM,aAAa;AAAA;AAAA;AAAA,mBAGd,2BAAG,WAAW,SAAS;AAAA;AAAA,aAE7B,2BAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA,wBAIX,2BAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,wBAAoB,gCAAO,uCAAY,EAAE,MAAM,yCAAiB,MAAM,yCAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,76 @@
1
+ import * as React from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { useCallback, useRef } from "react";
4
+ import { CloseMedium } from "@elliemae/ds-legacy-icons";
5
+ import { DSIconColors } from "@elliemae/ds-legacy-icon";
6
+ import { mergeRefs } from "@elliemae/ds-legacy-utilities";
7
+ import { describe } from "@elliemae/ds-legacy-props-helpers";
8
+ import { useInputText } from "./config/useInputText.js";
9
+ import { DSInputTextDataTestIds } from "./exported-related/data-test-ids.js";
10
+ import { DSInputTextPropTypes } from "./react-desc-prop-types.js";
11
+ import { StyledClearButton, StyledInput, StyledInputWrapper } from "./styled/components.js";
12
+ const DSInputText = (props) => {
13
+ const {
14
+ globalAttributes: { className, id, ...otherGlobalAttributes },
15
+ hasFocus,
16
+ handlers,
17
+ propsWithDefault,
18
+ xstyledProps
19
+ } = useInputText(props);
20
+ const { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } = propsWithDefault;
21
+ const inputRef = useRef(null);
22
+ const shouldDisplayClearButton = clearable && !disabled && value !== "";
23
+ const handleClear = useCallback(() => {
24
+ onClear();
25
+ inputRef?.current?.focus();
26
+ }, [onClear]);
27
+ return /* @__PURE__ */ jsxs(
28
+ StyledInputWrapper,
29
+ {
30
+ className,
31
+ cols: shouldDisplayClearButton ? ["auto", "min-content"] : ["auto"],
32
+ isDisabled: disabled,
33
+ isReadOnly: readOnly,
34
+ hasError,
35
+ hasFocus,
36
+ inputSize,
37
+ ...xstyledProps,
38
+ children: [
39
+ /* @__PURE__ */ jsx(
40
+ StyledInput,
41
+ {
42
+ "data-testid": DSInputTextDataTestIds.INPUT,
43
+ disabled,
44
+ placeholder,
45
+ readOnly,
46
+ ref: mergeRefs(innerRef, inputRef),
47
+ value,
48
+ "aria-describedby": id !== void 0 ? `${id}_feedback_message` : void 0,
49
+ id,
50
+ ...handlers,
51
+ ...otherGlobalAttributes
52
+ }
53
+ ),
54
+ shouldDisplayClearButton && /* @__PURE__ */ jsx(
55
+ StyledClearButton,
56
+ {
57
+ "aria-label": "Clear input value",
58
+ buttonType: "icon",
59
+ "data-testid": DSInputTextDataTestIds.CLEAR_BUTTON,
60
+ onClick: handleClear,
61
+ children: /* @__PURE__ */ jsx(CloseMedium, { color: DSIconColors.PRIMARY })
62
+ }
63
+ )
64
+ ]
65
+ }
66
+ );
67
+ };
68
+ DSInputText.propTypes = DSInputTextPropTypes;
69
+ DSInputText.displayName = "DSInputText";
70
+ const DSInputTextWithSchema = describe(DSInputText);
71
+ DSInputTextWithSchema.propTypes = DSInputTextPropTypes;
72
+ export {
73
+ DSInputText,
74
+ DSInputTextWithSchema
75
+ };
76
+ //# sourceMappingURL=DSInputText.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSInputText.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef } from 'react';\nimport { CloseMedium } from '@elliemae/ds-legacy-icons';\nimport { DSIconColors } from '@elliemae/ds-legacy-icon';\nimport { mergeRefs } from '@elliemae/ds-legacy-utilities';\nimport { describe } from '@elliemae/ds-legacy-props-helpers';\nimport { useInputText } from './config/useInputText.js';\nimport { DSInputTextDataTestIds } from './exported-related/data-test-ids.js';\nimport type { DSInputTextT } from './react-desc-prop-types.js';\nimport { DSInputTextPropTypes } from './react-desc-prop-types.js';\nimport { StyledClearButton, StyledInput, StyledInputWrapper } from './styled/components.js';\n\nexport const DSInputText: React.ComponentType<DSInputTextT.Props> = (props) => {\n const {\n globalAttributes: { className, id, ...otherGlobalAttributes },\n hasFocus,\n handlers,\n propsWithDefault,\n xstyledProps,\n } = useInputText(props);\n\n const { clearable, disabled, hasError, innerRef, placeholder, readOnly, inputSize, onClear, value } =\n propsWithDefault;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const shouldDisplayClearButton = clearable && !disabled && value !== '';\n\n const handleClear = useCallback(() => {\n onClear();\n inputRef?.current?.focus();\n }, [onClear]);\n\n return (\n <StyledInputWrapper\n className={className}\n cols={shouldDisplayClearButton ? ['auto', 'min-content'] : ['auto']}\n isDisabled={disabled}\n isReadOnly={readOnly}\n hasError={hasError}\n hasFocus={hasFocus}\n inputSize={inputSize}\n {...xstyledProps}\n >\n <StyledInput\n data-testid={DSInputTextDataTestIds.INPUT}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n ref={mergeRefs(innerRef, inputRef)}\n value={value}\n aria-describedby={id !== undefined ? `${id}_feedback_message` : undefined}\n id={id}\n {...handlers}\n {...otherGlobalAttributes}\n />\n {shouldDisplayClearButton && (\n <StyledClearButton\n aria-label=\"Clear input value\"\n buttonType=\"icon\"\n data-testid={DSInputTextDataTestIds.CLEAR_BUTTON}\n onClick={handleClear}\n >\n <CloseMedium color={DSIconColors.PRIMARY} />\n </StyledClearButton>\n )}\n </StyledInputWrapper>\n );\n};\n\nDSInputText.propTypes = DSInputTextPropTypes;\nDSInputText.displayName = 'DSInputText';\nexport const DSInputTextWithSchema = describe(DSInputText);\nDSInputTextWithSchema.propTypes = DSInputTextPropTypes;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACgCnB,SAUE,KAVF;AAhCJ,SAAgB,aAAa,cAAc;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,aAAa,0BAA0B;AAE5D,MAAM,cAAuD,CAAC,UAAU;AAC7E,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,IAAI,GAAG,sBAAsB;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,KAAK;AAEtB,QAAM,EAAE,WAAW,UAAU,UAAU,UAAU,aAAa,UAAU,WAAW,SAAS,MAAM,IAChG;AAEF,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,2BAA2B,aAAa,CAAC,YAAY,UAAU;AAErE,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ;AACR,cAAU,SAAS,MAAM;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,2BAA2B,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAAA,MAClE,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,uBAAuB;AAAA,YACpC;AAAA,YACA;AAAA,YACA;AAAA,YACA,KAAK,UAAU,UAAU,QAAQ;AAAA,YACjC;AAAA,YACA,oBAAkB,OAAO,SAAY,GAAG,wBAAwB;AAAA,YAChE;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA;AAAA,QACN;AAAA,QACC,4BACC;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,eAAa,uBAAuB;AAAA,YACpC,SAAS;AAAA,YAET,8BAAC,eAAY,OAAO,aAAa,SAAS;AAAA;AAAA,QAC5C;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW;AACzD,sBAAsB,YAAY;",
6
+ "names": []
7
+ }
@@ -0,0 +1,52 @@
1
+ import * as React from "react";
2
+ import {
3
+ useGetGlobalAttributes,
4
+ useGetXstyledProps,
5
+ useMemoMergePropsWithDefault,
6
+ useValidateTypescriptPropTypes
7
+ } from "@elliemae/ds-legacy-props-helpers";
8
+ import { DSInputTextName } from "../exported-related/index.js";
9
+ import { useCallback, useMemo, useState } from "react";
10
+ import { defaultProps, DSInputTextPropTypes } from "../react-desc-prop-types.js";
11
+ const useInputText = (props) => {
12
+ const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
13
+ useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);
14
+ const { onValueChange } = propsWithDefault;
15
+ const [hasFocus, setHasFocus] = useState(false);
16
+ const handleOnChange = useCallback(
17
+ (e) => {
18
+ onValueChange(e.target.value, e);
19
+ },
20
+ [onValueChange]
21
+ );
22
+ const handleOnFocus = useCallback(() => {
23
+ setHasFocus(true);
24
+ }, []);
25
+ const handleOnBlur = useCallback(() => {
26
+ setHasFocus(false);
27
+ }, []);
28
+ const globalAttributes = useGetGlobalAttributes(propsWithDefault, {
29
+ onChange: handleOnChange,
30
+ onFocus: handleOnFocus,
31
+ onBlur: handleOnBlur
32
+ });
33
+ const xstyledProps = useGetXstyledProps(propsWithDefault);
34
+ return useMemo(
35
+ () => ({
36
+ globalAttributes,
37
+ hasFocus,
38
+ handlers: {
39
+ onChange: handleOnChange,
40
+ onFocus: handleOnFocus,
41
+ onBlur: handleOnBlur
42
+ },
43
+ propsWithDefault,
44
+ xstyledProps
45
+ }),
46
+ [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps]
47
+ );
48
+ };
49
+ export {
50
+ useInputText
51
+ };
52
+ //# sourceMappingURL=useInputText.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useInputText.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n} from '@elliemae/ds-legacy-props-helpers';\nimport { DSInputTextName } from '../exported-related/index.js';\nimport type React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport type { DSInputTextT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSInputTextPropTypes } from '../react-desc-prop-types.js';\n\nexport const useInputText = (props: DSInputTextT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<Required<DSInputTextT.IProps>>(props, defaultProps);\n\n useValidateTypescriptPropTypes(props, DSInputTextPropTypes, DSInputTextName);\n\n const { onValueChange } = propsWithDefault;\n\n // =============================================================================\n // INTERNAL STATE\n // =============================================================================\n const [hasFocus, setHasFocus] = useState(false);\n\n // ===========================================================================\n // INTERNAL HANDLERS\n // ===========================================================================\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n onValueChange(e.target.value, e);\n },\n [onValueChange],\n );\n\n const handleOnFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(true);\n }, []);\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setHasFocus(false);\n }, []);\n\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalAttributes = useGetGlobalAttributes(propsWithDefault, {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n });\n\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n return useMemo(\n () => ({\n globalAttributes,\n hasFocus,\n handlers: {\n onChange: handleOnChange,\n onFocus: handleOnFocus,\n onBlur: handleOnBlur,\n },\n propsWithDefault,\n xstyledProps,\n }),\n [globalAttributes, handleOnBlur, handleOnChange, handleOnFocus, hasFocus, propsWithDefault, xstyledProps],\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEhC,SAAS,aAAa,SAAS,gBAAgB;AAE/C,SAAS,cAAc,4BAA4B;AAE5C,MAAM,eAAe,CAAC,UAA8B;AACzD,QAAM,mBAAmB,6BAA4D,OAAO,YAAY;AAExG,iCAA+B,OAAO,sBAAsB,eAAe;AAE3E,QAAM,EAAE,cAAc,IAAI;AAK1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAK9C,QAAM,iBAA6D;AAAA,IACjE,CAAC,MAAM;AACL,oBAAc,EAAE,OAAO,OAAO,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,gBAA2D,YAAY,MAAM;AACjF,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,eAA0D,YAAY,MAAM;AAChF,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,QAAM,mBAAmB,uBAAuB,kBAAkB;AAAA,IAChE,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,gBAAgB,eAAe,UAAU,kBAAkB,YAAY;AAAA,EAC1G;AACF;",
6
+ "names": []
7
+ }
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ const DSInputTextDataTestIds = {
3
+ INPUT: "ds-input-text-input",
4
+ CLEAR_BUTTON: "ds-input-text-clear-button"
5
+ };
6
+ export {
7
+ DSInputTextDataTestIds
8
+ };
9
+ //# sourceMappingURL=data-test-ids.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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", "export const DSInputTextDataTestIds = {\n INPUT: 'ds-input-text-input',\n CLEAR_BUTTON: 'ds-input-text-clear-button',\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,cAAc;AAChB;",
6
+ "names": []
7
+ }
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ export * from "./data-test-ids.js";
3
+ export * from "./theming.js";
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './data-test-ids.js';\nexport * from './theming.js';\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
6
+ "names": []
7
+ }
@@ -0,0 +1,12 @@
1
+ import * as React from "react";
2
+ const DSInputTextName = "DSInputText";
3
+ const DSInputTextSlots = {
4
+ INPUT_WRAPPER: "root",
5
+ INPUT: "input",
6
+ CLEAR_BUTTON: "input-clear-button"
7
+ };
8
+ export {
9
+ DSInputTextName,
10
+ DSInputTextSlots
11
+ };
12
+ //# sourceMappingURL=theming.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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 DSInputTextName = 'DSInputText';\n\nexport const DSInputTextSlots = {\n INPUT_WRAPPER: 'root',\n INPUT: 'input',\n CLEAR_BUTTON: 'input-clear-button',\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,eAAe;AAAA,EACf,OAAO;AAAA,EACP,cAAc;AAChB;",
6
+ "names": []
7
+ }
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ export * from "./DSInputText.js";
3
+ export * from "./exported-related/index.js";
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSInputText.js';\nexport * from './exported-related/index.js';\nexport type { DSInputTextT } from './react-desc-prop-types.js';\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
6
+ "names": []
7
+ }
@@ -0,0 +1,7 @@
1
+ {
2
+ "type": "module",
3
+ "sideEffects": [
4
+ "*.css",
5
+ "*.scss"
6
+ ]
7
+ }
@@ -0,0 +1,31 @@
1
+ import * as React from "react";
2
+ import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-legacy-props-helpers";
3
+ const defaultProps = {
4
+ onValueChange: () => null,
5
+ onClear: () => null,
6
+ placeholder: "Hint Text",
7
+ disabled: false,
8
+ readOnly: false,
9
+ hasError: false,
10
+ inputSize: "m",
11
+ clearable: false
12
+ };
13
+ const DSInputTextPropTypes = {
14
+ ...globalAttributesPropTypes,
15
+ ...xstyledPropTypes,
16
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)]).description("Value of the input").defaultValue(""),
17
+ onValueChange: PropTypes.func.description("Callback triggered when the value changes").defaultValue(() => null).signature("((newValue: string, e: React.ChangeEvent) => void)"),
18
+ placeholder: PropTypes.string.description("Value of the placeholder").defaultValue(""),
19
+ innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func.signature("((ref: HTMLInputElement) => void)")]).description("Reference to the input").defaultValue(null),
20
+ disabled: PropTypes.bool.description("Whether the input is disabled").defaultValue(false),
21
+ readOnly: PropTypes.bool.description("Whether the input is readonly").defaultValue(false),
22
+ hasError: PropTypes.bool.description("Whether the input has error").defaultValue(false),
23
+ inputSize: PropTypes.oneOf(["s", "m"]).description("Size of the input").defaultValue("m"),
24
+ clearable: PropTypes.bool.description("Whether the input is clearable").defaultValue(false),
25
+ onClear: PropTypes.func.description("Callback triggered when the clearable button is pressed").defaultValue(() => null).signature("(() => void)")
26
+ };
27
+ export {
28
+ DSInputTextPropTypes,
29
+ defaultProps
30
+ };
31
+ //# sourceMappingURL=react-desc-prop-types.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 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 { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type {} from '@elliemae/ds-legacy-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-legacy-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-legacy-props-helpers';\n\nexport declare namespace DSInputTextT {\n export interface IProps {\n value?: string | number;\n onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;\n onClear?: () => void;\n placeholder?: string;\n innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((_ref: HTMLInputElement | null) => void);\n disabled?: boolean;\n readOnly?: boolean;\n hasError?: boolean;\n inputSize?: 's' | 'm';\n clearable?: boolean;\n }\n\n export interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {}\n}\n\nexport const defaultProps: DSInputTextT.Props = {\n onValueChange: () => null,\n onClear: () => null,\n placeholder: 'Hint Text',\n disabled: false,\n readOnly: false,\n hasError: false,\n inputSize: 'm',\n clearable: false,\n};\n\nexport const DSInputTextPropTypes = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string)])\n .description('Value of the input')\n .defaultValue(''),\n onValueChange: PropTypes.func\n .description('Callback triggered when the value changes')\n .defaultValue(() => null)\n .signature('((newValue: string, e: React.ChangeEvent) => void)'),\n placeholder: PropTypes.string.description('Value of the placeholder').defaultValue(''),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func.signature('((ref: HTMLInputElement) => void)')])\n .description('Reference to the input')\n .defaultValue(null),\n disabled: PropTypes.bool.description('Whether the input is disabled').defaultValue(false),\n readOnly: PropTypes.bool.description('Whether the input is readonly').defaultValue(false),\n hasError: PropTypes.bool.description('Whether the input has error').defaultValue(false),\n inputSize: PropTypes.oneOf(['s', 'm']).description('Size of the input').defaultValue('m'),\n clearable: PropTypes.bool.description('Whether the input is clearable').defaultValue(false),\n onClear: PropTypes.func\n .description('Callback triggered when the clearable button is pressed')\n .defaultValue(() => null)\n .signature('(() => void)'),\n} as WeakValidationMap<unknown>;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,WAAW,2BAA2B,wBAAwB;AAmBhE,MAAM,eAAmC;AAAA,EAC9C,eAAe,MAAM;AAAA,EACrB,SAAS,MAAM;AAAA,EACf,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AACb;AAEO,MAAM,uBAAuB;AAAA,EAClC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EACjG,YAAY,oBAAoB,EAChC,aAAa,EAAE;AAAA,EAClB,eAAe,UAAU,KACtB,YAAY,2CAA2C,EACvD,aAAa,MAAM,IAAI,EACvB,UAAU,oDAAoD;AAAA,EACjE,aAAa,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,EAAE;AAAA,EACrF,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,KAAK,UAAU,mCAAmC,CAAC,CAAC,EAC5G,YAAY,wBAAwB,EACpC,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EACtF,WAAW,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,mBAAmB,EAAE,aAAa,GAAG;AAAA,EACxF,WAAW,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EAC1F,SAAS,UAAU,KAChB,YAAY,yDAAyD,EACrE,aAAa,MAAM,IAAI,EACvB,UAAU,cAAc;AAC7B;",
6
+ "names": []
7
+ }
@@ -0,0 +1,48 @@
1
+ import * as React from "react";
2
+ import { th, css } from "@elliemae/ds-legacy-system";
3
+ const commonBorderCss = css`
4
+ border: 1px solid ${th.color("neutral-400")};
5
+ `;
6
+ const readOnlyBorderCss = css`
7
+ border: 1px solid transparent;
8
+ border-top-color: ${th.color("neutral-400")};
9
+ `;
10
+ const disabledBorderCss = commonBorderCss;
11
+ const hasErrorBorderCss = css`
12
+ border: 1px solid ${th.color("danger-900")};
13
+ `;
14
+ const hoverBorderCss = css`
15
+ border: 1px solid ${th.color("brand-700")};
16
+ `;
17
+ const focusBorderCss = css`
18
+ border: 1px solid transparent;
19
+ outline: 2px solid ${th.color("brand-700")};
20
+ outline-offset: -2px;
21
+ `;
22
+ const getBorderCss = (props) => {
23
+ if (props.isDisabled)
24
+ return disabledBorderCss;
25
+ if (props.hasFocus)
26
+ return focusBorderCss;
27
+ if (props.hasError)
28
+ return hasErrorBorderCss;
29
+ if (props.isReadOnly)
30
+ return readOnlyBorderCss;
31
+ return commonBorderCss;
32
+ };
33
+ const getHoverBorderCss = (props) => {
34
+ if (props.isDisabled)
35
+ return disabledBorderCss;
36
+ if (props.hasFocus)
37
+ return focusBorderCss;
38
+ if (props.hasError)
39
+ return hasErrorBorderCss;
40
+ if (props.isReadOnly)
41
+ return readOnlyBorderCss;
42
+ return hoverBorderCss;
43
+ };
44
+ export {
45
+ getBorderCss,
46
+ getHoverBorderCss
47
+ };
48
+ //# sourceMappingURL=borders.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/borders.ts"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { FlattenSimpleInterpolation } from '@elliemae/ds-legacy-system';\nimport { th, css } from '@elliemae/ds-legacy-system';\n\ninterface BorderNecessaryProps {\n isDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nconst commonBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('neutral-400')};\n`;\n\nconst readOnlyBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n border-top-color: ${th.color('neutral-400')};\n`;\n\nconst disabledBorderCss = commonBorderCss;\n\nconst hasErrorBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('danger-900')};\n`;\n\nconst hoverBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid ${th.color('brand-700')};\n`;\n\nconst focusBorderCss: FlattenSimpleInterpolation = css`\n border: 1px solid transparent;\n outline: 2px solid ${th.color('brand-700')};\n outline-offset: -2px;\n`;\n\nexport const getBorderCss = (props: BorderNecessaryProps): FlattenSimpleInterpolation => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly) return readOnlyBorderCss;\n return commonBorderCss;\n};\n\nexport const getHoverBorderCss = (props: BorderNecessaryProps): FlattenSimpleInterpolation => {\n if (props.isDisabled) return disabledBorderCss;\n if (props.hasFocus) return focusBorderCss;\n if (props.hasError) return hasErrorBorderCss;\n if (props.isReadOnly) return readOnlyBorderCss;\n return hoverBorderCss;\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,IAAI,WAAW;AASxB,MAAM,kBAA8C;AAAA,sBAC9B,GAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAgD;AAAA;AAAA,sBAEhC,GAAG,MAAM,aAAa;AAAA;AAG5C,MAAM,oBAAoB;AAE1B,MAAM,oBAAgD;AAAA,sBAChC,GAAG,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAA6C;AAAA,sBAC7B,GAAG,MAAM,WAAW;AAAA;AAG1C,MAAM,iBAA6C;AAAA;AAAA,uBAE5B,GAAG,MAAM,WAAW;AAAA;AAAA;AAIpC,MAAM,eAAe,CAAC,UAA4D;AACvF,MAAI,MAAM;AAAY,WAAO;AAC7B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAY,WAAO;AAC7B,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,UAA4D;AAC5F,MAAI,MAAM;AAAY,WAAO;AAC7B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAU,WAAO;AAC3B,MAAI,MAAM;AAAY,WAAO;AAC7B,SAAO;AACT;",
6
+ "names": []
7
+ }
@@ -0,0 +1,64 @@
1
+ import * as React from "react";
2
+ import { DSButtonV2 } from "@elliemae/ds-legacy-button-v2";
3
+ import { Grid } from "@elliemae/ds-legacy-grid";
4
+ import { th, styled, xStyledCommonProps } from "@elliemae/ds-legacy-system";
5
+ import { DSInputTextName, DSInputTextSlots } from "../exported-related/index.js";
6
+ import { getBorderCss, getHoverBorderCss } from "./borders.js";
7
+ const StyledInputWrapper = styled(Grid, {
8
+ name: DSInputTextName,
9
+ slot: DSInputTextSlots.INPUT_WRAPPER
10
+ })`
11
+ height: ${({ inputSize }) => inputSize === "m" ? "28px" : "24px"};
12
+
13
+ ${getBorderCss}
14
+ border-radius: 2px;
15
+
16
+ :hover {
17
+ ${getHoverBorderCss}
18
+ }
19
+ ${xStyledCommonProps}
20
+ `;
21
+ const StyledInput = styled("input", { name: DSInputTextName, slot: DSInputTextSlots.INPUT })`
22
+ padding: 0 ${th.space("xxs")};
23
+ border: none;
24
+ outline: none;
25
+ border-radius: 2px;
26
+
27
+ width: 100%;
28
+ height: 100%;
29
+ color: ${th.color("neutral-800")};
30
+
31
+ ::placeholder {
32
+ font-weight: ${th.fontWeight("regular")};
33
+ font-style: italic;
34
+ color: ${th.color("neutral-500")};
35
+ }
36
+
37
+ :disabled {
38
+ background-color: ${th.color("neutral-080")};
39
+ color: #616b7f;
40
+ cursor: not-allowed;
41
+ }
42
+ `;
43
+ const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`
44
+ height: 100%;
45
+ min-width: 20px;
46
+ width: 20px;
47
+ &:after {
48
+ border-top-left-radius: 0px !important;
49
+ border-bottom-left-radius: 0px !important;
50
+ }
51
+ :focus {
52
+ border-width: 0px;
53
+ }
54
+
55
+ &:hover:not(:disabled) {
56
+ background-color: transparent;
57
+ }
58
+ `;
59
+ export {
60
+ StyledClearButton,
61
+ StyledInput,
62
+ StyledInputWrapper
63
+ };
64
+ //# sourceMappingURL=components.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/components.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-legacy-button-v2';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport { th, styled, xStyledCommonProps } from '@elliemae/ds-legacy-system';\nimport { DSInputTextName, DSInputTextSlots } from '../exported-related/index.js';\nimport { getBorderCss, getHoverBorderCss } from './borders.js';\n\ninterface StyledInputWrapperProps {\n inputSize: string;\n isDisabled: boolean;\n hasError: boolean;\n isReadOnly: boolean;\n hasFocus: boolean;\n}\n\nexport const StyledInputWrapper = styled(Grid, {\n name: DSInputTextName,\n slot: DSInputTextSlots.INPUT_WRAPPER,\n})<StyledInputWrapperProps>`\n height: ${({ inputSize }) => (inputSize === 'm' ? '28px' : '24px')};\n\n ${getBorderCss}\n border-radius: 2px;\n\n :hover {\n ${getHoverBorderCss}\n }\n ${xStyledCommonProps}\n`;\n\nexport const StyledInput = styled('input', { name: DSInputTextName, slot: DSInputTextSlots.INPUT })`\n padding: 0 ${th.space('xxs')};\n border: none;\n outline: none;\n border-radius: 2px;\n\n width: 100%;\n height: 100%;\n color: ${th.color('neutral-800')};\n\n ::placeholder {\n font-weight: ${th.fontWeight('regular')};\n font-style: italic;\n color: ${th.color('neutral-500')};\n }\n\n :disabled {\n background-color: ${th.color('neutral-080')};\n color: #616b7f;\n cursor: not-allowed;\n }\n`;\n\nexport const StyledClearButton = styled(DSButtonV2, { name: DSInputTextName, slot: DSInputTextSlots.CLEAR_BUTTON })`\n height: 100%;\n min-width: 20px;\n width: 20px;\n &:after {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n }\n :focus {\n border-width: 0px;\n }\n\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,IAAI,QAAQ,0BAA0B;AAC/C,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,cAAc,yBAAyB;AAUzC,MAAM,qBAAqB,OAAO,MAAM;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA,YACW,CAAC,EAAE,UAAU,MAAO,cAAc,MAAM,SAAS;AAAA;AAAA,IAEzD;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA;AAAA,IAEF;AAAA;AAGG,MAAM,cAAc,OAAO,SAAS,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,MAAM,CAAC;AAAA,eACnF,GAAG,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAOlB,GAAG,MAAM,aAAa;AAAA;AAAA;AAAA,mBAGd,GAAG,WAAW,SAAS;AAAA;AAAA,aAE7B,GAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA,wBAIX,GAAG,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAMvC,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
+ "names": []
7
+ }
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { DSInputTextT } from './react-desc-prop-types.js';
3
+ export declare const DSInputText: React.ComponentType<DSInputTextT.Props>;
4
+ export declare const DSInputTextWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSInputTextT.Props>;
@@ -0,0 +1,13 @@
1
+ import type React from 'react';
2
+ import type { DSInputTextT } from '../react-desc-prop-types.js';
3
+ export declare const useInputText: (props: DSInputTextT.Props) => {
4
+ globalAttributes: import("@elliemae/ds-legacy-props-helpers").GlobalAttributesT<Element>;
5
+ hasFocus: boolean;
6
+ handlers: {
7
+ onChange: React.ChangeEventHandler<HTMLInputElement>;
8
+ onFocus: React.FocusEventHandler<HTMLInputElement>;
9
+ onBlur: React.FocusEventHandler<HTMLInputElement>;
10
+ };
11
+ propsWithDefault: Required<DSInputTextT.IProps>;
12
+ xstyledProps: import("@elliemae/ds-legacy-props-helpers").XstyledProps;
13
+ };
@@ -0,0 +1,4 @@
1
+ export declare const DSInputTextDataTestIds: {
2
+ INPUT: string;
3
+ CLEAR_BUTTON: string;
4
+ };
@@ -0,0 +1,2 @@
1
+ export * from './data-test-ids.js';
2
+ export * from './theming.js';
@@ -0,0 +1,6 @@
1
+ export declare const DSInputTextName = "DSInputText";
2
+ export declare const DSInputTextSlots: {
3
+ INPUT_WRAPPER: string;
4
+ INPUT: string;
5
+ CLEAR_BUTTON: string;
6
+ };
@@ -0,0 +1,3 @@
1
+ export * from './DSInputText.js';
2
+ export * from './exported-related/index.js';
3
+ export type { DSInputTextT } from './react-desc-prop-types.js';
@@ -0,0 +1,21 @@
1
+ import type { WeakValidationMap } from 'react';
2
+ import type React from 'react';
3
+ import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-legacy-props-helpers';
4
+ export declare namespace DSInputTextT {
5
+ interface IProps {
6
+ value?: string | number;
7
+ onValueChange?: (nextValue: string | number, e: React.ChangeEvent<HTMLInputElement>) => void;
8
+ onClear?: () => void;
9
+ placeholder?: string;
10
+ innerRef?: React.MutableRefObject<HTMLInputElement | null> | ((_ref: HTMLInputElement | null) => void);
11
+ disabled?: boolean;
12
+ readOnly?: boolean;
13
+ hasError?: boolean;
14
+ inputSize?: 's' | 'm';
15
+ clearable?: boolean;
16
+ }
17
+ interface Props extends IProps, Omit<GlobalAttributesT<HTMLInputElement>, keyof IProps>, XstyledProps {
18
+ }
19
+ }
20
+ export declare const defaultProps: DSInputTextT.Props;
21
+ export declare const DSInputTextPropTypes: WeakValidationMap<unknown>;
@@ -0,0 +1,10 @@
1
+ import type { FlattenSimpleInterpolation } from '@elliemae/ds-legacy-system';
2
+ interface BorderNecessaryProps {
3
+ isDisabled: boolean;
4
+ hasError: boolean;
5
+ isReadOnly: boolean;
6
+ hasFocus: boolean;
7
+ }
8
+ export declare const getBorderCss: (props: BorderNecessaryProps) => FlattenSimpleInterpolation;
9
+ export declare const getHoverBorderCss: (props: BorderNecessaryProps) => FlattenSimpleInterpolation;
10
+ export {};
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ interface StyledInputWrapperProps {
3
+ inputSize: string;
4
+ isDisabled: boolean;
5
+ hasError: boolean;
6
+ isReadOnly: boolean;
7
+ hasFocus: boolean;
8
+ }
9
+ export declare const StyledInputWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-legacy-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-legacy-system").Theme, StyledInputWrapperProps & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
10
+ export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
11
+ export declare const StyledClearButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-legacy-button-v2").DSButtonT.Props>, import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
12
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};