se-design 1.0.73-dev7 → 1.0.74-dev-v1
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.
- package/dist/assets/style.css +1 -1
- package/dist/components/Banner/index.d.ts +2 -0
- package/dist/index10.js.map +1 -1
- package/dist/index100.js.map +1 -1
- package/dist/index101.js.map +1 -1
- package/dist/index102.js.map +1 -1
- package/dist/index103.js.map +1 -1
- package/dist/index104.js.map +1 -1
- package/dist/index105.js.map +1 -1
- package/dist/index106.js.map +1 -1
- package/dist/index107.js.map +1 -1
- package/dist/index108.js.map +1 -1
- package/dist/index109.js.map +1 -1
- package/dist/index11.js.map +1 -1
- package/dist/index110.js.map +1 -1
- package/dist/index111.js.map +1 -1
- package/dist/index112.js.map +1 -1
- package/dist/index113.js.map +1 -1
- package/dist/index114.js.map +1 -1
- package/dist/index115.js.map +1 -1
- package/dist/index116.js.map +1 -1
- package/dist/index117.js.map +1 -1
- package/dist/index118.js.map +1 -1
- package/dist/index119.js.map +1 -1
- package/dist/index12.js.map +1 -1
- package/dist/index120.js.map +1 -1
- package/dist/index121.js.map +1 -1
- package/dist/index122.js.map +1 -1
- package/dist/index123.js.map +1 -1
- package/dist/index124.js.map +1 -1
- package/dist/index125.js.map +1 -1
- package/dist/index126.js.map +1 -1
- package/dist/index127.js.map +1 -1
- package/dist/index128.js.map +1 -1
- package/dist/index129.js.map +1 -1
- package/dist/index13.js.map +1 -1
- package/dist/index130.js.map +1 -1
- package/dist/index131.js.map +1 -1
- package/dist/index132.js.map +1 -1
- package/dist/index133.js.map +1 -1
- package/dist/index134.js.map +1 -1
- package/dist/index135.js.map +1 -1
- package/dist/index136.js.map +1 -1
- package/dist/index137.js.map +1 -1
- package/dist/index138.js.map +1 -1
- package/dist/index139.js.map +1 -1
- package/dist/index140.js.map +1 -1
- package/dist/index141.js.map +1 -1
- package/dist/index142.js.map +1 -1
- package/dist/index143.js.map +1 -1
- package/dist/index144.js.map +1 -1
- package/dist/index145.js.map +1 -1
- package/dist/index146.js.map +1 -1
- package/dist/index147.js.map +1 -1
- package/dist/index148.js.map +1 -1
- package/dist/index149.js.map +1 -1
- package/dist/index15.js.map +1 -1
- package/dist/index150.js.map +1 -1
- package/dist/index151.js.map +1 -1
- package/dist/index152.js.map +1 -1
- package/dist/index153.js.map +1 -1
- package/dist/index154.js.map +1 -1
- package/dist/index155.js.map +1 -1
- package/dist/index156.js.map +1 -1
- package/dist/index157.js.map +1 -1
- package/dist/index158.js.map +1 -1
- package/dist/index159.js.map +1 -1
- package/dist/index16.js.map +1 -1
- package/dist/index160.js.map +1 -1
- package/dist/index161.js.map +1 -1
- package/dist/index162.js.map +1 -1
- package/dist/index163.js.map +1 -1
- package/dist/index164.js.map +1 -1
- package/dist/index165.js.map +1 -1
- package/dist/index166.js.map +1 -1
- package/dist/index167.js.map +1 -1
- package/dist/index168.js.map +1 -1
- package/dist/index169.js.map +1 -1
- package/dist/index17.js.map +1 -1
- package/dist/index170.js.map +1 -1
- package/dist/index171.js.map +1 -1
- package/dist/index172.js.map +1 -1
- package/dist/index173.js.map +1 -1
- package/dist/index174.js.map +1 -1
- package/dist/index175.js.map +1 -1
- package/dist/index176.js.map +1 -1
- package/dist/index177.js.map +1 -1
- package/dist/index178.js.map +1 -1
- package/dist/index179.js.map +1 -1
- package/dist/index18.js.map +1 -1
- package/dist/index180.js.map +1 -1
- package/dist/index181.js.map +1 -1
- package/dist/index182.js.map +1 -1
- package/dist/index183.js.map +1 -1
- package/dist/index184.js.map +1 -1
- package/dist/index185.js.map +1 -1
- package/dist/index186.js.map +1 -1
- package/dist/index187.js.map +1 -1
- package/dist/index188.js.map +1 -1
- package/dist/index189.js.map +1 -1
- package/dist/index19.js.map +1 -1
- package/dist/index190.js.map +1 -1
- package/dist/index191.js.map +1 -1
- package/dist/index192.js.map +1 -1
- package/dist/index193.js.map +1 -1
- package/dist/index194.js.map +1 -1
- package/dist/index197.js.map +1 -1
- package/dist/index199.js.map +1 -1
- package/dist/index20.js.map +1 -1
- package/dist/index208.js.map +1 -1
- package/dist/index21.js.map +1 -1
- package/dist/index219.js.map +1 -1
- package/dist/index22.js.map +1 -1
- package/dist/index23.js.map +1 -1
- package/dist/index230.js.map +1 -1
- package/dist/index231.js.map +1 -1
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +1 -1
- package/dist/index233.js.map +1 -1
- package/dist/index234.js.map +1 -1
- package/dist/index236.js.map +1 -1
- package/dist/index237.js.map +1 -1
- package/dist/index238.js.map +1 -1
- package/dist/index239.js.map +1 -1
- package/dist/index24.js.map +1 -1
- package/dist/index240.js.map +1 -1
- package/dist/index242.js.map +1 -1
- package/dist/index243.js.map +1 -1
- package/dist/index244.js.map +1 -1
- package/dist/index246.js.map +1 -1
- package/dist/index247.js.map +1 -1
- package/dist/index248.js.map +1 -1
- package/dist/index25.js.map +1 -1
- package/dist/index251.js.map +1 -1
- package/dist/index26.js.map +1 -1
- package/dist/index27.js.map +1 -1
- package/dist/index28.js.map +1 -1
- package/dist/index29.js +57 -55
- package/dist/index29.js.map +1 -1
- package/dist/index3.js.map +1 -1
- package/dist/index30.js.map +1 -1
- package/dist/index31.js.map +1 -1
- package/dist/index32.js.map +1 -1
- package/dist/index33.js.map +1 -1
- package/dist/index34.js.map +1 -1
- package/dist/index35.js.map +1 -1
- package/dist/index36.js.map +1 -1
- package/dist/index37.js.map +1 -1
- package/dist/index38.js.map +1 -1
- package/dist/index39.js.map +1 -1
- package/dist/index4.js.map +1 -1
- package/dist/index40.js.map +1 -1
- package/dist/index41.js.map +1 -1
- package/dist/index42.js.map +1 -1
- package/dist/index43.js.map +1 -1
- package/dist/index44.js.map +1 -1
- package/dist/index45.js.map +1 -1
- package/dist/index46.js.map +1 -1
- package/dist/index47.js.map +1 -1
- package/dist/index48.js.map +1 -1
- package/dist/index49.js.map +1 -1
- package/dist/index5.js +100 -100
- package/dist/index5.js.map +1 -1
- package/dist/index50.js +13 -13
- package/dist/index50.js.map +1 -1
- package/dist/index51.js.map +1 -1
- package/dist/index52.js.map +1 -1
- package/dist/index53.js.map +1 -1
- package/dist/index54.js.map +1 -1
- package/dist/index55.js.map +1 -1
- package/dist/index56.js.map +1 -1
- package/dist/index57.js.map +1 -1
- package/dist/index58.js.map +1 -1
- package/dist/index59.js.map +1 -1
- package/dist/index6.js.map +1 -1
- package/dist/index60.js.map +1 -1
- package/dist/index61.js.map +1 -1
- package/dist/index62.js.map +1 -1
- package/dist/index63.js.map +1 -1
- package/dist/index64.js.map +1 -1
- package/dist/index66.js.map +1 -1
- package/dist/index67.js.map +1 -1
- package/dist/index68.js.map +1 -1
- package/dist/index69.js.map +1 -1
- package/dist/index7.js.map +1 -1
- package/dist/index70.js.map +1 -1
- package/dist/index71.js.map +1 -1
- package/dist/index73.js.map +1 -1
- package/dist/index74.js.map +1 -1
- package/dist/index75.js.map +1 -1
- package/dist/index76.js.map +1 -1
- package/dist/index77.js.map +1 -1
- package/dist/index78.js.map +1 -1
- package/dist/index79.js.map +1 -1
- package/dist/index8.js.map +1 -1
- package/dist/index80.js.map +1 -1
- package/dist/index81.js.map +1 -1
- package/dist/index82.js.map +1 -1
- package/dist/index83.js.map +1 -1
- package/dist/index84.js.map +1 -1
- package/dist/index85.js.map +1 -1
- package/dist/index86.js.map +1 -1
- package/dist/index87.js.map +1 -1
- package/dist/index88.js.map +1 -1
- package/dist/index89.js.map +1 -1
- package/dist/index9.js.map +1 -1
- package/dist/index90.js.map +1 -1
- package/dist/index91.js.map +1 -1
- package/dist/index92.js.map +1 -1
- package/dist/index93.js.map +1 -1
- package/dist/index94.js.map +1 -1
- package/dist/index95.js.map +1 -1
- package/dist/index96.js.map +1 -1
- package/dist/index97.js.map +1 -1
- package/dist/index98.js.map +1 -1
- package/dist/index99.js.map +1 -1
- package/package.json +1 -1
package/dist/index50.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index50.js","sources":["../src/components/DatePicker/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { Dropdown } from '../Dropdown';\n\nimport './style.scss';\n\nexport interface DateRange {\n startDate: Date | null;\n endDate: Date | null;\n}\n\nexport interface DatePickerProps {\n title?: string;\n isOpen?: boolean;\n initialStartDate?: Date;\n initialEndDate?: Date;\n onApply?: (dateRange: DateRange) => void;\n onClose?: () => void;\n shouldAllowFutureDateSelection?: boolean;\n maxDays?: number;\n disablePastDates?: boolean;\n singleDateSelection?: boolean;\n minYearOption?: number;\n showQuickActions?: boolean;\n className?: string;\n automationId?: string;\n showHeader?: boolean;\n showSingleMonth?: boolean;\n labels?: {\n title?: string;\n clear?: string;\n apply?: string;\n };\n}\n\nconst weekDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\nconst quickActions = ['Today', 'Yesterday', 'This Week', 'Last Week', 'This Month', 'Last Month'];\n\nconst months = [\n { value: 'january', label: 'January' },\n { value: 'february', label: 'February' },\n { value: 'march', label: 'March' },\n { value: 'april', label: 'April' },\n { value: 'may', label: 'May' },\n { value: 'june', label: 'June' },\n { value: 'july', label: 'July' },\n { value: 'august', label: 'August' },\n { value: 'september', label: 'September' },\n { value: 'october', label: 'October' },\n { value: 'november', label: 'November' },\n { value: 'december', label: 'December' }\n];\n\nexport const DatePicker: React.FC<DatePickerProps> = ({\n title = 'Select modified date',\n // isOpen = true,\n showHeader = true,\n initialStartDate,\n initialEndDate,\n onApply = () => {},\n onClose,\n shouldAllowFutureDateSelection = false,\n maxDays,\n disablePastDates = false,\n singleDateSelection = false,\n minYearOption,\n showQuickActions = false,\n showSingleMonth = false,\n className = '',\n automationId = 'datepicker',\n labels = {\n clear: 'Clear',\n apply: 'Apply'\n }\n}) => {\n const getDefaultDateRange = (): DateRange => {\n // If initial start and end dates are provided, use them\n if (initialStartDate && initialEndDate) {\n return {\n startDate: initialStartDate,\n endDate: initialEndDate\n };\n }\n\n // If no initial dates are provided, use today's date\n const endDate = new Date();\n endDate.setHours(23, 59, 59, 999); // End of today\n\n const startDate = new Date();\n startDate.setHours(0, 0, 0, 0); // Start of today\n\n return { startDate, endDate };\n };\n\n const getDefaultMonths = (): [Date, Date] => {\n const today = new Date();\n const lastMonth = new Date();\n\n // Set both to first day of their respective months\n today.setDate(1);\n lastMonth.setDate(1);\n\n if (!showSingleMonth) {\n lastMonth.setMonth(lastMonth.getMonth() - 1);\n }\n\n today.setHours(0, 0, 0, 0);\n lastMonth.setHours(0, 0, 0, 0);\n\n return [lastMonth, today];\n };\n\n const [selectedRange, setSelectedRange] = useState<DateRange>(getDefaultDateRange);\n const [defaultMonths, _] = useState(getDefaultMonths);\n const [leftMonth, setLeftMonth] = useState(() => defaultMonths[0]);\n const [rightMonth, setRightMonth] = useState(() => defaultMonths[1]);\n\n const getDaysInMonth = (year: number, month: number) => {\n return new Date(year, month + 1, 0).getDate();\n };\n\n const getFirstDayOfMonth = (year: number, month: number) => {\n return new Date(year, month, 1).getDay();\n };\n\n const generateCalendarDays = (year: number, month: number) => {\n const daysInMonth = getDaysInMonth(year, month);\n const firstDay = getFirstDayOfMonth(year, month);\n const days = [];\n\n // Add empty cells for days before the first day of the month\n for (let i = 0; i < firstDay; i++) {\n days.push(null);\n }\n\n // Add the days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n date.setHours(0, 0, 0, 0); // Normalize to start of day for consistent comparisons\n days.push(date);\n }\n\n return days;\n };\n\n const isSameDay = (date1: Date, date2: Date): boolean => {\n return (\n date1.getDate() === date2.getDate() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getFullYear() === date2.getFullYear()\n );\n };\n\n const isDateInRange = (date: Date) => {\n if (!selectedRange.startDate || !selectedRange.endDate) return false;\n\n const compareDate = new Date(date);\n compareDate.setHours(12, 0, 0, 0); // Noon to avoid any timezone issues\n\n const startDate = new Date(selectedRange.startDate);\n startDate.setHours(0, 0, 0, 0);\n\n const endDate = new Date(selectedRange.endDate);\n endDate.setHours(23, 59, 59, 999);\n\n return compareDate >= startDate && compareDate <= endDate;\n };\n\n const isToday = (date: Date) => {\n const today = new Date();\n return (\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear()\n );\n };\n\n const isDateDisabled = (date: Date | null) => {\n if (!date) return true;\n\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const dateToCheck = new Date(date);\n dateToCheck.setHours(0, 0, 0, 0);\n\n // If disablePastDates is true, disable dates before today\n if (disablePastDates && dateToCheck < today) {\n return true;\n }\n\n // If maxDays is specified, disable dates after maxDays from today\n if (maxDays !== undefined && maxDays !== null) {\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n maxDate.setHours(0, 0, 0, 0); // Normalize to start of day\n // Disable all dates after maxDays (dates strictly after maxDate should be disabled)\n // Dates up to and including maxDate (today + maxDays) are allowed\n if (dateToCheck > maxDate) {\n return true;\n }\n // If maxDays is set, we're done checking - don't check shouldAllowFutureDateSelection\n return false;\n }\n\n // If shouldAllowFutureDateSelection is false and maxDays is not specified, disable dates after today\n if (!shouldAllowFutureDateSelection) {\n return dateToCheck > today;\n }\n\n return false;\n };\n\n const handleDateClick = (date: Date) => {\n if (isDateDisabled(date)) return;\n\n const clickedDate = new Date(date);\n clickedDate.setHours(12, 0, 0, 0); // Set to noon to avoid timezone issues\n\n // Single date selection mode - immediately apply on click\n if (singleDateSelection) {\n setSelectedRange({ startDate: clickedDate, endDate: clickedDate });\n onApply({ startDate: clickedDate, endDate: clickedDate });\n onClose?.();\n return;\n }\n\n // Range selection mode (original behavior)\n if (!selectedRange.startDate || selectedRange.endDate) {\n // No dates selected yet, or both dates are selected - start new selection\n setSelectedRange({ startDate: clickedDate, endDate: null });\n } else {\n // Only start date is selected, set end date\n const currentStart = new Date(selectedRange.startDate);\n currentStart.setHours(12, 0, 0, 0);\n\n const endDate = clickedDate > currentStart ? clickedDate : currentStart;\n const startDate = clickedDate > currentStart ? currentStart : clickedDate;\n\n setSelectedRange({ startDate, endDate });\n }\n };\n\n const handleMonthNavigation = (date: Date, increment: boolean) => {\n const newDate = new Date(date);\n newDate.setMonth(newDate.getMonth() + (increment ? 1 : -1));\n return newDate;\n };\n\n const ensureDateInCorrectOrder = (leftDate: Date, rightDate: Date): [Date, Date] => {\n if (leftDate.getTime() > rightDate.getTime()) {\n return [rightDate, leftDate];\n }\n return [leftDate, rightDate];\n };\n\n const handleMonthChange = (newDate: Date, isLeftCalendar: boolean) => {\n // For single month view, we only need to set the left month\n if (showSingleMonth) {\n setLeftMonth(newDate);\n return;\n }\n\n // For double month view, we need to ensure the dates are in the correct order\n if (isLeftCalendar) {\n const [newLeft, newRight] = ensureDateInCorrectOrder(newDate, rightMonth);\n setLeftMonth(newLeft);\n if (newRight !== rightMonth) {\n setRightMonth(newRight);\n }\n } else {\n const [newLeft, newRight] = ensureDateInCorrectOrder(leftMonth, newDate);\n if (newLeft !== leftMonth) {\n setLeftMonth(newLeft);\n }\n setRightMonth(newRight);\n }\n };\n\n const isStartDate = (date: Date): boolean => {\n if (!selectedRange?.startDate) return false;\n return isSameDay(date, selectedRange.startDate);\n };\n\n const isEndDate = (date: Date): boolean => {\n if (!selectedRange?.endDate) return false;\n return isSameDay(date, selectedRange?.endDate);\n };\n\n const isSameStartAndEndDate = (date: Date): boolean => {\n if (!selectedRange.startDate || !selectedRange.endDate) return false;\n return isSameDay(selectedRange.startDate, selectedRange.endDate) && isSameDay(date, selectedRange.startDate);\n };\n\n const getYearOptions = (currentYear: number, calendarYear: number) => {\n const startYear = minYearOption || currentYear - 10;\n let endYear = shouldAllowFutureDateSelection ? currentYear + 10 : currentYear;\n\n // If maxDays is specified, calculate the maximum year\n if (maxDays) {\n const today = new Date();\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n const maxYear = maxDate.getFullYear();\n // Use the smaller of the two limits\n endYear = Math.min(endYear, maxYear);\n }\n\n endYear = Math.max(endYear, calendarYear);\n\n const yearCount = endYear - startYear + 1;\n\n return Array.from({ length: yearCount }, (_, i) => ({\n value: startYear + i,\n label: (startYear + i).toString()\n })).filter((year) => {\n if (year.value === calendarYear) {\n return true;\n }\n if (!shouldAllowFutureDateSelection && year.value > currentYear) {\n return false;\n }\n // If maxDays is specified, filter out years beyond maxDate\n if (maxDays) {\n const today = new Date();\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n return year.value <= maxDate.getFullYear();\n }\n return true;\n });\n };\n\n const handleClear = () => {\n const today = new Date();\n const startDate = new Date();\n\n // Set start date to beginning of today\n startDate.setHours(0, 0, 0, 0);\n\n // Set end date to end of today\n today.setHours(23, 59, 59, 999);\n\n const defaultRange = { startDate, endDate: today };\n setSelectedRange(defaultRange);\n };\n\n const getStartOfDay = (date: Date) => {\n const newDate = new Date(date);\n newDate.setHours(0, 0, 0, 0);\n return newDate;\n };\n\n const getEndOfDay = (date: Date) => {\n const newDate = new Date(date);\n newDate.setHours(23, 59, 59, 999);\n return newDate;\n };\n\n const handleQuickAction = (action: string) => {\n const today = new Date();\n let startDate = new Date();\n let endDate = new Date();\n\n switch (action) {\n case 'Today':\n startDate = getStartOfDay(today);\n endDate = getEndOfDay(today);\n break;\n case 'Yesterday':\n startDate = getStartOfDay(new Date(today.setDate(today.getDate() - 1)));\n endDate = getEndOfDay(new Date(today));\n break;\n case 'This Week':\n const firstDayOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));\n startDate = getStartOfDay(firstDayOfWeek);\n endDate = getEndOfDay(new Date());\n break;\n case 'Last Week':\n const lastWeekStart = new Date(today.setDate(today.getDate() - today.getDay() - 7));\n const lastWeekEnd = new Date(today.setDate(lastWeekStart.getDate() + 6));\n startDate = getStartOfDay(lastWeekStart);\n endDate = getEndOfDay(lastWeekEnd);\n break;\n case 'This Month':\n startDate = getStartOfDay(new Date(today.getFullYear(), today.getMonth(), 1));\n endDate = getEndOfDay(new Date());\n break;\n case 'Last Month':\n startDate = getStartOfDay(new Date(today.getFullYear(), today.getMonth() - 1, 1));\n endDate = getEndOfDay(new Date(today.getFullYear(), today.getMonth(), 0));\n break;\n }\n\n setSelectedRange({ startDate, endDate });\n };\n\n const renderQuickActions = () => {\n return (\n <div className=\"w-[147px] p-4 border-r border-[var(--color-gray-200)]\">\n <div className=\"flex flex-col gap-3\">\n {quickActions.map((action) => (\n <Button key={action} label={action} type=\"link\" onClick={() => handleQuickAction(action)} />\n ))}\n </div>\n </div>\n );\n };\n\n const handleApply = () => {\n const { startDate = null, endDate = null } = selectedRange;\n\n if (startDate && endDate) {\n onApply({ startDate, endDate });\n return;\n }\n\n if (startDate || endDate) {\n const selectedDate = startDate || endDate;\n onApply({ startDate: selectedDate, endDate: selectedDate });\n }\n };\n\n const renderCalendar = (date: Date) => {\n const year = date.getFullYear();\n const month = date.getMonth();\n const days = generateCalendarDays(year, month);\n const currentYear = new Date().getFullYear();\n const isLeftCalendar = date.getTime() === leftMonth.getTime();\n const yearOptions = getYearOptions(currentYear, year);\n\n return (\n <div className=\"se-design-calendar-container w-fit p-4\">\n <div className=\"flex justify-between items-center\">\n <Icon\n name=\"chevron\"\n rotation=\"90\"\n size={16}\n onClick={() => {\n const newDate = handleMonthNavigation(date, false);\n // Check if navigating back would go before today when disablePastDates is true\n if (disablePastDates) {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n if (newDate < today && newDate.getMonth() !== today.getMonth()) {\n return; // Don't navigate to past months\n }\n }\n handleMonthChange(newDate, isLeftCalendar);\n }}\n className={`datepicker-navigation-icon ${\n disablePastDates &&\n date.getMonth() === new Date().getMonth() &&\n date.getFullYear() === new Date().getFullYear()\n ? 'disabled'\n : ''\n }`}\n automationId={`${automationId}-previous-month`}\n />\n\n <div className=\"flex gap-2\" onClick={(e) => e.stopPropagation()}>\n <Dropdown\n type=\"select\"\n dropDownOptions={months}\n defaultSelectedValue={months[month]}\n selectBy=\"label\"\n optionsUniqueBy=\"value\"\n displaySelected={true}\n onOptionClick={(selectedOption) => {\n const newDate = new Date(date);\n newDate.setMonth(months.findIndex((m) => m.value === selectedOption.value));\n handleMonthChange(newDate, isLeftCalendar);\n }}\n className=\"w-[124px] dropdown-option-container\"\n />\n <Dropdown\n type=\"select\"\n dropDownOptions={yearOptions}\n defaultSelectedValue={yearOptions.find((y) => y.value === year)}\n selectBy=\"label\"\n optionsUniqueBy=\"value\"\n displaySelected={true}\n onOptionClick={(selectedOption) => {\n const newDate = new Date(date);\n newDate.setFullYear(selectedOption.value);\n handleMonthChange(newDate, isLeftCalendar);\n }}\n className=\"w-[104px] dropdown-option-container\"\n />\n </div>\n\n <Icon\n name=\"chevron\"\n rotation=\"270\"\n size={16}\n className={`datepicker-navigation-icon ${\n (!shouldAllowFutureDateSelection &&\n month === new Date().getMonth() &&\n year === new Date().getFullYear()) ||\n (maxDays !== undefined &&\n (() => {\n const today = new Date();\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n return date.getMonth() === maxDate.getMonth() && date.getFullYear() === maxDate.getFullYear();\n })())\n ? 'disabled'\n : ''\n }`}\n onClick={() => {\n const newDate = handleMonthNavigation(date, true);\n // Check if the new date would exceed maxDays\n if (maxDays !== undefined) {\n const today = new Date();\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n if (newDate > maxDate) {\n return;\n }\n }\n handleMonthChange(newDate, isLeftCalendar);\n }}\n automationId={`${automationId}-next-month`}\n />\n </div>\n <div className=\"grid grid-cols-7 gap-2 mt-3\">\n {weekDays.map((day, index) => (\n <div key={`${day}-${index}`} className=\"datepicker-weekdays\">\n {day}\n </div>\n ))}\n {days.map((date, index) => {\n const isStart = date && isStartDate(date);\n const isEnd = date && isEndDate(date);\n const isSameStartEnd = date && isSameStartAndEndDate(date);\n const inRange = date && !isStart && !isEnd && isDateInRange(date);\n const todayDate = date && isToday(date);\n const disabled = isDateDisabled(date);\n const dateValue = date?.getDate();\n\n return (\n <div\n key={`${date}-${index}`}\n onClick={() => !disabled && date && handleDateClick(date)}\n className={`\n relative h-10 w-10 flex items-center justify-center transition-colors rounded-md\n ${\n disabled ? 'cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent' : 'cursor-pointer'\n }\n ${\n isSameStartEnd\n ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n : ''\n }\n ${\n !isSameStartEnd && isStart\n ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n : ''\n }\n ${\n !isSameStartEnd && isEnd\n ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n : ''\n }\n ${!isStart && !isEnd && inRange ? 'bg-[var(--color-blue-100)] text-[var(--color-blue-600)] outline outline-1 outline-[var(--color-blue-500)]' : ''}\n ${!isStart && !isEnd && !inRange && !disabled ? 'hover:bg-[var(--color-blue-100)] hover:outline hover:outline-1 hover:outline-[var(--color-blue-500)]' : ''}\n ${todayDate && !isStart && !isEnd ? 'text-[var(--color-blue-500)] bg-[var(--color-blue-100)] outline outline-1 outline-[var(--color-blue-500)]' : ''}\n ${!disabled && !isStart && !isEnd && !todayDate ? 'text-[var(--color-blue-500)]' : ''}\n `}\n data-automation-id={`${automationId}-date-${dateValue}`}\n >\n {date ? (\n <>\n {dateValue}\n {!isSameStartEnd && (isStart || isEnd) && (\n <div\n className={`absolute top-0 bottom-0 ${isStart ? 'right-[-8px]' : 'left-[-8px]'} w-[8px]\n bg-[var(--color-blue-100)] -z-10`}\n />\n )}\n </>\n ) : (\n ''\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n };\n\n return (\n <div\n className={`se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max ${className}`}\n >\n {showHeader && (\n <div className=\"se-design-datepicker-header flex justify-between items-center border-b border-[var(--color-gray-200)] p-4\">\n <h2 className=\"datepicker-title\">{title}</h2>\n {onClose && (\n <Icon\n name=\"close\"\n size={16}\n onClick={onClose}\n className=\"cursor-pointer\"\n automationId={`${automationId}-close`}\n />\n )}\n </div>\n )}\n <div className=\"se-design-datepicker-content flex\">\n {showQuickActions && renderQuickActions()}\n <div className=\"flex\">\n {showSingleMonth ? (\n renderCalendar(leftMonth)\n ) : (\n <>\n {renderCalendar(leftMonth)}\n <div className=\"h-full w-[1px] border-r border-[var(--color-gray-200)]\"></div>\n {renderCalendar(rightMonth)}\n </>\n )}\n </div>\n </div>\n {!singleDateSelection && (\n <div className=\"se-design-datepicker-footer flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]\">\n <Button\n label={labels?.clear || 'Clear'}\n type=\"ghost\"\n onClick={handleClear}\n data-automation-id={`${automationId}-clear-button`}\n />\n <Button\n label={labels?.apply || 'Apply'}\n type=\"primary\"\n onClick={handleApply}\n data-automation-id={`${automationId}-apply-button`}\n />\n </div>\n )}\n </div>\n );\n};\n"],"names":["React__default","useState","Button","Icon","Dropdown","weekDays","quickActions","months","value","label","DatePicker","title","showHeader","initialStartDate","initialEndDate","onApply","onClose","shouldAllowFutureDateSelection","maxDays","disablePastDates","singleDateSelection","minYearOption","showQuickActions","showSingleMonth","className","automationId","labels","clear","apply","getDefaultDateRange","startDate","endDate","Date","setHours","getDefaultMonths","today","lastMonth","setDate","setMonth","getMonth","selectedRange","setSelectedRange","defaultMonths","leftMonth","setLeftMonth","rightMonth","setRightMonth","getDaysInMonth","year","month","getDate","getFirstDayOfMonth","getDay","generateCalendarDays","daysInMonth","firstDay","days","i","push","day","date","isSameDay","date1","date2","getFullYear","isDateInRange","compareDate","isToday","isDateDisabled","dateToCheck","maxDate","handleDateClick","clickedDate","currentStart","handleMonthNavigation","increment","newDate","ensureDateInCorrectOrder","leftDate","rightDate","getTime","handleMonthChange","isLeftCalendar","newLeft","newRight","isStartDate","isEndDate","isSameStartAndEndDate","getYearOptions","currentYear","calendarYear","startYear","endYear","maxYear","Math","min","max","yearCount","Array","from","length","_","toString","filter","handleClear","getStartOfDay","getEndOfDay","handleQuickAction","action","firstDayOfWeek","lastWeekStart","lastWeekEnd","renderQuickActions","React","createElement","map","key","type","onClick","handleApply","selectedDate","renderCalendar","yearOptions","name","rotation","size","e","stopPropagation","dropDownOptions","defaultSelectedValue","selectBy","optionsUniqueBy","displaySelected","onOptionClick","selectedOption","findIndex","m","find","y","setFullYear","undefined","index","isStart","isEnd","isSameStartEnd","inRange","todayDate","disabled","dateValue","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index50.js","sources":["../src/components/DatePicker/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport { Dropdown } from '../Dropdown';\n\nimport './style.scss';\n\nexport interface DateRange {\n startDate: Date | null;\n endDate: Date | null;\n}\n\nexport interface DatePickerProps {\n title?: string;\n isOpen?: boolean;\n initialStartDate?: Date;\n initialEndDate?: Date;\n onApply?: (dateRange: DateRange) => void;\n onClose?: () => void;\n shouldAllowFutureDateSelection?: boolean;\n maxDays?: number;\n disablePastDates?: boolean;\n singleDateSelection?: boolean;\n minYearOption?: number;\n showQuickActions?: boolean;\n className?: string;\n automationId?: string;\n showHeader?: boolean;\n showSingleMonth?: boolean;\n labels?: {\n title?: string;\n clear?: string;\n apply?: string;\n };\n}\n\nconst weekDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\nconst quickActions = ['Today', 'Yesterday', 'This Week', 'Last Week', 'This Month', 'Last Month'];\n\nconst months = [\n { value: 'january', label: 'January' },\n { value: 'february', label: 'February' },\n { value: 'march', label: 'March' },\n { value: 'april', label: 'April' },\n { value: 'may', label: 'May' },\n { value: 'june', label: 'June' },\n { value: 'july', label: 'July' },\n { value: 'august', label: 'August' },\n { value: 'september', label: 'September' },\n { value: 'october', label: 'October' },\n { value: 'november', label: 'November' },\n { value: 'december', label: 'December' }\n];\n\nexport const DatePicker: React.FC<DatePickerProps> = ({\n title = 'Select modified date',\n // isOpen = true,\n showHeader = true,\n initialStartDate,\n initialEndDate,\n onApply = () => {},\n onClose,\n shouldAllowFutureDateSelection = false,\n maxDays,\n disablePastDates = false,\n singleDateSelection = false,\n minYearOption,\n showQuickActions = false,\n showSingleMonth = false,\n className = '',\n automationId = 'datepicker',\n labels = {\n clear: 'Clear',\n apply: 'Apply'\n }\n}) => {\n const getDefaultDateRange = (): DateRange => {\n // If initial start and end dates are provided, use them\n if (initialStartDate && initialEndDate) {\n return {\n startDate: initialStartDate,\n endDate: initialEndDate\n };\n }\n\n // If no initial dates are provided, use today's date\n const endDate = new Date();\n endDate.setHours(23, 59, 59, 999); // End of today\n\n const startDate = new Date();\n startDate.setHours(0, 0, 0, 0); // Start of today\n\n return { startDate, endDate };\n };\n\n const getDefaultMonths = (): [Date, Date] => {\n const today = new Date();\n const lastMonth = new Date();\n\n // Set both to first day of their respective months\n today.setDate(1);\n lastMonth.setDate(1);\n\n if (!showSingleMonth) {\n lastMonth.setMonth(lastMonth.getMonth() - 1);\n }\n\n today.setHours(0, 0, 0, 0);\n lastMonth.setHours(0, 0, 0, 0);\n\n return [lastMonth, today];\n };\n\n const [selectedRange, setSelectedRange] = useState<DateRange>(getDefaultDateRange);\n const [defaultMonths, _] = useState(getDefaultMonths);\n const [leftMonth, setLeftMonth] = useState(() => defaultMonths[0]);\n const [rightMonth, setRightMonth] = useState(() => defaultMonths[1]);\n\n const getDaysInMonth = (year: number, month: number) => {\n return new Date(year, month + 1, 0).getDate();\n };\n\n const getFirstDayOfMonth = (year: number, month: number) => {\n return new Date(year, month, 1).getDay();\n };\n\n const generateCalendarDays = (year: number, month: number) => {\n const daysInMonth = getDaysInMonth(year, month);\n const firstDay = getFirstDayOfMonth(year, month);\n const days = [];\n\n // Add empty cells for days before the first day of the month\n for (let i = 0; i < firstDay; i++) {\n days.push(null);\n }\n\n // Add the days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n date.setHours(0, 0, 0, 0); // Normalize to start of day for consistent comparisons\n days.push(date);\n }\n\n return days;\n };\n\n const isSameDay = (date1: Date, date2: Date): boolean => {\n return (\n date1.getDate() === date2.getDate() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getFullYear() === date2.getFullYear()\n );\n };\n\n const isDateInRange = (date: Date) => {\n if (!selectedRange.startDate || !selectedRange.endDate) return false;\n\n const compareDate = new Date(date);\n compareDate.setHours(12, 0, 0, 0); // Noon to avoid any timezone issues\n\n const startDate = new Date(selectedRange.startDate);\n startDate.setHours(0, 0, 0, 0);\n\n const endDate = new Date(selectedRange.endDate);\n endDate.setHours(23, 59, 59, 999);\n\n return compareDate >= startDate && compareDate <= endDate;\n };\n\n const isToday = (date: Date) => {\n const today = new Date();\n return (\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear()\n );\n };\n\n const isDateDisabled = (date: Date | null) => {\n if (!date) return true;\n\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const dateToCheck = new Date(date);\n dateToCheck.setHours(0, 0, 0, 0);\n\n // If disablePastDates is true, disable dates before today\n if (disablePastDates && dateToCheck < today) {\n return true;\n }\n\n // If maxDays is specified, disable dates after maxDays from today\n if (maxDays !== undefined && maxDays !== null) {\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n maxDate.setHours(0, 0, 0, 0); // Normalize to start of day\n // Disable all dates after maxDays (dates strictly after maxDate should be disabled)\n // Dates up to and including maxDate (today + maxDays) are allowed\n if (dateToCheck > maxDate) {\n return true;\n }\n // If maxDays is set, we're done checking - don't check shouldAllowFutureDateSelection\n return false;\n }\n\n // If shouldAllowFutureDateSelection is false and maxDays is not specified, disable dates after today\n if (!shouldAllowFutureDateSelection) {\n return dateToCheck > today;\n }\n\n return false;\n };\n\n const handleDateClick = (date: Date) => {\n if (isDateDisabled(date)) return;\n\n const clickedDate = new Date(date);\n clickedDate.setHours(12, 0, 0, 0); // Set to noon to avoid timezone issues\n\n // Single date selection mode - immediately apply on click\n if (singleDateSelection) {\n setSelectedRange({ startDate: clickedDate, endDate: clickedDate });\n onApply({ startDate: clickedDate, endDate: clickedDate });\n onClose?.();\n return;\n }\n\n // Range selection mode (original behavior)\n if (!selectedRange.startDate || selectedRange.endDate) {\n // No dates selected yet, or both dates are selected - start new selection\n setSelectedRange({ startDate: clickedDate, endDate: null });\n } else {\n // Only start date is selected, set end date\n const currentStart = new Date(selectedRange.startDate);\n currentStart.setHours(12, 0, 0, 0);\n\n const endDate = clickedDate > currentStart ? clickedDate : currentStart;\n const startDate = clickedDate > currentStart ? currentStart : clickedDate;\n\n setSelectedRange({ startDate, endDate });\n }\n };\n\n const handleMonthNavigation = (date: Date, increment: boolean) => {\n const newDate = new Date(date);\n newDate.setMonth(newDate.getMonth() + (increment ? 1 : -1));\n return newDate;\n };\n\n const ensureDateInCorrectOrder = (leftDate: Date, rightDate: Date): [Date, Date] => {\n if (leftDate.getTime() > rightDate.getTime()) {\n return [rightDate, leftDate];\n }\n return [leftDate, rightDate];\n };\n\n const handleMonthChange = (newDate: Date, isLeftCalendar: boolean) => {\n // For single month view, we only need to set the left month\n if (showSingleMonth) {\n setLeftMonth(newDate);\n return;\n }\n\n // For double month view, we need to ensure the dates are in the correct order\n if (isLeftCalendar) {\n const [newLeft, newRight] = ensureDateInCorrectOrder(newDate, rightMonth);\n setLeftMonth(newLeft);\n if (newRight !== rightMonth) {\n setRightMonth(newRight);\n }\n } else {\n const [newLeft, newRight] = ensureDateInCorrectOrder(leftMonth, newDate);\n if (newLeft !== leftMonth) {\n setLeftMonth(newLeft);\n }\n setRightMonth(newRight);\n }\n };\n\n const isStartDate = (date: Date): boolean => {\n if (!selectedRange?.startDate) return false;\n return isSameDay(date, selectedRange.startDate);\n };\n\n const isEndDate = (date: Date): boolean => {\n if (!selectedRange?.endDate) return false;\n return isSameDay(date, selectedRange?.endDate);\n };\n\n const isSameStartAndEndDate = (date: Date): boolean => {\n if (!selectedRange.startDate || !selectedRange.endDate) return false;\n return isSameDay(selectedRange.startDate, selectedRange.endDate) && isSameDay(date, selectedRange.startDate);\n };\n\n const getYearOptions = (currentYear: number, calendarYear: number) => {\n const startYear = minYearOption || currentYear - 10;\n let endYear = shouldAllowFutureDateSelection ? currentYear + 10 : currentYear;\n\n // If maxDays is specified, calculate the maximum year\n if (maxDays) {\n const today = new Date();\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n const maxYear = maxDate.getFullYear();\n // Use the smaller of the two limits\n endYear = Math.min(endYear, maxYear);\n }\n\n endYear = Math.max(endYear, calendarYear);\n\n const yearCount = endYear - startYear + 1;\n\n return Array.from({ length: yearCount }, (_, i) => ({\n value: startYear + i,\n label: (startYear + i).toString()\n })).filter((year) => {\n if (year.value === calendarYear) {\n return true;\n }\n if (!shouldAllowFutureDateSelection && year.value > currentYear) {\n return false;\n }\n // If maxDays is specified, filter out years beyond maxDate\n if (maxDays) {\n const today = new Date();\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n return year.value <= maxDate.getFullYear();\n }\n return true;\n });\n };\n\n const handleClear = () => {\n const today = new Date();\n const startDate = new Date();\n\n // Set start date to beginning of today\n startDate.setHours(0, 0, 0, 0);\n\n // Set end date to end of today\n today.setHours(23, 59, 59, 999);\n\n const defaultRange = { startDate, endDate: today };\n setSelectedRange(defaultRange);\n };\n\n const getStartOfDay = (date: Date) => {\n const newDate = new Date(date);\n newDate.setHours(0, 0, 0, 0);\n return newDate;\n };\n\n const getEndOfDay = (date: Date) => {\n const newDate = new Date(date);\n newDate.setHours(23, 59, 59, 999);\n return newDate;\n };\n\n const handleQuickAction = (action: string) => {\n const today = new Date();\n let startDate = new Date();\n let endDate = new Date();\n\n switch (action) {\n case 'Today':\n startDate = getStartOfDay(today);\n endDate = getEndOfDay(today);\n break;\n case 'Yesterday':\n startDate = getStartOfDay(new Date(today.setDate(today.getDate() - 1)));\n endDate = getEndOfDay(new Date(today));\n break;\n case 'This Week':\n const firstDayOfWeek = new Date(today.setDate(today.getDate() - today.getDay()));\n startDate = getStartOfDay(firstDayOfWeek);\n endDate = getEndOfDay(new Date());\n break;\n case 'Last Week':\n const lastWeekStart = new Date(today.setDate(today.getDate() - today.getDay() - 7));\n const lastWeekEnd = new Date(today.setDate(lastWeekStart.getDate() + 6));\n startDate = getStartOfDay(lastWeekStart);\n endDate = getEndOfDay(lastWeekEnd);\n break;\n case 'This Month':\n startDate = getStartOfDay(new Date(today.getFullYear(), today.getMonth(), 1));\n endDate = getEndOfDay(new Date());\n break;\n case 'Last Month':\n startDate = getStartOfDay(new Date(today.getFullYear(), today.getMonth() - 1, 1));\n endDate = getEndOfDay(new Date(today.getFullYear(), today.getMonth(), 0));\n break;\n }\n\n setSelectedRange({ startDate, endDate });\n };\n\n const renderQuickActions = () => {\n return (\n <div className=\"w-[147px] p-4 border-r border-[var(--color-gray-200)]\">\n <div className=\"flex flex-col gap-3\">\n {quickActions.map((action) => (\n <Button key={action} label={action} type=\"link\" onClick={() => handleQuickAction(action)} />\n ))}\n </div>\n </div>\n );\n };\n\n const handleApply = () => {\n const { startDate = null, endDate = null } = selectedRange;\n\n if (startDate && endDate) {\n onApply({ startDate, endDate });\n return;\n }\n\n if (startDate || endDate) {\n const selectedDate = startDate || endDate;\n onApply({ startDate: selectedDate, endDate: selectedDate });\n }\n };\n\n const renderCalendar = (date: Date) => {\n const year = date.getFullYear();\n const month = date.getMonth();\n const days = generateCalendarDays(year, month);\n const currentYear = new Date().getFullYear();\n const isLeftCalendar = date.getTime() === leftMonth.getTime();\n const yearOptions = getYearOptions(currentYear, year);\n\n return (\n <div className=\"se-design-calendar-container w-fit p-4\">\n <div className=\"flex justify-between items-center\">\n <Icon\n name=\"chevron\"\n rotation=\"90\"\n size={16}\n onClick={() => {\n const newDate = handleMonthNavigation(date, false);\n // Check if navigating back would go before today when disablePastDates is true\n if (disablePastDates) {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n if (newDate < today && newDate.getMonth() !== today.getMonth()) {\n return; // Don't navigate to past months\n }\n }\n handleMonthChange(newDate, isLeftCalendar);\n }}\n className={`datepicker-navigation-icon ${\n disablePastDates &&\n date.getMonth() === new Date().getMonth() &&\n date.getFullYear() === new Date().getFullYear()\n ? 'disabled'\n : ''\n }`}\n automationId={`${automationId}-previous-month`}\n />\n\n <div className=\"flex gap-2\" onClick={(e) => e.stopPropagation()}>\n <Dropdown\n type=\"select\"\n dropDownOptions={months}\n defaultSelectedValue={months[month]}\n selectBy=\"label\"\n optionsUniqueBy=\"value\"\n displaySelected={true}\n onOptionClick={(selectedOption) => {\n const newDate = new Date(date);\n newDate.setMonth(months.findIndex((m) => m.value === selectedOption.value));\n handleMonthChange(newDate, isLeftCalendar);\n }}\n className=\"w-[124px] dropdown-option-container\"\n />\n <Dropdown\n type=\"select\"\n dropDownOptions={yearOptions}\n defaultSelectedValue={yearOptions.find((y) => y.value === year)}\n selectBy=\"label\"\n optionsUniqueBy=\"value\"\n displaySelected={true}\n onOptionClick={(selectedOption) => {\n const newDate = new Date(date);\n newDate.setFullYear(selectedOption.value);\n handleMonthChange(newDate, isLeftCalendar);\n }}\n className=\"w-[104px] dropdown-option-container\"\n />\n </div>\n\n <Icon\n name=\"chevron\"\n rotation=\"270\"\n size={16}\n className={`datepicker-navigation-icon ${\n (!shouldAllowFutureDateSelection &&\n month === new Date().getMonth() &&\n year === new Date().getFullYear()) ||\n (maxDays !== undefined &&\n (() => {\n const today = new Date();\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n return date.getMonth() === maxDate.getMonth() && date.getFullYear() === maxDate.getFullYear();\n })())\n ? 'disabled'\n : ''\n }`}\n onClick={() => {\n const newDate = handleMonthNavigation(date, true);\n // Check if the new date would exceed maxDays\n if (maxDays !== undefined) {\n const today = new Date();\n const maxDate = new Date(today);\n maxDate.setDate(maxDate.getDate() + maxDays);\n if (newDate > maxDate) {\n return;\n }\n }\n handleMonthChange(newDate, isLeftCalendar);\n }}\n automationId={`${automationId}-next-month`}\n />\n </div>\n <div className=\"grid grid-cols-7 gap-2 mt-3\">\n {weekDays.map((day, index) => (\n <div key={`${day}-${index}`} className=\"datepicker-weekdays\">\n {day}\n </div>\n ))}\n {days.map((date, index) => {\n const isStart = date && isStartDate(date);\n const isEnd = date && isEndDate(date);\n const isSameStartEnd = date && isSameStartAndEndDate(date);\n const inRange = date && !isStart && !isEnd && isDateInRange(date);\n const todayDate = date && isToday(date);\n const disabled = isDateDisabled(date);\n const dateValue = date?.getDate();\n\n return (\n <div\n key={`${date}-${index}`}\n onClick={() => !disabled && date && handleDateClick(date)}\n className={`\n relative h-10 w-10 flex items-center justify-center transition-colors rounded-md\n ${\n disabled ? 'cursor-not-allowed text-[var(--color-gray-600)] hover:bg-transparent' : 'cursor-pointer'\n }\n ${\n isSameStartEnd\n ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n : ''\n }\n ${\n !isSameStartEnd && isStart\n ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n : ''\n }\n ${\n !isSameStartEnd && isEnd\n ? 'bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)]'\n : ''\n }\n ${!isStart && !isEnd && inRange ? 'bg-[var(--color-blue-100)] text-[var(--color-blue-600)] outline outline-1 outline-[var(--color-blue-500)]' : ''}\n ${!isStart && !isEnd && !inRange && !disabled ? 'hover:bg-[var(--color-blue-100)] hover:outline hover:outline-1 hover:outline-[var(--color-blue-500)]' : ''}\n ${todayDate && !isStart && !isEnd ? 'text-[var(--color-blue-500)] bg-[var(--color-blue-100)] outline outline-1 outline-[var(--color-blue-500)]' : ''}\n ${!disabled && !isStart && !isEnd && !todayDate ? 'text-[var(--color-blue-500)]' : ''}\n `}\n data-automation-id={`${automationId}-date-${dateValue}`}\n >\n {date ? (\n <>\n {dateValue}\n {!isSameStartEnd && (isStart || isEnd) && (\n <div\n className={`absolute top-0 bottom-0 ${isStart ? 'right-[-8px]' : 'left-[-8px]'} w-[8px]\n bg-[var(--color-blue-100)] -z-10`}\n />\n )}\n </>\n ) : (\n ''\n )}\n </div>\n );\n })}\n </div>\n </div>\n );\n };\n\n return (\n <div\n className={`se-design-datepicker-container flex flex-col bg-[var(--color-white)] rounded-md shadow-md w-max ${className}`}\n >\n {showHeader && (\n <div className=\"se-design-datepicker-header flex justify-between items-center border-b border-[var(--color-gray-200)] p-4\">\n <h2 className=\"datepicker-title\">{title}</h2>\n {onClose && (\n <Icon\n name=\"close\"\n size={16}\n onClick={onClose}\n className=\"cursor-pointer\"\n automationId={`${automationId}-close`}\n />\n )}\n </div>\n )}\n <div className=\"se-design-datepicker-content flex\">\n {showQuickActions && renderQuickActions()}\n <div className=\"flex\">\n {showSingleMonth ? (\n renderCalendar(leftMonth)\n ) : (\n <>\n {renderCalendar(leftMonth)}\n <div className=\"h-full w-[1px] border-r border-[var(--color-gray-200)]\"></div>\n {renderCalendar(rightMonth)}\n </>\n )}\n </div>\n </div>\n {!singleDateSelection && (\n <div className=\"se-design-datepicker-footer flex justify-end items-center gap-5 p-4 border-t border-[var(--color-gray-200)]\">\n <Button\n label={labels?.clear || 'Clear'}\n type=\"ghost\"\n onClick={handleClear}\n data-automation-id={`${automationId}-clear-button`}\n />\n <Button\n label={labels?.apply || 'Apply'}\n type=\"primary\"\n onClick={handleApply}\n data-automation-id={`${automationId}-apply-button`}\n />\n </div>\n )}\n </div>\n );\n};\n"],"names":["React__default","useState","Button","Icon","Dropdown","weekDays","quickActions","months","value","label","DatePicker","title","showHeader","initialStartDate","initialEndDate","onApply","onClose","shouldAllowFutureDateSelection","maxDays","disablePastDates","singleDateSelection","minYearOption","showQuickActions","showSingleMonth","className","automationId","labels","clear","apply","getDefaultDateRange","startDate","endDate","Date","setHours","getDefaultMonths","today","lastMonth","setDate","setMonth","getMonth","selectedRange","setSelectedRange","defaultMonths","_","leftMonth","setLeftMonth","rightMonth","setRightMonth","getDaysInMonth","year","month","getDate","getFirstDayOfMonth","getDay","generateCalendarDays","daysInMonth","firstDay","days","i","push","day","date","isSameDay","date1","date2","getFullYear","isDateInRange","compareDate","isToday","isDateDisabled","dateToCheck","maxDate","handleDateClick","clickedDate","currentStart","handleMonthNavigation","increment","newDate","ensureDateInCorrectOrder","leftDate","rightDate","getTime","handleMonthChange","isLeftCalendar","newLeft","newRight","isStartDate","isEndDate","isSameStartAndEndDate","getYearOptions","currentYear","calendarYear","startYear","endYear","maxYear","Math","min","max","yearCount","Array","from","length","toString","filter","handleClear","getStartOfDay","getEndOfDay","handleQuickAction","action","firstDayOfWeek","lastWeekStart","lastWeekEnd","renderQuickActions","React","createElement","map","key","type","onClick","handleApply","selectedDate","renderCalendar","yearOptions","name","rotation","size","e","stopPropagation","dropDownOptions","defaultSelectedValue","selectBy","optionsUniqueBy","displaySelected","onOptionClick","selectedOption","findIndex","m","find","y","setFullYear","undefined","index","isStart","isEnd","isSameStartEnd","inRange","todayDate","disabled","dateValue","Fragment"],"mappings":"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"}
|
package/dist/index51.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index51.js","sources":["../src/components/InputWithIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './styles.scss';\n\nexport interface InputIconProps {\n className?: string;\n disabled?: boolean;\n disableHover?: boolean;\n name: string;\n onClick?: () => void;\n position: 'left' | 'right';\n style?: React.CSSProperties;\n /**\n * Accessible name for the icon when it is interactive (onClick provided).\n * Required for a11y when the icon has its own onClick.\n */\n ariaLabel?: string;\n}\n\nexport interface InputWithIconProps {\n disabled?: boolean;\n error?: boolean;\n errorMessage?: string;\n id?: string;\n inputStyle?: React.CSSProperties;\n label?: string;\n leftIcon?: InputIconProps;\n maxLength?: number | undefined;\n onChange?: (value: string) => void;\n onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n placeholder?: string;\n readOnly?: boolean;\n rightIcon?: InputIconProps;\n style?: React.CSSProperties;\n tag?: string;\n type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';\n value: string;\n className?: string;\n automationId?: string;\n /**\n * Accessible name when no visible label exists.\n * Prefer a visible label prop instead where possible.\n */\n ariaLabel?: string;\n /**\n * ID(s) of external visible element(s) that label this input.\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this input (hints, notes, constraints).\n * Announced by screen readers after the label and value, giving extra context.\n */\n ariaDescribedBy?: string;\n /**\n * Set to \"dialog\" when this input opens a date picker or other dialog.\n */\n ariaHasPopup?: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n}\n\nexport function InputWithIcon({\n disabled,\n error,\n errorMessage,\n id,\n inputStyle,\n label,\n leftIcon,\n maxLength,\n onChange,\n onClick,\n onKeyDown,\n placeholder,\n readOnly,\n rightIcon,\n style,\n tag,\n type = 'text',\n value,\n className = '',\n automationId = '',\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ariaHasPopup\n}: InputWithIconProps) {\n const inputId = useStableId(id, 'se-input-icon');\n const Element = tag || 'input';\n\n const accessibleNameProps = getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy });\n\n // Trigger mode: readOnly + onClick means the whole widget acts as one interactive element\n // (e.g. a date picker trigger). ONE tab stop — the input — and the icon is always decorative.\n // The wrapper div becomes the unified mouse click zone so clicking anywhere, including the\n // icon area, fires the action without a second focusable element.\n //\n // Non-trigger mode: normal editable input. If an icon has its own onClick it is an independent\n // action (e.g. show/hide password) and becomes its own accessible button via Icon's useAccessiblePress.\n const isTriggerMode = !!readOnly && !!onClick;\n\n const renderIcon = (iconProps: InputIconProps) => {\n if (!iconProps) return null;\n\n const isIconDisabled = disabled || iconProps.disabled;\n // In trigger mode icon is always decorative — the wrapper is the click zone for the whole widget.\n // In non-trigger mode pass onClick to Icon so it uses useAccessiblePress:\n // role=\"button\", tabIndex=0, Enter/Space, focus-outline. Decorative when no onClick.\n const iconOnClick = isTriggerMode || isIconDisabled ? undefined : iconProps.onClick;\n\n return (\n <div\n className={`input-with-icon-icon input-with-icon-icon-${iconProps.position} ${iconProps.className || ''} ${isIconDisabled ? 'disabled' : ''} ${iconProps.disableHover ? 'no-hover' : ''}`}\n style={iconProps.style}\n >\n <Icon\n name={iconProps.name}\n onClick={iconOnClick}\n ariaLabel={iconOnClick ? iconProps.ariaLabel : undefined}\n />\n </div>\n );\n };\n\n // In trigger mode Enter/Space on the focused input fires the action, same as a button would.\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (isTriggerMode && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n onClick!(e as any);\n }\n onKeyDown?.(e);\n };\n\n const hasLeftIcon = !!leftIcon;\n const hasRightIcon = !!rightIcon;\n\n return (\n <div className={`input-with-icon-main-container ${className}`} style={style} data-automation-id={automationId}>\n {label && <label className=\"label-container\" htmlFor={inputId}>{label}</label>}\n <div\n className={`input-with-icon-wrapper ${hasLeftIcon ? 'has-left-icon' : ''} ${hasRightIcon ? 'has-right-icon' : ''}`}\n // In trigger mode the wrapper is the unified mouse click zone — clicking anywhere in the\n // widget (including the icon area) fires the action. Don't also put onClick on the input\n // element or it would double-fire when the input itself is clicked.\n onClick={isTriggerMode ? (e) => onClick!(e as any) : undefined}\n style={isTriggerMode ? { cursor: 'pointer' } : undefined}\n >\n {renderIcon(leftIcon!)}\n {React.createElement(Element, {\n id: inputId,\n value,\n onChange: onChange\n ? (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)\n : undefined,\n // In trigger mode don't attach onClick to the input — the wrapper handles it.\n onClick: isTriggerMode ? undefined : onClick,\n onKeyDown: handleKeyDown,\n disabled,\n readOnly,\n type,\n className: `input-with-icon-element ${error ? 'input-with-icon-container-error' : 'input-with-icon-container-default'} ${disabled ? 'input-with-icon-container-disabled' : ''}`,\n maxLength: maxLength ? maxLength : undefined,\n placeholder: placeholder,\n // In trigger mode: pointer cursor so it matches the wrapper, and no text selection\n // since the value is display-only — selecting \"90 days\" with a caret is misleading.\n style: isTriggerMode\n ? { cursor: 'pointer', userSelect: 'none', ...inputStyle }\n : inputStyle,\n 'aria-haspopup': ariaHasPopup,\n ...accessibleNameProps\n })}\n {renderIcon(rightIcon!)}\n </div>\n {(error || maxLength) &&\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n </div>\n }\n </div>\n );\n}\n"],"names":["React__default","Icon","useStableId","getA11yNameAttributes","InputWithIcon","disabled","error","errorMessage","id","inputStyle","label","leftIcon","maxLength","onChange","onClick","onKeyDown","placeholder","readOnly","rightIcon","style","tag","type","value","className","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaHasPopup","inputId","Element","accessibleNameProps","isTriggerMode","renderIcon","iconProps","isIconDisabled","iconOnClick","undefined","React","createElement","position","disableHover","name","handleKeyDown","e","key","preventDefault","hasLeftIcon","hasRightIcon","htmlFor","cursor","target","userSelect","length"],"mappings":"AA8DO,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,SAASC,EAAc;AAAA,EAC5BC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,OAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,cAAAA;AACkB,GAAG;AACrB,QAAMC,IAAU3B,EAAYM,GAAI,eAAe,GACzCsB,IAAUV,KAAO,SAEjBW,IAAsB5B,EAAsB;AAAA,IAAEsB,WAAAA;AAAAA,IAAWC,gBAAAA;AAAAA,IAAgBC,iBAAAA;AAAAA,EAAAA,CAAiB,GAS1FK,IAAgB,CAAC,CAACf,KAAY,CAAC,CAACH,GAEhCmB,IAAaA,CAACC,MAA8B;AAChD,QAAI,CAACA,EAAW,QAAO;AAEvB,UAAMC,IAAiB9B,KAAY6B,EAAU7B,UAIvC+B,IAAcJ,KAAiBG,IAAiBE,SAAYH,EAAUpB;AAE5E,WACEwB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEhB,WAAW,6CAA6CW,EAAUM,QAAQ,IAAIN,EAAUX,aAAa,EAAE,IAAIY,IAAiB,aAAa,EAAE,IAAID,EAAUO,eAAe,aAAa,EAAE;AAAA,MACvLtB,OAAOe,EAAUf;AAAAA,IAAAA,GAEjBmB,gBAAAA,EAAAC,cAACtC,GAAI;AAAA,MACHyC,MAAMR,EAAUQ;AAAAA,MAChB5B,SAASsB;AAAAA,MACTX,WAAWW,IAAcF,EAAUT,YAAYY;AAAAA,IAAAA,CAChD,CACE;AAAA,EAET,GAGMM,IAAgBA,CAACC,MAA6C;AAClE,IAAIZ,MAAkBY,EAAEC,QAAQ,WAAWD,EAAEC,QAAQ,SACnDD,EAAEE,eAAAA,GACFhC,EAAS8B,CAAQ,IAEnB7B,IAAY6B,CAAC;AAAA,EACf,GAEMG,IAAc,CAAC,CAACpC,GAChBqC,IAAe,CAAC,CAAC9B;AAEvB,SACEoB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,kCAAkCA,CAAS;AAAA,IAAIJ,OAAAA;AAAAA,IAAc,sBAAoBK;AAAAA,EAAAA,GAC9Fd,KAAS4B,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAOhB,WAAU;AAAA,IAAkB0B,SAASpB;AAAAA,EAAAA,GAAUnB,CAAa,GAC7E4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEhB,WAAW,2BAA2BwB,IAAc,kBAAkB,EAAE,IAAIC,IAAe,mBAAmB,EAAE;AAAA,IAIhHlC,SAASkB,IAAiBY,CAAAA,MAAM9B,EAAS8B,CAAQ,IAAIP;AAAAA,IACrDlB,OAAOa,IAAgB;AAAA,MAAEkB,QAAQ;AAAA,IAAA,IAAcb;AAAAA,EAAAA,GAE9CJ,EAAWtB,CAAS,GACpB2B,gBAAAA,EAAMC,cAAcT,GAAS;AAAA,IAC5BtB,IAAIqB;AAAAA,IACJP,OAAAA;AAAAA,IACAT,UAAUA,IACN,CAAC+B,MAA2C/B,EAAS+B,EAAEO,OAAO7B,KAAK,IACnEe;AAAAA;AAAAA,IAEJvB,SAASkB,IAAgBK,SAAYvB;AAAAA,IACrCC,WAAW4B;AAAAA,IACXtC,UAAAA;AAAAA,IACAY,UAAAA;AAAAA,IACAI,MAAAA;AAAAA,IACAE,WAAW,2BAA2BjB,IAAQ,oCAAoC,mCAAmC,IAAID,IAAW,uCAAuC,EAAE;AAAA,IAC7KO,WAAWA,KAAwByB;AAAAA,IACnCrB,aAAAA;AAAAA;AAAAA;AAAAA,IAGAG,OAAOa,IACH;AAAA,MAAEkB,QAAQ;AAAA,MAAWE,YAAY;AAAA,MAAQ,GAAG3C;AAAAA,IAAAA,IAC5CA;AAAAA,IACJ,iBAAiBmB;AAAAA,IACjB,GAAGG;AAAAA,EAAAA,CACJ,GACAE,EAAWf,CAAU,CACnB,IACHZ,KAASM,MACT0B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGjB,IAAQ,uBAAuB,oBAAoB;AAAA,EAAA,GACnEA,KAASgC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GAAiBhB,CAAkB,GAC3DK,KAAa0B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GAAYX,KAAaU,GAAO+B,SAAS,MAAMzC,CAAe,CACxF,CAEJ;AAET;"}
|
|
1
|
+
{"version":3,"file":"index51.js","sources":["../src/components/InputWithIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './styles.scss';\n\nexport interface InputIconProps {\n className?: string;\n disabled?: boolean;\n disableHover?: boolean;\n name: string;\n onClick?: () => void;\n position: 'left' | 'right';\n style?: React.CSSProperties;\n /**\n * Accessible name for the icon when it is interactive (onClick provided).\n * Required for a11y when the icon has its own onClick.\n */\n ariaLabel?: string;\n}\n\nexport interface InputWithIconProps {\n disabled?: boolean;\n error?: boolean;\n errorMessage?: string;\n id?: string;\n inputStyle?: React.CSSProperties;\n label?: string;\n leftIcon?: InputIconProps;\n maxLength?: number | undefined;\n onChange?: (value: string) => void;\n onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n placeholder?: string;\n readOnly?: boolean;\n rightIcon?: InputIconProps;\n style?: React.CSSProperties;\n tag?: string;\n type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';\n value: string;\n className?: string;\n automationId?: string;\n /**\n * Accessible name when no visible label exists.\n * Prefer a visible label prop instead where possible.\n */\n ariaLabel?: string;\n /**\n * ID(s) of external visible element(s) that label this input.\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this input (hints, notes, constraints).\n * Announced by screen readers after the label and value, giving extra context.\n */\n ariaDescribedBy?: string;\n /**\n * Set to \"dialog\" when this input opens a date picker or other dialog.\n */\n ariaHasPopup?: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n}\n\nexport function InputWithIcon({\n disabled,\n error,\n errorMessage,\n id,\n inputStyle,\n label,\n leftIcon,\n maxLength,\n onChange,\n onClick,\n onKeyDown,\n placeholder,\n readOnly,\n rightIcon,\n style,\n tag,\n type = 'text',\n value,\n className = '',\n automationId = '',\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ariaHasPopup\n}: InputWithIconProps) {\n const inputId = useStableId(id, 'se-input-icon');\n const Element = tag || 'input';\n\n const accessibleNameProps = getA11yNameAttributes({ ariaLabel, ariaLabelledBy, ariaDescribedBy });\n\n // Trigger mode: readOnly + onClick means the whole widget acts as one interactive element\n // (e.g. a date picker trigger). ONE tab stop — the input — and the icon is always decorative.\n // The wrapper div becomes the unified mouse click zone so clicking anywhere, including the\n // icon area, fires the action without a second focusable element.\n //\n // Non-trigger mode: normal editable input. If an icon has its own onClick it is an independent\n // action (e.g. show/hide password) and becomes its own accessible button via Icon's useAccessiblePress.\n const isTriggerMode = !!readOnly && !!onClick;\n\n const renderIcon = (iconProps: InputIconProps) => {\n if (!iconProps) return null;\n\n const isIconDisabled = disabled || iconProps.disabled;\n // In trigger mode icon is always decorative — the wrapper is the click zone for the whole widget.\n // In non-trigger mode pass onClick to Icon so it uses useAccessiblePress:\n // role=\"button\", tabIndex=0, Enter/Space, focus-outline. Decorative when no onClick.\n const iconOnClick = isTriggerMode || isIconDisabled ? undefined : iconProps.onClick;\n\n return (\n <div\n className={`input-with-icon-icon input-with-icon-icon-${iconProps.position} ${iconProps.className || ''} ${isIconDisabled ? 'disabled' : ''} ${iconProps.disableHover ? 'no-hover' : ''}`}\n style={iconProps.style}\n >\n <Icon\n name={iconProps.name}\n onClick={iconOnClick}\n ariaLabel={iconOnClick ? iconProps.ariaLabel : undefined}\n />\n </div>\n );\n };\n\n // In trigger mode Enter/Space on the focused input fires the action, same as a button would.\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (isTriggerMode && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n onClick!(e as any);\n }\n onKeyDown?.(e);\n };\n\n const hasLeftIcon = !!leftIcon;\n const hasRightIcon = !!rightIcon;\n\n return (\n <div className={`input-with-icon-main-container ${className}`} style={style} data-automation-id={automationId}>\n {label && <label className=\"label-container\" htmlFor={inputId}>{label}</label>}\n <div\n className={`input-with-icon-wrapper ${hasLeftIcon ? 'has-left-icon' : ''} ${hasRightIcon ? 'has-right-icon' : ''}`}\n // In trigger mode the wrapper is the unified mouse click zone — clicking anywhere in the\n // widget (including the icon area) fires the action. Don't also put onClick on the input\n // element or it would double-fire when the input itself is clicked.\n onClick={isTriggerMode ? (e) => onClick!(e as any) : undefined}\n style={isTriggerMode ? { cursor: 'pointer' } : undefined}\n >\n {renderIcon(leftIcon!)}\n {React.createElement(Element, {\n id: inputId,\n value,\n onChange: onChange\n ? (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)\n : undefined,\n // In trigger mode don't attach onClick to the input — the wrapper handles it.\n onClick: isTriggerMode ? undefined : onClick,\n onKeyDown: handleKeyDown,\n disabled,\n readOnly,\n type,\n className: `input-with-icon-element ${error ? 'input-with-icon-container-error' : 'input-with-icon-container-default'} ${disabled ? 'input-with-icon-container-disabled' : ''}`,\n maxLength: maxLength ? maxLength : undefined,\n placeholder: placeholder,\n // In trigger mode: pointer cursor so it matches the wrapper, and no text selection\n // since the value is display-only — selecting \"90 days\" with a caret is misleading.\n style: isTriggerMode\n ? { cursor: 'pointer', userSelect: 'none', ...inputStyle }\n : inputStyle,\n 'aria-haspopup': ariaHasPopup,\n ...accessibleNameProps\n })}\n {renderIcon(rightIcon!)}\n </div>\n {(error || maxLength) &&\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n </div>\n }\n </div>\n );\n}\n"],"names":["React__default","Icon","useStableId","getA11yNameAttributes","InputWithIcon","disabled","error","errorMessage","id","inputStyle","label","leftIcon","maxLength","onChange","onClick","onKeyDown","placeholder","readOnly","rightIcon","style","tag","type","value","className","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaHasPopup","inputId","Element","accessibleNameProps","isTriggerMode","renderIcon","iconProps","isIconDisabled","iconOnClick","undefined","React","createElement","position","disableHover","name","handleKeyDown","e","key","preventDefault","hasLeftIcon","hasRightIcon","htmlFor","cursor","target","userSelect","length"],"mappings":"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"}
|
package/dist/index52.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index52.js","sources":["../src/components/DownloadWidget/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { delay } from 'utils/delay';\n\nimport { Icon } from '../Icon';\n\ntype ItemType = { label: string; id?: number; metadata?: any };\n\ntype DownloadWidgetProps = {\n title: string;\n itemsList: ItemType[];\n handleDownload: (downloadItem?: any) => void;\n backgroundColor?: string;\n titleBackgroundColor?: string;\n};\n\nexport const DownloadWidget = (props: DownloadWidgetProps) => {\n const {\n title = '',\n itemsList = [],\n handleDownload,\n backgroundColor = 'var(--color-white)',\n titleBackgroundColor = 'var(--color-blue-50)'\n } = props;\n\n useEffect(() => {\n if (itemsList?.length > 0) {\n itemsList?.forEach((downloadItem) => {\n delay(2000).then(() => {\n handleDownload(downloadItem);\n });\n });\n }\n }, [itemsList?.length]);\n\n return (\n <div\n className=\"download-widgets-container rounded-t-xl border border-[var(--color-gray-400)] w-[300px] overflow-hidden fixed bottom-0 right-5 z-[1100]\"\n style={{ backgroundColor }}\n >\n <div className=\"p-4 text-base font-medium\" style={{ backgroundColor: titleBackgroundColor }}>\n {title}\n </div>\n {itemsList?.map((item) => (\n <div className=\" download-item flex items-center gap-2 px-4 pt-4 last:pb-4\">\n <span className=\"text-base font-normal flex-1\">{item.label}</span>\n <Icon name=\"checked-circle\" stroke=\"var(--color-green-500)\" size={16} />\n </div>\n ))}\n </div>\n );\n};\n"],"names":["
|
|
1
|
+
{"version":3,"file":"index52.js","sources":["../src/components/DownloadWidget/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { delay } from 'utils/delay';\n\nimport { Icon } from '../Icon';\n\ntype ItemType = { label: string; id?: number; metadata?: any };\n\ntype DownloadWidgetProps = {\n title: string;\n itemsList: ItemType[];\n handleDownload: (downloadItem?: any) => void;\n backgroundColor?: string;\n titleBackgroundColor?: string;\n};\n\nexport const DownloadWidget = (props: DownloadWidgetProps) => {\n const {\n title = '',\n itemsList = [],\n handleDownload,\n backgroundColor = 'var(--color-white)',\n titleBackgroundColor = 'var(--color-blue-50)'\n } = props;\n\n useEffect(() => {\n if (itemsList?.length > 0) {\n itemsList?.forEach((downloadItem) => {\n delay(2000).then(() => {\n handleDownload(downloadItem);\n });\n });\n }\n }, [itemsList?.length]);\n\n return (\n <div\n className=\"download-widgets-container rounded-t-xl border border-[var(--color-gray-400)] w-[300px] overflow-hidden fixed bottom-0 right-5 z-[1100]\"\n style={{ backgroundColor }}\n >\n <div className=\"p-4 text-base font-medium\" style={{ backgroundColor: titleBackgroundColor }}>\n {title}\n </div>\n {itemsList?.map((item) => (\n <div className=\" download-item flex items-center gap-2 px-4 pt-4 last:pb-4\">\n <span className=\"text-base font-normal flex-1\">{item.label}</span>\n <Icon name=\"checked-circle\" stroke=\"var(--color-green-500)\" size={16} />\n </div>\n ))}\n </div>\n );\n};\n"],"names":["DownloadWidget","props","title","itemsList","handleDownload","backgroundColor","titleBackgroundColor","useEffect","length","forEach","downloadItem","delay","then","React","createElement","className","style","map","item","label","Icon","name","stroke","size"],"mappings":"AAgBaA,OAAAA,KAAAA,aAAAA,SAAAA;AAAAA,SAAAA,SAAAA,SAAAA;AAAAA,SAAAA,QAAAA,SAAAA;AAAAA,MAAAA,IAAiBA,CAACC,MAA+B;AACtD,QAAA;AAAA,IACJC,OAAAA,IAAQ;AAAA,IACRC,WAAAA,IAAY,CAAE;AAAA,IACdC,gBAAAA;AAAAA,IACAC,iBAAAA,IAAkB;AAAA,IAClBC,sBAAAA,IAAuB;AAAA,EACrBL,IAAAA;AAEJM,SAAAA,EAAU,MAAM;AACVJ,IAAAA,GAAWK,SAAS,KACtBL,GAAWM,QAASC,CAAiBA,MAAA;AAC7B,MAAAC,EAAA,GAAI,EAAEC,KAAK,MAAM;AACrBR,QAAAA,EAAeM,CAAY;AAAA,MAAA,CAC5B;AAAA,IAAA,CACF;AAAA,EACH,GACC,CAACP,GAAWK,MAAM,CAAC,GAGpBK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVC,OAAO;AAAA,MAAEX,iBAAAA;AAAAA,IAAgB;AAAA,EAAA,GAEzBS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA4BC,OAAO;AAAA,MAAEX,iBAAiBC;AAAAA,IAAqB;AAAA,EAAA,GACvFJ,CACE,GACJC,GAAWc,IAAKC,CACfL,MAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,KAAgCG,EAAKC,KAAY,GACjEN,gBAAAA,EAAAC,cAACM,GAAI;AAAA,IAACC,MAAK;AAAA,IAAiBC,QAAO;AAAA,IAAyBC,MAAM;AAAA,EAAA,CAAK,CACpE,CACN,CACE;AAET;"}
|
package/dist/index53.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index53.js","sources":["../src/components/RadioSwitch/index.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * This is Radio Switch, Only one option can be selected at a time.\n * There can be multiple options, but only one can be selected at a time.\n */\nexport interface RadioSwitchOption {\n label: string;\n value: string;\n}\n\nexport interface RadioSwitchProps {\n checkedRadioOption?: string;\n optionList: RadioSwitchOption[];\n onChange?: (value: string) => void;\n switchWidth?: string;\n automationId?: string;\n}\n\nexport const RadioSwitch: React.FC<RadioSwitchProps> = ({ checkedRadioOption, optionList, onChange, switchWidth, automationId = '' }) => {\n const handleChange = (value: string) => {\n if (onChange) {\n onChange(value);\n }\n };\n\n return (\n <div\n className=\"flex rounded-full border border-gray-300 bg-white min-w-[110px] h-[34px]\"\n role=\"radiogroup\"\n aria-label=\"Switch options\"\n data-automation-id={automationId}\n style={{\n width: switchWidth\n // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.\n }}\n >\n {optionList.map((option) => (\n <div\n key={option.value}\n className={`relative flex-1 flex items-center block py-2 px-4 rounded-[24px] w-full text-center cursor-pointer transition-all duration-200 ${\n option.value === checkedRadioOption\n ? 'bg-[var(--color-blue-100)] text-[var(--color-blue-500)] shadow-sm'\n : 'text-gray-700 hover:text-gray-900'\n }`}\n onClick={() => handleChange(option.value)}\n data-automation-id={`radio-switch-option-${option.value}`}\n >\n <input\n type=\"radio\"\n name=\"switch\"\n id={`switch-${option.value}`}\n checked={option.value === checkedRadioOption}\n className=\"sr-only\" // Hide the input but keep it accessible\n />\n <label htmlFor={`switch-${option.value}`} className={' cursor-pointer '}>\n {option.label}\n </label>\n </div>\n ))}\n </div>\n );\n};\n"],"names":["RadioSwitch","checkedRadioOption","optionList","onChange","switchWidth","automationId","handleChange","value","React","createElement","className","role","style","width","map","option","key","onClick","type","name","id","checked","htmlFor","label"],"mappings":";AAmBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,oBAAAA;AAAAA,EAAoBC,YAAAA;AAAAA,EAAYC,UAAAA;AAAAA,EAAUC,aAAAA;AAAAA,EAAaC,cAAAA,IAAe;AAAG,MAAM;
|
|
1
|
+
{"version":3,"file":"index53.js","sources":["../src/components/RadioSwitch/index.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * This is Radio Switch, Only one option can be selected at a time.\n * There can be multiple options, but only one can be selected at a time.\n */\nexport interface RadioSwitchOption {\n label: string;\n value: string;\n}\n\nexport interface RadioSwitchProps {\n checkedRadioOption?: string;\n optionList: RadioSwitchOption[];\n onChange?: (value: string) => void;\n switchWidth?: string;\n automationId?: string;\n}\n\nexport const RadioSwitch: React.FC<RadioSwitchProps> = ({ checkedRadioOption, optionList, onChange, switchWidth, automationId = '' }) => {\n const handleChange = (value: string) => {\n if (onChange) {\n onChange(value);\n }\n };\n\n return (\n <div\n className=\"flex rounded-full border border-gray-300 bg-white min-w-[110px] h-[34px]\"\n role=\"radiogroup\"\n aria-label=\"Switch options\"\n data-automation-id={automationId}\n style={{\n width: switchWidth\n // Moved min-w-[100px] and h-[34px] to Tailwind classes below, so these inline styles are no longer needed.\n }}\n >\n {optionList.map((option) => (\n <div\n key={option.value}\n className={`relative flex-1 flex items-center block py-2 px-4 rounded-[24px] w-full text-center cursor-pointer transition-all duration-200 ${\n option.value === checkedRadioOption\n ? 'bg-[var(--color-blue-100)] text-[var(--color-blue-500)] shadow-sm'\n : 'text-gray-700 hover:text-gray-900'\n }`}\n onClick={() => handleChange(option.value)}\n data-automation-id={`radio-switch-option-${option.value}`}\n >\n <input\n type=\"radio\"\n name=\"switch\"\n id={`switch-${option.value}`}\n checked={option.value === checkedRadioOption}\n className=\"sr-only\" // Hide the input but keep it accessible\n />\n <label htmlFor={`switch-${option.value}`} className={' cursor-pointer '}>\n {option.label}\n </label>\n </div>\n ))}\n </div>\n );\n};\n"],"names":["RadioSwitch","checkedRadioOption","optionList","onChange","switchWidth","automationId","handleChange","value","React","createElement","className","role","style","width","map","option","key","onClick","type","name","id","checked","htmlFor","label"],"mappings":";AAmBO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,oBAAAA;AAAAA,EAAoBC,YAAAA;AAAAA,EAAYC,UAAAA;AAAAA,EAAUC,aAAAA;AAAAA,EAAaC,cAAAA,IAAe;AAAG,MAAM;AACjIC,QAAAA,IAAeA,CAACC,MAAkB;AACtC,IAAIJ,KACFA,EAASI,CAAK;AAAA,EAChB;AAIAC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVC,MAAK;AAAA,IACL,cAAW;AAAA,IACX,sBAAoBN;AAAAA,IACpBO,OAAO;AAAA,MACLC,OAAOT;AAAAA;AAAAA,IAET;AAAA,EAAA,GAECF,EAAWY,IAAKC,CACfP,MAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEO,KAAKD,EAAOR;AAAAA,IACZG,WAAW,kIACTK,EAAOR,UAAUN,IACb,sEACA,mCAAmC;AAAA,IAEzCgB,SAASA,MAAMX,EAAaS,EAAOR,KAAK;AAAA,IACxC,sBAAoB,uBAAuBQ,EAAOR,KAAK;AAAA,EAAA,GAEvDE,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACES,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,IAAI,UAAUL,EAAOR,KAAK;AAAA,IAC1Bc,SAASN,EAAOR,UAAUN;AAAAA,IAC1BS,WAAU;AAAA;AAAA,EAAA,CACX,GACDD,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOa,SAAS,UAAUP,EAAOR,KAAK;AAAA,IAAIG,WAAW;AAAA,EAClDK,GAAAA,EAAOQ,KACH,CACJ,CACN,CACE;AAET;"}
|
package/dist/index54.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index54.js","sources":["../src/components/ShimmerLoader/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport './style.scss';\n\nexport interface ShimmerElement {\n type: 'text' | 'rect' | 'rect-sm' | 'circle' | 'avatar' | 'image' | 'button';\n width: number | string;\n height: number | string;\n borderRadius?: number | string;\n margin?: string;\n className?: string;\n children?: ShimmerElement[];\n}\n\nexport interface ShimmerContainer {\n type: 'container';\n direction?: 'row' | 'column';\n gap?: number | string;\n padding?: string;\n margin?: string;\n alignItems?: string;\n flex?: number | string;\n className?: string;\n children: (ShimmerElement | ShimmerContainer)[];\n}\n\nexport type ShimmerStructure = (ShimmerElement | ShimmerContainer)[];\n\nexport interface ShimmerLoaderProps {\n structure: ShimmerStructure;\n className?: string;\n animationDuration?: number;\n baseColor?: string;\n highlightColor?: string;\n width?: number | string;\n height?: number | string;\n}\n\nconst ShimmerElementComponent: FC<{\n element: ShimmerElement;\n animationDuration: number;\n baseColor: string;\n highlightColor: string;\n}> = ({ element, animationDuration, baseColor, highlightColor }) => {\n const style: React.CSSProperties = {\n width: typeof element.width === 'number' ? `${element.width}px` : element.width,\n height: typeof element.height === 'number' ? `${element.height}px` : element.height,\n borderRadius: element.borderRadius\n ? typeof element.borderRadius === 'number'\n ? `${element.borderRadius}px`\n : element.borderRadius\n : undefined,\n margin: element.margin,\n '--shimmer-duration': `${animationDuration}s`,\n '--shimmer-base-color': baseColor,\n '--shimmer-highlight-color': highlightColor\n } as React.CSSProperties;\n\n const shimmerClass = `se-design-shimmer-element se-design-shimmer-${element.type}`;\n\n return (\n <div className={shimmerClass} style={style}>\n {element.children &&\n element.children.map((child, index) => (\n <ShimmerElementComponent\n key={index}\n element={child}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n};\n\nconst ShimmerContainerComponent: FC<{\n container: ShimmerContainer;\n animationDuration: number;\n baseColor: string;\n highlightColor: string;\n}> = ({ container, animationDuration, baseColor, highlightColor }) => {\n const style: React.CSSProperties = {\n display: 'flex',\n flexDirection: container.direction || 'column',\n gap: typeof container.gap === 'number' ? `${container.gap}px` : container.gap,\n padding: container.padding,\n margin: container.margin,\n alignItems: container.alignItems,\n flex: container.flex\n };\n\n return (\n <div className={`se-design-shimmer-container ${container.className || ''}`} style={style}>\n {container.children.map((element, index) =>\n element.type === 'container' ? (\n <ShimmerContainerComponent\n key={index}\n container={element}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ) : (\n <ShimmerElementComponent\n key={index}\n element={element}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n )\n )}\n </div>\n );\n};\n\nexport const ShimmerLoader: FC<ShimmerLoaderProps> = ({\n structure,\n className = '',\n animationDuration = 3,\n baseColor = 'var(--color-gray-600)',\n highlightColor = 'var(--color-gray-500)',\n width,\n height\n}) => {\n const containerStyle: React.CSSProperties = {\n width: width ? (typeof width === 'number' ? `${width}px` : width) : '100%',\n height: height ? (typeof height === 'number' ? `${height}px` : height) : 'auto',\n '--shimmer-duration': `${animationDuration}s`,\n '--shimmer-base-color': baseColor,\n '--shimmer-highlight-color': highlightColor\n } as React.CSSProperties;\n\n return (\n <div className={`se-design-shimmer-loader ${className}`} style={containerStyle}>\n {structure.map((item, index) => {\n if (item.type === 'container') {\n return (\n <ShimmerContainerComponent\n key={index}\n container={item}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n );\n } else {\n return (\n <ShimmerElementComponent\n key={index}\n element={item}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n );\n }\n })}\n </div>\n );\n};\n\nexport default ShimmerLoader;\n"],"names":["ShimmerElementComponent","element","animationDuration","baseColor","highlightColor","style","width","height","borderRadius","undefined","margin","shimmerClass","type","React","createElement","className","children","map","child","index","key","ShimmerContainerComponent","container","display","flexDirection","direction","gap","padding","alignItems","flex","ShimmerLoader","structure","containerStyle","item"],"mappings":";;AAqCA,MAAMA,IAKDA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,mBAAAA;AAAAA,EAAmBC,WAAAA;AAAAA,EAAWC,gBAAAA;AAAe,MAAM;AAClE,QAAMC,IAA6B;AAAA,IACjCC,OAAO,OAAOL,EAAQK,SAAU,WAAW,GAAGL,EAAQK,KAAK,OAAOL,EAAQK;AAAAA,IAC1EC,QAAQ,OAAON,EAAQM,UAAW,WAAW,GAAGN,EAAQM,MAAM,OAAON,EAAQM;AAAAA,IAC7EC,cAAcP,EAAQO,eAClB,OAAOP,EAAQO,gBAAiB,WAC9B,GAAGP,EAAQO,YAAY,OACvBP,EAAQO,eACVC;AAAAA,IACJC,QAAQT,EAAQS;AAAAA,IAChB,sBAAsB,GAAGR,CAAiB;AAAA,IAC1C,wBAAwBC;AAAAA,IACxB,6BAA6BC;AAAAA,EAAAA,GAGzBO,IAAe,+CAA+CV,EAAQW,IAAI;
|
|
1
|
+
{"version":3,"file":"index54.js","sources":["../src/components/ShimmerLoader/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport './style.scss';\n\nexport interface ShimmerElement {\n type: 'text' | 'rect' | 'rect-sm' | 'circle' | 'avatar' | 'image' | 'button';\n width: number | string;\n height: number | string;\n borderRadius?: number | string;\n margin?: string;\n className?: string;\n children?: ShimmerElement[];\n}\n\nexport interface ShimmerContainer {\n type: 'container';\n direction?: 'row' | 'column';\n gap?: number | string;\n padding?: string;\n margin?: string;\n alignItems?: string;\n flex?: number | string;\n className?: string;\n children: (ShimmerElement | ShimmerContainer)[];\n}\n\nexport type ShimmerStructure = (ShimmerElement | ShimmerContainer)[];\n\nexport interface ShimmerLoaderProps {\n structure: ShimmerStructure;\n className?: string;\n animationDuration?: number;\n baseColor?: string;\n highlightColor?: string;\n width?: number | string;\n height?: number | string;\n}\n\nconst ShimmerElementComponent: FC<{\n element: ShimmerElement;\n animationDuration: number;\n baseColor: string;\n highlightColor: string;\n}> = ({ element, animationDuration, baseColor, highlightColor }) => {\n const style: React.CSSProperties = {\n width: typeof element.width === 'number' ? `${element.width}px` : element.width,\n height: typeof element.height === 'number' ? `${element.height}px` : element.height,\n borderRadius: element.borderRadius\n ? typeof element.borderRadius === 'number'\n ? `${element.borderRadius}px`\n : element.borderRadius\n : undefined,\n margin: element.margin,\n '--shimmer-duration': `${animationDuration}s`,\n '--shimmer-base-color': baseColor,\n '--shimmer-highlight-color': highlightColor\n } as React.CSSProperties;\n\n const shimmerClass = `se-design-shimmer-element se-design-shimmer-${element.type}`;\n\n return (\n <div className={shimmerClass} style={style}>\n {element.children &&\n element.children.map((child, index) => (\n <ShimmerElementComponent\n key={index}\n element={child}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ))}\n </div>\n );\n};\n\nconst ShimmerContainerComponent: FC<{\n container: ShimmerContainer;\n animationDuration: number;\n baseColor: string;\n highlightColor: string;\n}> = ({ container, animationDuration, baseColor, highlightColor }) => {\n const style: React.CSSProperties = {\n display: 'flex',\n flexDirection: container.direction || 'column',\n gap: typeof container.gap === 'number' ? `${container.gap}px` : container.gap,\n padding: container.padding,\n margin: container.margin,\n alignItems: container.alignItems,\n flex: container.flex\n };\n\n return (\n <div className={`se-design-shimmer-container ${container.className || ''}`} style={style}>\n {container.children.map((element, index) =>\n element.type === 'container' ? (\n <ShimmerContainerComponent\n key={index}\n container={element}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n ) : (\n <ShimmerElementComponent\n key={index}\n element={element}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n )\n )}\n </div>\n );\n};\n\nexport const ShimmerLoader: FC<ShimmerLoaderProps> = ({\n structure,\n className = '',\n animationDuration = 3,\n baseColor = 'var(--color-gray-600)',\n highlightColor = 'var(--color-gray-500)',\n width,\n height\n}) => {\n const containerStyle: React.CSSProperties = {\n width: width ? (typeof width === 'number' ? `${width}px` : width) : '100%',\n height: height ? (typeof height === 'number' ? `${height}px` : height) : 'auto',\n '--shimmer-duration': `${animationDuration}s`,\n '--shimmer-base-color': baseColor,\n '--shimmer-highlight-color': highlightColor\n } as React.CSSProperties;\n\n return (\n <div className={`se-design-shimmer-loader ${className}`} style={containerStyle}>\n {structure.map((item, index) => {\n if (item.type === 'container') {\n return (\n <ShimmerContainerComponent\n key={index}\n container={item}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n );\n } else {\n return (\n <ShimmerElementComponent\n key={index}\n element={item}\n animationDuration={animationDuration}\n baseColor={baseColor}\n highlightColor={highlightColor}\n />\n );\n }\n })}\n </div>\n );\n};\n\nexport default ShimmerLoader;\n"],"names":["ShimmerElementComponent","element","animationDuration","baseColor","highlightColor","style","width","height","borderRadius","undefined","margin","shimmerClass","type","React","createElement","className","children","map","child","index","key","ShimmerContainerComponent","container","display","flexDirection","direction","gap","padding","alignItems","flex","ShimmerLoader","structure","containerStyle","item"],"mappings":"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"}
|
package/dist/index55.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index55.js","sources":["../src/components/SnackBar/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Icon, IconProps } from '../Icon';\nimport { ProgressBar } from '../ProgressBar';\nimport './style.scss';\n\nexport type SnackbarPosition =\n | 'top-right'\n | 'top-left'\n | 'bottom-right'\n | 'bottom-left'\n | 'top-center'\n | 'bottom-center';\n\nexport type SnackbarVariant = 'default' | 'success' | 'warning' | 'error' | 'info';\n\nexport type SnackbarAction = {\n label: string;\n onClick: () => void;\n variant?: 'primary' | 'secondary';\n};\n\nexport type SnackbarItem = {\n id: string | number;\n name: string;\n type: 'file' | 'folder';\n fileType?: 'doc' | 'pdf' | 'image' | 'other';\n icon?: string;\n onClick?: () => void;\n};\n\nexport interface SnackbarProps {\n /** Whether the snackbar is open */\n open: boolean;\n /** Function to close the snackbar */\n onClose: () => void;\n /** Title text displayed prominently */\n title?: string;\n /** Description text displayed below title */\n description?: string;\n /** Position of the snackbar on screen */\n position?: SnackbarPosition;\n /** Visual variant of the snackbar */\n variant?: SnackbarVariant;\n /** Auto-hide duration in milliseconds (0 = no auto-hide) */\n autoHideDuration?: number;\n /** Whether to show close button */\n showCloseButton?: boolean;\n /** Optional action button */\n action?: SnackbarAction;\n /** Custom className for additional styling */\n className?: string;\n /** Custom styles */\n style?: React.CSSProperties;\n /** Whether to show progress indicator */\n showProgress?: boolean;\n /** Progress value (0-100) */\n progress?: number;\n /** Icon props object (name, fill, stroke, rotation, size, etc.) */\n iconProps?: Omit<IconProps, 'className'>;\n /** List of items to display in expandable section */\n items?: SnackbarItem[];\n /** Whether items list is expanded by default */\n defaultExpanded?: boolean;\n /** Compact mode - renders a simple inline notification with just icon and title */\n compact?: boolean;\n /** Automation ID for testing */\n automationId?: string;\n}\n\nexport const Snackbar: React.FC<SnackbarProps> = ({\n open,\n onClose,\n title,\n description,\n position = 'bottom-right',\n variant = 'default',\n autoHideDuration = 6000,\n showCloseButton = true,\n action,\n className = '',\n style,\n showProgress = false,\n progress = 0,\n iconProps,\n items,\n defaultExpanded = false,\n compact = false,\n automationId = ''\n}) => {\n const [isVisible, setIsVisible] = useState(false);\n const [isExiting, setIsExiting] = useState(false);\n const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n useEffect(() => {\n if (open) {\n setIsVisible(true);\n setIsExiting(false);\n\n // Auto-hide functionality\n if (autoHideDuration > 0) {\n const timer = setTimeout(() => {\n handleClose();\n }, autoHideDuration);\n\n return () => clearTimeout(timer);\n }\n }\n }, [open, autoHideDuration]);\n\n const handleClose = () => {\n setIsExiting(true);\n setTimeout(() => {\n setIsVisible(false);\n setIsExiting(false);\n onClose();\n }, 300); // Animation duration\n };\n\n const handleToggleExpanded = () => {\n setIsExpanded(!isExpanded);\n };\n\n const getFileIcon = (item: SnackbarItem) => {\n if (item.icon) return item.icon;\n\n if (item.type === 'folder') return 'folder-empty';\n if (item.type === 'file') return 'file-empty';\n\n return 'file-empty';\n\n // switch (item.fileType) {\n // case 'doc':\n // return 'docFile';\n // case 'pdf':\n // return 'pdf-file';\n // case 'image':\n // return 'file-empty';\n // default:\n // return 'file-empty';\n // }\n };\n\n if (!isVisible) return null;\n\n const getPositionClasses = () => {\n const positionMap = {\n 'top-right': 'top-4 right-4',\n 'top-left': 'top-4 left-4',\n 'bottom-right': 'bottom-4 right-4',\n 'bottom-left': 'bottom-4 left-4',\n 'top-center': 'top-4 snackbar-center',\n 'bottom-center': 'bottom-4 snackbar-center'\n };\n return positionMap[position];\n };\n\n const getVariantClasses = () => {\n const variantMap = {\n default: 'snackbar-default',\n success: 'snackbar-success',\n warning: 'snackbar-warning',\n error: 'snackbar-error',\n info: 'snackbar-info'\n };\n return variantMap[variant];\n };\n\n const getContainerStyle = (): React.CSSProperties => {\n const baseStyle = style || {};\n\n if (position === 'top-center' || position === 'bottom-center') {\n return {\n ...baseStyle,\n left: '50%',\n // Initial transform for center - animation will override but preserve translateX(-50%)\n transform: 'translateX(-50%)'\n };\n }\n\n return baseStyle;\n };\n\n return (\n <div className=\"snackbar-backdrop fixed inset-0 z-[1000] pointer-events-none\">\n <div\n className={`\n snackbar-container\n ${getPositionClasses()}\n ${getVariantClasses()}\n ${isExiting ? 'snackbar-exit' : 'snackbar-enter'}\n ${compact ? 'snackbar-compact' : ''}\n ${className}\n `}\n style={getContainerStyle()}\n role=\"alert\"\n aria-live=\"polite\"\n data-automation-id={automationId}\n >\n {compact ? (\n // Compact mode - simple inline notification\n <div className=\"snackbar-compact-content\">\n {iconProps?.name && <Icon {...iconProps} size={iconProps.size ?? 16} className=\"snackbar-compact-icon\" />}\n {title && <span className=\"snackbar-compact-title\">{title}</span>}\n </div>\n ) : (\n // Full mode - standard snackbar with all features\n <div className=\"snackbar-content\">\n {/* Header with icon, title, expand/collapse, and close button */}\n <div className=\"snackbar-header\">\n <div className=\"snackbar-title-section\">\n {iconProps?.name && <Icon {...iconProps} size={iconProps.size ?? 20} className=\"snackbar-icon\" />}\n {title && <h4 className=\"snackbar-title\">{title}</h4>}\n </div>\n <div className=\"snackbar-header-actions\">\n {items && items.length > 0 && (\n <Icon\n name=\"chevron\"\n size={16}\n stroke=\"var(--color-gray-100)\"\n rotation={isExpanded ? '0' : '180'}\n className=\"snackbar-expand-icon\"\n onClick={handleToggleExpanded}\n />\n )}\n {showCloseButton && !showProgress && (\n <Icon\n name=\"close\"\n size={16}\n fill=\"var(--color-gray-600)\"\n className=\"snackbar-close-icon\"\n onClick={handleClose}\n />\n )}\n </div>\n </div>\n\n {/* Description */}\n {description && <div className=\"snackbar-description\">{description}</div>}\n\n {/* Progress bar */}\n {showProgress && (\n <div className=\"snackbar-progress-container\">\n {progress === -1 ? (\n <div className=\"snackbar-indeterminate-progress\">\n <div className=\"snackbar-progress-gradient\"></div>\n </div>\n ) : (\n <ProgressBar\n totalTasks={100}\n completedTasks={progress}\n needPercentageCompleted={false}\n progressBarColor=\"var(--color-green-500)\"\n />\n )}\n </div>\n )}\n\n {/* Expandable Items List */}\n {items && items.length > 0 && (\n <div\n className={`snackbar-items-container ${\n isExpanded ? 'snackbar-items-expanded' : 'snackbar-items-collapsed'\n }`}\n >\n <div className=\"snackbar-items-list\">\n {items.map((item) => (\n <div key={item.id} className=\"snackbar-item\" onClick={item.onClick}>\n <div className=\"snackbar-item-content\">\n <Icon name={getFileIcon(item)} size={16} className=\"snackbar-item-icon\" />\n <span className=\"snackbar-item-name\">{item.name}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n )}\n\n {/* Action button */}\n {action && (\n <div className=\"snackbar-actions\">\n <button\n className={`snackbar-action-button snackbar-action-${action.variant || 'primary'}`}\n onClick={action.onClick}\n >\n {action.label}\n </button>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["Snackbar","open","onClose","title","description","position","variant","autoHideDuration","showCloseButton","action","className","style","showProgress","progress","iconProps","items","defaultExpanded","compact","automationId","isVisible","setIsVisible","useState","isExiting","setIsExiting","isExpanded","setIsExpanded","useEffect","timer","setTimeout","handleClose","clearTimeout","handleToggleExpanded","getFileIcon","item","icon","type","getPositionClasses","getVariantClasses","default","success","warning","error","info","getContainerStyle","baseStyle","left","transform","React","createElement","role","name","Icon","_extends","size","length","stroke","rotation","onClick","fill","ProgressBar","totalTasks","completedTasks","needPercentageCompleted","progressBarColor","map","key","id","label"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index55.js","sources":["../src/components/SnackBar/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Icon, IconProps } from '../Icon';\nimport { ProgressBar } from '../ProgressBar';\nimport './style.scss';\n\nexport type SnackbarPosition =\n | 'top-right'\n | 'top-left'\n | 'bottom-right'\n | 'bottom-left'\n | 'top-center'\n | 'bottom-center';\n\nexport type SnackbarVariant = 'default' | 'success' | 'warning' | 'error' | 'info';\n\nexport type SnackbarAction = {\n label: string;\n onClick: () => void;\n variant?: 'primary' | 'secondary';\n};\n\nexport type SnackbarItem = {\n id: string | number;\n name: string;\n type: 'file' | 'folder';\n fileType?: 'doc' | 'pdf' | 'image' | 'other';\n icon?: string;\n onClick?: () => void;\n};\n\nexport interface SnackbarProps {\n /** Whether the snackbar is open */\n open: boolean;\n /** Function to close the snackbar */\n onClose: () => void;\n /** Title text displayed prominently */\n title?: string;\n /** Description text displayed below title */\n description?: string;\n /** Position of the snackbar on screen */\n position?: SnackbarPosition;\n /** Visual variant of the snackbar */\n variant?: SnackbarVariant;\n /** Auto-hide duration in milliseconds (0 = no auto-hide) */\n autoHideDuration?: number;\n /** Whether to show close button */\n showCloseButton?: boolean;\n /** Optional action button */\n action?: SnackbarAction;\n /** Custom className for additional styling */\n className?: string;\n /** Custom styles */\n style?: React.CSSProperties;\n /** Whether to show progress indicator */\n showProgress?: boolean;\n /** Progress value (0-100) */\n progress?: number;\n /** Icon props object (name, fill, stroke, rotation, size, etc.) */\n iconProps?: Omit<IconProps, 'className'>;\n /** List of items to display in expandable section */\n items?: SnackbarItem[];\n /** Whether items list is expanded by default */\n defaultExpanded?: boolean;\n /** Compact mode - renders a simple inline notification with just icon and title */\n compact?: boolean;\n /** Automation ID for testing */\n automationId?: string;\n}\n\nexport const Snackbar: React.FC<SnackbarProps> = ({\n open,\n onClose,\n title,\n description,\n position = 'bottom-right',\n variant = 'default',\n autoHideDuration = 6000,\n showCloseButton = true,\n action,\n className = '',\n style,\n showProgress = false,\n progress = 0,\n iconProps,\n items,\n defaultExpanded = false,\n compact = false,\n automationId = ''\n}) => {\n const [isVisible, setIsVisible] = useState(false);\n const [isExiting, setIsExiting] = useState(false);\n const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n useEffect(() => {\n if (open) {\n setIsVisible(true);\n setIsExiting(false);\n\n // Auto-hide functionality\n if (autoHideDuration > 0) {\n const timer = setTimeout(() => {\n handleClose();\n }, autoHideDuration);\n\n return () => clearTimeout(timer);\n }\n }\n }, [open, autoHideDuration]);\n\n const handleClose = () => {\n setIsExiting(true);\n setTimeout(() => {\n setIsVisible(false);\n setIsExiting(false);\n onClose();\n }, 300); // Animation duration\n };\n\n const handleToggleExpanded = () => {\n setIsExpanded(!isExpanded);\n };\n\n const getFileIcon = (item: SnackbarItem) => {\n if (item.icon) return item.icon;\n\n if (item.type === 'folder') return 'folder-empty';\n if (item.type === 'file') return 'file-empty';\n\n return 'file-empty';\n\n // switch (item.fileType) {\n // case 'doc':\n // return 'docFile';\n // case 'pdf':\n // return 'pdf-file';\n // case 'image':\n // return 'file-empty';\n // default:\n // return 'file-empty';\n // }\n };\n\n if (!isVisible) return null;\n\n const getPositionClasses = () => {\n const positionMap = {\n 'top-right': 'top-4 right-4',\n 'top-left': 'top-4 left-4',\n 'bottom-right': 'bottom-4 right-4',\n 'bottom-left': 'bottom-4 left-4',\n 'top-center': 'top-4 snackbar-center',\n 'bottom-center': 'bottom-4 snackbar-center'\n };\n return positionMap[position];\n };\n\n const getVariantClasses = () => {\n const variantMap = {\n default: 'snackbar-default',\n success: 'snackbar-success',\n warning: 'snackbar-warning',\n error: 'snackbar-error',\n info: 'snackbar-info'\n };\n return variantMap[variant];\n };\n\n const getContainerStyle = (): React.CSSProperties => {\n const baseStyle = style || {};\n\n if (position === 'top-center' || position === 'bottom-center') {\n return {\n ...baseStyle,\n left: '50%',\n // Initial transform for center - animation will override but preserve translateX(-50%)\n transform: 'translateX(-50%)'\n };\n }\n\n return baseStyle;\n };\n\n return (\n <div className=\"snackbar-backdrop fixed inset-0 z-[1000] pointer-events-none\">\n <div\n className={`\n snackbar-container\n ${getPositionClasses()}\n ${getVariantClasses()}\n ${isExiting ? 'snackbar-exit' : 'snackbar-enter'}\n ${compact ? 'snackbar-compact' : ''}\n ${className}\n `}\n style={getContainerStyle()}\n role=\"alert\"\n aria-live=\"polite\"\n data-automation-id={automationId}\n >\n {compact ? (\n // Compact mode - simple inline notification\n <div className=\"snackbar-compact-content\">\n {iconProps?.name && <Icon {...iconProps} size={iconProps.size ?? 16} className=\"snackbar-compact-icon\" />}\n {title && <span className=\"snackbar-compact-title\">{title}</span>}\n </div>\n ) : (\n // Full mode - standard snackbar with all features\n <div className=\"snackbar-content\">\n {/* Header with icon, title, expand/collapse, and close button */}\n <div className=\"snackbar-header\">\n <div className=\"snackbar-title-section\">\n {iconProps?.name && <Icon {...iconProps} size={iconProps.size ?? 20} className=\"snackbar-icon\" />}\n {title && <h4 className=\"snackbar-title\">{title}</h4>}\n </div>\n <div className=\"snackbar-header-actions\">\n {items && items.length > 0 && (\n <Icon\n name=\"chevron\"\n size={16}\n stroke=\"var(--color-gray-100)\"\n rotation={isExpanded ? '0' : '180'}\n className=\"snackbar-expand-icon\"\n onClick={handleToggleExpanded}\n />\n )}\n {showCloseButton && !showProgress && (\n <Icon\n name=\"close\"\n size={16}\n fill=\"var(--color-gray-600)\"\n className=\"snackbar-close-icon\"\n onClick={handleClose}\n />\n )}\n </div>\n </div>\n\n {/* Description */}\n {description && <div className=\"snackbar-description\">{description}</div>}\n\n {/* Progress bar */}\n {showProgress && (\n <div className=\"snackbar-progress-container\">\n {progress === -1 ? (\n <div className=\"snackbar-indeterminate-progress\">\n <div className=\"snackbar-progress-gradient\"></div>\n </div>\n ) : (\n <ProgressBar\n totalTasks={100}\n completedTasks={progress}\n needPercentageCompleted={false}\n progressBarColor=\"var(--color-green-500)\"\n />\n )}\n </div>\n )}\n\n {/* Expandable Items List */}\n {items && items.length > 0 && (\n <div\n className={`snackbar-items-container ${\n isExpanded ? 'snackbar-items-expanded' : 'snackbar-items-collapsed'\n }`}\n >\n <div className=\"snackbar-items-list\">\n {items.map((item) => (\n <div key={item.id} className=\"snackbar-item\" onClick={item.onClick}>\n <div className=\"snackbar-item-content\">\n <Icon name={getFileIcon(item)} size={16} className=\"snackbar-item-icon\" />\n <span className=\"snackbar-item-name\">{item.name}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n )}\n\n {/* Action button */}\n {action && (\n <div className=\"snackbar-actions\">\n <button\n className={`snackbar-action-button snackbar-action-${action.variant || 'primary'}`}\n onClick={action.onClick}\n >\n {action.label}\n </button>\n </div>\n )}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["Snackbar","open","onClose","title","description","position","variant","autoHideDuration","showCloseButton","action","className","style","showProgress","progress","iconProps","items","defaultExpanded","compact","automationId","isVisible","setIsVisible","useState","isExiting","setIsExiting","isExpanded","setIsExpanded","useEffect","timer","setTimeout","handleClose","clearTimeout","handleToggleExpanded","getFileIcon","item","icon","type","getPositionClasses","getVariantClasses","default","success","warning","error","info","getContainerStyle","baseStyle","left","transform","React","createElement","role","name","Icon","_extends","size","length","stroke","rotation","onClick","fill","ProgressBar","totalTasks","completedTasks","needPercentageCompleted","progressBarColor","map","key","id","label"],"mappings":"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"}
|
package/dist/index56.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index56.js","sources":["../src/components/OTPInput/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, KeyboardEvent, ChangeEvent, ClipboardEvent, FC } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport './style.scss';\n\nexport interface OTPInputProps {\n length?: number;\n onChange?: (value: string) => void;\n onComplete?: (value: string) => void;\n label?: string;\n disabled?: boolean;\n className?: string;\n autoFocus?: boolean;\n error?: boolean;\n errorMessage?: string;\n validateOnBlur?: boolean;\n onValidate?: (value: string) => boolean | string;\n id?: string;\n}\n\nexport const OTPInput: FC<OTPInputProps> = ({\n length = 6,\n onChange,\n onComplete,\n label,\n disabled = false,\n className = '',\n autoFocus = true,\n error = false,\n errorMessage,\n validateOnBlur = false,\n onValidate,\n id\n}) => {\n const [values, setValues] = useState<string[]>(Array(length).fill(''));\n const [internalError, setInternalError] = useState<string | null>(null);\n const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n const isBackspacePressed = useRef<boolean>(false);\n \n // Generate stable IDs for ARIA attributes\n const baseId = useStableId(id, 'se-otp-input');\n const labelId = `${baseId}-label`;\n const errorId = `${baseId}-error`;\n\n // Helper: Check if a string is a single digit\n const isDigit = (char: string): boolean => /^\\d$/.test(char);\n\n // Helper: Check if OTP is complete\n const isComplete = (otpValue: string): boolean => {\n return otpValue.length === length && values.every((val) => val !== '');\n };\n\n // Helper: Update value at specific index\n const updateValue = (index: number, value: string, shouldFocusNext = false) => {\n const newValues = [...values];\n newValues[index] = value;\n setValues(newValues);\n\n if (shouldFocusNext && value && index < length - 1) {\n focusInput(index + 1);\n }\n };\n\n // Helper: Clear value at specific index\n const clearValue = (index: number) => {\n updateValue(index, '');\n };\n\n // Helper: Focus input at index\n const focusInput = (index: number) => {\n inputRefs.current[index]?.focus();\n };\n\n useEffect(() => {\n if (autoFocus && inputRefs.current[0] && !disabled) {\n focusInput(0);\n }\n }, [autoFocus, disabled]);\n\n // Internal validation\n const validateOTP = (otpValue: string): string | null => {\n // Empty validation\n if (otpValue.length === 0) {\n return errorMessage || 'Please enter the verification code';\n }\n\n // Incomplete validation\n if (otpValue.length < length || !isComplete(otpValue)) {\n return errorMessage || 'Please enter all digits';\n }\n\n // Custom validation\n if (onValidate) {\n const validationResult = onValidate(otpValue);\n if (validationResult === false) {\n return errorMessage || 'Invalid verification code';\n }\n if (typeof validationResult === 'string') {\n return validationResult;\n }\n }\n\n return null;\n };\n\n useEffect(() => {\n const otpValue = values.join('');\n onChange?.(otpValue);\n\n // Clear error when user starts typing\n if (internalError && otpValue.length > 0) {\n setInternalError(null);\n }\n\n if (isComplete(otpValue)) {\n // Validate on complete\n if (onValidate) {\n const validationResult = onValidate(otpValue);\n if (validationResult === false || typeof validationResult === 'string') {\n const errorMsg =\n typeof validationResult === 'string' ? validationResult : errorMessage || 'Invalid verification code';\n setInternalError(errorMsg);\n } else {\n setInternalError(null);\n }\n }\n onComplete?.(otpValue);\n }\n }, [values, length, onChange, onComplete, onValidate, errorMessage]);\n\n const handleChange = (index: number, value: string) => {\n // Only allow single digit or empty\n if (value && !isDigit(value)) {\n return;\n }\n\n updateValue(index, value, true);\n };\n\n const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n const currentValue = values[index];\n\n // Handle backspace\n if (e.key === 'Backspace') {\n isBackspacePressed.current = true;\n if (currentValue) {\n clearValue(index);\n } else if (index > 0) {\n clearValue(index - 1);\n focusInput(index - 1);\n }\n // Reset backspace flag after a short delay\n setTimeout(() => {\n isBackspacePressed.current = false;\n }, 100);\n e.preventDefault();\n return;\n }\n\n // Handle delete\n if (e.key === 'Delete') {\n isBackspacePressed.current = true;\n clearValue(index);\n // Reset backspace flag after a short delay\n setTimeout(() => {\n isBackspacePressed.current = false;\n }, 100);\n e.preventDefault();\n return;\n }\n\n // Handle navigation keys\n const navigationHandlers: Record<string, () => void> = {\n ArrowLeft: () => index > 0 && focusInput(index - 1),\n ArrowRight: () => index < length - 1 && focusInput(index + 1),\n Home: () => focusInput(0),\n End: () => focusInput(length - 1)\n };\n\n if (navigationHandlers[e.key]) {\n navigationHandlers[e.key]();\n e.preventDefault();\n return;\n }\n\n // Allow digits, but prevent if already filled\n if (isDigit(e.key)) {\n if (currentValue) {\n updateValue(index, e.key, true);\n }\n }\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n e.preventDefault();\n const pastedData = e.clipboardData.getData('text/plain').trim();\n\n // Extract only digits\n const digits = pastedData.replace(/\\D/g, '').slice(0, length);\n\n if (digits.length > 0) {\n const newValues = [...values];\n\n // Fill inputs starting from the current index\n const startIndex = inputRefs.current.findIndex((ref) => ref === document.activeElement);\n const actualStartIndex = startIndex >= 0 ? startIndex : 0;\n\n for (let i = 0; i < digits.length && actualStartIndex + i < length; i++) {\n newValues[actualStartIndex + i] = digits[i];\n }\n\n setValues(newValues);\n\n // Focus the next empty input or the last input\n const nextEmptyIndex = newValues.findIndex((val, idx) => idx >= actualStartIndex && val === '');\n const focusIndex = nextEmptyIndex >= 0 ? nextEmptyIndex : Math.min(actualStartIndex + digits.length, length - 1);\n focusInput(focusIndex);\n }\n };\n\n const handleFocus = (index: number) => {\n inputRefs.current[index]?.select();\n };\n\n const handleBlur = () => {\n // Don't validate on blur if backspace/delete was just pressed\n if (validateOnBlur && !isBackspacePressed.current) {\n const otpValue = values.join('');\n const validationError = validateOTP(otpValue);\n setInternalError(validationError);\n }\n };\n\n const hasError = error || !!internalError;\n // Priority: errorMessage prop > internalError\n const displayError = hasError && (errorMessage || internalError);\n \n const ariaDescribedByError = displayError ? errorId : undefined;\n\n return (\n <div className={`se-design-otp-input ${className || ''}`} data-automation-id=\"otp-input-container\">\n {label && <div id={labelId} className=\"se-design-otp-input-label\">{label}</div>}\n <div className=\"flex items-center gap-[12px]\" role=\"group\" aria-labelledby={label ? labelId : undefined}>\n {values.map((value, index) => (\n <input\n key={index}\n ref={(el) => {\n inputRefs.current[index] = el;\n }}\n type=\"text\"\n inputMode=\"numeric\"\n maxLength={1}\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => handleChange(index, e.target.value)}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => handleKeyDown(index, e)}\n onPaste={handlePaste}\n onFocus={() => handleFocus(index)}\n onBlur={handleBlur}\n disabled={disabled}\n className={`\n w-12 h-12 \n flex flex-col items-start \n text-center text-lg font-medium\n border rounded-md\n outline-none\n transition-colors\n disabled:bg-gray-50 disabled:cursor-not-allowed\n ${\n disabled\n ? 'border-[var(--color-gray-300)] text-gray-400'\n : hasError\n ? 'border-[var(--color-red-500)] text-gray-900 focus:border-[var(--color-red-500)] focus:ring-1 focus:ring-[var(--color-red-500)]'\n : 'border-[var(--color-gray-600)] text-gray-900 focus:border-[var(--color-blue-500)] focus:ring-1 focus:ring-[var(--color-blue-500)]'\n }\n `}\n style={{\n gap: 'var(--Spacer-6px, 6px)'\n }}\n aria-label={`OTP digit ${index + 1} of ${length}`}\n aria-invalid={hasError}\n aria-describedby={ariaDescribedByError}\n data-automation-id={`otp-input-${index}`}\n />\n ))}\n </div>\n {displayError && <div id={errorId} className=\"se-design-otp-input-error\" role=\"alert\">{displayError}</div>}\n </div>\n );\n};\n"],"names":["OTPInput","length","onChange","onComplete","label","disabled","className","autoFocus","error","errorMessage","validateOnBlur","onValidate","id","values","setValues","useState","Array","fill","internalError","setInternalError","inputRefs","useRef","isBackspacePressed","baseId","useStableId","labelId","errorId","isDigit","char","test","isComplete","otpValue","every","val","updateValue","index","value","shouldFocusNext","newValues","focusInput","clearValue","current","focus","useEffect","validateOTP","validationResult","join","handleChange","handleKeyDown","e","currentValue","key","setTimeout","preventDefault","navigationHandlers","ArrowLeft","ArrowRight","Home","End","handlePaste","digits","clipboardData","getData","trim","replace","slice","startIndex","findIndex","ref","document","activeElement","actualStartIndex","i","nextEmptyIndex","idx","focusIndex","Math","min","handleFocus","select","handleBlur","validationError","hasError","displayError","ariaDescribedByError","undefined","React","createElement","role","map","el","type","inputMode","maxLength","target","onKeyDown","onPaste","onFocus","onBlur","style","gap"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index56.js","sources":["../src/components/OTPInput/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, KeyboardEvent, ChangeEvent, ClipboardEvent, FC } from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport './style.scss';\n\nexport interface OTPInputProps {\n length?: number;\n onChange?: (value: string) => void;\n onComplete?: (value: string) => void;\n label?: string;\n disabled?: boolean;\n className?: string;\n autoFocus?: boolean;\n error?: boolean;\n errorMessage?: string;\n validateOnBlur?: boolean;\n onValidate?: (value: string) => boolean | string;\n id?: string;\n}\n\nexport const OTPInput: FC<OTPInputProps> = ({\n length = 6,\n onChange,\n onComplete,\n label,\n disabled = false,\n className = '',\n autoFocus = true,\n error = false,\n errorMessage,\n validateOnBlur = false,\n onValidate,\n id\n}) => {\n const [values, setValues] = useState<string[]>(Array(length).fill(''));\n const [internalError, setInternalError] = useState<string | null>(null);\n const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n const isBackspacePressed = useRef<boolean>(false);\n \n // Generate stable IDs for ARIA attributes\n const baseId = useStableId(id, 'se-otp-input');\n const labelId = `${baseId}-label`;\n const errorId = `${baseId}-error`;\n\n // Helper: Check if a string is a single digit\n const isDigit = (char: string): boolean => /^\\d$/.test(char);\n\n // Helper: Check if OTP is complete\n const isComplete = (otpValue: string): boolean => {\n return otpValue.length === length && values.every((val) => val !== '');\n };\n\n // Helper: Update value at specific index\n const updateValue = (index: number, value: string, shouldFocusNext = false) => {\n const newValues = [...values];\n newValues[index] = value;\n setValues(newValues);\n\n if (shouldFocusNext && value && index < length - 1) {\n focusInput(index + 1);\n }\n };\n\n // Helper: Clear value at specific index\n const clearValue = (index: number) => {\n updateValue(index, '');\n };\n\n // Helper: Focus input at index\n const focusInput = (index: number) => {\n inputRefs.current[index]?.focus();\n };\n\n useEffect(() => {\n if (autoFocus && inputRefs.current[0] && !disabled) {\n focusInput(0);\n }\n }, [autoFocus, disabled]);\n\n // Internal validation\n const validateOTP = (otpValue: string): string | null => {\n // Empty validation\n if (otpValue.length === 0) {\n return errorMessage || 'Please enter the verification code';\n }\n\n // Incomplete validation\n if (otpValue.length < length || !isComplete(otpValue)) {\n return errorMessage || 'Please enter all digits';\n }\n\n // Custom validation\n if (onValidate) {\n const validationResult = onValidate(otpValue);\n if (validationResult === false) {\n return errorMessage || 'Invalid verification code';\n }\n if (typeof validationResult === 'string') {\n return validationResult;\n }\n }\n\n return null;\n };\n\n useEffect(() => {\n const otpValue = values.join('');\n onChange?.(otpValue);\n\n // Clear error when user starts typing\n if (internalError && otpValue.length > 0) {\n setInternalError(null);\n }\n\n if (isComplete(otpValue)) {\n // Validate on complete\n if (onValidate) {\n const validationResult = onValidate(otpValue);\n if (validationResult === false || typeof validationResult === 'string') {\n const errorMsg =\n typeof validationResult === 'string' ? validationResult : errorMessage || 'Invalid verification code';\n setInternalError(errorMsg);\n } else {\n setInternalError(null);\n }\n }\n onComplete?.(otpValue);\n }\n }, [values, length, onChange, onComplete, onValidate, errorMessage]);\n\n const handleChange = (index: number, value: string) => {\n // Only allow single digit or empty\n if (value && !isDigit(value)) {\n return;\n }\n\n updateValue(index, value, true);\n };\n\n const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n const currentValue = values[index];\n\n // Handle backspace\n if (e.key === 'Backspace') {\n isBackspacePressed.current = true;\n if (currentValue) {\n clearValue(index);\n } else if (index > 0) {\n clearValue(index - 1);\n focusInput(index - 1);\n }\n // Reset backspace flag after a short delay\n setTimeout(() => {\n isBackspacePressed.current = false;\n }, 100);\n e.preventDefault();\n return;\n }\n\n // Handle delete\n if (e.key === 'Delete') {\n isBackspacePressed.current = true;\n clearValue(index);\n // Reset backspace flag after a short delay\n setTimeout(() => {\n isBackspacePressed.current = false;\n }, 100);\n e.preventDefault();\n return;\n }\n\n // Handle navigation keys\n const navigationHandlers: Record<string, () => void> = {\n ArrowLeft: () => index > 0 && focusInput(index - 1),\n ArrowRight: () => index < length - 1 && focusInput(index + 1),\n Home: () => focusInput(0),\n End: () => focusInput(length - 1)\n };\n\n if (navigationHandlers[e.key]) {\n navigationHandlers[e.key]();\n e.preventDefault();\n return;\n }\n\n // Allow digits, but prevent if already filled\n if (isDigit(e.key)) {\n if (currentValue) {\n updateValue(index, e.key, true);\n }\n }\n };\n\n const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n\n e.preventDefault();\n const pastedData = e.clipboardData.getData('text/plain').trim();\n\n // Extract only digits\n const digits = pastedData.replace(/\\D/g, '').slice(0, length);\n\n if (digits.length > 0) {\n const newValues = [...values];\n\n // Fill inputs starting from the current index\n const startIndex = inputRefs.current.findIndex((ref) => ref === document.activeElement);\n const actualStartIndex = startIndex >= 0 ? startIndex : 0;\n\n for (let i = 0; i < digits.length && actualStartIndex + i < length; i++) {\n newValues[actualStartIndex + i] = digits[i];\n }\n\n setValues(newValues);\n\n // Focus the next empty input or the last input\n const nextEmptyIndex = newValues.findIndex((val, idx) => idx >= actualStartIndex && val === '');\n const focusIndex = nextEmptyIndex >= 0 ? nextEmptyIndex : Math.min(actualStartIndex + digits.length, length - 1);\n focusInput(focusIndex);\n }\n };\n\n const handleFocus = (index: number) => {\n inputRefs.current[index]?.select();\n };\n\n const handleBlur = () => {\n // Don't validate on blur if backspace/delete was just pressed\n if (validateOnBlur && !isBackspacePressed.current) {\n const otpValue = values.join('');\n const validationError = validateOTP(otpValue);\n setInternalError(validationError);\n }\n };\n\n const hasError = error || !!internalError;\n // Priority: errorMessage prop > internalError\n const displayError = hasError && (errorMessage || internalError);\n \n const ariaDescribedByError = displayError ? errorId : undefined;\n\n return (\n <div className={`se-design-otp-input ${className || ''}`} data-automation-id=\"otp-input-container\">\n {label && <div id={labelId} className=\"se-design-otp-input-label\">{label}</div>}\n <div className=\"flex items-center gap-[12px]\" role=\"group\" aria-labelledby={label ? labelId : undefined}>\n {values.map((value, index) => (\n <input\n key={index}\n ref={(el) => {\n inputRefs.current[index] = el;\n }}\n type=\"text\"\n inputMode=\"numeric\"\n maxLength={1}\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => handleChange(index, e.target.value)}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => handleKeyDown(index, e)}\n onPaste={handlePaste}\n onFocus={() => handleFocus(index)}\n onBlur={handleBlur}\n disabled={disabled}\n className={`\n w-12 h-12 \n flex flex-col items-start \n text-center text-lg font-medium\n border rounded-md\n outline-none\n transition-colors\n disabled:bg-gray-50 disabled:cursor-not-allowed\n ${\n disabled\n ? 'border-[var(--color-gray-300)] text-gray-400'\n : hasError\n ? 'border-[var(--color-red-500)] text-gray-900 focus:border-[var(--color-red-500)] focus:ring-1 focus:ring-[var(--color-red-500)]'\n : 'border-[var(--color-gray-600)] text-gray-900 focus:border-[var(--color-blue-500)] focus:ring-1 focus:ring-[var(--color-blue-500)]'\n }\n `}\n style={{\n gap: 'var(--Spacer-6px, 6px)'\n }}\n aria-label={`OTP digit ${index + 1} of ${length}`}\n aria-invalid={hasError}\n aria-describedby={ariaDescribedByError}\n data-automation-id={`otp-input-${index}`}\n />\n ))}\n </div>\n {displayError && <div id={errorId} className=\"se-design-otp-input-error\" role=\"alert\">{displayError}</div>}\n </div>\n );\n};\n"],"names":["OTPInput","length","onChange","onComplete","label","disabled","className","autoFocus","error","errorMessage","validateOnBlur","onValidate","id","values","setValues","useState","Array","fill","internalError","setInternalError","inputRefs","useRef","isBackspacePressed","baseId","useStableId","labelId","errorId","isDigit","char","test","isComplete","otpValue","every","val","updateValue","index","value","shouldFocusNext","newValues","focusInput","clearValue","current","focus","useEffect","validateOTP","validationResult","join","handleChange","handleKeyDown","e","currentValue","key","setTimeout","preventDefault","navigationHandlers","ArrowLeft","ArrowRight","Home","End","handlePaste","digits","clipboardData","getData","trim","replace","slice","startIndex","findIndex","ref","document","activeElement","actualStartIndex","i","nextEmptyIndex","idx","focusIndex","Math","min","handleFocus","select","handleBlur","validationError","hasError","displayError","ariaDescribedByError","undefined","React","createElement","role","map","el","type","inputMode","maxLength","target","onKeyDown","onPaste","onFocus","onBlur","style","gap"],"mappings":"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"}
|
package/dist/index57.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index57.js","sources":["../src/components/InfoBar/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport interface InfoBarProps {\n className?: string;\n message: string;\n backgroundColor?: string;\n textColor?: string;\n borderColor?: string;\n actionJSX?: () => React.ReactNode;\n}\n\nexport const InfoBar: FC<InfoBarProps> = ({\n className = \"\",\n message = \"\",\n backgroundColor = 'var(--color-yellow-50)',\n textColor = 'var(--color-yellow-800)',\n borderColor = 'var(--color-yellow-200)',\n actionJSX = () => <></>\n}) => {\n\n return (\n <div\n className={`se-design-info-bar ${className} px-3 py-2 border rounded-[6px]`}\n style={{ backgroundColor, borderColor, color: textColor }}\n >\n <div className={`info-bar-message flex items-center gap-2`}>\n <div style={{ transform: 'rotate(180deg)' }}><Icon name=\"info\" stroke={textColor} /></div>\n <span style={{ color: textColor }}>{message}</span>\n </div>\n <div className={`info-bar-action ml-[22px]`}>\n {actionJSX()}\n </div>\n </div>\n );\n};"],"names":["InfoBar","className","message","backgroundColor","textColor","borderColor","actionJSX","React","createElement","Fragment","style","color","transform","Icon","name","stroke"],"mappings":";;AAYO,MAAMA,IAA4BA,CAAC;AAAA,EACxCC,WAAAA,IAAY;AAAA,EACZC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,WAAAA,IAAYA,MAAMC,gBAAAA,EAAAC,cAAAD,EAAAE,
|
|
1
|
+
{"version":3,"file":"index57.js","sources":["../src/components/InfoBar/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Icon } from \"../Icon\";\n\nexport interface InfoBarProps {\n className?: string;\n message: string;\n backgroundColor?: string;\n textColor?: string;\n borderColor?: string;\n actionJSX?: () => React.ReactNode;\n}\n\nexport const InfoBar: FC<InfoBarProps> = ({\n className = \"\",\n message = \"\",\n backgroundColor = 'var(--color-yellow-50)',\n textColor = 'var(--color-yellow-800)',\n borderColor = 'var(--color-yellow-200)',\n actionJSX = () => <></>\n}) => {\n\n return (\n <div\n className={`se-design-info-bar ${className} px-3 py-2 border rounded-[6px]`}\n style={{ backgroundColor, borderColor, color: textColor }}\n >\n <div className={`info-bar-message flex items-center gap-2`}>\n <div style={{ transform: 'rotate(180deg)' }}><Icon name=\"info\" stroke={textColor} /></div>\n <span style={{ color: textColor }}>{message}</span>\n </div>\n <div className={`info-bar-action ml-[22px]`}>\n {actionJSX()}\n </div>\n </div>\n );\n};"],"names":["InfoBar","className","message","backgroundColor","textColor","borderColor","actionJSX","React","createElement","Fragment","style","color","transform","Icon","name","stroke"],"mappings":";;AAYO,MAAMA,IAA4BA,CAAC;AAAA,EACxCC,WAAAA,IAAY;AAAA,EACZC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,WAAAA,IAAYA,MAAMC,gBAAAA,EAAAC,cAAAD,EAAAE,UAAI,IAAA;AACxB,MAGIF,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EACEP,WAAW,sBAAsBA,CAAS;AAAA,EAC1CS,OAAO;AAAA,IAAEP,iBAAAA;AAAAA,IAAiBE,aAAAA;AAAAA,IAAaM,OAAOP;AAAAA,EAAU;AAAA,GAExDI,gBAAAA,EAAAA,cAAA,OAAA;AAAA,EAAKP,WAAW;AAAA,GACdO,gBAAAA,EAAAA,cAAA,OAAA;AAAA,EAAKE,OAAO;AAAA,IAAEE,WAAW;AAAA,EAAiB;AAAA,GAAGJ,gBAAAA,EAAAA,cAACK,GAAI;AAAA,EAACC,MAAK;AAAA,EAAOC,QAAQX;AAAY,CAAA,CAAM,GACzFG,gBAAAA,EAAAC,cAAA,QAAA;AAAA,EAAME,OAAO;AAAA,IAAEC,OAAOP;AAAAA,EAAU;GAAIF,CAAc,CAC/C,GACLK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,EAAKP,WAAW;AAAA,GACbK,EACE,CAAA,CACF;"}
|
package/dist/index58.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index58.js","sources":["../src/components/BottomSheet/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\nimport { CustomModal } from '../CustomModal';\nimport { Icon } from '../Icon';\n\nimport './style.scss';\n\nexport interface BottomSheetProps {\n isOpen: boolean;\n title?: string;\n onClose: () => void;\n showCloseIcon?: boolean;\n showBackButton?: boolean;\n onBack?: () => void;\n children: React.ReactNode;\n className?: string;\n automationId?: string;\n minHeight?: string;\n}\n\ninterface BottomSheetContentProps {\n title?: string;\n onClose: () => void;\n showCloseIcon?: boolean;\n showBackButton?: boolean;\n onBack?: () => void;\n children: React.ReactNode;\n className?: string;\n automationId?: string;\n minHeight?: string;\n}\n\nconst BottomSheetContent: FC<BottomSheetContentProps> = ({\n children = null,\n title = '',\n onClose = () => {},\n showCloseIcon = false,\n showBackButton = false,\n onBack = () => {},\n className = '',\n automationId = '',\n minHeight = 'auto'\n}) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [startY, setStartY] = useState<number>(0);\n const [currentY, setCurrentY] = useState<number>(0);\n const [isDragging, setIsDragging] = useState<boolean>(false);\n\n const handleTouchStart = (e: React.TouchEvent) => {\n setStartY(e.touches[0].clientY);\n setCurrentY(e.touches[0].clientY);\n setIsDragging(true);\n };\n\n const handleTouchMove = (e: React.TouchEvent) => {\n if (!isDragging) return;\n\n const touchY = e.touches[0].clientY;\n const deltaY = touchY - startY;\n\n // Only allow dragging down\n if (deltaY > 0) {\n setCurrentY(touchY);\n if (contentRef.current) {\n contentRef.current.style.transform = `translateY(${deltaY}px)`;\n }\n }\n };\n\n const handleTouchEnd = () => {\n if (!isDragging) return;\n\n const deltaY = currentY - startY;\n const threshold = 60; // pixels to swipe down to trigger close\n\n if (deltaY > threshold) {\n // Trigger close\n onClose();\n } else {\n // Reset position\n if (contentRef.current) {\n contentRef.current.style.transform = 'translateY(0)';\n }\n }\n\n setIsDragging(false);\n setStartY(0);\n setCurrentY(0);\n };\n\n return (\n <div\n ref={contentRef}\n className={`se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${className}`}\n onClick={(e) => e.stopPropagation()}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n data-automation-id={automationId}\n style={{ minHeight }}\n >\n {(title || showBackButton) && (\n <div className=\"se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4\">\n {showBackButton && (\n <Icon\n name=\"back\"\n stroke=\"var(--color-gray-700)\"\n onClick={onBack}\n className=\"se-design-bottom-sheet-back-icon cursor-pointer\"\n automationId={`${automationId}-back-icon`}\n />\n )}\n {title && <div className=\"se-design-bottom-sheet-title text-lg font-semibold\">{title}</div>}\n </div>\n )}\n {showCloseIcon && (\n <Icon\n name=\"close\"\n onClick={onClose}\n className=\"se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10\"\n automationId={`${automationId}-close-icon`}\n />\n )}\n <div className=\"se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto\">{children}</div>\n </div>\n );\n};\n\nexport const BottomSheet: FC<BottomSheetProps> = ({\n isOpen = false,\n title = '',\n onClose = () => {},\n children = null,\n showCloseIcon = true,\n showBackButton = false,\n onBack = () => {},\n className = '',\n automationId = 'bottomsheet',\n minHeight = ''\n}) => {\n return (\n <CustomModal\n isOpen={isOpen}\n onClose={onClose}\n onModalClick={onClose}\n className=\"custom-bottom-sheet\"\n renderModalContent={() => (\n <BottomSheetContent\n title={title}\n onClose={onClose}\n showCloseIcon={showCloseIcon}\n showBackButton={showBackButton}\n onBack={onBack}\n className={className}\n automationId={automationId}\n minHeight={minHeight}\n >\n {children}\n </BottomSheetContent>\n )}\n />\n );\n};\n"],"names":["BottomSheetContent","children","title","onClose","showCloseIcon","showBackButton","onBack","className","automationId","minHeight","contentRef","useRef","startY","setStartY","useState","currentY","setCurrentY","isDragging","setIsDragging","handleTouchStart","e","touches","clientY","handleTouchMove","touchY","deltaY","current","style","transform","handleTouchEnd","React","createElement","ref","onClick","stopPropagation","onTouchStart","onTouchMove","onTouchEnd","Icon","name","stroke","BottomSheet","isOpen","CustomModal","onModalClick","renderModalContent"],"mappings":";;;;AA+BA,MAAMA,IAAkDA,CAAC;AAAA,EACvDC,UAAAA,IAAW;AAAA,EACXC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,eAAAA,IAAgB;AAAA,EAChBC,gBAAAA,IAAiB;AAAA,EACjBC,QAAAA,IAASA,MAAM;AAAA,EAAC;AAAA,EAChBC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AACd,MAAM;
|
|
1
|
+
{"version":3,"file":"index58.js","sources":["../src/components/BottomSheet/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\nimport { CustomModal } from '../CustomModal';\nimport { Icon } from '../Icon';\n\nimport './style.scss';\n\nexport interface BottomSheetProps {\n isOpen: boolean;\n title?: string;\n onClose: () => void;\n showCloseIcon?: boolean;\n showBackButton?: boolean;\n onBack?: () => void;\n children: React.ReactNode;\n className?: string;\n automationId?: string;\n minHeight?: string;\n}\n\ninterface BottomSheetContentProps {\n title?: string;\n onClose: () => void;\n showCloseIcon?: boolean;\n showBackButton?: boolean;\n onBack?: () => void;\n children: React.ReactNode;\n className?: string;\n automationId?: string;\n minHeight?: string;\n}\n\nconst BottomSheetContent: FC<BottomSheetContentProps> = ({\n children = null,\n title = '',\n onClose = () => {},\n showCloseIcon = false,\n showBackButton = false,\n onBack = () => {},\n className = '',\n automationId = '',\n minHeight = 'auto'\n}) => {\n const contentRef = useRef<HTMLDivElement>(null);\n const [startY, setStartY] = useState<number>(0);\n const [currentY, setCurrentY] = useState<number>(0);\n const [isDragging, setIsDragging] = useState<boolean>(false);\n\n const handleTouchStart = (e: React.TouchEvent) => {\n setStartY(e.touches[0].clientY);\n setCurrentY(e.touches[0].clientY);\n setIsDragging(true);\n };\n\n const handleTouchMove = (e: React.TouchEvent) => {\n if (!isDragging) return;\n\n const touchY = e.touches[0].clientY;\n const deltaY = touchY - startY;\n\n // Only allow dragging down\n if (deltaY > 0) {\n setCurrentY(touchY);\n if (contentRef.current) {\n contentRef.current.style.transform = `translateY(${deltaY}px)`;\n }\n }\n };\n\n const handleTouchEnd = () => {\n if (!isDragging) return;\n\n const deltaY = currentY - startY;\n const threshold = 60; // pixels to swipe down to trigger close\n\n if (deltaY > threshold) {\n // Trigger close\n onClose();\n } else {\n // Reset position\n if (contentRef.current) {\n contentRef.current.style.transform = 'translateY(0)';\n }\n }\n\n setIsDragging(false);\n setStartY(0);\n setCurrentY(0);\n };\n\n return (\n <div\n ref={contentRef}\n className={`se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${className}`}\n onClick={(e) => e.stopPropagation()}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n data-automation-id={automationId}\n style={{ minHeight }}\n >\n {(title || showBackButton) && (\n <div className=\"se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4\">\n {showBackButton && (\n <Icon\n name=\"back\"\n stroke=\"var(--color-gray-700)\"\n onClick={onBack}\n className=\"se-design-bottom-sheet-back-icon cursor-pointer\"\n automationId={`${automationId}-back-icon`}\n />\n )}\n {title && <div className=\"se-design-bottom-sheet-title text-lg font-semibold\">{title}</div>}\n </div>\n )}\n {showCloseIcon && (\n <Icon\n name=\"close\"\n onClick={onClose}\n className=\"se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10\"\n automationId={`${automationId}-close-icon`}\n />\n )}\n <div className=\"se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto\">{children}</div>\n </div>\n );\n};\n\nexport const BottomSheet: FC<BottomSheetProps> = ({\n isOpen = false,\n title = '',\n onClose = () => {},\n children = null,\n showCloseIcon = true,\n showBackButton = false,\n onBack = () => {},\n className = '',\n automationId = 'bottomsheet',\n minHeight = ''\n}) => {\n return (\n <CustomModal\n isOpen={isOpen}\n onClose={onClose}\n onModalClick={onClose}\n className=\"custom-bottom-sheet\"\n renderModalContent={() => (\n <BottomSheetContent\n title={title}\n onClose={onClose}\n showCloseIcon={showCloseIcon}\n showBackButton={showBackButton}\n onBack={onBack}\n className={className}\n automationId={automationId}\n minHeight={minHeight}\n >\n {children}\n </BottomSheetContent>\n )}\n />\n );\n};\n"],"names":["BottomSheetContent","children","title","onClose","showCloseIcon","showBackButton","onBack","className","automationId","minHeight","contentRef","useRef","startY","setStartY","useState","currentY","setCurrentY","isDragging","setIsDragging","handleTouchStart","e","touches","clientY","handleTouchMove","touchY","deltaY","current","style","transform","handleTouchEnd","React","createElement","ref","onClick","stopPropagation","onTouchStart","onTouchMove","onTouchEnd","Icon","name","stroke","BottomSheet","isOpen","CustomModal","onModalClick","renderModalContent"],"mappings":"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"}
|