npm - @raystack/apsara - Versions diffs - 0.46.0-rc.2 → 0.46.0-rc.4 - Mend

@raystack/apsara 0.46.0-rc.2 → 0.46.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/dist/v1/components/calendar/range-picker.cjs.map CHANGED Viewed

	@@ -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 { useRef, useState, useMemo } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" \| \"right\" \| \"bottom\" \| \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?:\n \| React.ReactNode\n \| ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n timeZone?: string;\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 timeZone,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] =\n useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);\n\n const prevSelectedRangeRef = useRef(selectedRange);\n\n const startDate = selectedRange.from\n ? dayjs(selectedRange.from).format(dateFormat)\n : \"\";\n const endDate = selectedRange.to\n ? dayjs(selectedRange.to).format(dateFormat)\n : \"\";\n\n // Ensures two months are visible even when \n // current month is the last allowed month (endMonth).\n const computedDefaultMonth = useMemo(() => {\n let month = currentMonth;\n if (calendarProps?.endMonth) {\n const endMonth = dayjs(calendarProps.endMonth);\n const fromMonth = dayjs(currentMonth);\n \n if (fromMonth.isSame(endMonth, 'month')) {\n month = endMonth.subtract(1, 'month').toDate();\n }\n }\n return month;\n }, [currentMonth, calendarProps?.endMonth]);\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 onSelect(newRange);\n };\n\n function onOpenChange(open?: boolean) {\n const currOpen = Boolean(open);\n\n setShowCalendar(currOpen);\n\n // Reset selected range if calendar is closed and start or end date is empty\n if (!currOpen && (!startDate.length \|\| !endDate.length)) {\n setSelectedRange(prevSelectedRangeRef.current);\n onSelect(prevSelectedRangeRef.current);\n }\n\n // Update previous selected range reference when both start and end dates are selected\n if (!currOpen && startDate.length && endDate.length) {\n prevSelectedRangeRef.current = selectedRange;\n }\n }\n\n const defaultTrigger = (\n <Flex gap=\"medium\" className={pickerGroupClassName}>\n <InputField\n size='small'\n placeholder=\"Select start date\"\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n className={styles.datePickerInput}\n readOnly\n />\n\n <InputField\n size='small'\n placeholder=\"Select end date\"\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n className={styles.datePickerInput}\n readOnly\n />\n </Flex>\n );\n\n const trigger =\n typeof children === \"function\"\n ? children({ startDate, endDate })\n : children \|\| defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n timeZone={timeZone}\n mode=\"range\"\n month={computedDefaultMonth}\n selected={selectedRange}\n onSelect={handleSelect}\n onMonthChange={setCurrentMonth}\n />\n {footer && (\n <Flex\n align=\"center\"\n justify=\"center\"\n className={styles.calendarFooter}\n >\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["useState","useRef","dayjs","useMemo","_jsxs","Flex","_jsx","InputField","CalendarIcon","styles","Popover","Calendar"],"mappings":"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"}
1	+ {"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState, useMemo } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" \| \"right\" \| \"bottom\" \| \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?:\n \| React.ReactNode\n \| ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n timeZone?: string;\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 timeZone,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] =\n useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);\n\n const prevSelectedRangeRef = useRef(selectedRange);\n\n const startDate = selectedRange.from\n ? dayjs(selectedRange.from).format(dateFormat)\n : \"\";\n const endDate = selectedRange.to\n ? dayjs(selectedRange.to).format(dateFormat)\n : \"\";\n\n // Ensures two months are visible even when\n // current month is the last allowed month (endMonth).\n const computedDefaultMonth = useMemo(() => {\n let month = currentMonth;\n if (calendarProps?.endMonth) {\n const endMonth = dayjs(calendarProps.endMonth);\n const fromMonth = dayjs(currentMonth);\n\n if (fromMonth.isSame(endMonth, 'month')) {\n month = endMonth.subtract(1, 'month').toDate();\n }\n }\n return month;\n }, [currentMonth, calendarProps?.endMonth]);\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 onSelect(newRange);\n };\n\n function onOpenChange(open?: boolean) {\n const currOpen = Boolean(open);\n\n setShowCalendar(currOpen);\n\n // Reset selected range if calendar is closed and start or end date is empty\n if (!currOpen && (!startDate.length \|\| !endDate.length)) {\n setSelectedRange(prevSelectedRangeRef.current);\n onSelect(prevSelectedRangeRef.current);\n }\n\n // Update previous selected range reference when both start and end dates are selected\n if (!currOpen && startDate.length && endDate.length) {\n prevSelectedRangeRef.current = selectedRange;\n }\n }\n\n const defaultTrigger = (\n <Flex gap=\"medium\" className={pickerGroupClassName}>\n <InputField\n size='small'\n placeholder=\"Select start date\"\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n readOnly\n />\n\n <InputField\n size='small'\n placeholder=\"Select end date\"\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n readOnly\n />\n </Flex>\n );\n\n const trigger =\n typeof children === \"function\"\n ? children({ startDate, endDate })\n : children \|\| defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n timeZone={timeZone}\n mode=\"range\"\n month={computedDefaultMonth}\n selected={selectedRange}\n onSelect={handleSelect}\n onMonthChange={setCurrentMonth}\n />\n {footer && (\n <Flex\n align=\"center\"\n justify=\"center\"\n className={styles.calendarFooter}\n >\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["useState","useRef","dayjs","useMemo","_jsxs","Flex","_jsx","InputField","CalendarIcon","styles","Popover","Calendar"],"mappings":";;;;;;;;;;;;AA8BM,SAAU,WAAW,CAAC,EAC1B,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,YAAY,EACzB,gBAAgB,GAAG,EAAE,EACrB,aAAa,EACb,QAAQ,GAAG,MAAO,GAAC,EACnB,KAAK,GAAG;IACN,EAAE,EAAE,IAAI,IAAI,EAAE;IACd,IAAI,EAAE,IAAI,IAAI,EAAE;CACjB,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,MAAM,EACN,QAAQ,GACS,EAAA;IACjB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAC7CA,cAAQ,CAAc,MAAM,CAAC,CAAC;IAChC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;AAC1D,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;AAEtE,IAAA,MAAM,oBAAoB,GAAGC,YAAM,CAAC,aAAa,CAAC,CAAC;AAEnD,IAAA,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI;UAChCC,iBAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;UAC5C,EAAE,CAAC;AACP,IAAA,MAAM,OAAO,GAAG,aAAa,CAAC,EAAE;UAC5BA,iBAAK,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;UAC1C,EAAE,CAAC;;;AAIP,IAAA,MAAM,oBAAoB,GAAGC,aAAO,CAAC,MAAK;QACxC,IAAI,KAAK,GAAG,YAAY,CAAC;AACzB,QAAA,IAAI,aAAa,EAAE,QAAQ,EAAE;YAC3B,MAAM,QAAQ,GAAGD,iBAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC/C,YAAA,MAAM,SAAS,GAAGA,iBAAK,CAAC,YAAY,CAAC,CAAC;YAEtC,IAAI,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;AACvC,gBAAA,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC;aAChD;SACF;AACD,QAAA,OAAO,KAAK,CAAC;KACd,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;;;;AAK5C,IAAA,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,WAAiB,KAAI;;AAE3D,QAAA,IAAI,QAAmB,CAAC;AAExB,QAAA,IAAI,iBAAiB,KAAK,MAAM,EAAE;;AAEhC,YAAA,QAAQ,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;YACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;aAAM;;AAEL,YAAA,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;AAEhC,YAAA,IAAIA,iBAAK,CAAC,WAAW,CAAC,CAAC,QAAQ,CAACA,iBAAK,CAAC,IAAI,CAAC,CAAC,EAAE;;AAE5C,gBAAA,QAAQ,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;gBACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC;aAC5B;iBAAM;;gBAEL,QAAQ,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC;gBACrC,oBAAoB,CAAC,MAAM,CAAC,CAAC;aAC9B;SACF;QAED,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACrB,KAAC,CAAC;IAEF,SAAS,YAAY,CAAC,IAAc,EAAA;AAClC,QAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAE/B,eAAe,CAAC,QAAQ,CAAC,CAAC;;AAG1B,QAAA,IAAI,CAAC,QAAQ,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;AACvD,YAAA,gBAAgB,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAC/C,YAAA,QAAQ,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;SACxC;;QAGD,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,EAAE;AACnD,YAAA,oBAAoB,CAAC,OAAO,GAAG,aAAa,CAAC;SAC9C;KACF;IAED,MAAM,cAAc,IAClBE,iCAAA,CAACC,SAAI,EAAC,EAAA,GAAG,EAAC,QAAQ,EAAC,SAAS,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAChDC,gCAAC,CAAAC,qBAAU,EACT,EAAA,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,mBAAmB,EAC/B,YAAY,EAAE,gBAAgB,GAAGD,gCAAA,CAACE,2BAAY,EAAG,EAAA,CAAA,GAAG,SAAS,EAC7D,SAAS,EAAEC,uBAAM,CAAC,eAAe,EAC7B,IAAC,gBAAgB,CAAC,SAAS,IAAI,EAAE,CAAC,EACtC,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,IAAA,EAAA,CAAA,EAEFH,iCAACC,qBAAU,EAAA,EACT,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,iBAAiB,EAC7B,YAAY,EAAE,gBAAgB,GAAGD,gCAAC,CAAAE,2BAAY,EAAG,EAAA,CAAA,GAAG,SAAS,EAC7D,SAAS,EAAEC,uBAAM,CAAC,eAAe,EAAA,IAC5B,gBAAgB,CAAC,OAAO,IAAI,EAAE,CAAC,EACpC,KAAK,EAAE,OAAO,EACd,QAAQ,EAAA,IAAA,EAAA,CACR,CACG,EAAA,CAAA,CACR,CAAC;AAEF,IAAA,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,UAAU;UAC1B,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAClC,UAAE,QAAQ,IAAI,cAAc,CAAC;IAEjC,QACEL,iCAAC,CAAAM,eAAO,EAAC,EAAA,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAA,QAAA,EAAA,CACrDJ,iCAACI,eAAO,CAAC,OAAO,EAAA,EAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EAAE,OAAO,EAAmB,CAAA,EACpDN,iCAAC,CAAAM,eAAO,CAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAED,uBAAM,CAAC,eAAe,EAC5D,QAAA,EAAA,CAAAH,gCAAA,CAACK,iBAAQ,EAAA,EACP,eAAe,EAAE,KAAK,EACtB,cAAc,EAAE,CAAC,EACjB,YAAY,EAAE,aAAa,CAAC,IAAI,EAChC,QAAQ,EAAE,IAAI,EAAA,GACV,aAAa,EACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,oBAAoB,EAC3B,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,eAAe,EAAA,CAC9B,EACD,MAAM,KACLL,gCAAA,CAACD,SAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAEI,uBAAM,CAAC,cAAc,EAAA,QAAA,EAE/B,MAAM,EAAA,CACF,CACR,CAAA,EAAA,CACe,CACV,EAAA,CAAA,EACV;AACJ;;;;"}

package/dist/v1/components/calendar/range-picker.js CHANGED Viewed

@@ -23,7 +23,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
     const endDate = selectedRange.to
         ? dayjs(selectedRange.to).format(dateFormat)
         : "";
-    // Ensures two months are visible even when
+    // Ensures two months are visible even when
     // current month is the last allowed month (endMonth).
     const computedDefaultMonth = useMemo(() => {
         let month = currentMonth;
@@ -77,7 +77,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             prevSelectedRangeRef.current = selectedRange;
         }
     }
-    const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select start date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, ...(inputFieldsProps.startDate ?? {}), value: startDate, className: styles.datePickerInput, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select end date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, ...(inputFieldsProps.endDate ?? {}), value: endDate, className: styles.datePickerInput, readOnly: true })] }));
+    const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select start date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.startDate ?? {}), value: startDate, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select end date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, className: styles.datePickerInput, ...(inputFieldsProps.endDate ?? {}), value: endDate, readOnly: true })] }));
     const trigger = typeof children === "function"
         ? children({ startDate, endDate })
         : children || defaultTrigger;

