@driveflux/beam 2.0.11 → 2.0.13

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 (235) hide show
  1. package/dist/accordion/Accordion.js +7 -133
  2. package/dist/accordion/Accordion.stories.js +11 -31
  3. package/dist/alert/Alert.js +14 -110
  4. package/dist/alert/Alert.stories.js +15 -50
  5. package/dist/animations/LoadingAnimation.js +21 -34
  6. package/dist/badge/Badge.js +7 -96
  7. package/dist/badge/Badge.stories.js +7 -28
  8. package/dist/base-styles.css +4 -5
  9. package/dist/box/Box.js +3 -87
  10. package/dist/box/Box.stories.js +7 -8
  11. package/dist/breadcrumbs/Breadcrumbs.js +28 -288
  12. package/dist/breadcrumbs/Breadcrumbs.stories.js +27 -51
  13. package/dist/button/Button.js +12 -124
  14. package/dist/button/Button.stories.js +7 -35
  15. package/dist/card/Card.js +7 -109
  16. package/dist/card/Card.stories.js +7 -10
  17. package/dist/carousel/Carousel.js +58 -281
  18. package/dist/carousel/Carousel.stories.js +7 -39
  19. package/dist/carousel/CarouselButton.js +7 -68
  20. package/dist/center/Center.js +3 -63
  21. package/dist/center/Center.stories.js +7 -19
  22. package/dist/checkbox/Checkbox.js +4 -124
  23. package/dist/checkbox/Checkbox.stories.js +8 -10
  24. package/dist/chip/Chip.js +3 -104
  25. package/dist/chip/Chip.stories.js +7 -19
  26. package/dist/circular-progress/CircularProgress.js +11 -150
  27. package/dist/circular-progress/CircularProgress.stories.js +14 -54
  28. package/dist/command/command.js +13 -170
  29. package/dist/datepicker/DatePicker.js +27 -127
  30. package/dist/datepicker/DatePicker.stories.js +58 -163
  31. package/dist/datepicker/DatePickerDrawer.js +14 -110
  32. package/dist/datepicker/DatePickerPopover.js +35 -207
  33. package/dist/datepicker/constants.js +4 -3
  34. package/dist/datepicker/root-calendar.css +58 -58
  35. package/dist/datepicker/utils.js +11 -4
  36. package/dist/dialog/index.js +12 -144
  37. package/dist/divider/Divider.js +3 -63
  38. package/dist/divider/Divider.stories.js +7 -13
  39. package/dist/drawer/index.js +12 -157
  40. package/dist/dropdown/Dropdown.js +26 -212
  41. package/dist/dropdown/Dropdown.stories.js +22 -109
  42. package/dist/field-wrapper/FieldWrapper.js +3 -139
  43. package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
  44. package/dist/flex/Flex.js +3 -63
  45. package/dist/flex/Flex.stories.js +7 -19
  46. package/dist/grid/Grid.js +3 -63
  47. package/dist/grid/Grid.stories.js +7 -28
  48. package/dist/hooks/use-breakpoint-value.js +14 -77
  49. package/dist/hooks/use-media-query.js +12 -61
  50. package/dist/hstack/HStack.js +3 -63
  51. package/dist/hstack/HStack.stories.js +7 -19
  52. package/dist/icons/FluxLogo.js +9 -213
  53. package/dist/icons/FluxLogoTable.js +5 -109
  54. package/dist/icons/Icon.js +7 -108
  55. package/dist/icons/Icon.stories.js +7 -12
  56. package/dist/icons/Icon24Hours.js +5 -83
  57. package/dist/icons/IconAcceleration.js +4 -72
  58. package/dist/icons/IconAccount.js +4 -72
  59. package/dist/icons/IconApplicant.js +5 -78
  60. package/dist/icons/IconArrow.js +6 -78
  61. package/dist/icons/IconArrowBack.js +4 -72
  62. package/dist/icons/IconArrowForward.js +4 -72
  63. package/dist/icons/IconArrowTopLeft.js +4 -70
  64. package/dist/icons/IconBluesharkProductGuide.js +5 -80
  65. package/dist/icons/IconBolt.js +4 -72
  66. package/dist/icons/IconBriefcase.js +4 -72
  67. package/dist/icons/IconBulb.js +4 -72
  68. package/dist/icons/IconCalendar.js +4 -72
  69. package/dist/icons/IconCalendarArrowBack.js +4 -72
  70. package/dist/icons/IconCalendarArrowForward.js +4 -72
  71. package/dist/icons/IconCalendarDoubleArrowBack.js +4 -72
  72. package/dist/icons/IconCalendarDoubleArrowForward.js +4 -72
  73. package/dist/icons/IconCancel.js +6 -85
  74. package/dist/icons/IconCancelMark.js +4 -72
  75. package/dist/icons/IconCarSUV.js +4 -72
  76. package/dist/icons/IconCarSedan.js +7 -147
  77. package/dist/icons/IconChain.js +5 -79
  78. package/dist/icons/IconCheckmark.js +4 -72
  79. package/dist/icons/IconChevronRight.js +4 -72
  80. package/dist/icons/IconCircle.js +11 -114
  81. package/dist/icons/IconCircleCheckmark.js +5 -77
  82. package/dist/icons/IconCircleError.js +4 -72
  83. package/dist/icons/IconCircleExclamation.js +6 -104
  84. package/dist/icons/IconCircleMark.js +5 -78
  85. package/dist/icons/IconCircleOutline.d.ts.map +1 -1
  86. package/dist/icons/IconCircleOutline.js +5 -140
  87. package/dist/icons/IconCircleOutline.js.map +1 -1
  88. package/dist/icons/IconClock.js +5 -80
  89. package/dist/icons/IconClose.js +4 -72
  90. package/dist/icons/IconCollapseAll.d.ts +8 -0
  91. package/dist/icons/IconCollapseAll.d.ts.map +1 -0
  92. package/dist/icons/IconCollapseAll.js +8 -0
  93. package/dist/icons/IconCollapseAll.js.map +1 -0
  94. package/dist/icons/IconConcierge.js +5 -79
  95. package/dist/icons/IconConciergeService.js +5 -87
  96. package/dist/icons/IconCreditCard.js +5 -78
  97. package/dist/icons/IconDash.js +4 -72
  98. package/dist/icons/IconDeliver.js +4 -72
  99. package/dist/icons/IconDelivery.js +5 -87
  100. package/dist/icons/IconDetails.js +4 -72
  101. package/dist/icons/IconDot.js +6 -87
  102. package/dist/icons/IconDownload.d.ts +8 -0
  103. package/dist/icons/IconDownload.d.ts.map +1 -0
  104. package/dist/icons/IconDownload.js +8 -0
  105. package/dist/icons/IconDownload.js.map +1 -0
  106. package/dist/icons/IconEVCharging.js +5 -79
  107. package/dist/icons/IconElectricCarFuel.js +5 -80
  108. package/dist/icons/IconEllipsis.js +5 -78
  109. package/dist/icons/IconEnvelope.js +4 -72
  110. package/dist/icons/IconExpandAll.d.ts +8 -0
  111. package/dist/icons/IconExpandAll.d.ts.map +1 -0
  112. package/dist/icons/IconExpandAll.js +8 -0
  113. package/dist/icons/IconExpandAll.js.map +1 -0
  114. package/dist/icons/IconEye.js +5 -79
  115. package/dist/icons/IconFacebook.js +6 -94
  116. package/dist/icons/IconFilter.js +5 -83
  117. package/dist/icons/IconFlagMalaysia.js +5 -141
  118. package/dist/icons/IconGiveKey.js +5 -79
  119. package/dist/icons/IconGlobe.js +4 -70
  120. package/dist/icons/IconGoogle.js +5 -87
  121. package/dist/icons/IconHome.js +5 -78
  122. package/dist/icons/IconHostAdvertise.js +4 -72
  123. package/dist/icons/IconHostCar.js +4 -75
  124. package/dist/icons/IconHostCash.js +5 -91
  125. package/dist/icons/IconHostHandle.js +4 -70
  126. package/dist/icons/IconHostLocation.js +4 -70
  127. package/dist/icons/IconHostPayment.js +5 -91
  128. package/dist/icons/IconHostService.js +5 -79
  129. package/dist/icons/IconHotDeals.js +4 -72
  130. package/dist/icons/IconInfo.js +5 -77
  131. package/dist/icons/IconInstagram.js +4 -72
  132. package/dist/icons/IconInsurance.js +5 -99
  133. package/dist/icons/IconInternet.js +4 -73
  134. package/dist/icons/IconInventory.js +5 -78
  135. package/dist/icons/IconLaurel.js +5 -101
  136. package/dist/icons/IconLinkedIn.js +4 -72
  137. package/dist/icons/IconLoading.js +4 -78
  138. package/dist/icons/IconLocation.js +5 -80
  139. package/dist/icons/IconLock.js +4 -73
  140. package/dist/icons/IconLogistics.js +4 -72
  141. package/dist/icons/IconMail.js +5 -94
  142. package/dist/icons/IconMember.js +5 -78
  143. package/dist/icons/IconMobilePen.js +5 -83
  144. package/dist/icons/IconMotorcycleMoped.js +5 -78
  145. package/dist/icons/IconNoCost.js +5 -92
  146. package/dist/icons/IconPDF.js +5 -80
  147. package/dist/icons/IconPencil.js +4 -70
  148. package/dist/icons/IconPhone.js +4 -70
  149. package/dist/icons/IconPlus.js +4 -72
  150. package/dist/icons/IconPricing.js +4 -72
  151. package/dist/icons/IconProtected.js +4 -71
  152. package/dist/icons/IconPsychology.js +4 -72
  153. package/dist/icons/IconQuestionTooltip.js +4 -73
  154. package/dist/icons/IconQuote.js +4 -72
  155. package/dist/icons/IconRate.js +4 -71
  156. package/dist/icons/IconRegister.js +5 -99
  157. package/dist/icons/IconReport.d.ts +9 -0
  158. package/dist/icons/IconReport.d.ts.map +1 -0
  159. package/dist/icons/IconReport.js +9 -0
  160. package/dist/icons/IconReport.js.map +1 -0
  161. package/dist/icons/IconReturn.js +4 -72
  162. package/dist/icons/IconSearch.js +4 -70
  163. package/dist/icons/IconSecure.js +4 -71
  164. package/dist/icons/IconSecurity.js +4 -73
  165. package/dist/icons/IconSedanOutline.js +5 -159
  166. package/dist/icons/IconSelectArrow.js +6 -78
  167. package/dist/icons/IconSort.js +5 -79
  168. package/dist/icons/IconSortListed.js +5 -95
  169. package/dist/icons/IconSortPriceAscending.js +5 -83
  170. package/dist/icons/IconSortPriceDescending.js +5 -83
  171. package/dist/icons/IconSortYear.js +5 -79
  172. package/dist/icons/IconSpan.js +4 -71
  173. package/dist/icons/IconSpeaker.js +4 -79
  174. package/dist/icons/IconSpecialCar.js +5 -95
  175. package/dist/icons/IconStar.js +7 -92
  176. package/dist/icons/IconStockPhoto.js +5 -95
  177. package/dist/icons/IconSubscription.js +6 -113
  178. package/dist/icons/IconSubscriptions.js +6 -113
  179. package/dist/icons/IconSwap.js +5 -79
  180. package/dist/icons/IconTax.js +4 -72
  181. package/dist/icons/IconThinArrow.js +6 -78
  182. package/dist/icons/IconThumbsdown.js +5 -78
  183. package/dist/icons/IconThumbsup.js +5 -78
  184. package/dist/icons/IconTool.js +4 -72
  185. package/dist/icons/IconTooltip.js +4 -73
  186. package/dist/icons/IconTrash.js +4 -72
  187. package/dist/icons/IconTriangleExclamation.js +4 -72
  188. package/dist/icons/IconTyersBrakes.js +5 -83
  189. package/dist/icons/IconTyre.js +5 -83
  190. package/dist/icons/IconVacancy.js +5 -78
  191. package/dist/icons/IconVolunteer.js +4 -72
  192. package/dist/icons/IconWhatsapp.js +4 -73
  193. package/dist/icons/IconXPlatform.js +4 -72
  194. package/dist/icons/IconZeroEffort.js +5 -77
  195. package/dist/icons/Logo.js +3 -99
  196. package/dist/input/Input.js +11 -125
  197. package/dist/input/Input.stories.js +18 -17
  198. package/dist/input-mask/InputMask.js +11 -149
  199. package/dist/input-mask/InputMask.stories.js +6 -5
  200. package/dist/input-mask/mask-trackers.js +5 -4
  201. package/dist/input-select/InputSelect.js +68 -357
  202. package/dist/input-select/InputSelect.stories.js +25 -98
  203. package/dist/popover/popover.js +4 -72
  204. package/dist/progress/Progress.js +2 -96
  205. package/dist/progress/Progress.stories.js +14 -13
  206. package/dist/radio/Radio.js +4 -163
  207. package/dist/scroll-area/scroll-area.js +5 -113
  208. package/dist/search-input-select/SearchInputSelect.js +69 -346
  209. package/dist/select/Select.js +29 -315
  210. package/dist/select/Select.stories.js +19 -55
  211. package/dist/skeleton/Skeleton.js +3 -62
  212. package/dist/skeleton/Skeleton.stories.js +7 -8
  213. package/dist/slider/Slider.js +5 -106
  214. package/dist/slider/Slider.stories.js +11 -12
  215. package/dist/stack/Stack.js +3 -63
  216. package/dist/stack/Stack.stories.js +7 -19
  217. package/dist/styles.css +4 -5
  218. package/dist/table/Table.js +10 -131
  219. package/dist/table/Table.stories.js +8 -84
  220. package/dist/tabs/Tabs.js +9 -128
  221. package/dist/tabs/Tabs.stories.js +13 -46
  222. package/dist/text/Text.js +6 -88
  223. package/dist/text/Text.stories.js +7 -44
  224. package/dist/toast/Toast.stories.js +14 -66
  225. package/dist/toast/ToastBox.js +24 -71
  226. package/dist/toast/index.js +1 -0
  227. package/dist/toast/sonner.js +11 -70
  228. package/dist/toggle/Toggle.js +7 -116
  229. package/dist/toggle/Toggle.stories.js +8 -10
  230. package/dist/tooltip/Tooltip.js +12 -151
  231. package/dist/tooltip/Tooltip.stories.js +13 -71
  232. package/dist/utils.js +2 -4
  233. package/dist/vstack/VStack.js +3 -63
  234. package/dist/vstack/VStack.stories.js +7 -19
  235. package/package.json +4 -4
