@raystack/apsara 0.53.2 → 0.53.3
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.
|
@@ -113,7 +113,7 @@ function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps,
|
|
|
113
113
|
setError('Invalid date');
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
|
-
const defaultTrigger = (jsxRuntime.jsx(inputField.InputField, { size: 'small', placeholder: 'Select date', error: error, className: calendar_module.default.datePickerInput, trailingIcon: showCalendarIcon ? jsxRuntime.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef,
|
|
116
|
+
const defaultTrigger = (jsxRuntime.jsx(inputField.InputField, { size: 'small', placeholder: 'Select date', error: error, className: calendar_module.default.datePickerInput, trailingIcon: showCalendarIcon ? jsxRuntime.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, value: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
|
|
117
117
|
const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsxRuntime.jsx("div", { children: children })) : (jsxRuntime.jsx("div", { children: defaultTrigger }));
|
|
118
118
|
return (jsxRuntime.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(popover.Popover.Content, { ref: contentRef, ...popoverProps, className: index.cx(calendar_module.default.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsxRuntime.jsx(calendar.Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
|
|
119
119
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.cjs","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n dateFormat?: string;\n inputFieldProps?: InputFieldProps;\n calendarProps?: PropsSingleRequired & PropsBase;\n onSelect?: (date: Date) => void;\n value?: Date;\n children?:\n | React.ReactNode\n | ((props: { selectedDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n timeZone?: string;\n popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n dateFormat = 'DD/MM/YYYY',\n inputFieldProps,\n calendarProps,\n value = new Date(),\n onSelect = () => {},\n children,\n showCalendarIcon = true,\n timeZone,\n popoverProps\n}: DatePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [selectedDate, setSelectedDate] = useState(value);\n const [error, setError] = useState<string>();\n\n const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n const isDropdownOpenRef = useRef(false);\n const inputFieldRef = useRef<HTMLInputElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const isInputFieldFocused = useRef(false);\n const selectedDateRef = useRef(selectedDate);\n\n useEffect(() => {\n selectedDateRef.current = selectedDate;\n }, [selectedDate]);\n\n const isElementOutside = useCallback((el: HTMLElement) => {\n return (\n !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n !inputFieldRef.current?.contains(el) && // InputField\n !contentRef.current?.contains(el)\n );\n }, []);\n\n const handleMouseDown = useCallback(\n (event: MouseEvent) => {\n const el = event.target as HTMLElement | null;\n if (el && isElementOutside(el)) removeEventListeners();\n },\n [isElementOutside]\n );\n\n function registerEventListeners() {\n isInputFieldFocused.current = true;\n document.addEventListener('mouseup', handleMouseDown);\n }\n\n function removeEventListeners(skipUpdate = false) {\n isInputFieldFocused.current = false;\n setShowCalendar(false);\n\n const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n document.removeEventListener('mouseup', handleMouseDown);\n }\n\n const handleSelect = (day: Date) => {\n setSelectedDate(day);\n onSelect(day);\n setError(undefined);\n removeEventListeners(true);\n };\n\n function onDropdownOpen() {\n isDropdownOpenRef.current = true;\n }\n\n function onOpenChange(open?: boolean) {\n if (\n !isDropdownOpenRef.current &&\n !(isInputFieldFocused.current && showCalendar)\n ) {\n setShowCalendar(Boolean(open));\n }\n\n isDropdownOpenRef.current = false;\n }\n\n function handleInputFocus() {\n if (isInputFieldFocused.current) return;\n if (!showCalendar) setShowCalendar(true);\n }\n\n function handleInputBlur(event: React.FocusEvent) {\n if (isInputFieldFocused.current) {\n const el = event.relatedTarget as HTMLElement | null;\n if (el && isElementOutside(el)) removeEventListeners();\n } else {\n registerEventListeners();\n setTimeout(() => inputFieldRef.current?.select());\n }\n }\n\n function handleKeyUp(event: React.KeyboardEvent) {\n if (event.code === 'Enter' && inputFieldRef.current) {\n inputFieldRef.current.blur();\n removeEventListeners();\n }\n }\n\n function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n const { value } = event.target;\n\n const format = value.includes('/')\n ? 'DD/MM/YYYY'\n : value.includes('-')\n ? 'DD-MM-YYYY'\n : undefined;\n const date = dayjs(value, format);\n\n const isValidDate = date.isValid();\n\n const isAfter =\n calendarProps?.startMonth !== undefined\n ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n : true;\n const isBefore =\n calendarProps?.endMonth !== undefined\n ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n : true;\n\n const isValid =\n isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n if (isValid) {\n setSelectedDate(date.toDate());\n setError(undefined);\n } else {\n setError('Invalid date');\n }\n }\n\n const defaultTrigger = (\n <InputField\n size='small'\n placeholder='Select date'\n error={error}\n className={styles.datePickerInput}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n {...inputFieldProps}\n ref={inputFieldRef}\n
|
|
1
|
+
{"version":3,"file":"date-picker.cjs","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n dateFormat?: string;\n inputFieldProps?: InputFieldProps;\n calendarProps?: PropsSingleRequired & PropsBase;\n onSelect?: (date: Date) => void;\n value?: Date;\n children?:\n | React.ReactNode\n | ((props: { selectedDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n timeZone?: string;\n popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n dateFormat = 'DD/MM/YYYY',\n inputFieldProps,\n calendarProps,\n value = new Date(),\n onSelect = () => {},\n children,\n showCalendarIcon = true,\n timeZone,\n popoverProps\n}: DatePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [selectedDate, setSelectedDate] = useState(value);\n const [error, setError] = useState<string>();\n\n const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n const isDropdownOpenRef = useRef(false);\n const inputFieldRef = useRef<HTMLInputElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const isInputFieldFocused = useRef(false);\n const selectedDateRef = useRef(selectedDate);\n\n useEffect(() => {\n selectedDateRef.current = selectedDate;\n }, [selectedDate]);\n\n const isElementOutside = useCallback((el: HTMLElement) => {\n return (\n !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n !inputFieldRef.current?.contains(el) && // InputField\n !contentRef.current?.contains(el)\n );\n }, []);\n\n const handleMouseDown = useCallback(\n (event: MouseEvent) => {\n const el = event.target as HTMLElement | null;\n if (el && isElementOutside(el)) removeEventListeners();\n },\n [isElementOutside]\n );\n\n function registerEventListeners() {\n isInputFieldFocused.current = true;\n document.addEventListener('mouseup', handleMouseDown);\n }\n\n function removeEventListeners(skipUpdate = false) {\n isInputFieldFocused.current = false;\n setShowCalendar(false);\n\n const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n document.removeEventListener('mouseup', handleMouseDown);\n }\n\n const handleSelect = (day: Date) => {\n setSelectedDate(day);\n onSelect(day);\n setError(undefined);\n removeEventListeners(true);\n };\n\n function onDropdownOpen() {\n isDropdownOpenRef.current = true;\n }\n\n function onOpenChange(open?: boolean) {\n if (\n !isDropdownOpenRef.current &&\n !(isInputFieldFocused.current && showCalendar)\n ) {\n setShowCalendar(Boolean(open));\n }\n\n isDropdownOpenRef.current = false;\n }\n\n function handleInputFocus() {\n if (isInputFieldFocused.current) return;\n if (!showCalendar) setShowCalendar(true);\n }\n\n function handleInputBlur(event: React.FocusEvent) {\n if (isInputFieldFocused.current) {\n const el = event.relatedTarget as HTMLElement | null;\n if (el && isElementOutside(el)) removeEventListeners();\n } else {\n registerEventListeners();\n setTimeout(() => inputFieldRef.current?.select());\n }\n }\n\n function handleKeyUp(event: React.KeyboardEvent) {\n if (event.code === 'Enter' && inputFieldRef.current) {\n inputFieldRef.current.blur();\n removeEventListeners();\n }\n }\n\n function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n const { value } = event.target;\n\n const format = value.includes('/')\n ? 'DD/MM/YYYY'\n : value.includes('-')\n ? 'DD-MM-YYYY'\n : undefined;\n const date = dayjs(value, format);\n\n const isValidDate = date.isValid();\n\n const isAfter =\n calendarProps?.startMonth !== undefined\n ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n : true;\n const isBefore =\n calendarProps?.endMonth !== undefined\n ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n : true;\n\n const isValid =\n isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n if (isValid) {\n setSelectedDate(date.toDate());\n setError(undefined);\n } else {\n setError('Invalid date');\n }\n }\n\n const defaultTrigger = (\n <InputField\n size='small'\n placeholder='Select date'\n error={error}\n className={styles.datePickerInput}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n {...inputFieldProps}\n ref={inputFieldRef}\n value={formattedDate}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onKeyUp={handleKeyUp}\n />\n );\n\n const trigger =\n typeof children === 'function' ? (\n children({ selectedDate: formattedDate })\n ) : children ? (\n <div>{children}</div>\n ) : (\n <div>{defaultTrigger}</div>\n );\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n <Popover.Content\n ref={contentRef}\n {...popoverProps}\n className={cx(styles.calendarPopover, popoverProps?.className)}\n side={popoverProps?.side ?? 'top'}\n >\n <Calendar\n required={true}\n {...calendarProps}\n timeZone={timeZone}\n onDropdownOpen={onDropdownOpen}\n mode='single'\n selected={selectedDate}\n month={selectedDate}\n onSelect={handleSelect}\n onMonthChange={setSelectedDate}\n />\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["dayjs"],"mappings":";;;;;;;;;;;;;;AAeAA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAgCF;;"}
|
|
@@ -111,7 +111,7 @@ function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps,
|
|
|
111
111
|
setError('Invalid date');
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
const defaultTrigger = (jsx(InputField, { size: 'small', placeholder: 'Select date', error: error, className: styles.datePickerInput, trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef,
|
|
114
|
+
const defaultTrigger = (jsx(InputField, { size: 'small', placeholder: 'Select date', error: error, className: styles.datePickerInput, trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, value: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
|
|
115
115
|
const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsx("div", { children: children })) : (jsx("div", { children: defaultTrigger }));
|
|
116
116
|
return (jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsx(Popover.Content, { ref: contentRef, ...popoverProps, className: cx(styles.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsx(Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
|
|
117
117
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.js","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n dateFormat?: string;\n inputFieldProps?: InputFieldProps;\n calendarProps?: PropsSingleRequired & PropsBase;\n onSelect?: (date: Date) => void;\n value?: Date;\n children?:\n | React.ReactNode\n | ((props: { selectedDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n timeZone?: string;\n popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n dateFormat = 'DD/MM/YYYY',\n inputFieldProps,\n calendarProps,\n value = new Date(),\n onSelect = () => {},\n children,\n showCalendarIcon = true,\n timeZone,\n popoverProps\n}: DatePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [selectedDate, setSelectedDate] = useState(value);\n const [error, setError] = useState<string>();\n\n const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n const isDropdownOpenRef = useRef(false);\n const inputFieldRef = useRef<HTMLInputElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const isInputFieldFocused = useRef(false);\n const selectedDateRef = useRef(selectedDate);\n\n useEffect(() => {\n selectedDateRef.current = selectedDate;\n }, [selectedDate]);\n\n const isElementOutside = useCallback((el: HTMLElement) => {\n return (\n !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n !inputFieldRef.current?.contains(el) && // InputField\n !contentRef.current?.contains(el)\n );\n }, []);\n\n const handleMouseDown = useCallback(\n (event: MouseEvent) => {\n const el = event.target as HTMLElement | null;\n if (el && isElementOutside(el)) removeEventListeners();\n },\n [isElementOutside]\n );\n\n function registerEventListeners() {\n isInputFieldFocused.current = true;\n document.addEventListener('mouseup', handleMouseDown);\n }\n\n function removeEventListeners(skipUpdate = false) {\n isInputFieldFocused.current = false;\n setShowCalendar(false);\n\n const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n document.removeEventListener('mouseup', handleMouseDown);\n }\n\n const handleSelect = (day: Date) => {\n setSelectedDate(day);\n onSelect(day);\n setError(undefined);\n removeEventListeners(true);\n };\n\n function onDropdownOpen() {\n isDropdownOpenRef.current = true;\n }\n\n function onOpenChange(open?: boolean) {\n if (\n !isDropdownOpenRef.current &&\n !(isInputFieldFocused.current && showCalendar)\n ) {\n setShowCalendar(Boolean(open));\n }\n\n isDropdownOpenRef.current = false;\n }\n\n function handleInputFocus() {\n if (isInputFieldFocused.current) return;\n if (!showCalendar) setShowCalendar(true);\n }\n\n function handleInputBlur(event: React.FocusEvent) {\n if (isInputFieldFocused.current) {\n const el = event.relatedTarget as HTMLElement | null;\n if (el && isElementOutside(el)) removeEventListeners();\n } else {\n registerEventListeners();\n setTimeout(() => inputFieldRef.current?.select());\n }\n }\n\n function handleKeyUp(event: React.KeyboardEvent) {\n if (event.code === 'Enter' && inputFieldRef.current) {\n inputFieldRef.current.blur();\n removeEventListeners();\n }\n }\n\n function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n const { value } = event.target;\n\n const format = value.includes('/')\n ? 'DD/MM/YYYY'\n : value.includes('-')\n ? 'DD-MM-YYYY'\n : undefined;\n const date = dayjs(value, format);\n\n const isValidDate = date.isValid();\n\n const isAfter =\n calendarProps?.startMonth !== undefined\n ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n : true;\n const isBefore =\n calendarProps?.endMonth !== undefined\n ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n : true;\n\n const isValid =\n isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n if (isValid) {\n setSelectedDate(date.toDate());\n setError(undefined);\n } else {\n setError('Invalid date');\n }\n }\n\n const defaultTrigger = (\n <InputField\n size='small'\n placeholder='Select date'\n error={error}\n className={styles.datePickerInput}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n {...inputFieldProps}\n ref={inputFieldRef}\n
|
|
1
|
+
{"version":3,"file":"date-picker.js","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n dateFormat?: string;\n inputFieldProps?: InputFieldProps;\n calendarProps?: PropsSingleRequired & PropsBase;\n onSelect?: (date: Date) => void;\n value?: Date;\n children?:\n | React.ReactNode\n | ((props: { selectedDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n timeZone?: string;\n popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n dateFormat = 'DD/MM/YYYY',\n inputFieldProps,\n calendarProps,\n value = new Date(),\n onSelect = () => {},\n children,\n showCalendarIcon = true,\n timeZone,\n popoverProps\n}: DatePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [selectedDate, setSelectedDate] = useState(value);\n const [error, setError] = useState<string>();\n\n const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n const isDropdownOpenRef = useRef(false);\n const inputFieldRef = useRef<HTMLInputElement | null>(null);\n const contentRef = useRef<HTMLDivElement | null>(null);\n const isInputFieldFocused = useRef(false);\n const selectedDateRef = useRef(selectedDate);\n\n useEffect(() => {\n selectedDateRef.current = selectedDate;\n }, [selectedDate]);\n\n const isElementOutside = useCallback((el: HTMLElement) => {\n return (\n !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n !inputFieldRef.current?.contains(el) && // InputField\n !contentRef.current?.contains(el)\n );\n }, []);\n\n const handleMouseDown = useCallback(\n (event: MouseEvent) => {\n const el = event.target as HTMLElement | null;\n if (el && isElementOutside(el)) removeEventListeners();\n },\n [isElementOutside]\n );\n\n function registerEventListeners() {\n isInputFieldFocused.current = true;\n document.addEventListener('mouseup', handleMouseDown);\n }\n\n function removeEventListeners(skipUpdate = false) {\n isInputFieldFocused.current = false;\n setShowCalendar(false);\n\n const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n document.removeEventListener('mouseup', handleMouseDown);\n }\n\n const handleSelect = (day: Date) => {\n setSelectedDate(day);\n onSelect(day);\n setError(undefined);\n removeEventListeners(true);\n };\n\n function onDropdownOpen() {\n isDropdownOpenRef.current = true;\n }\n\n function onOpenChange(open?: boolean) {\n if (\n !isDropdownOpenRef.current &&\n !(isInputFieldFocused.current && showCalendar)\n ) {\n setShowCalendar(Boolean(open));\n }\n\n isDropdownOpenRef.current = false;\n }\n\n function handleInputFocus() {\n if (isInputFieldFocused.current) return;\n if (!showCalendar) setShowCalendar(true);\n }\n\n function handleInputBlur(event: React.FocusEvent) {\n if (isInputFieldFocused.current) {\n const el = event.relatedTarget as HTMLElement | null;\n if (el && isElementOutside(el)) removeEventListeners();\n } else {\n registerEventListeners();\n setTimeout(() => inputFieldRef.current?.select());\n }\n }\n\n function handleKeyUp(event: React.KeyboardEvent) {\n if (event.code === 'Enter' && inputFieldRef.current) {\n inputFieldRef.current.blur();\n removeEventListeners();\n }\n }\n\n function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n const { value } = event.target;\n\n const format = value.includes('/')\n ? 'DD/MM/YYYY'\n : value.includes('-')\n ? 'DD-MM-YYYY'\n : undefined;\n const date = dayjs(value, format);\n\n const isValidDate = date.isValid();\n\n const isAfter =\n calendarProps?.startMonth !== undefined\n ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n : true;\n const isBefore =\n calendarProps?.endMonth !== undefined\n ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n : true;\n\n const isValid =\n isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n if (isValid) {\n setSelectedDate(date.toDate());\n setError(undefined);\n } else {\n setError('Invalid date');\n }\n }\n\n const defaultTrigger = (\n <InputField\n size='small'\n placeholder='Select date'\n error={error}\n className={styles.datePickerInput}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n {...inputFieldProps}\n ref={inputFieldRef}\n value={formattedDate}\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onKeyUp={handleKeyUp}\n />\n );\n\n const trigger =\n typeof children === 'function' ? (\n children({ selectedDate: formattedDate })\n ) : children ? (\n <div>{children}</div>\n ) : (\n <div>{defaultTrigger}</div>\n );\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n <Popover.Content\n ref={contentRef}\n {...popoverProps}\n className={cx(styles.calendarPopover, popoverProps?.className)}\n side={popoverProps?.side ?? 'top'}\n >\n <Calendar\n required={true}\n {...calendarProps}\n timeZone={timeZone}\n onDropdownOpen={onDropdownOpen}\n mode='single'\n selected={selectedDate}\n month={selectedDate}\n onSelect={handleSelect}\n onMonthChange={setSelectedDate}\n />\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAeA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAgCF;;"}
|