@clickhouse/click-ui 0.2.0-rc.6 → 0.2.0-rc.8
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/README.md +67 -0
- package/dist/cjs/click-ui.css +3861 -0
- package/dist/cjs/components/Button/Button.css +261 -0
- package/dist/cjs/components/Button/Button.module.css.cjs +38 -0
- package/dist/cjs/components/Button/Button.module.css.cjs.map +1 -0
- package/dist/cjs/components/Button/index.cjs +42 -126
- package/dist/cjs/components/Button/index.cjs.map +1 -1
- package/dist/cjs/components/ButtonGroup/index.cjs +1 -1
- package/dist/cjs/components/ButtonGroup/index.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/Common.cjs +100 -73
- package/dist/cjs/components/DatePicker/Common.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/DateRangePicker.cjs +24 -24
- package/dist/cjs/components/DatePicker/DateRangePicker.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/DateTimeRangePicker.cjs +96 -50
- package/dist/cjs/components/DatePicker/DateTimeRangePicker.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/index.cjs +29 -18
- package/dist/cjs/components/DatePicker/index.cjs.map +1 -1
- package/dist/cjs/components/DatePicker/utils.cjs +42 -14
- package/dist/cjs/components/DatePicker/utils.cjs.map +1 -1
- package/dist/cjs/components/GenericMenu/index.cjs +1 -1
- package/dist/cjs/components/GenericMenu/index.cjs.map +1 -1
- package/dist/cjs/lib/cva.cjs +15 -0
- package/dist/cjs/lib/cva.cjs.map +1 -0
- package/dist/cjs/providers/ThemeProvider.cjs +4 -0
- package/dist/cjs/providers/ThemeProvider.cjs.map +1 -1
- package/dist/cjs/theme/styles/tokens-dark.css +1806 -0
- package/dist/cjs/theme/styles/tokens-light.css +1795 -0
- package/dist/cjs/theme/theme.config.json.cjs +12 -0
- package/dist/cjs/theme/theme.config.json.cjs.map +1 -0
- package/dist/cjs/theme/tokens/variables.dark.cjs +2 -4
- package/dist/cjs/theme/tokens/variables.dark.cjs.map +1 -1
- package/dist/cjs/theme/tokens/variables.light.cjs +1 -6
- package/dist/cjs/theme/tokens/variables.light.cjs.map +1 -1
- package/dist/cjs/utils/localStorage.cjs +3 -1
- package/dist/cjs/utils/localStorage.cjs.map +1 -1
- package/dist/esm/click-ui.css +3861 -0
- package/dist/esm/components/Button/Button.css +261 -0
- package/dist/esm/components/Button/Button.module.css.js +25 -0
- package/dist/esm/components/Button/Button.module.css.js.map +1 -0
- package/dist/esm/components/Button/index.js +42 -126
- package/dist/esm/components/Button/index.js.map +1 -1
- package/dist/esm/components/ButtonGroup/index.js +1 -1
- package/dist/esm/components/ButtonGroup/index.js.map +1 -1
- package/dist/esm/components/DatePicker/Common.js +101 -74
- package/dist/esm/components/DatePicker/Common.js.map +1 -1
- package/dist/esm/components/DatePicker/DateRangePicker.js +25 -25
- package/dist/esm/components/DatePicker/DateRangePicker.js.map +1 -1
- package/dist/esm/components/DatePicker/DateTimeRangePicker.js +97 -51
- package/dist/esm/components/DatePicker/DateTimeRangePicker.js.map +1 -1
- package/dist/esm/components/DatePicker/index.js +30 -19
- package/dist/esm/components/DatePicker/index.js.map +1 -1
- package/dist/esm/components/DatePicker/utils.js +36 -10
- package/dist/esm/components/DatePicker/utils.js.map +1 -1
- package/dist/esm/components/GenericMenu/index.js +1 -1
- package/dist/esm/components/GenericMenu/index.js.map +1 -1
- package/dist/esm/lib/cva.js +7 -0
- package/dist/esm/lib/cva.js.map +1 -0
- package/dist/esm/providers/ThemeProvider.js +4 -0
- package/dist/esm/providers/ThemeProvider.js.map +1 -1
- package/dist/esm/theme/styles/tokens-dark.css +1806 -0
- package/dist/esm/theme/styles/tokens-light.css +1795 -0
- package/dist/esm/theme/theme.config.json.js +7 -0
- package/dist/esm/theme/theme.config.json.js.map +1 -0
- package/dist/esm/theme/tokens/variables.dark.js +2 -4
- package/dist/esm/theme/tokens/variables.dark.js.map +1 -1
- package/dist/esm/theme/tokens/variables.light.js +1 -6
- package/dist/esm/theme/tokens/variables.light.js.map +1 -1
- package/dist/esm/utils/localStorage.js +3 -1
- package/dist/esm/utils/localStorage.js.map +1 -1
- package/dist/types/components/Button/Button.d.ts +25 -2
- package/dist/types/components/DatePicker/Common.d.ts +9 -4
- package/dist/types/components/DatePicker/DatePicker.d.ts +11 -2
- package/dist/types/components/DatePicker/DateRangePicker.d.ts +3 -2
- package/dist/types/components/DatePicker/DateTimeRangePicker.d.ts +7 -3
- package/dist/types/components/DatePicker/index.d.ts +3 -2
- package/dist/types/components/DatePicker/utils.d.ts +9 -8
- package/dist/types/index.d.ts +1 -1
- package/dist/types/lib/cva.d.ts +3 -0
- package/dist/types/theme/theme.config.json.d.ts +6 -0
- package/dist/types/theme/theme.core.d.ts +0 -7
- package/dist/types/theme/tokens/variables.dark.d.ts +0 -2
- package/dist/types/theme/tokens/variables.light.d.ts +0 -5
- package/dist/types/utils/dom.d.ts +1 -1
- package/dist/types/utils/localStorage.d.ts +1 -1
- package/package.json +26 -10
- package/dist/types/components/DatePicker/DatePicker.types.d.ts +0 -9
|
@@ -8,6 +8,7 @@ const calendar = require('@h6s/calendar');
|
|
|
8
8
|
const RadixPopover = require('@radix-ui/react-popover');
|
|
9
9
|
const styledComponents = require('styled-components');
|
|
10
10
|
const Common = require('./Common.cjs');
|
|
11
|
+
const utils = require('./utils.cjs');
|
|
11
12
|
|
|
12
13
|
function _interopNamespace(e) {
|
|
13
14
|
if (e && e.__esModule) return e;
|
|
@@ -50,12 +51,19 @@ const Calendar = ({
|
|
|
50
51
|
futureDatesDisabled,
|
|
51
52
|
selectedDate,
|
|
52
53
|
setSelectedDate,
|
|
53
|
-
autoFocus = false
|
|
54
|
+
autoFocus = false,
|
|
55
|
+
timezone
|
|
54
56
|
}) => {
|
|
55
57
|
const allDays = calendarBody.value.flatMap((week) => week.value);
|
|
56
58
|
const totalDays = allDays.length;
|
|
57
|
-
const today = /* @__PURE__ */ new Date();
|
|
58
|
-
const
|
|
59
|
+
const today = utils.shiftToTimezone(/* @__PURE__ */ new Date(), timezone);
|
|
60
|
+
const shiftedSelected = selectedDate ? utils.shiftToTimezone(selectedDate, timezone) : void 0;
|
|
61
|
+
const shiftedAllowList = react.useMemo(() => {
|
|
62
|
+
return allowOnlyDatesList?.map((date) => {
|
|
63
|
+
return utils.shiftToTimezone(date, timezone);
|
|
64
|
+
});
|
|
65
|
+
}, [allowOnlyDatesList, timezone]);
|
|
66
|
+
const initialFocusIndex = allDays.findIndex((day) => shiftedSelected ? calendar.isSameDate(shiftedSelected, day.value) : calendar.isSameDate(today, day.value));
|
|
59
67
|
const [focusedDayIndex, setFocusedDayIndex] = react.useState(initialFocusIndex >= 0 ? initialFocusIndex : 0);
|
|
60
68
|
const dayRefs = react.useRef([]);
|
|
61
69
|
react.useEffect(() => {
|
|
@@ -69,30 +77,30 @@ const Calendar = ({
|
|
|
69
77
|
return () => clearTimeout(timeoutId);
|
|
70
78
|
}
|
|
71
79
|
}, [autoFocus, initialFocusIndex]);
|
|
72
|
-
const onDayKeyDown = react.useCallback((
|
|
80
|
+
const onDayKeyDown = react.useCallback((event, index, fullDate, isDisabled) => {
|
|
73
81
|
let newIndex = index;
|
|
74
|
-
switch (
|
|
82
|
+
switch (event.key) {
|
|
75
83
|
case "ArrowRight":
|
|
76
|
-
|
|
84
|
+
event.preventDefault();
|
|
77
85
|
newIndex = (index + 1) % totalDays;
|
|
78
86
|
break;
|
|
79
87
|
case "ArrowLeft":
|
|
80
|
-
|
|
88
|
+
event.preventDefault();
|
|
81
89
|
newIndex = (index - 1 + totalDays) % totalDays;
|
|
82
90
|
break;
|
|
83
91
|
case "ArrowDown":
|
|
84
|
-
|
|
92
|
+
event.preventDefault();
|
|
85
93
|
newIndex = (index + DAYS_IN_WEEK) % totalDays;
|
|
86
94
|
break;
|
|
87
95
|
case "ArrowUp":
|
|
88
|
-
|
|
96
|
+
event.preventDefault();
|
|
89
97
|
newIndex = (index - DAYS_IN_WEEK + totalDays) % totalDays;
|
|
90
98
|
break;
|
|
91
99
|
case "Enter":
|
|
92
100
|
case " ":
|
|
93
|
-
|
|
101
|
+
event.preventDefault();
|
|
94
102
|
if (!isDisabled) {
|
|
95
|
-
setSelectedDate(fullDate);
|
|
103
|
+
setSelectedDate(utils.shiftFromTimezone(fullDate, timezone));
|
|
96
104
|
closeDatepicker();
|
|
97
105
|
}
|
|
98
106
|
return;
|
|
@@ -101,7 +109,7 @@ const Calendar = ({
|
|
|
101
109
|
}
|
|
102
110
|
setFocusedDayIndex(newIndex);
|
|
103
111
|
dayRefs.current[newIndex]?.focus();
|
|
104
|
-
}, [totalDays, setSelectedDate, closeDatepicker]);
|
|
112
|
+
}, [totalDays, setSelectedDate, closeDatepicker, timezone]);
|
|
105
113
|
let dayIndex = 0;
|
|
106
114
|
return calendarBody.value.map(({
|
|
107
115
|
key: weekKey,
|
|
@@ -113,9 +121,11 @@ const Calendar = ({
|
|
|
113
121
|
key: dayKey,
|
|
114
122
|
value: fullDate
|
|
115
123
|
}) => {
|
|
116
|
-
const isSelected =
|
|
124
|
+
const isSelected = shiftedSelected && calendar.isSameDate(shiftedSelected, fullDate);
|
|
117
125
|
const isPresent = calendar.isSameDate(today, fullDate);
|
|
118
|
-
const isNotAllowed =
|
|
126
|
+
const isNotAllowed = shiftedAllowList && shiftedAllowList.length > 0 && !shiftedAllowList.some((shiftedDate) => {
|
|
127
|
+
return calendar.isSameDate(shiftedDate, fullDate);
|
|
128
|
+
});
|
|
119
129
|
const isFutureDisabled = futureDatesDisabled && fullDate > today;
|
|
120
130
|
const isDisabled = isNotAllowed || isFutureDisabled;
|
|
121
131
|
const currentIndex = dayIndex;
|
|
@@ -124,7 +134,7 @@ const Calendar = ({
|
|
|
124
134
|
if (isDisabled) {
|
|
125
135
|
return false;
|
|
126
136
|
}
|
|
127
|
-
setSelectedDate(fullDate);
|
|
137
|
+
setSelectedDate(utils.shiftFromTimezone(fullDate, timezone));
|
|
128
138
|
closeDatepicker();
|
|
129
139
|
};
|
|
130
140
|
return /* @__PURE__ */ jsxRuntime.jsx(Common.DateTableCell, { ref: (el) => {
|
|
@@ -139,7 +149,8 @@ const DatePicker = ({
|
|
|
139
149
|
disabled = false,
|
|
140
150
|
futureDatesDisabled = false,
|
|
141
151
|
onSelectDate,
|
|
142
|
-
placeholder
|
|
152
|
+
placeholder,
|
|
153
|
+
timezone = "system"
|
|
143
154
|
}) => {
|
|
144
155
|
const [isOpen, setIsOpen] = react.useState(false);
|
|
145
156
|
const [selectedDate, setSelectedDate] = react.useState();
|
|
@@ -191,8 +202,8 @@ const DatePicker = ({
|
|
|
191
202
|
}
|
|
192
203
|
}, []);
|
|
193
204
|
return /* @__PURE__ */ jsxRuntime.jsxs(RadixPopover__namespace.Root, { onOpenChange, open: isOpen, children: [
|
|
194
|
-
/* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsxRuntime.jsx(Common.DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, partialMonth, partialYear, placeholder, selectedDate }) }),
|
|
195
|
-
/* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Common.CalendarRenderer, { calendarOptions, onYearSelect, onMonthSelect, selectedDate, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { allowOnlyDatesList, autoFocus: autoFocusCalendar, calendarBody: body, closeDatepicker: onCloseDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: onDateSelect }) }) }) })
|
|
205
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsxRuntime.jsx(Common.DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, partialMonth, partialYear, placeholder, selectedDate, timezone }) }),
|
|
206
|
+
/* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Common.CalendarRenderer, { calendarOptions, onYearSelect, onMonthSelect, selectedDate, timezone, children: (body) => /* @__PURE__ */ jsxRuntime.jsx(Calendar, { allowOnlyDatesList, autoFocus: autoFocusCalendar, calendarBody: body, closeDatepicker: onCloseDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: onDateSelect, timezone }) }) }) })
|
|
196
207
|
] });
|
|
197
208
|
};
|
|
198
209
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { isSameDate, UseCalendarOptions } from '@h6s/calendar';\nimport * as Popover from '@radix-ui/react-popover';\nimport { styled } from 'styled-components';\nimport { Body, CalendarRenderer, DatePickerInput, DateTableCell } from './Common';\nimport { DatePickerProps } from './DatePicker.types';\n\nconst DAYS_IN_WEEK = 7;\n\nconst PopoverTrigger = styled(Popover.Trigger)`\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: fit-content;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: none;\n }\n`;\n\nconst PopoverContent = styled(Popover.Content)`\n z-index: 1;\n outline: none;\n\n ${({ theme }) => `\n border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n background: ${theme.click.genericMenu.panel.color.background.default};\n box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n border-radius: ${theme.click.genericMenu.panel.radii.all};\n `}\n\n &:focus {\n outline: none;\n }\n`;\n\ninterface CalendarProps {\n allowOnlyDatesList?: Array<Date>;\n calendarBody: Body;\n closeDatepicker: () => void;\n futureDatesDisabled: boolean;\n selectedDate?: Date;\n setSelectedDate: (selectedDate: Date) => void;\n autoFocus?: boolean;\n}\n\nconst Calendar = ({\n allowOnlyDatesList,\n calendarBody,\n closeDatepicker,\n futureDatesDisabled,\n selectedDate,\n setSelectedDate,\n autoFocus = false,\n}: CalendarProps) => {\n const allDays = calendarBody.value.flatMap(week => week.value);\n const totalDays = allDays.length;\n\n const today = new Date();\n const initialFocusIndex = allDays.findIndex(day =>\n selectedDate ? isSameDate(selectedDate, day.value) : isSameDate(today, day.value)\n );\n\n const [focusedDayIndex, setFocusedDayIndex] = useState<number>(\n initialFocusIndex >= 0 ? initialFocusIndex : 0\n );\n const dayRefs = useRef<Array<HTMLTableCellElement | null>>([]);\n\n useEffect(() => {\n dayRefs.current[focusedDayIndex]?.focus();\n }, [focusedDayIndex]);\n\n useEffect(() => {\n if (autoFocus && initialFocusIndex >= 0) {\n const timeoutId = setTimeout(() => {\n dayRefs.current[initialFocusIndex]?.focus();\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [autoFocus, initialFocusIndex]);\n\n const onDayKeyDown = useCallback(\n (\n e: KeyboardEvent<HTMLTableCellElement>,\n index: number,\n fullDate: Date,\n isDisabled: boolean\n ) => {\n let newIndex = index;\n\n switch (e.key) {\n case 'ArrowRight':\n e.preventDefault();\n newIndex = (index + 1) % totalDays;\n break;\n case 'ArrowLeft':\n e.preventDefault();\n newIndex = (index - 1 + totalDays) % totalDays;\n break;\n case 'ArrowDown':\n e.preventDefault();\n newIndex = (index + DAYS_IN_WEEK) % totalDays;\n break;\n case 'ArrowUp':\n e.preventDefault();\n newIndex = (index - DAYS_IN_WEEK + totalDays) % totalDays;\n break;\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (!isDisabled) {\n setSelectedDate(fullDate);\n closeDatepicker();\n }\n return;\n default:\n return;\n }\n\n setFocusedDayIndex(newIndex);\n dayRefs.current[newIndex]?.focus();\n },\n [totalDays, setSelectedDate, closeDatepicker]\n );\n\n let dayIndex = 0;\n\n return calendarBody.value.map(({ key: weekKey, value: week }) => {\n return (\n <tr key={weekKey}>\n {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {\n const isSelected = selectedDate && isSameDate(selectedDate, fullDate);\n const isPresent = isSameDate(today, fullDate);\n const isNotAllowed =\n allowOnlyDatesList &&\n allowOnlyDatesList.length > 0 &&\n !allowOnlyDatesList.some(d => isSameDate(d, fullDate));\n const isFutureDisabled = futureDatesDisabled && fullDate > today;\n const isDisabled = isNotAllowed || isFutureDisabled;\n const currentIndex = dayIndex;\n dayIndex++;\n\n const handleClick = () => {\n if (isDisabled) {\n return false;\n }\n setSelectedDate(fullDate);\n closeDatepicker();\n };\n\n return (\n <DateTableCell\n ref={el => {\n dayRefs.current[currentIndex] = el;\n }}\n $isCurrentMonth={isCurrentMonth}\n $isDisabled={isDisabled}\n $isSelected={isSelected}\n $isPresent={isPresent}\n key={dayKey}\n onClick={handleClick}\n onKeyDown={e => onDayKeyDown(e, currentIndex, fullDate, isDisabled)}\n tabIndex={currentIndex === focusedDayIndex ? 0 : -1}\n role=\"gridcell\"\n aria-label={fullDate.toDateString()}\n >\n {date}\n </DateTableCell>\n );\n })}\n </tr>\n );\n });\n};\n\nexport const DatePicker = ({\n allowOnlyDatesList,\n date,\n disabled = false,\n futureDatesDisabled = false,\n onSelectDate,\n placeholder,\n}: DatePickerProps) => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [selectedDate, setSelectedDate] = useState<Date>();\n const [partialYear, setPartialYear] = useState<number>();\n const [partialMonth, setPartialMonth] = useState<number>();\n const [autoFocusCalendar, setAutoFocusCalendar] = useState<boolean>(false);\n\n const calendarOptions: UseCalendarOptions = {};\n\n if (selectedDate) {\n calendarOptions.defaultDate = selectedDate;\n }\n\n useEffect(() => {\n if (date) {\n setSelectedDate(date);\n }\n }, [date]);\n\n const resetPartialState = useCallback(() => {\n setPartialYear(undefined);\n setPartialMonth(undefined);\n }, []);\n\n const onOpenChange = useCallback(\n (open: boolean) => {\n setIsOpen(open);\n if (!open) {\n resetPartialState();\n setAutoFocusCalendar(false);\n }\n },\n [resetPartialState]\n );\n\n const onCloseDatePicker = useCallback(() => {\n setIsOpen(false);\n resetPartialState();\n }, [resetPartialState]);\n\n const onDateSelect = useCallback(\n (date: Date): void => {\n setSelectedDate(date);\n onSelectDate(date);\n resetPartialState();\n },\n [onSelectDate, resetPartialState]\n );\n\n const onYearSelect = useCallback((year: number) => {\n setPartialYear(year);\n setPartialMonth(undefined);\n }, []);\n\n const onMonthSelect = useCallback((year: number, month: number) => {\n setPartialYear(year);\n setPartialMonth(month);\n }, []);\n\n const onTriggerKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n setIsOpen(true);\n setAutoFocusCalendar(true);\n }\n }, []);\n\n return (\n <Popover.Root\n onOpenChange={onOpenChange}\n open={isOpen}\n >\n <PopoverTrigger\n disabled={disabled}\n onKeyDown={onTriggerKeyDown}\n >\n <DatePickerInput\n data-testid=\"datepicker-input-container\"\n disabled={disabled}\n isActive={isOpen}\n partialMonth={partialMonth}\n partialYear={partialYear}\n placeholder={placeholder}\n selectedDate={selectedDate}\n />\n </PopoverTrigger>\n <Popover.Portal>\n <PopoverContent\n align=\"start\"\n sideOffset={4}\n >\n <CalendarRenderer\n calendarOptions={calendarOptions}\n onYearSelect={onYearSelect}\n onMonthSelect={onMonthSelect}\n selectedDate={selectedDate}\n >\n {body => (\n <Calendar\n allowOnlyDatesList={allowOnlyDatesList}\n autoFocus={autoFocusCalendar}\n calendarBody={body}\n closeDatepicker={onCloseDatePicker}\n futureDatesDisabled={futureDatesDisabled}\n selectedDate={selectedDate}\n setSelectedDate={onDateSelect}\n />\n )}\n </CalendarRenderer>\n </PopoverContent>\n </Popover.Portal>\n </Popover.Root>\n );\n};\n"],"names":["DAYS_IN_WEEK","PopoverTrigger","styled","Popover","Trigger","withConfig","componentId","PopoverContent","Content","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","Calendar","allowOnlyDatesList","calendarBody","closeDatepicker","futureDatesDisabled","selectedDate","setSelectedDate","autoFocus","allDays","value","flatMap","week","totalDays","length","today","Date","initialFocusIndex","findIndex","day","isSameDate","focusedDayIndex","setFocusedDayIndex","useState","dayRefs","useRef","useEffect","current","focus","timeoutId","setTimeout","clearTimeout","onDayKeyDown","useCallback","e","index","fullDate","isDisabled","newIndex","key","preventDefault","dayIndex","map","weekKey","jsx","date","isCurrentMonth","dayKey","isSelected","isPresent","isNotAllowed","some","d","isFutureDisabled","currentIndex","handleClick","DateTableCell","el","toDateString","DatePicker","disabled","onSelectDate","placeholder","isOpen","setIsOpen","partialYear","setPartialYear","partialMonth","setPartialMonth","autoFocusCalendar","setAutoFocusCalendar","calendarOptions","defaultDate","resetPartialState","undefined","onOpenChange","open","onCloseDatePicker","onDateSelect","onYearSelect","year","onMonthSelect","month","onTriggerKeyDown","DatePickerInput","CalendarRenderer","body"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { isSameDate, UseCalendarOptions } from '@h6s/calendar';\nimport * as Popover from '@radix-ui/react-popover';\nimport { styled } from 'styled-components';\nimport { Body, CalendarRenderer, DatePickerInput, DateTableCell } from './Common';\nimport { shiftFromTimezone, shiftToTimezone, Timezone } from './utils';\n\nconst DAYS_IN_WEEK = 7;\n\nconst PopoverTrigger = styled(Popover.Trigger)`\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: fit-content;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: none;\n }\n`;\n\nconst PopoverContent = styled(Popover.Content)`\n z-index: 1;\n outline: none;\n\n ${({ theme }) => `\n border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n background: ${theme.click.genericMenu.panel.color.background.default};\n box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n border-radius: ${theme.click.genericMenu.panel.radii.all};\n `}\n\n &:focus {\n outline: none;\n }\n`;\n\ninterface CalendarProps {\n allowOnlyDatesList?: Array<Date>;\n calendarBody: Body;\n closeDatepicker: () => void;\n futureDatesDisabled: boolean;\n selectedDate?: Date;\n setSelectedDate: (selectedDate: Date) => void;\n autoFocus?: boolean;\n timezone: Timezone;\n}\n\nconst Calendar = ({\n allowOnlyDatesList,\n calendarBody,\n closeDatepicker,\n futureDatesDisabled,\n selectedDate,\n setSelectedDate,\n autoFocus = false,\n timezone,\n}: CalendarProps) => {\n const allDays = calendarBody.value.flatMap(week => week.value);\n const totalDays = allDays.length;\n\n const today = shiftToTimezone(new Date(), timezone);\n\n const shiftedSelected = selectedDate\n ? shiftToTimezone(selectedDate, timezone)\n : undefined;\n\n const shiftedAllowList = useMemo(() => {\n return allowOnlyDatesList?.map(date => {\n return shiftToTimezone(date, timezone);\n });\n }, [allowOnlyDatesList, timezone]);\n\n const initialFocusIndex = allDays.findIndex(day =>\n shiftedSelected\n ? isSameDate(shiftedSelected, day.value)\n : isSameDate(today, day.value)\n );\n\n const [focusedDayIndex, setFocusedDayIndex] = useState<number>(\n initialFocusIndex >= 0 ? initialFocusIndex : 0\n );\n const dayRefs = useRef<Array<HTMLTableCellElement | null>>([]);\n\n useEffect(() => {\n dayRefs.current[focusedDayIndex]?.focus();\n }, [focusedDayIndex]);\n\n useEffect(() => {\n if (autoFocus && initialFocusIndex >= 0) {\n const timeoutId = setTimeout(() => {\n dayRefs.current[initialFocusIndex]?.focus();\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [autoFocus, initialFocusIndex]);\n\n const onDayKeyDown = useCallback(\n (\n event: KeyboardEvent<HTMLTableCellElement>,\n index: number,\n fullDate: Date,\n isDisabled: boolean\n ) => {\n let newIndex = index;\n\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n newIndex = (index + 1) % totalDays;\n break;\n case 'ArrowLeft':\n event.preventDefault();\n newIndex = (index - 1 + totalDays) % totalDays;\n break;\n case 'ArrowDown':\n event.preventDefault();\n newIndex = (index + DAYS_IN_WEEK) % totalDays;\n break;\n case 'ArrowUp':\n event.preventDefault();\n newIndex = (index - DAYS_IN_WEEK + totalDays) % totalDays;\n break;\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (!isDisabled) {\n setSelectedDate(shiftFromTimezone(fullDate, timezone));\n closeDatepicker();\n }\n return;\n default:\n return;\n }\n\n setFocusedDayIndex(newIndex);\n dayRefs.current[newIndex]?.focus();\n },\n [totalDays, setSelectedDate, closeDatepicker, timezone]\n );\n\n let dayIndex = 0;\n\n return calendarBody.value.map(({ key: weekKey, value: week }) => {\n return (\n <tr key={weekKey}>\n {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {\n const isSelected = shiftedSelected && isSameDate(shiftedSelected, fullDate);\n const isPresent = isSameDate(today, fullDate);\n\n const isNotAllowed =\n shiftedAllowList &&\n shiftedAllowList.length > 0 &&\n !shiftedAllowList.some((shiftedDate: Date) => {\n return isSameDate(shiftedDate, fullDate);\n });\n\n const isFutureDisabled = futureDatesDisabled && fullDate > today;\n const isDisabled = isNotAllowed || isFutureDisabled;\n const currentIndex = dayIndex;\n dayIndex++;\n\n const handleClick = () => {\n if (isDisabled) {\n return false;\n }\n setSelectedDate(shiftFromTimezone(fullDate, timezone));\n closeDatepicker();\n };\n\n return (\n <DateTableCell\n ref={el => {\n dayRefs.current[currentIndex] = el;\n }}\n $isCurrentMonth={isCurrentMonth}\n $isDisabled={isDisabled}\n $isSelected={isSelected}\n $isPresent={isPresent}\n key={dayKey}\n onClick={handleClick}\n onKeyDown={e => onDayKeyDown(e, currentIndex, fullDate, isDisabled)}\n tabIndex={currentIndex === focusedDayIndex ? 0 : -1}\n role=\"gridcell\"\n aria-label={fullDate.toDateString()}\n >\n {date}\n </DateTableCell>\n );\n })}\n </tr>\n );\n });\n};\n\nexport interface DatePickerProps {\n allowOnlyDatesList?: Array<Date>;\n date?: Date;\n disabled?: boolean;\n futureDatesDisabled?: boolean;\n onSelectDate: (selectedDate: Date) => void;\n placeholder?: string;\n timezone?: Timezone;\n}\n\nexport const DatePicker = ({\n allowOnlyDatesList,\n date,\n disabled = false,\n futureDatesDisabled = false,\n onSelectDate,\n placeholder,\n timezone = 'system',\n}: DatePickerProps) => {\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const [selectedDate, setSelectedDate] = useState<Date>();\n const [partialYear, setPartialYear] = useState<number>();\n const [partialMonth, setPartialMonth] = useState<number>();\n const [autoFocusCalendar, setAutoFocusCalendar] = useState<boolean>(false);\n\n const calendarOptions: UseCalendarOptions = {};\n\n if (selectedDate) {\n calendarOptions.defaultDate = selectedDate;\n }\n\n useEffect(() => {\n if (date) {\n setSelectedDate(date);\n }\n }, [date]);\n\n const resetPartialState = useCallback(() => {\n setPartialYear(undefined);\n setPartialMonth(undefined);\n }, []);\n\n const onOpenChange = useCallback(\n (open: boolean) => {\n setIsOpen(open);\n if (!open) {\n resetPartialState();\n setAutoFocusCalendar(false);\n }\n },\n [resetPartialState]\n );\n\n const onCloseDatePicker = useCallback(() => {\n setIsOpen(false);\n resetPartialState();\n }, [resetPartialState]);\n\n const onDateSelect = useCallback(\n (date: Date): void => {\n setSelectedDate(date);\n onSelectDate(date);\n resetPartialState();\n },\n [onSelectDate, resetPartialState]\n );\n\n const onYearSelect = useCallback((year: number) => {\n setPartialYear(year);\n setPartialMonth(undefined);\n }, []);\n\n const onMonthSelect = useCallback((year: number, month: number) => {\n setPartialYear(year);\n setPartialMonth(month);\n }, []);\n\n const onTriggerKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n setIsOpen(true);\n setAutoFocusCalendar(true);\n }\n }, []);\n\n return (\n <Popover.Root\n onOpenChange={onOpenChange}\n open={isOpen}\n >\n <PopoverTrigger\n disabled={disabled}\n onKeyDown={onTriggerKeyDown}\n >\n <DatePickerInput\n data-testid=\"datepicker-input-container\"\n disabled={disabled}\n isActive={isOpen}\n partialMonth={partialMonth}\n partialYear={partialYear}\n placeholder={placeholder}\n selectedDate={selectedDate}\n timezone={timezone}\n />\n </PopoverTrigger>\n <Popover.Portal>\n <PopoverContent\n align=\"start\"\n sideOffset={4}\n >\n <CalendarRenderer\n calendarOptions={calendarOptions}\n onYearSelect={onYearSelect}\n onMonthSelect={onMonthSelect}\n selectedDate={selectedDate}\n timezone={timezone}\n >\n {body => (\n <Calendar\n allowOnlyDatesList={allowOnlyDatesList}\n autoFocus={autoFocusCalendar}\n calendarBody={body}\n closeDatepicker={onCloseDatePicker}\n futureDatesDisabled={futureDatesDisabled}\n selectedDate={selectedDate}\n setSelectedDate={onDateSelect}\n timezone={timezone}\n />\n )}\n </CalendarRenderer>\n </PopoverContent>\n </Popover.Portal>\n </Popover.Root>\n );\n};\n"],"names":["DAYS_IN_WEEK","PopoverTrigger","styled","Popover","Trigger","withConfig","componentId","PopoverContent","Content","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","Calendar","allowOnlyDatesList","calendarBody","closeDatepicker","futureDatesDisabled","selectedDate","setSelectedDate","autoFocus","timezone","allDays","value","flatMap","week","totalDays","length","today","shiftToTimezone","Date","shiftedSelected","undefined","shiftedAllowList","useMemo","map","date","initialFocusIndex","findIndex","day","isSameDate","focusedDayIndex","setFocusedDayIndex","useState","dayRefs","useRef","useEffect","current","focus","timeoutId","setTimeout","clearTimeout","onDayKeyDown","useCallback","event","index","fullDate","isDisabled","newIndex","key","preventDefault","shiftFromTimezone","dayIndex","weekKey","jsx","isCurrentMonth","dayKey","isSelected","isPresent","isNotAllowed","some","shiftedDate","isFutureDisabled","currentIndex","handleClick","DateTableCell","el","e","toDateString","DatePicker","disabled","onSelectDate","placeholder","isOpen","setIsOpen","partialYear","setPartialYear","partialMonth","setPartialMonth","autoFocusCalendar","setAutoFocusCalendar","calendarOptions","defaultDate","resetPartialState","onOpenChange","open","onCloseDatePicker","onDateSelect","onYearSelect","year","onMonthSelect","month","onTriggerKeyDown","DatePickerInput","CalendarRenderer","body"],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
+
require('../../utils/date.cjs');
|
|
5
6
|
const dayjs = require('dayjs');
|
|
6
7
|
|
|
7
8
|
const _interopDefault = e => e && e.__esModule ? e : { default: e };
|
|
@@ -9,31 +10,56 @@ const _interopDefault = e => e && e.__esModule ? e : { default: e };
|
|
|
9
10
|
const dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
|
|
10
11
|
|
|
11
12
|
const locale = "en-US";
|
|
12
|
-
const
|
|
13
|
+
const createFormatter = (options) => {
|
|
14
|
+
const timezoneFormatters = {};
|
|
15
|
+
return (timezone, date) => {
|
|
16
|
+
if (!timezoneFormatters[timezone]) {
|
|
17
|
+
const opts = timezone === "UTC" ? {
|
|
18
|
+
...options,
|
|
19
|
+
timeZone: "UTC"
|
|
20
|
+
} : options;
|
|
21
|
+
timezoneFormatters[timezone] = new Intl.DateTimeFormat(locale, opts);
|
|
22
|
+
}
|
|
23
|
+
return timezoneFormatters[timezone].format(date);
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
const formatSelectedDate = createFormatter({
|
|
13
27
|
day: "2-digit",
|
|
14
28
|
month: "short",
|
|
15
29
|
year: "numeric"
|
|
16
30
|
});
|
|
17
|
-
const
|
|
31
|
+
const formatWeekday = createFormatter({
|
|
18
32
|
weekday: "short"
|
|
19
33
|
});
|
|
20
|
-
const
|
|
34
|
+
const formatSelectedDateTime = createFormatter({
|
|
21
35
|
day: "2-digit",
|
|
22
36
|
month: "short",
|
|
23
37
|
hour: "2-digit",
|
|
24
38
|
minute: "2-digit"
|
|
25
39
|
});
|
|
26
|
-
const
|
|
40
|
+
const formatSelectedDateTimeWithSeconds = createFormatter({
|
|
27
41
|
day: "2-digit",
|
|
28
42
|
month: "short",
|
|
29
43
|
hour: "2-digit",
|
|
30
44
|
minute: "2-digit",
|
|
31
45
|
second: "2-digit"
|
|
32
46
|
});
|
|
33
|
-
const
|
|
47
|
+
const formatDateHeader = createFormatter({
|
|
34
48
|
month: "short",
|
|
35
49
|
year: "numeric"
|
|
36
50
|
});
|
|
51
|
+
const shiftToTimezone = (date, timezone) => {
|
|
52
|
+
if (timezone !== "UTC") {
|
|
53
|
+
return date;
|
|
54
|
+
}
|
|
55
|
+
return new Date(date.getTime() + date.getTimezoneOffset() * 6e4);
|
|
56
|
+
};
|
|
57
|
+
const shiftFromTimezone = (date, timezone) => {
|
|
58
|
+
if (timezone !== "UTC") {
|
|
59
|
+
return date;
|
|
60
|
+
}
|
|
61
|
+
return new Date(date.getTime() - date.getTimezoneOffset() * 6e4);
|
|
62
|
+
};
|
|
37
63
|
const getPredefinedMonthsForDateRangePicker = (numberOfMonths) => {
|
|
38
64
|
const now = dayjs__default.default();
|
|
39
65
|
if (numberOfMonths < 0) {
|
|
@@ -67,23 +93,25 @@ const datesAreWithinMaxRange = (startDate, endDate, maxRangeLength) => {
|
|
|
67
93
|
const isDateRangeTheWholeMonth = ({
|
|
68
94
|
startDate,
|
|
69
95
|
endDate
|
|
70
|
-
}) => {
|
|
71
|
-
|
|
96
|
+
}, timezone = "system") => {
|
|
97
|
+
const start = timezone === "UTC" ? dayjs__default.default.utc(startDate) : dayjs__default.default(startDate);
|
|
98
|
+
const end = timezone === "UTC" ? dayjs__default.default.utc(endDate) : dayjs__default.default(endDate);
|
|
99
|
+
if (start.month() !== end.month()) {
|
|
72
100
|
return false;
|
|
73
101
|
}
|
|
74
|
-
const start = dayjs__default.default(startDate);
|
|
75
|
-
const end = dayjs__default.default(endDate);
|
|
76
102
|
const startDateIsFirstDay = start.isSame(start.startOf("month"), "day");
|
|
77
103
|
const endDateIsLastDay = end.isSame(end.endOf("month"), "day");
|
|
78
104
|
return startDateIsFirstDay && endDateIsLastDay;
|
|
79
105
|
};
|
|
80
106
|
|
|
81
107
|
exports.datesAreWithinMaxRange = datesAreWithinMaxRange;
|
|
108
|
+
exports.formatDateHeader = formatDateHeader;
|
|
109
|
+
exports.formatSelectedDate = formatSelectedDate;
|
|
110
|
+
exports.formatSelectedDateTime = formatSelectedDateTime;
|
|
111
|
+
exports.formatSelectedDateTimeWithSeconds = formatSelectedDateTimeWithSeconds;
|
|
112
|
+
exports.formatWeekday = formatWeekday;
|
|
82
113
|
exports.getPredefinedMonthsForDateRangePicker = getPredefinedMonthsForDateRangePicker;
|
|
83
|
-
exports.headerDateFormatter = headerDateFormatter;
|
|
84
114
|
exports.isDateRangeTheWholeMonth = isDateRangeTheWholeMonth;
|
|
85
|
-
exports.
|
|
86
|
-
exports.
|
|
87
|
-
exports.selectedDateTimeFormatterWithSeconds = selectedDateTimeFormatterWithSeconds;
|
|
88
|
-
exports.weekdayFormatter = weekdayFormatter;
|
|
115
|
+
exports.shiftFromTimezone = shiftFromTimezone;
|
|
116
|
+
exports.shiftToTimezone = shiftToTimezone;
|
|
89
117
|
//# sourceMappingURL=utils.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/DatePicker/utils.ts"],"sourcesContent":["import dayjs from '
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/DatePicker/utils.ts"],"sourcesContent":["import { dayjs } from '@/utils/date';\n\nexport type Timezone = 'system' | 'UTC';\n\nexport interface DateRange {\n startDate: Date;\n endDate: Date;\n}\n\nconst locale = 'en-US';\n\nexport type Meridiem = 'am' | 'pm';\n\nexport interface Time {\n hour: number;\n minutes: number;\n}\n\nexport interface DateRangeListItem {\n dateRange: DateRange;\n label: string;\n}\n\nconst createFormatter = (options: Intl.DateTimeFormatOptions) => {\n const timezoneFormatters: Partial<Record<Timezone, Intl.DateTimeFormat>> = {};\n\n return (timezone: Timezone, date: Date): string => {\n if (!timezoneFormatters[timezone]) {\n const opts = timezone === 'UTC' ? { ...options, timeZone: 'UTC' } : options;\n timezoneFormatters[timezone] = new Intl.DateTimeFormat(locale, opts);\n }\n return timezoneFormatters[timezone].format(date);\n };\n};\n\nexport const formatSelectedDate = createFormatter({\n day: '2-digit',\n month: 'short',\n year: 'numeric',\n});\n\nexport const formatWeekday = createFormatter({ weekday: 'short' });\n\nexport const formatSelectedDateTime = createFormatter({\n day: '2-digit',\n month: 'short',\n hour: '2-digit',\n minute: '2-digit',\n});\n\nexport const formatSelectedDateTimeWithSeconds = createFormatter({\n day: '2-digit',\n month: 'short',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n});\n\nexport const formatDateHeader = createFormatter({\n month: 'short',\n year: 'numeric',\n});\n\n// In UTC mode, shift by the host offset so local-time getters return UTC\n// values. shiftFromTimezone reverses it.\n//\n// Caveat: round-tripping across a DST boundary drifts by an hour — each\n// direction reads getTimezoneOffset on its own input. Call sites don't\n// round-trip the same Date, so this hasn't bitten us.\nexport const shiftToTimezone = (date: Date, timezone: Timezone): Date => {\n if (timezone !== 'UTC') {\n return date;\n }\n return new Date(date.getTime() + date.getTimezoneOffset() * 60_000);\n};\n\nexport const shiftFromTimezone = (date: Date, timezone: Timezone): Date => {\n if (timezone !== 'UTC') {\n return date;\n }\n return new Date(date.getTime() - date.getTimezoneOffset() * 60_000);\n};\n\nexport const getPredefinedMonthsForDateRangePicker = (\n numberOfMonths: number\n): DateRange[] => {\n const now = dayjs();\n\n if (numberOfMonths < 0) {\n const lastSixMonths: DateRange[] = [];\n for (let i = 0; i < Math.abs(numberOfMonths); i++) {\n const date = now.subtract(i, 'month');\n if (date.date() === 1 && date.month() === now.month()) {\n continue;\n }\n lastSixMonths.push({\n startDate: date.startOf('month').toDate(),\n endDate: i === 0 ? now.toDate() : date.endOf('month').toDate(),\n });\n }\n\n return lastSixMonths.reverse();\n }\n\n const nextSixMonths: DateRange[] = [];\n for (let i = 0; i < numberOfMonths; i++) {\n const date = now.add(i, 'month');\n nextSixMonths.push({\n startDate: date.startOf('month').toDate(),\n endDate: date.endOf('month').toDate(),\n });\n }\n\n return nextSixMonths;\n};\n\nexport const getPredefinedTimePeriodsForDateTimePicker = (): DateRangeListItem[] => {\n const now = dayjs();\n\n const fifteenMinutesAgo = now.subtract(15, 'minute');\n const thirtyMinutesAgo = now.subtract(30, 'minute');\n const oneHourAgo = now.subtract(1, 'hour');\n const sixHoursAgo = now.subtract(6, 'hour');\n const oneDayAgo = now.subtract(1, 'day');\n const oneMonthAgo = now.subtract(1, 'month');\n\n const dateRangeList: DateRangeListItem[] = [\n {\n dateRange: {\n startDate: fifteenMinutesAgo.toDate(),\n endDate: now.toDate(),\n },\n label: 'Past 15 minutes',\n },\n {\n dateRange: {\n startDate: thirtyMinutesAgo.toDate(),\n endDate: now.toDate(),\n },\n label: 'Past 30 minutes',\n },\n {\n dateRange: {\n startDate: oneHourAgo.toDate(),\n endDate: now.toDate(),\n },\n label: 'Past hour',\n },\n {\n dateRange: {\n startDate: sixHoursAgo.toDate(),\n endDate: now.toDate(),\n },\n label: 'Past 6 hours',\n },\n {\n dateRange: {\n startDate: oneDayAgo.toDate(),\n endDate: now.toDate(),\n },\n label: 'Past day',\n },\n {\n dateRange: {\n startDate: oneMonthAgo.toDate(),\n endDate: now.toDate(),\n },\n label: 'Past month',\n },\n ];\n\n return dateRangeList;\n};\n\nexport const getNextNDatesForDatePickerAllowOnlyList = (numberOfDays: number): Date[] => {\n const now = dayjs();\n\n return Array.from({ length: numberOfDays }, (_, i) =>\n now.add(i, 'day').startOf('day').toDate()\n );\n};\n\nexport const datesAreWithinMaxRange = (\n startDate: Date,\n endDate: Date,\n maxRangeLength: number\n): boolean => {\n const daysDifference = Math.abs(dayjs(startDate).diff(dayjs(endDate), 'days'));\n\n return daysDifference <= maxRangeLength;\n};\n\nexport const isDateRangeTheWholeMonth = (\n { startDate, endDate }: DateRange,\n timezone: Timezone = 'system'\n): boolean => {\n const start = timezone === 'UTC' ? dayjs.utc(startDate) : dayjs(startDate);\n const end = timezone === 'UTC' ? dayjs.utc(endDate) : dayjs(endDate);\n\n if (start.month() !== end.month()) {\n return false;\n }\n\n const startDateIsFirstDay = start.isSame(start.startOf('month'), 'day');\n const endDateIsLastDay = end.isSame(end.endOf('month'), 'day');\n\n return startDateIsFirstDay && endDateIsLastDay;\n};\n"],"names":["locale","createFormatter","options","timezoneFormatters","timezone","date","opts","timeZone","Intl","DateTimeFormat","format","formatSelectedDate","day","month","year","formatWeekday","weekday","formatSelectedDateTime","hour","minute","formatSelectedDateTimeWithSeconds","second","formatDateHeader","shiftToTimezone","Date","getTime","getTimezoneOffset","shiftFromTimezone","getPredefinedMonthsForDateRangePicker","numberOfMonths","now","dayjs","lastSixMonths","i","Math","abs","subtract","push","startDate","startOf","toDate","endDate","endOf","reverse","nextSixMonths","add","datesAreWithinMaxRange","maxRangeLength","daysDifference","diff","isDateRangeTheWholeMonth","start","utc","end","startDateIsFirstDay","isSame","endDateIsLastDay"],"mappings":"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"}
|
|
@@ -79,7 +79,7 @@ const GenericMenuItem = styledComponents.styled.div.withConfig({
|
|
|
79
79
|
cursor: pointer;
|
|
80
80
|
}
|
|
81
81
|
[data-input-modality="keyboard"] &[data-highlighted] {
|
|
82
|
-
outline: 2px solid ${theme.click.
|
|
82
|
+
outline: 2px solid ${theme.click.global.color.accent.default};
|
|
83
83
|
outline-offset: -2px;
|
|
84
84
|
}
|
|
85
85
|
&[data-state="open"] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const GenericMenuPanel = styled.div<{\n $type: 'popover' | 'dropdown-menu' | 'context-menu';\n $showArrow?: boolean;\n}>`\n outline: none;\n max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n overflow: hidden;\n display: flex;\n align-items: flex-start;\n pointer-events: auto;\n\n ${({ theme }) => `\n border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n background: ${theme.click.genericMenu.panel.color.background.default};\n box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n border-radius: ${theme.click.genericMenu.panel.radii.all};\n `};\n ${({ $showArrow }) =>\n $showArrow\n ? `\n &[data-side=\"bottom\"] {\n margin-top: -1px;\n }\n &[data-side=\"top\"] {\n margin-bottom: 1px;\n }\n &[data-side=\"left\"] {\n margin-right: -1px;\n }\n }\n &[data-side=\"right\"] {\n margin-left: -1px;\n }\n `\n : ''};\n`;\n\nexport const GenericPopoverMenuPanel = styled.div<{\n $type: 'popover' | 'hover-card';\n $showArrow?: boolean;\n}>`\n outline: none;\n max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n z-index: 1;\n\n ${({ theme }) => `\n border: 1px solid ${theme.click.popover.color.panel.stroke.default};\n background: ${theme.click.popover.color.panel.background.default};\n padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};\n border-radius: ${theme.click.popover.radii.all};\n box-shadow: ${theme.click.popover.shadow.default};\n `}\n ${({ $showArrow }) => ($showArrow ? 'margin: -1px 0;' : '')};\n`;\n\nexport const Arrow = styled.svg`\n filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 6px);\n ${({ theme }) => `\n fill: ${theme.click.genericMenu.panel.color.background.default};\n stroke: ${theme.click.genericMenu.panel.color.stroke.default};\n `};\n`;\n\nexport const GenericMenuItem = styled.div<{ $type?: 'default' | 'danger' }>`\n display: flex;\n width: 100%;\n width: -moz-available;\n width: -webkit-fill-available;\n width: fill-available;\n width: stretch;\n align-items: center;\n justify-content: flex-start;\n cursor: default;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n &:focus {\n outline: none;\n }\n\n ${({ theme, $type = 'default' }) => {\n const colorKey = $type === 'danger' ? 'danger' : 'default';\n return `\n padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};\n gap: ${theme.click.genericMenu.item.space.gap};\n font: ${theme.click.genericMenu.item.typography.label.default};\n background: ${theme.click.genericMenu.item.color[colorKey].background.default};\n color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n &[data-highlighted] {\n font: ${theme.click.genericMenu.item.typography.label.hover};\n background: ${theme.click.genericMenu.item.color[colorKey].background.hover};\n color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n cursor: pointer;\n }\n [data-input-modality=\"keyboard\"] &[data-highlighted] {\n outline: 2px solid ${theme.click.
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const GenericMenuPanel = styled.div<{\n $type: 'popover' | 'dropdown-menu' | 'context-menu';\n $showArrow?: boolean;\n}>`\n outline: none;\n max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n overflow: hidden;\n display: flex;\n align-items: flex-start;\n pointer-events: auto;\n\n ${({ theme }) => `\n border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n background: ${theme.click.genericMenu.panel.color.background.default};\n box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n border-radius: ${theme.click.genericMenu.panel.radii.all};\n `};\n ${({ $showArrow }) =>\n $showArrow\n ? `\n &[data-side=\"bottom\"] {\n margin-top: -1px;\n }\n &[data-side=\"top\"] {\n margin-bottom: 1px;\n }\n &[data-side=\"left\"] {\n margin-right: -1px;\n }\n }\n &[data-side=\"right\"] {\n margin-left: -1px;\n }\n `\n : ''};\n`;\n\nexport const GenericPopoverMenuPanel = styled.div<{\n $type: 'popover' | 'hover-card';\n $showArrow?: boolean;\n}>`\n outline: none;\n max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n z-index: 1;\n\n ${({ theme }) => `\n border: 1px solid ${theme.click.popover.color.panel.stroke.default};\n background: ${theme.click.popover.color.panel.background.default};\n padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};\n border-radius: ${theme.click.popover.radii.all};\n box-shadow: ${theme.click.popover.shadow.default};\n `}\n ${({ $showArrow }) => ($showArrow ? 'margin: -1px 0;' : '')};\n`;\n\nexport const Arrow = styled.svg`\n filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 6px);\n ${({ theme }) => `\n fill: ${theme.click.genericMenu.panel.color.background.default};\n stroke: ${theme.click.genericMenu.panel.color.stroke.default};\n `};\n`;\n\nexport const GenericMenuItem = styled.div<{ $type?: 'default' | 'danger' }>`\n display: flex;\n width: 100%;\n width: -moz-available;\n width: -webkit-fill-available;\n width: fill-available;\n width: stretch;\n align-items: center;\n justify-content: flex-start;\n cursor: default;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n &:focus {\n outline: none;\n }\n\n ${({ theme, $type = 'default' }) => {\n const colorKey = $type === 'danger' ? 'danger' : 'default';\n return `\n padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};\n gap: ${theme.click.genericMenu.item.space.gap};\n font: ${theme.click.genericMenu.item.typography.label.default};\n background: ${theme.click.genericMenu.item.color[colorKey].background.default};\n color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n &[data-highlighted] {\n font: ${theme.click.genericMenu.item.typography.label.hover};\n background: ${theme.click.genericMenu.item.color[colorKey].background.hover};\n color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n cursor: pointer;\n }\n [data-input-modality=\"keyboard\"] &[data-highlighted] {\n outline: 2px solid ${theme.click.global.color.accent.default};\n outline-offset: -2px;\n }\n &[data-state=\"open\"] {\n background:${theme.click.genericMenu.item.color[colorKey].background.hover};\n color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n font: ${theme.click.genericMenu.item.typography.label.hover};\n cursor: pointer;\n }\n &[data-state=\"checked\"], &[data-selected=\"true\"] {\n background:${theme.click.genericMenu.item.color[colorKey].background.active};\n color:${theme.click.genericMenu.item.color[colorKey].text.active};\n font: ${theme.click.genericMenu.item.typography.label.active};\n }\n &[data-disabled] {\n color:${theme.click.genericMenu.item.color[colorKey].text.disabled};\n font: ${theme.click.genericMenu.item.typography.label.disabled};\n pointer-events: none;\n }\n &:visited {\n color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n a {\n color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n }\n }\n `;\n }};\n position: relative;\n &:hover .dropdown-arrow,\n &[data-state='open'] .dropdown-arrow {\n left: 0.5rem;\n }\n &[hidden] {\n display: none;\n }\n`;\n"],"names":["GenericMenuPanel","styled","div","withConfig","componentId","$type","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","$showArrow","GenericPopoverMenuPanel","popover","space","y","x","Arrow","svg","GenericMenuItem","colorKey","item","gap","typography","label","text","hover","global","accent","active","disabled"],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const classVarianceAuthority = require('class-variance-authority');
|
|
6
|
+
const clsx = require('clsx');
|
|
7
|
+
|
|
8
|
+
const cn = (...inputs) => clsx.clsx(inputs);
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, "cva", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: () => classVarianceAuthority.cva
|
|
13
|
+
});
|
|
14
|
+
exports.cn = cn;
|
|
15
|
+
//# sourceMappingURL=cva.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cva.cjs","sources":["../../../src/lib/cva.ts"],"sourcesContent":["export { cva, type VariantProps } from 'class-variance-authority';\nimport { clsx, type ClassValue } from 'clsx';\n\nexport const cn = (...inputs: ClassValue[]) => clsx(inputs);\n"],"names":["cn","inputs","clsx"],"mappings":";;;;;;;AAGO,MAAMA,EAAAA,GAAKA,CAAAA,GAAIC,MAAAA,KAAyBC,SAAAA,CAAKD,MAAM;;;;;;;;"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
require("../theme/styles/tokens-light.css");
|
|
2
|
+
require("../theme/styles/tokens-dark.css");
|
|
1
3
|
'use strict';
|
|
2
4
|
|
|
3
5
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
@@ -6,6 +8,8 @@ const jsxRuntime = require('react/jsx-runtime');
|
|
|
6
8
|
const styledComponents = require('styled-components');
|
|
7
9
|
const theme_core = require('../theme/theme.core.cjs');
|
|
8
10
|
const theme_utils = require('../theme/theme.utils.cjs');
|
|
11
|
+
;
|
|
12
|
+
;
|
|
9
13
|
|
|
10
14
|
const GlobalStyle = styledComponents.createGlobalStyle(["body{color:", ";background-color:", "}"], (props) => props.theme.click.global.color.text.default, (props) => props.theme.click.global.color.background.default);
|
|
11
15
|
const ThemeProvider = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.cjs","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import {\n ThemeProvider as StyledThemeProvider,\n createGlobalStyle,\n} from 'styled-components';\nimport { THEMES } from '@/theme/theme.core';\nimport type { ThemeName } from '@/theme/theme.types';\nimport { themes } from '@/theme/theme.core';\nimport { isValidThemeName } from '@/theme/theme.utils';\n\nconst GlobalStyle = createGlobalStyle`\n body{\n color: ${props => props.theme.click.global.color.text.default};\n background-color: ${props => props.theme.click.global.color.background.default}\n }\n`;\n\nexport const ThemeProvider = ({\n theme: name,\n children,\n}: {\n theme: ThemeName;\n children: React.ReactNode;\n}) => {\n const hasValidTheme = isValidThemeName(name);\n const resolvedTheme = !hasValidTheme ? THEMES.Light : name;\n return (\n <StyledThemeProvider theme={themes[resolvedTheme]}>\n <GlobalStyle />\n {children}\n </StyledThemeProvider>\n );\n};\n"],"names":["GlobalStyle","createGlobalStyle","props","theme","click","global","color","text","default","background","ThemeProvider","name","children","hasValidTheme","isValidThemeName","resolvedTheme","THEMES","Light","jsxs","StyledThemeProvider","themes","jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ThemeProvider.cjs","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import {\n ThemeProvider as StyledThemeProvider,\n createGlobalStyle,\n} from 'styled-components';\nimport { THEMES } from '@/theme/theme.core';\nimport type { ThemeName } from '@/theme/theme.types';\nimport { themes } from '@/theme/theme.core';\nimport { isValidThemeName } from '@/theme/theme.utils';\n\nimport '@/theme/styles/tokens-light.css';\nimport '@/theme/styles/tokens-dark.css';\n\nconst GlobalStyle = createGlobalStyle`\n body{\n color: ${props => props.theme.click.global.color.text.default};\n background-color: ${props => props.theme.click.global.color.background.default}\n }\n`;\n\nexport const ThemeProvider = ({\n theme: name,\n children,\n}: {\n theme: ThemeName;\n children: React.ReactNode;\n}) => {\n const hasValidTheme = isValidThemeName(name);\n const resolvedTheme = !hasValidTheme ? THEMES.Light : name;\n return (\n <StyledThemeProvider theme={themes[resolvedTheme]}>\n <GlobalStyle />\n {children}\n </StyledThemeProvider>\n );\n};\n"],"names":["GlobalStyle","createGlobalStyle","props","theme","click","global","color","text","default","background","ThemeProvider","name","children","hasValidTheme","isValidThemeName","resolvedTheme","THEMES","Light","jsxs","StyledThemeProvider","themes","jsx"],"mappings":";;;;;;;;;;;AAYA,MAAMA,WAAAA,GAAcC,mCAAiB,CAAA,aAAA,EAAA,sBAAA,GAAA,CAAA,EAExBC,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,OAAOC,KAAAA,CAAMC,IAAAA,CAAKC,SAClCN,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMG,UAAAA,CAAWD,OAAO,CAAA;AAI3E,MAAME,gBAAgBA,CAAC;AAAA,EAC5BP,KAAAA,EAAOQ,IAAAA;AAAAA,EACPC;AAIF,CAAA,KAAM;AACJ,EAAA,MAAMC,aAAAA,GAAgBC,6BAAiBH,IAAI,CAAA;AAC3C,EAAA,MAAMI,aAAAA,GAAgB,CAACF,aAAAA,GAAgBG,iBAAAA,CAAOC,KAAAA,GAAQN,IAAAA;AACtD,EAAA,uBACEO,eAAA,CAACC,8BAAA,EAAA,EAAoB,KAAA,EAAOC,iBAAAA,CAAOL,aAAa,CAAA,EAC9C,QAAA,EAAA;AAAA,oBAAAM,cAAA,CAAC,WAAA,EAAA,EAAW,CAAA;AAAA,IACXT;AAAAA,GAAAA,EACH,CAAA;AAEJ;;;;"}
|