@bikdotai/bik-component-library 0.0.849 → 0.0.850-beta.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/components/bik-layout/CommonStyles.js +4 -6
- package/dist/cjs/components/bik-layout/CommonStyles.js.map +1 -1
- package/dist/cjs/components/button/themes.js +3 -3
- package/dist/cjs/components/button/themes.js.map +1 -1
- package/dist/cjs/components/datePicker/DatePicker.js +1 -1
- package/dist/cjs/components/datePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/datePicker/DatePicker.styled.js +20 -14
- package/dist/cjs/components/datePicker/DatePicker.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/ChipInput.js +1 -1
- package/dist/cjs/components/dropdown/ChipInput.js.map +1 -1
- package/dist/cjs/components/dropdown/Common.styled.js +6 -5
- package/dist/cjs/components/dropdown/Common.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js.map +1 -1
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/input/Input.styled.js +25 -12
- package/dist/cjs/components/input/Input.styled.js.map +1 -1
- package/dist/cjs/components/tabs/Tabs.js +1 -1
- package/dist/cjs/components/tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/tabs/Tabs.styles.js +22 -8
- package/dist/cjs/components/tabs/Tabs.styles.js.map +1 -1
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.js.map +1 -1
- package/dist/cjs/components/tag/Tag.styled.js +4 -0
- package/dist/cjs/components/tag/Tag.styled.js.map +1 -1
- package/dist/cjs/components/tag/model.js.map +1 -1
- package/dist/esm/components/bik-layout/CommonStyles.js +1 -3
- package/dist/esm/components/bik-layout/CommonStyles.js.map +1 -1
- package/dist/esm/components/button/themes.js +1 -1
- package/dist/esm/components/button/themes.js.map +1 -1
- package/dist/esm/components/datePicker/DatePicker.js +22 -21
- package/dist/esm/components/datePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/datePicker/DatePicker.styled.d.ts +10 -0
- package/dist/esm/components/datePicker/DatePicker.styled.js +23 -16
- package/dist/esm/components/datePicker/DatePicker.styled.js.map +1 -1
- package/dist/esm/components/dropdown/ChipInput.d.ts +1 -0
- package/dist/esm/components/dropdown/ChipInput.js +37 -30
- package/dist/esm/components/dropdown/ChipInput.js.map +1 -1
- package/dist/esm/components/dropdown/Common.styled.js +7 -6
- package/dist/esm/components/dropdown/Common.styled.js.map +1 -1
- package/dist/esm/components/dropdown/Dropdown.d.ts +2 -0
- package/dist/esm/components/dropdown/Dropdown.js +96 -89
- package/dist/esm/components/dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +103 -95
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts +1 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js +17 -17
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js.map +1 -1
- package/dist/esm/components/dropdown/type.d.ts +2 -0
- package/dist/esm/components/input/Input.js +104 -101
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/input/Input.model.d.ts +2 -0
- package/dist/esm/components/input/Input.styled.d.ts +2 -0
- package/dist/esm/components/input/Input.styled.js +38 -25
- package/dist/esm/components/input/Input.styled.js.map +1 -1
- package/dist/esm/components/tabs/Tabs.js +103 -81
- package/dist/esm/components/tabs/Tabs.js.map +1 -1
- package/dist/esm/components/tabs/Tabs.model.d.ts +7 -0
- package/dist/esm/components/tabs/Tabs.styles.d.ts +2 -0
- package/dist/esm/components/tabs/Tabs.styles.js +23 -9
- package/dist/esm/components/tabs/Tabs.styles.js.map +1 -1
- package/dist/esm/components/tag/Tag.d.ts +1 -1
- package/dist/esm/components/tag/Tag.js +17 -15
- package/dist/esm/components/tag/Tag.js.map +1 -1
- package/dist/esm/components/tag/Tag.styled.d.ts +1 -0
- package/dist/esm/components/tag/Tag.styled.js +10 -6
- package/dist/esm/components/tag/Tag.styled.js.map +1 -1
- package/dist/esm/components/tag/model.d.ts +5 -0
- package/dist/esm/components/tag/model.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBox.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { IconButton } from '@src/components/icon-button';\nimport { Input } from '@src/components/input';\nimport { InputStyleContext } from '@src/components/input/context/InputStyleProvider';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../../../../assets/icons/cross.svg';\nimport SearchIcon from '../../../../../assets/icons/search.svg';\n\nexport const SearchBox: React.FC<{\n\tonSearch: (searchString: string) => void;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = ({ onSearch, version }) => {\n\tconst [val, setVal] = useState('');\n\tconst [reset, setReset] = useState(false);\n\n\treturn (\n\t\t<InputStyleContext.Provider\n\t\t\tvalue={{\n\t\t\t\tInputWrapper: {\n\t\t\t\t\tborderRadius: 0,\n\t\t\t\t\tborder: 0,\n\t\t\t\t\tborderBottom: `${\n\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? 0.5 : 1\n\t\t\t\t\t}px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\tpadding: `${\n\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? '6px 8px' : '14px 16px'\n\t\t\t\t\t}`,\n\t\t\t\t},\n\t\t\t\tIconHolder: {\n\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t},\n\t\t\t\tinput: {\n\t\t\t\t\tmarginLeft: 4,\n\t\t\t\t\tminHeight: '100%',\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tnoKeyDownChange\n\t\t\t\tskipFocus={true}\n\t\t\t\tplaceholder
|
|
1
|
+
{"version":3,"file":"SearchBox.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { IconButton } from '@src/components/icon-button';\nimport { Input } from '@src/components/input';\nimport { InputStyleContext } from '@src/components/input/context/InputStyleProvider';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../../../../assets/icons/cross.svg';\nimport SearchIcon from '../../../../../assets/icons/search.svg';\n\nexport const SearchBox: React.FC<{\n\tonSearch: (searchString: string) => void;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tplaceholder?: string;\n}> = ({ onSearch, version, placeholder = 'Search' }) => {\n\tconst [val, setVal] = useState('');\n\tconst [reset, setReset] = useState(false);\n\n\treturn (\n\t\t<InputStyleContext.Provider\n\t\t\tvalue={{\n\t\t\t\tInputWrapper: {\n\t\t\t\t\tborderRadius: 0,\n\t\t\t\t\tborder: 0,\n\t\t\t\t\tborderBottom: `${\n\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? 0.5 : 1\n\t\t\t\t\t}px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\tpadding: `${\n\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? '6px 8px' : '14px 16px'\n\t\t\t\t\t}`,\n\t\t\t\t},\n\t\t\t\tIconHolder: {\n\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t},\n\t\t\t\tinput: {\n\t\t\t\t\tmarginLeft: 4,\n\t\t\t\t\tminHeight: '100%',\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tnoKeyDownChange\n\t\t\t\tskipFocus={true}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tvariant={version === '2.0' || version === '3.0' ? 'small' : 'default'}\n\t\t\t\tleftIcon={{\n\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\t\twidth={version === '2.0' || version === '3.0' ? 18 : 24}\n\t\t\t\t\t\t\theight={version === '2.0' || version === '3.0' ? 18 : 24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\trightIcon={{\n\t\t\t\t\ticon: () =>\n\t\t\t\t\t\t!val ? (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetReset(true);\n\t\t\t\t\t\t\t\t\tonSearch('');\n\t\t\t\t\t\t\t\t\tsetVal('');\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={CrossIcon}\n\t\t\t\t\t\t\t\twidth={version === '2.0' || version === '3.0' ? 18 : 24}\n\t\t\t\t\t\t\t\theight={version === '2.0' || version === '3.0' ? 18 : 24}\n\t\t\t\t\t\t\t\ticonColor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\treset={reset}\n\t\t\t\tonChangeText={(text) => {\n\t\t\t\t\tsetReset(false);\n\t\t\t\t\tsetVal(text);\n\t\t\t\t\tonSearch(text);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</InputStyleContext.Provider>\n\t);\n};\n"],"names":["SearchBox","onSearch","version","placeholder","val","setVal","useState","reset","setReset","jsx","InputStyleContext","COLORS","Input","SearchIcon","IconButton","CrossIcon","text"],"mappings":";;;;;;;;AAQO,MAAMA,IAIR,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,aAAAC,IAAc,eAAe;AACvD,QAAM,CAACC,GAAKC,CAAM,IAAIC,EAAS,EAAE,GAC3B,CAACC,GAAOC,CAAQ,IAAIF,EAAS,EAAK;AAExC,SACC,gBAAAG;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACA,OAAO;AAAA,QACN,cAAc;AAAA,UACb,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,cAAc,GACbR,MAAY,SAASA,MAAY,QAAQ,MAAM,CAChD,YAAYS,EAAO,OAAO,OAAO;AAAA,UACjC,SAAS,GACRT,MAAY,SAASA,MAAY,QAAQ,YAAY,WACtD;AAAA,QAAA;AAAA,QAED,YAAY;AAAA,UACX,YAAY;AAAA,QAAA;AAAA,QAEb,OAAO;AAAA,UACN,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA;AAAA,MACZ;AAAA,MAGD,UAAA,gBAAAO;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,iBAAe;AAAA,UACf,WAAW;AAAA,UACX,aAAAT;AAAA,UACA,SAASD,MAAY,SAASA,MAAY,QAAQ,UAAU;AAAA,UAC5D,UAAU;AAAA,YACT,MAAM,MACL,gBAAAO;AAAA,cAACI;AAAAA,cAAA;AAAA,gBACA,OAAOX,MAAY,SAASA,MAAY,QAAQ,KAAK;AAAA,gBACrD,QAAQA,MAAY,SAASA,MAAY,QAAQ,KAAK;AAAA,gBACtD,OAAOS,EAAO,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UACvB;AAAA,UAGF,WAAW;AAAA,YACV,MAAM,MACJP,IAGA,gBAAAK;AAAA,cAACK;AAAA,cAAA;AAAA,gBACA,SAAS,MAAM;AACd,kBAAAN,EAAS,EAAI,GACbP,EAAS,EAAE,GACXI,EAAO,EAAE;AAAA,gBACV;AAAA,gBACA,MAAMU;AAAAA,gBACN,OAAOb,MAAY,SAASA,MAAY,QAAQ,KAAK;AAAA,gBACrD,QAAQA,MAAY,SAASA,MAAY,QAAQ,KAAK;AAAA,gBACtD,WAAWS,EAAO,QAAQ;AAAA,cAAA;AAAA,YAAA,2BAXzB;AAAA,UAYF;AAAA,UAGH,OAAAJ;AAAA,UACA,cAAc,CAACS,MAAS;AACvB,YAAAR,EAAS,EAAK,GACdH,EAAOW,CAAI,GACXf,EAASe,CAAI;AAAA,UACd;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAGH;"}
|
|
@@ -4,6 +4,8 @@ export interface OpenDropdownProps {
|
|
|
4
4
|
defaultOptions?: DropdownOption[];
|
|
5
5
|
options: DropdownOption[];
|
|
6
6
|
isSearchable?: boolean;
|
|
7
|
+
/** Placeholder for the search input when isSearchable is set. Defaults to 'Search'. */
|
|
8
|
+
searchPlaceholder?: string;
|
|
7
9
|
error?: string;
|
|
8
10
|
isMultiSelect?: boolean;
|
|
9
11
|
maxSelections?: number;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsxs as a, jsx as n, Fragment as
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { isFunction as
|
|
1
|
+
import { jsxs as a, jsx as n, Fragment as Le } from "react/jsx-runtime";
|
|
2
|
+
import Ee from "../../assets/icons/info.svg.js";
|
|
3
|
+
import { forwardRef as He, useState as v, useContext as _e, useRef as ke, useEffect as d } from "react";
|
|
4
|
+
import { isFunction as ne, shouldSanitizeForType as Ae, sanitizeUnsafeInput as Re, validateInput as De } from "./Input-helper.js";
|
|
5
5
|
import { TitleSmall as Fe, BodySecondary as Be } from "../TypographyStyle.js";
|
|
6
|
-
import { COLORS as
|
|
7
|
-
import
|
|
8
|
-
import { InputStyleContext as
|
|
9
|
-
import { RootContainer as
|
|
10
|
-
import { Button as
|
|
11
|
-
import { Tooltip as
|
|
12
|
-
const
|
|
13
|
-
(e,
|
|
6
|
+
import { COLORS as ie } from "../../constants/Theme.js";
|
|
7
|
+
import Oe from "../../assets/icons/errorInfo.svg.js";
|
|
8
|
+
import { InputStyleContext as Pe } from "./context/InputStyleProvider.js";
|
|
9
|
+
import { RootContainer as ze, InputFooter as Ke, MaxCharStyle as re, InputWrapper as Ne, IconHolder as le, PrefixHolder as Ve, InputContainer as We, InputContainerSmall as Xe, InputContainerXSmall as Ue, SuffixHolder as je, InputHeader as qe } from "./Input.styled.js";
|
|
10
|
+
import { Button as ae } from "../button/Button.js";
|
|
11
|
+
import { Tooltip as Ge } from "../tooltips/Tooltip.js";
|
|
12
|
+
const Ye = He(
|
|
13
|
+
(e, oe) => {
|
|
14
14
|
const {
|
|
15
15
|
placeholder: H,
|
|
16
16
|
leftIcon: _,
|
|
@@ -21,37 +21,38 @@ const Ge = Ee(
|
|
|
21
21
|
hintText: A,
|
|
22
22
|
type: c,
|
|
23
23
|
state: b,
|
|
24
|
-
validate:
|
|
24
|
+
validate: ce,
|
|
25
25
|
variant: o,
|
|
26
26
|
button: h,
|
|
27
27
|
suffixText: R,
|
|
28
|
-
prefixText:
|
|
29
|
-
onChangeText:
|
|
28
|
+
prefixText: D,
|
|
29
|
+
onChangeText: F,
|
|
30
30
|
value: m,
|
|
31
|
-
noErrorHint:
|
|
32
|
-
reset:
|
|
33
|
-
rangeValidation:
|
|
34
|
-
noKeyDownChange:
|
|
35
|
-
version:
|
|
31
|
+
noErrorHint: se,
|
|
32
|
+
reset: B,
|
|
33
|
+
rangeValidation: he,
|
|
34
|
+
noKeyDownChange: ue,
|
|
35
|
+
version: de,
|
|
36
36
|
noMaxCharCheck: O,
|
|
37
37
|
labelElement: P,
|
|
38
38
|
autoGrow: M,
|
|
39
39
|
minHeight: S,
|
|
40
|
-
maxHeight:
|
|
41
|
-
labelTextBold:
|
|
42
|
-
truncateText:
|
|
40
|
+
maxHeight: fe,
|
|
41
|
+
labelTextBold: me,
|
|
42
|
+
truncateText: ge,
|
|
43
43
|
maxCharLimitPosition: z,
|
|
44
44
|
maxCharStyle: K,
|
|
45
|
-
hightlightInputColor:
|
|
45
|
+
hightlightInputColor: xe,
|
|
46
46
|
onKeyDownEvent: N,
|
|
47
|
-
hideInputHeader:
|
|
48
|
-
hideBorder:
|
|
49
|
-
inputWrapperStyles:
|
|
47
|
+
hideInputHeader: Ie,
|
|
48
|
+
hideBorder: Ce,
|
|
49
|
+
inputWrapperStyles: ve,
|
|
50
50
|
minCharsToTrigger: V,
|
|
51
|
-
maxCharAlignment:
|
|
51
|
+
maxCharAlignment: ye,
|
|
52
52
|
isDisabled: W = !1,
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
solidDisabled: X = !1,
|
|
54
|
+
allowUnsafeInput: Te,
|
|
55
|
+
leftIconStyle: be
|
|
55
56
|
} = {
|
|
56
57
|
maxCharLimit: 0,
|
|
57
58
|
type: "text",
|
|
@@ -60,7 +61,7 @@ const Ge = Ee(
|
|
|
60
61
|
minCharsToTrigger: 0,
|
|
61
62
|
maxCharAlignment: !1,
|
|
62
63
|
...e
|
|
63
|
-
},
|
|
64
|
+
}, U = _?.icon, j = y?.icon, [p, I] = v(!1), [Me, w] = v(!1), [u, q] = v(), G = o === "x-small" ? "12px" : o === "small" ? "18px" : "22px", C = _e(Pe), [Y, L] = v(""), Se = ke(null), r = oe ?? Se;
|
|
64
65
|
d(() => {
|
|
65
66
|
L(m || ""), !m && M && (r.current.style.height = S || "48px");
|
|
66
67
|
}, [m]), d(() => {
|
|
@@ -68,195 +69,197 @@ const Ge = Ee(
|
|
|
68
69
|
}, [r]), d(() => {
|
|
69
70
|
const t = r.current;
|
|
70
71
|
if (t && ["phonenumber", "zip", "number"].includes(c))
|
|
71
|
-
return t.addEventListener("wheel",
|
|
72
|
-
t.removeEventListener("wheel",
|
|
72
|
+
return t.addEventListener("wheel", Q, { passive: !1 }), () => {
|
|
73
|
+
t.removeEventListener("wheel", Q);
|
|
73
74
|
};
|
|
74
75
|
}, []), d(() => {
|
|
75
|
-
|
|
76
|
-
}, [
|
|
76
|
+
B && L("");
|
|
77
|
+
}, [B]), d(() => {
|
|
77
78
|
w(!!e.isActive), e.isActive && r.current?.focus();
|
|
78
79
|
}, [e.isActive]), d(() => {
|
|
79
|
-
|
|
80
|
+
q(e.errorMessage);
|
|
80
81
|
}, [e.errorMessage]), d(() => {
|
|
81
82
|
I(!1), (e.state === "invalid" || u || e.state === "disabled-invalid") && I(!0), e.state === "active" && r.current?.focus();
|
|
82
83
|
}, [e.state, u]), d(() => {
|
|
83
84
|
I(!!u || e.state === "invalid");
|
|
84
85
|
}, [u, e.state]);
|
|
85
86
|
const f = (t, ...i) => {
|
|
86
|
-
|
|
87
|
-
},
|
|
88
|
-
const i = l !== 0 ? l :
|
|
89
|
-
N && (!s.length || s.length >= x) && N(t), !
|
|
90
|
-
}, J = (t) => {
|
|
91
|
-
t.preventDefault();
|
|
87
|
+
ne(t) && t(...i);
|
|
88
|
+
}, $ = () => c === "zip" ? 6 : 2e3, J = (t) => {
|
|
89
|
+
const i = l !== 0 ? l : $(), g = [8], x = V, s = t.target.value;
|
|
90
|
+
N && (!s.length || s.length >= x) && N(t), !ue && (!s.length || s.length >= x) && F(m || "", t), !O && !g.includes(t.which) && i > 0 && s.length >= i && t.preventDefault();
|
|
92
91
|
}, Q = (t) => {
|
|
92
|
+
t.preventDefault();
|
|
93
|
+
}, Z = (t) => {
|
|
93
94
|
let i = t.target.value;
|
|
94
|
-
const g = l !== 0 ? l + 1 :
|
|
95
|
-
if (!
|
|
95
|
+
const g = l !== 0 ? l + 1 : $(), x = V;
|
|
96
|
+
if (!Te && Ae(c) && (i = Re(i)), !O && g > 0 && i.length >= g && (i = i.substring(0, g - 1)), e.textControl || L(i || ""), x && i && i.length < x)
|
|
96
97
|
return;
|
|
97
|
-
|
|
98
|
-
const s =
|
|
99
|
-
if (!s || !
|
|
98
|
+
F(i, t), M && (r.current.style.height = `${r.current.scrollHeight}px`, i || (r.current.style.height = S || "48px"));
|
|
99
|
+
const s = ce || De;
|
|
100
|
+
if (!s || !ne(s))
|
|
100
101
|
return;
|
|
101
|
-
const [
|
|
102
|
+
const [pe, we] = s(
|
|
102
103
|
i,
|
|
103
104
|
c,
|
|
104
|
-
|
|
105
|
+
he
|
|
105
106
|
);
|
|
106
|
-
I(!
|
|
107
|
-
}, Z = (t) => {
|
|
108
|
-
e.skipFocus || w(!0), f(e.onFocus?.(t));
|
|
107
|
+
I(!pe), q(e.errorMessage ? e.errorMessage : we);
|
|
109
108
|
}, ee = (t) => {
|
|
109
|
+
e.skipFocus || w(!0), f(e.onFocus?.(t));
|
|
110
|
+
}, te = (t) => {
|
|
110
111
|
e.skipFocus || w(!1), f(e.onBlur?.(t));
|
|
111
|
-
}, E = () => /* @__PURE__ */ a(
|
|
112
|
+
}, E = () => /* @__PURE__ */ a(Le, { children: [
|
|
112
113
|
c !== "multiline" && /* @__PURE__ */ n(
|
|
113
114
|
"input",
|
|
114
115
|
{
|
|
115
|
-
className:
|
|
116
|
+
className: ge ? "truncate-class" : "",
|
|
116
117
|
"data-test": e["data-test"],
|
|
117
118
|
id: e.id,
|
|
118
119
|
style: C?.input ?? {},
|
|
119
120
|
ref: r,
|
|
120
121
|
disabled: W,
|
|
121
122
|
type: ["phonenumber", "zip", "number"].includes(c) ? "number" : c,
|
|
122
|
-
value:
|
|
123
|
-
onFocus: (t) =>
|
|
124
|
-
onBlur: (t) =>
|
|
123
|
+
value: Y,
|
|
124
|
+
onFocus: (t) => ee(t),
|
|
125
|
+
onBlur: (t) => te(t),
|
|
125
126
|
placeholder: H || "Enter here",
|
|
126
|
-
onChange:
|
|
127
|
+
onChange: Z,
|
|
127
128
|
onClick: (t) => f(e.onClick),
|
|
128
|
-
onKeyDown: (t) =>
|
|
129
|
+
onKeyDown: (t) => J(t)
|
|
129
130
|
}
|
|
130
131
|
),
|
|
131
132
|
c === "multiline" && /* @__PURE__ */ n(
|
|
132
133
|
"textarea",
|
|
133
134
|
{
|
|
134
135
|
"data-test": e["data-test"],
|
|
135
|
-
value:
|
|
136
|
+
value: Y,
|
|
136
137
|
ref: r,
|
|
137
|
-
onFocus: (t) =>
|
|
138
|
-
onBlur: (t) =>
|
|
138
|
+
onFocus: (t) => ee(t),
|
|
139
|
+
onBlur: (t) => te(t),
|
|
139
140
|
onClick: (t) => f(e.onClick),
|
|
140
141
|
disabled: W,
|
|
141
142
|
placeholder: H || "Enter here",
|
|
142
|
-
onChange:
|
|
143
|
-
onKeyDown: (t) =>
|
|
143
|
+
onChange: Z,
|
|
144
|
+
onKeyDown: (t) => J(t),
|
|
144
145
|
maxLength: l > 0 ? l : void 0
|
|
145
146
|
}
|
|
146
147
|
)
|
|
147
148
|
] });
|
|
148
149
|
return /* @__PURE__ */ a(
|
|
149
|
-
|
|
150
|
+
ze,
|
|
150
151
|
{
|
|
151
152
|
width: e.width,
|
|
152
153
|
height: e.height,
|
|
153
154
|
state: b,
|
|
155
|
+
solidDisabled: X,
|
|
154
156
|
type: c,
|
|
155
157
|
style: C?.RootContainer ?? {},
|
|
156
158
|
children: [
|
|
157
159
|
/* @__PURE__ */ a("div", { className: "flex-align-center", children: [
|
|
158
|
-
!
|
|
159
|
-
!!u && /* @__PURE__ */ n(
|
|
160
|
+
!se && (!!A || !!u) && /* @__PURE__ */ a(Ke, { invalid: !!u, children: [
|
|
161
|
+
!!u && /* @__PURE__ */ n(Oe, { width: 16, height: 16 }),
|
|
160
162
|
u || A
|
|
161
163
|
] }),
|
|
162
|
-
l > 0 && z === "BOTTOM" && /* @__PURE__ */ a(
|
|
164
|
+
l > 0 && z === "BOTTOM" && /* @__PURE__ */ a(re, { position: "BOTTOM", style: K, children: [
|
|
163
165
|
(m ?? "").toString()?.length ?? 0,
|
|
164
166
|
"/",
|
|
165
167
|
l
|
|
166
168
|
] })
|
|
167
169
|
] }),
|
|
168
170
|
/* @__PURE__ */ a(
|
|
169
|
-
|
|
171
|
+
Ne,
|
|
170
172
|
{
|
|
171
173
|
variant: o,
|
|
172
174
|
state: b,
|
|
175
|
+
solidDisabled: X,
|
|
173
176
|
width: e.width,
|
|
174
|
-
isActive: b === "active" ||
|
|
177
|
+
isActive: b === "active" || Me,
|
|
175
178
|
isInvalid: p,
|
|
176
|
-
style: C?.InputWrapper ??
|
|
177
|
-
version:
|
|
179
|
+
style: C?.InputWrapper ?? ve ?? {},
|
|
180
|
+
version: de,
|
|
178
181
|
height: e.height,
|
|
179
|
-
hightlightInputColor:
|
|
180
|
-
hideBorder:
|
|
182
|
+
hightlightInputColor: xe,
|
|
183
|
+
hideBorder: Ce,
|
|
181
184
|
children: [
|
|
182
|
-
!!
|
|
183
|
-
|
|
185
|
+
!!U && /* @__PURE__ */ n(
|
|
186
|
+
le,
|
|
184
187
|
{
|
|
185
188
|
variant: o,
|
|
186
|
-
iconSize:
|
|
189
|
+
iconSize: G,
|
|
187
190
|
onClick: () => f(_?.callback),
|
|
188
191
|
isLeft: !0,
|
|
189
192
|
style: {
|
|
190
193
|
...C?.IconHolder ?? {},
|
|
191
|
-
...
|
|
194
|
+
...be
|
|
192
195
|
},
|
|
193
|
-
children: /* @__PURE__ */ n(
|
|
196
|
+
children: /* @__PURE__ */ n(U, {})
|
|
194
197
|
}
|
|
195
198
|
),
|
|
196
|
-
!!
|
|
199
|
+
!!D && /* @__PURE__ */ n(Ve, { variant: o, children: D }),
|
|
197
200
|
o === "default" && /* @__PURE__ */ n(
|
|
198
|
-
|
|
201
|
+
We,
|
|
199
202
|
{
|
|
200
203
|
height: e.height,
|
|
201
204
|
type: e.type,
|
|
202
205
|
minHeight: S,
|
|
203
|
-
maxHeight:
|
|
206
|
+
maxHeight: fe,
|
|
204
207
|
autoGrow: M,
|
|
205
208
|
children: E()
|
|
206
209
|
}
|
|
207
210
|
),
|
|
208
|
-
o === "small" && /* @__PURE__ */ n(
|
|
209
|
-
o === "x-small" && /* @__PURE__ */ n(
|
|
210
|
-
!!
|
|
211
|
-
|
|
211
|
+
o === "small" && /* @__PURE__ */ n(Xe, { height: e.height, type: e.type, children: E() }),
|
|
212
|
+
o === "x-small" && /* @__PURE__ */ n(Ue, { height: e.height, type: e.type, children: E() }),
|
|
213
|
+
!!j && /* @__PURE__ */ n(
|
|
214
|
+
le,
|
|
212
215
|
{
|
|
213
216
|
variant: o,
|
|
214
|
-
iconSize:
|
|
217
|
+
iconSize: G,
|
|
215
218
|
onClick: () => f(y?.callback),
|
|
216
219
|
isLeft: !1,
|
|
217
220
|
"data-test": y?.["data-test"],
|
|
218
|
-
children: /* @__PURE__ */ n(
|
|
221
|
+
children: /* @__PURE__ */ n(j, {})
|
|
219
222
|
}
|
|
220
223
|
),
|
|
221
|
-
!!R && /* @__PURE__ */ n(
|
|
224
|
+
!!R && /* @__PURE__ */ n(je, { variant: o, children: R }),
|
|
222
225
|
h && h.text && /* @__PURE__ */ n(
|
|
223
|
-
|
|
226
|
+
ae,
|
|
224
227
|
{
|
|
225
228
|
buttonText: h.text,
|
|
226
229
|
buttonType: h.buttonType,
|
|
227
230
|
onClick: () => f(h?.onClick)
|
|
228
231
|
}
|
|
229
232
|
),
|
|
230
|
-
h && h.buttonProps && /* @__PURE__ */ n(
|
|
233
|
+
h && h.buttonProps && /* @__PURE__ */ n(ae, { ...h.buttonProps })
|
|
231
234
|
]
|
|
232
235
|
}
|
|
233
236
|
),
|
|
234
|
-
!
|
|
235
|
-
|
|
237
|
+
!Ie && (!!T || !!l) && /* @__PURE__ */ a(
|
|
238
|
+
qe,
|
|
236
239
|
{
|
|
237
240
|
invalid: p,
|
|
238
|
-
maxCharAlignment:
|
|
241
|
+
maxCharAlignment: ye,
|
|
239
242
|
children: [
|
|
240
243
|
P && P,
|
|
241
244
|
/* @__PURE__ */ a("div", { className: "label__container", children: [
|
|
242
|
-
|
|
245
|
+
me ? /* @__PURE__ */ a(Fe, { children: [
|
|
243
246
|
T,
|
|
244
247
|
k ? /* @__PURE__ */ n("span", { children: "*" }) : ""
|
|
245
248
|
] }) : /* @__PURE__ */ a(Be, { children: [
|
|
246
249
|
T,
|
|
247
250
|
k ? /* @__PURE__ */ n("span", { children: "*" }) : ""
|
|
248
251
|
] }),
|
|
249
|
-
e.tooltipText && /* @__PURE__ */ n(
|
|
250
|
-
|
|
252
|
+
e.tooltipText && /* @__PURE__ */ n(Ge, { body: e.tooltipText, placement: "top", children: /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(
|
|
253
|
+
Ee,
|
|
251
254
|
{
|
|
252
255
|
style: { marginTop: -3 },
|
|
253
256
|
width: 18,
|
|
254
257
|
height: 18,
|
|
255
|
-
color: p ?
|
|
258
|
+
color: p ? ie.content.negative : ie.content.primary
|
|
256
259
|
}
|
|
257
260
|
) }) })
|
|
258
261
|
] }),
|
|
259
|
-
l > 0 && z === "TOP" && /* @__PURE__ */ a(
|
|
262
|
+
l > 0 && z === "TOP" && /* @__PURE__ */ a(re, { style: K, children: [
|
|
260
263
|
(m ?? "").toString()?.length ?? 0,
|
|
261
264
|
"/",
|
|
262
265
|
l
|
|
@@ -269,8 +272,8 @@ const Ge = Ee(
|
|
|
269
272
|
);
|
|
270
273
|
}
|
|
271
274
|
);
|
|
272
|
-
|
|
275
|
+
Ye.displayName = "Input";
|
|
273
276
|
export {
|
|
274
|
-
|
|
277
|
+
Ye as Input
|
|
275
278
|
};
|
|
276
279
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement | HTMLTextAreaElement | null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement | HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value || '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' ||\n\t\t\t\terrorMessage ||\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage || props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value || '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText || '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate || validateInput;\n\t\t\tif (!validateFunction || !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText || !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage || hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' || isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t\tdata-test={rightIcon?.['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText || !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","allowUnsafeInput","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxs","Fragment","jsx","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement | HTMLTextAreaElement | null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tsolidDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement | HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value || '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' ||\n\t\t\t\terrorMessage ||\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage || props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length || inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value || '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText || '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight || '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate || validateInput;\n\t\t\tif (!validateFunction || !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder || 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText || !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage || hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\tsolidDisabled={solidDisabled}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' || isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t\tdata-test={rightIcon?.['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText || !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span>*</span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","solidDisabled","allowUnsafeInput","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxs","Fragment","jsx","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}
|
|
@@ -73,6 +73,8 @@ export interface InputProps {
|
|
|
73
73
|
inputWrapperStyles?: React.CSSProperties;
|
|
74
74
|
minCharsToTrigger?: number;
|
|
75
75
|
isDisabled?: boolean;
|
|
76
|
+
/** When the input is in a disabled/read-only state, render a solid grey box (background.base) with secondary text and no opacity wash. */
|
|
77
|
+
solidDisabled?: boolean;
|
|
76
78
|
allowUnsafeInput?: boolean;
|
|
77
79
|
maxCharAlignment?: boolean;
|
|
78
80
|
}
|
|
@@ -9,6 +9,7 @@ export declare const InputWrapper: import('styled-components').StyledComponent<"
|
|
|
9
9
|
version?: "1.0" | "2.0" | "3.0" | undefined;
|
|
10
10
|
hightlightInputColor?: string | undefined;
|
|
11
11
|
hideBorder?: boolean | undefined;
|
|
12
|
+
solidDisabled?: boolean | undefined;
|
|
12
13
|
}, never>;
|
|
13
14
|
export declare const IconHolder: import('styled-components').StyledComponent<"div", any, {
|
|
14
15
|
isLeft?: boolean | undefined;
|
|
@@ -62,6 +63,7 @@ export declare const RootContainer: import('styled-components').StyledComponent<
|
|
|
62
63
|
height?: string | undefined;
|
|
63
64
|
state?: InputStateI | undefined;
|
|
64
65
|
type: InputTypeI;
|
|
66
|
+
solidDisabled?: boolean | undefined;
|
|
65
67
|
}, never>;
|
|
66
68
|
export declare const PrefixHolder: import('styled-components').StyledComponent<"div", any, {
|
|
67
69
|
numberOfLines?: number | undefined;
|