@driveflux/beam 3.0.19 → 3.0.20

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 +203 -7
  2. package/dist/accordion/Accordion.stories.js +31 -11
  3. package/dist/alert/Alert.js +193 -19
  4. package/dist/alert/Alert.stories.js +50 -15
  5. package/dist/animations/LoadingAnimation.js +34 -21
  6. package/dist/badge/Badge.js +105 -7
  7. package/dist/badge/Badge.stories.js +28 -7
  8. package/dist/box/Box.js +151 -3
  9. package/dist/box/Box.stories.js +8 -7
  10. package/dist/breadcrumbs/Breadcrumbs.js +351 -26
  11. package/dist/breadcrumbs/Breadcrumbs.stories.js +51 -27
  12. package/dist/button/Button.js +190 -12
  13. package/dist/button/Button.stories.js +35 -7
  14. package/dist/button/TextButton.js +168 -9
  15. package/dist/card/Card.js +188 -7
  16. package/dist/card/Card.stories.js +10 -7
  17. package/dist/carousel/Carousel.js +308 -58
  18. package/dist/carousel/Carousel.stories.js +39 -7
  19. package/dist/carousel/CarouselButton.js +132 -7
  20. package/dist/center/Center.js +127 -3
  21. package/dist/center/Center.stories.js +19 -7
  22. package/dist/checkbox/Checkbox.js +188 -4
  23. package/dist/checkbox/Checkbox.stories.js +10 -8
  24. package/dist/chip/Chip.js +168 -3
  25. package/dist/chip/Chip.stories.js +19 -7
  26. package/dist/circular-progress/CircularProgress.js +159 -11
  27. package/dist/circular-progress/CircularProgress.stories.js +54 -14
  28. package/dist/command/command.js +249 -13
  29. package/dist/datepicker/DatePicker.js +245 -90
  30. package/dist/datepicker/DatePicker.stories.js +162 -58
  31. package/dist/datepicker/DatePickerDrawer.js +115 -17
  32. package/dist/datepicker/DatePickerPopover.js +208 -35
  33. package/dist/datepicker/constants.js +3 -4
  34. package/dist/datepicker/utils.js +4 -11
  35. package/dist/dialog/index.js +253 -12
  36. package/dist/divider/Divider.js +127 -3
  37. package/dist/divider/Divider.stories.js +13 -7
  38. package/dist/drawer/index.js +230 -12
  39. package/dist/dropdown/Dropdown.js +297 -26
  40. package/dist/dropdown/Dropdown.stories.js +109 -22
  41. package/dist/field-wrapper/FieldWrapper.js +203 -3
  42. package/dist/field-wrapper/FieldWrapper.stories.js +124 -28
  43. package/dist/flex/Flex.js +127 -3
  44. package/dist/flex/Flex.stories.js +19 -7
  45. package/dist/grid/Grid.js +127 -3
  46. package/dist/grid/Grid.stories.js +28 -7
  47. package/dist/hooks/use-breakpoint-value.js +77 -14
  48. package/dist/hooks/use-media-query.js +61 -12
  49. package/dist/hstack/HStack.js +127 -3
  50. package/dist/hstack/HStack.stories.js +19 -7
  51. package/dist/icons/FluxLogo.js +222 -9
  52. package/dist/icons/FluxLogoTable.js +118 -5
  53. package/dist/icons/Icon.js +117 -7
  54. package/dist/icons/Icon.stories.js +12 -7
  55. package/dist/icons/Icon24Hours.js +92 -5
  56. package/dist/icons/IconAcceleration.js +81 -4
  57. package/dist/icons/IconAccount.js +81 -4
  58. package/dist/icons/IconApplicant.js +87 -5
  59. package/dist/icons/IconArrow.js +87 -6
  60. package/dist/icons/IconArrowBack.js +81 -4
  61. package/dist/icons/IconArrowForward.js +81 -4
  62. package/dist/icons/IconArrowTopLeft.js +79 -4
  63. package/dist/icons/IconBluesharkProductGuide.js +89 -5
  64. package/dist/icons/IconBolt.js +81 -4
  65. package/dist/icons/IconBriefcase.js +81 -4
  66. package/dist/icons/IconBulb.js +81 -4
  67. package/dist/icons/IconCalendar.js +81 -4
  68. package/dist/icons/IconCalendarArrowBack.js +81 -4
  69. package/dist/icons/IconCalendarArrowForward.js +81 -4
  70. package/dist/icons/IconCalendarDoubleArrowBack.js +81 -4
  71. package/dist/icons/IconCalendarDoubleArrowForward.js +81 -4
  72. package/dist/icons/IconCancel.js +86 -5
  73. package/dist/icons/IconCancelMark.js +81 -4
  74. package/dist/icons/IconCarSUV.js +81 -4
  75. package/dist/icons/IconCarSedan.js +156 -7
  76. package/dist/icons/IconChain.js +88 -5
  77. package/dist/icons/IconCheckmark.js +81 -4
  78. package/dist/icons/IconChevronRight.js +81 -4
  79. package/dist/icons/IconCircle.js +123 -11
  80. package/dist/icons/IconCircleCheckmark.js +86 -5
  81. package/dist/icons/IconCircleError.js +81 -4
  82. package/dist/icons/IconCircleExclamation.js +113 -6
  83. package/dist/icons/IconCircleMark.js +87 -5
  84. package/dist/icons/IconCircleOutline.js +148 -5
  85. package/dist/icons/IconClock.js +89 -5
  86. package/dist/icons/IconClose.js +81 -4
  87. package/dist/icons/IconCollapseAll.js +103 -5
  88. package/dist/icons/IconConcierge.js +88 -5
  89. package/dist/icons/IconConciergeService.js +96 -5
  90. package/dist/icons/IconCreditCard.js +87 -5
  91. package/dist/icons/IconDash.js +81 -4
  92. package/dist/icons/IconDeliver.js +81 -4
  93. package/dist/icons/IconDelivery.js +96 -5
  94. package/dist/icons/IconDetails.js +81 -4
  95. package/dist/icons/IconDot.js +96 -6
  96. package/dist/icons/IconDownload.js +88 -5
  97. package/dist/icons/IconEVCharging.js +88 -5
  98. package/dist/icons/IconElectricCarFuel.js +89 -5
  99. package/dist/icons/IconEllipsis.js +87 -5
  100. package/dist/icons/IconEnvelope.js +81 -4
  101. package/dist/icons/IconExpandAll.js +103 -5
  102. package/dist/icons/IconEye.js +88 -5
  103. package/dist/icons/IconFacebook.js +103 -6
  104. package/dist/icons/IconFilter.js +92 -5
  105. package/dist/icons/IconFlagMalaysia.js +150 -5
  106. package/dist/icons/IconGiveKey.js +88 -5
  107. package/dist/icons/IconGlobe.js +79 -4
  108. package/dist/icons/IconGoogle.js +96 -5
  109. package/dist/icons/IconHome.js +87 -5
  110. package/dist/icons/IconHostAdvertise.js +81 -4
  111. package/dist/icons/IconHostCar.js +84 -4
  112. package/dist/icons/IconHostCash.js +100 -5
  113. package/dist/icons/IconHostHandle.js +79 -4
  114. package/dist/icons/IconHostLocation.js +79 -4
  115. package/dist/icons/IconHostPayment.js +100 -5
  116. package/dist/icons/IconHostService.js +88 -5
  117. package/dist/icons/IconHotDeals.js +81 -4
  118. package/dist/icons/IconInfo.js +86 -5
  119. package/dist/icons/IconInstagram.js +81 -4
  120. package/dist/icons/IconInsurance.js +108 -5
  121. package/dist/icons/IconInternet.js +82 -4
  122. package/dist/icons/IconInventory.js +87 -5
  123. package/dist/icons/IconLaurel.js +110 -5
  124. package/dist/icons/IconLinkedIn.js +81 -4
  125. package/dist/icons/IconLoading.js +87 -4
  126. package/dist/icons/IconLocation.js +89 -5
  127. package/dist/icons/IconLock.js +82 -4
  128. package/dist/icons/IconLogistics.js +81 -4
  129. package/dist/icons/IconMail.js +103 -5
  130. package/dist/icons/IconMember.js +87 -5
  131. package/dist/icons/IconMobilePen.js +92 -5
  132. package/dist/icons/IconMotorcycleMoped.js +87 -5
  133. package/dist/icons/IconNoCost.js +101 -5
  134. package/dist/icons/IconPDF.js +89 -5
  135. package/dist/icons/IconPencil.js +79 -4
  136. package/dist/icons/IconPhone.js +79 -4
  137. package/dist/icons/IconPlus.js +81 -4
  138. package/dist/icons/IconPricing.js +81 -4
  139. package/dist/icons/IconProtected.js +80 -4
  140. package/dist/icons/IconPsychology.js +81 -4
  141. package/dist/icons/IconQuestionTooltip.js +137 -4
  142. package/dist/icons/IconQuote.js +81 -4
  143. package/dist/icons/IconRate.js +80 -4
  144. package/dist/icons/IconRegister.js +108 -5
  145. package/dist/icons/IconReport.js +98 -6
  146. package/dist/icons/IconReturn.js +81 -4
  147. package/dist/icons/IconSearch.js +79 -4
  148. package/dist/icons/IconSecure.js +80 -4
  149. package/dist/icons/IconSecurity.js +82 -4
  150. package/dist/icons/IconSedanOutline.js +168 -5
  151. package/dist/icons/IconSelectArrow.js +87 -6
  152. package/dist/icons/IconSort.js +88 -5
  153. package/dist/icons/IconSortListed.js +104 -5
  154. package/dist/icons/IconSortPriceAscending.js +92 -5
  155. package/dist/icons/IconSortPriceDescending.js +92 -5
  156. package/dist/icons/IconSortYear.js +88 -5
  157. package/dist/icons/IconSpan.js +80 -4
  158. package/dist/icons/IconSpeaker.js +88 -4
  159. package/dist/icons/IconSpecialCar.js +104 -5
  160. package/dist/icons/IconStar.js +101 -7
  161. package/dist/icons/IconStockPhoto.js +104 -5
  162. package/dist/icons/IconSubscription.js +122 -6
  163. package/dist/icons/IconSubscriptions.js +122 -6
  164. package/dist/icons/IconSwap.js +88 -5
  165. package/dist/icons/IconTax.js +81 -4
  166. package/dist/icons/IconThinArrow.js +87 -6
  167. package/dist/icons/IconThumbsdown.js +87 -5
  168. package/dist/icons/IconThumbsup.js +87 -5
  169. package/dist/icons/IconTool.js +81 -4
  170. package/dist/icons/IconTooltip.js +137 -4
  171. package/dist/icons/IconTrash.js +81 -4
  172. package/dist/icons/IconTriangleExclamation.js +81 -4
  173. package/dist/icons/IconTyersBrakes.js +92 -5
  174. package/dist/icons/IconTyre.js +92 -5
  175. package/dist/icons/IconVacancy.js +87 -5
  176. package/dist/icons/IconVolunteer.js +81 -4
  177. package/dist/icons/IconWhatsapp.js +82 -4
  178. package/dist/icons/IconXPlatform.js +81 -4
  179. package/dist/icons/IconZeroEffort.js +86 -5
  180. package/dist/icons/Logo.js +108 -3
  181. package/dist/input/Input.js +134 -11
  182. package/dist/input/Input.stories.js +17 -18
  183. package/dist/input-mask/InputMask.js +158 -11
  184. package/dist/input-mask/InputMask.stories.js +5 -6
  185. package/dist/input-mask/mask-trackers.js +4 -5
  186. package/dist/input-select/InputSelect.js +390 -68
  187. package/dist/input-select/InputSelect.stories.js +98 -25
  188. package/dist/popover/popover.js +136 -4
  189. package/dist/progress/Progress.js +160 -2
  190. package/dist/progress/Progress.stories.js +13 -14
  191. package/dist/radio/Radio.js +227 -4
  192. package/dist/scroll-area/scroll-area.js +180 -5
  193. package/dist/search-input-select/SearchInputSelect.js +379 -69
  194. package/dist/select/Select.js +354 -29
  195. package/dist/select/Select.stories.js +55 -19
  196. package/dist/skeleton/Skeleton.js +71 -3
  197. package/dist/skeleton/Skeleton.stories.js +8 -7
  198. package/dist/slider/Slider.js +170 -5
  199. package/dist/slider/Slider.stories.js +12 -11
  200. package/dist/stack/Stack.js +127 -3
  201. package/dist/stack/Stack.stories.js +19 -7
  202. package/dist/table/Table.js +216 -10
  203. package/dist/table/Table.stories.js +84 -8
  204. package/dist/tabs/Tabs.js +198 -9
  205. package/dist/tabs/Tabs.stories.js +46 -13
  206. package/dist/text/Text.js +152 -6
  207. package/dist/text/Text.stories.js +44 -7
  208. package/dist/toast/Toast.stories.js +66 -14
  209. package/dist/toast/ToastBox.js +77 -29
  210. package/dist/toast/index.js +0 -1
  211. package/dist/toast/sonner.js +66 -6
  212. package/dist/toggle/Toggle.js +180 -7
  213. package/dist/toggle/Toggle.stories.js +10 -8
  214. package/dist/tooltip/Tooltip.js +169 -12
  215. package/dist/tooltip/Tooltip.stories.js +71 -13
  216. package/dist/utils.js +4 -2
  217. package/dist/vstack/VStack.js +127 -3
  218. package/dist/vstack/VStack.stories.js +19 -7
  219. package/package.json +11 -11