@@ -4,7 +4,7 @@ import { format } from 'date-fns';
4
4
  import Calendar from 'react-calendar';
5
5
  import Box from '../box/Box';
6
6
  import Button from '../button/Button';
7
- import { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '../drawer';
7
+ import { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger, } from '../drawer';
8
8
  import FieldWrapper from '../field-wrapper/FieldWrapper';
9
9
  import IconCalendar from '../icons/IconCalendar';
10
10
  import IconCalendarArrowBack from '../icons/IconCalendarArrowBack';
@@ -16,119 +16,23 @@ import Stack from '../stack/Stack';
16
16
  import Text from '../text/Text';
17
17
  import { cn } from '../utils';
18
18
  import { formatInputBy } from './utils';
19
- var DatePickerDrawer = function(param) {
20
- 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, error = param.error, // non-customized props
21
- innerValue = param.innerValue, setInnerValue = param.setInnerValue, focused = param.focused, setFocused = param.setFocused, handleSelect = param.handleSelect, handleCancel = param.handleCancel, handleApply = param.handleApply;
22
- var handleOpenChange = function(open) {
19
+ const DatePickerDrawer = ({ htmlFor = 'datepicker', locale = 'en', isRange, value: providedValue, minDate, maxDate, placeholder, calendarType, isDisabled, inputProps, drawerTitle, cancelButton, applyButton, tileDisabled, error,
20
+ // non-customized props
21
+ innerValue, setInnerValue, focused, setFocused, handleSelect, handleCancel, handleApply, }) => {
22
+ const handleOpenChange = (open) => {
23
23
  setFocused(open);
24
24
  if (!open) {
25
25
  handleCancel();
26
26
  }
27
27
  };
28
- var isApplyDisabled = !innerValue || isRange && (!Array.isArray(innerValue) || innerValue.length !== 2 || !innerValue[0] || !innerValue[1]);
29
- return /*#__PURE__*/ _jsx(FieldWrapper, {
30
- htmlFor: htmlFor,
31
- label: inputProps === null || inputProps === void 0 ? void 0 : inputProps.label,
32
- error: error,
33
- className: 'w-full',
34
- children: /*#__PURE__*/ _jsxs(Drawer, {
35
- open: focused,
36
- onOpenChange: handleOpenChange,
37
- children: [
38
- /*#__PURE__*/ _jsx(DrawerTrigger, {
39
- asChild: true,
40
- disabled: isDisabled,
41
- className: 'w-full',
42
- children: /*#__PURE__*/ _jsxs(Box, {
43
- className: cn('flex flex-row p-3 border border-primary2 cursor-pointer hover:border-primary4', isDisabled && 'bg-primary2', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4'),
44
- children: [
45
- innerValue ? /*#__PURE__*/ _jsx(Text, {
46
- className: "flex-1",
47
- children: formatInputBy(innerValue, isRange)
48
- }) : /*#__PURE__*/ _jsx(Text, {
49
- className: 'flex-1 text-primary2',
50
- children: placeholder || 'DD-MM-YYYY'
51
- }),
52
- /*#__PURE__*/ _jsx(IconCalendar, {
53
- size: '16px'
54
- })
55
- ]
56
- })
57
- }),
58
- /*#__PURE__*/ _jsxs(DrawerContent, {
59
- hideGrabber: true,
60
- className: 'datepicker-content flex flex-col items-stretch rounded-none',
61
- children: [
62
- /*#__PURE__*/ _jsxs(DrawerHeader, {
63
- className: 'flex items-center justify-between py-4 px-6',
64
- children: [
65
- /*#__PURE__*/ _jsx(DrawerTitle, {
66
- children: /*#__PURE__*/ _jsx(Text, {
67
- className: 'text-xl font-bold uppercase',
68
- children: drawerTitle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.label) || 'date'
69
- })
70
- }),
71
- /*#__PURE__*/ _jsx(DrawerClose, {
72
- className: 'text-primary3',
73
- children: /*#__PURE__*/ _jsx(IconClose, {
74
- className: 'w-4 h-4 lg:w-6 lg:h-6'
75
- })
76
- })
77
- ]
78
- }),
79
- /*#__PURE__*/ _jsx(Calendar, {
80
- value: innerValue,
81
- onChange: handleSelect,
82
- locale: locale || 'en',
83
- selectRange: isRange,
84
- minDate: minDate,
85
- maxDate: maxDate,
86
- calendarType: calendarType,
87
- formatShortWeekday: function(_, date) {
88
- return format(date, 'EEEEE');
89
- },
90
- className: 'p-6',
91
- tileDisabled: tileDisabled,
92
- tileClassName: 'flex item-center justify-center text-center',
93
- prevLabel: /*#__PURE__*/ _jsx(IconCalendarArrowBack, {
94
- size: 24
95
- }),
96
- nextLabel: /*#__PURE__*/ _jsx(IconCalendarArrowForward, {
97
- size: 24
98
- }),
99
- prev2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowBack, {
100
- size: 24
101
- }),
102
- next2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowForward, {
103
- size: 24
104
- })
105
- }),
106
- /*#__PURE__*/ _jsxs(Stack, {
107
- className: 'flex flex-row gap-2 py-4 px-6 border-t border-primary1',
108
- children: [
109
- /*#__PURE__*/ _jsx(Button, {
110
- type: 'button',
111
- variant: 'outline',
112
- className: 'w-full text-sm p-3 h-10 tracking-[0.5px]',
113
- onClick: function() {
114
- return handleOpenChange(false);
115
- },
116
- children: (cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.label) || 'cancel'
117
- }),
118
- /*#__PURE__*/ _jsx(Button, {
119
- className: cn('w-full text-sm p-3 h-10 tracking-[0.5px]', isApplyDisabled && 'bg-primary1 hover:bg-primary1'),
120
- onClick: isApplyDisabled ? undefined : handleApply,
121
- children: (applyButton === null || applyButton === void 0 ? void 0 : applyButton.label) || 'done'
122
- })
123
- ]
124
- }),
125
- /*#__PURE__*/ _jsx(Box, {
126
- className: 'h-safe-bottom-edge'
127
- })
128
- ]
129
- })
130
- ]
131
- })
132
- });
28
+ const isApplyDisabled = !innerValue ||
29
+ (isRange &&
30
+ (!Array.isArray(innerValue) ||
31
+ innerValue.length !== 2 ||
32
+ !innerValue[0] ||
33
+ !innerValue[1]));
34
+ 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', isDisabled && 'bg-primary2', error &&
35
+ '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 rounded-none', 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: 'flex item-center justify-center text-center', 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' })] })] }) }));
133
36
  };
134
37
  export default DatePickerDrawer;
38
+ //# 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,133 +16,59 @@ import Stack from '../stack/Stack';
114
16
  import { cn } from '../utils';
115
17
  import { DATERANGE_REGEX, DATE_REGEX } from './constants';
116
18
  import { formatPlaceholderBy } from './utils';
117
- var DatePickerPopover = function(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, 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 containerRef = useRef(null);
121
- var handleChange = function(e) {
122
- var value = e.target.value;
123
- 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, 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);
124
26
  if (isRange && DATERANGE_REGEX.test(value)) {
125
- var _value_split = _sliced_to_array(value.split(' - '), 2), startDate = _value_split[0], endDate = _value_split[1];
126
- var _startDate_split = _sliced_to_array(startDate.split('/'), 3), startDay = _startDate_split[0], startMonth = _startDate_split[1], startYear = _startDate_split[2];
127
- var _endDate_split = _sliced_to_array(endDate.split('/'), 3), endDay = _endDate_split[0], endMonth = _endDate_split[1], endYear = _endDate_split[2];
128
- var formattedStartDate = new Date("".concat(startYear, "-").concat(startMonth, "-").concat(startDay));
129
- 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}`);
130
32
  if (formattedStartDate >= formattedEndDate) {
131
- onError === null || onError === void 0 ? void 0 : onError('start-gte-end');
33
+ onError?.('start-gte-end');
132
34
  return;
133
35
  }
134
- setInnerValue === null || setInnerValue === void 0 ? void 0 : setInnerValue([
135
- formattedStartDate,
136
- formattedEndDate
137
- ]);
36
+ setInnerValue?.([formattedStartDate, formattedEndDate]);
138
37
  return;
139
38
  }
140
39
  if (!isRange && DATE_REGEX.test(value)) {
141
- var _value_split1 = _sliced_to_array(value.split('-'), 3), day = _value_split1[0], month = _value_split1[1], year = _value_split1[2];
142
- 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}`));
143
42
  return;