package/dist/v1/components/calendar/range-picker.js.map CHANGED Viewed

	@@ -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 { useRef, useState, useMemo } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" \| \"right\" \| \"bottom\" \| \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?:\n \| React.ReactNode\n \| ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n timeZone?: string;\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 timeZone,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] =\n useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);\n\n const prevSelectedRangeRef = useRef(selectedRange);\n\n const startDate = selectedRange.from\n ? dayjs(selectedRange.from).format(dateFormat)\n : \"\";\n const endDate = selectedRange.to\n ? dayjs(selectedRange.to).format(dateFormat)\n : \"\";\n\n // Ensures two months are visible even when \n // current month is the last allowed month (endMonth).\n const computedDefaultMonth = useMemo(() => {\n let month = currentMonth;\n if (calendarProps?.endMonth) {\n const endMonth = dayjs(calendarProps.endMonth);\n const fromMonth = dayjs(currentMonth);\n \n if (fromMonth.isSame(endMonth, 'month')) {\n month = endMonth.subtract(1, 'month').toDate();\n }\n }\n return month;\n }, [currentMonth, calendarProps?.endMonth]);\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 onSelect(newRange);\n };\n\n function onOpenChange(open?: boolean) {\n const currOpen = Boolean(open);\n\n setShowCalendar(currOpen);\n\n // Reset selected range if calendar is closed and start or end date is empty\n if (!currOpen && (!startDate.length \|\| !endDate.length)) {\n setSelectedRange(prevSelectedRangeRef.current);\n onSelect(prevSelectedRangeRef.current);\n }\n\n // Update previous selected range reference when both start and end dates are selected\n if (!currOpen && startDate.length && endDate.length) {\n prevSelectedRangeRef.current = selectedRange;\n }\n }\n\n const defaultTrigger = (\n <Flex gap=\"medium\" className={pickerGroupClassName}>\n <InputField\n size='small'\n placeholder=\"Select start date\"\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n ~~className={styles.datePickerInput}\n~~ readOnly\n />\n\n <InputField\n size='small'\n placeholder=\"Select end date\"\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n ~~className={styles.datePickerInput}\n~~ readOnly\n />\n </Flex>\n );\n\n const trigger =\n typeof children === \"function\"\n ? children({ startDate, endDate })\n : children \|\| defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n timeZone={timeZone}\n mode=\"range\"\n month={computedDefaultMonth}\n selected={selectedRange}\n onSelect={handleSelect}\n onMonthChange={setCurrentMonth}\n />\n {footer && (\n <Flex\n align=\"center\"\n justify=\"center\"\n className={styles.calendarFooter}\n >\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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~~EAAA~~,~~IACxD~~,gBAAgB,CAAC,SAAS,IAAI,EAAE,CAAC,EACtC,KAAK,EAAE,SAAS,EAChB,~~SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,~~QAAQ,EACR,IAAA,EAAA,CAAA,EAEFA,sBAAC,UAAU,EAAA,EACT,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,iBAAiB,EAC7B,YAAY,EAAE,gBAAgB,GAAGA,qBAAC,CAAA,YAAY,EAAG,EAAA,CAAA,GAAG,SAAS,~~EACzD~~,~~IAAC~~,gBAAgB,CAAC,OAAO,IAAI,EAAE,CAAC,EACpC,KAAK,EAAE,OAAO,EACd,~~SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,~~QAAQ,EAAA,IAAA,EAAA,CACR,CACG,EAAA,CAAA,CACR,CAAC;AAEF,IAAA,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,UAAU;UAC1B,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAClC,UAAE,QAAQ,IAAI,cAAc,CAAC;IAEjC,QACED,sBAAC,CAAA,OAAO,EAAC,EAAA,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAA,QAAA,EAAA,CACrDC,sBAAC,OAAO,CAAC,OAAO,EAAA,EAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EAAE,OAAO,EAAmB,CAAA,EACpDD,sBAAC,CAAA,OAAO,CAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,EAC5D,QAAA,EAAA,CAAAC,qBAAA,CAAC,QAAQ,EAAA,EACP,eAAe,EAAE,KAAK,EACtB,cAAc,EAAE,CAAC,EACjB,YAAY,EAAE,aAAa,CAAC,IAAI,EAChC,QAAQ,EAAE,IAAI,EAAA,GACV,aAAa,EACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,oBAAoB,EAC3B,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,eAAe,EAAA,CAC9B,EACD,MAAM,KACLA,qBAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,QAAA,EAE/B,MAAM,EAAA,CACF,CACR,CAAA,EAAA,CACe,CACV,EAAA,CAAA,EACV;AACJ;;;;"}
