@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.
- package/dist/cjs/DSInputText.js +106 -0
- package/dist/cjs/DSInputText.js.map +7 -0
- package/dist/cjs/config/useInputText.js +77 -0
- package/dist/cjs/config/useInputText.js.map +7 -0
- package/dist/cjs/exported-related/data-test-ids.js +39 -0
- package/dist/cjs/exported-related/data-test-ids.js.map +7 -0
- package/dist/cjs/exported-related/index.js +31 -0
- package/dist/cjs/exported-related/index.js.map +7 -0
- package/dist/cjs/exported-related/theming.js +42 -0
- package/dist/cjs/exported-related/theming.js.map +7 -0
- package/dist/cjs/index.js +31 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/react-desc-prop-types.js +61 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/styled/borders.js +78 -0
- package/dist/cjs/styled/borders.js.map +7 -0
- package/dist/cjs/styled/components.js +94 -0
- package/dist/cjs/styled/components.js.map +7 -0
- package/dist/esm/DSInputText.js +76 -0
- package/dist/esm/DSInputText.js.map +7 -0
- package/dist/esm/config/useInputText.js +52 -0
- package/dist/esm/config/useInputText.js.map +7 -0
- package/dist/esm/exported-related/data-test-ids.js +9 -0
- package/dist/esm/exported-related/data-test-ids.js.map +7 -0
- package/dist/esm/exported-related/index.js +4 -0
- package/dist/esm/exported-related/index.js.map +7 -0
- package/dist/esm/exported-related/theming.js +12 -0
- package/dist/esm/exported-related/theming.js.map +7 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/package.json +7 -0
- package/dist/esm/react-desc-prop-types.js +31 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/styled/borders.js +48 -0
- package/dist/esm/styled/borders.js.map +7 -0
- package/dist/esm/styled/components.js +64 -0
- package/dist/esm/styled/components.js.map +7 -0
- package/dist/types/DSInputText.d.ts +4 -0
- package/dist/types/config/useInputText.d.ts +13 -0
- package/dist/types/exported-related/data-test-ids.d.ts +4 -0
- package/dist/types/exported-related/index.d.ts +2 -0
- package/dist/types/exported-related/theming.d.ts +6 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/react-desc-prop-types.d.ts +21 -0
- package/dist/types/styled/borders.d.ts +10 -0
- package/dist/types/styled/components.d.ts +12 -0
- package/dist/types/tests/DSInput.events.test.d.ts +1 -0
- package/dist/types/tests/DSInput.keyboard.test.d.ts +1 -0
- package/dist/types/tests/DSInput.test.d.ts +1 -0
- package/dist/types/tests/axe.test.d.ts +1 -0
- 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,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,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,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,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,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 {};
|