144
43
  }
145
44
  };
146
- var isApplyDisabled = !innerValue || isRange && (!Array.isArray(innerValue) || innerValue.length !== 2 || !innerValue[0] || !innerValue[1]);
147
- useEffect(function() {
148
- var handleClick = function(e) {
149
- var _containerRef_current;
150
- var targetElement = e.target;
151
- var isCalendarClick = targetElement.closest('.react-calendar__tile');
152
- 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;
153
56
  setFocused(open);
154
57
  if (!open) {
155
58
  handleCancel();
156
59
  }
157
60
  };
158
61
  document.addEventListener('click', handleClick);
159
- return function() {
160
- return document.removeEventListener('click', handleClick);
161
- };
162
- }, [
163
- setFocused,
164
- handleCancel
165
- ]);
166
- var _ref;
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() {
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(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',
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
- calendarType: calendarType,
206
- formatShortWeekday: function(_, date) {
207
- return format(date, 'EEEEE');
208
- },
209
- className: 'p-4',
210
- tileDisabled: tileDisabled,
211
- prevLabel: /*#__PURE__*/ _jsx(IconCalendarArrowBack, {
212
- size: 24
213
- }),
214
- nextLabel: /*#__PURE__*/ _jsx(IconCalendarArrowForward, {
215
- size: 24
216
- }),
217
- prev2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowBack, {
218
- size: 24
219
- }),
220
- next2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowForward, {
221
- size: 24
222
- })
223
- }),
224
- /*#__PURE__*/ _jsxs(Stack, {
225
- className: 'flex flex-row gap-2 p-4 border-t border-primary1',
226
- children: [
227
- /*#__PURE__*/ _jsx(Button, {
228
- type: 'button',
229
- variant: 'outline',
230
- className: 'w-full text-sm p-3 h-10 tracking-[0.5px]',
231
- onClick: handleCancel,
232
- children: (cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.label) || 'cancel'
233
- }),
234
- /*#__PURE__*/ _jsx(Button, {
235
- className: cn('w-full text-sm p-3 h-10 tracking-[0.5px]', isApplyDisabled && 'bg-primary1 hover:bg-primary1 cursor-not-allowed'),
236
- onClick: isApplyDisabled ? undefined : handleApply,
237
- children: (applyButton === null || applyButton === void 0 ? void 0 : applyButton.label) || 'done'
238
- })
239
- ]
240
- })
241
- ]
242
- })
243
- ]
244
- });
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', children: [_jsx(Calendar, { value: innerValue ?? minDate ?? new Date(), onChange: handleSelect, locale: locale || 'en', selectRange: isRange, minDate: minDate, maxDate: maxDate, 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' })] })] }))] }));
245
72
  };