1	+ {"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState, useMemo } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n side?: \"top\" \| \"right\" \| \"bottom\" \| \"left\";\n dateFormat?: string;\n inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n calendarProps?: PropsRangeRequired & PropsBase;\n onSelect?: (date: DateRange) => void;\n pickerGroupClassName?: string;\n value?: DateRange;\n children?:\n \| React.ReactNode\n \| ((props: { startDate: string; endDate: string }) => React.ReactNode);\n showCalendarIcon?: boolean;\n footer?: React.ReactNode;\n timeZone?: string;\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 timeZone,\n}: RangePickerProps) {\n const [showCalendar, setShowCalendar] = useState(false);\n const [currentRangeField, setCurrentRangeField] =\n useState<RangeFields>(\"from\");\n const [selectedRange, setSelectedRange] = useState(value);\n const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);\n\n const prevSelectedRangeRef = useRef(selectedRange);\n\n const startDate = selectedRange.from\n ? dayjs(selectedRange.from).format(dateFormat)\n : \"\";\n const endDate = selectedRange.to\n ? dayjs(selectedRange.to).format(dateFormat)\n : \"\";\n\n // Ensures two months are visible even when\n // current month is the last allowed month (endMonth).\n const computedDefaultMonth = useMemo(() => {\n let month = currentMonth;\n if (calendarProps?.endMonth) {\n const endMonth = dayjs(calendarProps.endMonth);\n const fromMonth = dayjs(currentMonth);\n\n if (fromMonth.isSame(endMonth, 'month')) {\n month = endMonth.subtract(1, 'month').toDate();\n }\n }\n return month;\n }, [currentMonth, calendarProps?.endMonth]);\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 onSelect(newRange);\n };\n\n function onOpenChange(open?: boolean) {\n const currOpen = Boolean(open);\n\n setShowCalendar(currOpen);\n\n // Reset selected range if calendar is closed and start or end date is empty\n if (!currOpen && (!startDate.length \|\| !endDate.length)) {\n setSelectedRange(prevSelectedRangeRef.current);\n onSelect(prevSelectedRangeRef.current);\n }\n\n // Update previous selected range reference when both start and end dates are selected\n if (!currOpen && startDate.length && endDate.length) {\n prevSelectedRangeRef.current = selectedRange;\n }\n }\n\n const defaultTrigger = (\n <Flex gap=\"medium\" className={pickerGroupClassName}>\n <InputField\n size='small'\n placeholder=\"Select start date\"\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n {...(inputFieldsProps.startDate ?? {})}\n value={startDate}\n readOnly\n />\n\n <InputField\n size='small'\n placeholder=\"Select end date\"\n trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n className={styles.datePickerInput}\n {...(inputFieldsProps.endDate ?? {})}\n value={endDate}\n readOnly\n />\n </Flex>\n );\n\n const trigger =\n typeof children === \"function\"\n ? children({ startDate, endDate })\n : children \|\| defaultTrigger;\n\n return (\n <Popover open={showCalendar} onOpenChange={onOpenChange}>\n <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n <Popover.Content side={side} className={styles.calendarPopover}>\n <Calendar\n showOutsideDays={false}\n numberOfMonths={2}\n defaultMonth={selectedRange.from}\n required={true}\n {...calendarProps}\n timeZone={timeZone}\n mode=\"range\"\n month={computedDefaultMonth}\n selected={selectedRange}\n onSelect={handleSelect}\n onMonthChange={setCurrentMonth}\n />\n {footer && (\n <Flex\n align=\"center\"\n justify=\"center\"\n className={styles.calendarFooter}\n >\n {footer}\n </Flex>\n )}\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/v1/components/data-table/components/filters.cjs CHANGED Viewed

@@ -1,44 +1,44 @@
 'use strict';
 var jsxRuntime = require('../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var filter = require('../../../icons/assets/filter.svg.cjs');
+var filters = require('../../../types/filters.cjs');
 var button = require('../../button/button.cjs');
 var dropdownMenu = require('../../dropdown-menu/dropdown-menu.cjs');
 var filterChip = require('../../filter-chip/filter-chip.cjs');
 var flex = require('../../flex/flex.cjs');
 var iconButton = require('../../icon-button/icon-button.cjs');
-var filter = require('../../../icons/assets/filter.svg.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
-var filters = require('../../../types/filters.cjs');
 var useFilters = require('../hooks/useFilters.cjs');
-function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, }) {
-    const availableFilters = columnList?.filter((col) => !appliedFiltersSet.has(col.id));
-    return availableFilters.length > 0 ? (jsxRuntime.jsxRuntimeExports.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: appliedFiltersSet.size > 0 ? (jsxRuntime.jsxRuntimeExports.jsx(iconButton.IconButton, { size: 4, children: jsxRuntime.jsxRuntimeExports.jsx(filter.ReactComponent, {}) })) : (jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "text", size: "small", leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(filter.ReactComponent, {}), children: "Filter" })) }), jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Content, { align: "start", children: availableFilters?.map((column) => {
+function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter }) {
+    const availableFilters = columnList?.filter(col => !appliedFiltersSet.has(col.id));
+    return availableFilters.length > 0 ? (jsxRuntime.jsxRuntimeExports.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: appliedFiltersSet.size > 0 ? (jsxRuntime.jsxRuntimeExports.jsx(iconButton.IconButton, { size: 4, children: jsxRuntime.jsxRuntimeExports.jsx(filter.ReactComponent, {}) })) : (jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: 'text', size: 'small', leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(filter.ReactComponent, {}), children: "Filter" })) }), jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Content, { children: availableFilters?.map(column => {
                     const columnDef = column.columnDef;
                     const id = columnDef.accessorKey || column.id;
-                    return (jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Item, { onSelect: () => onAddFilter(column), children: columnDef.header || id }, id));
+                    return (jsxRuntime.jsxRuntimeExports.jsx(dropdownMenu.DropdownMenu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
                 }) })] })) : null;
 }
 function Filters() {
     const { table, tableQuery } = useDataTable.useDataTable();
     const columns = table?.getAllColumns();
-    const { onAddFilter, handleRemoveFilter, handleFilterValueChange, handleFilterOperationChange, } = useFilters.useFilters();
-    const columnList = columns?.filter((column) => column.columnDef.enableColumnFilter);
-    const appliedFiltersSet = new Set(tableQuery?.filters?.map((filter) => filter.name));
-    const appliedFilters = tableQuery?.filters?.map((filter) => {
-        const columnDef = columns?.find((col) => {
+    const { onAddFilter, handleRemoveFilter, handleFilterValueChange, handleFilterOperationChange } = useFilters.useFilters();
+    const columnList = columns?.filter(column => column.columnDef.enableColumnFilter);
+    const appliedFiltersSet = new Set(tableQuery?.filters?.map(filter => filter.name));
+    const appliedFilters = tableQuery?.filters?.map(filter => {
+        const columnDef = columns?.find(col => {
             const columnDef = col.columnDef;
             const id = columnDef.accessorKey || col.id;
             return id === filter.name;
         })?.columnDef;
         return {
             filterType: columnDef?.filterType || filters.FilterType.string,
-            label: columnDef?.header || "",
+            label: columnDef?.header || '',
             options: columnDef?.filterOptions || [],
-            ...filter,
+            ...filter
         };
     }) || [];
-    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 3, children: [jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 3, children: appliedFilters.map((filter) => (jsxRuntime.jsxRuntimeExports.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: (value) => handleFilterValueChange(filter.name, value), onOperationChange: (operator) => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options }, filter.name))) }), jsxRuntime.jsxRuntimeExports.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter })] }));
+    return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 3, children: [jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 3, children: appliedFilters.map(filter => (jsxRuntime.jsxRuntimeExports.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options }, filter.name))) }), jsxRuntime.jsxRuntimeExports.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter })] }));
 }
 exports.Filters = Filters;

