@driveflux/beam 3.0.18 → 3.0.19

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 (219) hide show
  1. package/dist/accordion/Accordion.js +7 -203
  2. package/dist/accordion/Accordion.stories.js +11 -31
  3. package/dist/alert/Alert.js +19 -193
  4. package/dist/alert/Alert.stories.js +15 -50
  5. package/dist/animations/LoadingAnimation.js +21 -34
  6. package/dist/badge/Badge.js +7 -105
  7. package/dist/badge/Badge.stories.js +7 -28
  8. package/dist/box/Box.js +3 -151
  9. package/dist/box/Box.stories.js +7 -8
  10. package/dist/breadcrumbs/Breadcrumbs.js +26 -351
  11. package/dist/breadcrumbs/Breadcrumbs.stories.js +27 -51
  12. package/dist/button/Button.js +12 -190
  13. package/dist/button/Button.stories.js +7 -35
  14. package/dist/button/TextButton.js +9 -168
  15. package/dist/card/Card.js +7 -188
  16. package/dist/card/Card.stories.js +7 -10
  17. package/dist/carousel/Carousel.js +58 -308
  18. package/dist/carousel/Carousel.stories.js +7 -39
  19. package/dist/carousel/CarouselButton.js +7 -132
  20. package/dist/center/Center.js +3 -127
  21. package/dist/center/Center.stories.js +7 -19
  22. package/dist/checkbox/Checkbox.js +4 -188
  23. package/dist/checkbox/Checkbox.stories.js +8 -10
  24. package/dist/chip/Chip.js +3 -168
  25. package/dist/chip/Chip.stories.js +7 -19
  26. package/dist/circular-progress/CircularProgress.js +11 -159
  27. package/dist/circular-progress/CircularProgress.stories.js +14 -54
  28. package/dist/command/command.js +13 -249
  29. package/dist/datepicker/DatePicker.js +90 -245
  30. package/dist/datepicker/DatePicker.stories.js +58 -162
  31. package/dist/datepicker/DatePickerDrawer.js +17 -115
  32. package/dist/datepicker/DatePickerPopover.js +35 -208
  33. package/dist/datepicker/constants.js +4 -3
  34. package/dist/datepicker/utils.js +11 -4
  35. package/dist/dialog/index.js +12 -253
  36. package/dist/divider/Divider.js +3 -127
  37. package/dist/divider/Divider.stories.js +7 -13
  38. package/dist/drawer/index.js +12 -230
  39. package/dist/dropdown/Dropdown.js +26 -297
  40. package/dist/dropdown/Dropdown.stories.js +22 -109
  41. package/dist/field-wrapper/FieldWrapper.js +3 -203
  42. package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
  43. package/dist/flex/Flex.js +3 -127
  44. package/dist/flex/Flex.stories.js +7 -19
  45. package/dist/grid/Grid.js +3 -127
  46. package/dist/grid/Grid.stories.js +7 -28
  47. package/dist/hooks/use-breakpoint-value.js +14 -77
  48. package/dist/hooks/use-media-query.js +12 -61
  49. package/dist/hstack/HStack.js +3 -127
  50. package/dist/hstack/HStack.stories.js +7 -19
  51. package/dist/icons/FluxLogo.js +9 -222
  52. package/dist/icons/FluxLogoTable.js +5 -118
  53. package/dist/icons/Icon.js +7 -117
  54. package/dist/icons/Icon.stories.js +7 -12
  55. package/dist/icons/Icon24Hours.js +5 -92
  56. package/dist/icons/IconAcceleration.js +4 -81
  57. package/dist/icons/IconAccount.js +4 -81
  58. package/dist/icons/IconApplicant.js +5 -87
  59. package/dist/icons/IconArrow.js +6 -87
  60. package/dist/icons/IconArrowBack.js +4 -81
  61. package/dist/icons/IconArrowForward.js +4 -81
  62. package/dist/icons/IconArrowTopLeft.js +4 -79
  63. package/dist/icons/IconBluesharkProductGuide.js +5 -89
  64. package/dist/icons/IconBolt.js +4 -81
  65. package/dist/icons/IconBriefcase.js +4 -81
  66. package/dist/icons/IconBulb.js +4 -81
  67. package/dist/icons/IconCalendar.js +4 -81
  68. package/dist/icons/IconCalendarArrowBack.js +4 -81
  69. package/dist/icons/IconCalendarArrowForward.js +4 -81
  70. package/dist/icons/IconCalendarDoubleArrowBack.js +4 -81
  71. package/dist/icons/IconCalendarDoubleArrowForward.js +4 -81
  72. package/dist/icons/IconCancel.js +5 -86
  73. package/dist/icons/IconCancelMark.js +4 -81
  74. package/dist/icons/IconCarSUV.js +4 -81
  75. package/dist/icons/IconCarSedan.js +7 -156
  76. package/dist/icons/IconChain.js +5 -88
  77. package/dist/icons/IconCheckmark.js +4 -81
  78. package/dist/icons/IconChevronRight.js +4 -81
  79. package/dist/icons/IconCircle.js +11 -123
  80. package/dist/icons/IconCircleCheckmark.js +5 -86
  81. package/dist/icons/IconCircleError.js +4 -81
  82. package/dist/icons/IconCircleExclamation.js +6 -113
  83. package/dist/icons/IconCircleMark.js +5 -87
  84. package/dist/icons/IconCircleOutline.js +5 -148
  85. package/dist/icons/IconClock.js +5 -89
  86. package/dist/icons/IconClose.js +4 -81
  87. package/dist/icons/IconCollapseAll.js +5 -103
  88. package/dist/icons/IconConcierge.js +5 -88
  89. package/dist/icons/IconConciergeService.js +5 -96
  90. package/dist/icons/IconCreditCard.js +5 -87
  91. package/dist/icons/IconDash.js +4 -81
  92. package/dist/icons/IconDeliver.js +4 -81
  93. package/dist/icons/IconDelivery.js +5 -96
  94. package/dist/icons/IconDetails.js +4 -81
  95. package/dist/icons/IconDot.js +6 -96
  96. package/dist/icons/IconDownload.js +5 -88
  97. package/dist/icons/IconEVCharging.js +5 -88
  98. package/dist/icons/IconElectricCarFuel.js +5 -89
  99. package/dist/icons/IconEllipsis.js +5 -87
  100. package/dist/icons/IconEnvelope.js +4 -81
  101. package/dist/icons/IconExpandAll.js +5 -103
  102. package/dist/icons/IconEye.js +5 -88
  103. package/dist/icons/IconFacebook.js +6 -103
  104. package/dist/icons/IconFilter.js +5 -92
  105. package/dist/icons/IconFlagMalaysia.js +5 -150
  106. package/dist/icons/IconGiveKey.js +5 -88
  107. package/dist/icons/IconGlobe.js +4 -79
  108. package/dist/icons/IconGoogle.js +5 -96
  109. package/dist/icons/IconHome.js +5 -87
  110. package/dist/icons/IconHostAdvertise.js +4 -81
  111. package/dist/icons/IconHostCar.js +4 -84
  112. package/dist/icons/IconHostCash.js +5 -100
  113. package/dist/icons/IconHostHandle.js +4 -79
  114. package/dist/icons/IconHostLocation.js +4 -79
  115. package/dist/icons/IconHostPayment.js +5 -100
  116. package/dist/icons/IconHostService.js +5 -88
  117. package/dist/icons/IconHotDeals.js +4 -81
  118. package/dist/icons/IconInfo.js +5 -86
  119. package/dist/icons/IconInstagram.js +4 -81
  120. package/dist/icons/IconInsurance.js +5 -108
  121. package/dist/icons/IconInternet.js +4 -82
  122. package/dist/icons/IconInventory.js +5 -87
  123. package/dist/icons/IconLaurel.js +5 -110
  124. package/dist/icons/IconLinkedIn.js +4 -81
  125. package/dist/icons/IconLoading.js +4 -87
  126. package/dist/icons/IconLocation.js +5 -89
  127. package/dist/icons/IconLock.js +4 -82
  128. package/dist/icons/IconLogistics.js +4 -81
  129. package/dist/icons/IconMail.js +5 -103
  130. package/dist/icons/IconMember.js +5 -87
  131. package/dist/icons/IconMobilePen.js +5 -92
  132. package/dist/icons/IconMotorcycleMoped.js +5 -87
  133. package/dist/icons/IconNoCost.js +5 -101
  134. package/dist/icons/IconPDF.js +5 -89
  135. package/dist/icons/IconPencil.js +4 -79
  136. package/dist/icons/IconPhone.js +4 -79
  137. package/dist/icons/IconPlus.js +4 -81
  138. package/dist/icons/IconPricing.js +4 -81
  139. package/dist/icons/IconProtected.js +4 -80
  140. package/dist/icons/IconPsychology.js +4 -81
  141. package/dist/icons/IconQuestionTooltip.js +4 -137
  142. package/dist/icons/IconQuote.js +4 -81
  143. package/dist/icons/IconRate.js +4 -80
  144. package/dist/icons/IconRegister.js +5 -108
  145. package/dist/icons/IconReport.js +6 -98
  146. package/dist/icons/IconReturn.js +4 -81
  147. package/dist/icons/IconSearch.js +4 -79
  148. package/dist/icons/IconSecure.js +4 -80
  149. package/dist/icons/IconSecurity.js +4 -82
  150. package/dist/icons/IconSedanOutline.js +5 -168
  151. package/dist/icons/IconSelectArrow.js +6 -87
  152. package/dist/icons/IconSort.js +5 -88
  153. package/dist/icons/IconSortListed.js +5 -104
  154. package/dist/icons/IconSortPriceAscending.js +5 -92
  155. package/dist/icons/IconSortPriceDescending.js +5 -92
  156. package/dist/icons/IconSortYear.js +5 -88
  157. package/dist/icons/IconSpan.js +4 -80
  158. package/dist/icons/IconSpeaker.js +4 -88
  159. package/dist/icons/IconSpecialCar.js +5 -104
  160. package/dist/icons/IconStar.js +7 -101
  161. package/dist/icons/IconStockPhoto.js +5 -104
  162. package/dist/icons/IconSubscription.js +6 -122
  163. package/dist/icons/IconSubscriptions.js +6 -122
  164. package/dist/icons/IconSwap.js +5 -88
  165. package/dist/icons/IconTax.js +4 -81
  166. package/dist/icons/IconThinArrow.js +6 -87
  167. package/dist/icons/IconThumbsdown.js +5 -87
  168. package/dist/icons/IconThumbsup.js +5 -87
  169. package/dist/icons/IconTool.js +4 -81
  170. package/dist/icons/IconTooltip.js +4 -137
  171. package/dist/icons/IconTrash.js +4 -81
  172. package/dist/icons/IconTriangleExclamation.js +4 -81
  173. package/dist/icons/IconTyersBrakes.js +5 -92
  174. package/dist/icons/IconTyre.js +5 -92
  175. package/dist/icons/IconVacancy.js +5 -87
  176. package/dist/icons/IconVolunteer.js +4 -81
  177. package/dist/icons/IconWhatsapp.js +4 -82
  178. package/dist/icons/IconXPlatform.js +4 -81
  179. package/dist/icons/IconZeroEffort.js +5 -86
  180. package/dist/icons/Logo.js +3 -108
  181. package/dist/input/Input.js +11 -134
  182. package/dist/input/Input.stories.js +18 -17
  183. package/dist/input-mask/InputMask.js +11 -158
  184. package/dist/input-mask/InputMask.stories.js +6 -5
  185. package/dist/input-mask/mask-trackers.js +5 -4
  186. package/dist/input-select/InputSelect.js +68 -390
  187. package/dist/input-select/InputSelect.stories.js +25 -98
  188. package/dist/popover/popover.js +4 -136
  189. package/dist/progress/Progress.js +2 -160
  190. package/dist/progress/Progress.stories.js +14 -13
  191. package/dist/radio/Radio.js +4 -227
  192. package/dist/scroll-area/scroll-area.js +5 -180
  193. package/dist/search-input-select/SearchInputSelect.js +69 -379
  194. package/dist/select/Select.js +29 -354
  195. package/dist/select/Select.stories.js +19 -55
  196. package/dist/skeleton/Skeleton.js +3 -71
  197. package/dist/skeleton/Skeleton.stories.js +7 -8
  198. package/dist/slider/Slider.js +5 -170
  199. package/dist/slider/Slider.stories.js +11 -12
  200. package/dist/stack/Stack.js +3 -127
  201. package/dist/stack/Stack.stories.js +7 -19
  202. package/dist/table/Table.js +10 -216
  203. package/dist/table/Table.stories.js +8 -84
  204. package/dist/tabs/Tabs.js +9 -198
  205. package/dist/tabs/Tabs.stories.js +13 -46
  206. package/dist/text/Text.js +6 -152
  207. package/dist/text/Text.stories.js +7 -44
  208. package/dist/toast/Toast.stories.js +14 -66
  209. package/dist/toast/ToastBox.js +29 -77
  210. package/dist/toast/index.js +1 -0
  211. package/dist/toast/sonner.js +6 -66
  212. package/dist/toggle/Toggle.js +7 -180
  213. package/dist/toggle/Toggle.stories.js +8 -10
  214. package/dist/tooltip/Tooltip.js +12 -169
  215. package/dist/tooltip/Tooltip.stories.js +13 -71
  216. package/dist/utils.js +2 -4
  217. package/dist/vstack/VStack.js +3 -127
  218. package/dist/vstack/VStack.stories.js +7 -19
  219. package/package.json +16 -16