246
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,155 +1,155 @@
1
1
  .react-calendar {
2
- width: 350px;
3
- max-width: 100%;
4
- background: white;
5
- border: 1px solid #a0a096;
6
- font-family: "Arial", "Helvetica", sans-serif;
7
- line-height: 1.125em;
2
+ width: 350px;
3
+ max-width: 100%;
4
+ background: white;
5
+ border: 1px solid #a0a096;
6
+ font-family: 'Arial', 'Helvetica', sans-serif;
7
+ line-height: 1.125em;
8
8
  }
9
9
 
10
10
  .react-calendar--doubleView {
11
- width: 700px;
11
+ width: 700px;
12
12
  }
13
13
 
14
14
  .react-calendar--doubleView .react-calendar__viewContainer {
15
- display: flex;
16
- margin: -0.5em;
15
+ display: flex;
16
+ margin: -0.5em;
17
17
  }
18
18
 
19
19
  .react-calendar--doubleView .react-calendar__viewContainer > * {
20
- width: 50%;
21
- margin: 0.5em;
20
+ width: 50%;
21
+ margin: 0.5em;
22
22
  }
23
23
 
24
24
  .react-calendar,
25
25
  .react-calendar *,
26
26
  .react-calendar *:before,
27
27
  .react-calendar *:after {
28
- -moz-box-sizing: border-box;
29
- -webkit-box-sizing: border-box;
30
- box-sizing: border-box;
28
+ -moz-box-sizing: border-box;
29
+ -webkit-box-sizing: border-box;
30
+ box-sizing: border-box;
31
31
  }