package/dist/v1/components/data-table/components/filters.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filters.cjs","sources":["../../../../../v1/components/data-table/components/filters.tsx"],"sourcesContent":["import { Button } from \"../../button\";\nimport { DropdownMenu } from \"../../dropdown-menu\";\nimport { FilterChip } from \"../../filter-chip\";\nimport { Flex } from \"../../flex\";\nimport { IconButton } from \"../../icon-button\";\nimport { ~~FilterIcon } from \"~/icons\";\nimport {~~ DataTableColumn } from \"../data-table.types\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport { ~~FilterOperatorTypes, FilterType } from \"~/v1/types/filters\";\nimport {~~ useFilters } from \"../hooks/useFilters\";\n\ninterface AddFilterProps<TData, TValue> {\n columnList: DataTableColumn<TData, TValue>[];\n appliedFiltersSet: Set<string>;\n onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n columnList = [],\n appliedFiltersSet,\n onAddFilter,\n}: AddFilterProps<TData, TValue>) {\n const availableFilters = columnList?.filter(\n (col) => !appliedFiltersSet.has(col.id)\n );\n\n return availableFilters.length > 0 ? (\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>\n {appliedFiltersSet.size > 0 ? (\n <IconButton size={4}>\n <FilterIcon />\n </IconButton>\n ) : (\n <Button variant={\"text\"} size={\"small\"} leadingIcon={<FilterIcon />}>\n Filter\n </Button>\n )}\n </DropdownMenu.Trigger>\n <DropdownMenu.Content ~~align=\"start\"~~>\n {availableFilters?.map((column) => {\n const columnDef = column.columnDef;\n const id = columnDef.accessorKey \|\| column.id;\n return (\n <DropdownMenu.Item key={id} ~~onSelect~~={() => onAddFilter(column)}>\n {columnDef.header \|\| id}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu>\n ) : null;\n}\n\nexport function Filters<TData, TValue>() {\n const { table, tableQuery } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const {\n onAddFilter,\n handleRemoveFilter,\n handleFilterValueChange,\n handleFilterOperationChange,\n } = useFilters<TData, TValue>();\n\n const columnList = columns?.filter(\n (column) => column.columnDef.enableColumnFilter\n );\n\n const appliedFiltersSet = new Set(\n tableQuery?.filters?.map((filter) => filter.name)\n );\n\n const appliedFilters =\n tableQuery?.filters?.map((filter) => {\n const columnDef = columns?.find((col) => {\n const columnDef = col.columnDef;\n const id = columnDef.accessorKey \|\| col.id;\n return id === filter.name;\n })?.columnDef;\n return {\n filterType: columnDef?.filterType \|\| FilterType.string,\n label: (columnDef?.header as string) \|\| ~~\"\"~~,\n options: columnDef?.filterOptions \|\| [],\n ...filter,\n };\n }) \|\| [];\n\n return (\n <Flex gap={3}>\n <Flex gap={3}>\n {appliedFilters.map((filter) => (\n <FilterChip\n key={filter.name}\n label={filter.label}\n value={filter.value}\n onRemove={() => handleRemoveFilter(filter.name)}\n onValueChange={(value) ~~=>\n~~ handleFilterValueChange(filter.name, value)\n }\n onOperationChange={(operator) =>\n handleFilterOperationChange(\n filter.name,\n operator as FilterOperatorTypes\n )\n }\n columnType={filter.filterType}\n options={filter.options}\n />\n ))}\n </Flex>\n <AddFilter\n columnList={columnList}\n appliedFiltersSet={appliedFiltersSet}\n onAddFilter={onAddFilter}\n />\n </Flex>\n );\n}\n"],"names":["_jsxs","DropdownMenu","_jsx","IconButton","FilterIcon","Button","useDataTable","useFilters","FilterType","Flex","FilterChip"],"mappings":";;;;;;;;;;;;;AAiBA,SAAS,SAAS,CAAgB,EAChC,UAAU,GAAG,EAAE,EACf,iBAAiB,EACjB,WAAW,~~GACmB~~,EAAA;IAC9B,MAAM,gBAAgB,GAAG,UAAU,EAAE,MAAM,CACzC,~~CAAC,~~GAAG,~~KAAK~~,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,~~CACxC~~,CAAC;AAEF,IAAA,OAAO,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAChCA,~~iCAAA~~,~~CAACC,~~yBAAY,~~EACX~~,EAAA,QAAA,EAAA,~~CAAAC~~,~~gCAAA~~,~~CAACD~~,yBAAY,CAAC,OAAO,~~IAAC~~,OAAO,EAAA,IAAA,EAAA,QAAA,EAC1B,iBAAiB,CAAC,IAAI,GAAG,CAAC,IACzBC,gCAAA,CAACC,qBAAU,EAAA,~~EAAC,~~IAAI,EAAE,CAAC,YACjBD,gCAAC,CAAAE,qBAAU,~~KAAG~~,~~EACH~~,CAAA,KAEbF,~~gCAAA~~,~~CAACG,~~aAAM,EAAA,EAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAEH,~~gCAAA~~,~~CAACE~~,qBAAU,~~EAAG~~,~~EAAA~~,~~CAAA,EAAA,~~QAAA,EAAA,QAAA,EAAA,~~CAE1D~~,CACV,~~EAAA~~,~~CACoB~~,EACvBF,~~gCAAC~~,~~CAAAD,~~yBAAY,CAAC,OAAO,~~IAAC~~,~~KAAK,EAAC,OAAO,~~EAAA,QAAA,~~EAChC~~,gBAAgB,EAAE,GAAG,CAAC,~~CAAC,~~MAAM,~~KAAI~~;~~AAChC~~,oBAAA,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;oBACnC,MAAM,EAAE,GAAG,SAAS,CAAC,WAAW,IAAI,MAAM,CAAC,EAAE,CAAC;oBAC9C,QACEC,gCAAC,CAAAD,yBAAY,CAAC,IAAI,IAAU,~~QAAQ~~,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,~~EAC5D~~,QAAA,EAAA,SAAS,CAAC,MAAM,IAAI,EAAE,EADD,EAAA,EAAE,CAEN,EACpB;iBACH,CAAC,GACmB,CACV,EAAA,CAAA,IACb,IAAI,CAAC;AACX,CAAC;SAEe,OAAO,GAAA;IACrB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAGK,yBAAY,EAAE,CAAC;AAC7C,IAAA,MAAM,OAAO,GAAG,KAAK,EAAE,aAAa,EAAsC,CAAC;AAE3E,IAAA,MAAM,EACJ,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,~~GAC5B~~,GAAGC,qBAAU,EAAiB,CAAC;AAEhC,IAAA,MAAM,UAAU,GAAG,OAAO,EAAE,MAAM,CAChC,~~CAAC,~~MAAM,~~KAAK~~,MAAM,CAAC,SAAS,CAAC,kBAAkB,~~CAChD~~,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAC/B,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,~~CAAC,~~MAAM,~~KAAK~~,MAAM,CAAC,IAAI,CAAC,~~CAClD~~,CAAC;IAEF,MAAM,cAAc,GAClB,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,~~CAAC,~~MAAM,~~KAAI~~;~~QAClC~~,MAAM,SAAS,GAAG,OAAO,EAAE,IAAI,CAAC,~~CAAC,~~GAAG,~~KAAI~~;~~AACtC~~,YAAA,MAAM,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC;YAChC,MAAM,EAAE,GAAG,SAAS,CAAC,WAAW,IAAI,GAAG,CAAC,EAAE,CAAC;AAC3C,YAAA,OAAO,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC;SAC3B,CAAC,EAAE,SAAS,CAAC;QACd,OAAO;AACL,YAAA,UAAU,EAAE,SAAS,EAAE,UAAU,IAAIC,kBAAU,CAAC,MAAM;AACtD,YAAA,KAAK,EAAG,SAAS,EAAE,MAAiB,IAAI,EAAE;AAC1C,YAAA,OAAO,EAAE,SAAS,EAAE,aAAa,IAAI,EAAE;AACvC,YAAA,GAAG,MAAM;SACV,CAAC;KACH,CAAC,IAAI,EAAE,CAAC;IAEX,QACER,iCAAC,CAAAS,SAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EACV,QAAA,EAAA,CAAAP,gCAAA,CAACO,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,~~EAAA~~,QAAA,~~EACT~~,cAAc,CAAC,GAAG,CAAC,~~CAAC,~~MAAM,~~MACzBP~~,gCAAC,CAAAQ,qBAAU,EAET,EAAA,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC,EAC/C,aAAa,EAAE,~~CAAC,~~KAAK,~~KACnB~~,uBAAuB,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,~~EAE7C~~,iBAAiB,EAAE,~~CAAC,~~QAAQ,~~KAC1B~~,2BAA2B,CACzB,MAAM,CAAC,IAAI,EACX,QAA+B,CAChC,EAEH,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,OAAO,EAAE,MAAM,CAAC,OAAO,~~EAdlB~~,EAAA,MAAM,CAAC,IAAI,~~CAehB~~,CACH,CAAC,EAAA,CACG,EACPR,gCAAA,CAAC,SAAS,EAAA,EACR,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EAAA,CACxB,CACG,EAAA,CAAA,EACP;AACJ;;;;"}
1	+ {"version":3,"file":"filters.cjs","sources":["../../../../../v1/components/data-table/components/filters.tsx"],"sourcesContent":["import { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/v1/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ninterface AddFilterProps<TData, TValue> {\n columnList: DataTableColumn<TData, TValue>[];\n appliedFiltersSet: Set<string>;\n onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n columnList = [],\n appliedFiltersSet,\n onAddFilter\n}: AddFilterProps<TData, TValue>) {\n const availableFilters = columnList?.filter(\n col => !appliedFiltersSet.has(col.id)\n );\n\n return availableFilters.length > 0 ? (\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>\n {appliedFiltersSet.size > 0 ? (\n <IconButton size={4}>\n <FilterIcon />\n </IconButton>\n ) : (\n <Button variant={'text'} size={'small'} leadingIcon={<FilterIcon />}>\n Filter\n </Button>\n )}\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {availableFilters?.map(column => {\n const columnDef = column.columnDef;\n const id = columnDef.accessorKey \|\| column.id;\n return (\n <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n {columnDef.header \|\| id}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu>\n ) : null;\n}\n\nexport function Filters<TData, TValue>() {\n const { table, tableQuery } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const {\n onAddFilter,\n handleRemoveFilter,\n handleFilterValueChange,\n handleFilterOperationChange\n } = useFilters<TData, TValue>();\n\n const columnList = columns?.filter(\n column => column.columnDef.enableColumnFilter\n );\n\n const appliedFiltersSet = new Set(\n tableQuery?.filters?.map(filter => filter.name)\n );\n\n const appliedFilters =\n tableQuery?.filters?.map(filter => {\n const columnDef = columns?.find(col => {\n const columnDef = col.columnDef;\n const id = columnDef.accessorKey \|\| col.id;\n return id === filter.name;\n })?.columnDef;\n return {\n filterType: columnDef?.filterType \|\| FilterType.string,\n label: (columnDef?.header as string) \|\| '',\n options: columnDef?.filterOptions \|\| [],\n ...filter\n };\n }) \|\| [];\n\n return (\n <Flex gap={3}>\n <Flex gap={3}>\n {appliedFilters.map(filter => (\n <FilterChip\n key={filter.name}\n label={filter.label}\n value={filter.value}\n onRemove={() => handleRemoveFilter(filter.name)}\n onValueChange={value => handleFilterValueChange(filter.name, value)}\n onOperationChange={operator =>\n handleFilterOperationChange(\n filter.name,\n operator as FilterOperatorTypes\n )\n }\n columnType={filter.filterType}\n options={filter.options}\n />\n ))}\n </Flex>\n <AddFilter\n columnList={columnList}\n appliedFiltersSet={appliedFiltersSet}\n onAddFilter={onAddFilter}\n />\n </Flex>\n );\n}\n"],"names":["_jsxs","DropdownMenu","_jsx","IconButton","FilterIcon","Button","useDataTable","useFilters","FilterType","Flex","FilterChip"],"mappings":"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"}

