krl-alfred 2.17.49 → 2.17.51
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/components/Accordion/stories/Accordion.stories.d.ts +170 -0
- package/dist/components/Accordion/stories/Accordion.stories.js +131 -1
- package/dist/components/ActionButton/ActionButton.js +1 -1
- package/dist/components/ActionButton/stories/ActionButton.stories.d.ts +112 -0
- package/dist/components/ActionButton/stories/ActionButton.stories.js +115 -3
- package/dist/components/AddressCard/stories/AddressCard.stories.d.ts +147 -0
- package/dist/components/AddressCard/stories/AddressCard.stories.js +144 -1
- package/dist/components/AutocompleteInput/AutocompleteInput.js +10 -13
- package/dist/components/AutocompleteInput/AutocompleteInput.styled.js +2 -2
- package/dist/components/Input/stories/Input.stories.d.ts +344 -4
- package/dist/components/Input/stories/Input.stories.js +398 -6
- package/dist/components/SearchBox/SearchBox.js +8 -9
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/Tabs/stories/Tabs.stories.d.ts +68 -8
- package/dist/style/style.min.css +1 -1
- package/package.json +9 -16
|
@@ -6,6 +6,12 @@ declare const _default: {
|
|
|
6
6
|
checked: {
|
|
7
7
|
control: string;
|
|
8
8
|
};
|
|
9
|
+
disabled: {
|
|
10
|
+
control: string;
|
|
11
|
+
};
|
|
12
|
+
isShowEditBtn: {
|
|
13
|
+
control: string;
|
|
14
|
+
};
|
|
9
15
|
};
|
|
10
16
|
};
|
|
11
17
|
export default _default;
|
|
@@ -14,7 +20,148 @@ export declare const Default: {
|
|
|
14
20
|
title: string;
|
|
15
21
|
description: string;
|
|
16
22
|
handleUpdate: () => void;
|
|
23
|
+
onChange: () => void;
|
|
24
|
+
id: string;
|
|
25
|
+
name: string;
|
|
26
|
+
value: string;
|
|
27
|
+
checked: boolean;
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
isShowEditBtn: boolean;
|
|
30
|
+
minHeight: string;
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export declare const Checked: {
|
|
34
|
+
args: {
|
|
35
|
+
title: string;
|
|
36
|
+
description: string;
|
|
37
|
+
handleUpdate: () => void;
|
|
38
|
+
onChange: () => void;
|
|
39
|
+
id: string;
|
|
40
|
+
name: string;
|
|
41
|
+
value: string;
|
|
42
|
+
checked: boolean;
|
|
43
|
+
disabled: boolean;
|
|
44
|
+
isShowEditBtn: boolean;
|
|
45
|
+
minHeight: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
export declare const WithoutEditButton: {
|
|
49
|
+
args: {
|
|
50
|
+
title: string;
|
|
51
|
+
description: string;
|
|
52
|
+
handleUpdate: () => void;
|
|
53
|
+
onChange: () => void;
|
|
54
|
+
id: string;
|
|
55
|
+
name: string;
|
|
56
|
+
value: string;
|
|
57
|
+
checked: boolean;
|
|
58
|
+
disabled: boolean;
|
|
59
|
+
isShowEditBtn: boolean;
|
|
60
|
+
minHeight: string;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
export declare const WithoutEditButtonChecked: {
|
|
64
|
+
args: {
|
|
65
|
+
title: string;
|
|
66
|
+
description: string;
|
|
67
|
+
handleUpdate: () => void;
|
|
68
|
+
onChange: () => void;
|
|
69
|
+
id: string;
|
|
70
|
+
name: string;
|
|
71
|
+
value: string;
|
|
72
|
+
checked: boolean;
|
|
73
|
+
disabled: boolean;
|
|
74
|
+
isShowEditBtn: boolean;
|
|
75
|
+
minHeight: string;
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
export declare const Disabled: {
|
|
79
|
+
args: {
|
|
80
|
+
title: string;
|
|
81
|
+
description: string;
|
|
82
|
+
handleUpdate: () => void;
|
|
83
|
+
onChange: () => void;
|
|
84
|
+
id: string;
|
|
85
|
+
name: string;
|
|
86
|
+
value: string;
|
|
87
|
+
checked: boolean;
|
|
88
|
+
disabled: boolean;
|
|
89
|
+
isShowEditBtn: boolean;
|
|
90
|
+
minHeight: string;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
export declare const DisabledChecked: {
|
|
94
|
+
args: {
|
|
95
|
+
title: string;
|
|
96
|
+
description: string;
|
|
97
|
+
handleUpdate: () => void;
|
|
98
|
+
onChange: () => void;
|
|
99
|
+
id: string;
|
|
100
|
+
name: string;
|
|
101
|
+
value: string;
|
|
102
|
+
checked: boolean;
|
|
103
|
+
disabled: boolean;
|
|
104
|
+
isShowEditBtn: boolean;
|
|
105
|
+
minHeight: string;
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
export declare const ShortDescription: {
|
|
109
|
+
args: {
|
|
110
|
+
title: string;
|
|
111
|
+
description: string;
|
|
112
|
+
handleUpdate: () => void;
|
|
113
|
+
onChange: () => void;
|
|
114
|
+
id: string;
|
|
115
|
+
name: string;
|
|
116
|
+
value: string;
|
|
117
|
+
checked: boolean;
|
|
118
|
+
disabled: boolean;
|
|
119
|
+
isShowEditBtn: boolean;
|
|
120
|
+
minHeight: string;
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
export declare const LongDescription: {
|
|
124
|
+
args: {
|
|
125
|
+
title: string;
|
|
126
|
+
description: string;
|
|
127
|
+
handleUpdate: () => void;
|
|
128
|
+
onChange: () => void;
|
|
129
|
+
id: string;
|
|
130
|
+
name: string;
|
|
131
|
+
value: string;
|
|
132
|
+
checked: boolean;
|
|
133
|
+
disabled: boolean;
|
|
134
|
+
isShowEditBtn: boolean;
|
|
135
|
+
minHeight: string;
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
export declare const CustomMinHeight: {
|
|
139
|
+
args: {
|
|
140
|
+
title: string;
|
|
141
|
+
description: string;
|
|
142
|
+
handleUpdate: () => void;
|
|
143
|
+
onChange: () => void;
|
|
144
|
+
id: string;
|
|
145
|
+
name: string;
|
|
146
|
+
value: string;
|
|
147
|
+
checked: boolean;
|
|
148
|
+
disabled: boolean;
|
|
149
|
+
isShowEditBtn: boolean;
|
|
150
|
+
minHeight: string;
|
|
151
|
+
};
|
|
152
|
+
};
|
|
153
|
+
export declare const Complete: {
|
|
154
|
+
args: {
|
|
155
|
+
title: string;
|
|
156
|
+
description: string;
|
|
157
|
+
handleUpdate: () => void;
|
|
158
|
+
onChange: () => void;
|
|
17
159
|
id: string;
|
|
160
|
+
name: string;
|
|
161
|
+
value: string;
|
|
162
|
+
checked: boolean;
|
|
163
|
+
disabled: boolean;
|
|
164
|
+
isShowEditBtn: boolean;
|
|
18
165
|
minHeight: string;
|
|
19
166
|
};
|
|
20
167
|
};
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Default = void 0;
|
|
17
|
+
exports.Complete = exports.CustomMinHeight = exports.LongDescription = exports.ShortDescription = exports.DisabledChecked = exports.Disabled = exports.WithoutEditButtonChecked = exports.WithoutEditButton = exports.Checked = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var AddressCard_1 = __importDefault(require("../AddressCard"));
|
|
20
20
|
exports.default = {
|
|
@@ -23,6 +23,8 @@ exports.default = {
|
|
|
23
23
|
tags: ['autodocs'],
|
|
24
24
|
argTypes: {
|
|
25
25
|
checked: { control: 'boolean' },
|
|
26
|
+
disabled: { control: 'boolean' },
|
|
27
|
+
isShowEditBtn: { control: 'boolean' },
|
|
26
28
|
}
|
|
27
29
|
};
|
|
28
30
|
exports.Default = {
|
|
@@ -30,7 +32,148 @@ exports.Default = {
|
|
|
30
32
|
title: "Address title",
|
|
31
33
|
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
32
34
|
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
35
|
+
onChange: function () { return console.log('onChange'); },
|
|
33
36
|
id: "addressCard_1",
|
|
37
|
+
name: "address",
|
|
38
|
+
value: "address_1",
|
|
39
|
+
checked: false,
|
|
40
|
+
disabled: false,
|
|
41
|
+
isShowEditBtn: true,
|
|
42
|
+
minHeight: "68px",
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
exports.Checked = {
|
|
46
|
+
args: {
|
|
47
|
+
title: "Selected Address",
|
|
48
|
+
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
49
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
50
|
+
onChange: function () { return console.log('onChange'); },
|
|
51
|
+
id: "addressCard_2",
|
|
52
|
+
name: "address",
|
|
53
|
+
value: "address_2",
|
|
54
|
+
checked: true,
|
|
55
|
+
disabled: false,
|
|
56
|
+
isShowEditBtn: true,
|
|
57
|
+
minHeight: "68px",
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
exports.WithoutEditButton = {
|
|
61
|
+
args: {
|
|
62
|
+
title: "Address Without Edit",
|
|
63
|
+
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
64
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
65
|
+
onChange: function () { return console.log('onChange'); },
|
|
66
|
+
id: "addressCard_3",
|
|
67
|
+
name: "address",
|
|
68
|
+
value: "address_3",
|
|
69
|
+
checked: false,
|
|
70
|
+
disabled: false,
|
|
71
|
+
isShowEditBtn: false,
|
|
72
|
+
minHeight: "68px",
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
exports.WithoutEditButtonChecked = {
|
|
76
|
+
args: {
|
|
77
|
+
title: "Selected Address Without Edit",
|
|
78
|
+
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
79
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
80
|
+
onChange: function () { return console.log('onChange'); },
|
|
81
|
+
id: "addressCard_4",
|
|
82
|
+
name: "address",
|
|
83
|
+
value: "address_4",
|
|
84
|
+
checked: true,
|
|
85
|
+
disabled: false,
|
|
86
|
+
isShowEditBtn: false,
|
|
87
|
+
minHeight: "68px",
|
|
88
|
+
},
|
|
89
|
+
};
|
|
90
|
+
exports.Disabled = {
|
|
91
|
+
args: {
|
|
92
|
+
title: "Disabled Address",
|
|
93
|
+
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
94
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
95
|
+
onChange: function () { return console.log('onChange'); },
|
|
96
|
+
id: "addressCard_5",
|
|
97
|
+
name: "address",
|
|
98
|
+
value: "address_5",
|
|
99
|
+
checked: false,
|
|
100
|
+
disabled: true,
|
|
101
|
+
isShowEditBtn: true,
|
|
102
|
+
minHeight: "68px",
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
exports.DisabledChecked = {
|
|
106
|
+
args: {
|
|
107
|
+
title: "Disabled Selected Address",
|
|
108
|
+
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
109
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
110
|
+
onChange: function () { return console.log('onChange'); },
|
|
111
|
+
id: "addressCard_6",
|
|
112
|
+
name: "address",
|
|
113
|
+
value: "address_6",
|
|
114
|
+
checked: true,
|
|
115
|
+
disabled: true,
|
|
116
|
+
isShowEditBtn: true,
|
|
117
|
+
minHeight: "68px",
|
|
118
|
+
},
|
|
119
|
+
};
|
|
120
|
+
exports.ShortDescription = {
|
|
121
|
+
args: {
|
|
122
|
+
title: "Short Address",
|
|
123
|
+
description: "4517 Washington Ave. Manchester, Kentucky 39495",
|
|
124
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
125
|
+
onChange: function () { return console.log('onChange'); },
|
|
126
|
+
id: "addressCard_7",
|
|
127
|
+
name: "address",
|
|
128
|
+
value: "address_7",
|
|
129
|
+
checked: false,
|
|
130
|
+
disabled: false,
|
|
131
|
+
isShowEditBtn: true,
|
|
132
|
+
minHeight: "68px",
|
|
133
|
+
},
|
|
134
|
+
};
|
|
135
|
+
exports.LongDescription = {
|
|
136
|
+
args: {
|
|
137
|
+
title: "Long Address Description",
|
|
138
|
+
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
139
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
140
|
+
onChange: function () { return console.log('onChange'); },
|
|
141
|
+
id: "addressCard_8",
|
|
142
|
+
name: "address",
|
|
143
|
+
value: "address_8",
|
|
144
|
+
checked: false,
|
|
145
|
+
disabled: false,
|
|
146
|
+
isShowEditBtn: true,
|
|
147
|
+
minHeight: "68px",
|
|
148
|
+
},
|
|
149
|
+
};
|
|
150
|
+
exports.CustomMinHeight = {
|
|
151
|
+
args: {
|
|
152
|
+
title: "Custom Height Address",
|
|
153
|
+
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
154
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
155
|
+
onChange: function () { return console.log('onChange'); },
|
|
156
|
+
id: "addressCard_9",
|
|
157
|
+
name: "address",
|
|
158
|
+
value: "address_9",
|
|
159
|
+
checked: false,
|
|
160
|
+
disabled: false,
|
|
161
|
+
isShowEditBtn: true,
|
|
162
|
+
minHeight: "120px",
|
|
163
|
+
},
|
|
164
|
+
};
|
|
165
|
+
exports.Complete = {
|
|
166
|
+
args: {
|
|
167
|
+
title: "Complete Address Card",
|
|
168
|
+
description: "Manchester, Kentucky 394954517 Washington Ave. Manchester, Kentucky 394954517 Washington Ave.4517 Washington Ave. 4517 Washington Ave. 4517 Washington Ave.",
|
|
169
|
+
handleUpdate: function () { return console.log('handleUpdate'); },
|
|
170
|
+
onChange: function () { return console.log('onChange'); },
|
|
171
|
+
id: "addressCard_10",
|
|
172
|
+
name: "address",
|
|
173
|
+
value: "address_10",
|
|
174
|
+
checked: true,
|
|
175
|
+
disabled: false,
|
|
176
|
+
isShowEditBtn: true,
|
|
34
177
|
minHeight: "68px",
|
|
35
178
|
},
|
|
36
179
|
};
|
|
@@ -24,7 +24,6 @@ var TextLink_1 = __importDefault(require("../TextLink"));
|
|
|
24
24
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
25
25
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
26
26
|
var genericUtils_1 = require("../../utils/genericUtils");
|
|
27
|
-
var simplebar_react_1 = __importDefault(require("simplebar-react"));
|
|
28
27
|
var AutocompleteInput = function (_a) {
|
|
29
28
|
var _b;
|
|
30
29
|
var _c = _a.hasError, hasError = _c === void 0 ? props_1.AutocompleteInputDefault.hasError : _c, _d = _a.label, label = _d === void 0 ? props_1.AutocompleteInputDefault.label : _d, _e = _a.type, type = _e === void 0 ? props_1.AutocompleteInputDefault.type : _e, _f = _a.width, width = _f === void 0 ? props_1.AutocompleteInputDefault.width : _f, _g = _a.dropdownMaxHeight, dropdownMaxHeight = _g === void 0 ? props_1.AutocompleteInputDefault.dropdownMaxHeight : _g, _h = _a.value, value = _h === void 0 ? props_1.AutocompleteInputDefault.value : _h, _j = _a.noResultTemplate, noResultTemplate = _j === void 0 ? props_1.AutocompleteInputDefault.noResultTemplate : _j, _k = _a.onBlur, onBlur = _k === void 0 ? props_1.AutocompleteInputDefault.onBlur : _k, _l = _a.onKeyUp, onKeyUp = _l === void 0 ? props_1.AutocompleteInputDefault.onKeyUp : _l, _m = _a.onKeyDown, onKeyDown = _m === void 0 ? props_1.AutocompleteInputDefault.onKeyDown : _m, _o = _a.autoComplete, autoComplete = _o === void 0 ? props_1.AutocompleteInputDefault.autoComplete : _o, _p = _a.hasAutoUppercase, hasAutoUppercase = _p === void 0 ? props_1.AutocompleteInputDefault.hasAutoUppercase : _p, _q = _a.dropdownPosition, dropdownPosition = _q === void 0 ? props_1.AutocompleteInputDefault.dropdownPosition : _q, disabled = _a.disabled, customLinkText = _a.customLinkText, customLinkHref = _a.customLinkHref, onCustomLinkClick = _a.onCustomLinkClick, onChange = _a.onChange, errorMessage = _a.errorMessage, name = _a.name, placeholder = _a.placeholder, readonly = _a.readonly, autofocus = _a.autofocus, dropdownList = _a.dropdownList, hasLoading = _a.hasLoading, isShowDropdown = _a.isShowDropdown, onClear = _a.onClear, onFocus = _a.onFocus;
|
|
@@ -36,7 +35,7 @@ var AutocompleteInput = function (_a) {
|
|
|
36
35
|
var realInputRef = (0, react_1.useRef)(null);
|
|
37
36
|
var containerRef = (0, react_1.useRef)(null);
|
|
38
37
|
var dropdownRef = (0, react_1.useRef)(null);
|
|
39
|
-
var
|
|
38
|
+
var scrollContainerRef = (0, react_1.useRef)(null);
|
|
40
39
|
(0, useOnClickOutside_1.default)(containerRef, function () { return setShowDropdown(false); }, true);
|
|
41
40
|
(0, react_1.useEffect)(function () {
|
|
42
41
|
setShowDropdown(isShowDropdown);
|
|
@@ -65,18 +64,13 @@ var AutocompleteInput = function (_a) {
|
|
|
65
64
|
}
|
|
66
65
|
}, [realInputValue]);
|
|
67
66
|
(0, react_1.useEffect)(function () {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
left: 0,
|
|
71
|
-
behavior: 'smooth'
|
|
72
|
-
})*/
|
|
73
|
-
var _a;
|
|
74
|
-
if (simplebarRef.current)
|
|
75
|
-
(_a = simplebarRef.current.el.querySelector('.simplebar-content-wrapper')) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
67
|
+
if (scrollContainerRef.current) {
|
|
68
|
+
scrollContainerRef.current.scrollTo({
|
|
76
69
|
top: (selectedIndex > 0 ? selectedIndex * 51 : 0),
|
|
77
70
|
left: 0,
|
|
78
71
|
behavior: 'smooth'
|
|
79
72
|
});
|
|
73
|
+
}
|
|
80
74
|
}, [selectedIndex]);
|
|
81
75
|
var handleClear = function () {
|
|
82
76
|
onClear();
|
|
@@ -135,8 +129,11 @@ var AutocompleteInput = function (_a) {
|
|
|
135
129
|
if (e === void 0) { e = null; }
|
|
136
130
|
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: realInputValue }) }));
|
|
137
131
|
};
|
|
138
|
-
return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ "$width": width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readOnly: readonly, disabled: disabled, "$hasError": hasError, "$isShowDropdown": showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete, type: type, "$hasAutoUppercase": hasAutoUppercase }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CloseMedium", color: "var(--dark)" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight, "$dropdownPosition": dropdownPosition }, { children: (0, jsx_runtime_1.jsx)(
|
|
139
|
-
|
|
140
|
-
|
|
132
|
+
return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ "$width": width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readOnly: readonly, disabled: disabled, "$hasError": hasError, "$isShowDropdown": showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, autoComplete: autoComplete, type: type, "$hasAutoUppercase": hasAutoUppercase }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput", autoComplete: autoComplete }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && !hasLoading && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CloseMedium", color: "var(--dark)" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ "$dropdownMaxHeight": dropdownMaxHeight, "$dropdownPosition": dropdownPosition }, { children: (0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownInnerStyled, __assign({ ref: function (el) {
|
|
133
|
+
dropdownRef.current = el;
|
|
134
|
+
scrollContainerRef.current = el;
|
|
135
|
+
}, "$dropdownMaxHeight": dropdownMaxHeight }, { children: (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length) > 0 ? (dropdownList.map(function (item, key) {
|
|
136
|
+
return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }, { "isSelected": key === selectedIndex }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }), key);
|
|
137
|
+
})) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
|
|
141
138
|
};
|
|
142
139
|
exports.default = AutocompleteInput;
|
|
@@ -11,6 +11,6 @@ exports.DropdownInnerStyled = exports.DropdownStyled = exports.InputStyled = exp
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 28px;\n right: 24px;\n transform: translateY(-50%);\n cursor: pointer;\n div{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 28px;\n right: 24px;\n transform: translateY(-50%);\n cursor: pointer;\n div{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.$width || '370px'; });
|
|
13
13
|
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n ", "\n &::placeholder {\n color: ", ";\n text-transform: initial;\n }\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n ", "\n &::placeholder {\n color: ", ";\n text-transform: initial;\n }\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$isShowDropdown ? '0.5rem 0.5rem 0 0' : '0.5rem'; }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 53px 18.5px 23px' : '19.5px 54px 19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasAutoUppercase && "text-transform: uppercase;"; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
|
|
14
|
-
exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n max-height: ", ";\n border-top: 0;\n position: ", ";\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n background-color: white;\n
|
|
15
|
-
exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n overflow: hidden;\n position: relative;\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &:is(.isSelected){\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"], ["\n padding: 0;\n margin: 0;\n overflow: hidden;\n position: relative;\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &:is(.isSelected){\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"])));
|
|
14
|
+
exports.DropdownStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n max-height: ", ";\n border-top: 0;\n position: ", ";\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n background-color: white;\n"], ["\n border-radius: 0 0 0.5rem 0.5rem;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: hidden;\n max-height: ", ";\n border-top: 0;\n position: ", ";\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n background-color: white;\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; }, function (props) { return props.$dropdownPosition && props.$dropdownPosition; });
|
|
15
|
+
exports.DropdownInnerStyled = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n overflow-y: auto;\n overflow-x: hidden;\n max-height: ", ";\n position: relative;\n\n // Custom scrollbar styling\n &::-webkit-scrollbar {\n width: 9px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--dark-opacity-10);\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background: var(--dark-opacity-20);\n }\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &:is(.isSelected){\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"], ["\n padding: 0;\n margin: 0;\n overflow-y: auto;\n overflow-x: hidden;\n max-height: ", ";\n position: relative;\n\n // Custom scrollbar styling\n &::-webkit-scrollbar {\n width: 9px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: var(--dark-opacity-10);\n border-radius: 4px;\n }\n\n &::-webkit-scrollbar-thumb:hover {\n background: var(--dark-opacity-20);\n }\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &:is(.isSelected){\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"])), function (props) { return props.$dropdownMaxHeight && props.$dropdownMaxHeight; });
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|