32
32
 
33
33
  .react-calendar button {
34
- margin: 0;
35
- border: 0;
36
- outline: none;
34
+ margin: 0;
35
+ border: 0;
36
+ outline: none;
37
37
  }
38
38
 
39
39
  .react-calendar button:enabled:hover {
40
- cursor: pointer;
40
+ cursor: pointer;
41
41
  }
42
42
 
43
43
  .react-calendar__navigation {
44
- display: flex;
45
- height: 44px;
46
- margin-bottom: 1em;
44
+ display: flex;
45
+ height: 44px;
46
+ margin-bottom: 1em;
47
47
  }
48
48
 
49
49
  .react-calendar__navigation button {
50
- min-width: 44px;
51
- background: none;
50
+ min-width: 44px;
51
+ background: none;
52
52
  }
53
53
 
54
54
  .react-calendar__navigation button:disabled {
55
- background-color: #f0f0f0;
55
+ background-color: #f0f0f0;
56
56
  }
57
57
 
58
58
  .react-calendar__navigation button:enabled:hover,
59
59
  .react-calendar__navigation button:enabled:focus {
60
- background-color: #e6e6e6;
60
+ background-color: #e6e6e6;
61
61
  }
62
62
 
63
63
  .react-calendar__month-view__weekdays {
64
- text-align: center;
65
- text-transform: uppercase;
66
- font: inherit;
67
- font-size: 0.75em;
68
- font-weight: bold;
64
+ text-align: center;
65
+ text-transform: uppercase;
66
+ font: inherit;
67
+ font-size: 0.75em;
68
+ font-weight: bold;
69
69
  }