package/dist/v1/components/data-table/components/filters.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/filters.tsx"],"names":[],"mappings":"AAsDA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,~~6CAgEpC~~"}
1	+ {"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/filters.tsx"],"names":[],"mappings":"AAsDA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,6CA8DpC"}

package/dist/v1/components/data-table/components/filters.js CHANGED Viewed

@@ -1,42 +1,42 @@
 import { j as jsxRuntimeExports } from '../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { ReactComponent as SvgFilter } from '../../../icons/assets/filter.svg.js';
+import { FilterType } from '../../../types/filters.js';
 import { Button } from '../../button/button.js';
 import { DropdownMenu } from '../../dropdown-menu/dropdown-menu.js';
 import { FilterChip } from '../../filter-chip/filter-chip.js';
 import { Flex } from '../../flex/flex.js';
 import { IconButton } from '../../icon-button/icon-button.js';
-import { ReactComponent as SvgFilter } from '../../../icons/assets/filter.svg.js';
 import { useDataTable } from '../hooks/useDataTable.js';
-import { FilterType } from '../../../types/filters.js';
 import { useFilters } from '../hooks/useFilters.js';
-function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, }) {
-    const availableFilters = columnList?.filter((col) => !appliedFiltersSet.has(col.id));
-    return availableFilters.length > 0 ? (jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenu.Trigger, { asChild: true, children: appliedFiltersSet.size > 0 ? (jsxRuntimeExports.jsx(IconButton, { size: 4, children: jsxRuntimeExports.jsx(SvgFilter, {}) })) : (jsxRuntimeExports.jsx(Button, { variant: "text", size: "small", leadingIcon: jsxRuntimeExports.jsx(SvgFilter, {}), children: "Filter" })) }), jsxRuntimeExports.jsx(DropdownMenu.Content, { align: "start", children: availableFilters?.map((column) => {
+function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter }) {
+    const availableFilters = columnList?.filter(col => !appliedFiltersSet.has(col.id));
+    return availableFilters.length > 0 ? (jsxRuntimeExports.jsxs(DropdownMenu, { children: [jsxRuntimeExports.jsx(DropdownMenu.Trigger, { asChild: true, children: appliedFiltersSet.size > 0 ? (jsxRuntimeExports.jsx(IconButton, { size: 4, children: jsxRuntimeExports.jsx(SvgFilter, {}) })) : (jsxRuntimeExports.jsx(Button, { variant: 'text', size: 'small', leadingIcon: jsxRuntimeExports.jsx(SvgFilter, {}), children: "Filter" })) }), jsxRuntimeExports.jsx(DropdownMenu.Content, { children: availableFilters?.map(column => {
                     const columnDef = column.columnDef;
                     const id = columnDef.accessorKey || column.id;
-                    return (jsxRuntimeExports.jsx(DropdownMenu.Item, { onSelect: () => onAddFilter(column), children: columnDef.header || id }, id));
+                    return (jsxRuntimeExports.jsx(DropdownMenu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
                 }) })] })) : null;
 }
 function Filters() {
     const { table, tableQuery } = useDataTable();
     const columns = table?.getAllColumns();
-    const { onAddFilter, handleRemoveFilter, handleFilterValueChange, handleFilterOperationChange, } = useFilters();
-    const columnList = columns?.filter((column) => column.columnDef.enableColumnFilter);
-    const appliedFiltersSet = new Set(tableQuery?.filters?.map((filter) => filter.name));
-    const appliedFilters = tableQuery?.filters?.map((filter) => {
-        const columnDef = columns?.find((col) => {
+    const { onAddFilter, handleRemoveFilter, handleFilterValueChange, handleFilterOperationChange } = useFilters();
+    const columnList = columns?.filter(column => column.columnDef.enableColumnFilter);
+    const appliedFiltersSet = new Set(tableQuery?.filters?.map(filter => filter.name));
+    const appliedFilters = tableQuery?.filters?.map(filter => {
+        const columnDef = columns?.find(col => {
             const columnDef = col.columnDef;
             const id = columnDef.accessorKey || col.id;
             return id === filter.name;
         })?.columnDef;
         return {
             filterType: columnDef?.filterType || FilterType.string,
-            label: columnDef?.header || "",
+            label: columnDef?.header || '',
             options: columnDef?.filterOptions || [],
-            ...filter,
+            ...filter
         };
     }) || [];
-    return (jsxRuntimeExports.jsxs(Flex, { gap: 3, children: [jsxRuntimeExports.jsx(Flex, { gap: 3, children: appliedFilters.map((filter) => (jsxRuntimeExports.jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: (value) => handleFilterValueChange(filter.name, value), onOperationChange: (operator) => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options }, filter.name))) }), jsxRuntimeExports.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter })] }));
+    return (jsxRuntimeExports.jsxs(Flex, { gap: 3, children: [jsxRuntimeExports.jsx(Flex, { gap: 3, children: appliedFilters.map(filter => (jsxRuntimeExports.jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options }, filter.name))) }), jsxRuntimeExports.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter })] }));
 }
 export { Filters };

package/dist/v1/components/data-table/components/filters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filters.js","sources":["../../../../../v1/components/data-table/components/filters.tsx"],"sourcesContent":["import { Button } from \"../../button\";\nimport { DropdownMenu } from \"../../dropdown-menu\";\nimport { FilterChip } from \"../../filter-chip\";\nimport { Flex } from \"../../flex\";\nimport { IconButton } from \"../../icon-button\";\nimport { ~~FilterIcon } from \"~/icons\";\nimport {~~ DataTableColumn } from \"../data-table.types\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport { ~~FilterOperatorTypes, FilterType } from \"~/v1/types/filters\";\nimport {~~ useFilters } from \"../hooks/useFilters\";\n\ninterface AddFilterProps<TData, TValue> {\n columnList: DataTableColumn<TData, TValue>[];\n appliedFiltersSet: Set<string>;\n onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n columnList = [],\n appliedFiltersSet,\n onAddFilter,\n}: AddFilterProps<TData, TValue>) {\n const availableFilters = columnList?.filter(\n (col) => !appliedFiltersSet.has(col.id)\n );\n\n return availableFilters.length > 0 ? (\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>\n {appliedFiltersSet.size > 0 ? (\n <IconButton size={4}>\n <FilterIcon />\n </IconButton>\n ) : (\n <Button variant={\"text\"} size={\"small\"} leadingIcon={<FilterIcon />}>\n Filter\n </Button>\n )}\n </DropdownMenu.Trigger>\n <DropdownMenu.Content ~~align=\"start\"~~>\n {availableFilters?.map((column) => {\n const columnDef = column.columnDef;\n const id = columnDef.accessorKey \|\| column.id;\n return (\n <DropdownMenu.Item key={id} ~~onSelect~~={() => onAddFilter(column)}>\n {columnDef.header \|\| id}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu>\n ) : null;\n}\n\nexport function Filters<TData, TValue>() {\n const { table, tableQuery } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const {\n onAddFilter,\n handleRemoveFilter,\n handleFilterValueChange,\n handleFilterOperationChange,\n } = useFilters<TData, TValue>();\n\n const columnList = columns?.filter(\n (column) => column.columnDef.enableColumnFilter\n );\n\n const appliedFiltersSet = new Set(\n tableQuery?.filters?.map((filter) => filter.name)\n );\n\n const appliedFilters =\n tableQuery?.filters?.map((filter) => {\n const columnDef = columns?.find((col) => {\n const columnDef = col.columnDef;\n const id = columnDef.accessorKey \|\| col.id;\n return id === filter.name;\n })?.columnDef;\n return {\n filterType: columnDef?.filterType \|\| FilterType.string,\n label: (columnDef?.header as string) \|\| ~~\"\"~~,\n options: columnDef?.filterOptions \|\| [],\n ...filter,\n };\n }) \|\| [];\n\n return (\n <Flex gap={3}>\n <Flex gap={3}>\n {appliedFilters.map((filter) => (\n <FilterChip\n key={filter.name}\n label={filter.label}\n value={filter.value}\n onRemove={() => handleRemoveFilter(filter.name)}\n onValueChange={(value) ~~=>\n~~ handleFilterValueChange(filter.name, value)\n }\n onOperationChange={(operator) =>\n handleFilterOperationChange(\n filter.name,\n operator as FilterOperatorTypes\n )\n }\n columnType={filter.filterType}\n options={filter.options}\n />\n ))}\n </Flex>\n <AddFilter\n columnList={columnList}\n appliedFiltersSet={appliedFiltersSet}\n onAddFilter={onAddFilter}\n />\n </Flex>\n );\n}\n"],"names":["_jsxs","_jsx","FilterIcon"],"mappings":";;;;;;;;;;;AAiBA,SAAS,SAAS,CAAgB,EAChC,UAAU,GAAG,EAAE,EACf,iBAAiB,EACjB,WAAW,~~GACmB~~,EAAA;IAC9B,MAAM,gBAAgB,GAAG,UAAU,EAAE,MAAM,CACzC,~~CAAC,~~GAAG,~~KAAK~~,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,~~CACxC~~,CAAC;AAEF,IAAA,OAAO,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAChCA,~~sBAAA~~,~~CAAC,~~YAAY,~~EACX~~,EAAA,QAAA,EAAA,~~CAAAC~~,~~qBAAA~~,~~CAAC~~,YAAY,CAAC,OAAO,~~IAAC~~,OAAO,EAAA,IAAA,EAAA,QAAA,EAC1B,iBAAiB,CAAC,IAAI,GAAG,CAAC,IACzBA,qBAAA,CAAC,UAAU,EAAA,~~EAAC,~~IAAI,EAAE,CAAC,YACjBA,qBAAC,CAAAC,SAAU,~~KAAG~~,~~EACH~~,CAAA,KAEbD,~~qBAAA~~,~~CAAC,~~MAAM,EAAA,EAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAEA,~~qBAAA~~,~~CAACC~~,SAAU,~~EAAG~~,~~EAAA~~,~~CAAA,EAAA,~~QAAA,EAAA,QAAA,EAAA,~~CAE1D~~,CACV,~~EAAA~~,~~CACoB~~,EACvBD,~~qBAAC~~,~~CAAA,~~YAAY,CAAC,OAAO,~~IAAC~~,~~KAAK,EAAC,OAAO,~~EAAA,QAAA,~~EAChC~~,gBAAgB,EAAE,GAAG,CAAC,~~CAAC,~~MAAM,~~KAAI~~;~~AAChC~~,oBAAA,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;oBACnC,MAAM,EAAE,GAAG,SAAS,CAAC,WAAW,IAAI,MAAM,CAAC,EAAE,CAAC;oBAC9C,QACEA,qBAAC,CAAA,YAAY,CAAC,IAAI,IAAU,~~QAAQ~~,EAAE,MAAM,WAAW,CAAC,MAAM,CAAC,~~EAC5D~~,QAAA,EAAA,SAAS,CAAC,MAAM,IAAI,EAAE,EADD,EAAA,EAAE,CAEN,EACpB;iBACH,CAAC,GACmB,CACV,EAAA,CAAA,IACb,IAAI,CAAC;AACX,CAAC;SAEe,OAAO,GAAA;IACrB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;AAC7C,IAAA,MAAM,OAAO,GAAG,KAAK,EAAE,aAAa,EAAsC,CAAC;AAE3E,IAAA,MAAM,EACJ,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,~~GAC5B~~,GAAG,UAAU,EAAiB,CAAC;AAEhC,IAAA,MAAM,UAAU,GAAG,OAAO,EAAE,MAAM,CAChC,~~CAAC,~~MAAM,~~KAAK~~,MAAM,CAAC,SAAS,CAAC,kBAAkB,~~CAChD~~,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAC/B,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,~~CAAC,~~MAAM,~~KAAK~~,MAAM,CAAC,IAAI,CAAC,~~CAClD~~,CAAC;IAEF,MAAM,cAAc,GAClB,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,~~CAAC,~~MAAM,~~KAAI~~;~~QAClC~~,MAAM,SAAS,GAAG,OAAO,EAAE,IAAI,CAAC,~~CAAC,~~GAAG,~~KAAI~~;~~AACtC~~,YAAA,MAAM,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC;YAChC,MAAM,EAAE,GAAG,SAAS,CAAC,WAAW,IAAI,GAAG,CAAC,EAAE,CAAC;AAC3C,YAAA,OAAO,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC;SAC3B,CAAC,EAAE,SAAS,CAAC;QACd,OAAO;AACL,YAAA,UAAU,EAAE,SAAS,EAAE,UAAU,IAAI,UAAU,CAAC,MAAM;AACtD,YAAA,KAAK,EAAG,SAAS,EAAE,MAAiB,IAAI,EAAE;AAC1C,YAAA,OAAO,EAAE,SAAS,EAAE,aAAa,IAAI,EAAE;AACvC,YAAA,GAAG,MAAM;SACV,CAAC;KACH,CAAC,IAAI,EAAE,CAAC;IAEX,QACED,sBAAC,CAAA,IAAI,EAAC,EAAA,GAAG,EAAE,CAAC,EACV,QAAA,EAAA,CAAAC,qBAAA,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,~~EAAA~~,QAAA,~~EACT~~,cAAc,CAAC,GAAG,CAAC,~~CAAC,~~MAAM,~~MACzBA~~,qBAAC,CAAA,UAAU,EAET,EAAA,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,kBAAkB,CAAC,MAAM,CAAC,IAAI,CAAC,EAC/C,aAAa,EAAE,~~CAAC,~~KAAK,~~KACnB~~,uBAAuB,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,~~EAE7C~~,iBAAiB,EAAE,~~CAAC,~~QAAQ,~~KAC1B~~,2BAA2B,CACzB,MAAM,CAAC,IAAI,EACX,QAA+B,CAChC,EAEH,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,OAAO,EAAE,MAAM,CAAC,OAAO,~~EAdlB~~,EAAA,MAAM,CAAC,IAAI,~~CAehB~~,CACH,CAAC,EAAA,CACG,EACPA,qBAAA,CAAC,SAAS,EAAA,EACR,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EAAA,CACxB,CACG,EAAA,CAAA,EACP;AACJ;;;;"}
1	+ {"version":3,"file":"filters.js","sources":["../../../../../v1/components/data-table/components/filters.tsx"],"sourcesContent":["import { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/v1/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ninterface AddFilterProps<TData, TValue> {\n columnList: DataTableColumn<TData, TValue>[];\n appliedFiltersSet: Set<string>;\n onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n columnList = [],\n appliedFiltersSet,\n onAddFilter\n}: AddFilterProps<TData, TValue>) {\n const availableFilters = columnList?.filter(\n col => !appliedFiltersSet.has(col.id)\n );\n\n return availableFilters.length > 0 ? (\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>\n {appliedFiltersSet.size > 0 ? (\n <IconButton size={4}>\n <FilterIcon />\n </IconButton>\n ) : (\n <Button variant={'text'} size={'small'} leadingIcon={<FilterIcon />}>\n Filter\n </Button>\n )}\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {availableFilters?.map(column => {\n const columnDef = column.columnDef;\n const id = columnDef.accessorKey \|\| column.id;\n return (\n <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n {columnDef.header \|\| id}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu>\n ) : null;\n}\n\nexport function Filters<TData, TValue>() {\n const { table, tableQuery } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const {\n onAddFilter,\n handleRemoveFilter,\n handleFilterValueChange,\n handleFilterOperationChange\n } = useFilters<TData, TValue>();\n\n const columnList = columns?.filter(\n column => column.columnDef.enableColumnFilter\n );\n\n const appliedFiltersSet = new Set(\n tableQuery?.filters?.map(filter => filter.name)\n );\n\n const appliedFilters =\n tableQuery?.filters?.map(filter => {\n const columnDef = columns?.find(col => {\n const columnDef = col.columnDef;\n const id = columnDef.accessorKey \|\| col.id;\n return id === filter.name;\n })?.columnDef;\n return {\n filterType: columnDef?.filterType \|\| FilterType.string,\n label: (columnDef?.header as string) \|\| '',\n options: columnDef?.filterOptions \|\| [],\n ...filter\n };\n }) \|\| [];\n\n return (\n <Flex gap={3}>\n <Flex gap={3}>\n {appliedFilters.map(filter => (\n <FilterChip\n key={filter.name}\n label={filter.label}\n value={filter.value}\n onRemove={() => handleRemoveFilter(filter.name)}\n onValueChange={value => handleFilterValueChange(filter.name, value)}\n onOperationChange={operator =>\n handleFilterOperationChange(\n filter.name,\n operator as FilterOperatorTypes\n )\n }\n columnType={filter.filterType}\n options={filter.options}\n />\n ))}\n </Flex>\n <AddFilter\n columnList={columnList}\n appliedFiltersSet={appliedFiltersSet}\n onAddFilter={onAddFilter}\n />\n </Flex>\n );\n}\n"],"names":["_jsxs","_jsx","FilterIcon"],"mappings":"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"}

