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.
Files changed (260) hide show
  1. package/dist/assets/icons/all-space.svg +12 -0
  2. package/dist/assets/icons/checked-circle.svg +8 -6
  3. package/dist/assets/icons/csv.svg +20 -0
  4. package/dist/assets/icons/gmail.svg +7 -0
  5. package/dist/assets/icons/hashtag.svg +6 -0
  6. package/dist/assets/icons/info.svg +10 -6
  7. package/dist/assets/icons/onedrive.svg +6 -0
  8. package/dist/assets/icons/outlook.svg +39 -0
  9. package/dist/assets/icons/shipment-private.svg +7 -0
  10. package/dist/assets/style.css +1 -1
  11. package/dist/components/DatePicker/index.d.ts +17 -0
  12. package/dist/components/HamburgerMenu/index.d.ts +1 -0
  13. package/dist/components/Icon/index.d.ts +1 -0
  14. package/dist/components/MenuItem/index.d.ts +1 -0
  15. package/dist/components/RadioGroup/index.d.ts +1 -0
  16. package/dist/components/SearchBox/index.d.ts +3 -0
  17. package/dist/components/SidebarOverlay/index.d.ts +1 -1
  18. package/dist/components/index.d.ts +1 -0
  19. package/dist/index.js +28 -26
  20. package/dist/index.js.map +1 -1
  21. package/dist/index100.js +1 -1
  22. package/dist/index100.js.map +1 -1
  23. package/dist/index101.js +1 -1
  24. package/dist/index101.js.map +1 -1
  25. package/dist/index102.js +1 -1
  26. package/dist/index102.js.map +1 -1
  27. package/dist/index103.js +1 -1
  28. package/dist/index103.js.map +1 -1
  29. package/dist/index104.js +1 -1
  30. package/dist/index104.js.map +1 -1
  31. package/dist/index105.js +1 -1
  32. package/dist/index105.js.map +1 -1
  33. package/dist/index106.js +2 -2
  34. package/dist/index106.js.map +1 -1
  35. package/dist/index107.js +1 -1
  36. package/dist/index107.js.map +1 -1
  37. package/dist/index108.js +2 -2
  38. package/dist/index108.js.map +1 -1
  39. package/dist/index109.js +1 -1
  40. package/dist/index109.js.map +1 -1
  41. package/dist/index110.js +1 -1
  42. package/dist/index110.js.map +1 -1
  43. package/dist/index111.js +1 -1
  44. package/dist/index111.js.map +1 -1
  45. package/dist/index112.js +1 -1
  46. package/dist/index112.js.map +1 -1
  47. package/dist/index113.js +1 -1
  48. package/dist/index113.js.map +1 -1
  49. package/dist/index114.js +2 -2
  50. package/dist/index114.js.map +1 -1
  51. package/dist/index115.js +1 -1
  52. package/dist/index115.js.map +1 -1
  53. package/dist/index116.js +1 -1
  54. package/dist/index116.js.map +1 -1
  55. package/dist/index117.js +2 -149
  56. package/dist/index117.js.map +1 -1
  57. package/dist/index118.js +5 -0
  58. package/dist/index118.js.map +1 -0
  59. package/dist/index119.js +5 -0
  60. package/dist/index119.js.map +1 -0
  61. package/dist/index120.js +5 -0
  62. package/dist/index120.js.map +1 -0
  63. package/dist/index121.js +5 -0
  64. package/dist/index121.js.map +1 -0
  65. package/dist/index122.js +5 -0
  66. package/dist/index122.js.map +1 -0
  67. package/dist/index123.js +5 -0
  68. package/dist/index123.js.map +1 -0
  69. package/dist/index124.js +5 -0
  70. package/dist/index124.js.map +1 -0
  71. package/dist/index125.js +152 -0
  72. package/dist/index125.js.map +1 -0
  73. package/dist/index136.js +12 -1233
  74. package/dist/index136.js.map +1 -1
  75. package/dist/index144.js +1232 -37
  76. package/dist/index144.js.map +1 -1
  77. package/dist/index146.js +9 -7
  78. package/dist/index146.js.map +1 -1
  79. package/dist/index147.js +9 -326
  80. package/dist/index147.js.map +1 -1
  81. package/dist/index148.js +4 -49
  82. package/dist/index148.js.map +1 -1
  83. package/dist/index149.js +170 -2
  84. package/dist/index149.js.map +1 -1
  85. package/dist/index15.js +21 -17
  86. package/dist/index15.js.map +1 -1
  87. package/dist/index150.js +11 -76
  88. package/dist/index150.js.map +1 -1
  89. package/dist/index151.js +5 -92
  90. package/dist/index151.js.map +1 -1
  91. package/dist/index152.js +5 -51
  92. package/dist/index152.js.map +1 -1
  93. package/dist/index153.js +37 -7
  94. package/dist/index153.js.map +1 -1
  95. package/dist/index154.js +2 -5
  96. package/dist/index154.js.map +1 -1
  97. package/dist/index155.js +7 -51
  98. package/dist/index155.js.map +1 -1
  99. package/dist/index156.js +327 -2
  100. package/dist/index156.js.map +1 -1
  101. package/dist/index157.js +50 -2
  102. package/dist/index157.js.map +1 -1
  103. package/dist/index158.js +5 -0
  104. package/dist/index158.js.map +1 -0
  105. package/dist/index159.js +79 -0
  106. package/dist/index159.js.map +1 -0
  107. package/dist/index160.js +96 -0
  108. package/dist/index160.js.map +1 -0
  109. package/dist/index161.js +55 -0
  110. package/dist/index161.js.map +1 -0
  111. package/dist/index162.js +11 -0
  112. package/dist/index162.js.map +1 -0
  113. package/dist/index163.js +8 -0
  114. package/dist/index163.js.map +1 -0
  115. package/dist/index164.js +55 -0
  116. package/dist/index164.js.map +1 -0
  117. package/dist/index165.js +5 -0
  118. package/dist/index165.js.map +1 -0
  119. package/dist/index166.js +5 -0
  120. package/dist/index166.js.map +1 -0
  121. package/dist/index19.js +9 -8
  122. package/dist/index19.js.map +1 -1
  123. package/dist/index26.js +54 -39
  124. package/dist/index26.js.map +1 -1
  125. package/dist/index31.js +27 -27
  126. package/dist/index31.js.map +1 -1
  127. package/dist/index32.js +9 -9
  128. package/dist/index32.js.map +1 -1
  129. package/dist/index37.js +46 -38
  130. package/dist/index37.js.map +1 -1
  131. package/dist/index42.js +36 -36
  132. package/dist/index42.js.map +1 -1
  133. package/dist/index43.js +1 -1
  134. package/dist/index48.js +292 -2
  135. package/dist/index48.js.map +1 -1
  136. package/dist/index49.js +1 -1
  137. package/dist/index49.js.map +1 -1
  138. package/dist/index5.js +133 -118
  139. package/dist/index5.js.map +1 -1
  140. package/dist/index50.js +1 -1
  141. package/dist/index50.js.map +1 -1
  142. package/dist/index51.js +1 -1
  143. package/dist/index51.js.map +1 -1
  144. package/dist/index52.js +1 -1
  145. package/dist/index52.js.map +1 -1
  146. package/dist/index53.js +1 -1
  147. package/dist/index53.js.map +1 -1
  148. package/dist/index54.js +1 -1
  149. package/dist/index54.js.map +1 -1
  150. package/dist/index55.js +1 -1
  151. package/dist/index55.js.map +1 -1
  152. package/dist/index56.js +1 -1
  153. package/dist/index56.js.map +1 -1
  154. package/dist/index57.js +1 -1
  155. package/dist/index57.js.map +1 -1
  156. package/dist/index58.js +1 -1
  157. package/dist/index58.js.map +1 -1
  158. package/dist/index59.js +1 -1
  159. package/dist/index59.js.map +1 -1
  160. package/dist/index60.js +1 -1
  161. package/dist/index60.js.map +1 -1
  162. package/dist/index61.js +2 -2
  163. package/dist/index61.js.map +1 -1
  164. package/dist/index62.js +1 -1
  165. package/dist/index62.js.map +1 -1
  166. package/dist/index63.js +1 -1
  167. package/dist/index63.js.map +1 -1
  168. package/dist/index64.js +1 -1
  169. package/dist/index64.js.map +1 -1
  170. package/dist/index65.js +1 -1
  171. package/dist/index65.js.map +1 -1
  172. package/dist/index66.js +2 -2
  173. package/dist/index66.js.map +1 -1
  174. package/dist/index67.js +1 -1
  175. package/dist/index67.js.map +1 -1
  176. package/dist/index68.js +2 -2
  177. package/dist/index68.js.map +1 -1
  178. package/dist/index69.js +2 -2
  179. package/dist/index69.js.map +1 -1
  180. package/dist/index70.js +1 -1
  181. package/dist/index70.js.map +1 -1
  182. package/dist/index71.js +1 -1
  183. package/dist/index71.js.map +1 -1
  184. package/dist/index72.js +2 -2
  185. package/dist/index72.js.map +1 -1
  186. package/dist/index73.js +1 -1
  187. package/dist/index73.js.map +1 -1
  188. package/dist/index74.js +2 -2
  189. package/dist/index74.js.map +1 -1
  190. package/dist/index75.js +2 -2
  191. package/dist/index75.js.map +1 -1
  192. package/dist/index76.js +1 -1
  193. package/dist/index76.js.map +1 -1
  194. package/dist/index77.js +2 -2
  195. package/dist/index77.js.map +1 -1
  196. package/dist/index78.js +2 -2
  197. package/dist/index78.js.map +1 -1
  198. package/dist/index79.js +1 -1
  199. package/dist/index79.js.map +1 -1
  200. package/dist/index80.js +1 -1
  201. package/dist/index80.js.map +1 -1
  202. package/dist/index81.js +1 -1
  203. package/dist/index81.js.map +1 -1
  204. package/dist/index82.js +1 -1
  205. package/dist/index82.js.map +1 -1
  206. package/dist/index83.js +2 -2
  207. package/dist/index83.js.map +1 -1
  208. package/dist/index84.js +1 -1
  209. package/dist/index84.js.map +1 -1
  210. package/dist/index85.js +2 -2
  211. package/dist/index85.js.map +1 -1
  212. package/dist/index86.js +1 -1
  213. package/dist/index86.js.map +1 -1
  214. package/dist/index87.js +1 -1
  215. package/dist/index87.js.map +1 -1
  216. package/dist/index88.js +1 -1
  217. package/dist/index88.js.map +1 -1
  218. package/dist/index89.js +1 -1
  219. package/dist/index89.js.map +1 -1
  220. package/dist/index9.js +9 -9
  221. package/dist/index9.js.map +1 -1
  222. package/dist/index90.js +2 -2
  223. package/dist/index90.js.map +1 -1
  224. package/dist/index91.js +2 -2
  225. package/dist/index91.js.map +1 -1
  226. package/dist/index92.js +1 -1
  227. package/dist/index92.js.map +1 -1
  228. package/dist/index93.js +1 -1
  229. package/dist/index93.js.map +1 -1
  230. package/dist/index94.js +2 -2
  231. package/dist/index94.js.map +1 -1
  232. package/dist/index95.js +2 -2
  233. package/dist/index95.js.map +1 -1
  234. package/dist/index96.js +1 -1
  235. package/dist/index96.js.map +1 -1
  236. package/dist/index97.js +2 -2
  237. package/dist/index97.js.map +1 -1
  238. package/dist/index98.js +2 -2
  239. package/dist/index98.js.map +1 -1
  240. package/dist/index99.js +1 -1
  241. package/dist/index99.js.map +1 -1
  242. package/package.json +1 -1
  243. package/dist/index128.js +0 -15
  244. package/dist/index128.js.map +0 -1
  245. package/dist/index137.js +0 -13
  246. package/dist/index137.js.map +0 -1
  247. package/dist/index138.js +0 -13
  248. package/dist/index138.js.map +0 -1
  249. package/dist/index139.js +0 -8
  250. package/dist/index139.js.map +0 -1
  251. package/dist/index140.js +0 -173
  252. package/dist/index140.js.map +0 -1
  253. package/dist/index141.js +0 -14
  254. package/dist/index141.js.map +0 -1
  255. package/dist/index142.js +0 -9
  256. package/dist/index142.js.map +0 -1
  257. package/dist/index143.js +0 -9
  258. package/dist/index143.js.map +0 -1
  259. package/dist/index145.js +0 -5
  260. package/dist/index145.js.map +0 -1