70
70
 
71
71
  .react-calendar__month-view__weekdays__weekday {
72
- padding: 0.5em;
72
+ padding: 0.5em;
73
73
  }
74
74
 
75
75
  .react-calendar__month-view__weekNumbers .react-calendar__tile {
76
- display: flex;
77
- align-items: center;
78
- justify-content: center;
79
- font: inherit;
80
- font-size: 0.75em;
81
- font-weight: bold;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ font: inherit;
80
+ font-size: 0.75em;
81
+ font-weight: bold;
82
82
  }
83
83
 
84
84
  .react-calendar__month-view__days__day--weekend {
85
- color: #d10000;
85
+ color: #d10000;
86
86
  }
87
87
 
88
88
  .react-calendar__month-view__days__day--neighboringMonth,
89
89
  .react-calendar__decade-view__years__year--neighboringDecade,
90
90
  .react-calendar__century-view__decades__decade--neighboringCentury {
91
- color: #757575;
91
+ color: #757575;
92
92
  }
93
93
 
94
94
  .react-calendar__year-view .react-calendar__tile,
95
95
  .react-calendar__decade-view .react-calendar__tile,
96
96
  .react-calendar__century-view .react-calendar__tile {
97
- padding: 2em 0.5em;
97
+ padding: 2em 0.5em;
98
98
  }