package/dist/v1/components/filter-chip/filter-chip.cjs CHANGED Viewed

@@ -8,6 +8,8 @@ var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/nod
 var flex = require('../flex/flex.cjs');
 var select = require('../select/select.cjs');
 require('../tooltip/tooltip.cjs');
+require('../skeleton/skeleton.cjs');
+require('../icon-button/icon-button.cjs');
 var datePicker = require('../calendar/date-picker.cjs');
 require('../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.cjs');
 require('../popover/popover.cjs');
@@ -61,7 +63,7 @@ const FilterChip = ({ label, value, onRemove, className, ref, columnType = filte
             case filters.FilterType.select:
                 return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { variant: "text", className: index.cx(filterChip_module.default.selectValue, filterChip_module.default.selectColumn), 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()))) })] }));
             case filters.FilterType.date:
-                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 } }) }));
+                return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: filterChip_module.default.dateFieldWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(datePicker.DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, inputFieldProps: { className: filterChip_module.default.dateField } }) }));
             default:
                 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) }) }));
         }

package/dist/v1/components/filter-chip/filter-chip.cjs.map CHANGED Viewed

	@@ -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\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, cx, 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.selectValue}\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\n variant=\"text\"\n className={cx(styles.selectValue, styles.selectColumn)}>\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","cx","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, cx, 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.selectValue}\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\n variant=\"text\"\n className={cx(styles.selectValue, styles.selectColumn)}>\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 inputFieldProps={{ 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","cx","DatePicker","TextField","Box","Flex","Text","Cross1Icon"],"mappings":"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"}