@@ -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=\"min-w-[212px]\">\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","React","createElement","position","renderPopoverSrcElement","displayPopover","name","stroke","renderPopoverContents","data"],"mappings":"AAWA,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;AACF,MAGIC,gBAAAA,EAAAC,cAACZ,GAAO;AAAA,EACNO,WAAAA;AAAAA,EACAM,UAAS;AAAA,EACTL,cAAAA;AAAAA,EACAC,4BAAAA;AAAAA,EACAK,yBAAyBA,CAAC;AAAA,IAAEC,gBAAAA;AAAAA,EAAAA,MAC1BH,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAW,GAAGL,EAAYC,IAAI,IAAIY,IAAiBb,EAAYE,SAAS,EAAE,IAAIF,EAAYG,KAAK;AAAA,EAAA,GAClGO,gBAAAA,EAAAA,cAACX,GAAI;AAAA,IAACe,MAAK;AAAA,IAAYC,QAAQ;AAAA,EAAA,CAAuB,CACnD;AAAA,EAEPC,uBAAwBC,CAAAA,MACtBP,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EACZG,GAAAA,KAAeE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKL,WAAU;AAAA,EAAA,GAAgBG,EAAYS,CAAI,CAAO,CACnE;AAAA,CAER;"}
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
- import a, { useEffect as o } from "react";
2
- import { Icon as v } from "./index5.js";
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 N = (i) => {
15
+ const k = (a) => {
5
16
  const {
6
- content: c,
7
- className: n = "",
8
- alignment: m,
9
- noShadow: u,
10
- position: l = "fxd",
11
- isOpen: t,
12
- displayCloseSidebar: b,
13
- onClose: f,
14
- onSidebarUnmount: r,
15
- onPathChange: s,
16
- style: y,
17
- automationId: g,
18
- currentPath: d = "",
19
- closeSidebarIcon: h = "close"
20
- } = i;
21
- o(() => () => {
22
- r && r();
23
- }, []), o(() => (document.body.style.overflow = t ? "hidden" : "scroll", () => {
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
- }), [t]), o(() => {
26
- s && s(d);
27
- }, [d]);
28
- const p = () => {
29
- let e = "se-design-sidebar-overlay-container z-[1000]";
30
- return e += n.length > 0 ? ` ${n}` : "", e += m === "left" ? " left-aligned" : " right-aligned", e += u ? " no-shadow" : "", e += l.length > 0 ? ` ${l}` : "", e += t ? " open-sidebar" : " closed-sidebar", e;
31
- };
32
- return /* @__PURE__ */ a.createElement("div", {
33
- className: p(),
34
- style: y,
35
- "data-automation-id": g
36
- }, /* @__PURE__ */ a.createElement("div", {
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
- }, b && /* @__PURE__ */ a.createElement("span", {
53
+ }, p && /* @__PURE__ */ l.createElement("span", {
39
54
  className: "overlay-close",
40
- onClick: f,
55
+ onClick: v,
41
56
  "data-automation-id": "sidebar_overlay_close"
42
- }, /* @__PURE__ */ a.createElement(v, {
43
- name: h
44
- })), c));
57
+ }, /* @__PURE__ */ l.createElement(x, {
58
+ name: w
59
+ })), t));
45
60
  };