@@ -5,7 +5,7 @@ import { useCallback } from 'react';
5
5
  import Calendar from 'react-calendar';
6
6
  import Box from '../box/Box';
7
7
  import Button from '../button/Button';
8
- import { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '../drawer';
8
+ import { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger, } from '../drawer';
9
9
  import FieldWrapper from '../field-wrapper/FieldWrapper';
10
10
  import IconCalendar from '../icons/IconCalendar';
11
11
  import IconCalendarArrowBack from '../icons/IconCalendarArrowBack';
@@ -17,125 +17,27 @@ import Stack from '../stack/Stack';
17
17
  import Text from '../text/Text';
18
18
  import { cn } from '../utils';
19
19
  import { formatInputBy } from './utils';
20
- var DatePickerDrawer = function DatePickerDrawer(param) {
21
- var _param_htmlFor = param.htmlFor, htmlFor = _param_htmlFor === void 0 ? 'datepicker' : _param_htmlFor, _param_locale = param.locale, locale = _param_locale === void 0 ? 'en' : _param_locale, isRange = param.isRange, providedValue = param.value, minDate = param.minDate, maxDate = param.maxDate, placeholder = param.placeholder, calendarType = param.calendarType, isDisabled = param.isDisabled, inputProps = param.inputProps, drawerTitle = param.drawerTitle, cancelButton = param.cancelButton, applyButton = param.applyButton, tileDisabled = param.tileDisabled, tileClassName = param.tileClassName, error = param.error, // non-customized props
22
- innerValue = param.innerValue, setInnerValue = param.setInnerValue, focused = param.focused, setFocused = param.setFocused, handleSelect = param.handleSelect, handleCancel = param.handleCancel, handleApply = param.handleApply;
23
- var handleOpenChange = function handleOpenChange(open) {
20
+ const DatePickerDrawer = ({ htmlFor = 'datepicker', locale = 'en', isRange, value: providedValue, minDate, maxDate, placeholder, calendarType, isDisabled, inputProps, drawerTitle, cancelButton, applyButton, tileDisabled, tileClassName, error,
21
+ // non-customized props
22
+ innerValue, setInnerValue, focused, setFocused, handleSelect, handleCancel, handleApply, }) => {
23
+ const handleOpenChange = (open) => {
24
24
  setFocused(open);
25
25
  if (!open) {
26
26
  handleCancel();
27
27
  }
28
28
  };
29
- var isApplyDisabled = !innerValue || isRange && (!Array.isArray(innerValue) || innerValue.length !== 2 || !innerValue[0] || !innerValue[1]);
30
- var finalTileClassName = useCallback(function(args) {
31
- var additionalClassNames = tileClassName === null || tileClassName === void 0 ? void 0 : tileClassName(args);
29
+ const isApplyDisabled = !innerValue ||
30
+ (isRange &&
31
+ (!Array.isArray(innerValue) ||
32
+ innerValue.length !== 2 ||
33
+ !innerValue[0] ||
34
+ !innerValue[1]));
35
+ const finalTileClassName = useCallback((args) => {
36
+ const additionalClassNames = tileClassName?.(args);
32
37
  return cn('flex item-center justify-center text-center', additionalClassNames);
33
- }, [
34
- tileClassName
35
- ]);
36
- return /*#__PURE__*/ _jsx(FieldWrapper, {
37
- htmlFor: htmlFor,
38
- label: inputProps === null || inputProps === void 0 ? void 0 : inputProps.label,
39
- error: error,
40
- className: 'w-full',
41
- children: /*#__PURE__*/ _jsxs(Drawer, {
42
- open: focused,
43
- onOpenChange: handleOpenChange,
44
- children: [
45
- /*#__PURE__*/ _jsx(DrawerTrigger, {
46
- asChild: true,
47
- disabled: isDisabled,
48
- className: 'w-full',
49
- children: /*#__PURE__*/ _jsxs(Box, {
50
- className: cn('flex flex-row p-3 border border-primary2 cursor-pointer hover:border-primary4 rounded-lg', isDisabled && 'bg-primary2', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4'),
51
- children: [
52
- innerValue ? /*#__PURE__*/ _jsx(Text, {
53
- className: "flex-1",
54
- children: formatInputBy(innerValue, isRange)
55
- }) : /*#__PURE__*/ _jsx(Text, {
56
- className: 'flex-1 text-primary2',
57
- children: placeholder || 'DD-MM-YYYY'
58
- }),
59
- /*#__PURE__*/ _jsx(IconCalendar, {
60
- size: '16px'
61
- })
62
- ]
63
- })
64
- }),
65
- /*#__PURE__*/ _jsxs(DrawerContent, {
66
- hideGrabber: true,
67
- className: 'datepicker-content flex flex-col items-stretch',
68
- children: [
69
- /*#__PURE__*/ _jsxs(DrawerHeader, {
70
- className: 'flex items-center justify-between py-4 px-6',
71
- children: [
72
- /*#__PURE__*/ _jsx(DrawerTitle, {
73
- children: /*#__PURE__*/ _jsx(Text, {
74
- className: 'text-xl font-bold uppercase',
75
- children: drawerTitle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.label) || 'date'
76
- })
77
- }),
78
- /*#__PURE__*/ _jsx(DrawerClose, {
79
- className: 'text-primary3',
80
- children: /*#__PURE__*/ _jsx(IconClose, {
81
- className: 'w-4 h-4 lg:w-6 lg:h-6'
82
- })
83
- })
84
- ]
85
- }),
86
- /*#__PURE__*/ _jsx(Calendar, {
87
- value: innerValue,
88
- onChange: handleSelect,
89
- locale: locale || 'en',
90
- selectRange: isRange,
91
- minDate: minDate,
92
- maxDate: maxDate,
93
- calendarType: calendarType,
94
- formatShortWeekday: function formatShortWeekday(_, date) {
95
- return format(date, 'EEEEE');
96
- },
97
- className: 'p-6',
98
- tileDisabled: tileDisabled,
99
- tileClassName: finalTileClassName,
100
- prevLabel: /*#__PURE__*/ _jsx(IconCalendarArrowBack, {
101
- size: 24
102
- }),
103
- nextLabel: /*#__PURE__*/ _jsx(IconCalendarArrowForward, {
104
- size: 24
105
- }),
106
- prev2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowBack, {
107
- size: 24
108
- }),
109
- next2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowForward, {
110
- size: 24
111
- })
112
- }),
113
- /*#__PURE__*/ _jsxs(Stack, {
114
- className: 'flex flex-row gap-2 py-4 px-6 border-t border-primary1',
115
- children: [
116
- /*#__PURE__*/ _jsx(Button, {
117
- type: 'button',
118
- variant: 'outline',
119
- className: 'w-full text-sm p-3 h-10 tracking-[0.5px]',
120
- onClick: function onClick() {
121
- return handleOpenChange(false);
122
- },
123
- children: (cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.label) || 'cancel'
124
- }),
125
- /*#__PURE__*/ _jsx(Button, {
126
- className: cn('w-full text-sm p-3 h-10 tracking-[0.5px]', isApplyDisabled && 'bg-primary1 hover:bg-primary1'),
127
- onClick: isApplyDisabled ? undefined : handleApply,
128
- children: (applyButton === null || applyButton === void 0 ? void 0 : applyButton.label) || 'done'
129
- })
130
- ]
131
- }),
132
- /*#__PURE__*/ _jsx(Box, {
133
- className: 'h-safe-bottom-edge'
134
- })
135
- ]
136
- })
137
- ]
138
- })
139
- });
38
+ }, [tileClassName]);
39
+ return (_jsx(FieldWrapper, { htmlFor: htmlFor, label: inputProps?.label, error: error, className: 'w-full', children: _jsxs(Drawer, { open: focused, onOpenChange: handleOpenChange, children: [_jsx(DrawerTrigger, { asChild: true, disabled: isDisabled, className: 'w-full', children: _jsxs(Box, { className: cn('flex flex-row p-3 border border-primary2 cursor-pointer hover:border-primary4 rounded-lg', isDisabled && 'bg-primary2', error &&
40
+ 'border-alert4 hover:border-alert4 focus-within:border-alert4'), children: [innerValue ? (_jsx(Text, { className: "flex-1", children: formatInputBy(innerValue, isRange) })) : (_jsx(Text, { className: 'flex-1 text-primary2', children: placeholder || 'DD-MM-YYYY' })), _jsx(IconCalendar, { size: '16px' })] }) }), _jsxs(DrawerContent, { hideGrabber: true, className: 'datepicker-content flex flex-col items-stretch', children: [_jsxs(DrawerHeader, { className: 'flex items-center justify-between py-4 px-6', children: [_jsx(DrawerTitle, { children: _jsx(Text, { className: 'text-xl font-bold uppercase', children: drawerTitle || inputProps?.label || 'date' }) }), _jsx(DrawerClose, { className: 'text-primary3', children: _jsx(IconClose, { className: 'w-4 h-4 lg:w-6 lg:h-6' }) })] }), _jsx(Calendar, { value: innerValue, onChange: handleSelect, locale: locale || 'en', selectRange: isRange, minDate: minDate, maxDate: maxDate, calendarType: calendarType, formatShortWeekday: (_, date) => format(date, 'EEEEE'), className: 'p-6', tileDisabled: tileDisabled, tileClassName: finalTileClassName, prevLabel: _jsx(IconCalendarArrowBack, { size: 24 }), nextLabel: _jsx(IconCalendarArrowForward, { size: 24 }), prev2Label: _jsx(IconCalendarDoubleArrowBack, { size: 24 }), next2Label: _jsx(IconCalendarDoubleArrowForward, { size: 24 }) }), _jsxs(Stack, { className: 'flex flex-row gap-2 py-4 px-6 border-t border-primary1', children: [_jsx(Button, { type: 'button', variant: 'outline', className: 'w-full text-sm p-3 h-10 tracking-[0.5px]', onClick: () => handleOpenChange(false), children: cancelButton?.label || 'cancel' }), _jsx(Button, { className: cn('w-full text-sm p-3 h-10 tracking-[0.5px]', isApplyDisabled && 'bg-primary1 hover:bg-primary1'), onClick: isApplyDisabled ? undefined : handleApply, children: applyButton?.label || 'done' })] }), _jsx(Box, { className: 'h-safe-bottom-edge' })] })] }) }));
140
41
  };
141
42
  export default DatePickerDrawer;
43
+ //# sourceMappingURL=DatePickerDrawer.js.map
@@ -1,102 +1,4 @@
1
1
  'use client';
2
- function _array_like_to_array(arr, len) {
3
- if (len == null || len > arr.length) len = arr.length;
4
- for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
5
- return arr2;
6
- }
7
- function _array_with_holes(arr) {
8
- if (Array.isArray(arr)) return arr;
9
- }
10
- function _define_property(obj, key, value) {
11
- if (key in obj) {
12
- Object.defineProperty(obj, key, {
13
- value: value,
14
- enumerable: true,
15
- configurable: true,
16
- writable: true
17
- });
18
- } else {
19
- obj[key] = value;
20
- }
21
- return obj;
22
- }
23
- function _iterable_to_array_limit(arr, i) {
24
- var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
25
- if (_i == null) return;
26
- var _arr = [];
27
- var _n = true;
28
- var _d = false;
29
- var _s, _e;
30
- try {
31
- for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
32
- _arr.push(_s.value);
33
- if (i && _arr.length === i) break;
34
- }
35
- } catch (err) {
36
- _d = true;
37
- _e = err;
38
- } finally{
39
- try {
40
- if (!_n && _i["return"] != null) _i["return"]();
41
- } finally{
42
- if (_d) throw _e;
43
- }
44
- }
45
- return _arr;
46
- }
47
- function _non_iterable_rest() {
48
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
49
- }
50
- function _object_spread(target) {
51
- for(var i = 1; i < arguments.length; i++){
52
- var source = arguments[i] != null ? arguments[i] : {};
53
- var ownKeys = Object.keys(source);
54
- if (typeof Object.getOwnPropertySymbols === "function") {
55
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
56
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
57
- }));
58
- }
59
- ownKeys.forEach(function(key) {
60
- _define_property(target, key, source[key]);
61
- });
62
- }
63
- return target;
64
- }
65
- function ownKeys(object, enumerableOnly) {
66
- var keys = Object.keys(object);
67
- if (Object.getOwnPropertySymbols) {
68
- var symbols = Object.getOwnPropertySymbols(object);
69
- if (enumerableOnly) {
70
- symbols = symbols.filter(function(sym) {
71
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
72
- });
73
- }
74
- keys.push.apply(keys, symbols);
75
- }
76
- return keys;
77
- }
78
- function _object_spread_props(target, source) {
79
- source = source != null ? source : {};
80
- if (Object.getOwnPropertyDescriptors) {
81
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
82
- } else {
83
- ownKeys(Object(source)).forEach(function(key) {
84
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
85
- });
86
- }
87
- return target;
88
- }
89
- function _sliced_to_array(arr, i) {
90
- return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
91
- }
92
- function _unsupported_iterable_to_array(o, minLen) {
93
- if (!o) return;
94
- if (typeof o === "string") return _array_like_to_array(o, minLen);
95
- var n = Object.prototype.toString.call(o).slice(8, -1);
96
- if (n === "Object" && o.constructor) n = o.constructor.name;
97
- if (n === "Map" || n === "Set") return Array.from(n);
98
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
99
- }
100
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
101
3
  import { format } from 'date-fns';