package/dist/v1/components/filter-chip/filter-chip.js CHANGED Viewed

@@ -6,6 +6,8 @@ import { cva, cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1
 import { Flex } from '../flex/flex.js';
 import { Select } from '../select/select.js';
 import '../tooltip/tooltip.js';
+import '../skeleton/skeleton.js';
+import '../icon-button/icon-button.js';
 import { DatePicker } from '../calendar/date-picker.js';
 import '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
 import '../popover/popover.js';
@@ -59,7 +61,7 @@ const FilterChip = ({ label, value, onRemove, className, ref, columnType = Filte
             case FilterType.select:
                 return (jsxRuntimeExports.jsxs(Select, { value: filterValue.toString(), onValueChange: setFilterValue, children: [jsxRuntimeExports.jsx(Select.Trigger, { variant: "text", className: cx(styles.selectValue, styles.selectColumn), 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()))) })] }));
             case FilterType.date:
-                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, textFieldProps: { className: styles.dateField } }) }));
+                return (jsxRuntimeExports.jsx("div", { className: styles.dateFieldWrapper, children: jsxRuntimeExports.jsx(DatePicker, { value: filterValue, onSelect: date => setFilterValue(date), showCalendarIcon: false, inputFieldProps: { className: styles.dateField } }) }));
             default:
                 return (jsxRuntimeExports.jsx("div", { className: styles.textFieldWrapper, children: jsxRuntimeExports.jsx(TextField, { className: styles.textField, value: filterValue, onChange: e => setFilterValue(e.target.value) }) }));
         }

