@raystack/apsara 0.44.3 → 0.44.4
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/style.css +1 -1
- package/dist/v1/components/calendar/calendar.cjs +1 -1
- package/dist/v1/components/calendar/calendar.cjs.map +1 -1
- package/dist/v1/components/calendar/calendar.d.ts.map +1 -1
- package/dist/v1/components/calendar/calendar.js +1 -1
- package/dist/v1/components/calendar/calendar.js.map +1 -1
- package/dist/v1/components/calendar/range-picker.cjs +21 -6
- package/dist/v1/components/calendar/range-picker.cjs.map +1 -1
- package/dist/v1/components/calendar/range-picker.d.ts.map +1 -1
- package/dist/v1/components/calendar/range-picker.js +22 -7
- package/dist/v1/components/calendar/range-picker.js.map +1 -1
- package/dist/v1/style.css +1 -1
- package/package.json +1 -1
|
@@ -28,7 +28,7 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
|
|
|
28
28
|
}
|
|
29
29
|
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { className: calendar_module.default.dropdown_trigger, iconProps: {
|
|
30
30
|
className: calendar_module.default.dropdown_icon,
|
|
31
|
-
}, stopPropagation: true, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, {}) }), jsxRuntime.jsxRuntimeExports.jsxs(select.Select.Content, { className: calendar_module.default.dropdown_content, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.ScrollUpButton, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: 'center', children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.ChevronUpIcon, {}) }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Viewport, { children: options.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
|
|
31
|
+
}, stopPropagation: true, size: "small", variant: "text", children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, {}) }), jsxRuntime.jsxRuntimeExports.jsxs(select.Select.Content, { className: calendar_module.default.dropdown_content, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.ScrollUpButton, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: 'center', children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.ChevronUpIcon, {}) }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Viewport, { children: options.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
|
|
32
32
|
className: calendar_module.default.dropdown_item_text,
|
|
33
33
|
}, children: opt.label }, opt.value))) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.ScrollDownButton, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: 'center', children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.ChevronDownIcon, {}) }) })] })] }));
|
|
34
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.cjs","sources":["../../../../v1/components/calendar/calendar.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { ChangeEvent, useEffect, useState } from 'react';\nimport {\n dateLib,\n DayPicker,\n DayPickerProps,\n DropdownProps,\n} from 'react-day-picker';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { Flex } from '../flex/flex';\nimport { Select } from '../select';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n showTooltip?: boolean;\n tooltipMessages?: { [key: string]: any };\n loadingData?: boolean;\n}\n\nexport type CalendarProps = DayPickerProps &\n OnDropdownOpen &\n CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\nfunction DropDown({\n options = [],\n value,\n onChange,\n onDropdownOpen,\n}: DropdownProps & OnDropdownOpen) {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open && onDropdownOpen) onDropdownOpen();\n }, [open]);\n\n function handleChange(value: string) {\n if (onChange) {\n onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n }\n }\n\n return (\n <Select\n value={value?.toString()}\n onValueChange={handleChange}\n open={open}\n onOpenChange={setOpen}\n >\n <Select.Trigger\n className={styles.dropdown_trigger}\n iconProps={{\n className: styles.dropdown_icon,\n }}\n stopPropagation={true}\n >\n <Select.Value />\n </Select.Trigger>\n <Select.Content className={styles.dropdown_content}>\n <Select.ScrollUpButton asChild>\n <Flex justify={'center'}>\n <ChevronUpIcon />\n </Flex>\n </Select.ScrollUpButton>\n <Select.Viewport>\n {options.map((opt) => (\n <Select.Item\n value={opt.value.toString()}\n key={opt.value}\n disabled={opt.disabled}\n textProps={{\n className: styles.dropdown_item_text,\n }}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Viewport>\n <Select.ScrollDownButton asChild>\n <Flex justify={'center'}>\n <ChevronDownIcon />\n </Flex>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n );\n}\n\nexport const Calendar = function ({\n className,\n classNames,\n showOutsideDays = true,\n onDropdownOpen,\n showTooltip = false,\n tooltipMessages = {},\n loadingData = false,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n components={{\n Chevron: (props) => {\n if (props.orientation === 'left') {\n return <ChevronLeftIcon {...props} />;\n }\n return <ChevronRightIcon {...props} />;\n },\n Dropdown: (props: DropdownProps) => (\n <DropDown {...props} onDropdownOpen={onDropdownOpen} />\n ),\n DayButton: (props) => {\n const { day, ...buttonProps } = props;\n const message =\n tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n return (\n <Tooltip\n side=\"top\"\n disabled={loadingData || !showTooltip || !message}\n message={message}\n >\n <button {...buttonProps} />\n </Tooltip>\n );\n },\n MonthGrid: (props) =>\n loadingData ? (\n <Skeleton\n count={6}\n height=\"12px\"\n width=\"252px\"\n style={{ marginBottom: \"var(--rs-space-5)\" }}\n highlightColor=\"var(--rs-color-background-base-primary)\"\n baseColor=\"var(--rs-color-background-base-primary-hover)\"\n />\n ) : (\n <table {...props} />\n ),\n }}\n classNames={{\n caption_label: styles.caption_label,\n button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n month_caption: styles.month_caption,\n months: styles.months,\n nav: styles.nav,\n day: styles.day,\n today: styles.today,\n outside: styles.outside,\n week: styles.week,\n weekdays: styles.week,\n weekday: styles.weekday,\n disabled: styles.disabled,\n selected: styles.selected,\n day_button: styles.day_button,\n range_middle: styles.range_middle,\n range_end: styles.range_end,\n range_start: styles.range_start,\n hidden: styles.hidden,\n dropdowns: styles.dropdowns,\n ...classNames,\n }}\n className={root({ className })}\n mode=\"single\"\n {...props}\n />\n );\n};\n"],"names":["cva","styles","useState","useEffect","_jsxs","Select","_jsx","Flex","ChevronUpIcon","ChevronDownIcon","DayPicker","ChevronLeftIcon","ChevronRightIcon","dateLib","Tooltip","Skeleton"],"mappings":";;;;;;;;;;;;;;;;AAmCA,MAAM,IAAI,GAAGA,WAAG,CAACC,uBAAM,CAAC,YAAY,CAAC,CAAC;AAEtC,SAAS,QAAQ,CAAC,EAChB,OAAO,GAAG,EAAE,EACZ,KAAK,EACL,QAAQ,EACR,cAAc,GACiB,EAAA;IAC/B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;IAExCC,eAAS,CAAC,MAAK;QACb,IAAI,IAAI,IAAI,cAAc;AAAE,YAAA,cAAc,EAAE,CAAC;AAC/C,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,YAAY,CAAC,KAAa,EAAA;QACjC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAoC,CAAC,CAAC;SACnE;KACF;AAED,IAAA,QACEC,iCAAA,CAACC,aAAM,EAAA,EACL,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EACxB,aAAa,EAAE,YAAY,EAC3B,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,OAAO,EAErB,QAAA,EAAA,CAAAC,gCAAA,CAACD,aAAM,CAAC,OAAO,EACb,EAAA,SAAS,EAAEJ,uBAAM,CAAC,gBAAgB,EAClC,SAAS,EAAE;oBACT,SAAS,EAAEA,uBAAM,CAAC,aAAa;AAChC,iBAAA,EACD,eAAe,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"calendar.cjs","sources":["../../../../v1/components/calendar/calendar.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { ChangeEvent, useEffect, useState } from 'react';\nimport {\n dateLib,\n DayPicker,\n DayPickerProps,\n DropdownProps,\n} from 'react-day-picker';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { Flex } from '../flex/flex';\nimport { Select } from '../select';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n showTooltip?: boolean;\n tooltipMessages?: { [key: string]: any };\n loadingData?: boolean;\n}\n\nexport type CalendarProps = DayPickerProps &\n OnDropdownOpen &\n CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\nfunction DropDown({\n options = [],\n value,\n onChange,\n onDropdownOpen,\n}: DropdownProps & OnDropdownOpen) {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open && onDropdownOpen) onDropdownOpen();\n }, [open]);\n\n function handleChange(value: string) {\n if (onChange) {\n onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n }\n }\n\n return (\n <Select\n value={value?.toString()}\n onValueChange={handleChange}\n open={open}\n onOpenChange={setOpen}\n >\n <Select.Trigger\n className={styles.dropdown_trigger}\n iconProps={{\n className: styles.dropdown_icon,\n }}\n stopPropagation={true}\n size=\"small\"\n variant=\"text\"\n >\n <Select.Value />\n </Select.Trigger>\n <Select.Content className={styles.dropdown_content}>\n <Select.ScrollUpButton asChild>\n <Flex justify={'center'}>\n <ChevronUpIcon />\n </Flex>\n </Select.ScrollUpButton>\n <Select.Viewport>\n {options.map((opt) => (\n <Select.Item\n value={opt.value.toString()}\n key={opt.value}\n disabled={opt.disabled}\n textProps={{\n className: styles.dropdown_item_text,\n }}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Viewport>\n <Select.ScrollDownButton asChild>\n <Flex justify={'center'}>\n <ChevronDownIcon />\n </Flex>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n );\n}\n\nexport const Calendar = function ({\n className,\n classNames,\n showOutsideDays = true,\n onDropdownOpen,\n showTooltip = false,\n tooltipMessages = {},\n loadingData = false,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n components={{\n Chevron: (props) => {\n if (props.orientation === 'left') {\n return <ChevronLeftIcon {...props} />;\n }\n return <ChevronRightIcon {...props} />;\n },\n Dropdown: (props: DropdownProps) => (\n <DropDown {...props} onDropdownOpen={onDropdownOpen} />\n ),\n DayButton: (props) => {\n const { day, ...buttonProps } = props;\n const message =\n tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n return (\n <Tooltip\n side=\"top\"\n disabled={loadingData || !showTooltip || !message}\n message={message}\n >\n <button {...buttonProps} />\n </Tooltip>\n );\n },\n MonthGrid: (props) =>\n loadingData ? (\n <Skeleton\n count={6}\n height=\"12px\"\n width=\"252px\"\n style={{ marginBottom: \"var(--rs-space-5)\" }}\n highlightColor=\"var(--rs-color-background-base-primary)\"\n baseColor=\"var(--rs-color-background-base-primary-hover)\"\n />\n ) : (\n <table {...props} />\n ),\n }}\n classNames={{\n caption_label: styles.caption_label,\n button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n month_caption: styles.month_caption,\n months: styles.months,\n nav: styles.nav,\n day: styles.day,\n today: styles.today,\n outside: styles.outside,\n week: styles.week,\n weekdays: styles.week,\n weekday: styles.weekday,\n disabled: styles.disabled,\n selected: styles.selected,\n day_button: styles.day_button,\n range_middle: styles.range_middle,\n range_end: styles.range_end,\n range_start: styles.range_start,\n hidden: styles.hidden,\n dropdowns: styles.dropdowns,\n ...classNames,\n }}\n className={root({ className })}\n mode=\"single\"\n {...props}\n />\n );\n};\n"],"names":["cva","styles","useState","useEffect","_jsxs","Select","_jsx","Flex","ChevronUpIcon","ChevronDownIcon","DayPicker","ChevronLeftIcon","ChevronRightIcon","dateLib","Tooltip","Skeleton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/calendar.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAQ1B,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,cAAc,GACd,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/calendar.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAQ1B,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,cAAc,GACd,qBAAqB,CAAC;AAsExB,eAAO,MAAM,QAAQ,oHASlB,aAAa,4CAsEf,CAAC"}
|
|
@@ -26,7 +26,7 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
|
|
|
26
26
|
}
|
|
27
27
|
return (jsxRuntimeExports.jsxs(Select, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: styles.dropdown_trigger, iconProps: {
|
|
28
28
|
className: styles.dropdown_icon,
|
|
29
|
-
}, stopPropagation: true, children: jsxRuntimeExports.jsx(Select.Value, {}) }), jsxRuntimeExports.jsxs(Select.Content, { className: styles.dropdown_content, children: [jsxRuntimeExports.jsx(Select.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
|
|
29
|
+
}, stopPropagation: true, size: "small", variant: "text", children: jsxRuntimeExports.jsx(Select.Value, {}) }), jsxRuntimeExports.jsxs(Select.Content, { className: styles.dropdown_content, children: [jsxRuntimeExports.jsx(Select.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
|
|
30
30
|
className: styles.dropdown_item_text,
|
|
31
31
|
}, children: opt.label }, opt.value))) }), jsxRuntimeExports.jsx(Select.ScrollDownButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronDownIcon, {}) }) })] })] }));
|
|
32
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.js","sources":["../../../../v1/components/calendar/calendar.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { ChangeEvent, useEffect, useState } from 'react';\nimport {\n dateLib,\n DayPicker,\n DayPickerProps,\n DropdownProps,\n} from 'react-day-picker';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { Flex } from '../flex/flex';\nimport { Select } from '../select';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n showTooltip?: boolean;\n tooltipMessages?: { [key: string]: any };\n loadingData?: boolean;\n}\n\nexport type CalendarProps = DayPickerProps &\n OnDropdownOpen &\n CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\nfunction DropDown({\n options = [],\n value,\n onChange,\n onDropdownOpen,\n}: DropdownProps & OnDropdownOpen) {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open && onDropdownOpen) onDropdownOpen();\n }, [open]);\n\n function handleChange(value: string) {\n if (onChange) {\n onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n }\n }\n\n return (\n <Select\n value={value?.toString()}\n onValueChange={handleChange}\n open={open}\n onOpenChange={setOpen}\n >\n <Select.Trigger\n className={styles.dropdown_trigger}\n iconProps={{\n className: styles.dropdown_icon,\n }}\n stopPropagation={true}\n >\n <Select.Value />\n </Select.Trigger>\n <Select.Content className={styles.dropdown_content}>\n <Select.ScrollUpButton asChild>\n <Flex justify={'center'}>\n <ChevronUpIcon />\n </Flex>\n </Select.ScrollUpButton>\n <Select.Viewport>\n {options.map((opt) => (\n <Select.Item\n value={opt.value.toString()}\n key={opt.value}\n disabled={opt.disabled}\n textProps={{\n className: styles.dropdown_item_text,\n }}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Viewport>\n <Select.ScrollDownButton asChild>\n <Flex justify={'center'}>\n <ChevronDownIcon />\n </Flex>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n );\n}\n\nexport const Calendar = function ({\n className,\n classNames,\n showOutsideDays = true,\n onDropdownOpen,\n showTooltip = false,\n tooltipMessages = {},\n loadingData = false,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n components={{\n Chevron: (props) => {\n if (props.orientation === 'left') {\n return <ChevronLeftIcon {...props} />;\n }\n return <ChevronRightIcon {...props} />;\n },\n Dropdown: (props: DropdownProps) => (\n <DropDown {...props} onDropdownOpen={onDropdownOpen} />\n ),\n DayButton: (props) => {\n const { day, ...buttonProps } = props;\n const message =\n tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n return (\n <Tooltip\n side=\"top\"\n disabled={loadingData || !showTooltip || !message}\n message={message}\n >\n <button {...buttonProps} />\n </Tooltip>\n );\n },\n MonthGrid: (props) =>\n loadingData ? (\n <Skeleton\n count={6}\n height=\"12px\"\n width=\"252px\"\n style={{ marginBottom: \"var(--rs-space-5)\" }}\n highlightColor=\"var(--rs-color-background-base-primary)\"\n baseColor=\"var(--rs-color-background-base-primary-hover)\"\n />\n ) : (\n <table {...props} />\n ),\n }}\n classNames={{\n caption_label: styles.caption_label,\n button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n month_caption: styles.month_caption,\n months: styles.months,\n nav: styles.nav,\n day: styles.day,\n today: styles.today,\n outside: styles.outside,\n week: styles.week,\n weekdays: styles.week,\n weekday: styles.weekday,\n disabled: styles.disabled,\n selected: styles.selected,\n day_button: styles.day_button,\n range_middle: styles.range_middle,\n range_end: styles.range_end,\n range_start: styles.range_start,\n hidden: styles.hidden,\n dropdowns: styles.dropdowns,\n ...classNames,\n }}\n className={root({ className })}\n mode=\"single\"\n {...props}\n />\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;AAmCA,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AAEtC,SAAS,QAAQ,CAAC,EAChB,OAAO,GAAG,EAAE,EACZ,KAAK,EACL,QAAQ,EACR,cAAc,GACiB,EAAA;IAC/B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,MAAK;QACb,IAAI,IAAI,IAAI,cAAc;AAAE,YAAA,cAAc,EAAE,CAAC;AAC/C,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,YAAY,CAAC,KAAa,EAAA;QACjC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAoC,CAAC,CAAC;SACnE;KACF;AAED,IAAA,QACEA,sBAAA,CAAC,MAAM,EAAA,EACL,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EACxB,aAAa,EAAE,YAAY,EAC3B,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,OAAO,EAErB,QAAA,EAAA,CAAAC,qBAAA,CAAC,MAAM,CAAC,OAAO,EACb,EAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,SAAS,EAAE;oBACT,SAAS,EAAE,MAAM,CAAC,aAAa;AAChC,iBAAA,EACD,eAAe,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"calendar.js","sources":["../../../../v1/components/calendar/calendar.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { ChangeEvent, useEffect, useState } from 'react';\nimport {\n dateLib,\n DayPicker,\n DayPickerProps,\n DropdownProps,\n} from 'react-day-picker';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { Flex } from '../flex/flex';\nimport { Select } from '../select';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n showTooltip?: boolean;\n tooltipMessages?: { [key: string]: any };\n loadingData?: boolean;\n}\n\nexport type CalendarProps = DayPickerProps &\n OnDropdownOpen &\n CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\nfunction DropDown({\n options = [],\n value,\n onChange,\n onDropdownOpen,\n}: DropdownProps & OnDropdownOpen) {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open && onDropdownOpen) onDropdownOpen();\n }, [open]);\n\n function handleChange(value: string) {\n if (onChange) {\n onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n }\n }\n\n return (\n <Select\n value={value?.toString()}\n onValueChange={handleChange}\n open={open}\n onOpenChange={setOpen}\n >\n <Select.Trigger\n className={styles.dropdown_trigger}\n iconProps={{\n className: styles.dropdown_icon,\n }}\n stopPropagation={true}\n size=\"small\"\n variant=\"text\"\n >\n <Select.Value />\n </Select.Trigger>\n <Select.Content className={styles.dropdown_content}>\n <Select.ScrollUpButton asChild>\n <Flex justify={'center'}>\n <ChevronUpIcon />\n </Flex>\n </Select.ScrollUpButton>\n <Select.Viewport>\n {options.map((opt) => (\n <Select.Item\n value={opt.value.toString()}\n key={opt.value}\n disabled={opt.disabled}\n textProps={{\n className: styles.dropdown_item_text,\n }}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Viewport>\n <Select.ScrollDownButton asChild>\n <Flex justify={'center'}>\n <ChevronDownIcon />\n </Flex>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n );\n}\n\nexport const Calendar = function ({\n className,\n classNames,\n showOutsideDays = true,\n onDropdownOpen,\n showTooltip = false,\n tooltipMessages = {},\n loadingData = false,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n components={{\n Chevron: (props) => {\n if (props.orientation === 'left') {\n return <ChevronLeftIcon {...props} />;\n }\n return <ChevronRightIcon {...props} />;\n },\n Dropdown: (props: DropdownProps) => (\n <DropDown {...props} onDropdownOpen={onDropdownOpen} />\n ),\n DayButton: (props) => {\n const { day, ...buttonProps } = props;\n const message =\n tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n return (\n <Tooltip\n side=\"top\"\n disabled={loadingData || !showTooltip || !message}\n message={message}\n >\n <button {...buttonProps} />\n </Tooltip>\n );\n },\n MonthGrid: (props) =>\n loadingData ? (\n <Skeleton\n count={6}\n height=\"12px\"\n width=\"252px\"\n style={{ marginBottom: \"var(--rs-space-5)\" }}\n highlightColor=\"var(--rs-color-background-base-primary)\"\n baseColor=\"var(--rs-color-background-base-primary-hover)\"\n />\n ) : (\n <table {...props} />\n ),\n }}\n classNames={{\n caption_label: styles.caption_label,\n button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n month_caption: styles.month_caption,\n months: styles.months,\n nav: styles.nav,\n day: styles.day,\n today: styles.today,\n outside: styles.outside,\n week: styles.week,\n weekdays: styles.week,\n weekday: styles.weekday,\n disabled: styles.disabled,\n selected: styles.selected,\n day_button: styles.day_button,\n range_middle: styles.range_middle,\n range_end: styles.range_end,\n range_start: styles.range_start,\n hidden: styles.hidden,\n dropdowns: styles.dropdowns,\n ...classNames,\n }}\n className={root({ className })}\n mode=\"single\"\n {...props}\n />\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -17,8 +17,13 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
|
|
|
17
17
|
const [showCalendar, setShowCalendar] = React.useState(false);
|
|
18
18
|
const [currentRangeField, setCurrentRangeField] = React.useState("from");
|
|
19
19
|
const [selectedRange, setSelectedRange] = React.useState(value);
|
|
20
|
-
const
|
|
21
|
-
const
|
|
20
|
+
const prevSelectedRangeRef = React.useRef(selectedRange);
|
|
21
|
+
const startDate = selectedRange.from
|
|
22
|
+
? dayjs_min.default(selectedRange.from).format(dateFormat)
|
|
23
|
+
: "";
|
|
24
|
+
const endDate = selectedRange.to
|
|
25
|
+
? dayjs_min.default(selectedRange.to).format(dateFormat)
|
|
26
|
+
: "";
|
|
22
27
|
// 1st click will select the start date.
|
|
23
28
|
// 2nd click will select the end date.
|
|
24
29
|
// 3rd click will select the start date again.
|
|
@@ -48,15 +53,25 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
|
|
|
48
53
|
// Return the range with +1 day for the end date in the callback
|
|
49
54
|
const callbackRange = {
|
|
50
55
|
from: newRange.from,
|
|
51
|
-
to: newRange.to ? dayjs_min.default(newRange.to).add(1,
|
|
56
|
+
to: newRange.to ? dayjs_min.default(newRange.to).add(1, "day").toDate() : undefined,
|
|
52
57
|
};
|
|
53
58
|
onSelect(callbackRange);
|
|
54
59
|
};
|
|
55
60
|
function onOpenChange(open) {
|
|
56
|
-
|
|
61
|
+
const currOpen = Boolean(open);
|
|
62
|
+
setShowCalendar(currOpen);
|
|
63
|
+
// Reset selected range if calendar is closed and start or end date is empty
|
|
64
|
+
if (!currOpen && (!startDate.length || !endDate.length)) {
|
|
65
|
+
setSelectedRange(prevSelectedRangeRef.current);
|
|
66
|
+
onSelect(prevSelectedRangeRef.current);
|
|
67
|
+
}
|
|
68
|
+
// Update previous selected range reference when both start and end dates are selected
|
|
69
|
+
if (!currOpen && startDate.length && endDate.length) {
|
|
70
|
+
prevSelectedRangeRef.current = selectedRange;
|
|
71
|
+
}
|
|
57
72
|
}
|
|
58
|
-
const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size:
|
|
59
|
-
const trigger = typeof children ===
|
|
73
|
+
const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: "small", ...(inputFieldsProps.startDate ?? {}), value: startDate, trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, readOnly: true }), jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: "small", ...(inputFieldsProps.endDate ?? {}), value: endDate, trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, readOnly: true })] }));
|
|
74
|
+
const trigger = typeof children === "function"
|
|
60
75
|
? children({ startDate, endDate })
|
|
61
76
|
: children || defaultTrigger;
|
|
62
77
|
return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover.Content, { side: side, className: calendar_module.default.calendarPopover, children: [jsxRuntime.jsxRuntimeExports.jsx(calendar.Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, mode: "range", selected: selectedRange, onSelect: handleSelect }), footer && (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: "center", justify: "center", className: calendar_module.default.calendarFooter, children: footer }))] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps
|
|
1
|
+
{"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?:\n | React.ReactNode\n | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n side = \"top\",\n dateFormat = \"DD/MM/YYYY\",\n inputFieldsProps = {},\n calendarProps,\n onSelect = () => {},\n value = {\n to: new Date(),\n from: new Date(),\n },\n pickerGroupClassName,\n children,\n showCalendarIcon = true,\n footer,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] =\n useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const prevSelectedRangeRef = useRef(selectedRange);\n\n const startDate = selectedRange.from\n ? dayjs(selectedRange.from).format(dateFormat)\n : \"\";\n const endDate = selectedRange.to\n ? dayjs(selectedRange.to).format(dateFormat)\n : \"\";\n\n // 1st click will select the start date.\n // 2nd click will select the end date.\n // 3rd click will select the start date again.\n const handleSelect = (range: DateRange, selectedDay: Date) => {\n // TODO: Remove custom logic and reuse the default logic from react-day-picker\n let newRange: DateRange;\n\n if (currentRangeField === \"from\") {\n // First click - set from date and prepare for to date selection\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n } else {\n // Second click - setting to date\n const from = selectedRange.from;\n\n if (dayjs(selectedDay).isBefore(dayjs(from))) {\n // If selected date is before current from date, start new range\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n } else {\n // Set the to date\n newRange = { from, to: selectedDay };\n setCurrentRangeField(\"from\");\n }\n }\n\n setSelectedRange(newRange);\n // Return the range with +1 day for the end date in the callback\n const callbackRange = {\n from: newRange.from,\n to: newRange.to ? dayjs(newRange.to).add(1, \"day\").toDate() : undefined,\n };\n onSelect(callbackRange);\n };\n\n function onOpenChange(open?: boolean) {\n const currOpen = Boolean(open);\n\n setShowCalendar(currOpen);\n\n // Reset selected range if calendar is closed and start or end date is empty\n if (!currOpen && (!startDate.length || !endDate.length)) {\n setSelectedRange(prevSelectedRangeRef.current);\n onSelect(prevSelectedRangeRef.current);\n }\n\n // Update previous selected range reference when both start and end dates are selected\n if (!currOpen && startDate.length && endDate.length) {\n prevSelectedRangeRef.current = selectedRange;\n }\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <InputField\n size=\"small\"\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n\n <InputField\n size=\"small\"\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n </Flex>\n );\n\n const trigger =\n typeof children === \"function\"\n ? children({ startDate, endDate })\n : children || defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n mode=\"range\"\n selected={selectedRange}\n onSelect={handleSelect}\n />\n {footer && (\n <Flex\n align=\"center\"\n justify=\"center\"\n className={styles.calendarFooter}\n >\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["useState","useRef","dayjs","_jsxs","Flex","_jsx","InputField","CalendarIcon","Popover","styles","Calendar"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,GACP,EAAE,gBAAgB,2CAsHlB"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
2
|
import { CalendarIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
|
|
3
3
|
import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
|
|
4
|
-
import { useState } from 'react';
|
|
4
|
+
import { useState, useRef } from 'react';
|
|
5
5
|
import { Flex } from '../flex/flex.js';
|
|
6
6
|
import { Popover } from '../popover/popover.js';
|
|
7
7
|
import { Calendar } from './calendar.js';
|
|
@@ -15,8 +15,13 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
|
|
|
15
15
|
const [showCalendar, setShowCalendar] = useState(false);
|
|
16
16
|
const [currentRangeField, setCurrentRangeField] = useState("from");
|
|
17
17
|
const [selectedRange, setSelectedRange] = useState(value);
|
|
18
|
-
const
|
|
19
|
-
const
|
|
18
|
+
const prevSelectedRangeRef = useRef(selectedRange);
|
|
19
|
+
const startDate = selectedRange.from
|
|
20
|
+
? dayjs(selectedRange.from).format(dateFormat)
|
|
21
|
+
: "";
|
|
22
|
+
const endDate = selectedRange.to
|
|
23
|
+
? dayjs(selectedRange.to).format(dateFormat)
|
|
24
|
+
: "";
|
|
20
25
|
// 1st click will select the start date.
|
|
21
26
|
// 2nd click will select the end date.
|
|
22
27
|
// 3rd click will select the start date again.
|
|
@@ -46,15 +51,25 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
|
|
|
46
51
|
// Return the range with +1 day for the end date in the callback
|
|
47
52
|
const callbackRange = {
|
|
48
53
|
from: newRange.from,
|
|
49
|
-
to: newRange.to ? dayjs(newRange.to).add(1,
|
|
54
|
+
to: newRange.to ? dayjs(newRange.to).add(1, "day").toDate() : undefined,
|
|
50
55
|
};
|
|
51
56
|
onSelect(callbackRange);
|
|
52
57
|
};
|
|
53
58
|
function onOpenChange(open) {
|
|
54
|
-
|
|
59
|
+
const currOpen = Boolean(open);
|
|
60
|
+
setShowCalendar(currOpen);
|
|
61
|
+
// Reset selected range if calendar is closed and start or end date is empty
|
|
62
|
+
if (!currOpen && (!startDate.length || !endDate.length)) {
|
|
63
|
+
setSelectedRange(prevSelectedRangeRef.current);
|
|
64
|
+
onSelect(prevSelectedRangeRef.current);
|
|
65
|
+
}
|
|
66
|
+
// Update previous selected range reference when both start and end dates are selected
|
|
67
|
+
if (!currOpen && startDate.length && endDate.length) {
|
|
68
|
+
prevSelectedRangeRef.current = selectedRange;
|
|
69
|
+
}
|
|
55
70
|
}
|
|
56
|
-
const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size:
|
|
57
|
-
const trigger = typeof children ===
|
|
71
|
+
const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: "small", ...(inputFieldsProps.startDate ?? {}), value: startDate, trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: "small", ...(inputFieldsProps.endDate ?? {}), value: endDate, trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, readOnly: true })] }));
|
|
72
|
+
const trigger = typeof children === "function"
|
|
58
73
|
? children({ startDate, endDate })
|
|
59
74
|
: children || defaultTrigger;
|
|
60
75
|
return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.jsxs(Popover.Content, { side: side, className: styles.calendarPopover, children: [jsxRuntimeExports.jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, mode: "range", selected: selectedRange, onSelect: handleSelect }), footer && (jsxRuntimeExports.jsx(Flex, { align: "center", justify: "center", className: styles.calendarFooter, children: footer }))] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps
|
|
1
|
+
{"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?:\n | React.ReactNode\n | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n side = \"top\",\n dateFormat = \"DD/MM/YYYY\",\n inputFieldsProps = {},\n calendarProps,\n onSelect = () => {},\n value = {\n to: new Date(),\n from: new Date(),\n },\n pickerGroupClassName,\n children,\n showCalendarIcon = true,\n footer,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] =\n useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const prevSelectedRangeRef = useRef(selectedRange);\n\n const startDate = selectedRange.from\n ? dayjs(selectedRange.from).format(dateFormat)\n : \"\";\n const endDate = selectedRange.to\n ? dayjs(selectedRange.to).format(dateFormat)\n : \"\";\n\n // 1st click will select the start date.\n // 2nd click will select the end date.\n // 3rd click will select the start date again.\n const handleSelect = (range: DateRange, selectedDay: Date) => {\n // TODO: Remove custom logic and reuse the default logic from react-day-picker\n let newRange: DateRange;\n\n if (currentRangeField === \"from\") {\n // First click - set from date and prepare for to date selection\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n } else {\n // Second click - setting to date\n const from = selectedRange.from;\n\n if (dayjs(selectedDay).isBefore(dayjs(from))) {\n // If selected date is before current from date, start new range\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n } else {\n // Set the to date\n newRange = { from, to: selectedDay };\n setCurrentRangeField(\"from\");\n }\n }\n\n setSelectedRange(newRange);\n // Return the range with +1 day for the end date in the callback\n const callbackRange = {\n from: newRange.from,\n to: newRange.to ? dayjs(newRange.to).add(1, \"day\").toDate() : undefined,\n };\n onSelect(callbackRange);\n };\n\n function onOpenChange(open?: boolean) {\n const currOpen = Boolean(open);\n\n setShowCalendar(currOpen);\n\n // Reset selected range if calendar is closed and start or end date is empty\n if (!currOpen && (!startDate.length || !endDate.length)) {\n setSelectedRange(prevSelectedRangeRef.current);\n onSelect(prevSelectedRangeRef.current);\n }\n\n // Update previous selected range reference when both start and end dates are selected\n if (!currOpen && startDate.length && endDate.length) {\n prevSelectedRangeRef.current = selectedRange;\n }\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <InputField\n size=\"small\"\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n\n <InputField\n size=\"small\"\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n </Flex>\n );\n\n const trigger =\n typeof children === \"function\"\n ? children({ startDate, endDate })\n : children || defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n mode=\"range\"\n selected={selectedRange}\n onSelect={handleSelect}\n />\n {footer && (\n <Flex\n align=\"center\"\n justify=\"center\"\n className={styles.calendarFooter}\n >\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|