@@ -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,27 +17,125 @@ 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
- 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) => {
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) {
24
24
  setFocused(open);
25
25
  if (!open) {
26
26
  handleCancel();
27
27
  }
28
28
  };
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);
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);
37
32
  return cn('flex item-center justify-center text-center', additionalClassNames);
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' })] })] }) }));
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
+ });
41
140
  };
42
141
  export default DatePickerDrawer;
43
- //# sourceMappingURL=DatePickerDrawer.js.map
@@ -1,4 +1,102 @@
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
+ }
2
100
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
101
  import { format } from 'date-fns';
4
102
  import { useEffect, useRef } from 'react';
@@ -16,59 +114,134 @@ import Stack from '../stack/Stack';
16
114
  import { cn } from '../utils';
17
115
  import { DATE_REGEX, DATERANGE_REGEX } from './constants';
18
116
  import { formatPlaceholderBy } from './utils';
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);
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);
26
125
  if (isRange && DATERANGE_REGEX.test(value)) {
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}`);
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));
32
131
  if (formattedStartDate >= formattedEndDate) {
33
- onError?.('start-gte-end');
132
+ onError === null || onError === void 0 ? void 0 : onError('start-gte-end');
34
133
  return;
35
134
  }
36
- setInnerValue?.([formattedStartDate, formattedEndDate]);
135
+ setInnerValue === null || setInnerValue === void 0 ? void 0 : setInnerValue([
136
+ formattedStartDate,
137
+ formattedEndDate
138
+ ]);
37
139
  return;
38
140
  }
39
141
  if (!isRange && DATE_REGEX.test(value)) {
40
- const [day, month, year] = value.split('-');
41
- setInnerValue?.(new Date(`${year}-${month}-${day}`));
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)));
42
144
  return;
43
145
  }
44
146
  };
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;
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;
56
154
  setFocused(open);
57
155
  if (!open) {
58
156
  handleCancel();
59
157
  }
60
158
  };
61
159
  document.addEventListener('click', handleClick);
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: () => {
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() {
65
182
  !isDisabled && setFocused(true);
66
- }, ...inputProps, mask: formatPlaceholderBy(isRange), maskReplacement: {
183
+ }
184
+ }, inputProps), {
185
+ mask: formatPlaceholderBy(isRange),
186
+ maskReplacement: {
67
187
  D: /\d/,
68
188
  M: /\d/,
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' })] })] }))] }));
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
+ });
72
246
  };
73
247
  export default DatePickerPopover;
74
- //# sourceMappingURL=DatePickerPopover.js.map
@@ -1,4 +1,3 @@
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
+ 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,15 +1,8 @@
1
1
  import { format } from '@driveflux/time';
2
2
  import { DATE_INPUT_FORMAT } from './constants';
3
- export const formatPlaceholderBy = (isRange) => {
4
- return isRange
5
- ? `${DATE_INPUT_FORMAT} - ${DATE_INPUT_FORMAT}`
6
- : DATE_INPUT_FORMAT;
3
+ export var formatPlaceholderBy = function formatPlaceholderBy(isRange) {
4
+ return isRange ? "".concat(DATE_INPUT_FORMAT, " - ").concat(DATE_INPUT_FORMAT) : DATE_INPUT_FORMAT;
7
5
  };
8
- export const formatInputBy = (value, _isRange) => {
9
- return Array.isArray(value)
10
- ? `${format(value[0])} - ${format(value[1])}`
11
- : value
12
- ? format(value)
13
- : '';
6
+ export var formatInputBy = function formatInputBy(value, _isRange) {
7
+ return Array.isArray(value) ? "".concat(format(value[0]), " - ").concat(format(value[1])) : value ? format(value) : '';
14
8
  };
15
- //# sourceMappingURL=utils.js.map