102
4
  import { useEffect, useRef } from 'react';
@@ -114,134 +16,59 @@ import Stack from '../stack/Stack';
114
16
  import { cn } from '../utils';
115
17
  import { DATE_REGEX, DATERANGE_REGEX } from './constants';
116
18
  import { formatPlaceholderBy } from './utils';
117
- var DatePickerPopover = function DatePickerPopover(param) {
118
- var _param_htmlFor = param.htmlFor, htmlFor = _param_htmlFor === void 0 ? 'datepicker' : _param_htmlFor, _param_locale = param.locale, locale = _param_locale === void 0 ? 'en' : _param_locale, isRange = param.isRange, minDate = param.minDate, maxDate = param.maxDate, placeholder = param.placeholder, calendarType = param.calendarType, isDisabled = param.isDisabled, onError = param.onError, inputProps = param.inputProps, cancelButton = param.cancelButton, applyButton = param.applyButton, tileDisabled = param.tileDisabled, tileClassName = param.tileClassName, providedValue = param.value, // non-customized props
119
- inputValue = param.inputValue, innerValue = param.innerValue, setInnerValue = param.setInnerValue, setInputValue = param.setInputValue, focused = param.focused, setFocused = param.setFocused, handleSelect = param.handleSelect, handleCancel = param.handleCancel, handleApply = param.handleApply;
120
- var _ref;
121
- var containerRef = useRef(null);
122
- var handleChange = function handleChange(e) {
123
- var value = e.target.value;
124
- setInputValue === null || setInputValue === void 0 ? void 0 : setInputValue(value);
19
+ const DatePickerPopover = ({ htmlFor = 'datepicker', locale = 'en', isRange, minDate, maxDate, placeholder, calendarType, isDisabled, onError, inputProps, cancelButton, applyButton, tileDisabled, tileClassName, value: providedValue,
20
+ // non-customized props
21
+ inputValue, innerValue, setInnerValue, setInputValue, focused, setFocused, handleSelect, handleCancel, handleApply, }) => {
22
+ const containerRef = useRef(null);
23
+ const handleChange = (e) => {
24
+ const value = e.target.value;
25
+ setInputValue?.(value);
125
26
  if (isRange && DATERANGE_REGEX.test(value)) {
126
- var _value_split = _sliced_to_array(value.split(' - '), 2), startDate = _value_split[0], endDate = _value_split[1];
127
- var _startDate_split = _sliced_to_array(startDate.split('/'), 3), startDay = _startDate_split[0], startMonth = _startDate_split[1], startYear = _startDate_split[2];
128
- var _endDate_split = _sliced_to_array(endDate.split('/'), 3), endDay = _endDate_split[0], endMonth = _endDate_split[1], endYear = _endDate_split[2];
129
- var formattedStartDate = new Date("".concat(startYear, "-").concat(startMonth, "-").concat(startDay));
130
- var formattedEndDate = new Date("".concat(endYear, "-").concat(endMonth, "-").concat(endDay));
27
+ const [startDate, endDate] = value.split(' - ');
28
+ const [startDay, startMonth, startYear] = startDate.split('/');
29
+ const [endDay, endMonth, endYear] = endDate.split('/');
30
+ const formattedStartDate = new Date(`${startYear}-${startMonth}-${startDay}`);
31
+ const formattedEndDate = new Date(`${endYear}-${endMonth}-${endDay}`);
131
32
  if (formattedStartDate >= formattedEndDate) {
132
- onError === null || onError === void 0 ? void 0 : onError('start-gte-end');
33
+ onError?.('start-gte-end');
133
34
  return;
134
35
  }
135
- setInnerValue === null || setInnerValue === void 0 ? void 0 : setInnerValue([
136
- formattedStartDate,
137
- formattedEndDate
138
- ]);
36
+ setInnerValue?.([formattedStartDate, formattedEndDate]);
139
37
  return;
140
38
  }
141
39
  if (!isRange && DATE_REGEX.test(value)) {
142
- var _value_split1 = _sliced_to_array(value.split('-'), 3), day = _value_split1[0], month = _value_split1[1], year = _value_split1[2];
143
- setInnerValue === null || setInnerValue === void 0 ? void 0 : setInnerValue(new Date("".concat(year, "-").concat(month, "-").concat(day)));
40
+ const [day, month, year] = value.split('-');
41
+ setInnerValue?.(new Date(`${year}-${month}-${day}`));
144
42
  return;
145
43
  }
146
44
  };
147
- var isApplyDisabled = !innerValue || isRange && (!Array.isArray(innerValue) || innerValue.length !== 2 || !innerValue[0] || !innerValue[1]);
148
- useEffect(function() {
149
- var handleClick = function handleClick(e) {
150
- var _containerRef_current;
151
- var targetElement = e.target;
152
- var isCalendarClick = targetElement.closest('.react-calendar__tile');
153
- var open = !!((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.contains(targetElement)) || !!isCalendarClick;
45
+ const isApplyDisabled = !innerValue ||
46
+ (isRange &&
47
+ (!Array.isArray(innerValue) ||
48
+ innerValue.length !== 2 ||
49
+ !innerValue[0] ||
50
+ !innerValue[1]));
51
+ useEffect(() => {
52
+ const handleClick = (e) => {
53
+ const targetElement = e.target;
54
+ const isCalendarClick = targetElement.closest('.react-calendar__tile');
55
+ const open = !!containerRef.current?.contains(targetElement) || !!isCalendarClick;
154
56
  setFocused(open);
155
57
  if (!open) {
156
58
  handleCancel();
157
59
  }
158
60
  };
159
61
  document.addEventListener('click', handleClick);
160
- return function() {
161
- return document.removeEventListener('click', handleClick);
162
- };
163
- }, [
164
- setFocused,
165
- handleCancel
166
- ]);
167
- return /*#__PURE__*/ _jsxs(Box, {
168
- ref: containerRef,
169
- className: 'relative',
170
- children: [
171
- /*#__PURE__*/ _jsx(InputMask, _object_spread_props(_object_spread({
172
- htmlFor: htmlFor,
173
- placeholder: placeholder || formatPlaceholderBy(isRange),
174
- className: cn(isDisabled ? 'cursor-text' : 'cursor-pointer'),
175
- value: inputValue,
176
- isDisabled: isDisabled,
177
- suffix: /*#__PURE__*/ _jsx(IconCalendar, {
178
- size: '16px'
179
- }),
180
- onChange: handleChange,
181
- onClick: function onClick() {
62
+ return () => document.removeEventListener('click', handleClick);
63
+ }, [setFocused, handleCancel]);
64
+ return (_jsxs(Box, { ref: containerRef, className: 'relative', children: [_jsx(InputMask, { htmlFor: htmlFor, placeholder: placeholder || formatPlaceholderBy(isRange), className: cn(isDisabled ? 'cursor-text' : 'cursor-pointer'), value: inputValue, isDisabled: isDisabled, suffix: _jsx(IconCalendar, { size: '16px' }), onChange: handleChange, onClick: () => {
182
65
  !isDisabled && setFocused(true);
183
- }
184
- }, inputProps), {
185
- mask: formatPlaceholderBy(isRange),
186
- maskReplacement: {
66
+ }, ...inputProps, mask: formatPlaceholderBy(isRange), maskReplacement: {
187
67
  D: /\d/,
188
68
  M: /\d/,
189
- Y: /\d/
190
- },
191
- maskTrack: function maskTrack(data) {
192
- return maskTrackDate(data, isRange);
193
- }
194
- })),
195
- focused && /*#__PURE__*/ _jsxs(Box, {
196
- className: 'absolute top-full left-0 mt-1 z-1 w-max max-w-sm border border-primary1 shadow-xl bg-white rounded-lg overflow-hidden',
197
- children: [
198
- /*#__PURE__*/ _jsx(Calendar, {
199
- value: (_ref = innerValue !== null && innerValue !== void 0 ? innerValue : minDate) !== null && _ref !== void 0 ? _ref : new Date(),
200
- onChange: handleSelect,
201
- locale: locale || 'en',
202
- selectRange: isRange,
203
- minDate: minDate,
204
- maxDate: maxDate,
205
- tileClassName: tileClassName,
206
- calendarType: calendarType,
207
- formatShortWeekday: function formatShortWeekday(_, date) {
208
- return format(date, 'EEEEE');
209
- },
210
- className: 'p-4',
211
- tileDisabled: tileDisabled,
212
- prevLabel: /*#__PURE__*/ _jsx(IconCalendarArrowBack, {
213
- size: 24
214
- }),
215
- nextLabel: /*#__PURE__*/ _jsx(IconCalendarArrowForward, {
216
- size: 24
217
- }),
218
- prev2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowBack, {
219
- size: 24
220
- }),
221
- next2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowForward, {
222
- size: 24
223
- })
224
- }),
225
- /*#__PURE__*/ _jsxs(Stack, {
226
- className: 'flex flex-row gap-2 p-4 border-t border-primary1',
227
- children: [
228
- /*#__PURE__*/ _jsx(Button, {
229
- type: 'button',
230
- variant: 'outline',
231
- className: 'w-full text-sm p-3 h-10 tracking-[0.5px]',
232
- onClick: handleCancel,
233
- children: (cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.label) || 'cancel'
234
- }),
235
- /*#__PURE__*/ _jsx(Button, {
236
- className: cn('w-full text-sm p-3 h-10 tracking-[0.5px]', isApplyDisabled && 'bg-primary1 hover:bg-primary1 cursor-not-allowed'),
237
- onClick: isApplyDisabled ? undefined : handleApply,
238
- children: (applyButton === null || applyButton === void 0 ? void 0 : applyButton.label) || 'done'
239
- })
240
- ]
241
- })
242
- ]
243
- })
244
- ]
245
- });
69
+ Y: /\d/,
70
+ }, maskTrack: (data) => maskTrackDate(data, isRange) }), focused && (_jsxs(Box, { className: 'absolute top-full left-0 mt-1 z-1 w-max max-w-sm border border-primary1 shadow-xl bg-white rounded-lg overflow-hidden', children: [_jsx(Calendar, { value: innerValue ?? minDate ?? new Date(), onChange: handleSelect, locale: locale || 'en', selectRange: isRange, minDate: minDate, maxDate: maxDate, tileClassName: tileClassName, calendarType: calendarType, formatShortWeekday: (_, date) => format(date, 'EEEEE'), className: 'p-4', tileDisabled: tileDisabled, prevLabel: _jsx(IconCalendarArrowBack, { size: 24 }), nextLabel: _jsx(IconCalendarArrowForward, { size: 24 }), prev2Label: _jsx(IconCalendarDoubleArrowBack, { size: 24 }), next2Label: _jsx(IconCalendarDoubleArrowForward, { size: 24 }) }), _jsxs(Stack, { className: 'flex flex-row gap-2 p-4 border-t border-primary1', children: [_jsx(Button, { type: 'button', variant: 'outline', className: 'w-full text-sm p-3 h-10 tracking-[0.5px]', onClick: handleCancel, children: cancelButton?.label || 'cancel' }), _jsx(Button, { className: cn('w-full text-sm p-3 h-10 tracking-[0.5px]', isApplyDisabled &&
71
+ 'bg-primary1 hover:bg-primary1 cursor-not-allowed'), onClick: isApplyDisabled ? undefined : handleApply, children: applyButton?.label || 'done' })] })] }))] }));
246
72
  };
247
73
  export default DatePickerPopover;
74
+ //# sourceMappingURL=DatePickerPopover.js.map
@@ -1,3 +1,4 @@
1
- export var DATE_INPUT_FORMAT = 'DD-MM-YYYY';
2
- export var DATE_REGEX = /^(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
3
- export var DATERANGE_REGEX = /^(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}\s-\s(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
1
+ export const DATE_INPUT_FORMAT = 'DD-MM-YYYY';
2
+ export const DATE_REGEX = /^(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
3
+ export const DATERANGE_REGEX = /^(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}\s-\s(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
4
+ //# sourceMappingURL=constants.js.map
@@ -1,8 +1,15 @@
1
1
  import { format } from '@driveflux/time';
2
2
  import { DATE_INPUT_FORMAT } from './constants';
3
- export var formatPlaceholderBy = function formatPlaceholderBy(isRange) {
4
- return isRange ? "".concat(DATE_INPUT_FORMAT, " - ").concat(DATE_INPUT_FORMAT) : DATE_INPUT_FORMAT;
3
+ export const formatPlaceholderBy = (isRange) => {
4
+ return isRange
5
+ ? `${DATE_INPUT_FORMAT} - ${DATE_INPUT_FORMAT}`
6
+ : DATE_INPUT_FORMAT;
5
7
  };
6
- export var formatInputBy = function formatInputBy(value, _isRange) {
7
- return Array.isArray(value) ? "".concat(format(value[0]), " - ").concat(format(value[1])) : value ? format(value) : '';
8
+ export const formatInputBy = (value, _isRange) => {
9
+ return Array.isArray(value)
10
+ ? `${format(value[0])} - ${format(value[1])}`
11
+ : value
12
+ ? format(value)
13
+ : '';
8
14
  };
15
+ //# sourceMappingURL=utils.js.map