46
61
  export {
47
- N as SidebarOverlay
62
+ k as SidebarOverlay
48
63
  };
49
64
  //# sourceMappingURL=index26.js.map
@@ -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?: 'abs' | 'fxd' | '';\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 = 'fxd', 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 return (\n <div className={getSidebarClassName()} style={style} data-automation-id={automationId}>\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","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,IAAOC,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;AAEpNH,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;AAGEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,WAAWgB,EAAoB;AAAA,IAAGP,OAAAA;AAAAA,IAAc,sBAAoBC;AAAAA,EAAAA,GACvEU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKpB,WAAU;AAAA,EACZK,GAAAA,KACCe,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMpB,WAAU;AAAA,IAAgBqB,SAASf;AAAAA,IAAS,sBAAmB;AAAA,EAAA,GACnEc,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC0B,MAAMV;AAAAA,EAAAA,CAAmB,CAC3B,GAEPb,CACE,CACF;AAET;"}
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, E = Object.defineProperties;
2
- var v = Object.getOwnPropertyDescriptors;
3
- var i = Object.getOwnPropertySymbols;
4
- var C = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
5
- var s = (e, a, t) => a in e ? f(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, d = (e, a) => {
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
- C.call(a, t) && s(e, t, a[t]);
8
- if (i)
9
- for (var t of i(a))
10
- N.call(a, t) && s(e, t, a[t]);
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
- }, m = (e, a) => E(e, v(a));
13
- import r, { useRef as g } from "react";
14
- function p(e) {
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: l,
19
- disabled: h,
20
- name: u,
21
- onChange: o,
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, c = g(null);
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 ${l ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] p-2 transition-colors duration-300 ${w}`,
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 n;
30
- return (n = c.current) == null ? void 0 : n.click();
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: c,
36
+ ref: n,
37
37
  type: "radio",
38
38
  id: t,
39
- name: u,
39
+ name: h,
40
40
  value: t,
41
- checked: l,
42
- disabled: h,
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
- o && o(m(d({}, e), {
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
- p as Radio
59
+ y as Radio
60
60
  };
61
61
  //# sourceMappingURL=index31.js.map
@@ -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 htmlFor={value} className={`${props.helperLabel && 'flex flex-col'} cursor-pointer`}>\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,wEAAwEX,IAAU,qBAAqB,kBAAkB,qDAAqDM,CAAuB;AAAA,IAChNM,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,IAAOW,SAAStB;AAAAA,IAAOY,WAAW,GAAGd,EAAMyB,eAAe,eAAe;AAAA,EAAA,GACvEZ,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;"}
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 s = Object.getOwnPropertyDescriptors;
3
- var u = Object.getOwnPropertySymbols;
4
- var g = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
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 (u)
9
- for (var e of u(a))
10
- f.call(a, e) && o(n, e, a[e]);
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
- }, l = (n, a) => m(n, s(a));
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(l(c({}, e), {
26
+ n.onRadioGroupChange(u(c({}, e), {
27
27
  checked: !0
28
28
  }));
29
29
  };
30
30
  return /* @__PURE__ */ i.createElement("div", {
31
- className: "flex gap-2"
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, {
@@ -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=\"flex gap-2\">\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","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASO,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,WAAU;AAAA,EAAA,GACZT,EAAMU,QAAQC,IAAKC,OAClBJ,gBAAAA,EAAAA,cAACK,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUhB;AAAAA,IAAmBK,SAASM,EAAOI,UAAUhB,EAAMgB;AAAAA,EAAQ,CAAA,CAAA,CAC5G,CACE;AAET;"}
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 a, { useState as h, useRef as H, useEffect as s, useMemo as _ } from "react";
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 $ } from "./index9.js";
4
- import { debounce as z } from "./index128.js";
3
+ import { LabelChip as D } from "./index9.js";
4
+ import { debounce as F } from "./index136.js";
5
5
  /* empty css */
6
- function T(r) {
6
+ function q(r) {
7
7
  const {
8
- disabled: C = !1,
9
- placeholder: S = "Search",
8
+ disabled: v = !1,
9
+ placeholder: N = "Search",
10
10
  debounceDuration: f = 500,
11
11
  onInputChange: l = () => {
12
12
  },
13
- onSearchClear: k = () => {
13
+ onSearchClear: S = () => {
14
+ },
15
+ onChipRemove: I = () => {
14
16
  },
15
17
  updateSearchString: i = "",
16
18
  collapsible: p = !1,
17
- width: v = "200px",
18
- chips: m = []
19
- } = r, [t, d] = h(""), [o, b] = h(!(r != null && r.collapsible)), [n, x] = h(m || []), c = H(null);
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 = _(() => z(l, f), [l, f]);
34
+ const u = z(() => F(l, f), [l, f]);
31
35
  s(() => () => {
32
36
  u.cancel();
33
37
  }, [u]);
34
- const I = (e) => {
38
+ const y = (e) => {
35
39
  d(e), u(e);
36
- }, N = () => {
37
- d(""), l(""), k();
38
- }, w = () => {
39
- p && (t == null ? void 0 : t.trimEnd()) === "" && b(!1);
40
- }, y = (e) => {
41
- x(n.filter((B) => B !== e));
42
- }, E = (n == null ? void 0 : n.length) > 0;
43
- return /* @__PURE__ */ a.createElement("div", {
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: v
50
+ width: k
47
51
  }
48
- }, o && /* @__PURE__ */ a.createElement("div", {
49
- className: `chips-and-search-box-container${E ? " has-chips" : ""}`
50
- }, E && (n == null ? void 0 : n.map((e) => /* @__PURE__ */ a.createElement($, {
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: () => y(e),
55
- size: "sm"
56
- }))), /* @__PURE__ */ a.createElement("div", {
60
+ onIconClick: () => _(e),
61
+ size: "lg"
62
+ }))), /* @__PURE__ */ n.createElement("div", {
57
63
  className: "search-input-container"
58
- }, /* @__PURE__ */ a.createElement(g, {
64
+ }, w && /* @__PURE__ */ n.createElement(g, {
59
65
  name: "search",
60
66
  className: "search-icon img-wrap",
61
- onClick: () => p && b((e) => !e)
62
- }), /* @__PURE__ */ a.createElement("input", {
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: S,
68
- onChange: (e) => I(e.target.value),
73
+ placeholder: N,
74
+ onChange: (e) => y(e.target.value),
69
75
  value: t,
70
- disabled: C,
71
- onBlur: w
72
- }), !!t && /* @__PURE__ */ a.createElement(g, {
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: N
76
- }))));
81
+ onClick: B
82
+ }))), b && /* @__PURE__ */ n.createElement("div", {
83
+ className: "filter-component-container"
84
+ }, b())));
77
85
  }
78
86
  export {
79
- T as SearchBox
87
+ q as SearchBox
80
88
  };
81
89
  //# sourceMappingURL=index37.js.map
@@ -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 disabled?: boolean,\n placeholder?: string,\n debounceDuration?: number,\n onInputChange?: (value: string) => void,\n onSearchClear?: () => void,\n updateSearchString?: string,\n collapsible?: boolean,\n width?: string,\n chips?: string[]\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n const {\n disabled = false,\n placeholder = 'Search',\n debounceDuration = 500,\n onInputChange = () => {},\n onSearchClear = () => {},\n updateSearchString = '',\n collapsible = false,\n width = '200px',\n chips = []\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 \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\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 }\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={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n {hasChips && searchChips?.map((chip) => (\n <LabelChip key={chip} label={chip} icon=\"close\" onIconClick={() => removeChip(chip)} size=\"sm\" />\n ))}\n <div className=\"search-input-container\">\n <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} />\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 && (\n <Icon\n name=\"close\"\n className=\"cross-icon img-wrap\"\n onClick={iconClickHandler}\n />\n )}\n </div>\n </div>\n )}\n </div>\n );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","updateSearchString","collapsible","width","chips","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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"}
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 $ = (e, t) => {
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 r, { useRef as q, useEffect as y } from "react";
21
+ import n, { useRef as q, useEffect as $ } from "react";
22
22
  /* empty css */
23
- const J = /* @__PURE__ */ r.memo((z) => {
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: B = "input",
29
+ tag: y = "input",
30
30
  error: s = !1,
31
- errorMessage: L,
31
+ errorMessage: B,
32
32
  label: E,
33
- placeholder: S,
33
+ placeholder: L,
34
34
  suggestions: i = [],
35
35
  customRenderSuggestions: o,
36
36
  onSuggestionClick: v
37
- } = N, _ = $(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] = r.useState([...i]), [A, p] = r.useState(!1), u = q(null), F = r.useCallback((c) => {
52
- const n = c.target.value;
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(n, !1);
55
- else if (t(n), n === "")
54
+ t(r, !1);
55
+ else if (t(r), r === "")
56
56
  f([...i]);
57
- else if (n) {
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 = n == null ? void 0 : n.toLowerCase()) != null ? 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
- y(() => {
66
- o && f([...i]);
67
- }, [i]), y(() => {
68
- const c = (n) => {
69
- u.current && !u.current.contains(n.target) && p(!1);
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
- p(!0);
76
+ u(!0);
77
77
  }, w = (c) => {
78
- t(c, !0), p(!1), v && v(c);
78
+ t(c, !0), u(!1), v && v(c);
79
79
  };
80
- return /* @__PURE__ */ r.createElement("div", {
80
+ return /* @__PURE__ */ n.createElement("div", {
81
81
  className: "main-container-autocomplete-se-design",
82
- ref: u
83
- }, E && /* @__PURE__ */ r.createElement("label", {
82
+ ref: p
83
+ }, E && /* @__PURE__ */ n.createElement("label", {
84
84
  className: "label-container"
85
- }, E), /* @__PURE__ */ r.createElement(B, I({
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: S
93
- }, _)), /* @__PURE__ */ r.createElement("div", {
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__ */ r.createElement("div", {
101
+ }, s && /* @__PURE__ */ n.createElement("div", {
96
102
  id: "error-message",
97
103
  className: "error-message"
98
- }, L), l && /* @__PURE__ */ r.createElement("div", {
104
+ }, B), l && /* @__PURE__ */ n.createElement("div", {
99
105
  className: "max-word"
100
- }, e.length, "/", l)), A && d.length > 0 && /* @__PURE__ */ r.createElement("div", {
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