se-design 0.0.117 → 0.0.119
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/assets/icons/all-space.svg +12 -0
- package/dist/assets/icons/checked-circle.svg +8 -6
- package/dist/assets/icons/csv.svg +20 -0
- package/dist/assets/icons/gmail.svg +7 -0
- package/dist/assets/icons/hashtag.svg +6 -0
- package/dist/assets/icons/info.svg +10 -6
- package/dist/assets/icons/onedrive.svg +6 -0
- package/dist/assets/icons/outlook.svg +39 -0
- package/dist/assets/icons/shipment-private.svg +7 -0
- package/dist/assets/style.css +1 -1
- package/dist/components/DatePicker/index.d.ts +17 -0
- package/dist/components/HamburgerMenu/index.d.ts +1 -0
- package/dist/components/Icon/index.d.ts +1 -0
- package/dist/components/MenuItem/index.d.ts +1 -0
- package/dist/components/RadioGroup/index.d.ts +1 -0
- package/dist/components/SearchBox/index.d.ts +3 -0
- package/dist/components/SidebarOverlay/index.d.ts +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/index.js +28 -26
- package/dist/index.js.map +1 -1
- package/dist/index100.js +1 -1
- package/dist/index100.js.map +1 -1
- package/dist/index101.js +1 -1
- package/dist/index101.js.map +1 -1
- package/dist/index102.js +1 -1
- package/dist/index102.js.map +1 -1
- package/dist/index103.js +1 -1
- package/dist/index103.js.map +1 -1
- package/dist/index104.js +1 -1
- package/dist/index104.js.map +1 -1
- package/dist/index105.js +1 -1
- package/dist/index105.js.map +1 -1
- package/dist/index106.js +2 -2
- package/dist/index106.js.map +1 -1
- package/dist/index107.js +1 -1
- package/dist/index107.js.map +1 -1
- package/dist/index108.js +2 -2
- package/dist/index108.js.map +1 -1
- package/dist/index109.js +1 -1
- package/dist/index109.js.map +1 -1
- package/dist/index110.js +1 -1
- package/dist/index110.js.map +1 -1
- package/dist/index111.js +1 -1
- package/dist/index111.js.map +1 -1
- package/dist/index112.js +1 -1
- package/dist/index112.js.map +1 -1
- package/dist/index113.js +1 -1
- package/dist/index113.js.map +1 -1
- package/dist/index114.js +2 -2
- package/dist/index114.js.map +1 -1
- package/dist/index115.js +1 -1
- package/dist/index115.js.map +1 -1
- package/dist/index116.js +1 -1
- package/dist/index116.js.map +1 -1
- package/dist/index117.js +2 -149
- package/dist/index117.js.map +1 -1
- package/dist/index118.js +5 -0
- package/dist/index118.js.map +1 -0
- package/dist/index119.js +5 -0
- package/dist/index119.js.map +1 -0
- package/dist/index120.js +5 -0
- package/dist/index120.js.map +1 -0
- package/dist/index121.js +5 -0
- package/dist/index121.js.map +1 -0
- package/dist/index122.js +5 -0
- package/dist/index122.js.map +1 -0
- package/dist/index123.js +5 -0
- package/dist/index123.js.map +1 -0
- package/dist/index124.js +5 -0
- package/dist/index124.js.map +1 -0
- package/dist/index125.js +152 -0
- package/dist/index125.js.map +1 -0
- package/dist/index136.js +12 -1233
- package/dist/index136.js.map +1 -1
- package/dist/index144.js +1232 -37
- package/dist/index144.js.map +1 -1
- package/dist/index146.js +9 -7
- package/dist/index146.js.map +1 -1
- package/dist/index147.js +9 -326
- package/dist/index147.js.map +1 -1
- package/dist/index148.js +4 -49
- package/dist/index148.js.map +1 -1
- package/dist/index149.js +170 -2
- package/dist/index149.js.map +1 -1
- package/dist/index15.js +21 -17
- package/dist/index15.js.map +1 -1
- package/dist/index150.js +11 -76
- package/dist/index150.js.map +1 -1
- package/dist/index151.js +5 -92
- package/dist/index151.js.map +1 -1
- package/dist/index152.js +5 -51
- package/dist/index152.js.map +1 -1
- package/dist/index153.js +37 -7
- package/dist/index153.js.map +1 -1
- package/dist/index154.js +2 -5
- package/dist/index154.js.map +1 -1
- package/dist/index155.js +7 -51
- package/dist/index155.js.map +1 -1
- package/dist/index156.js +327 -2
- package/dist/index156.js.map +1 -1
- package/dist/index157.js +50 -2
- package/dist/index157.js.map +1 -1
- package/dist/index158.js +5 -0
- package/dist/index158.js.map +1 -0
- package/dist/index159.js +79 -0
- package/dist/index159.js.map +1 -0
- package/dist/index160.js +96 -0
- package/dist/index160.js.map +1 -0
- package/dist/index161.js +55 -0
- package/dist/index161.js.map +1 -0
- package/dist/index162.js +11 -0
- package/dist/index162.js.map +1 -0
- package/dist/index163.js +8 -0
- package/dist/index163.js.map +1 -0
- package/dist/index164.js +55 -0
- package/dist/index164.js.map +1 -0
- package/dist/index165.js +5 -0
- package/dist/index165.js.map +1 -0
- package/dist/index166.js +5 -0
- package/dist/index166.js.map +1 -0
- package/dist/index19.js +9 -8
- package/dist/index19.js.map +1 -1
- package/dist/index26.js +54 -39
- package/dist/index26.js.map +1 -1
- package/dist/index31.js +27 -27
- package/dist/index31.js.map +1 -1
- package/dist/index32.js +9 -9
- package/dist/index32.js.map +1 -1
- package/dist/index37.js +46 -38
- package/dist/index37.js.map +1 -1
- package/dist/index42.js +36 -36
- package/dist/index42.js.map +1 -1
- package/dist/index43.js +1 -1
- package/dist/index48.js +292 -2
- package/dist/index48.js.map +1 -1
- package/dist/index49.js +1 -1
- package/dist/index49.js.map +1 -1
- package/dist/index5.js +133 -118
- package/dist/index5.js.map +1 -1
- package/dist/index50.js +1 -1
- package/dist/index50.js.map +1 -1
- package/dist/index51.js +1 -1
- package/dist/index51.js.map +1 -1
- package/dist/index52.js +1 -1
- package/dist/index52.js.map +1 -1
- package/dist/index53.js +1 -1
- package/dist/index53.js.map +1 -1
- package/dist/index54.js +1 -1
- package/dist/index54.js.map +1 -1
- package/dist/index55.js +1 -1
- package/dist/index55.js.map +1 -1
- package/dist/index56.js +1 -1
- package/dist/index56.js.map +1 -1
- package/dist/index57.js +1 -1
- package/dist/index57.js.map +1 -1
- package/dist/index58.js +1 -1
- package/dist/index58.js.map +1 -1
- package/dist/index59.js +1 -1
- package/dist/index59.js.map +1 -1
- package/dist/index60.js +1 -1
- package/dist/index60.js.map +1 -1
- package/dist/index61.js +2 -2
- package/dist/index61.js.map +1 -1
- package/dist/index62.js +1 -1
- package/dist/index62.js.map +1 -1
- package/dist/index63.js +1 -1
- package/dist/index63.js.map +1 -1
- package/dist/index64.js +1 -1
- package/dist/index64.js.map +1 -1
- package/dist/index65.js +1 -1
- package/dist/index65.js.map +1 -1
- package/dist/index66.js +2 -2
- package/dist/index66.js.map +1 -1
- package/dist/index67.js +1 -1
- package/dist/index67.js.map +1 -1
- package/dist/index68.js +2 -2
- package/dist/index68.js.map +1 -1
- package/dist/index69.js +2 -2
- package/dist/index69.js.map +1 -1
- package/dist/index70.js +1 -1
- package/dist/index70.js.map +1 -1
- package/dist/index71.js +1 -1
- package/dist/index71.js.map +1 -1
- package/dist/index72.js +2 -2
- package/dist/index72.js.map +1 -1
- package/dist/index73.js +1 -1
- package/dist/index73.js.map +1 -1
- package/dist/index74.js +2 -2
- package/dist/index74.js.map +1 -1
- package/dist/index75.js +2 -2
- package/dist/index75.js.map +1 -1
- package/dist/index76.js +1 -1
- package/dist/index76.js.map +1 -1
- package/dist/index77.js +2 -2
- package/dist/index77.js.map +1 -1
- package/dist/index78.js +2 -2
- package/dist/index78.js.map +1 -1
- package/dist/index79.js +1 -1
- package/dist/index79.js.map +1 -1
- package/dist/index80.js +1 -1
- package/dist/index80.js.map +1 -1
- package/dist/index81.js +1 -1
- package/dist/index81.js.map +1 -1
- package/dist/index82.js +1 -1
- package/dist/index82.js.map +1 -1
- package/dist/index83.js +2 -2
- package/dist/index83.js.map +1 -1
- package/dist/index84.js +1 -1
- package/dist/index84.js.map +1 -1
- package/dist/index85.js +2 -2
- package/dist/index85.js.map +1 -1
- package/dist/index86.js +1 -1
- package/dist/index86.js.map +1 -1
- package/dist/index87.js +1 -1
- package/dist/index87.js.map +1 -1
- package/dist/index88.js +1 -1
- package/dist/index88.js.map +1 -1
- package/dist/index89.js +1 -1
- package/dist/index89.js.map +1 -1
- package/dist/index9.js +9 -9
- package/dist/index9.js.map +1 -1
- package/dist/index90.js +2 -2
- package/dist/index90.js.map +1 -1
- package/dist/index91.js +2 -2
- package/dist/index91.js.map +1 -1
- package/dist/index92.js +1 -1
- package/dist/index92.js.map +1 -1
- package/dist/index93.js +1 -1
- package/dist/index93.js.map +1 -1
- package/dist/index94.js +2 -2
- package/dist/index94.js.map +1 -1
- package/dist/index95.js +2 -2
- package/dist/index95.js.map +1 -1
- package/dist/index96.js +1 -1
- package/dist/index96.js.map +1 -1
- package/dist/index97.js +2 -2
- package/dist/index97.js.map +1 -1
- package/dist/index98.js +2 -2
- package/dist/index98.js.map +1 -1
- package/dist/index99.js +1 -1
- package/dist/index99.js.map +1 -1
- package/package.json +1 -1
- package/dist/index128.js +0 -15
- package/dist/index128.js.map +0 -1
- package/dist/index137.js +0 -13
- package/dist/index137.js.map +0 -1
- package/dist/index138.js +0 -13
- package/dist/index138.js.map +0 -1
- package/dist/index139.js +0 -8
- package/dist/index139.js.map +0 -1
- package/dist/index140.js +0 -173
- package/dist/index140.js.map +0 -1
- package/dist/index141.js +0 -14
- package/dist/index141.js.map +0 -1
- package/dist/index142.js +0 -9
- package/dist/index142.js.map +0 -1
- package/dist/index143.js +0 -9
- package/dist/index143.js.map +0 -1
- package/dist/index145.js +0 -5
- package/dist/index145.js.map +0 -1
package/dist/index19.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index19.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n className?: string;\n automationId?: string;\n popoverContentAutomationId?: string;\n menuContent?: (data: any) => React.ReactNode;\n}\n\nconst menuClasses = {\n base: 'se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center',\n active: 'bg-[var(--color-blue-450)]',\n hover: 'hover:bg-[var(--color-blue-450)]'\n};\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n className = '',\n automationId = '',\n popoverContentAutomationId = '',\n menuContent\n}) => {\n\n return (\n <Popover\n className={className}\n position='bottom-left'\n automationId={automationId}\n popoverContentAutomationId={popoverContentAutomationId}\n renderPopoverSrcElement={({ displayPopover }) => (\n <div className={`${menuClasses.base} ${displayPopover ? menuClasses.active : ''} ${menuClasses.hover}`}>\n <Icon name='hamburger' stroke={'var(--color-white)'} />\n </div>\n )}\n renderPopoverContents={(data) => (\n <div className
|
1
|
+
{"version":3,"file":"index19.js","sources":["../src/components/HamburgerMenu/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Popover } from 'src/components/Popover';\nimport { Icon } from 'src/components/Icon';\nexport interface HamburgerMenuProps {\n className?: string;\n automationId?: string;\n popoverContentAutomationId?: string;\n menuContent?: (data: any) => React.ReactNode;\n popoverClassName?: string;\n}\n\nconst menuClasses = {\n base: 'se-design-hamburger-menu rounded-[6px] transition-all duration-300 p-[3px] flex items-center',\n active: 'bg-[var(--color-blue-450)]',\n hover: 'hover:bg-[var(--color-blue-450)]'\n};\n\nexport const HamburgerMenu: FC<HamburgerMenuProps> = ({\n className = '',\n automationId = '',\n popoverContentAutomationId = '',\n menuContent,\n popoverClassName = ''\n}) => {\n\n return (\n <Popover\n className={className}\n position='bottom-left'\n automationId={automationId}\n popoverContentAutomationId={popoverContentAutomationId}\n renderPopoverSrcElement={({ displayPopover }) => (\n <div className={`${menuClasses.base} ${displayPopover ? menuClasses.active : ''} ${menuClasses.hover}`}>\n <Icon name='hamburger' stroke={'var(--color-white)'} />\n </div>\n )}\n renderPopoverContents={(data) => (\n <div className={`min-w-[212px] ${popoverClassName}`}>\n {menuContent && <div className='menu-content'>{menuContent(data)}</div>}\n </div>\n )}\n />\n );\n};\n"],"names":["React__default","Popover","Icon","menuClasses","base","active","hover","HamburgerMenu","className","automationId","popoverContentAutomationId","menuContent","popoverClassName","React","createElement","position","renderPopoverSrcElement","displayPopover","name","stroke","renderPopoverContents","data"],"mappings":"AAYA,OAAAA,OAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAc;AAAA,EAClBC,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,OAAO;AACT,GAEaC,IAAwCA,CAAC;AAAA,EACpDC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,4BAAAA,IAA6B;AAAA,EAC7BC,aAAAA;AAAAA,EACAC,kBAAAA,IAAmB;AACrB,MAGIC,gBAAAA,EAAAC,cAACb,GAAO;AAAA,EACNO,WAAAA;AAAAA,EACAO,UAAS;AAAA,EACTN,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAM,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BH,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAW,GAAGL,EAAYC,IAAI,IAAIa,IAAiBd,EAAYE,SAAS,EAAE,IAAIF,EAAYG,KAAK;AAAA,EAAA,GAClGQ,gBAAAA,EAAAA,cAACZ,GAAI;AAAA,IAACgB,MAAK;AAAA,IAAYC,QAAQ;AAAA,EAAA,CAAuB,CACnD;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBP,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAW,iBAAiBI,CAAgB;AAAA,EAC9CD,GAAAA,KAAeG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKN,WAAU;AAAA,EAAA,GAAgBG,EAAYU,CAAI,CAAO,CACnE;AAAA,CAER;"}
|
package/dist/index26.js
CHANGED
@@ -1,49 +1,64 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
var E = Object.defineProperty;
|
2
|
+
var h = Object.getOwnPropertySymbols;
|
3
|
+
var N = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
|
4
|
+
var b = (a, t, e) => t in a ? E(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e, d = (a, t) => {
|
5
|
+
for (var e in t || (t = {}))
|
6
|
+
N.call(t, e) && b(a, e, t[e]);
|
7
|
+
if (h)
|
8
|
+
for (var e of h(t))
|
9
|
+
_.call(t, e) && b(a, e, t[e]);
|
10
|
+
return a;
|
11
|
+
};
|
12
|
+
import l, { useEffect as i } from "react";
|
13
|
+
import { Icon as x } from "./index5.js";
|
3
14
|
/* empty css */
|
4
|
-
const
|
15
|
+
const k = (a) => {
|
5
16
|
const {
|
6
|
-
content:
|
7
|
-
className:
|
8
|
-
alignment:
|
9
|
-
noShadow:
|
10
|
-
position:
|
11
|
-
isOpen:
|
12
|
-
displayCloseSidebar:
|
13
|
-
onClose:
|
14
|
-
onSidebarUnmount:
|
15
|
-
onPathChange:
|
16
|
-
style:
|
17
|
-
automationId:
|
18
|
-
currentPath:
|
19
|
-
closeSidebarIcon:
|
20
|
-
} =
|
21
|
-
|
22
|
-
|
23
|
-
}, []),
|
17
|
+
content: t,
|
18
|
+
className: e = "",
|
19
|
+
alignment: f,
|
20
|
+
noShadow: g,
|
21
|
+
position: s = "fixed",
|
22
|
+
isOpen: r,
|
23
|
+
displayCloseSidebar: p,
|
24
|
+
onClose: v,
|
25
|
+
onSidebarUnmount: c,
|
26
|
+
onPathChange: m,
|
27
|
+
style: o,
|
28
|
+
automationId: y,
|
29
|
+
currentPath: u = "",
|
30
|
+
closeSidebarIcon: w = "close"
|
31
|
+
} = a;
|
32
|
+
i(() => () => {
|
33
|
+
c && c();
|
34
|
+
}, []), i(() => (document.body.style.overflow = r ? "hidden" : "scroll", () => {
|
24
35
|
document.body.style.overflow = "auto";
|
25
|
-
}), [
|
26
|
-
|
27
|
-
}, [
|
28
|
-
const
|
29
|
-
let
|
30
|
-
return
|
31
|
-
}
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
36
|
+
}), [r]), i(() => {
|
37
|
+
m && m(u);
|
38
|
+
}, [u]);
|
39
|
+
const S = () => {
|
40
|
+
let n = "se-design-sidebar-overlay-container z-[1000]";
|
41
|
+
return n += e.length > 0 ? ` ${e}` : "", n += f === "left" ? " left-aligned" : " right-aligned", n += g ? " no-shadow" : "", n += s.length > 0 ? ` ${s}` : "", n += r ? " open-sidebar" : " closed-sidebar", n;
|
42
|
+
}, C = () => d(d({}, o), r && (o != null && o.width) ? {
|
43
|
+
width: o == null ? void 0 : o.width
|
44
|
+
} : {
|
45
|
+
width: "0px"
|
46
|
+
});
|
47
|
+
return /* @__PURE__ */ l.createElement("div", {
|
48
|
+
className: S(),
|
49
|
+
style: C(),
|
50
|
+
"data-automation-id": y
|
51
|
+
}, /* @__PURE__ */ l.createElement("div", {
|
37
52
|
className: "overlay-content"
|
38
|
-
},
|
53
|
+
}, p && /* @__PURE__ */ l.createElement("span", {
|
39
54
|
className: "overlay-close",
|
40
|
-
onClick:
|
55
|
+
onClick: v,
|
41
56
|
"data-automation-id": "sidebar_overlay_close"
|
42
|
-
}, /* @__PURE__ */
|
43
|
-
name:
|
44
|
-
})),
|
57
|
+
}, /* @__PURE__ */ l.createElement(x, {
|
58
|
+
name: w
|
59
|
+
})), t));
|
45
60
|
};
|
46
61
|
export {
|
47
|
-
|
62
|
+
k as SidebarOverlay
|
48
63
|
};
|
49
64
|
//# sourceMappingURL=index26.js.map
|
package/dist/index26.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index26.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { Icon } from 'components/Icon';\n\nimport './style.scss';\n\nexport interface SidebarOverlayProps {\n content: React.ReactNode;\n className?: string;\n alignment?: 'left' | 'right';\n style?: React.CSSProperties;\n noShadow?: boolean;\n automationId?: string;\n position?: '
|
1
|
+
{"version":3,"file":"index26.js","sources":["../src/components/SidebarOverlay/index.tsx"],"sourcesContent":["import React, { FC, useEffect } from 'react';\nimport { Icon } from 'components/Icon';\n\nimport './style.scss';\n\nexport interface SidebarOverlayProps {\n content: React.ReactNode;\n className?: string;\n alignment?: 'left' | 'right';\n style?: React.CSSProperties;\n noShadow?: boolean;\n automationId?: string;\n position?: 'absolute' | 'fixed' | 'relative' | 'static' | '';\n isOpen?: boolean;\n displayCloseSidebar?: boolean;\n closeSidebarIcon?: string;\n onClose?: () => void;\n onSidebarUnmount?: () => void;\n onPathChange?: (route: string) => void;\n currentPath?: string;\n}\n\nexport const SidebarOverlay: FC<SidebarOverlayProps> = (props) => {\n const { content, className = '', alignment, noShadow, position = 'fixed', isOpen, displayCloseSidebar, onClose, onSidebarUnmount, onPathChange, style, automationId, currentPath = '', closeSidebarIcon = 'close' } = props;\n\n useEffect(() => {\n return () => {\n onSidebarUnmount && onSidebarUnmount();\n };\n }, []);\n\n // This is to prevent the body from scrolling when the sidebar is open\n useEffect(() => {\n document.body.style.overflow = isOpen ? 'hidden' : 'scroll';\n\n return () => {\n document.body.style.overflow = 'auto'; // Cleanup on unmount\n };\n }, [isOpen]);\n\n useEffect(() => {\n onPathChange && onPathChange(currentPath);\n }, [currentPath]);\n\n const getSidebarClassName = () => {\n let defaultClass = 'se-design-sidebar-overlay-container z-[1000]';\n\n defaultClass += className.length > 0 ? ` ${className}` : '';\n defaultClass += alignment === 'left' ? ' left-aligned' : ' right-aligned';\n defaultClass += noShadow ? ' no-shadow' : '';\n defaultClass += position.length > 0 ? ` ${position}` : '';\n defaultClass += isOpen ? ' open-sidebar' : ' closed-sidebar';\n return defaultClass;\n };\n\n const getSidebarStyle = () => {\n return {\n ...style,\n ...(isOpen && style?.width ? { width: style?.width } : { width: '0px' })\n };\n };\n\n return (\n <div \n className={getSidebarClassName()} \n style={getSidebarStyle()} \n data-automation-id={automationId}\n >\n <div className=\"overlay-content\">\n {displayCloseSidebar && (\n <span className=\"overlay-close\" onClick={onClose} data-automation-id=\"sidebar_overlay_close\">\n <Icon name={closeSidebarIcon} />\n </span>\n )}\n {content}\n </div>\n </div>\n );\n};\n"],"names":["React__default","useEffect","Icon","SidebarOverlay","props","content","className","alignment","noShadow","position","isOpen","displayCloseSidebar","onClose","onSidebarUnmount","onPathChange","style","automationId","currentPath","closeSidebarIcon","document","body","overflow","getSidebarClassName","defaultClass","length","getSidebarStyle","__spreadValues","width","React","createElement","onClick","name"],"mappings":";;;;;;;;;;;AAsBO,OAAAA,KAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAA2CC,CAAUA,MAAA;AAC1D,QAAA;AAAA,IAAEC,SAAAA;AAAAA,IAASC,WAAAA,IAAY;AAAA,IAAIC,WAAAA;AAAAA,IAAWC,UAAAA;AAAAA,IAAUC,UAAAA,IAAW;AAAA,IAASC,QAAAA;AAAAA,IAAQC,qBAAAA;AAAAA,IAAqBC,SAAAA;AAAAA,IAASC,kBAAAA;AAAAA,IAAkBC,cAAAA;AAAAA,IAAcC,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,IAAcC,aAAAA,IAAc;AAAA,IAAIC,kBAAAA,IAAmB;AAAA,EAAA,IAAYd;AAEtNH,EAAAA,EAAU,MACD,MAAM;AACXY,IAAAA,KAAoBA,EAAiB;AAAA,EACvC,GACC,EAAE,GAGLZ,EAAU,OACRkB,SAASC,KAAKL,MAAMM,WAAWX,IAAS,WAAW,UAE5C,MAAM;AACFU,aAAAA,KAAKL,MAAMM,WAAW;AAAA,EACjC,IACC,CAACX,CAAM,CAAC,GAEXT,EAAU,MAAM;AACda,IAAAA,KAAgBA,EAAaG,CAAW;AAAA,EAAA,GACvC,CAACA,CAAW,CAAC;AAEhB,QAAMK,IAAsBA,MAAM;AAChC,QAAIC,IAAe;AAEnBA,WAAAA,KAAgBjB,EAAUkB,SAAS,IAAI,IAAIlB,CAAS,KAAK,IACzCC,KAAAA,MAAc,SAAS,kBAAkB,kBACzDgB,KAAgBf,IAAW,eAAe,IAC1Ce,KAAgBd,EAASe,SAAS,IAAI,IAAIf,CAAQ,KAAK,IACvDc,KAAgBb,IAAS,kBAAkB,mBACpCa;AAAAA,EACT,GAEME,IAAkBA,MACfC,IAAA,IACFX,IACCL,MAAUK,KAAAA,QAAAA,EAAOY,SAAQ;AAAA,IAAEA,OAAOZ,KAAAA,gBAAAA,EAAOY;AAAAA,EAAAA,IAAU;AAAA,IAAEA,OAAO;AAAA,EAAA;AAKlEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEvB,WAAWgB,EAAoB;AAAA,IAC/BP,OAAOU,EAAgB;AAAA,IACvB,sBAAoBT;AAAAA,EAAAA,GAEpBa,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EACZK,GAAAA,KACCkB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMvB,WAAU;AAAA,IAAgBwB,SAASlB;AAAAA,IAAS,sBAAmB;AAAA,EAAA,GACnEiB,gBAAAA,EAAAA,cAAC3B,GAAI;AAAA,IAAC6B,MAAMb;AAAAA,EAAAA,CAAmB,CAC3B,GAEPb,CACE,CACF;AAET;"}
|
package/dist/index31.js
CHANGED
@@ -1,54 +1,54 @@
|
|
1
|
-
var f = Object.defineProperty,
|
2
|
-
var
|
3
|
-
var
|
4
|
-
var
|
5
|
-
var
|
1
|
+
var f = Object.defineProperty, $ = Object.defineProperties;
|
2
|
+
var E = Object.getOwnPropertyDescriptors;
|
3
|
+
var s = Object.getOwnPropertySymbols;
|
4
|
+
var v = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
|
5
|
+
var d = (e, a, t) => a in e ? f(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, m = (e, a) => {
|
6
6
|
for (var t in a || (a = {}))
|
7
|
-
|
8
|
-
if (
|
9
|
-
for (var t of
|
10
|
-
|
7
|
+
v.call(a, t) && d(e, t, a[t]);
|
8
|
+
if (s)
|
9
|
+
for (var t of s(a))
|
10
|
+
C.call(a, t) && d(e, t, a[t]);
|
11
11
|
return e;
|
12
|
-
},
|
13
|
-
import r, { useRef as
|
14
|
-
function
|
12
|
+
}, u = (e, a) => $(e, E(a));
|
13
|
+
import r, { useRef as N } from "react";
|
14
|
+
function y(e) {
|
15
15
|
const {
|
16
16
|
label: a,
|
17
17
|
value: t,
|
18
|
-
checked:
|
19
|
-
disabled:
|
20
|
-
name:
|
21
|
-
onChange:
|
18
|
+
checked: o,
|
19
|
+
disabled: l,
|
20
|
+
name: h,
|
21
|
+
onChange: c,
|
22
22
|
width: b,
|
23
23
|
radioLabelClassName: x = "",
|
24
24
|
radioContainerClassName: w = ""
|
25
|
-
} = e,
|
25
|
+
} = e, n = N(null);
|
26
26
|
return /* @__PURE__ */ r.createElement("div", {
|
27
|
-
className: `flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${
|
27
|
+
className: `flex items-start gap-2 ${l ? "cursor-not-allowed" : "cursor-pointer"} bg-[var(--color-white)] border ${o ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] p-2 transition-colors duration-300 ${l ? "opacity-50" : ""} ${w}`,
|
28
28
|
onClick: () => {
|
29
|
-
var
|
30
|
-
return (
|
29
|
+
var i;
|
30
|
+
return (i = n.current) == null ? void 0 : i.click();
|
31
31
|
},
|
32
32
|
style: {
|
33
33
|
width: b || "20vw"
|
34
34
|
}
|
35
35
|
}, /* @__PURE__ */ r.createElement("input", {
|
36
|
-
ref:
|
36
|
+
ref: n,
|
37
37
|
type: "radio",
|
38
38
|
id: t,
|
39
|
-
name:
|
39
|
+
name: h,
|
40
40
|
value: t,
|
41
|
-
checked:
|
42
|
-
disabled:
|
41
|
+
checked: o,
|
42
|
+
disabled: l,
|
43
43
|
className: "mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50",
|
44
44
|
onChange: () => {
|
45
|
-
|
45
|
+
c && c(u(m({}, e), {
|
46
46
|
checked: !0
|
47
47
|
}));
|
48
48
|
}
|
49
49
|
}), /* @__PURE__ */ r.createElement("label", {
|
50
50
|
htmlFor: t,
|
51
|
-
className: `${e.helperLabel && "flex flex-col"} cursor-pointer`
|
51
|
+
className: `${e.helperLabel && "flex flex-col"} ${l ? "cursor-not-allowed" : "cursor-pointer"}`
|
52
52
|
}, /* @__PURE__ */ r.createElement("span", {
|
53
53
|
className: `text-sm text-[var(--color-gray-800)] ${x}`
|
54
54
|
}, a), e.helperLabel && /* @__PURE__ */ r.createElement("span", {
|
@@ -56,6 +56,6 @@ function p(e) {
|
|
56
56
|
}, e.helperLabel)));
|
57
57
|
}
|
58
58
|
export {
|
59
|
-
|
59
|
+
y as Radio
|
60
60
|
};
|
61
61
|
//# sourceMappingURL=index31.js.map
|
package/dist/index31.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n label: string;\n value: string;\n checked: boolean;\n disabled: boolean;\n name: string;\n onChange?: (props: RadioProps) => void;\n helperLabel?: string;\n maxWidth?: string;\n width?: string;\n radioLabelClassName?: string;\n radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n const {\n label,\n value,\n checked,\n disabled,\n name,\n onChange,\n width,\n radioLabelClassName = '',\n radioContainerClassName = ''\n } = props;\n const radioRef = useRef<HTMLInputElement>(null);\n\n return (\n <div\n className={`flex items-start gap-2 cursor-pointer bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300 ${radioContainerClassName}`}\n onClick={() => radioRef.current?.click()}\n style={{ width: width || '20vw' }}\n >\n <input\n ref={radioRef}\n type=\"radio\"\n id={value}\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n className=\"mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n onChange={() => {\n onChange && onChange({ ...props, checked: true });\n }}\n />\n <label
|
1
|
+
{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n label: string;\n value: string;\n checked: boolean;\n disabled: boolean;\n name: string;\n onChange?: (props: RadioProps) => void;\n helperLabel?: string;\n maxWidth?: string;\n width?: string;\n radioLabelClassName?: string;\n radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n const {\n label,\n value,\n checked,\n disabled,\n name,\n onChange,\n width,\n radioLabelClassName = '',\n radioContainerClassName = ''\n } = props;\n const radioRef = useRef<HTMLInputElement>(null);\n\n return (\n <div\n className={`flex items-start gap-2 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] p-2 transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n onClick={() => radioRef.current?.click()}\n style={{ width: width || '20vw' }}\n >\n <input\n ref={radioRef}\n type=\"radio\"\n id={value}\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n className=\"mt-1 h-4 w-4 cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n onChange={() => {\n onChange && onChange({ ...props, checked: true });\n }}\n />\n <label\n htmlFor={value}\n className={`${props.helperLabel && 'flex flex-col'} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}\n >\n <span className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName}`}>{label}</span>\n {props.helperLabel && (\n <span\n className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n >\n {props.helperLabel}\n </span>\n )}\n </label>\n </div>\n );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","ref","type","id","__spreadProps","__spreadValues","htmlFor","helperLabel","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,0BAA0BV,IAAW,uBAAuB,gBAAgB,mCAAmCD,IAAU,qBAAqB,kBAAkB,qDAAqDC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACvRM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEM,KAAKT;AAAAA,IACLU,MAAK;AAAA,IACLC,IAAInB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVR,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASgB,EAAAC,EAAA,IAAKvB,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEW,SAAStB;AAAAA,IACTY,WAAW,GAAGd,EAAMyB,eAAe,eAAe,IAAIrB,IAAW,uBAAuB,gBAAgB;AAAA,EAAA,GAExGS,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW,wCAAwCN,CAAmB;AAAA,EAAA,GAAKP,CAAY,GAC5FD,EAAMyB,eACLb,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAM0B,WAAW,UAAU1B,EAAM0B,QAAQ,MAAM,cAAc;AAAA,EAAA,GAE/G1B,EAAMyB,WACH,CAEH,CACJ;AAET;"}
|
package/dist/index32.js
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
var d = Object.defineProperty, m = Object.defineProperties;
|
2
|
-
var
|
3
|
-
var
|
4
|
-
var g = Object.prototype.hasOwnProperty,
|
2
|
+
var f = Object.getOwnPropertyDescriptors;
|
3
|
+
var l = Object.getOwnPropertySymbols;
|
4
|
+
var g = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
|
5
5
|
var o = (n, a, e) => a in n ? d(n, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[a] = e, c = (n, a) => {
|
6
6
|
for (var e in a || (a = {}))
|
7
7
|
g.call(a, e) && o(n, e, a[e]);
|
8
|
-
if (
|
9
|
-
for (var e of
|
10
|
-
|
8
|
+
if (l)
|
9
|
+
for (var e of l(a))
|
10
|
+
s.call(a, e) && o(n, e, a[e]);
|
11
11
|
return n;
|
12
|
-
},
|
12
|
+
}, u = (n, a) => m(n, f(a));
|
13
13
|
import i from "react";
|
14
14
|
import { Radio as h } from "./index31.js";
|
15
15
|
function t() {
|
@@ -23,12 +23,12 @@ function t() {
|
|
23
23
|
}
|
24
24
|
function b(n) {
|
25
25
|
const a = (e) => {
|
26
|
-
n.onRadioGroupChange(
|
26
|
+
n.onRadioGroupChange(u(c({}, e), {
|
27
27
|
checked: !0
|
28
28
|
}));
|
29
29
|
};
|
30
30
|
return /* @__PURE__ */ i.createElement("div", {
|
31
|
-
className:
|
31
|
+
className: `flex gap-2 ${n.direction === "column" ? "flex-col" : "flex-row"}`
|
32
32
|
}, n.options.map((e) => /* @__PURE__ */ i.createElement(h, t({
|
33
33
|
key: e.value
|
34
34
|
}, e, {
|
package/dist/index32.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index32.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n options: RadioProps[];\n onRadioGroupChange: (obj: RadioProps) => void;\n value?: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n const handleRadioChange = (obj: RadioProps) => {\n props.onRadioGroupChange({ ...obj, checked: true });\n };\n return (\n <div className
|
1
|
+
{"version":3,"file":"index32.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n options: RadioProps[];\n onRadioGroupChange: (obj: RadioProps) => void;\n value?: string;\n direction?: 'row' | 'column';\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n const handleRadioChange = (obj: RadioProps) => {\n props.onRadioGroupChange({ ...obj, checked: true });\n };\n return (\n <div className={`flex gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`}>\n {props.options.map((option) => (\n <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} />\n ))}\n </div>\n );\n}\n"],"names":["RadioGroup","props","handleRadioChange","obj","onRadioGroupChange","__spreadProps","__spreadValues","checked","React","createElement","className","direction","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAWC,GAAwB;AAC3CC,QAAAA,IAAoBA,CAACC,MAAoB;AAC7CF,IAAAA,EAAMG,mBAAmBC,EAAAC,EAAA,IAAKH,IAAL;AAAA,MAAUI,SAAS;AAAA,IAAA,EAAM;AAAA,EACpD;AAEEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,cAAcT,EAAMU,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GACjFV,EAAMW,QAAQC,IAAKC,OAClBL,gBAAAA,EAAAA,cAACM,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUjB;AAAAA,IAAmBK,SAASO,EAAOI,UAAUjB,EAAMiB;AAAAA,EAAQ,CAAA,CAAA,CAC5G,CACE;AAET;"}
|
package/dist/index37.js
CHANGED
@@ -1,22 +1,26 @@
|
|
1
|
-
import
|
1
|
+
import n, { useState as h, useRef as $, useEffect as s, useMemo as z } from "react";
|
2
2
|
import { Icon as g } from "./index5.js";
|
3
|
-
import { LabelChip as
|
4
|
-
import { debounce as
|
3
|
+
import { LabelChip as D } from "./index9.js";
|
4
|
+
import { debounce as F } from "./index136.js";
|
5
5
|
/* empty css */
|
6
|
-
function
|
6
|
+
function q(r) {
|
7
7
|
const {
|
8
|
-
disabled:
|
9
|
-
placeholder:
|
8
|
+
disabled: v = !1,
|
9
|
+
placeholder: N = "Search",
|
10
10
|
debounceDuration: f = 500,
|
11
11
|
onInputChange: l = () => {
|
12
12
|
},
|
13
|
-
onSearchClear:
|
13
|
+
onSearchClear: S = () => {
|
14
|
+
},
|
15
|
+
onChipRemove: I = () => {
|
14
16
|
},
|
15
17
|
updateSearchString: i = "",
|
16
18
|
collapsible: p = !1,
|
17
|
-
width:
|
18
|
-
chips: m = []
|
19
|
-
|
19
|
+
width: k = "200px",
|
20
|
+
chips: m = [],
|
21
|
+
showSearchIcon: w = !0,
|
22
|
+
renderFilterComponent: b = null
|
23
|
+
} = r, [t, d] = h(""), [o, E] = h(!(r != null && r.collapsible)), [a, x] = h(m || []), c = $(null);
|
20
24
|
s(() => {
|
21
25
|
o && c.current && setTimeout(() => {
|
22
26
|
var e;
|
@@ -27,55 +31,59 @@ function T(r) {
|
|
27
31
|
}, [i]), s(() => {
|
28
32
|
x(m);
|
29
33
|
}, [m]);
|
30
|
-
const u =
|
34
|
+
const u = z(() => F(l, f), [l, f]);
|
31
35
|
s(() => () => {
|
32
36
|
u.cancel();
|
33
37
|
}, [u]);
|
34
|
-
const
|
38
|
+
const y = (e) => {
|
35
39
|
d(e), u(e);
|
36
|
-
},
|
37
|
-
d(""), l(""),
|
38
|
-
},
|
39
|
-
p && (t == null ? void 0 : t.trimEnd()) === "" &&
|
40
|
-
},
|
41
|
-
x(
|
42
|
-
},
|
43
|
-
return /* @__PURE__ */
|
40
|
+
}, B = () => {
|
41
|
+
d(""), l(""), S();
|
42
|
+
}, H = () => {
|
43
|
+
p && (t == null ? void 0 : t.trimEnd()) === "" && E(!1);
|
44
|
+
}, _ = (e) => {
|
45
|
+
x(a.filter((R) => R !== e)), I(e);
|
46
|
+
}, C = (a == null ? void 0 : a.length) > 0;
|
47
|
+
return /* @__PURE__ */ n.createElement("div", {
|
44
48
|
className: `se-search-box ${o ? "expand-box" : "shrink-box"}`,
|
45
49
|
style: {
|
46
|
-
width:
|
50
|
+
width: k
|
47
51
|
}
|
48
|
-
}, o && /* @__PURE__ */
|
49
|
-
className:
|
50
|
-
},
|
52
|
+
}, o && /* @__PURE__ */ n.createElement("div", {
|
53
|
+
className: "search-box-container"
|
54
|
+
}, /* @__PURE__ */ n.createElement("div", {
|
55
|
+
className: `chips-and-search-box-container${C ? " has-chips" : ""}`
|
56
|
+
}, C && (a == null ? void 0 : a.map((e) => /* @__PURE__ */ n.createElement(D, {
|
51
57
|
key: e,
|
52
58
|
label: e,
|
53
59
|
icon: "close",
|
54
|
-
onIconClick: () =>
|
55
|
-
size: "
|
56
|
-
}))), /* @__PURE__ */
|
60
|
+
onIconClick: () => _(e),
|
61
|
+
size: "lg"
|
62
|
+
}))), /* @__PURE__ */ n.createElement("div", {
|
57
63
|
className: "search-input-container"
|
58
|
-
}, /* @__PURE__ */
|
64
|
+
}, w && /* @__PURE__ */ n.createElement(g, {
|
59
65
|
name: "search",
|
60
66
|
className: "search-icon img-wrap",
|
61
|
-
onClick: () => p &&
|
62
|
-
}), /* @__PURE__ */
|
67
|
+
onClick: () => p && E((e) => !e)
|
68
|
+
}), /* @__PURE__ */ n.createElement("input", {
|
63
69
|
ref: c,
|
64
70
|
className: "search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0",
|
65
71
|
id: "search_bar",
|
66
72
|
type: "text",
|
67
|
-
placeholder:
|
68
|
-
onChange: (e) =>
|
73
|
+
placeholder: N,
|
74
|
+
onChange: (e) => y(e.target.value),
|
69
75
|
value: t,
|
70
|
-
disabled:
|
71
|
-
onBlur:
|
72
|
-
}), !!t && /* @__PURE__ */
|
76
|
+
disabled: v,
|
77
|
+
onBlur: H
|
78
|
+
}), !!t && /* @__PURE__ */ n.createElement(g, {
|
73
79
|
name: "close",
|
74
80
|
className: "cross-icon img-wrap",
|
75
|
-
onClick:
|
76
|
-
})))
|
81
|
+
onClick: B
|
82
|
+
}))), b && /* @__PURE__ */ n.createElement("div", {
|
83
|
+
className: "filter-component-container"
|
84
|
+
}, b())));
|
77
85
|
}
|
78
86
|
export {
|
79
|
-
|
87
|
+
q as SearchBox
|
80
88
|
};
|
81
89
|
//# sourceMappingURL=index37.js.map
|
package/dist/index37.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index37.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\n\nexport interface SearchBoxProps {\n
|
1
|
+
{"version":3,"file":"index37.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\n\nexport interface SearchBoxProps {\n disabled?: boolean;\n placeholder?: string;\n debounceDuration?: number;\n onInputChange?: (value: string) => void;\n onSearchClear?: () => void;\n onChipRemove?: (chip: string) => void;\n updateSearchString?: string;\n collapsible?: boolean;\n width?: string;\n chips?: string[];\n showSearchIcon?: boolean;\n renderFilterComponent?: () => React.ReactNode;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n const {\n disabled = false,\n placeholder = 'Search',\n debounceDuration = 500,\n onInputChange = () => {},\n onSearchClear = () => {},\n onChipRemove = () => {},\n updateSearchString = '',\n collapsible = false,\n width = '200px',\n chips = [],\n showSearchIcon = true,\n renderFilterComponent = null\n } = props;\n const [inputValue, setInputValue] = useState('');\n const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n const [searchChips, setSearchChips] = useState<string[]>(chips || []);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (isExpanded && inputRef.current) {\n setTimeout(() => inputRef?.current?.focus(), 0);\n }\n }, [isExpanded]);\n\n // Manually update the searchbox text\n useEffect(() => {\n if (updateSearchString !== inputValue) {\n setInputValue(updateSearchString);\n }\n }, [updateSearchString]);\n\n useEffect(() => {\n setSearchChips(chips);\n }, [chips]);\n\n const debouncedOnInputChange = useMemo(\n () => debounce(onInputChange, debounceDuration),\n [onInputChange, debounceDuration]\n );\n\n useEffect(() => {\n return () => {\n debouncedOnInputChange.cancel();\n };\n }, [debouncedOnInputChange]);\n\n const onChangeHandler = (value: string) => {\n setInputValue(value);\n debouncedOnInputChange(value);\n };\n\n const iconClickHandler = () => {\n setInputValue('');\n onInputChange('');\n onSearchClear();\n };\n\n const onBlurHandler = () => {\n if (collapsible && inputValue?.trimEnd() === '') {\n setIsExpanded(false);\n }\n };\n\n const removeChip = (chip: string) => {\n setSearchChips(searchChips.filter((c) => c !== chip));\n onChipRemove(chip);\n };\n\n const hasChips = searchChips?.length > 0;\n\n return (\n <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }}>\n {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n {isExpanded && (\n <div className=\"search-box-container\">\n <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n {hasChips &&\n searchChips?.map((chip) => (\n <LabelChip key={chip} label={chip} icon=\"close\" onIconClick={() => removeChip(chip)} size=\"lg\" />\n ))}\n <div className=\"search-input-container\">\n {showSearchIcon && (\n <Icon\n name=\"search\"\n className=\"search-icon img-wrap\"\n onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n />\n )}\n <input\n ref={inputRef}\n className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n id=\"search_bar\"\n type=\"text\"\n placeholder={placeholder}\n onChange={(e) => onChangeHandler(e.target.value)}\n value={inputValue}\n disabled={disabled}\n onBlur={onBlurHandler}\n />\n {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n </div>\n </div>\n {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n </div>\n )}\n </div>\n );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","size","Icon","name","onClick","prev","ref","id","type","onChange","e","target","onBlur"],"mappings":"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"}
|
package/dist/index42.js
CHANGED
@@ -9,7 +9,7 @@ var b = (e, t, a) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writab
|
|
9
9
|
h.call(t, a) && b(e, a, t[a]);
|
10
10
|
return e;
|
11
11
|
};
|
12
|
-
var
|
12
|
+
var S = (e, t) => {
|
13
13
|
var a = {};
|
14
14
|
for (var l in e)
|
15
15
|
x.call(e, l) && t.indexOf(l) < 0 && (a[l] = e[l]);
|
@@ -18,23 +18,23 @@ var $ = (e, t) => {
|
|
18
18
|
t.indexOf(l) < 0 && h.call(e, l) && (a[l] = e[l]);
|
19
19
|
return a;
|
20
20
|
};
|
21
|
-
import
|
21
|
+
import n, { useRef as q, useEffect as $ } from "react";
|
22
22
|
/* empty css */
|
23
|
-
const J = /* @__PURE__ */
|
23
|
+
const J = /* @__PURE__ */ n.memo((z) => {
|
24
24
|
var N = z, {
|
25
25
|
value: e,
|
26
26
|
onChange: t,
|
27
27
|
disabled: a = !1,
|
28
28
|
maxLength: l,
|
29
|
-
tag:
|
29
|
+
tag: y = "input",
|
30
30
|
error: s = !1,
|
31
|
-
errorMessage:
|
31
|
+
errorMessage: B,
|
32
32
|
label: E,
|
33
|
-
placeholder:
|
33
|
+
placeholder: L,
|
34
34
|
suggestions: i = [],
|
35
35
|
customRenderSuggestions: o,
|
36
36
|
onSuggestionClick: v
|
37
|
-
} = N, _ =
|
37
|
+
} = N, _ = S(N, [
|
38
38
|
"value",
|
39
39
|
"onChange",
|
40
40
|
"disabled",
|
@@ -48,62 +48,62 @@ const J = /* @__PURE__ */ r.memo((z) => {
|
|
48
48
|
"customRenderSuggestions",
|
49
49
|
"onSuggestionClick"
|
50
50
|
]);
|
51
|
-
const [d, f] =
|
52
|
-
const
|
51
|
+
const [d, f] = n.useState([...i]), [A, u] = n.useState(!1), p = q(null), F = n.useCallback((c) => {
|
52
|
+
const r = c.target.value;
|
53
53
|
if (o)
|
54
|
-
t(
|
55
|
-
else if (t(
|
54
|
+
t(r, !1);
|
55
|
+
else if (t(r), r === "")
|
56
56
|
f([...i]);
|
57
|
-
else if (
|
57
|
+
else if (r) {
|
58
58
|
const V = i == null ? void 0 : i.filter((C) => {
|
59
59
|
var k;
|
60
|
-
return typeof C == "string" && C.toLowerCase().includes((k =
|
60
|
+
return typeof C == "string" && C.toLowerCase().includes((k = r == null ? void 0 : r.toLowerCase()) != null ? k : "");
|
61
61
|
});
|
62
|
-
f(V);
|
62
|
+
f([...V]);
|
63
63
|
}
|
64
64
|
}, [t, i, o]);
|
65
|
-
|
66
|
-
|
67
|
-
}, [i]),
|
68
|
-
const c = (
|
69
|
-
|
65
|
+
$(() => {
|
66
|
+
f([...i]);
|
67
|
+
}, [i]), $(() => {
|
68
|
+
const c = (r) => {
|
69
|
+
p.current && !p.current.contains(r.target) && u(!1);
|
70
70
|
};
|
71
71
|
return document.addEventListener("mousedown", c), () => {
|
72
72
|
document.removeEventListener("mousedown", c);
|
73
73
|
};
|
74
74
|
}, []);
|
75
75
|
const O = () => {
|
76
|
-
|
76
|
+
u(!0);
|
77
77
|
}, w = (c) => {
|
78
|
-
t(c, !0),
|
78
|
+
t(c, !0), u(!1), v && v(c);
|
79
79
|
};
|
80
|
-
return /* @__PURE__ */
|
80
|
+
return /* @__PURE__ */ n.createElement("div", {
|
81
81
|
className: "main-container-autocomplete-se-design",
|
82
|
-
ref:
|
83
|
-
}, E && /* @__PURE__ */
|
82
|
+
ref: p
|
83
|
+
}, E && /* @__PURE__ */ n.createElement("label", {
|
84
84
|
className: "label-container"
|
85
|
-
}, E), /* @__PURE__ */
|
85
|
+
}, E), /* @__PURE__ */ n.createElement(y, I({
|
86
86
|
value: e,
|
87
87
|
onChange: F,
|
88
88
|
onClick: O,
|
89
89
|
disabled: a,
|
90
90
|
className: `${s ? "input-container-error" : "input-container-default"} ${a ? "input-container-disabled" : ""}`,
|
91
91
|
maxLength: l,
|
92
|
-
placeholder:
|
93
|
-
}, _)), /* @__PURE__ */
|
92
|
+
placeholder: L
|
93
|
+
}, _)), A && d.length > 0 && /* @__PURE__ */ n.createElement("div", {
|
94
|
+
className: "suggestions-list"
|
95
|
+
}, o ? o(d, w) : d.map((c, r) => /* @__PURE__ */ n.createElement("div", {
|
96
|
+
key: r,
|
97
|
+
className: "suggestion-item",
|
98
|
+
onClick: () => w(c)
|
99
|
+
}, c))), /* @__PURE__ */ n.createElement("div", {
|
94
100
|
className: `${s ? "error-and-max-word" : "max-word-container"}`
|
95
|
-
}, s && /* @__PURE__ */
|
101
|
+
}, s && /* @__PURE__ */ n.createElement("div", {
|
96
102
|
id: "error-message",
|
97
103
|
className: "error-message"
|
98
|
-
},
|
104
|
+
}, B), l && /* @__PURE__ */ n.createElement("div", {
|
99
105
|
className: "max-word"
|
100
|
-
}, e.length, "/", l))
|
101
|
-
className: "suggestions-list"
|
102
|
-
}, o ? o(d, w) : d.map((c, n) => /* @__PURE__ */ r.createElement("div", {
|
103
|
-
key: n,
|
104
|
-
className: "suggestion-item",
|
105
|
-
onClick: () => w(c)
|
106
|
-
}, c))));
|
106
|
+
}, e.length, "/", l)));
|
107
107
|
});
|
108
108
|
export {
|
109
109
|
J as AutoCompleteInput
|