@raystack/apsara 0.44.0 → 0.44.2
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 +19 -23
- package/dist/v1/components/calendar/range-picker.cjs.map +1 -1
- package/dist/v1/components/calendar/range-picker.d.ts +5 -9
- package/dist/v1/components/calendar/range-picker.d.ts.map +1 -1
- package/dist/v1/components/calendar/range-picker.js +19 -23
- package/dist/v1/components/calendar/range-picker.js.map +1 -1
- package/dist/v1/components/filter-chip/filter-chip.cjs +22 -8
- package/dist/v1/components/filter-chip/filter-chip.cjs.map +1 -1
- package/dist/v1/components/filter-chip/filter-chip.d.ts +7 -2
- package/dist/v1/components/filter-chip/filter-chip.d.ts.map +1 -1
- package/dist/v1/components/filter-chip/filter-chip.js +22 -8
- package/dist/v1/components/filter-chip/filter-chip.js.map +1 -1
- package/dist/v1/components/filter-chip/filter-chip.module.css.cjs +1 -1
- package/dist/v1/components/filter-chip/filter-chip.module.css.js +1 -1
- package/dist/v1/components/spinner/spinner.cjs +1 -1
- package/dist/v1/components/spinner/spinner.cjs.map +1 -1
- package/dist/v1/components/spinner/spinner.js +1 -1
- package/dist/v1/components/spinner/spinner.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","
|
|
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","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","
|
|
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","calendarFooter":"calendar-module_calendarFooter__kJw5W"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
4
4
|
//# sourceMappingURL=calendar.module.css.js.map
|
|
@@ -6,11 +6,11 @@ var dayjs_min = require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/day
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var flex = require('../flex/flex.cjs');
|
|
8
8
|
var popover = require('../popover/popover.cjs');
|
|
9
|
-
var textfield = require('../textfield/textfield.cjs');
|
|
10
9
|
var calendar = require('./calendar.cjs');
|
|
11
10
|
var calendar_module = require('./calendar.module.css.cjs');
|
|
11
|
+
var inputField = require('../input-field/input-field.cjs');
|
|
12
12
|
|
|
13
|
-
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY",
|
|
13
|
+
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
|
|
14
14
|
to: new Date(),
|
|
15
15
|
from: new Date(),
|
|
16
16
|
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
|
|
@@ -23,30 +23,26 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps
|
|
|
23
23
|
// 2nd click will select the end date.
|
|
24
24
|
// 3rd click will select the start date again.
|
|
25
25
|
const handleSelect = (range, selectedDay) => {
|
|
26
|
-
|
|
26
|
+
// TODO: Remove custom logic and reuse the default logic from react-day-picker
|
|
27
27
|
let newRange;
|
|
28
|
-
if (currentRangeField === "
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
// If
|
|
38
|
-
newRange = { from
|
|
28
|
+
if (currentRangeField === "from") {
|
|
29
|
+
// First click - set from date and prepare for to date selection
|
|
30
|
+
newRange = { from: selectedDay };
|
|
31
|
+
setCurrentRangeField("to");
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
// Second click - setting to date
|
|
35
|
+
const from = selectedRange.from;
|
|
36
|
+
if (dayjs_min.default(selectedDay).isBefore(dayjs_min.default(from))) {
|
|
37
|
+
// If selected date is before current from date, start new range
|
|
38
|
+
newRange = { from: selectedDay };
|
|
39
|
+
setCurrentRangeField("to");
|
|
39
40
|
}
|
|
40
41
|
else {
|
|
41
|
-
//
|
|
42
|
-
newRange = { from: selectedDay };
|
|
42
|
+
// Set the to date
|
|
43
|
+
newRange = { from, to: selectedDay };
|
|
44
|
+
setCurrentRangeField("from");
|
|
43
45
|
}
|
|
44
|
-
setCurrentRangeField("from");
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
// Reset the range and select start day
|
|
48
|
-
newRange = { from: selectedDay };
|
|
49
|
-
setCurrentRangeField("to");
|
|
50
46
|
}
|
|
51
47
|
setSelectedRange(newRange);
|
|
52
48
|
// Return the range with +1 day for the end date in the callback
|
|
@@ -59,7 +55,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps
|
|
|
59
55
|
function onOpenChange(open) {
|
|
60
56
|
setShowCalendar(Boolean(open));
|
|
61
57
|
}
|
|
62
|
-
const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(
|
|
58
|
+
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 })] }));
|
|
63
59
|
const trigger = typeof children === 'function'
|
|
64
60
|
? children({ startDate, endDate })
|
|
65
61
|
: children || defaultTrigger;
|
|
@@ -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 {
|
|
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, endDate?: InputFieldProps };\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 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] = 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 // 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 setShowCalendar(Boolean(open));\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <InputField\n\t\t\t\tsize='small'\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n\n <InputField\n\t\t\t\tsize='small'\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\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","InputField","CalendarIcon","Popover","styles","Calendar"],"mappings":"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"}
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
import { DateRange, PropsBase, PropsRangeRequired } from "react-day-picker";
|
|
2
|
-
import {
|
|
2
|
+
import { InputFieldProps } from "../input-field/input-field";
|
|
3
3
|
interface RangePickerProps {
|
|
4
4
|
side?: "top" | "right" | "bottom" | "left";
|
|
5
5
|
dateFormat?: string;
|
|
6
|
-
|
|
7
|
-
startDate?:
|
|
8
|
-
endDate?:
|
|
9
|
-
};
|
|
10
|
-
placeholders?: {
|
|
11
|
-
startDate?: string;
|
|
12
|
-
endDate?: string;
|
|
6
|
+
inputFieldsProps?: {
|
|
7
|
+
startDate?: InputFieldProps;
|
|
8
|
+
endDate?: InputFieldProps;
|
|
13
9
|
};
|
|
14
10
|
calendarProps?: PropsRangeRequired & PropsBase;
|
|
15
11
|
onSelect?: (date: DateRange) => void;
|
|
@@ -22,6 +18,6 @@ interface RangePickerProps {
|
|
|
22
18
|
showCalendarIcon?: boolean;
|
|
23
19
|
footer?: React.ReactNode;
|
|
24
20
|
}
|
|
25
|
-
export declare function RangePicker({ side, dateFormat,
|
|
21
|
+
export declare function RangePicker({ side, dateFormat, inputFieldsProps, calendarProps, onSelect, value, pickerGroupClassName, children, showCalendarIcon, footer, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
26
22
|
export {};
|
|
27
23
|
//# 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;
|
|
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,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,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,GACP,EAAE,gBAAgB,2CA+FlB"}
|
|
@@ -4,11 +4,11 @@ import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/day
|
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
import { Flex } from '../flex/flex.js';
|
|
6
6
|
import { Popover } from '../popover/popover.js';
|
|
7
|
-
import { TextField } from '../textfield/textfield.js';
|
|
8
7
|
import { Calendar } from './calendar.js';
|
|
9
8
|
import styles from './calendar.module.css.js';
|
|
9
|
+
import { InputField } from '../input-field/input-field.js';
|
|
10
10
|
|
|
11
|
-
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY",
|
|
11
|
+
function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
|
|
12
12
|
to: new Date(),
|
|
13
13
|
from: new Date(),
|
|
14
14
|
}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
|
|
@@ -21,30 +21,26 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps
|
|
|
21
21
|
// 2nd click will select the end date.
|
|
22
22
|
// 3rd click will select the start date again.
|
|
23
23
|
const handleSelect = (range, selectedDay) => {
|
|
24
|
-
|
|
24
|
+
// TODO: Remove custom logic and reuse the default logic from react-day-picker
|
|
25
25
|
let newRange;
|
|
26
|
-
if (currentRangeField === "
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
// If
|
|
36
|
-
newRange = { from
|
|
26
|
+
if (currentRangeField === "from") {
|
|
27
|
+
// First click - set from date and prepare for to date selection
|
|
28
|
+
newRange = { from: selectedDay };
|
|
29
|
+
setCurrentRangeField("to");
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
// Second click - setting to date
|
|
33
|
+
const from = selectedRange.from;
|
|
34
|
+
if (dayjs(selectedDay).isBefore(dayjs(from))) {
|
|
35
|
+
// If selected date is before current from date, start new range
|
|
36
|
+
newRange = { from: selectedDay };
|
|
37
|
+
setCurrentRangeField("to");
|
|
37
38
|
}
|
|
38
39
|
else {
|
|
39
|
-
//
|
|
40
|
-
newRange = { from: selectedDay };
|
|
40
|
+
// Set the to date
|
|
41
|
+
newRange = { from, to: selectedDay };
|
|
42
|
+
setCurrentRangeField("from");
|
|
41
43
|
}
|
|
42
|
-
setCurrentRangeField("from");
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
// Reset the range and select start day
|
|
46
|
-
newRange = { from: selectedDay };
|
|
47
|
-
setCurrentRangeField("to");
|
|
48
44
|
}
|
|
49
45
|
setSelectedRange(newRange);
|
|
50
46
|
// Return the range with +1 day for the end date in the callback
|
|
@@ -57,7 +53,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", textFieldsProps
|
|
|
57
53
|
function onOpenChange(open) {
|
|
58
54
|
setShowCalendar(Boolean(open));
|
|
59
55
|
}
|
|
60
|
-
const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(
|
|
56
|
+
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 })] }));
|
|
61
57
|
const trigger = typeof children === 'function'
|
|
62
58
|
? children({ startDate, endDate })
|
|
63
59
|
: children || defaultTrigger;
|
|
@@ -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 {
|
|
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, endDate?: InputFieldProps };\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 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] = 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 // 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 setShowCalendar(Boolean(open));\n }\n\n const defaultTrigger = (\n <Flex gap={\"medium\"} className={pickerGroupClassName}>\n <InputField\n\t\t\t\tsize='small'\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\n />\n\n <InputField\n\t\t\t\tsize='small'\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n readOnly\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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"}
|
|
@@ -4,6 +4,7 @@ var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/rea
|
|
|
4
4
|
var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var box = require('../box/box.cjs');
|
|
7
|
+
var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
|
|
7
8
|
require('../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.cjs');
|
|
8
9
|
require('../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.cjs');
|
|
9
10
|
var flex = require('../flex/flex.cjs');
|
|
@@ -12,28 +13,41 @@ require('../tooltip/tooltip.cjs');
|
|
|
12
13
|
var datePicker = require('../calendar/date-picker.cjs');
|
|
13
14
|
require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
|
|
14
15
|
require('../popover/popover.cjs');
|
|
15
|
-
|
|
16
|
+
require('../input-field/input-field.cjs');
|
|
16
17
|
var text = require('../text/text.cjs');
|
|
18
|
+
var textfield = require('../textfield/textfield.cjs');
|
|
17
19
|
var filterChip_module = require('./filter-chip.module.css.cjs');
|
|
18
20
|
var filters = require('../../types/filters.cjs');
|
|
19
21
|
|
|
22
|
+
const chip = index.cva(filterChip_module.default.chip, {
|
|
23
|
+
variants: {
|
|
24
|
+
variant: {
|
|
25
|
+
default: filterChip_module.default["chip-default"],
|
|
26
|
+
text: null,
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
defaultVariants: {
|
|
30
|
+
variant: "default",
|
|
31
|
+
},
|
|
32
|
+
});
|
|
20
33
|
const Operation = ({ label, columnType = filters.FilterType.string, onOperationSelect, }) => {
|
|
21
34
|
const filterOptions = filters.filterOperators[columnType] || [];
|
|
22
35
|
// FilterOperatorTypes gives error as Select returns string
|
|
23
36
|
const [value, setValue] = React.useState(filterOptions?.[0]?.value);
|
|
24
37
|
React.useEffect(() => {
|
|
25
|
-
const selectedOption = filterOptions.find(
|
|
38
|
+
const selectedOption = filterOptions.find(o => o.value === value);
|
|
26
39
|
if (selectedOption) {
|
|
27
40
|
onOperationSelect(selectedOption);
|
|
28
41
|
}
|
|
29
42
|
}, [value]);
|
|
30
|
-
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "
|
|
43
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "text", className: filterChip_module.default.operation, "aria-label": `${label} filter operation`, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select operation", className: filterChip_module.default.operationText }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: filterOptions.map(opt => {
|
|
31
44
|
return (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value));
|
|
32
45
|
}) })] }));
|
|
33
46
|
};
|
|
34
|
-
const FilterChip = ({ label, value, onRemove
|
|
47
|
+
const FilterChip = ({ label, value, onRemove, className, ref, columnType = filters.FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, ...props }) => {
|
|
35
48
|
const [operation, setOperation] = React.useState();
|
|
36
49
|
const [filterValue, setFilterValue] = React.useState(value || "");
|
|
50
|
+
const showOnRemove = typeof onRemove === "function";
|
|
37
51
|
React.useEffect(() => {
|
|
38
52
|
if (onOperationChange && operation?.value) {
|
|
39
53
|
onOperationChange(operation?.value);
|
|
@@ -47,14 +61,14 @@ const FilterChip = ({ label, value, onRemove = () => null, className, ref, colum
|
|
|
47
61
|
const renderValueInput = () => {
|
|
48
62
|
switch (columnType) {
|
|
49
63
|
case filters.FilterType.select:
|
|
50
|
-
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "
|
|
64
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "text", className: filterChip_module.default.selectValue, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, { placeholder: "Select value" }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Content, { "data-variant": "filter", children: options.map(opt => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
|
|
51
65
|
case filters.FilterType.date:
|
|
52
|
-
return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect:
|
|
66
|
+
return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: filterChip_module.default.dateField } }) }));
|
|
53
67
|
default:
|
|
54
|
-
return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange:
|
|
68
|
+
return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.textFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(textfield.TextField, { className: filterChip_module.default.textField, value: filterValue, onChange: e => setFilterValue(e.target.value) }) }));
|
|
55
69
|
}
|
|
56
70
|
};
|
|
57
|
-
return (jsxRuntime.jsxRuntimeExports.jsx(box.Box, { ref: ref, className:
|
|
71
|
+
return (jsxRuntime.jsxRuntimeExports.jsx(box.Box, { ref: ref, className: chip({ variant, className }), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { align: "center", gap: 2, children: [leadingIcon && (jsxRuntime.jsxRuntimeExports.jsx("span", { className: filterChip_module.default.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntime.jsxRuntimeExports.jsx(text.Text, { size: 2, weight: "normal", children: label })] }), jsxRuntime.jsxRuntimeExports.jsx(Operation, { columnType: columnType, label: label, onOperationSelect: setOperation }), renderValueInput(), showOnRemove && (jsxRuntime.jsxRuntimeExports.jsx("button", { className: filterChip_module.default.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.Cross1Icon, { className: filterChip_module.default.removeIcon }) }))] }) }));
|
|
58
72
|
};
|
|
59
73
|
FilterChip.displayName = "FilterChip";
|
|
60
74
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.cjs","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement,ReactNode, useEffect, useState } from \"react\";\n\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n FilterOperation,\n filterOperators,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n} from \"~/v1/types/filters\";\n\nexport interface FilterChipProps {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n label: string;\n columnType: FilterTypes;\n onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n label,\n columnType = FilterType.string,\n onOperationSelect,\n}: OperationProps) => {\n const filterOptions = filterOperators[columnType] || [];\n // FilterOperatorTypes gives error as Select returns string\n const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n useEffect(() => {\n const selectedOption = filterOptions.find((o) => o.value === value);\n if (selectedOption) {\n onOperationSelect(selectedOption);\n }\n }, [value]);\n\n return (\n <Select\n value={value}\n onValueChange={setValue}\n aria-labelledby={`${label}-label`}\n >\n <Select.Trigger\n variant=\"filter\"\n className={styles.operation}\n aria-label={`${label} filter operation`}\n >\n <Select.Value\n placeholder=\"Select operation\"\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {filterOptions.map((opt) => {\n return (\n <Select.Item\n key={opt.value}\n value={opt.value}\n aria-label={`Filter ${label} ${opt.label}`}\n >\n {opt.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n\nexport const FilterChip = ({\n label,\n value,\n onRemove = () => null,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n ...props\n}: FilterChipProps) => {\n const [operation, setOperation] = useState<FilterOperation>();\n const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n useEffect(() => {\n if (onOperationChange && operation?.value) {\n onOperationChange(operation?.value);\n }\n }, [operation?.value]);\n\n useEffect(() => {\n if (onValueChange) {\n onValueChange(filterValue);\n }\n }, [filterValue]);\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.select:\n return (\n <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n <Select.Trigger variant=\"filter\" className={styles.selectValue}>\n <Select.Value placeholder=\"Select value\" />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {options.map((opt) => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={(date) => setFilterValue(date)}\n showCalendarIcon={false}\n textFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.textFieldWrapper}>\n <TextField\n className={styles.textField}\n value={filterValue}\n onChange={(e) => setFilterValue(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Box\n ref={ref}\n className={[styles.chip, className].filter(Boolean).join(\" \")}\n role=\"group\"\n aria-label={`Filter by ${label}`}\n {...props}\n >\n <Flex align=\"center\">\n <Flex align=\"center\" gap={2}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight=\"normal\">\n {label}\n </Text>\n </Flex>\n <Operation\n columnType={columnType}\n label={label}\n onOperationSelect={setOperation}\n />\n {renderValueInput()}\n <div\n className={styles.removeIconContainer}\n role=\"button\"\n tabIndex={0}\n aria-label={`Remove ${label} filter`}\n >\n <Cross1Icon className={styles.removeIcon} onClick={onRemove} />\n </div>\n </Flex>\n </Box>\n );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["FilterType","filterOperators","useState","useEffect","_jsxs","Select","_jsx","styles","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"filter-chip.cjs","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"sourcesContent":["import { Cross1Icon } from \"@radix-ui/react-icons\";\nimport { ReactElement, ReactNode, useEffect, useState } from \"react\";\n\nimport { Box } from \"../box\";\nimport { DatePicker } from \"../calendar\";\nimport { Flex } from \"../flex\";\nimport { Select } from \"../select\";\nimport { Text } from \"../text\";\nimport { TextField } from \"../textfield\";\nimport styles from \"./filter-chip.module.css\";\nimport {\n FilterOperation,\n filterOperators,\n FilterSelectOption,\n FilterType,\n FilterTypes,\n} from \"~/v1/types/filters\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst chip = cva(styles.chip, {\n variants: {\n variant: {\n default: styles[\"chip-default\"],\n text: null,\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n});\n\nexport interface FilterChipProps extends VariantProps<typeof chip> {\n label: string;\n value?: string;\n onRemove?: () => void;\n className?: string;\n ref?: React.RefObject<HTMLDivElement>;\n children?: ReactNode;\n columnType?: FilterTypes;\n options?: FilterSelectOption[];\n onValueChange?: (value: any) => void;\n onOperationChange?: (operation: string) => void;\n leadingIcon?: ReactElement;\n}\n\ninterface OperationProps {\n label: string;\n columnType: FilterTypes;\n onOperationSelect: (op: FilterOperation) => void;\n}\n\nconst Operation = ({\n label,\n columnType = FilterType.string,\n onOperationSelect,\n}: OperationProps) => {\n const filterOptions = filterOperators[columnType] || [];\n // FilterOperatorTypes gives error as Select returns string\n const [value, setValue] = useState<string>(filterOptions?.[0]?.value);\n\n useEffect(() => {\n const selectedOption = filterOptions.find(o => o.value === value);\n if (selectedOption) {\n onOperationSelect(selectedOption);\n }\n }, [value]);\n\n return (\n <Select\n value={value}\n onValueChange={setValue}\n aria-labelledby={`${label}-label`}>\n <Select.Trigger\n variant=\"text\"\n className={styles.operation}\n aria-label={`${label} filter operation`}>\n <Select.Value\n placeholder=\"Select operation\"\n className={styles.operationText}\n />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {filterOptions.map(opt => {\n return (\n <Select.Item\n key={opt.value}\n value={opt.value}\n aria-label={`Filter ${label} ${opt.label}`}>\n {opt.label}\n </Select.Item>\n );\n })}\n </Select.Content>\n </Select>\n );\n};\n\nexport const FilterChip = ({\n label,\n value,\n onRemove,\n className,\n ref,\n columnType = FilterType.string,\n options = [],\n onValueChange,\n onOperationChange,\n leadingIcon,\n variant,\n ...props\n}: FilterChipProps) => {\n const [operation, setOperation] = useState<FilterOperation>();\n const [filterValue, setFilterValue] = useState<any>(value || \"\");\n\n const showOnRemove = typeof onRemove === \"function\";\n\n useEffect(() => {\n if (onOperationChange && operation?.value) {\n onOperationChange(operation?.value);\n }\n }, [operation?.value]);\n\n useEffect(() => {\n if (onValueChange) {\n onValueChange(filterValue);\n }\n }, [filterValue]);\n\n const renderValueInput = () => {\n switch (columnType) {\n case FilterType.select:\n return (\n <Select value={filterValue.toString()} onValueChange={setFilterValue}>\n <Select.Trigger variant=\"text\" className={styles.selectValue}>\n <Select.Value placeholder=\"Select value\" />\n </Select.Trigger>\n <Select.Content data-variant=\"filter\">\n {options.map(opt => (\n <Select.Item\n key={opt.value.toString()}\n value={opt.value.toString()}>\n {opt.label}\n </Select.Item>\n ))}\n </Select.Content>\n </Select>\n );\n case FilterType.date:\n return (\n <div className={styles.dateFieldWrapper}>\n <DatePicker\n value={filterValue}\n onSelect={date => setFilterValue(date)}\n showCalendarIcon={false}\n textFieldProps={{ className: styles.dateField }}\n />\n </div>\n );\n default:\n return (\n <div className={styles.textFieldWrapper}>\n <TextField\n className={styles.textField}\n value={filterValue}\n onChange={e => setFilterValue(e.target.value)}\n />\n </div>\n );\n }\n };\n\n return (\n <Box\n ref={ref}\n className={chip({ variant, className })}\n role=\"group\"\n aria-label={`Filter by ${label}`}\n {...props}>\n <Flex align=\"center\">\n <Flex align=\"center\" gap={2}>\n {leadingIcon && (\n <span className={styles.leadingIcon} aria-hidden=\"true\">\n {leadingIcon}\n </span>\n )}\n <Text size={2} weight=\"normal\">\n {label}\n </Text>\n </Flex>\n <Operation\n columnType={columnType}\n label={label}\n onOperationSelect={setOperation}\n />\n {renderValueInput()}\n {showOnRemove && (\n <button\n className={styles.removeIconContainer}\n aria-label={`Remove ${label} filter`}\n onClick={onRemove}>\n <Cross1Icon className={styles.removeIcon} />\n </button>\n )}\n </Flex>\n </Box>\n );\n};\n\nFilterChip.displayName = \"FilterChip\";\n"],"names":["cva","styles","FilterType","filterOperators","useState","useEffect","_jsxs","Select","_jsx","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { ReactElement, ReactNode } from "react";
|
|
2
2
|
import { FilterSelectOption, FilterTypes } from "~/v1/types/filters";
|
|
3
|
-
|
|
3
|
+
import { VariantProps } from "class-variance-authority";
|
|
4
|
+
declare const chip: (props?: ({
|
|
5
|
+
variant?: "text" | "default" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
export interface FilterChipProps extends VariantProps<typeof chip> {
|
|
4
8
|
label: string;
|
|
5
9
|
value?: string;
|
|
6
10
|
onRemove?: () => void;
|
|
@@ -14,7 +18,8 @@ export interface FilterChipProps {
|
|
|
14
18
|
leadingIcon?: ReactElement;
|
|
15
19
|
}
|
|
16
20
|
export declare const FilterChip: {
|
|
17
|
-
({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
({ label, value, onRemove, className, ref, columnType, options, onValueChange, onOperationChange, leadingIcon, variant, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
|
|
18
22
|
displayName: string;
|
|
19
23
|
};
|
|
24
|
+
export {};
|
|
20
25
|
//# sourceMappingURL=filter-chip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"filter-chip.d.ts","sourceRoot":"","sources":["../../../../v1/components/filter-chip/filter-chip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AASrE,OAAO,EAGL,kBAAkB,EAElB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,QAAA,MAAM,IAAI;;8EAUR,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,YAAY,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAsDD,eAAO,MAAM,UAAU;wIAapB,eAAe;;CAgGjB,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/no
|
|
|
2
2
|
import { Cross1Icon } 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 { useState, useEffect } from 'react';
|
|
4
4
|
import { Box } from '../box/box.js';
|
|
5
|
+
import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
|
|
5
6
|
import '../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/UI.js';
|
|
6
7
|
import '../../node_modules/.pnpm/react-day-picker@9.0.4_react@18.2.0/node_modules/react-day-picker/dist/esm/useDayPicker.js';
|
|
7
8
|
import { Flex } from '../flex/flex.js';
|
|
@@ -10,28 +11,41 @@ import '../tooltip/tooltip.js';
|
|
|
10
11
|
import { DatePicker } from '../calendar/date-picker.js';
|
|
11
12
|
import '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
|
|
12
13
|
import '../popover/popover.js';
|
|
13
|
-
import
|
|
14
|
+
import '../input-field/input-field.js';
|
|
14
15
|
import { Text } from '../text/text.js';
|
|
16
|
+
import { TextField } from '../textfield/textfield.js';
|
|
15
17
|
import styles from './filter-chip.module.css.js';
|
|
16
18
|
import { FilterType, filterOperators } from '../../types/filters.js';
|
|
17
19
|
|
|
20
|
+
const chip = cva(styles.chip, {
|
|
21
|
+
variants: {
|
|
22
|
+
variant: {
|
|
23
|
+
default: styles["chip-default"],
|
|
24
|
+
text: null,
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: {
|
|
28
|
+
variant: "default",
|
|
29
|
+
},
|
|
30
|
+
});
|
|
18
31
|
const Operation = ({ label, columnType = FilterType.string, onOperationSelect, }) => {
|
|
19
32
|
const filterOptions = filterOperators[columnType] || [];
|
|
20
33
|
// FilterOperatorTypes gives error as Select returns string
|
|
21
34
|
const [value, setValue] = useState(filterOptions?.[0]?.value);
|
|
22
35
|
useEffect(() => {
|
|
23
|
-
const selectedOption = filterOptions.find(
|
|
36
|
+
const selectedOption = filterOptions.find(o => o.value === value);
|
|
24
37
|
if (selectedOption) {
|
|
25
38
|
onOperationSelect(selectedOption);
|
|
26
39
|
}
|
|
27
40
|
}, [value]);
|
|
28
|
-
return (jsxRuntimeExports.jsxs(Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "
|
|
41
|
+
return (jsxRuntimeExports.jsxs(Select, { value: value, onValueChange: setValue, "aria-labelledby": `${label}-label`, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "text", className: styles.operation, "aria-label": `${label} filter operation`, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select operation", className: styles.operationText }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: filterOptions.map(opt => {
|
|
29
42
|
return (jsxRuntimeExports.jsx(Select.Item, { value: opt.value, "aria-label": `Filter ${label} ${opt.label}`, children: opt.label }, opt.value));
|
|
30
43
|
}) })] }));
|
|
31
44
|
};
|
|
32
|
-
const FilterChip = ({ label, value, onRemove
|
|
45
|
+
const FilterChip = ({ label, value, onRemove, className, ref, columnType = FilterType.string, options = [], onValueChange, onOperationChange, leadingIcon, variant, ...props }) => {
|
|
33
46
|
const [operation, setOperation] = useState();
|
|
34
47
|
const [filterValue, setFilterValue] = useState(value || "");
|
|
48
|
+
const showOnRemove = typeof onRemove === "function";
|
|
35
49
|
useEffect(() => {
|
|
36
50
|
if (onOperationChange && operation?.value) {
|
|
37
51
|
onOperationChange(operation?.value);
|
|
@@ -45,14 +59,14 @@ const FilterChip = ({ label, value, onRemove = () => null, className, ref, colum
|
|
|
45
59
|
const renderValueInput = () => {
|
|
46
60
|
switch (columnType) {
|
|
47
61
|
case FilterType.select:
|
|
48
|
-
return (jsxRuntimeExports.jsxs(Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "
|
|
62
|
+
return (jsxRuntimeExports.jsxs(Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "text", className: styles.selectValue, children: jsxRuntimeExports.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports.jsx(Select.Content, { "data-variant": "filter", children: options.map(opt => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), children: opt.label }, opt.value.toString()))) })] }));
|
|
49
63
|
case FilterType.date:
|
|
50
|
-
return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect:
|
|
64
|
+
return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: styles.dateField } }) }));
|
|
51
65
|
default:
|
|
52
|
-
return (jsxRuntimeExports.jsx("div", { className: styles.textFieldWrapper, children: jsxRuntimeExports.jsx(TextField, { className: styles.textField, value: filterValue, onChange:
|
|
66
|
+
return (jsxRuntimeExports.jsx("div", { className: styles.textFieldWrapper, children: jsxRuntimeExports.jsx(TextField, { className: styles.textField, value: filterValue, onChange: e => setFilterValue(e.target.value) }) }));
|
|
53
67
|
}
|
|
54
68
|
};
|
|
55
|
-
return (jsxRuntimeExports.jsx(Box, { ref: ref, className:
|
|
69
|
+
return (jsxRuntimeExports.jsx(Box, { ref: ref, className: chip({ variant, className }), role: "group", "aria-label": `Filter by ${label}`, ...props, children: jsxRuntimeExports.jsxs(Flex, { align: "center", children: [jsxRuntimeExports.jsxs(Flex, { align: "center", gap: 2, children: [leadingIcon && (jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": "true", children: leadingIcon })), jsxRuntimeExports.jsx(Text, { size: 2, weight: "normal", children: label })] }), jsxRuntimeExports.jsx(Operation, { columnType: columnType, label: label, onOperationSelect: setOperation }), renderValueInput(), showOnRemove && (jsxRuntimeExports.jsx("button", { className: styles.removeIconContainer, "aria-label": `Remove ${label} filter`, onClick: onRemove, children: jsxRuntimeExports.jsx(Cross1Icon, { className: styles.removeIcon }) }))] }) }));
|
|
56
70
|
};
|
|
57
71
|
FilterChip.displayName = "FilterChip";
|
|
58
72
|
|