99
99
 
100
100
  .react-calendar__tile {
101
- max-width: 100%;
102
- padding: 10px 6.6667px;
103
- background: none;
104
- text-align: center;
105
- font: inherit;
106
- font-size: 0.833em;
101
+ max-width: 100%;
102
+ padding: 10px 6.6667px;
103
+ background: none;
104
+ text-align: center;
105
+ font: inherit;
106
+ font-size: 0.833em;
107
107
  }
108
108
 
109
109
  .react-calendar__tile:disabled {
110
- background-color: #f0f0f0;
111
- color: #ababab;
110
+ background-color: #f0f0f0;
111
+ color: #ababab;
112
112
  }
113
113
 
114
114
  .react-calendar__month-view__days__day--neighboringMonth:disabled,
115
115
  .react-calendar__decade-view__years__year--neighboringDecade:disabled,
116
116
  .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
117
- color: #cdcdcd;
117
+ color: #cdcdcd;
118
118
  }
119
119
 
120
120
  .react-calendar__tile:enabled:hover,
121
121
  .react-calendar__tile:enabled:focus {
122
- background-color: #e6e6e6;
122
+ background-color: #e6e6e6;
123
123
  }
124
124
 
125
125
  .react-calendar__tile--now {
126
- background: #ffff76;
126
+ background: #ffff76;
127
127
  }
