@raystack/apsara 0.40.0 → 0.41.0
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.module.css.cjs +1 -1
- package/dist/v1/components/calendar/calendar.module.css.js +1 -1
- package/dist/v1/components/calendar/range-picker.cjs +25 -7
- package/dist/v1/components/calendar/range-picker.cjs.map +1 -1
- package/dist/v1/components/calendar/range-picker.d.ts +2 -1
- package/dist/v1/components/calendar/range-picker.d.ts.map +1 -1
- package/dist/v1/components/calendar/range-picker.js +25 -7
- package/dist/v1/components/calendar/range-picker.js.map +1 -1
- package/dist/v1/components/dialog/dialog.cjs +1 -1
- package/dist/v1/components/dialog/dialog.cjs.map +1 -1
- package/dist/v1/components/dialog/dialog.js +1 -1
- package/dist/v1/components/dialog/dialog.js.map +1 -1
- package/dist/v1/components/sidebar/sidebar.cjs +12 -7
- package/dist/v1/components/sidebar/sidebar.cjs.map +1 -1
- package/dist/v1/components/sidebar/sidebar.d.ts +1 -0
- package/dist/v1/components/sidebar/sidebar.d.ts.map +1 -1
- package/dist/v1/components/sidebar/sidebar.js +13 -8
- package/dist/v1/components/sidebar/sidebar.js.map +1 -1
- package/dist/v1/components/text-area/text-area.cjs +2 -2
- package/dist/v1/components/text-area/text-area.cjs.map +1 -1
- package/dist/v1/components/text-area/text-area.d.ts.map +1 -1
- package/dist/v1/components/text-area/text-area.js +2 -2
- package/dist/v1/components/text-area/text-area.js.map +1 -1
- package/dist/v1/style.css +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"calendarRoot":"calendar-module_calendarRoot__OZGQR","caption_label":"calendar-module_caption_label__8K7ZD","dropdowns":"calendar-module_dropdowns__0Uj8G","dropdown_trigger":"calendar-module_dropdown_trigger__HJ6Tm","dropdown_item_text":"calendar-module_dropdown_item_text__vUAKC","nav_button":"calendar-module_nav_button__tZDLw","nav_button_previous":"calendar-module_nav_button_previous__NVCfJ","nav_button_next":"calendar-module_nav_button_next__l1U08","months":"calendar-module_months__bBetg","nav":"calendar-module_nav__QMOu0","month_caption":"calendar-module_month_caption__pYPFz","day":"calendar-module_day__8eOAz","disabled":"calendar-module_disabled__ipw4l","outside":"calendar-module_outside__dbHbx","selected":"calendar-module_selected__TlwjL","range_middle":"calendar-module_range_middle__vn4Fr","range_start":"calendar-module_range_start__ErGPG","range_end":"calendar-module_range_end__K6oe-","week":"calendar-module_week__te1nD","day_button":"calendar-module_day_button__F4ayk","weekday":"calendar-module_weekday__H63mo","hidden":"calendar-module_hidden__5XuPD","calendarPopover":"calendar-module_calendarPopover__ykbVn","dropdown_icon":"calendar-module_dropdown_icon__J5WPO","dropdown_content":"calendar-module_dropdown_content__6KXfz","today":"calendar-module_today__HlNqe","datePickerInput":"calendar-module_datePickerInput__eVoid"};
|
|
5
|
+
var styles = {"calendarRoot":"calendar-module_calendarRoot__OZGQR","caption_label":"calendar-module_caption_label__8K7ZD","dropdowns":"calendar-module_dropdowns__0Uj8G","dropdown_trigger":"calendar-module_dropdown_trigger__HJ6Tm","dropdown_item_text":"calendar-module_dropdown_item_text__vUAKC","nav_button":"calendar-module_nav_button__tZDLw","nav_button_previous":"calendar-module_nav_button_previous__NVCfJ","nav_button_next":"calendar-module_nav_button_next__l1U08","months":"calendar-module_months__bBetg","nav":"calendar-module_nav__QMOu0","month_caption":"calendar-module_month_caption__pYPFz","day":"calendar-module_day__8eOAz","disabled":"calendar-module_disabled__ipw4l","outside":"calendar-module_outside__dbHbx","selected":"calendar-module_selected__TlwjL","range_middle":"calendar-module_range_middle__vn4Fr","range_start":"calendar-module_range_start__ErGPG","range_end":"calendar-module_range_end__K6oe-","week":"calendar-module_week__te1nD","day_button":"calendar-module_day_button__F4ayk","weekday":"calendar-module_weekday__H63mo","hidden":"calendar-module_hidden__5XuPD","calendarPopover":"calendar-module_calendarPopover__ykbVn","dropdown_icon":"calendar-module_dropdown_icon__J5WPO","dropdown_content":"calendar-module_dropdown_content__6KXfz","today":"calendar-module_today__HlNqe","datePickerInput":"calendar-module_datePickerInput__eVoid","calendarFooter":"calendar-module_calendarFooter__kJw5W"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=calendar.module.css.cjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var styles = {"calendarRoot":"calendar-module_calendarRoot__OZGQR","caption_label":"calendar-module_caption_label__8K7ZD","dropdowns":"calendar-module_dropdowns__0Uj8G","dropdown_trigger":"calendar-module_dropdown_trigger__HJ6Tm","dropdown_item_text":"calendar-module_dropdown_item_text__vUAKC","nav_button":"calendar-module_nav_button__tZDLw","nav_button_previous":"calendar-module_nav_button_previous__NVCfJ","nav_button_next":"calendar-module_nav_button_next__l1U08","months":"calendar-module_months__bBetg","nav":"calendar-module_nav__QMOu0","month_caption":"calendar-module_month_caption__pYPFz","day":"calendar-module_day__8eOAz","disabled":"calendar-module_disabled__ipw4l","outside":"calendar-module_outside__dbHbx","selected":"calendar-module_selected__TlwjL","range_middle":"calendar-module_range_middle__vn4Fr","range_start":"calendar-module_range_start__ErGPG","range_end":"calendar-module_range_end__K6oe-","week":"calendar-module_week__te1nD","day_button":"calendar-module_day_button__F4ayk","weekday":"calendar-module_weekday__H63mo","hidden":"calendar-module_hidden__5XuPD","calendarPopover":"calendar-module_calendarPopover__ykbVn","dropdown_icon":"calendar-module_dropdown_icon__J5WPO","dropdown_content":"calendar-module_dropdown_content__6KXfz","today":"calendar-module_today__HlNqe","datePickerInput":"calendar-module_datePickerInput__eVoid"};
|
|
1
|
+
var styles = {"calendarRoot":"calendar-module_calendarRoot__OZGQR","caption_label":"calendar-module_caption_label__8K7ZD","dropdowns":"calendar-module_dropdowns__0Uj8G","dropdown_trigger":"calendar-module_dropdown_trigger__HJ6Tm","dropdown_item_text":"calendar-module_dropdown_item_text__vUAKC","nav_button":"calendar-module_nav_button__tZDLw","nav_button_previous":"calendar-module_nav_button_previous__NVCfJ","nav_button_next":"calendar-module_nav_button_next__l1U08","months":"calendar-module_months__bBetg","nav":"calendar-module_nav__QMOu0","month_caption":"calendar-module_month_caption__pYPFz","day":"calendar-module_day__8eOAz","disabled":"calendar-module_disabled__ipw4l","outside":"calendar-module_outside__dbHbx","selected":"calendar-module_selected__TlwjL","range_middle":"calendar-module_range_middle__vn4Fr","range_start":"calendar-module_range_start__ErGPG","range_end":"calendar-module_range_end__K6oe-","week":"calendar-module_week__te1nD","day_button":"calendar-module_day_button__F4ayk","weekday":"calendar-module_weekday__H63mo","hidden":"calendar-module_hidden__5XuPD","calendarPopover":"calendar-module_calendarPopover__ykbVn","dropdown_icon":"calendar-module_dropdown_icon__J5WPO","dropdown_content":"calendar-module_dropdown_content__6KXfz","today":"calendar-module_today__HlNqe","datePickerInput":"calendar-module_datePickerInput__eVoid","calendarFooter":"calendar-module_calendarFooter__kJw5W"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
4
4
|
//# sourceMappingURL=calendar.module.css.js.map
|
|
@@ -13,7 +13,7 @@ var calendar_module = require('./calendar.module.css.cjs');
|
|
|
13
13
|
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, placeholders, calendarProps, onSelect = () => { }, value = {
|
|
14
14
|
to: new Date(),
|
|
15
15
|
from: new Date(),
|
|
16
|
-
}, pickerGroupClassName, children, showCalendarIcon = true, }) {
|
|
16
|
+
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
|
|
17
17
|
const [showCalendar, setShowCalendar] = React.useState(false);
|
|
18
18
|
const [currentRangeField, setCurrentRangeField] = React.useState("from");
|
|
19
19
|
const [selectedRange, setSelectedRange] = React.useState(value);
|
|
@@ -25,18 +25,36 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps,
|
|
|
25
25
|
const handleSelect = (range, selectedDay) => {
|
|
26
26
|
const from = selectedRange?.from || range?.from;
|
|
27
27
|
let newRange;
|
|
28
|
-
if (currentRangeField === "to"
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
if (currentRangeField === "to") {
|
|
29
|
+
if (dayjs_min.default(selectedDay).isSame(dayjs_min.default(from), 'day')) {
|
|
30
|
+
// If same date is clicked twice, set end date to the same date for UI
|
|
31
|
+
newRange = {
|
|
32
|
+
from,
|
|
33
|
+
to: selectedDay
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
else if (dayjs_min.default(selectedDay).isAfter(dayjs_min.default(from))) {
|
|
37
|
+
// If different date is selected and it's after start date
|
|
38
|
+
newRange = { from, to: selectedDay };
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
// If selected date is before start date, reset and select start day
|
|
42
|
+
newRange = { from: selectedDay };
|
|
43
|
+
}
|
|
31
44
|
setCurrentRangeField("from");
|
|
32
45
|
}
|
|
33
46
|
else {
|
|
34
|
-
//
|
|
47
|
+
// Reset the range and select start day
|
|
35
48
|
newRange = { from: selectedDay };
|
|
36
49
|
setCurrentRangeField("to");
|
|
37
50
|
}
|
|
38
51
|
setSelectedRange(newRange);
|
|
39
|
-
|
|
52
|
+
// Return the range with +1 day for the end date in the callback
|
|
53
|
+
const callbackRange = {
|
|
54
|
+
from: newRange.from,
|
|
55
|
+
to: newRange.to ? dayjs_min.default(newRange.to).add(1, 'day').toDate() : undefined
|
|
56
|
+
};
|
|
57
|
+
onSelect(callbackRange);
|
|
40
58
|
};
|
|
41
59
|
function onOpenChange(open) {
|
|
42
60
|
setShowCalendar(Boolean(open));
|
|
@@ -45,7 +63,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps,
|
|
|
45
63
|
const trigger = typeof children === 'function'
|
|
46
64
|
? children({ startDate, endDate })
|
|
47
65
|
: children || defaultTrigger;
|
|
48
|
-
return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsxRuntimeExports.
|
|
66
|
+
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 }))] })] }));
|
|
49
67
|
}
|
|
50
68
|
|
|
51
69
|
exports.RangePicker = RangePicker;
|
|
@@ -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 { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n textFieldProps?: TextfieldProps;\n placeholders?: { startDate?: string; endDate?: string };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?: React.ReactNode | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n side = \"top\",\n dateFormat = \"DD/MM/YYYY\",\n textFieldProps,\n placeholders,\n calendarProps,\n onSelect = () => {},\n value = {\n to: new Date(),\n from: new Date(),\n },\n pickerGroupClassName,\n children,\n showCalendarIcon = true,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] = useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';\n const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';\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 const from = selectedRange?.from || range?.from;\n let newRange: DateRange;\n \n if (currentRangeField === \"to\"
|
|
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 { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n textFieldProps?: TextfieldProps;\n placeholders?: { startDate?: string; endDate?: string };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?: React.ReactNode | ((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 textFieldProps,\n placeholders,\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] = useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';\n const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';\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 const from = selectedRange?.from || range?.from;\n let newRange: DateRange;\n \n if (currentRangeField === \"to\") {\n if (dayjs(selectedDay).isSame(dayjs(from), 'day')) {\n // If same date is clicked twice, set end date to the same date for UI\n newRange = {\n from,\n to: selectedDay\n };\n } else if (dayjs(selectedDay).isAfter(dayjs(from))) {\n // If different date is selected and it's after start date\n newRange = { from, to: selectedDay };\n } else {\n // If selected date is before start date, reset and select start day\n newRange = { from: selectedDay };\n }\n setCurrentRangeField(\"from\");\n } else {\n // Reset the range and select start day\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n }\n \n setSelectedRange(newRange);\n \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 setShowCalendar(Boolean(open));\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <TextField\n value={startDate}\n trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n readOnly\n {...textFieldProps}\n placeholder={placeholders?.startDate || \"Select start date\"}\n />\n <TextField\n value={endDate}\n trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n readOnly\n {...textFieldProps}\n placeholder={placeholders?.endDate || \"Select end date\"}\n />\n </Flex>\n );\n\n const trigger = typeof children === 'function' \n ? children({ startDate, endDate }) \n : children || defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>\n {trigger}\n </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 align=\"center\" justify=\"center\" className={styles.calendarFooter}>\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["useState","dayjs","_jsxs","Flex","_jsx","TextField","CalendarIcon","styles","Popover","Calendar"],"mappings":"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"}
|
|
@@ -17,7 +17,8 @@ interface RangePickerProps {
|
|
|
17
17
|
endDate: string;
|
|
18
18
|
}) => React.ReactNode);
|
|
19
19
|
showCalendarIcon?: boolean;
|
|
20
|
+
footer?: React.ReactNode;
|
|
20
21
|
}
|
|
21
|
-
export declare function RangePicker({ side, dateFormat, textFieldProps, placeholders, calendarProps, onSelect, value, pickerGroupClassName, children, showCalendarIcon, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function RangePicker({ side, dateFormat, textFieldProps, placeholders, calendarProps, onSelect, value, pickerGroupClassName, children, showCalendarIcon, footer, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
22
23
|
export {};
|
|
23
24
|
//# sourceMappingURL=range-picker.d.ts.map
|
|
@@ -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;AAK5E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,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,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClG,gBAAgB,CAAC,EAAE,OAAO,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;AAK5E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,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,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClG,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,QAAmB,EACnB,KAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,GACP,EAAE,gBAAgB,2CAmGlB"}
|
|
@@ -11,7 +11,7 @@ import styles from './calendar.module.css.js';
|
|
|
11
11
|
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps, placeholders, calendarProps, onSelect = () => { }, value = {
|
|
12
12
|
to: new Date(),
|
|
13
13
|
from: new Date(),
|
|
14
|
-
}, pickerGroupClassName, children, showCalendarIcon = true, }) {
|
|
14
|
+
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
|
|
15
15
|
const [showCalendar, setShowCalendar] = useState(false);
|
|
16
16
|
const [currentRangeField, setCurrentRangeField] = useState("from");
|
|
17
17
|
const [selectedRange, setSelectedRange] = useState(value);
|
|
@@ -23,18 +23,36 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps,
|
|
|
23
23
|
const handleSelect = (range, selectedDay) => {
|
|
24
24
|
const from = selectedRange?.from || range?.from;
|
|
25
25
|
let newRange;
|
|
26
|
-
if (currentRangeField === "to"
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
if (currentRangeField === "to") {
|
|
27
|
+
if (dayjs(selectedDay).isSame(dayjs(from), 'day')) {
|
|
28
|
+
// If same date is clicked twice, set end date to the same date for UI
|
|
29
|
+
newRange = {
|
|
30
|
+
from,
|
|
31
|
+
to: selectedDay
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
else if (dayjs(selectedDay).isAfter(dayjs(from))) {
|
|
35
|
+
// If different date is selected and it's after start date
|
|
36
|
+
newRange = { from, to: selectedDay };
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
// If selected date is before start date, reset and select start day
|
|
40
|
+
newRange = { from: selectedDay };
|
|
41
|
+
}
|
|
29
42
|
setCurrentRangeField("from");
|
|
30
43
|
}
|
|
31
44
|
else {
|
|
32
|
-
//
|
|
45
|
+
// Reset the range and select start day
|
|
33
46
|
newRange = { from: selectedDay };
|
|
34
47
|
setCurrentRangeField("to");
|
|
35
48
|
}
|
|
36
49
|
setSelectedRange(newRange);
|
|
37
|
-
|
|
50
|
+
// Return the range with +1 day for the end date in the callback
|
|
51
|
+
const callbackRange = {
|
|
52
|
+
from: newRange.from,
|
|
53
|
+
to: newRange.to ? dayjs(newRange.to).add(1, 'day').toDate() : undefined
|
|
54
|
+
};
|
|
55
|
+
onSelect(callbackRange);
|
|
38
56
|
};
|
|
39
57
|
function onOpenChange(open) {
|
|
40
58
|
setShowCalendar(Boolean(open));
|
|
@@ -43,7 +61,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldProps,
|
|
|
43
61
|
const trigger = typeof children === 'function'
|
|
44
62
|
? children({ startDate, endDate })
|
|
45
63
|
: children || defaultTrigger;
|
|
46
|
-
return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.
|
|
64
|
+
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 }))] })] }));
|
|
47
65
|
}
|
|
48
66
|
|
|
49
67
|
export { RangePicker };
|
|
@@ -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 { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n textFieldProps?: TextfieldProps;\n placeholders?: { startDate?: string; endDate?: string };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?: React.ReactNode | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n side = \"top\",\n dateFormat = \"DD/MM/YYYY\",\n textFieldProps,\n placeholders,\n calendarProps,\n onSelect = () => {},\n value = {\n to: new Date(),\n from: new Date(),\n },\n pickerGroupClassName,\n children,\n showCalendarIcon = true,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] = useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';\n const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';\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 const from = selectedRange?.from || range?.from;\n let newRange: DateRange;\n \n if (currentRangeField === \"to\"
|
|
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 { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ninterface RangePickerProps {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n dateFormat?: string;\n textFieldProps?: TextfieldProps;\n placeholders?: { startDate?: string; endDate?: string };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?: React.ReactNode | ((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 textFieldProps,\n placeholders,\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] = useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n\n const startDate = selectedRange.from ? dayjs(selectedRange.from).format(dateFormat) : '';\n const endDate = selectedRange.to ? dayjs(selectedRange.to).format(dateFormat) : '';\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 const from = selectedRange?.from || range?.from;\n let newRange: DateRange;\n \n if (currentRangeField === \"to\") {\n if (dayjs(selectedDay).isSame(dayjs(from), 'day')) {\n // If same date is clicked twice, set end date to the same date for UI\n newRange = {\n from,\n to: selectedDay\n };\n } else if (dayjs(selectedDay).isAfter(dayjs(from))) {\n // If different date is selected and it's after start date\n newRange = { from, to: selectedDay };\n } else {\n // If selected date is before start date, reset and select start day\n newRange = { from: selectedDay };\n }\n setCurrentRangeField(\"from\");\n } else {\n // Reset the range and select start day\n newRange = { from: selectedDay };\n setCurrentRangeField(\"to\");\n }\n \n setSelectedRange(newRange);\n \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 setShowCalendar(Boolean(open));\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <TextField\n value={startDate}\n trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n readOnly\n {...textFieldProps}\n placeholder={placeholders?.startDate || \"Select start date\"}\n />\n <TextField\n value={endDate}\n trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n readOnly\n {...textFieldProps}\n placeholder={placeholders?.endDate || \"Select end date\"}\n />\n </Flex>\n );\n\n const trigger = typeof children === 'function' \n ? children({ startDate, endDate }) \n : children || defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>\n {trigger}\n </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 align=\"center\" justify=\"center\" className={styles.calendarFooter}>\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const DialogHeader = ({ children, className, }) => (jsxRuntime.jsxRuntimeExports
|
|
|
16
16
|
const DialogFooter = ({ children, className, }) => (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 5, justify: "end", className: clsx.clsx(dialog_module.default.footer, className), children: children }));
|
|
17
17
|
const DialogBody = ({ children, className, }) => (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { direction: "column", gap: 3, className: clsx.clsx(dialog_module.default.body, className), children: children }));
|
|
18
18
|
function CloseButton({ className, ...props }) {
|
|
19
|
-
return (jsxRuntime.jsxRuntimeExports.
|
|
19
|
+
return (jsxRuntime.jsxRuntimeExports.jsx(index.Close, { className: clsx.clsx(dialog_module.default.close, className), "aria-label": "Close dialog", ...props, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, {}) }));
|
|
20
20
|
}
|
|
21
21
|
function DialogTitle({ children, className, ...props }) {
|
|
22
22
|
return (jsxRuntime.jsxRuntimeExports.jsx(index.Title, { ...props, role: "heading", "aria-level": 1, className: clsx.clsx(dialog_module.default.title, className), children: children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.cjs","sources":["../../../../v1/components/dialog/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n ComponentProps,\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef,\n} from \"react\";\nimport { Flex } from \"../flex\";\n\nimport styles from \"./dialog.module.css\";\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof dialogContent> {\n ariaLabel?: string;\n ariaDescription?: string;\n overlayBlur?: boolean;\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n width?: string | number;\n}\n\nconst DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n ariaLabel,\n ariaDescription,\n overlayBlur = false,\n overlayClassName,\n overlayStyle,\n width,\n ...props\n },\n ref\n ) => (\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay\n className={clsx(\n styles.dialogOverlay,\n overlayClassName,\n overlayBlur && styles.overlayBlur\n )}\n style={overlayStyle}\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n <DialogPrimitive.Content\n ref={ref}\n className={dialogContent({ className })}\n style={{ width, ...props.style }}\n aria-label={ariaLabel}\n aria-describedby={ariaDescription ? \"dialog-description\" : undefined}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n )\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex\n justify={\"between\"}\n align={\"center\"}\n className={clsx(styles.header, className)}\n >\n {children}\n </Flex>\n);\n\nconst DialogFooter = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex gap={5} justify=\"end\" className={clsx(styles.footer, className)}>\n {children}\n </Flex>\n);\n\nconst DialogBody = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex direction=\"column\" gap={3} className={clsx(styles.body, className)}>\n {children}\n </Flex>\n);\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({ className, ...props }: CloseButtonProps) {\n return (\n <DialogPrimitive.Close\n className={clsx(styles.close, className)}\n aria-label=\"Close dialog\"\n {...props}\n >\n <Cross1Icon
|
|
1
|
+
{"version":3,"file":"dialog.cjs","sources":["../../../../v1/components/dialog/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n ComponentProps,\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef,\n} from \"react\";\nimport { Flex } from \"../flex\";\n\nimport styles from \"./dialog.module.css\";\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof dialogContent> {\n ariaLabel?: string;\n ariaDescription?: string;\n overlayBlur?: boolean;\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n width?: string | number;\n}\n\nconst DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n ariaLabel,\n ariaDescription,\n overlayBlur = false,\n overlayClassName,\n overlayStyle,\n width,\n ...props\n },\n ref\n ) => (\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay\n className={clsx(\n styles.dialogOverlay,\n overlayClassName,\n overlayBlur && styles.overlayBlur\n )}\n style={overlayStyle}\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n <DialogPrimitive.Content\n ref={ref}\n className={dialogContent({ className })}\n style={{ width, ...props.style }}\n aria-label={ariaLabel}\n aria-describedby={ariaDescription ? \"dialog-description\" : undefined}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n )\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex\n justify={\"between\"}\n align={\"center\"}\n className={clsx(styles.header, className)}\n >\n {children}\n </Flex>\n);\n\nconst DialogFooter = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex gap={5} justify=\"end\" className={clsx(styles.footer, className)}>\n {children}\n </Flex>\n);\n\nconst DialogBody = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex direction=\"column\" gap={3} className={clsx(styles.body, className)}>\n {children}\n </Flex>\n);\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({ className, ...props }: CloseButtonProps) {\n return (\n <DialogPrimitive.Close\n className={clsx(styles.close, className)}\n aria-label=\"Close dialog\"\n {...props}\n >\n <Cross1Icon />\n </DialogPrimitive.Close>\n );\n}\n\ninterface DialogTitleProps\n extends ComponentProps<typeof DialogPrimitive.Title> {\n children: React.ReactNode;\n}\n\nfunction DialogTitle({ children, className, ...props }: DialogTitleProps) {\n return (\n <DialogPrimitive.Title\n {...props}\n role=\"heading\"\n aria-level={1}\n className={clsx(styles.title, className)}\n >\n {children}\n </DialogPrimitive.Title>\n );\n}\n\ninterface DialogDescriptionProps\n extends ComponentProps<typeof DialogPrimitive.Description> {\n children: React.ReactNode;\n className?: string;\n}\n\nfunction DialogDescription({\n children,\n className,\n ...props\n}: DialogDescriptionProps) {\n return (\n <DialogPrimitive.Description\n {...props}\n className={clsx(styles.description, className)}\n id=\"dialog-description\"\n role=\"document\"\n >\n {children}\n </DialogPrimitive.Description>\n );\n}\n\nexport const Dialog = Object.assign(DialogPrimitive.Root, {\n Trigger: DialogPrimitive.Trigger,\n Content: DialogContent,\n Header: DialogHeader,\n Footer: DialogFooter,\n Body: DialogBody,\n Close: DialogPrimitive.Close,\n CloseButton: CloseButton,\n Title: DialogTitle,\n Description: DialogDescription,\n});\n"],"names":["cva","styles","forwardRef","_jsxs","DialogPrimitive.Portal","_jsx","DialogPrimitive.Overlay","clsx","DialogPrimitive.Content","Flex","DialogPrimitive.Close","Cross1Icon","DialogPrimitive.Title","DialogPrimitive.Description","DialogPrimitive.Root","DialogPrimitive.Trigger"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ const DialogHeader = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex,
|
|
|
14
14
|
const DialogFooter = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex, { gap: 5, justify: "end", className: clsx(styles.footer, className), children: children }));
|
|
15
15
|
const DialogBody = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex, { direction: "column", gap: 3, className: clsx(styles.body, className), children: children }));
|
|
16
16
|
function CloseButton({ className, ...props }) {
|
|
17
|
-
return (jsxRuntimeExports.
|
|
17
|
+
return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$f39c2d165cd861fe, { className: clsx(styles.close, className), "aria-label": "Close dialog", ...props, children: jsxRuntimeExports.jsx(Cross1Icon, {}) }));
|
|
18
18
|
}
|
|
19
19
|
function DialogTitle({ children, className, ...props }) {
|
|
20
20
|
return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ...props, role: "heading", "aria-level": 1, className: clsx(styles.title, className), children: children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sources":["../../../../v1/components/dialog/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n ComponentProps,\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef,\n} from \"react\";\nimport { Flex } from \"../flex\";\n\nimport styles from \"./dialog.module.css\";\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof dialogContent> {\n ariaLabel?: string;\n ariaDescription?: string;\n overlayBlur?: boolean;\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n width?: string | number;\n}\n\nconst DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n ariaLabel,\n ariaDescription,\n overlayBlur = false,\n overlayClassName,\n overlayStyle,\n width,\n ...props\n },\n ref\n ) => (\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay\n className={clsx(\n styles.dialogOverlay,\n overlayClassName,\n overlayBlur && styles.overlayBlur\n )}\n style={overlayStyle}\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n <DialogPrimitive.Content\n ref={ref}\n className={dialogContent({ className })}\n style={{ width, ...props.style }}\n aria-label={ariaLabel}\n aria-describedby={ariaDescription ? \"dialog-description\" : undefined}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n )\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex\n justify={\"between\"}\n align={\"center\"}\n className={clsx(styles.header, className)}\n >\n {children}\n </Flex>\n);\n\nconst DialogFooter = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex gap={5} justify=\"end\" className={clsx(styles.footer, className)}>\n {children}\n </Flex>\n);\n\nconst DialogBody = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex direction=\"column\" gap={3} className={clsx(styles.body, className)}>\n {children}\n </Flex>\n);\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({ className, ...props }: CloseButtonProps) {\n return (\n <DialogPrimitive.Close\n className={clsx(styles.close, className)}\n aria-label=\"Close dialog\"\n {...props}\n >\n <Cross1Icon
|
|
1
|
+
{"version":3,"file":"dialog.js","sources":["../../../../v1/components/dialog/dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport {\n ComponentProps,\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef,\n} from \"react\";\nimport { Flex } from \"../flex\";\n\nimport styles from \"./dialog.module.css\";\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof dialogContent> {\n ariaLabel?: string;\n ariaDescription?: string;\n overlayBlur?: boolean;\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n width?: string | number;\n}\n\nconst DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n ariaLabel,\n ariaDescription,\n overlayBlur = false,\n overlayClassName,\n overlayStyle,\n width,\n ...props\n },\n ref\n ) => (\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay\n className={clsx(\n styles.dialogOverlay,\n overlayClassName,\n overlayBlur && styles.overlayBlur\n )}\n style={overlayStyle}\n aria-hidden=\"true\"\n role=\"presentation\"\n />\n <DialogPrimitive.Content\n ref={ref}\n className={dialogContent({ className })}\n style={{ width, ...props.style }}\n aria-label={ariaLabel}\n aria-describedby={ariaDescription ? \"dialog-description\" : undefined}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n )\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex\n justify={\"between\"}\n align={\"center\"}\n className={clsx(styles.header, className)}\n >\n {children}\n </Flex>\n);\n\nconst DialogFooter = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex gap={5} justify=\"end\" className={clsx(styles.footer, className)}>\n {children}\n </Flex>\n);\n\nconst DialogBody = ({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex direction=\"column\" gap={3} className={clsx(styles.body, className)}>\n {children}\n </Flex>\n);\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({ className, ...props }: CloseButtonProps) {\n return (\n <DialogPrimitive.Close\n className={clsx(styles.close, className)}\n aria-label=\"Close dialog\"\n {...props}\n >\n <Cross1Icon />\n </DialogPrimitive.Close>\n );\n}\n\ninterface DialogTitleProps\n extends ComponentProps<typeof DialogPrimitive.Title> {\n children: React.ReactNode;\n}\n\nfunction DialogTitle({ children, className, ...props }: DialogTitleProps) {\n return (\n <DialogPrimitive.Title\n {...props}\n role=\"heading\"\n aria-level={1}\n className={clsx(styles.title, className)}\n >\n {children}\n </DialogPrimitive.Title>\n );\n}\n\ninterface DialogDescriptionProps\n extends ComponentProps<typeof DialogPrimitive.Description> {\n children: React.ReactNode;\n className?: string;\n}\n\nfunction DialogDescription({\n children,\n className,\n ...props\n}: DialogDescriptionProps) {\n return (\n <DialogPrimitive.Description\n {...props}\n className={clsx(styles.description, className)}\n id=\"dialog-description\"\n role=\"document\"\n >\n {children}\n </DialogPrimitive.Description>\n );\n}\n\nexport const Dialog = Object.assign(DialogPrimitive.Root, {\n Trigger: DialogPrimitive.Trigger,\n Content: DialogContent,\n Header: DialogHeader,\n Footer: DialogFooter,\n Body: DialogBody,\n Close: DialogPrimitive.Close,\n CloseButton: CloseButton,\n Title: DialogTitle,\n Description: DialogDescription,\n});\n"],"names":["_jsxs","DialogPrimitive.Portal","_jsx","DialogPrimitive.Overlay","DialogPrimitive.Content","DialogPrimitive.Close","DialogPrimitive.Title","DialogPrimitive.Description","DialogPrimitive.Root","DialogPrimitive.Trigger"],"mappings":"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"}
|
|
@@ -8,13 +8,14 @@ var tooltip = require('../tooltip/tooltip.cjs');
|
|
|
8
8
|
var sidebar_module = require('./sidebar.module.css.cjs');
|
|
9
9
|
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
10
10
|
|
|
11
|
+
const SidebarContext = React.createContext({ isCollapsed: false });
|
|
11
12
|
const root = index$1.cva(sidebar_module.default.root);
|
|
12
|
-
const SidebarRoot = React.forwardRef(({ className, position = "left", open, onOpenChange, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx(tooltip.TooltipProvider, { children: jsxRuntime.jsxRuntimeExports.jsx(index.Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? "expanded" : "collapsed", open: open, onOpenChange: onOpenChange, "aria-label": "Navigation Sidebar", "aria-expanded": open, role: "navigation", ...props, asChild: true, children: jsxRuntime.jsxRuntimeExports.jsxs("aside", { children: [jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: open ? "Click to collapse" : "Click to expand", side: position === "left" ? "right" : "left", asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default.resizeHandle, onClick: () => onOpenChange?.(!open), role: "button", tabIndex: 0, "aria-label": open ? "Collapse sidebar" : "Expand sidebar", onKeyDown: (e) => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
const SidebarRoot = React.forwardRef(({ className, position = "left", open, onOpenChange, hideCollapsedItemTooltip, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx(SidebarContext.Provider, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsxRuntime.jsxRuntimeExports.jsx(tooltip.TooltipProvider, { children: jsxRuntime.jsxRuntimeExports.jsx(index.Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? "expanded" : "collapsed", open: open, onOpenChange: onOpenChange, "aria-label": "Navigation Sidebar", "aria-expanded": open, role: "navigation", ...props, asChild: true, children: jsxRuntime.jsxRuntimeExports.jsxs("aside", { children: [jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: open ? "Click to collapse" : "Click to expand", side: position === "left" ? "right" : "left", asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default.resizeHandle, onClick: () => onOpenChange?.(!open), role: "button", tabIndex: 0, "aria-label": open ? "Collapse sidebar" : "Expand sidebar", onKeyDown: (e) => {
|
|
14
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
onOpenChange?.(!open);
|
|
17
|
+
}
|
|
18
|
+
} }) }), children] }) }) }) })));
|
|
18
19
|
const SidebarHeader = React.forwardRef(({ className, logo, title, onLogoClick, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsxs("div", { ref: ref, className: sidebar_module.default.header, role: "banner", ...props, children: [jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default.logo, onClick: onLogoClick, role: onLogoClick ? "button" : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
|
|
19
20
|
if (onLogoClick && (e.key === "Enter" || e.key === " ")) {
|
|
20
21
|
e.preventDefault();
|
|
@@ -23,7 +24,11 @@ const SidebarHeader = React.forwardRef(({ className, logo, title, onLogoClick, .
|
|
|
23
24
|
}, style: { cursor: onLogoClick ? "pointer" : undefined }, children: logo }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default.title, role: "heading", "aria-level": 1, children: title })] })));
|
|
24
25
|
const SidebarMain = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx("div", { ref: ref, className: sidebar_module.default.main, role: "group", "aria-label": "Main navigation", ...props, children: children })));
|
|
25
26
|
const SidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsx("div", { ref: ref, className: sidebar_module.default.footer, role: "group", "aria-label": "Footer navigation", ...props, children: children })));
|
|
26
|
-
const SidebarItem = React.forwardRef(({ classNames, icon, children, active, disabled, ...props }, ref) =>
|
|
27
|
+
const SidebarItem = React.forwardRef(({ classNames, icon, children, active, disabled, ...props }, ref) => {
|
|
28
|
+
const { isCollapsed, hideCollapsedItemTooltip } = React.useContext(SidebarContext); // To prevent prop drillng
|
|
29
|
+
const itemContent = (jsxRuntime.jsxRuntimeExports.jsxs("a", { ref: ref, className: clsx.clsx(sidebar_module.default["nav-item"], classNames?.root), "data-active": active, "data-disabled": disabled, role: "menuitem", "aria-current": active ? "page" : undefined, "aria-disabled": disabled, ...props, children: [jsxRuntime.jsxRuntimeExports.jsx("span", { className: clsx.clsx(sidebar_module.default["nav-icon"], classNames?.icon), "aria-hidden": "true", children: icon }), jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default["nav-text"], children: children })] }));
|
|
30
|
+
return (isCollapsed && !hideCollapsedItemTooltip) ? (jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { message: children, side: "right", children: itemContent })) : itemContent;
|
|
31
|
+
});
|
|
27
32
|
const SidebarNavigationGroup = React.forwardRef(({ className, name, icon, children, ...props }, ref) => (jsxRuntime.jsxRuntimeExports.jsxs("section", { ref: ref, className: className, "aria-label": name, ...props, children: [jsxRuntime.jsxRuntimeExports.jsxs("div", { className: sidebar_module.default["nav-group-header"], children: [icon && jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default["nav-icon"], children: icon }), jsxRuntime.jsxRuntimeExports.jsx("span", { className: sidebar_module.default["nav-group-name"], children: name })] }), jsxRuntime.jsxRuntimeExports.jsx("div", { className: sidebar_module.default["nav-group-items"], role: "list", children: children })] })));
|
|
28
33
|
SidebarRoot.displayName = "Sidebar.Root";
|
|
29
34
|
SidebarHeader.displayName = "Sidebar.Header";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.cjs","sources":["../../../../v1/components/sidebar/sidebar.tsx"],"sourcesContent":["import * as Collapsible from \"@radix-ui/react-collapsible\";\nimport { cva } from \"class-variance-authority\";\nimport {\n ComponentPropsWithoutRef,\n ComponentRef,\n forwardRef,\n ReactNode,\n} from \"react\";\n\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\nimport styles from \"./sidebar.module.css\";\nimport clsx from \"clsx\";\n\nconst root = cva(styles.root);\n\ninterface SidebarProps\n extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n position?: \"left\" | \"right\";\n}\n\ninterface SidebarHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n logo: ReactNode;\n title: string;\n onLogoClick?: () => void;\n}\n\ninterface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n icon: ReactNode;\n active?: boolean;\n disabled?: boolean;\n classNames?: {\n root?: string;\n icon?: string;\n text?: string;\n };\n}\n\ninterface SidebarFooterProps extends ComponentPropsWithoutRef<\"div\"> {}\n\ninterface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n name: string;\n icon?: ReactNode;\n}\n\nconst SidebarRoot = forwardRef<\n ComponentRef<typeof Collapsible.Root>,\n SidebarProps\n>(\n (\n { className, position = \"left\", open, onOpenChange, children, ...props },\n ref\n ) => (\n <TooltipProvider>\n <Collapsible.Root\n ref={ref}\n className={root({ className })}\n data-position={position}\n data-state={open ? \"expanded\" : \"collapsed\"}\n open={open}\n onOpenChange={onOpenChange}\n aria-label=\"Navigation Sidebar\"\n aria-expanded={open}\n role=\"navigation\"\n {...props}\n asChild\n >\n <aside>\n <Tooltip\n message={open ? \"Click to collapse\" : \"Click to expand\"}\n side={position === \"left\" ? \"right\" : \"left\"}\n asChild\n >\n <div\n className={styles.resizeHandle}\n onClick={() => onOpenChange?.(!open)}\n role=\"button\"\n tabIndex={0}\n aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onOpenChange?.(!open);\n }\n }}\n />\n </Tooltip>\n {children}\n </aside>\n </Collapsible.Root>\n </TooltipProvider>\n )\n);\n\nconst SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(\n ({ className, logo, title, onLogoClick, ...props }, ref) => (\n <div ref={ref} className={styles.header} role=\"banner\" {...props}>\n <div\n className={styles.logo}\n onClick={onLogoClick}\n role={onLogoClick ? \"button\" : undefined}\n tabIndex={onLogoClick ? 0 : undefined}\n onKeyDown={(e) => {\n if (onLogoClick && (e.key === \"Enter\" || e.key === \" \")) {\n e.preventDefault();\n onLogoClick();\n }\n }}\n style={{ cursor: onLogoClick ? \"pointer\" : undefined }}\n >\n {logo}\n </div>\n <div className={styles.title} role=\"heading\" aria-level={1}>\n {title}\n </div>\n </div>\n )\n);\n\nconst SidebarMain = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={styles.main}\n role=\"group\"\n aria-label=\"Main navigation\"\n {...props}\n >\n {children}\n </div>\n )\n);\n\nconst SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={styles.footer}\n role=\"group\"\n aria-label=\"Footer navigation\"\n {...props}\n >\n {children}\n </div>\n )\n);\n\nconst SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(\n ({ classNames, icon, children, active, disabled, ...props }, ref) => (\n <a\n ref={ref}\n className={clsx(styles[\"nav-item\"], classNames?.root)}\n data-active={active}\n data-disabled={disabled}\n role=\"menuitem\"\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled}\n {...props}\n >\n <span\n className={clsx(styles[\"nav-icon\"], classNames?.icon)}\n aria-hidden=\"true\"\n >\n {icon}\n </span>\n <span className={styles[\"nav-text\"]}>{children}</span>\n </a>\n )\n);\n\nconst SidebarNavigationGroup = forwardRef<\n HTMLElement,\n SidebarNavigationGroupProps\n>(({ className, name, icon, children, ...props }, ref) => (\n <section ref={ref} className={className} aria-label={name} {...props}>\n <div className={styles[\"nav-group-header\"]}>\n {icon && <span className={styles[\"nav-icon\"]}>{icon}</span>}\n <span className={styles[\"nav-group-name\"]}>{name}</span>\n </div>\n <div className={styles[\"nav-group-items\"]} role=\"list\">\n {children}\n </div>\n </section>\n));\n\nSidebarRoot.displayName = \"Sidebar.Root\";\nSidebarHeader.displayName = \"Sidebar.Header\";\nSidebarMain.displayName = \"Sidebar.Main\";\nSidebarFooter.displayName = \"Sidebar.Footer\";\nSidebarItem.displayName = \"Sidebar.Item\";\nSidebarNavigationGroup.displayName = \"Sidebar.Group\";\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n Header: SidebarHeader,\n Main: SidebarMain,\n Footer: SidebarFooter,\n Item: SidebarItem,\n Group: SidebarNavigationGroup,\n});\n"],"names":["cva","styles","forwardRef","_jsx","TooltipProvider","Collapsible.Root","_jsxs","Tooltip","clsx"],"mappings":";;;;;;;;;;AAaA,MAAM,IAAI,GAAGA,WAAG,CAACC,sBAAM,CAAC,IAAI,CAAC,CAAC;AA+B9B,MAAM,WAAW,GAAGC,gBAAU,CAI5B,CACE,EAAE,SAAS,EAAE,QAAQ,GAAG,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACxE,GAAG,MAEHC,gCAAC,CAAAC,uBAAe,cACdD,gCAAC,CAAAE,UAAgB,IACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,EACf,eAAA,EAAA,QAAQ,gBACX,IAAI,GAAG,UAAU,GAAG,WAAW,EAC3C,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EACf,YAAA,EAAA,oBAAoB,mBAChB,IAAI,EACnB,IAAI,EAAC,YAAY,EACb,GAAA,KAAK,EACT,OAAO,EAEP,IAAA,EAAA,QAAA,EAAAC,iCAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAA,CACEH,gCAAC,CAAAI,eAAO,IACN,OAAO,EAAE,IAAI,GAAG,mBAAmB,GAAG,iBAAiB,EACvD,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,EAC5C,OAAO,EAEP,IAAA,EAAA,QAAA,EAAAJ,gCAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEF,sBAAM,CAAC,YAAY,EAC9B,OAAO,EAAE,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,EACpC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,IAAI,GAAG,kBAAkB,GAAG,gBAAgB,EACxD,SAAS,EAAE,CAAC,CAAC,KAAI;AACf,4BAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gCACtC,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,gCAAA,YAAY,GAAG,CAAC,IAAI,CAAC,CAAC;6BACvB;yBACF,EAAA,CACD,GACM,EACT,QAAQ,IACH,EACS,CAAA,EAAA,CACH,CACnB,CACF,CAAC;AAEF,MAAM,aAAa,GAAGC,gBAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACrDI,iCAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEL,sBAAM,CAAC,MAAM,EAAE,IAAI,EAAC,QAAQ,KAAK,KAAK,EAAA,QAAA,EAAA,CAC9DE,gCACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEF,sBAAM,CAAC,IAAI,EACtB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,EACxC,QAAQ,EAAE,WAAW,GAAG,CAAC,GAAG,SAAS,EACrC,SAAS,EAAE,CAAC,CAAC,KAAI;AACf,gBAAA,IAAI,WAAW,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE;oBACvD,CAAC,CAAC,cAAc,EAAE,CAAC;AACnB,oBAAA,WAAW,EAAE,CAAC;iBACf;AACH,aAAC,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,EAAE,YAErD,IAAI,EAAA,CACD,EACNE,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,sBAAM,CAAC,KAAK,EAAE,IAAI,EAAC,SAAS,EAAA,YAAA,EAAa,CAAC,EACvD,QAAA,EAAA,KAAK,GACF,CACF,EAAA,CAAA,CACP,CACF,CAAC;AAEF,MAAM,WAAW,GAAGC,gBAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACrCC,gCACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEF,sBAAM,CAAC,IAAI,EACtB,IAAI,EAAC,OAAO,EACD,YAAA,EAAA,iBAAiB,KACxB,KAAK,EAAA,QAAA,EAER,QAAQ,EACL,CAAA,CACP,CACF,CAAC;AAEF,MAAM,aAAa,GAAGC,gBAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACrCC,gCACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEF,sBAAM,CAAC,MAAM,EACxB,IAAI,EAAC,OAAO,EACD,YAAA,EAAA,mBAAmB,KAC1B,KAAK,EAAA,QAAA,EAER,QAAQ,EACL,CAAA,CACP,CACF,CAAC;AAEF,MAAM,WAAW,GAAGC,gBAAU,CAC5B,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC9DI,iCAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEE,SAAI,CAACP,sBAAM,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,EACxC,aAAA,EAAA,MAAM,EACJ,eAAA,EAAA,QAAQ,EACvB,IAAI,EAAC,UAAU,EAAA,cAAA,EACD,MAAM,GAAG,MAAM,GAAG,SAAS,EAAA,eAAA,EAC1B,QAAQ,EACnB,GAAA,KAAK,aAETE,gCACE,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEK,SAAI,CAACP,sBAAM,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,EAAA,aAAA,EACzC,MAAM,EAEjB,QAAA,EAAA,IAAI,EACA,CAAA,EACPE,gCAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEF,sBAAM,CAAC,UAAU,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAQ,CAAA,CAAA,EAAA,CACpD,CACL,CACF,CAAC;AAEF,MAAM,sBAAsB,GAAGC,gBAAU,CAGvC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACnDI,iCAAS,CAAA,SAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,gBAAc,IAAI,EAAA,GAAM,KAAK,EAClE,QAAA,EAAA,CAAAA,iCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEL,sBAAM,CAAC,kBAAkB,CAAC,EACvC,QAAA,EAAA,CAAA,IAAI,IAAIE,gCAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEF,sBAAM,CAAC,UAAU,CAAC,EAAA,QAAA,EAAG,IAAI,EAAA,CAAQ,EAC3DE,gCAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEF,sBAAM,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAG,IAAI,EAAA,CAAQ,IACpD,EACNE,gCAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEF,sBAAM,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAC,MAAM,EACnD,QAAA,EAAA,QAAQ,GACL,CACE,EAAA,CAAA,CACX,CAAC,CAAC;AAEH,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,aAAa,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAC7C,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,aAAa,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAC7C,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AACzC,sBAAsB,CAAC,WAAW,GAAG,eAAe,CAAC;MAExC,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;AAChD,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,sBAAsB;AAC9B,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"sidebar.cjs","sources":["../../../../v1/components/sidebar/sidebar.tsx"],"sourcesContent":["import * as Collapsible from \"@radix-ui/react-collapsible\";\nimport { cva } from \"class-variance-authority\";\nimport {\n ComponentPropsWithoutRef,\n ComponentRef,\n forwardRef,\n ReactNode,\n createContext,\n useContext\n} from \"react\";\n\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\nimport styles from \"./sidebar.module.css\";\nimport clsx from \"clsx\";\n\ninterface SidebarContextValue {\n isCollapsed: boolean;\n hideCollapsedItemTooltip?: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\nconst root = cva(styles.root);\n\ninterface SidebarProps\n extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n position?: \"left\" | \"right\";\n hideCollapsedItemTooltip?: boolean;\n}\n\ninterface SidebarHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n logo: ReactNode;\n title: string;\n onLogoClick?: () => void;\n}\n\ninterface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n icon: ReactNode;\n active?: boolean;\n disabled?: boolean;\n classNames?: {\n root?: string;\n icon?: string;\n text?: string;\n };\n}\n\ninterface SidebarFooterProps extends ComponentPropsWithoutRef<\"div\"> {}\n\ninterface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n name: string;\n icon?: ReactNode;\n}\n\nconst SidebarRoot = forwardRef<\n ComponentRef<typeof Collapsible.Root>,\n SidebarProps\n>(\n (\n { className, position = \"left\", open, onOpenChange, hideCollapsedItemTooltip, children, ...props },\n ref\n ) => (\n <SidebarContext.Provider value={{ isCollapsed: !open, hideCollapsedItemTooltip }}>\n <TooltipProvider>\n <Collapsible.Root\n ref={ref}\n className={root({ className })}\n data-position={position}\n data-state={open ? \"expanded\" : \"collapsed\"}\n open={open}\n onOpenChange={onOpenChange}\n aria-label=\"Navigation Sidebar\"\n aria-expanded={open}\n role=\"navigation\"\n {...props}\n asChild\n >\n <aside>\n <Tooltip\n message={open ? \"Click to collapse\" : \"Click to expand\"}\n side={position === \"left\" ? \"right\" : \"left\"}\n asChild\n >\n <div\n className={styles.resizeHandle}\n onClick={() => onOpenChange?.(!open)}\n role=\"button\"\n tabIndex={0}\n aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onOpenChange?.(!open);\n }\n }}\n />\n </Tooltip>\n {children}\n </aside>\n </Collapsible.Root>\n </TooltipProvider>\n </SidebarContext.Provider>\n )\n);\n\nconst SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(\n ({ className, logo, title, onLogoClick, ...props }, ref) => (\n <div ref={ref} className={styles.header} role=\"banner\" {...props}>\n <div\n className={styles.logo}\n onClick={onLogoClick}\n role={onLogoClick ? \"button\" : undefined}\n tabIndex={onLogoClick ? 0 : undefined}\n onKeyDown={(e) => {\n if (onLogoClick && (e.key === \"Enter\" || e.key === \" \")) {\n e.preventDefault();\n onLogoClick();\n }\n }}\n style={{ cursor: onLogoClick ? \"pointer\" : undefined }}\n >\n {logo}\n </div>\n <div className={styles.title} role=\"heading\" aria-level={1}>\n {title}\n </div>\n </div>\n )\n);\n\nconst SidebarMain = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={styles.main}\n role=\"group\"\n aria-label=\"Main navigation\"\n {...props}\n >\n {children}\n </div>\n )\n);\n\nconst SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={styles.footer}\n role=\"group\"\n aria-label=\"Footer navigation\"\n {...props}\n >\n {children}\n </div>\n )\n);\n\nconst SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(\n ({ classNames, icon, children, active, disabled, ...props }, ref) => {\n const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);// To prevent prop drillng\n \n const itemContent = (\n <a\n ref={ref}\n className={clsx(styles[\"nav-item\"], classNames?.root)}\n data-active={active}\n data-disabled={disabled}\n role=\"menuitem\"\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled}\n {...props}\n >\n <span\n className={clsx(styles[\"nav-icon\"], classNames?.icon)}\n aria-hidden=\"true\"\n >\n {icon}\n </span>\n <span className={styles[\"nav-text\"]}>{children}</span>\n </a>\n );\n\n return (isCollapsed && !hideCollapsedItemTooltip) ? (\n <Tooltip message={children} side=\"right\">\n {itemContent}\n </Tooltip>\n ) : itemContent;\n }\n);\n\nconst SidebarNavigationGroup = forwardRef<\n HTMLElement,\n SidebarNavigationGroupProps\n>(({ className, name, icon, children, ...props }, ref) => (\n <section ref={ref} className={className} aria-label={name} {...props}>\n <div className={styles[\"nav-group-header\"]}>\n {icon && <span className={styles[\"nav-icon\"]}>{icon}</span>}\n <span className={styles[\"nav-group-name\"]}>{name}</span>\n </div>\n <div className={styles[\"nav-group-items\"]} role=\"list\">\n {children}\n </div>\n </section>\n));\n\nSidebarRoot.displayName = \"Sidebar.Root\";\nSidebarHeader.displayName = \"Sidebar.Header\";\nSidebarMain.displayName = \"Sidebar.Main\";\nSidebarFooter.displayName = \"Sidebar.Footer\";\nSidebarItem.displayName = \"Sidebar.Item\";\nSidebarNavigationGroup.displayName = \"Sidebar.Group\";\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n Header: SidebarHeader,\n Main: SidebarMain,\n Footer: SidebarFooter,\n Item: SidebarItem,\n Group: SidebarNavigationGroup,\n});\n"],"names":["createContext","cva","styles","forwardRef","_jsx","TooltipProvider","Collapsible.Root","_jsxs","Tooltip","useContext","clsx"],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import * as Collapsible from "@radix-ui/react-collapsible";
|
|
|
2
2
|
import { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
3
3
|
interface SidebarProps extends ComponentPropsWithoutRef<typeof Collapsible.Root> {
|
|
4
4
|
position?: "left" | "right";
|
|
5
|
+
hideCollapsedItemTooltip?: boolean;
|
|
5
6
|
}
|
|
6
7
|
interface SidebarHeaderProps extends ComponentPropsWithoutRef<"div"> {
|
|
7
8
|
logo: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../v1/components/sidebar/sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAE3D,OAAO,EACL,wBAAwB,EAGxB,SAAS,
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../v1/components/sidebar/sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAE3D,OAAO,EACL,wBAAwB,EAGxB,SAAS,EAGV,MAAM,OAAO,CAAC;AAef,UAAU,YACR,SAAQ,wBAAwB,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAClE,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,UAAU,gBAAiB,SAAQ,wBAAwB,CAAC,GAAG,CAAC;IAC9D,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;CAAG;AAEvE,UAAU,2BAA4B,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAiKD,eAAO,MAAM,OAAO;;;;;;CAMlB,CAAC"}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
|
|
2
2
|
import { Root } from '../../node_modules/.pnpm/@radix-ui_react-collapsible@1.1.2_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18._hjslo7xm5vmo3b4sx344jkbtcq/node_modules/@radix-ui/react-collapsible/dist/index.js';
|
|
3
3
|
import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
4
|
+
import { createContext, forwardRef, useContext } from 'react';
|
|
5
5
|
import { TooltipProvider, Tooltip } from '../tooltip/tooltip.js';
|
|
6
6
|
import styles from './sidebar.module.css.js';
|
|
7
7
|
import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
|
|
8
8
|
|
|
9
|
+
const SidebarContext = createContext({ isCollapsed: false });
|
|
9
10
|
const root = cva(styles.root);
|
|
10
|
-
const SidebarRoot = forwardRef(({ className, position = "left", open, onOpenChange, children, ...props }, ref) => (jsxRuntimeExports.jsx(TooltipProvider, { children: jsxRuntimeExports.jsx(Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? "expanded" : "collapsed", open: open, onOpenChange: onOpenChange, "aria-label": "Navigation Sidebar", "aria-expanded": open, role: "navigation", ...props, asChild: true, children: jsxRuntimeExports.jsxs("aside", { children: [jsxRuntimeExports.jsx(Tooltip, { message: open ? "Click to collapse" : "Click to expand", side: position === "left" ? "right" : "left", asChild: true, children: jsxRuntimeExports.jsx("div", { className: styles.resizeHandle, onClick: () => onOpenChange?.(!open), role: "button", tabIndex: 0, "aria-label": open ? "Collapse sidebar" : "Expand sidebar", onKeyDown: (e) => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
const SidebarRoot = forwardRef(({ className, position = "left", open, onOpenChange, hideCollapsedItemTooltip, children, ...props }, ref) => (jsxRuntimeExports.jsx(SidebarContext.Provider, { value: { isCollapsed: !open, hideCollapsedItemTooltip }, children: jsxRuntimeExports.jsx(TooltipProvider, { children: jsxRuntimeExports.jsx(Root, { ref: ref, className: root({ className }), "data-position": position, "data-state": open ? "expanded" : "collapsed", open: open, onOpenChange: onOpenChange, "aria-label": "Navigation Sidebar", "aria-expanded": open, role: "navigation", ...props, asChild: true, children: jsxRuntimeExports.jsxs("aside", { children: [jsxRuntimeExports.jsx(Tooltip, { message: open ? "Click to collapse" : "Click to expand", side: position === "left" ? "right" : "left", asChild: true, children: jsxRuntimeExports.jsx("div", { className: styles.resizeHandle, onClick: () => onOpenChange?.(!open), role: "button", tabIndex: 0, "aria-label": open ? "Collapse sidebar" : "Expand sidebar", onKeyDown: (e) => {
|
|
12
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
13
|
+
e.preventDefault();
|
|
14
|
+
onOpenChange?.(!open);
|
|
15
|
+
}
|
|
16
|
+
} }) }), children] }) }) }) })));
|
|
16
17
|
const SidebarHeader = forwardRef(({ className, logo, title, onLogoClick, ...props }, ref) => (jsxRuntimeExports.jsxs("div", { ref: ref, className: styles.header, role: "banner", ...props, children: [jsxRuntimeExports.jsx("div", { className: styles.logo, onClick: onLogoClick, role: onLogoClick ? "button" : undefined, tabIndex: onLogoClick ? 0 : undefined, onKeyDown: (e) => {
|
|
17
18
|
if (onLogoClick && (e.key === "Enter" || e.key === " ")) {
|
|
18
19
|
e.preventDefault();
|
|
@@ -21,7 +22,11 @@ const SidebarHeader = forwardRef(({ className, logo, title, onLogoClick, ...prop
|
|
|
21
22
|
}, style: { cursor: onLogoClick ? "pointer" : undefined }, children: logo }), jsxRuntimeExports.jsx("div", { className: styles.title, role: "heading", "aria-level": 1, children: title })] })));
|
|
22
23
|
const SidebarMain = forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsx("div", { ref: ref, className: styles.main, role: "group", "aria-label": "Main navigation", ...props, children: children })));
|
|
23
24
|
const SidebarFooter = forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports.jsx("div", { ref: ref, className: styles.footer, role: "group", "aria-label": "Footer navigation", ...props, children: children })));
|
|
24
|
-
const SidebarItem = forwardRef(({ classNames, icon, children, active, disabled, ...props }, ref) =>
|
|
25
|
+
const SidebarItem = forwardRef(({ classNames, icon, children, active, disabled, ...props }, ref) => {
|
|
26
|
+
const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext); // To prevent prop drillng
|
|
27
|
+
const itemContent = (jsxRuntimeExports.jsxs("a", { ref: ref, className: clsx(styles["nav-item"], classNames?.root), "data-active": active, "data-disabled": disabled, role: "menuitem", "aria-current": active ? "page" : undefined, "aria-disabled": disabled, ...props, children: [jsxRuntimeExports.jsx("span", { className: clsx(styles["nav-icon"], classNames?.icon), "aria-hidden": "true", children: icon }), jsxRuntimeExports.jsx("span", { className: styles["nav-text"], children: children })] }));
|
|
28
|
+
return (isCollapsed && !hideCollapsedItemTooltip) ? (jsxRuntimeExports.jsx(Tooltip, { message: children, side: "right", children: itemContent })) : itemContent;
|
|
29
|
+
});
|
|
25
30
|
const SidebarNavigationGroup = forwardRef(({ className, name, icon, children, ...props }, ref) => (jsxRuntimeExports.jsxs("section", { ref: ref, className: className, "aria-label": name, ...props, children: [jsxRuntimeExports.jsxs("div", { className: styles["nav-group-header"], children: [icon && jsxRuntimeExports.jsx("span", { className: styles["nav-icon"], children: icon }), jsxRuntimeExports.jsx("span", { className: styles["nav-group-name"], children: name })] }), jsxRuntimeExports.jsx("div", { className: styles["nav-group-items"], role: "list", children: children })] })));
|
|
26
31
|
SidebarRoot.displayName = "Sidebar.Root";
|
|
27
32
|
SidebarHeader.displayName = "Sidebar.Header";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","sources":["../../../../v1/components/sidebar/sidebar.tsx"],"sourcesContent":["import * as Collapsible from \"@radix-ui/react-collapsible\";\nimport { cva } from \"class-variance-authority\";\nimport {\n ComponentPropsWithoutRef,\n ComponentRef,\n forwardRef,\n ReactNode,\n} from \"react\";\n\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\nimport styles from \"./sidebar.module.css\";\nimport clsx from \"clsx\";\n\nconst root = cva(styles.root);\n\ninterface SidebarProps\n extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n position?: \"left\" | \"right\";\n}\n\ninterface SidebarHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n logo: ReactNode;\n title: string;\n onLogoClick?: () => void;\n}\n\ninterface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n icon: ReactNode;\n active?: boolean;\n disabled?: boolean;\n classNames?: {\n root?: string;\n icon?: string;\n text?: string;\n };\n}\n\ninterface SidebarFooterProps extends ComponentPropsWithoutRef<\"div\"> {}\n\ninterface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n name: string;\n icon?: ReactNode;\n}\n\nconst SidebarRoot = forwardRef<\n ComponentRef<typeof Collapsible.Root>,\n SidebarProps\n>(\n (\n { className, position = \"left\", open, onOpenChange, children, ...props },\n ref\n ) => (\n <TooltipProvider>\n <Collapsible.Root\n ref={ref}\n className={root({ className })}\n data-position={position}\n data-state={open ? \"expanded\" : \"collapsed\"}\n open={open}\n onOpenChange={onOpenChange}\n aria-label=\"Navigation Sidebar\"\n aria-expanded={open}\n role=\"navigation\"\n {...props}\n asChild\n >\n <aside>\n <Tooltip\n message={open ? \"Click to collapse\" : \"Click to expand\"}\n side={position === \"left\" ? \"right\" : \"left\"}\n asChild\n >\n <div\n className={styles.resizeHandle}\n onClick={() => onOpenChange?.(!open)}\n role=\"button\"\n tabIndex={0}\n aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onOpenChange?.(!open);\n }\n }}\n />\n </Tooltip>\n {children}\n </aside>\n </Collapsible.Root>\n </TooltipProvider>\n )\n);\n\nconst SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(\n ({ className, logo, title, onLogoClick, ...props }, ref) => (\n <div ref={ref} className={styles.header} role=\"banner\" {...props}>\n <div\n className={styles.logo}\n onClick={onLogoClick}\n role={onLogoClick ? \"button\" : undefined}\n tabIndex={onLogoClick ? 0 : undefined}\n onKeyDown={(e) => {\n if (onLogoClick && (e.key === \"Enter\" || e.key === \" \")) {\n e.preventDefault();\n onLogoClick();\n }\n }}\n style={{ cursor: onLogoClick ? \"pointer\" : undefined }}\n >\n {logo}\n </div>\n <div className={styles.title} role=\"heading\" aria-level={1}>\n {title}\n </div>\n </div>\n )\n);\n\nconst SidebarMain = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={styles.main}\n role=\"group\"\n aria-label=\"Main navigation\"\n {...props}\n >\n {children}\n </div>\n )\n);\n\nconst SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={styles.footer}\n role=\"group\"\n aria-label=\"Footer navigation\"\n {...props}\n >\n {children}\n </div>\n )\n);\n\nconst SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(\n ({ classNames, icon, children, active, disabled, ...props }, ref) => (\n <a\n ref={ref}\n className={clsx(styles[\"nav-item\"], classNames?.root)}\n data-active={active}\n data-disabled={disabled}\n role=\"menuitem\"\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled}\n {...props}\n >\n <span\n className={clsx(styles[\"nav-icon\"], classNames?.icon)}\n aria-hidden=\"true\"\n >\n {icon}\n </span>\n <span className={styles[\"nav-text\"]}>{children}</span>\n </a>\n )\n);\n\nconst SidebarNavigationGroup = forwardRef<\n HTMLElement,\n SidebarNavigationGroupProps\n>(({ className, name, icon, children, ...props }, ref) => (\n <section ref={ref} className={className} aria-label={name} {...props}>\n <div className={styles[\"nav-group-header\"]}>\n {icon && <span className={styles[\"nav-icon\"]}>{icon}</span>}\n <span className={styles[\"nav-group-name\"]}>{name}</span>\n </div>\n <div className={styles[\"nav-group-items\"]} role=\"list\">\n {children}\n </div>\n </section>\n));\n\nSidebarRoot.displayName = \"Sidebar.Root\";\nSidebarHeader.displayName = \"Sidebar.Header\";\nSidebarMain.displayName = \"Sidebar.Main\";\nSidebarFooter.displayName = \"Sidebar.Footer\";\nSidebarItem.displayName = \"Sidebar.Item\";\nSidebarNavigationGroup.displayName = \"Sidebar.Group\";\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n Header: SidebarHeader,\n Main: SidebarMain,\n Footer: SidebarFooter,\n Item: SidebarItem,\n Group: SidebarNavigationGroup,\n});\n"],"names":["_jsx","Collapsible.Root","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sidebar.js","sources":["../../../../v1/components/sidebar/sidebar.tsx"],"sourcesContent":["import * as Collapsible from \"@radix-ui/react-collapsible\";\nimport { cva } from \"class-variance-authority\";\nimport {\n ComponentPropsWithoutRef,\n ComponentRef,\n forwardRef,\n ReactNode,\n createContext,\n useContext\n} from \"react\";\n\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\nimport styles from \"./sidebar.module.css\";\nimport clsx from \"clsx\";\n\ninterface SidebarContextValue {\n isCollapsed: boolean;\n hideCollapsedItemTooltip?: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\nconst root = cva(styles.root);\n\ninterface SidebarProps\n extends ComponentPropsWithoutRef<typeof Collapsible.Root> {\n position?: \"left\" | \"right\";\n hideCollapsedItemTooltip?: boolean;\n}\n\ninterface SidebarHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n logo: ReactNode;\n title: string;\n onLogoClick?: () => void;\n}\n\ninterface SidebarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n icon: ReactNode;\n active?: boolean;\n disabled?: boolean;\n classNames?: {\n root?: string;\n icon?: string;\n text?: string;\n };\n}\n\ninterface SidebarFooterProps extends ComponentPropsWithoutRef<\"div\"> {}\n\ninterface SidebarNavigationGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n name: string;\n icon?: ReactNode;\n}\n\nconst SidebarRoot = forwardRef<\n ComponentRef<typeof Collapsible.Root>,\n SidebarProps\n>(\n (\n { className, position = \"left\", open, onOpenChange, hideCollapsedItemTooltip, children, ...props },\n ref\n ) => (\n <SidebarContext.Provider value={{ isCollapsed: !open, hideCollapsedItemTooltip }}>\n <TooltipProvider>\n <Collapsible.Root\n ref={ref}\n className={root({ className })}\n data-position={position}\n data-state={open ? \"expanded\" : \"collapsed\"}\n open={open}\n onOpenChange={onOpenChange}\n aria-label=\"Navigation Sidebar\"\n aria-expanded={open}\n role=\"navigation\"\n {...props}\n asChild\n >\n <aside>\n <Tooltip\n message={open ? \"Click to collapse\" : \"Click to expand\"}\n side={position === \"left\" ? \"right\" : \"left\"}\n asChild\n >\n <div\n className={styles.resizeHandle}\n onClick={() => onOpenChange?.(!open)}\n role=\"button\"\n tabIndex={0}\n aria-label={open ? \"Collapse sidebar\" : \"Expand sidebar\"}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onOpenChange?.(!open);\n }\n }}\n />\n </Tooltip>\n {children}\n </aside>\n </Collapsible.Root>\n </TooltipProvider>\n </SidebarContext.Provider>\n )\n);\n\nconst SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(\n ({ className, logo, title, onLogoClick, ...props }, ref) => (\n <div ref={ref} className={styles.header} role=\"banner\" {...props}>\n <div\n className={styles.logo}\n onClick={onLogoClick}\n role={onLogoClick ? \"button\" : undefined}\n tabIndex={onLogoClick ? 0 : undefined}\n onKeyDown={(e) => {\n if (onLogoClick && (e.key === \"Enter\" || e.key === \" \")) {\n e.preventDefault();\n onLogoClick();\n }\n }}\n style={{ cursor: onLogoClick ? \"pointer\" : undefined }}\n >\n {logo}\n </div>\n <div className={styles.title} role=\"heading\" aria-level={1}>\n {title}\n </div>\n </div>\n )\n);\n\nconst SidebarMain = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<\"div\">>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={styles.main}\n role=\"group\"\n aria-label=\"Main navigation\"\n {...props}\n >\n {children}\n </div>\n )\n);\n\nconst SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={styles.footer}\n role=\"group\"\n aria-label=\"Footer navigation\"\n {...props}\n >\n {children}\n </div>\n )\n);\n\nconst SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(\n ({ classNames, icon, children, active, disabled, ...props }, ref) => {\n const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);// To prevent prop drillng\n \n const itemContent = (\n <a\n ref={ref}\n className={clsx(styles[\"nav-item\"], classNames?.root)}\n data-active={active}\n data-disabled={disabled}\n role=\"menuitem\"\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled}\n {...props}\n >\n <span\n className={clsx(styles[\"nav-icon\"], classNames?.icon)}\n aria-hidden=\"true\"\n >\n {icon}\n </span>\n <span className={styles[\"nav-text\"]}>{children}</span>\n </a>\n );\n\n return (isCollapsed && !hideCollapsedItemTooltip) ? (\n <Tooltip message={children} side=\"right\">\n {itemContent}\n </Tooltip>\n ) : itemContent;\n }\n);\n\nconst SidebarNavigationGroup = forwardRef<\n HTMLElement,\n SidebarNavigationGroupProps\n>(({ className, name, icon, children, ...props }, ref) => (\n <section ref={ref} className={className} aria-label={name} {...props}>\n <div className={styles[\"nav-group-header\"]}>\n {icon && <span className={styles[\"nav-icon\"]}>{icon}</span>}\n <span className={styles[\"nav-group-name\"]}>{name}</span>\n </div>\n <div className={styles[\"nav-group-items\"]} role=\"list\">\n {children}\n </div>\n </section>\n));\n\nSidebarRoot.displayName = \"Sidebar.Root\";\nSidebarHeader.displayName = \"Sidebar.Header\";\nSidebarMain.displayName = \"Sidebar.Main\";\nSidebarFooter.displayName = \"Sidebar.Footer\";\nSidebarItem.displayName = \"Sidebar.Item\";\nSidebarNavigationGroup.displayName = \"Sidebar.Group\";\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n Header: SidebarHeader,\n Main: SidebarMain,\n Footer: SidebarFooter,\n Item: SidebarItem,\n Group: SidebarNavigationGroup,\n});\n"],"names":["_jsx","Collapsible.Root","_jsxs"],"mappings":"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"}
|