@bikdotai/bik-component-library 0.0.840-tools-beta.5 → 0.0.841-beta.0
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/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/cjs/components/SearchFilter/index.js +1 -1
- package/dist/cjs/components/SearchFilter/index.js.map +1 -1
- package/dist/cjs/components/agent-builder/constants/tools.js.map +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChip.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChip.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.js +1 -1
- package/dist/cjs/components/avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.styled.js +12 -4
- package/dist/cjs/components/avatar/Avatar.styled.js.map +1 -1
- package/dist/cjs/components/button/themes.js +11 -11
- package/dist/cjs/components/button/themes.js.map +1 -1
- package/dist/cjs/components/card-selector/CardSelector.js +1 -1
- package/dist/cjs/components/card-selector/CardSelector.js.map +1 -1
- package/dist/cjs/components/card-selector/CardSelectorGroup.js +1 -1
- package/dist/cjs/components/card-selector/CardSelectorGroup.js.map +1 -1
- package/dist/cjs/components/carousel/carousel.js +2 -2
- package/dist/cjs/components/carousel/carousel.js.map +1 -1
- package/dist/cjs/components/checkBox/CheckBox.js +1 -1
- package/dist/cjs/components/checkBox/CheckBox.js.map +1 -1
- package/dist/cjs/components/code-block/CodeBlock.js +2 -2
- package/dist/cjs/components/code-block/CodeBlock.js.map +1 -1
- package/dist/cjs/components/colourInput/ColourInput.js +1 -1
- package/dist/cjs/components/colourInput/ColourInput.js.map +1 -1
- package/dist/cjs/components/dashboard-review-popup/DashboardReviewPopUp.js +1 -1
- package/dist/cjs/components/dashboard-review-popup/DashboardReviewPopUp.js.map +1 -1
- package/dist/cjs/components/dot-pulse/DotPulse.js +3 -3
- package/dist/cjs/components/dot-pulse/DotPulse.js.map +1 -1
- package/dist/cjs/components/dropShadow/DropShadow.js +1 -1
- package/dist/cjs/components/dropShadow/DropShadow.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/DropdownPopover/index.js +1 -1
- package/dist/cjs/components/dropdown/DropdownPopover/index.js.map +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/cjs/components/floater/floater.js +1 -1
- package/dist/cjs/components/floater/floater.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/modals/styledModal.js +2 -2
- package/dist/cjs/components/modals/styledModal.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js.map +1 -1
- package/dist/cjs/components/pagination/Pagination.js +1 -1
- package/dist/cjs/components/pagination/Pagination.js.map +1 -1
- package/dist/cjs/components/progress-bar/CircularProgressBar.js +1 -1
- package/dist/cjs/components/progress-bar/CircularProgressBar.js.map +1 -1
- package/dist/cjs/components/progress-bar/ProgressBarComponent.js +2 -2
- package/dist/cjs/components/progress-bar/ProgressBarComponent.js.map +1 -1
- package/dist/cjs/components/progress-bar-v2/ProgressBarV2.js +17 -17
- package/dist/cjs/components/progress-bar-v2/ProgressBarV2.js.map +1 -1
- package/dist/cjs/components/radioButton/RadioButton.js +1 -1
- package/dist/cjs/components/radioButton/RadioButton.js.map +1 -1
- package/dist/cjs/components/radioList/RadioList.js +1 -1
- package/dist/cjs/components/radioList/RadioList.js.map +1 -1
- package/dist/cjs/components/searchBar/searchBar.js +1 -1
- package/dist/cjs/components/searchBar/searchBar.js.map +1 -1
- package/dist/cjs/components/shimmer-image/ShimmerImage.js +1 -1
- package/dist/cjs/components/shimmer-image/ShimmerImage.js.map +1 -1
- package/dist/cjs/components/side-modal/SideModal.js +1 -1
- package/dist/cjs/components/side-modal/SideModal.js.map +1 -1
- package/dist/cjs/components/spinner/Spinner.js +3 -3
- package/dist/cjs/components/spinner/Spinner.js.map +1 -1
- package/dist/cjs/components/star-rating/Star.js +1 -1
- package/dist/cjs/components/star-rating/Star.js.map +1 -1
- package/dist/cjs/components/star-rating/StarRating.js +2 -2
- package/dist/cjs/components/star-rating/StarRating.js.map +1 -1
- package/dist/cjs/components/states/StateComponent.js +1 -1
- package/dist/cjs/components/states/StateComponent.js.map +1 -1
- package/dist/cjs/components/stepper/Stepper.js +1 -1
- package/dist/cjs/components/stepper/Stepper.js.map +1 -1
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/TemplatePreview.js.map +1 -1
- package/dist/cjs/components/testimonial-card/TestimonialCard.js +1 -1
- package/dist/cjs/components/testimonial-card/TestimonialCard.js.map +1 -1
- package/dist/cjs/components/thumbnail/Thumbnail.js +1 -1
- package/dist/cjs/components/thumbnail/Thumbnail.js.map +1 -1
- package/dist/cjs/components/unsatisfactory-response-list/UnsatisfactoryResponseList.js +1 -1
- package/dist/cjs/components/unsatisfactory-response-list/UnsatisfactoryResponseList.js.map +1 -1
- package/dist/cjs/components/zeroState/ZeroState.js +3 -3
- package/dist/cjs/components/zeroState/ZeroState.js.map +1 -1
- package/dist/cjs/icons/Media/Visual/FormkitNeutral.js +2 -0
- package/dist/cjs/icons/Media/Visual/FormkitNeutral.js.map +1 -0
- package/dist/cjs/icons/Media/Visual/FormkitSad.js +2 -0
- package/dist/cjs/icons/Media/Visual/FormkitSad.js.map +1 -0
- package/dist/cjs/icons/index.js +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js +66 -61
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/esm/components/SearchFilter/index.js +11 -10
- package/dist/esm/components/SearchFilter/index.js.map +1 -1
- package/dist/esm/components/agent-builder/constants/tools.js.map +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsChip.js +11 -10
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsChip.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.d.ts +2 -1
- package/dist/esm/components/avatar/Avatar.js +34 -24
- package/dist/esm/components/avatar/Avatar.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.styled.d.ts +1 -0
- package/dist/esm/components/avatar/Avatar.styled.js +17 -8
- package/dist/esm/components/avatar/Avatar.styled.js.map +1 -1
- package/dist/esm/components/button/themes.d.ts +1 -0
- package/dist/esm/components/button/themes.js +61 -51
- package/dist/esm/components/button/themes.js.map +1 -1
- package/dist/esm/components/card-selector/CardSelector.js +11 -9
- package/dist/esm/components/card-selector/CardSelector.js.map +1 -1
- package/dist/esm/components/card-selector/CardSelectorGroup.js +1 -0
- package/dist/esm/components/card-selector/CardSelectorGroup.js.map +1 -1
- package/dist/esm/components/carousel/carousel.js +8 -8
- package/dist/esm/components/carousel/carousel.js.map +1 -1
- package/dist/esm/components/checkBox/CheckBox.js +8 -5
- package/dist/esm/components/checkBox/CheckBox.js.map +1 -1
- package/dist/esm/components/code-block/CodeBlock.js +14 -14
- package/dist/esm/components/code-block/CodeBlock.js.map +1 -1
- package/dist/esm/components/colourInput/ColourInput.js +11 -10
- package/dist/esm/components/colourInput/ColourInput.js.map +1 -1
- package/dist/esm/components/dashboard-review-popup/DashboardReviewPopUp.js +28 -21
- package/dist/esm/components/dashboard-review-popup/DashboardReviewPopUp.js.map +1 -1
- package/dist/esm/components/dot-pulse/DotPulse.js +15 -15
- package/dist/esm/components/dot-pulse/DotPulse.js.map +1 -1
- package/dist/esm/components/dropShadow/DropShadow.js +6 -6
- package/dist/esm/components/dropShadow/DropShadow.js.map +1 -1
- package/dist/esm/components/dropdown/ChipInput.js +10 -9
- package/dist/esm/components/dropdown/ChipInput.js.map +1 -1
- package/dist/esm/components/dropdown/DropdownPopover/index.js +26 -25
- package/dist/esm/components/dropdown/DropdownPopover/index.js.map +1 -1
- package/dist/esm/components/dropdown-button/DropdownButton.js +13 -13
- package/dist/esm/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/esm/components/floater/floater.js +14 -13
- package/dist/esm/components/floater/floater.js.map +1 -1
- package/dist/esm/components/input/Input.js +35 -34
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/input/Input.model.d.ts +1 -0
- package/dist/esm/components/modals/styledModal.js +6 -5
- package/dist/esm/components/modals/styledModal.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.js +28 -27
- package/dist/esm/components/multi-level-dropdown/MenuItem.js.map +1 -1
- package/dist/esm/components/pagination/Pagination.js +7 -7
- package/dist/esm/components/pagination/Pagination.js.map +1 -1
- package/dist/esm/components/progress-bar/CircularProgressBar.js +61 -50
- package/dist/esm/components/progress-bar/CircularProgressBar.js.map +1 -1
- package/dist/esm/components/progress-bar/ProgressBarComponent.js +14 -13
- package/dist/esm/components/progress-bar/ProgressBarComponent.js.map +1 -1
- package/dist/esm/components/progress-bar-v2/ProgressBarV2.js +57 -39
- package/dist/esm/components/progress-bar-v2/ProgressBarV2.js.map +1 -1
- package/dist/esm/components/radioButton/RadioButton.js +10 -9
- package/dist/esm/components/radioButton/RadioButton.js.map +1 -1
- package/dist/esm/components/radioList/RadioList.js +28 -19
- package/dist/esm/components/radioList/RadioList.js.map +1 -1
- package/dist/esm/components/searchBar/searchBar.js +11 -10
- package/dist/esm/components/searchBar/searchBar.js.map +1 -1
- package/dist/esm/components/shimmer-image/ShimmerImage.js +19 -18
- package/dist/esm/components/shimmer-image/ShimmerImage.js.map +1 -1
- package/dist/esm/components/side-modal/SideModal.js +13 -5
- package/dist/esm/components/side-modal/SideModal.js.map +1 -1
- package/dist/esm/components/spinner/Spinner.js +19 -11
- package/dist/esm/components/spinner/Spinner.js.map +1 -1
- package/dist/esm/components/star-rating/Star.d.ts +1 -0
- package/dist/esm/components/star-rating/Star.js +32 -27
- package/dist/esm/components/star-rating/Star.js.map +1 -1
- package/dist/esm/components/star-rating/StarRating.js +17 -16
- package/dist/esm/components/star-rating/StarRating.js.map +1 -1
- package/dist/esm/components/states/StateComponent.js +47 -30
- package/dist/esm/components/states/StateComponent.js.map +1 -1
- package/dist/esm/components/stepper/Stepper.js +24 -16
- package/dist/esm/components/stepper/Stepper.js.map +1 -1
- package/dist/esm/components/template-preview/TemplatePreview.js +41 -40
- package/dist/esm/components/template-preview/TemplatePreview.js.map +1 -1
- package/dist/esm/components/testimonial-card/TestimonialCard.js +5 -4
- package/dist/esm/components/testimonial-card/TestimonialCard.js.map +1 -1
- package/dist/esm/components/thumbnail/Thumbnail.js +3 -3
- package/dist/esm/components/thumbnail/Thumbnail.js.map +1 -1
- package/dist/esm/components/unsatisfactory-response-list/UnsatisfactoryResponseList.js +19 -18
- package/dist/esm/components/unsatisfactory-response-list/UnsatisfactoryResponseList.js.map +1 -1
- package/dist/esm/components/zeroState/ZeroState.js +20 -13
- package/dist/esm/components/zeroState/ZeroState.js.map +1 -1
- package/dist/esm/icons/Media/Visual/FormkitNeutral.js +58 -0
- package/dist/esm/icons/Media/Visual/FormkitNeutral.js.map +1 -0
- package/dist/esm/icons/Media/Visual/FormkitSad.js +61 -0
- package/dist/esm/icons/Media/Visual/FormkitSad.js.map +1 -0
- package/dist/esm/icons/Media/Visual/index.d.ts +2 -0
- package/dist/esm/icons/index.d.ts +25 -25
- package/dist/esm/icons/index.js +420 -416
- package/dist/esm/icons/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,49 +1,50 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as d } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as g, useState as s, useEffect as O } from "react";
|
|
3
3
|
const H = (f) => {
|
|
4
|
-
const i = g(null), [
|
|
4
|
+
const i = g(null), [r, o] = s(0), [c, l] = s(0), [h, a] = s(!1), w = (t) => {
|
|
5
5
|
if (f.useDefaultOffsets) {
|
|
6
|
-
|
|
6
|
+
l(t.left);
|
|
7
7
|
return;
|
|
8
8
|
}
|
|
9
9
|
let e = 0;
|
|
10
10
|
f.leftOffset ? e = t.left + f.leftOffset : e = t.left + t.width + 30;
|
|
11
11
|
const n = i?.current;
|
|
12
12
|
if (!n) {
|
|
13
|
-
|
|
13
|
+
l(e);
|
|
14
14
|
return;
|
|
15
15
|
}
|
|
16
|
-
e > window.innerWidth - n.offsetWidth && (e = window.innerWidth - n.offsetWidth - 50),
|
|
16
|
+
e > window.innerWidth - n.offsetWidth && (e = window.innerWidth - n.offsetWidth - 50), l(e);
|
|
17
17
|
}, m = (t) => {
|
|
18
18
|
if (f.useDefaultOffsets) {
|
|
19
|
-
|
|
19
|
+
o(t.top);
|
|
20
20
|
return;
|
|
21
21
|
}
|
|
22
22
|
let e = t.top;
|
|
23
23
|
f.topOffset && (e = t.top + f.topOffset);
|
|
24
24
|
const n = i?.current;
|
|
25
25
|
if (!n) {
|
|
26
|
-
|
|
26
|
+
o(e);
|
|
27
27
|
return;
|
|
28
28
|
}
|
|
29
29
|
const u = window.innerHeight;
|
|
30
|
-
t.top + n.offsetHeight > u && (e = t.top - (t.top + n.offsetHeight - u) - 10),
|
|
30
|
+
t.top + n.offsetHeight > u && (e = t.top - (t.top + n.offsetHeight - u) - 10), o(e);
|
|
31
31
|
};
|
|
32
32
|
return O(() => {
|
|
33
33
|
if (f.refElement.current) {
|
|
34
34
|
const t = f.refElement.current.getBoundingClientRect();
|
|
35
|
-
|
|
35
|
+
w(t), m(t), a(!0);
|
|
36
36
|
}
|
|
37
|
-
}), h ? /* @__PURE__ */
|
|
37
|
+
}), h ? /* @__PURE__ */ d(
|
|
38
38
|
"div",
|
|
39
39
|
{
|
|
40
|
+
"data-testid": "floater-position",
|
|
40
41
|
style: {
|
|
41
|
-
top:
|
|
42
|
-
left:
|
|
42
|
+
top: r,
|
|
43
|
+
left: c,
|
|
43
44
|
position: "fixed",
|
|
44
45
|
zIndex: 1e3
|
|
45
46
|
},
|
|
46
|
-
children: /* @__PURE__ */
|
|
47
|
+
children: /* @__PURE__ */ d("div", { ref: i, children: f.children })
|
|
47
48
|
}
|
|
48
49
|
) : null;
|
|
49
50
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floater.js","sources":["../../../../src/components/floater/floater.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport type FloaterProps = {\n\tchildren?: React.ReactNode;\n\trefElement: React.MutableRefObject<any>;\n\tleftOffset?: number;\n\ttopOffset?: number;\n\tuseDefaultOffsets?: boolean;\n};\n\nexport const Floater = (props: FloaterProps) => {\n\tconst childRef = useRef<HTMLDivElement | null>(null);\n\tconst [top, setTop] = useState<number>(0);\n\tconst [left, setLeft] = useState<number>(0);\n\tconst [show, setShow] = useState<boolean>(false);\n\n\tconst calculateLeft = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetLeft(rect.left);\n\t\t\treturn;\n\t\t}\n\n\t\tlet left = 0;\n\t\tif (props.leftOffset) {\n\t\t\tleft = rect.left + props.leftOffset;\n\t\t} else {\n\t\t\tleft = rect.left + rect.width + 30;\n\t\t}\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetLeft(left);\n\t\t\treturn;\n\t\t}\n\t\tif (left > window.innerWidth - childElement.offsetWidth) {\n\t\t\tleft = window.innerWidth - childElement.offsetWidth - 50;\n\t\t}\n\t\tsetLeft(left);\n\t};\n\n\tconst calculateTop = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetTop(rect.top);\n\t\t\treturn;\n\t\t}\n\t\tlet top: number = rect.top;\n\n\t\tif (props.topOffset) {\n\t\t\ttop = rect.top + props.topOffset;\n\t\t}\n\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetTop(top);\n\t\t\treturn;\n\t\t}\n\t\tconst windowHeight = window.innerHeight;\n\t\tif (rect.top + childElement.offsetHeight > windowHeight) {\n\t\t\ttop =\n\t\t\t\trect.top - (rect.top + childElement.offsetHeight - windowHeight) - 10;\n\t\t}\n\t\tsetTop(top);\n\t};\n\n\tuseEffect(() => {\n\t\tif (props.refElement.current) {\n\t\t\tconst rect = props.refElement.current.getBoundingClientRect();\n\t\t\tcalculateLeft(rect);\n\t\t\tcalculateTop(rect);\n\t\t\tsetShow(true);\n\t\t}\n\t});\n\n\tif (!show) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\ttop: top,\n\t\t\t\tleft: left,\n\t\t\t\tposition: 'fixed',\n\t\t\t\tzIndex: 1000,\n\t\t\t}}\n\t\t>\n\t\t\t<div ref={childRef}>{props.children}</div>\n\t\t</div>\n\t);\n};\n"],"names":["Floater","props","childRef","useRef","top","setTop","useState","left","setLeft","show","setShow","calculateLeft","rect","childElement","calculateTop","windowHeight","useEffect","jsx"],"mappings":";;AAUO,MAAMA,IAAU,CAACC,MAAwB;AAC/C,QAAMC,IAAWC,EAA8B,IAAI,GAC7C,CAACC,GAAKC,CAAM,IAAIC,EAAiB,CAAC,GAClC,CAACC,GAAMC,CAAO,IAAIF,EAAiB,CAAC,GACpC,CAACG,GAAMC,CAAO,IAAIJ,EAAkB,EAAK,GAEzCK,IAAgB,CAACC,MAAkB;AACxC,QAAIX,EAAM,mBAAmB;AAC5B,MAAAO,EAAQI,EAAK,IAAI;AACjB;AAAA,IACD;AAEA,QAAIL,IAAO;AACX,IAAIN,EAAM,aACTM,IAAOK,EAAK,OAAOX,EAAM,aAEzBM,IAAOK,EAAK,OAAOA,EAAK,QAAQ;AAEjC,UAAMC,IAAoBX,GAAU;AACpC,QAAI,CAACW,GAAc;AAClB,MAAAL,EAAQD,CAAI;AACZ;AAAA,IACD;AACA,IAAIA,IAAO,OAAO,aAAaM,EAAa,gBAC3CN,IAAO,OAAO,aAAaM,EAAa,cAAc,KAEvDL,EAAQD,CAAI;AAAA,EACb,GAEMO,IAAe,CAACF,MAAkB;AACvC,QAAIX,EAAM,mBAAmB;AAC5B,MAAAI,EAAOO,EAAK,GAAG;AACf;AAAA,IACD;AACA,QAAIR,IAAcQ,EAAK;AAEvB,IAAIX,EAAM,cACTG,IAAMQ,EAAK,MAAMX,EAAM;AAGxB,UAAMY,IAAoBX,GAAU;AACpC,QAAI,CAACW,GAAc;AAClB,MAAAR,EAAOD,CAAG;AACV;AAAA,IACD;AACA,UAAMW,IAAe,OAAO;AAC5B,IAAIH,EAAK,MAAMC,EAAa,eAAeE,MAC1CX,IACCQ,EAAK,OAAOA,EAAK,MAAMC,EAAa,eAAeE,KAAgB,KAErEV,EAAOD,CAAG;AAAA,EACX;AAWA,SATAY,EAAU,MAAM;AACf,QAAIf,EAAM,WAAW,SAAS;AAC7B,YAAMW,IAAOX,EAAM,WAAW,QAAQ,sBAAA;AACtC,MAAAU,EAAcC,CAAI,GAClBE,EAAaF,CAAI,GACjBF,EAAQ,EAAI;AAAA,IACb;AAAA,EACD,CAAC,GAEID,IAKJ,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,KAAAb;AAAA,QACA,MAAAG;AAAA,QACA,UAAU;AAAA,QACV,QAAQ;AAAA,MAAA;AAAA,MAGT,UAAA,gBAAAU,EAAC,OAAA,EAAI,KAAKf,GAAW,YAAM,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"floater.js","sources":["../../../../src/components/floater/floater.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport type FloaterProps = {\n\tchildren?: React.ReactNode;\n\trefElement: React.MutableRefObject<any>;\n\tleftOffset?: number;\n\ttopOffset?: number;\n\tuseDefaultOffsets?: boolean;\n};\n\nexport const Floater = (props: FloaterProps) => {\n\tconst childRef = useRef<HTMLDivElement | null>(null);\n\tconst [top, setTop] = useState<number>(0);\n\tconst [left, setLeft] = useState<number>(0);\n\tconst [show, setShow] = useState<boolean>(false);\n\n\tconst calculateLeft = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetLeft(rect.left);\n\t\t\treturn;\n\t\t}\n\n\t\tlet left = 0;\n\t\tif (props.leftOffset) {\n\t\t\tleft = rect.left + props.leftOffset;\n\t\t} else {\n\t\t\tleft = rect.left + rect.width + 30;\n\t\t}\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetLeft(left);\n\t\t\treturn;\n\t\t}\n\t\tif (left > window.innerWidth - childElement.offsetWidth) {\n\t\t\tleft = window.innerWidth - childElement.offsetWidth - 50;\n\t\t}\n\t\tsetLeft(left);\n\t};\n\n\tconst calculateTop = (rect: DOMRect) => {\n\t\tif (props.useDefaultOffsets) {\n\t\t\tsetTop(rect.top);\n\t\t\treturn;\n\t\t}\n\t\tlet top: number = rect.top;\n\n\t\tif (props.topOffset) {\n\t\t\ttop = rect.top + props.topOffset;\n\t\t}\n\n\t\tconst childElement: any = childRef?.current;\n\t\tif (!childElement) {\n\t\t\tsetTop(top);\n\t\t\treturn;\n\t\t}\n\t\tconst windowHeight = window.innerHeight;\n\t\tif (rect.top + childElement.offsetHeight > windowHeight) {\n\t\t\ttop =\n\t\t\t\trect.top - (rect.top + childElement.offsetHeight - windowHeight) - 10;\n\t\t}\n\t\tsetTop(top);\n\t};\n\n\tuseEffect(() => {\n\t\tif (props.refElement.current) {\n\t\t\tconst rect = props.refElement.current.getBoundingClientRect();\n\t\t\tcalculateLeft(rect);\n\t\t\tcalculateTop(rect);\n\t\t\tsetShow(true);\n\t\t}\n\t});\n\n\tif (!show) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"floater-position\"\n\t\t\tstyle={{\n\t\t\t\ttop: top,\n\t\t\t\tleft: left,\n\t\t\t\tposition: 'fixed',\n\t\t\t\tzIndex: 1000,\n\t\t\t}}\n\t\t>\n\t\t\t<div ref={childRef}>{props.children}</div>\n\t\t</div>\n\t);\n};\n"],"names":["Floater","props","childRef","useRef","top","setTop","useState","left","setLeft","show","setShow","calculateLeft","rect","childElement","calculateTop","windowHeight","useEffect","jsx"],"mappings":";;AAUO,MAAMA,IAAU,CAACC,MAAwB;AAC/C,QAAMC,IAAWC,EAA8B,IAAI,GAC7C,CAACC,GAAKC,CAAM,IAAIC,EAAiB,CAAC,GAClC,CAACC,GAAMC,CAAO,IAAIF,EAAiB,CAAC,GACpC,CAACG,GAAMC,CAAO,IAAIJ,EAAkB,EAAK,GAEzCK,IAAgB,CAACC,MAAkB;AACxC,QAAIX,EAAM,mBAAmB;AAC5B,MAAAO,EAAQI,EAAK,IAAI;AACjB;AAAA,IACD;AAEA,QAAIL,IAAO;AACX,IAAIN,EAAM,aACTM,IAAOK,EAAK,OAAOX,EAAM,aAEzBM,IAAOK,EAAK,OAAOA,EAAK,QAAQ;AAEjC,UAAMC,IAAoBX,GAAU;AACpC,QAAI,CAACW,GAAc;AAClB,MAAAL,EAAQD,CAAI;AACZ;AAAA,IACD;AACA,IAAIA,IAAO,OAAO,aAAaM,EAAa,gBAC3CN,IAAO,OAAO,aAAaM,EAAa,cAAc,KAEvDL,EAAQD,CAAI;AAAA,EACb,GAEMO,IAAe,CAACF,MAAkB;AACvC,QAAIX,EAAM,mBAAmB;AAC5B,MAAAI,EAAOO,EAAK,GAAG;AACf;AAAA,IACD;AACA,QAAIR,IAAcQ,EAAK;AAEvB,IAAIX,EAAM,cACTG,IAAMQ,EAAK,MAAMX,EAAM;AAGxB,UAAMY,IAAoBX,GAAU;AACpC,QAAI,CAACW,GAAc;AAClB,MAAAR,EAAOD,CAAG;AACV;AAAA,IACD;AACA,UAAMW,IAAe,OAAO;AAC5B,IAAIH,EAAK,MAAMC,EAAa,eAAeE,MAC1CX,IACCQ,EAAK,OAAOA,EAAK,MAAMC,EAAa,eAAeE,KAAgB,KAErEV,EAAOD,CAAG;AAAA,EACX;AAWA,SATAY,EAAU,MAAM;AACf,QAAIf,EAAM,WAAW,SAAS;AAC7B,YAAMW,IAAOX,EAAM,WAAW,QAAQ,sBAAA;AACtC,MAAAU,EAAcC,CAAI,GAClBE,EAAaF,CAAI,GACjBF,EAAQ,EAAI;AAAA,IACb;AAAA,EACD,CAAC,GAEID,IAKJ,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,OAAO;AAAA,QACN,KAAAb;AAAA,QACA,MAAAG;AAAA,QACA,UAAU;AAAA,QACV,QAAQ;AAAA,MAAA;AAAA,MAGT,UAAA,gBAAAU,EAAC,OAAA,EAAI,KAAKf,GAAW,YAAM,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA,IAb9B;AAgBT;"}
|
|
@@ -12,15 +12,15 @@ import { Tooltip as qe } from "../tooltips/Tooltip.js";
|
|
|
12
12
|
const Ge = Ee(
|
|
13
13
|
(e, ae) => {
|
|
14
14
|
const {
|
|
15
|
-
placeholder:
|
|
16
|
-
leftIcon:
|
|
17
|
-
rightIcon:
|
|
18
|
-
labelText:
|
|
15
|
+
placeholder: H,
|
|
16
|
+
leftIcon: _,
|
|
17
|
+
rightIcon: y,
|
|
18
|
+
labelText: T,
|
|
19
19
|
maxCharLimit: l,
|
|
20
20
|
isRequired: k,
|
|
21
21
|
hintText: A,
|
|
22
22
|
type: c,
|
|
23
|
-
state:
|
|
23
|
+
state: b,
|
|
24
24
|
validate: oe,
|
|
25
25
|
variant: o,
|
|
26
26
|
button: h,
|
|
@@ -35,8 +35,8 @@ const Ge = Ee(
|
|
|
35
35
|
version: ue,
|
|
36
36
|
noMaxCharCheck: O,
|
|
37
37
|
labelElement: P,
|
|
38
|
-
autoGrow:
|
|
39
|
-
minHeight:
|
|
38
|
+
autoGrow: M,
|
|
39
|
+
minHeight: S,
|
|
40
40
|
maxHeight: de,
|
|
41
41
|
labelTextBold: fe,
|
|
42
42
|
truncateText: me,
|
|
@@ -60,9 +60,9 @@ const Ge = Ee(
|
|
|
60
60
|
minCharsToTrigger: 0,
|
|
61
61
|
maxCharAlignment: !1,
|
|
62
62
|
...e
|
|
63
|
-
}, X =
|
|
63
|
+
}, X = _?.icon, U = y?.icon, [p, I] = v(!1), [be, w] = v(!1), [u, j] = v(), q = o === "x-small" ? "12px" : o === "small" ? "18px" : "22px", C = He(Oe), [G, L] = v(""), Me = _e(null), r = ae ?? Me;
|
|
64
64
|
d(() => {
|
|
65
|
-
|
|
65
|
+
L(m || ""), !m && M && (r.current.style.height = S || "48px");
|
|
66
66
|
}, [m]), d(() => {
|
|
67
67
|
r.current && e.onReferenceInit?.(r.current);
|
|
68
68
|
}, [r]), d(() => {
|
|
@@ -72,9 +72,9 @@ const Ge = Ee(
|
|
|
72
72
|
t.removeEventListener("wheel", J);
|
|
73
73
|
};
|
|
74
74
|
}, []), d(() => {
|
|
75
|
-
D &&
|
|
75
|
+
D && L("");
|
|
76
76
|
}, [D]), d(() => {
|
|
77
|
-
|
|
77
|
+
w(!!e.isActive), e.isActive && r.current?.focus();
|
|
78
78
|
}, [e.isActive]), d(() => {
|
|
79
79
|
j(e.errorMessage);
|
|
80
80
|
}, [e.errorMessage]), d(() => {
|
|
@@ -92,9 +92,9 @@ const Ge = Ee(
|
|
|
92
92
|
}, Q = (t) => {
|
|
93
93
|
let i = t.target.value;
|
|
94
94
|
const g = l !== 0 ? l + 1 : Y(), x = V;
|
|
95
|
-
if (!ye && ke(c) && (i = Ae(i)), !O && g > 0 && i.length >= g && (i = i.substring(0, g - 1)), e.textControl ||
|
|
95
|
+
if (!ye && ke(c) && (i = Ae(i)), !O && g > 0 && i.length >= g && (i = i.substring(0, g - 1)), e.textControl || L(i || ""), x && i && i.length < x)
|
|
96
96
|
return;
|
|
97
|
-
B(i, t),
|
|
97
|
+
B(i, t), M && (r.current.style.height = `${r.current.scrollHeight}px`, i || (r.current.style.height = S || "48px"));
|
|
98
98
|
const s = oe || Re;
|
|
99
99
|
if (!s || !te(s))
|
|
100
100
|
return;
|
|
@@ -105,10 +105,10 @@ const Ge = Ee(
|
|
|
105
105
|
);
|
|
106
106
|
I(!Se), j(e.errorMessage ? e.errorMessage : pe);
|
|
107
107
|
}, Z = (t) => {
|
|
108
|
-
e.skipFocus ||
|
|
108
|
+
e.skipFocus || w(!0), f(e.onFocus?.(t));
|
|
109
109
|
}, ee = (t) => {
|
|
110
|
-
e.skipFocus ||
|
|
111
|
-
},
|
|
110
|
+
e.skipFocus || w(!1), f(e.onBlur?.(t));
|
|
111
|
+
}, E = () => /* @__PURE__ */ a(we, { children: [
|
|
112
112
|
c !== "multiline" && /* @__PURE__ */ n(
|
|
113
113
|
"input",
|
|
114
114
|
{
|
|
@@ -122,7 +122,7 @@ const Ge = Ee(
|
|
|
122
122
|
value: G,
|
|
123
123
|
onFocus: (t) => Z(t),
|
|
124
124
|
onBlur: (t) => ee(t),
|
|
125
|
-
placeholder:
|
|
125
|
+
placeholder: H || "Enter here",
|
|
126
126
|
onChange: Q,
|
|
127
127
|
onClick: (t) => f(e.onClick),
|
|
128
128
|
onKeyDown: (t) => $(t)
|
|
@@ -138,7 +138,7 @@ const Ge = Ee(
|
|
|
138
138
|
onBlur: (t) => ee(t),
|
|
139
139
|
onClick: (t) => f(e.onClick),
|
|
140
140
|
disabled: W,
|
|
141
|
-
placeholder:
|
|
141
|
+
placeholder: H || "Enter here",
|
|
142
142
|
onChange: Q,
|
|
143
143
|
onKeyDown: (t) => $(t),
|
|
144
144
|
maxLength: l > 0 ? l : void 0
|
|
@@ -150,7 +150,7 @@ const Ge = Ee(
|
|
|
150
150
|
{
|
|
151
151
|
width: e.width,
|
|
152
152
|
height: e.height,
|
|
153
|
-
state:
|
|
153
|
+
state: b,
|
|
154
154
|
type: c,
|
|
155
155
|
style: C?.RootContainer ?? {},
|
|
156
156
|
children: [
|
|
@@ -169,10 +169,10 @@ const Ge = Ee(
|
|
|
169
169
|
Ke,
|
|
170
170
|
{
|
|
171
171
|
variant: o,
|
|
172
|
-
state:
|
|
172
|
+
state: b,
|
|
173
173
|
width: e.width,
|
|
174
|
-
isActive:
|
|
175
|
-
isInvalid:
|
|
174
|
+
isActive: b === "active" || be,
|
|
175
|
+
isInvalid: p,
|
|
176
176
|
style: C?.InputWrapper ?? Ce ?? {},
|
|
177
177
|
version: ue,
|
|
178
178
|
height: e.height,
|
|
@@ -184,7 +184,7 @@ const Ge = Ee(
|
|
|
184
184
|
{
|
|
185
185
|
variant: o,
|
|
186
186
|
iconSize: q,
|
|
187
|
-
onClick: () => f(
|
|
187
|
+
onClick: () => f(_?.callback),
|
|
188
188
|
isLeft: !0,
|
|
189
189
|
style: {
|
|
190
190
|
...C?.IconHolder ?? {},
|
|
@@ -199,21 +199,22 @@ const Ge = Ee(
|
|
|
199
199
|
{
|
|
200
200
|
height: e.height,
|
|
201
201
|
type: e.type,
|
|
202
|
-
minHeight:
|
|
202
|
+
minHeight: S,
|
|
203
203
|
maxHeight: de,
|
|
204
|
-
autoGrow:
|
|
205
|
-
children:
|
|
204
|
+
autoGrow: M,
|
|
205
|
+
children: E()
|
|
206
206
|
}
|
|
207
207
|
),
|
|
208
|
-
o === "small" && /* @__PURE__ */ n(We, { height: e.height, type: e.type, children:
|
|
209
|
-
o === "x-small" && /* @__PURE__ */ n(Xe, { height: e.height, type: e.type, children:
|
|
208
|
+
o === "small" && /* @__PURE__ */ n(We, { height: e.height, type: e.type, children: E() }),
|
|
209
|
+
o === "x-small" && /* @__PURE__ */ n(Xe, { height: e.height, type: e.type, children: E() }),
|
|
210
210
|
!!U && /* @__PURE__ */ n(
|
|
211
211
|
re,
|
|
212
212
|
{
|
|
213
213
|
variant: o,
|
|
214
214
|
iconSize: q,
|
|
215
|
-
onClick: () => f(
|
|
215
|
+
onClick: () => f(y?.callback),
|
|
216
216
|
isLeft: !1,
|
|
217
|
+
"data-test": y?.["data-test"],
|
|
217
218
|
children: /* @__PURE__ */ n(U, {})
|
|
218
219
|
}
|
|
219
220
|
),
|
|
@@ -230,19 +231,19 @@ const Ge = Ee(
|
|
|
230
231
|
]
|
|
231
232
|
}
|
|
232
233
|
),
|
|
233
|
-
!xe && (!!
|
|
234
|
+
!xe && (!!T || !!l) && /* @__PURE__ */ a(
|
|
234
235
|
je,
|
|
235
236
|
{
|
|
236
|
-
invalid:
|
|
237
|
+
invalid: p,
|
|
237
238
|
maxCharAlignment: ve,
|
|
238
239
|
children: [
|
|
239
240
|
P && P,
|
|
240
241
|
/* @__PURE__ */ a("div", { className: "label__container", children: [
|
|
241
242
|
fe ? /* @__PURE__ */ a(Fe, { children: [
|
|
242
|
-
|
|
243
|
+
T,
|
|
243
244
|
k ? /* @__PURE__ */ n("span", { children: "*" }) : ""
|
|
244
245
|
] }) : /* @__PURE__ */ a(Be, { children: [
|
|
245
|
-
|
|
246
|
+
T,
|
|
246
247
|
k ? /* @__PURE__ */ n("span", { children: "*" }) : ""
|
|
247
248
|
] }),
|
|
248
249
|
e.tooltipText && /* @__PURE__ */ n(qe, { body: e.tooltipText, placement: "top", children: /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(
|
|
@@ -251,7 +252,7 @@ const Ge = Ee(
|
|
|
251
252
|
style: { marginTop: -3 },
|
|
252
253
|
width: 18,
|
|
253
254
|
height: 18,
|
|
254
|
-
color:
|
|
255
|
+
color: p ? ne.content.negative : ne.content.primary
|
|
255
256
|
}
|
|
256
257
|
) }) })
|
|
257
258
|
] }),
|
|
@@ -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>\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\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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"}
|
|
@@ -5,7 +5,7 @@ import n from "styled-components";
|
|
|
5
5
|
import { Modal as h } from "./Modal.js";
|
|
6
6
|
import { TitleMedium as m, BodyCaption as s, BodyPrimary as u } from "../TypographyStyle.js";
|
|
7
7
|
import { COLORS as d } from "../../constants/Theme.js";
|
|
8
|
-
import { Button as
|
|
8
|
+
import { Button as a } from "../button/Button.js";
|
|
9
9
|
const f = n.div`
|
|
10
10
|
display: flex;
|
|
11
11
|
flex-direction: column;
|
|
@@ -50,7 +50,7 @@ const f = n.div`
|
|
|
50
50
|
width: 100%;
|
|
51
51
|
z-index: 1;
|
|
52
52
|
box-shadow: ${(e) => e.showShadow ? "inset 0 -3px 6px rgba(0, 0, 0, 0.12)" : "none"};
|
|
53
|
-
`, S = n(
|
|
53
|
+
`, S = n(a)`
|
|
54
54
|
margin-right: 8px;
|
|
55
55
|
`, j = (e) => typeof window > "u" ? null : c.createPortal(
|
|
56
56
|
/* @__PURE__ */ t(
|
|
@@ -78,9 +78,10 @@ const f = n.div`
|
|
|
78
78
|
e.onBackPress && /* @__PURE__ */ t(
|
|
79
79
|
"div",
|
|
80
80
|
{
|
|
81
|
+
"data-test": (e["data-test"] || "") + "-back-button",
|
|
81
82
|
style: { cursor: "pointer" },
|
|
82
|
-
onClick: (
|
|
83
|
-
e.onBackPress ? e.onBackPress() :
|
|
83
|
+
onClick: (o) => {
|
|
84
|
+
e.onBackPress ? e.onBackPress() : o.stopPropagation();
|
|
84
85
|
},
|
|
85
86
|
children: /* @__PURE__ */ t(r, { width: 18, height: 18 })
|
|
86
87
|
}
|
|
@@ -146,7 +147,7 @@ const f = n.div`
|
|
|
146
147
|
(e.primaryButton || e.secondaryButton || e.footerLeftCustomElement) && /* @__PURE__ */ i(C, { style: e.footerContainerStyle, children: [
|
|
147
148
|
e.footerLeftCustomElement && /* @__PURE__ */ t(w, { children: e.footerLeftCustomElement }),
|
|
148
149
|
e.secondaryButton && /* @__PURE__ */ t(S, { ...e.secondaryButton }),
|
|
149
|
-
e.primaryButton && /* @__PURE__ */ t(
|
|
150
|
+
e.primaryButton && /* @__PURE__ */ t(a, { ...e.primaryButton })
|
|
150
151
|
] }),
|
|
151
152
|
" "
|
|
152
153
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styledModal.js","sources":["../../../../src/components/modals/styledModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleMedium,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\n\nconst ModalWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\talign-items: flex-start;\n\toverflow: hidden;\n\tmax-width: 100%;\n`;\nconst ModalHeader = styled.div<{\n\ttintedHeader: boolean;\n}>`\n\tpadding: 16px 24px;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: center;\n\tbackground-color: ${(props) =>\n\t\tprops.tintedHeader ? COLORS.background.warning.light : 'transparent'};\n\tborder-top-left-radius: ${(props) => (props.tintedHeader ? '4px' : 'none')};\n`;\n\nconst ModalTitles = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nconst ModalCustomisation = styled.div`\n\tdisplay: flex;\n\tmargin-left: auto;\n\tjustify-content: flex-end;\n\talign-items: center;\n`;\n\nconst ModalSubtitle = styled(BodyPrimary)`\n\tmargin-top: 4px;\n\tcolor: ${COLORS.content.secondary} !important;\n`;\n\nconst ModalFooter = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: end;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nconst ModalFooterRightCustomisation = styled.div`\n\tmargin-right: auto;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: calc(100% - 32px);\n`;\n\nconst ModalBody = styled.div<{\n\tshowShadow: boolean;\n}>`\n\twidth: 100%;\n\tz-index: 1;\n\tbox-shadow: ${(props) =>\n\t\tprops.showShadow ? 'inset 0 -3px 6px rgba(0, 0, 0, 0.12)' : 'none'};\n`;\nconst SecondaryButtonWrapper = styled(Button)`\n\tmargin-right: 8px;\n`;\nexport const StyledModal: React.FC<{\n\t'data-test'?: string;\n\topen: boolean;\n\tonClose?: () => void;\n\tchildren?: React.ReactNode;\n\tcentralContainerStyles?: React.CSSProperties;\n\tcloseOnOutsideClick?: boolean;\n\tcloseOnEscapeKey?: boolean;\n\theadingTitle?: string;\n\theadingSubtitle?: string;\n\ttintedHeader?: boolean;\n\tprimaryButton?: ButtonProps;\n\tsecondaryButton?: ButtonProps;\n\tfooterShadow?: boolean;\n\tfooterLeftCustomElement?: React.ReactNode;\n\theaderLeftCustomElement?: React.ReactNode;\n\theaderRightCustomElement?: React.ReactNode;\n\tzIndex?: number;\n\thideCrossButton?: boolean;\n\twidth?: string;\n\twrapperStyle?: React.CSSProperties;\n\tonBackPress?: () => void;\n\tfooterContainerStyle?: React.CSSProperties;\n\tid?: string;\n\tmodalHeaderStyles?: React.CSSProperties;\n\tinnerModalId?: string;\n\tisBeta?: boolean;\n\tmodalBodyStyles?: React.CSSProperties;\n\tskipModalWithTimer?: boolean;\n\ttimeOut?: number;\n}> = (props) => {\n\tif (typeof window === 'undefined') return null;\n\n\treturn ReactDOM.createPortal(\n\t\t<Modal\n\t\t\tdata-test={props['data-test']}\n\t\t\tid={props.id}\n\t\t\tzIndex={props.zIndex}\n\t\t\topen={props.open}\n\t\t\tonClose={props.onClose}\n\t\t\tcloseOnOutsideClick={props.closeOnOutsideClick}\n\t\t\tcloseOnEscapeKey={props.closeOnEscapeKey}\n\t\t\tcentralContainerStyles={props.centralContainerStyles}\n\t\t\thideCrossButton={props.hideCrossButton}\n\t\t\twidth={props.width}\n\t\t\tskipModalWithTimer={props.skipModalWithTimer}\n\t\t\ttimeOut={props.timeOut}\n\t\t>\n\t\t\t<ModalWrapper style={props.wrapperStyle ?? {}} id={props.innerModalId}>\n\t\t\t\t{(props.headingTitle ||\n\t\t\t\t\tprops.headingSubtitle ||\n\t\t\t\t\tprops.headerRightCustomElement) && (\n\t\t\t\t\t<ModalHeader\n\t\t\t\t\t\tstyle={props.modalHeaderStyles ?? {}}\n\t\t\t\t\t\ttintedHeader={props.tintedHeader ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.onBackPress && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tprops.onBackPress ? props.onBackPress() : e.stopPropagation();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BackIcon width={18} height={18} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t{props.headingTitle && (\n\t\t\t\t\t\t\t\t\t\t<TitleMedium>{props.headingTitle}</TitleMedium>\n\t\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t\t\t{props.isBeta && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#1877f2',\n\t\t\t\t\t\t\t\t\t\t\theight: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.surface.standard }}>\n\t\t\t\t\t\t\t\t\t\t\tBETA\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.headerLeftCustomElement}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headingSubtitle && (\n\t\t\t\t\t\t\t\t\t<ModalSubtitle>{props.headingSubtitle}</ModalSubtitle>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props.headerRightCustomElement && (\n\t\t\t\t\t\t\t<ModalCustomisation>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headerRightCustomElement}{' '}\n\t\t\t\t\t\t\t</ModalCustomisation>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t</ModalHeader>\n\t\t\t\t)}\n\t\t\t\t{props.children && (\n\t\t\t\t\t<ModalBody\n\t\t\t\t\t\tstyle={props.modalBodyStyles ?? {}}\n\t\t\t\t\t\tshowShadow={props.footerShadow ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.children}{' '}\n\t\t\t\t\t</ModalBody>\n\t\t\t\t)}\n\t\t\t\t{(props.primaryButton ||\n\t\t\t\t\tprops.secondaryButton ||\n\t\t\t\t\tprops.footerLeftCustomElement) && (\n\t\t\t\t\t<ModalFooter style={props.footerContainerStyle}>\n\t\t\t\t\t\t{props.footerLeftCustomElement && (\n\t\t\t\t\t\t\t<ModalFooterRightCustomisation>\n\t\t\t\t\t\t\t\t{props.footerLeftCustomElement}\n\t\t\t\t\t\t\t</ModalFooterRightCustomisation>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.secondaryButton && (\n\t\t\t\t\t\t\t<SecondaryButtonWrapper {...props.secondaryButton} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.primaryButton && <Button {...props.primaryButton} />}\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</ModalWrapper>\n\t\t</Modal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ModalWrapper","styled","ModalHeader","props","COLORS","ModalTitles","ModalCustomisation","ModalSubtitle","BodyPrimary","ModalFooter","ModalFooterRightCustomisation","ModalBody","SecondaryButtonWrapper","Button","StyledModal","ReactDOM","jsx","Modal","jsxs","e","BackIcon","TitleMedium","BodyCaption"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styledModal.js","sources":["../../../../src/components/modals/styledModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleMedium,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\n\nconst ModalWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\talign-items: flex-start;\n\toverflow: hidden;\n\tmax-width: 100%;\n`;\nconst ModalHeader = styled.div<{\n\ttintedHeader: boolean;\n}>`\n\tpadding: 16px 24px;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: center;\n\tbackground-color: ${(props) =>\n\t\tprops.tintedHeader ? COLORS.background.warning.light : 'transparent'};\n\tborder-top-left-radius: ${(props) => (props.tintedHeader ? '4px' : 'none')};\n`;\n\nconst ModalTitles = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nconst ModalCustomisation = styled.div`\n\tdisplay: flex;\n\tmargin-left: auto;\n\tjustify-content: flex-end;\n\talign-items: center;\n`;\n\nconst ModalSubtitle = styled(BodyPrimary)`\n\tmargin-top: 4px;\n\tcolor: ${COLORS.content.secondary} !important;\n`;\n\nconst ModalFooter = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: end;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nconst ModalFooterRightCustomisation = styled.div`\n\tmargin-right: auto;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: calc(100% - 32px);\n`;\n\nconst ModalBody = styled.div<{\n\tshowShadow: boolean;\n}>`\n\twidth: 100%;\n\tz-index: 1;\n\tbox-shadow: ${(props) =>\n\t\tprops.showShadow ? 'inset 0 -3px 6px rgba(0, 0, 0, 0.12)' : 'none'};\n`;\nconst SecondaryButtonWrapper = styled(Button)`\n\tmargin-right: 8px;\n`;\nexport const StyledModal: React.FC<{\n\t'data-test'?: string;\n\topen: boolean;\n\tonClose?: () => void;\n\tchildren?: React.ReactNode;\n\tcentralContainerStyles?: React.CSSProperties;\n\tcloseOnOutsideClick?: boolean;\n\tcloseOnEscapeKey?: boolean;\n\theadingTitle?: string;\n\theadingSubtitle?: string;\n\ttintedHeader?: boolean;\n\tprimaryButton?: ButtonProps;\n\tsecondaryButton?: ButtonProps;\n\tfooterShadow?: boolean;\n\tfooterLeftCustomElement?: React.ReactNode;\n\theaderLeftCustomElement?: React.ReactNode;\n\theaderRightCustomElement?: React.ReactNode;\n\tzIndex?: number;\n\thideCrossButton?: boolean;\n\twidth?: string;\n\twrapperStyle?: React.CSSProperties;\n\tonBackPress?: () => void;\n\tfooterContainerStyle?: React.CSSProperties;\n\tid?: string;\n\tmodalHeaderStyles?: React.CSSProperties;\n\tinnerModalId?: string;\n\tisBeta?: boolean;\n\tmodalBodyStyles?: React.CSSProperties;\n\tskipModalWithTimer?: boolean;\n\ttimeOut?: number;\n}> = (props) => {\n\tif (typeof window === 'undefined') return null;\n\n\treturn ReactDOM.createPortal(\n\t\t<Modal\n\t\t\tdata-test={props['data-test']}\n\t\t\tid={props.id}\n\t\t\tzIndex={props.zIndex}\n\t\t\topen={props.open}\n\t\t\tonClose={props.onClose}\n\t\t\tcloseOnOutsideClick={props.closeOnOutsideClick}\n\t\t\tcloseOnEscapeKey={props.closeOnEscapeKey}\n\t\t\tcentralContainerStyles={props.centralContainerStyles}\n\t\t\thideCrossButton={props.hideCrossButton}\n\t\t\twidth={props.width}\n\t\t\tskipModalWithTimer={props.skipModalWithTimer}\n\t\t\ttimeOut={props.timeOut}\n\t\t>\n\t\t\t<ModalWrapper style={props.wrapperStyle ?? {}} id={props.innerModalId}>\n\t\t\t\t{(props.headingTitle ||\n\t\t\t\t\tprops.headingSubtitle ||\n\t\t\t\t\tprops.headerRightCustomElement) && (\n\t\t\t\t\t<ModalHeader\n\t\t\t\t\t\tstyle={props.modalHeaderStyles ?? {}}\n\t\t\t\t\t\ttintedHeader={props.tintedHeader ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.onBackPress && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-test={(props['data-test'] || '') + '-back-button'}\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tprops.onBackPress ? props.onBackPress() : e.stopPropagation();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BackIcon width={18} height={18} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t{props.headingTitle && (\n\t\t\t\t\t\t\t\t\t\t<TitleMedium>{props.headingTitle}</TitleMedium>\n\t\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t\t\t{props.isBeta && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#1877f2',\n\t\t\t\t\t\t\t\t\t\t\theight: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.surface.standard }}>\n\t\t\t\t\t\t\t\t\t\t\tBETA\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.headerLeftCustomElement}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headingSubtitle && (\n\t\t\t\t\t\t\t\t\t<ModalSubtitle>{props.headingSubtitle}</ModalSubtitle>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props.headerRightCustomElement && (\n\t\t\t\t\t\t\t<ModalCustomisation>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headerRightCustomElement}{' '}\n\t\t\t\t\t\t\t</ModalCustomisation>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t</ModalHeader>\n\t\t\t\t)}\n\t\t\t\t{props.children && (\n\t\t\t\t\t<ModalBody\n\t\t\t\t\t\tstyle={props.modalBodyStyles ?? {}}\n\t\t\t\t\t\tshowShadow={props.footerShadow ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.children}{' '}\n\t\t\t\t\t</ModalBody>\n\t\t\t\t)}\n\t\t\t\t{(props.primaryButton ||\n\t\t\t\t\tprops.secondaryButton ||\n\t\t\t\t\tprops.footerLeftCustomElement) && (\n\t\t\t\t\t<ModalFooter style={props.footerContainerStyle}>\n\t\t\t\t\t\t{props.footerLeftCustomElement && (\n\t\t\t\t\t\t\t<ModalFooterRightCustomisation>\n\t\t\t\t\t\t\t\t{props.footerLeftCustomElement}\n\t\t\t\t\t\t\t</ModalFooterRightCustomisation>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.secondaryButton && (\n\t\t\t\t\t\t\t<SecondaryButtonWrapper {...props.secondaryButton} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.primaryButton && <Button {...props.primaryButton} />}\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</ModalWrapper>\n\t\t</Modal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ModalWrapper","styled","ModalHeader","props","COLORS","ModalTitles","ModalCustomisation","ModalSubtitle","BodyPrimary","ModalFooter","ModalFooterRightCustomisation","ModalBody","SecondaryButtonWrapper","Button","StyledModal","ReactDOM","jsx","Modal","jsxs","e","BackIcon","TitleMedium","BodyCaption"],"mappings":"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"}
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
import { jsxs as c, jsx as n, Fragment as T } from "react/jsx-runtime";
|
|
2
2
|
import P from "../../assets/icons/chevronRight2.svg.js";
|
|
3
|
-
import u, { useRef as
|
|
3
|
+
import u, { useRef as W } from "react";
|
|
4
4
|
import { COLORS as t } from "../../constants/Theme.js";
|
|
5
|
-
import { BodyCaption as
|
|
6
|
-
import { MenuItemWrapper as
|
|
5
|
+
import { BodyCaption as B, BodyTiny as H } from "../TypographyStyle.js";
|
|
6
|
+
import { MenuItemWrapper as L, MenuItemContainer as j, ContentContainer as k, LeadingIconContainer as E, TrailingIconContainer as C, SubMenuContainer as _, StyledSubMenuWrapper as w, SubMenuListContainer as D } from "./MultiLevelDropdown.styled.js";
|
|
7
7
|
const J = ({
|
|
8
8
|
width: o,
|
|
9
9
|
onDropdownItemClick: f,
|
|
10
10
|
option: e,
|
|
11
|
-
parents:
|
|
11
|
+
parents: m,
|
|
12
12
|
allowParentSelection: y,
|
|
13
|
-
maxLevels:
|
|
13
|
+
maxLevels: h,
|
|
14
14
|
currentLevel: b,
|
|
15
15
|
renderNestedMenu: I,
|
|
16
16
|
version: r
|
|
17
17
|
}) => {
|
|
18
|
-
const [g, M] = u.useState(!1), [
|
|
18
|
+
const [g, M] = u.useState(!1), [a, p] = u.useState(!1), [S, v] = u.useState({
|
|
19
19
|
top: 0,
|
|
20
20
|
left: 0
|
|
21
|
-
}), x =
|
|
22
|
-
!f || (e.disabled ?? !1) || (!i || y) && f(e,
|
|
21
|
+
}), x = W({ top: 0, left: 0 }), i = !!e.children && e.children.length > 0, d = i && (h === void 0 || b < h), O = () => {
|
|
22
|
+
!f || (e.disabled ?? !1) || (!i || y) && f(e, m);
|
|
23
23
|
}, R = (s) => {
|
|
24
|
-
const
|
|
24
|
+
const l = s.currentTarget.getBoundingClientRect();
|
|
25
25
|
v({
|
|
26
|
-
top:
|
|
27
|
-
left:
|
|
26
|
+
top: l.top,
|
|
27
|
+
left: l.right
|
|
28
28
|
}), x.current = {
|
|
29
|
-
top:
|
|
30
|
-
left:
|
|
29
|
+
top: l.top,
|
|
30
|
+
left: l.right
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
return /* @__PURE__ */ c(
|
|
34
|
-
|
|
34
|
+
L,
|
|
35
35
|
{
|
|
36
36
|
version: r,
|
|
37
37
|
onMouseEnter: (s) => {
|
|
@@ -44,6 +44,7 @@ const J = ({
|
|
|
44
44
|
s.stopPropagation(), O();
|
|
45
45
|
},
|
|
46
46
|
id: "menuItemWrapper",
|
|
47
|
+
"data-testid": "menuItemWrapper",
|
|
47
48
|
style: {
|
|
48
49
|
cursor: e.disabled ?? !1 ? "not-allowed" : "pointer",
|
|
49
50
|
backgroundColor: e.disabled ?? !1 ? t.surface.standard : "transparent"
|
|
@@ -54,7 +55,7 @@ const J = ({
|
|
|
54
55
|
{
|
|
55
56
|
isSelected: e.selected,
|
|
56
57
|
isSubMenuOpen: g,
|
|
57
|
-
isHovered:
|
|
58
|
+
isHovered: a,
|
|
58
59
|
isDisabled: e.disabled ?? !1,
|
|
59
60
|
version: r,
|
|
60
61
|
children: [
|
|
@@ -62,19 +63,19 @@ const J = ({
|
|
|
62
63
|
e.leadingIcon && /* @__PURE__ */ n(E, { children: e.leadingIcon }),
|
|
63
64
|
/* @__PURE__ */ c("div", { children: [
|
|
64
65
|
/* @__PURE__ */ n(
|
|
65
|
-
|
|
66
|
+
B,
|
|
66
67
|
{
|
|
67
68
|
style: {
|
|
68
|
-
color: e.disabled ?? !1 ? t.content.inactive : e.selected ||
|
|
69
|
+
color: e.disabled ?? !1 ? t.content.inactive : e.selected || a ? r === "3.0" ? t.text.primary : t.content.positive : t.content.primary
|
|
69
70
|
},
|
|
70
71
|
children: e.label
|
|
71
72
|
}
|
|
72
73
|
),
|
|
73
74
|
e.subText && /* @__PURE__ */ n(
|
|
74
|
-
|
|
75
|
+
H,
|
|
75
76
|
{
|
|
76
77
|
style: {
|
|
77
|
-
color: e.disabled ?? !1 ? t.content.inactive : e.selected ||
|
|
78
|
+
color: e.disabled ?? !1 ? t.content.inactive : e.selected || a ? r === "3.0" ? t.text.primary : t.content.positive : t.content.secondary,
|
|
78
79
|
marginTop: "2px"
|
|
79
80
|
},
|
|
80
81
|
children: e.subText
|
|
@@ -82,14 +83,14 @@ const J = ({
|
|
|
82
83
|
)
|
|
83
84
|
] })
|
|
84
85
|
] }),
|
|
85
|
-
i ? /* @__PURE__ */ n(
|
|
86
|
+
i ? /* @__PURE__ */ n(C, { children: /* @__PURE__ */ n(
|
|
86
87
|
P,
|
|
87
88
|
{
|
|
88
89
|
width: 16,
|
|
89
90
|
height: 16,
|
|
90
|
-
color: !d || (e.disabled ?? !1) ? t.content.inactive : e.selected ||
|
|
91
|
+
color: !d || (e.disabled ?? !1) ? t.content.inactive : e.selected || a ? r === "3.0" ? t.text.primary : t.content.positive : t.content.primary
|
|
91
92
|
}
|
|
92
|
-
) }) : e.trailingIcon ? /* @__PURE__ */ n(
|
|
93
|
+
) }) : e.trailingIcon ? /* @__PURE__ */ n(C, { children: e.trailingIcon }) : /* @__PURE__ */ n(T, {})
|
|
93
94
|
]
|
|
94
95
|
}
|
|
95
96
|
),
|
|
@@ -98,17 +99,17 @@ const J = ({
|
|
|
98
99
|
{
|
|
99
100
|
width: o,
|
|
100
101
|
className: "submenu",
|
|
101
|
-
onMouseEnter: () =>
|
|
102
|
-
onMouseLeave: () =>
|
|
102
|
+
onMouseEnter: () => p(!0),
|
|
103
|
+
onMouseLeave: () => p(!1),
|
|
103
104
|
children: /* @__PURE__ */ n(
|
|
104
105
|
w,
|
|
105
106
|
{
|
|
106
107
|
width: o,
|
|
107
|
-
top:
|
|
108
|
-
left:
|
|
108
|
+
top: S.top,
|
|
109
|
+
left: S.left,
|
|
109
110
|
children: /* @__PURE__ */ n(D, { version: r, children: I(
|
|
110
111
|
e.children,
|
|
111
|
-
[...
|
|
112
|
+
[...m, e],
|
|
112
113
|
b + 1
|
|
113
114
|
) })
|
|
114
115
|
}
|