package/dist/v1/components/filter-chip/filter-chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-chip.js","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, cx, 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.selectValue}\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\n variant=\"text\"\n className={cx(styles.selectValue, styles.selectColumn)}>\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":["_jsxs","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"filter-chip.js","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, cx, 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.selectValue}\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\n variant=\"text\"\n className={cx(styles.selectValue, styles.selectColumn)}>\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 inputFieldProps={{ 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":["_jsxs","_jsx"],"mappings":"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"}

package/dist/v1/components/grid/grid-item.cjs ADDED Viewed

@@ -0,0 +1,25 @@
+'use strict';
+var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
+var React = require('react');
+var index = require('../../node_modules/.pnpm/@radix-ui_react-slot@1.0.2_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.cjs');
+const GridItem = React.forwardRef(({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, asChild, ...props }, ref) => {
+    const Comp = asChild ? index.Slot : "div";
+    return (jsxRuntime.jsxRuntimeExports.jsx(Comp, { ref: ref, style: {
+            gridArea: area,
+            gridColumnStart: colStart,
+            gridColumnEnd: colEnd,
+            gridRowStart: rowStart,
+            gridRowEnd: rowEnd,
+            gridColumn: colSpan ? `span ${colSpan}` : undefined,
+            gridRow: rowSpan ? `span ${rowSpan}` : undefined,
+            justifySelf,
+            alignSelf,
+            ...style,
+        }, ...props }));
+});
+GridItem.displayName = "GridItem";
+exports.GridItem = GridItem;
+//# sourceMappingURL=grid-item.cjs.map

package/dist/v1/components/grid/grid-item.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"grid-item.cjs","sources":["../../../../v1/components/grid/grid-item.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { AlignType } from \"./types\";\n\ntype GridItemProps = HTMLAttributes<HTMLDivElement> & {\n area?: string;\n colStart?: number | string;\n colEnd?: number | string;\n rowStart?: number | string;\n rowEnd?: number | string;\n colSpan?: number | string;\n rowSpan?: number | string;\n justifySelf?: AlignType;\n alignSelf?: AlignType;\n asChild?: boolean;\n};\n\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n (\n {\n area,\n colStart,\n colEnd,\n rowStart,\n rowEnd,\n colSpan,\n rowSpan,\n justifySelf,\n alignSelf,\n style,\n asChild,\n ...props\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : \"div\";\n\n return (\n <Comp\n ref={ref}\n style={{\n gridArea: area,\n gridColumnStart: colStart,\n gridColumnEnd: colEnd,\n gridRowStart: rowStart,\n gridRowEnd: rowEnd,\n gridColumn: colSpan ? `span ${colSpan}` : undefined,\n gridRow: rowSpan ? `span ${rowSpan}` : undefined,\n justifySelf,\n alignSelf,\n ...style,\n }}\n {...props}\n />\n );\n },\n);\n\nGridItem.displayName = \"GridItem\";\n"],"names":["forwardRef","Slot","_jsx"],"mappings":";;;;;;AAiBa,MAAA,QAAQ,GAAGA,gBAAU,CAChC,CACE,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,IAAI,GAAG,OAAO,GAAGC,UAAI,GAAG,KAAK,CAAC;IAEpC,QACEC,iCAAC,IAAI,EAAA,EACH,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,aAAa,EAAE,MAAM;AACrB,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,UAAU,EAAE,MAAM;YAClB,UAAU,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;YACnD,OAAO,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;YAChD,WAAW;YACX,SAAS;AACT,YAAA,GAAG,KAAK;SACT,EACG,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/v1/components/grid/grid-item.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from "react";
+import { AlignType } from "./types";
+export declare const GridItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    area?: string | undefined;
+    colStart?: string | number | undefined;
+    colEnd?: string | number | undefined;
+    rowStart?: string | number | undefined;
+    rowEnd?: string | number | undefined;
+    colSpan?: string | number | undefined;
+    rowSpan?: string | number | undefined;
+    justifySelf?: AlignType | undefined;
+    alignSelf?: AlignType | undefined;
+    asChild?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=grid-item.d.ts.map

package/dist/v1/components/grid/grid-item.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../../v1/components/grid/grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAepC,eAAO,MAAM,QAAQ;;;;;;;;;;;kDAuCpB,CAAC"}

package/dist/v1/components/grid/grid-item.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/.pnpm/@radix-ui_react-slot@1.0.2_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.js';
+const GridItem = forwardRef(({ area, colStart, colEnd, rowStart, rowEnd, colSpan, rowSpan, justifySelf, alignSelf, style, asChild, ...props }, ref) => {
+    const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "div";
+    return (jsxRuntimeExports.jsx(Comp, { ref: ref, style: {
+            gridArea: area,
+            gridColumnStart: colStart,
+            gridColumnEnd: colEnd,
+            gridRowStart: rowStart,
+            gridRowEnd: rowEnd,
+            gridColumn: colSpan ? `span ${colSpan}` : undefined,
+            gridRow: rowSpan ? `span ${rowSpan}` : undefined,
+            justifySelf,
+            alignSelf,
+            ...style,
+        }, ...props }));
+});
+GridItem.displayName = "GridItem";
+export { GridItem };
+//# sourceMappingURL=grid-item.js.map

package/dist/v1/components/grid/grid-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"grid-item.js","sources":["../../../../v1/components/grid/grid-item.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { AlignType } from \"./types\";\n\ntype GridItemProps = HTMLAttributes<HTMLDivElement> & {\n area?: string;\n colStart?: number | string;\n colEnd?: number | string;\n rowStart?: number | string;\n rowEnd?: number | string;\n colSpan?: number | string;\n rowSpan?: number | string;\n justifySelf?: AlignType;\n alignSelf?: AlignType;\n asChild?: boolean;\n};\n\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n (\n {\n area,\n colStart,\n colEnd,\n rowStart,\n rowEnd,\n colSpan,\n rowSpan,\n justifySelf,\n alignSelf,\n style,\n asChild,\n ...props\n },\n ref,\n ) => {\n const Comp = asChild ? Slot : \"div\";\n\n return (\n <Comp\n ref={ref}\n style={{\n gridArea: area,\n gridColumnStart: colStart,\n gridColumnEnd: colEnd,\n gridRowStart: rowStart,\n gridRowEnd: rowEnd,\n gridColumn: colSpan ? `span ${colSpan}` : undefined,\n gridRow: rowSpan ? `span ${rowSpan}` : undefined,\n justifySelf,\n alignSelf,\n ...style,\n }}\n {...props}\n />\n );\n },\n);\n\nGridItem.displayName = \"GridItem\";\n"],"names":["Slot","_jsx"],"mappings":";;;;AAiBa,MAAA,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,KACD;IACF,MAAM,IAAI,GAAG,OAAO,GAAGA,yCAAI,GAAG,KAAK,CAAC;IAEpC,QACEC,sBAAC,IAAI,EAAA,EACH,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,eAAe,EAAE,QAAQ;AACzB,YAAA,aAAa,EAAE,MAAM;AACrB,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,UAAU,EAAE,MAAM;YAClB,UAAU,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;YACnD,OAAO,EAAE,OAAO,GAAG,CAAQ,KAAA,EAAA,OAAO,CAAE,CAAA,GAAG,SAAS;YAChD,WAAW;YACX,SAAS;AACT,YAAA,GAAG,KAAK;SACT,EACG,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}