128
128
 
129
129
  .react-calendar__tile--now:enabled:hover,
130
130
  .react-calendar__tile--now:enabled:focus {
131
- background: #ffffa9;
131
+ background: #ffffa9;
132
132
  }
133
133
 
134
134
  .react-calendar__tile--hasActive {
135
- background: #76baff;
135
+ background: #76baff;
136
136
  }
137
137
 
138
138
  .react-calendar__tile--hasActive:enabled:hover,
139
139
  .react-calendar__tile--hasActive:enabled:focus {
140
- background: #a9d4ff;
140
+ background: #a9d4ff;
141
141
  }
142
142
 
143
143
  .react-calendar__tile--active {
144
- background: #006edc;
145
- color: white;
144
+ background: #006edc;
145
+ color: white;
146
146
  }
147
147
 
148
148
  .react-calendar__tile--active:enabled:hover,
149
149
  .react-calendar__tile--active:enabled:focus {
150
- background: #1087ff;
150
+ background: #1087ff;
151
151
  }
152
152
 
153
153
  .react-calendar--selectRange .react-calendar__tile--hover {
154
- background-color: #e6e6e6;
154
+ background-color: #e6e6e6;
155
155
  }
@@ -1,8 +1,15 @@
1
1
  import { format } from '@driveflux/time';
2
2
  import { DATE_INPUT_FORMAT } from './constants';
3
- export var formatPlaceholderBy = function(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(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