@raystack/apsara 0.33.1 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +1 -1
- package/dist/v1/components/calendar/calendar.cjs +2 -2
- package/dist/v1/components/calendar/calendar.cjs.map +1 -1
- package/dist/v1/components/calendar/calendar.d.ts.map +1 -1
- package/dist/v1/components/calendar/calendar.js +2 -2
- package/dist/v1/components/calendar/calendar.js.map +1 -1
- package/dist/v1/components/data-table/components/content.cjs +10 -5
- package/dist/v1/components/data-table/components/content.cjs.map +1 -1
- package/dist/v1/components/data-table/components/content.d.ts.map +1 -1
- package/dist/v1/components/data-table/components/content.js +10 -5
- package/dist/v1/components/data-table/components/content.js.map +1 -1
- package/dist/v1/components/data-table/components/display-properties.cjs +1 -1
- package/dist/v1/components/data-table/components/display-properties.cjs.map +1 -1
- package/dist/v1/components/data-table/components/display-properties.js +1 -1
- package/dist/v1/components/data-table/components/display-properties.js.map +1 -1
- package/dist/v1/components/data-table/components/display-settings.cjs +2 -2
- package/dist/v1/components/data-table/components/display-settings.cjs.map +1 -1
- package/dist/v1/components/data-table/components/display-settings.d.ts.map +1 -1
- package/dist/v1/components/data-table/components/display-settings.js +1 -1
- package/dist/v1/components/data-table/components/display-settings.js.map +1 -1
- package/dist/v1/components/data-table/components/filters.cjs +3 -2
- package/dist/v1/components/data-table/components/filters.cjs.map +1 -1
- package/dist/v1/components/data-table/components/filters.js +3 -2
- package/dist/v1/components/data-table/components/filters.js.map +1 -1
- package/dist/v1/components/data-table/components/grouping.cjs +1 -2
- package/dist/v1/components/data-table/components/grouping.cjs.map +1 -1
- package/dist/v1/components/data-table/components/grouping.d.ts.map +1 -1
- package/dist/v1/components/data-table/components/grouping.js +1 -2
- package/dist/v1/components/data-table/components/grouping.js.map +1 -1
- package/dist/v1/components/data-table/components/ordering.cjs.map +1 -1
- package/dist/v1/components/data-table/components/ordering.d.ts +2 -2
- package/dist/v1/components/data-table/components/ordering.d.ts.map +1 -1
- package/dist/v1/components/data-table/components/ordering.js.map +1 -1
- package/dist/v1/components/data-table/data-table.cjs +4 -2
- package/dist/v1/components/data-table/data-table.cjs.map +1 -1
- package/dist/v1/components/data-table/data-table.d.ts +1 -1
- package/dist/v1/components/data-table/data-table.d.ts.map +1 -1
- package/dist/v1/components/data-table/data-table.js +4 -2
- package/dist/v1/components/data-table/data-table.js.map +1 -1
- package/dist/v1/components/data-table/data-table.module.css.cjs +1 -1
- package/dist/v1/components/data-table/data-table.module.css.js +1 -1
- package/dist/v1/components/data-table/data-table.types.cjs +7 -0
- package/dist/v1/components/data-table/data-table.types.cjs.map +1 -1
- package/dist/v1/components/data-table/data-table.types.d.ts +24 -9
- package/dist/v1/components/data-table/data-table.types.d.ts.map +1 -1
- package/dist/v1/components/data-table/data-table.types.js +6 -1
- package/dist/v1/components/data-table/data-table.types.js.map +1 -1
- package/dist/v1/components/data-table/hooks/useFilters.cjs +8 -5
- package/dist/v1/components/data-table/hooks/useFilters.cjs.map +1 -1
- package/dist/v1/components/data-table/hooks/useFilters.d.ts.map +1 -1
- package/dist/v1/components/data-table/hooks/useFilters.js +9 -6
- package/dist/v1/components/data-table/hooks/useFilters.js.map +1 -1
- package/dist/v1/components/data-table/index.d.ts +1 -1
- package/dist/v1/components/data-table/index.d.ts.map +1 -1
- package/dist/v1/components/data-table/utils/filter-operations.cjs +50 -1
- package/dist/v1/components/data-table/utils/filter-operations.cjs.map +1 -1
- package/dist/v1/components/data-table/utils/filter-operations.d.ts +12 -2
- package/dist/v1/components/data-table/utils/filter-operations.d.ts.map +1 -1
- package/dist/v1/components/data-table/utils/filter-operations.js +49 -2
- package/dist/v1/components/data-table/utils/filter-operations.js.map +1 -1
- package/dist/v1/components/data-table/utils/index.cjs +13 -15
- package/dist/v1/components/data-table/utils/index.cjs.map +1 -1
- package/dist/v1/components/data-table/utils/index.d.ts +2 -6
- package/dist/v1/components/data-table/utils/index.d.ts.map +1 -1
- package/dist/v1/components/data-table/utils/index.js +11 -12
- package/dist/v1/components/data-table/utils/index.js.map +1 -1
- package/dist/v1/components/filter-chip/filter-chip.cjs +2 -2
- package/dist/v1/components/filter-chip/filter-chip.cjs.map +1 -1
- package/dist/v1/components/filter-chip/filter-chip.js +2 -2
- package/dist/v1/components/filter-chip/filter-chip.js.map +1 -1
- package/dist/v1/components/select/select.cjs +8 -2
- package/dist/v1/components/select/select.cjs.map +1 -1
- package/dist/v1/components/select/select.d.ts +1 -0
- package/dist/v1/components/select/select.d.ts.map +1 -1
- package/dist/v1/components/select/select.js +8 -2
- package/dist/v1/components/select/select.js.map +1 -1
- package/dist/v1/components/table/table.cjs.map +1 -1
- package/dist/v1/components/table/table.d.ts +1 -1
- package/dist/v1/components/table/table.js.map +1 -1
- package/dist/v1/index.cjs +4 -2
- package/dist/v1/index.cjs.map +1 -1
- package/dist/v1/index.d.ts +1 -1
- package/dist/v1/index.d.ts.map +1 -1
- package/dist/v1/index.js +2 -2
- package/dist/v1/style.css +1 -1
- package/dist/v1/types/filters.cjs +2 -2
- package/dist/v1/types/filters.cjs.map +1 -1
- package/dist/v1/types/filters.d.ts +5 -5
- package/dist/v1/types/filters.d.ts.map +1 -1
- package/dist/v1/types/filters.js +2 -2
- package/dist/v1/types/filters.js.map +1 -1
- package/package.json +1 -1
|
@@ -28,7 +28,7 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
|
|
|
28
28
|
}
|
|
29
29
|
return (jsxRuntime.jsxRuntimeExports.jsxs(select.Select, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.Trigger, { className: calendar_module.default.dropdown_trigger, iconProps: {
|
|
30
30
|
className: calendar_module.default.dropdown_icon,
|
|
31
|
-
}, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, {}) }), jsxRuntime.jsxRuntimeExports.jsxs(select.Select.Content, { className: calendar_module.default.dropdown_content, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.ScrollUpButton, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: 'center', children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.ChevronUpIcon, {}) }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Viewport, { children: options.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
|
|
31
|
+
}, stopPropagation: true, children: jsxRuntime.jsxRuntimeExports.jsx(select.Select.Value, {}) }), jsxRuntime.jsxRuntimeExports.jsxs(select.Select.Content, { className: calendar_module.default.dropdown_content, children: [jsxRuntime.jsxRuntimeExports.jsx(select.Select.ScrollUpButton, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: 'center', children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.ChevronUpIcon, {}) }) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.Viewport, { children: options.map((opt) => (jsxRuntime.jsxRuntimeExports.jsx(select.Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
|
|
32
32
|
className: calendar_module.default.dropdown_item_text,
|
|
33
33
|
}, children: opt.label }, opt.value))) }), jsxRuntime.jsxRuntimeExports.jsx(select.Select.ScrollDownButton, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: 'center', children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.ChevronDownIcon, {}) }) })] })] }));
|
|
34
34
|
}
|
|
@@ -46,7 +46,7 @@ const Calendar = function ({ className, classNames, showOutsideDays = true, onDr
|
|
|
46
46
|
const message = tooltipMessages[dateLib.dateLib.format(day.date, 'dd-MM-yyyy')];
|
|
47
47
|
return (jsxRuntime.jsxRuntimeExports.jsx(tooltip.Tooltip, { side: "top", disabled: loadingData || !showTooltip || !message, message: message, children: jsxRuntime.jsxRuntimeExports.jsx("button", { ...buttonProps }) }));
|
|
48
48
|
},
|
|
49
|
-
MonthGrid: (props) => loadingData ? (jsxRuntime.jsxRuntimeExports.jsx(index.default, { count: 6, height:
|
|
49
|
+
MonthGrid: (props) => loadingData ? (jsxRuntime.jsxRuntimeExports.jsx(index.default, { count: 6, height: "12px", width: "252px", style: { marginBottom: "var(--rs-space-5)" }, highlightColor: "var(--rs-color-background-base-primary)", baseColor: "var(--rs-color-background-base-primary-hover)" })) : (jsxRuntime.jsxRuntimeExports.jsx("table", { ...props })),
|
|
50
50
|
}, classNames: {
|
|
51
51
|
caption_label: calendar_module.default.caption_label,
|
|
52
52
|
button_previous: `${calendar_module.default.nav_button} ${calendar_module.default.nav_button_previous}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.cjs","sources":["../../../../v1/components/calendar/calendar.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { ChangeEvent, useEffect, useState } from 'react';\nimport {\n dateLib,\n DayPicker,\n DayPickerProps,\n DropdownProps,\n} from 'react-day-picker';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { Flex } from '../flex/flex';\nimport { Select } from '../select';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n showTooltip?: boolean;\n tooltipMessages?: { [key: string]: any };\n loadingData?: boolean;\n}\n\nexport type CalendarProps = DayPickerProps &\n OnDropdownOpen &\n CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\nfunction DropDown({\n options = [],\n value,\n onChange,\n onDropdownOpen,\n}: DropdownProps & OnDropdownOpen) {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open && onDropdownOpen) onDropdownOpen();\n }, [open]);\n\n function handleChange(value: string) {\n if (onChange) {\n onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n }\n }\n\n return (\n <Select\n value={value?.toString()}\n onValueChange={handleChange}\n open={open}\n onOpenChange={setOpen}\n >\n <Select.Trigger\n className={styles.dropdown_trigger}\n iconProps={{\n className: styles.dropdown_icon,\n }}\n >\n <Select.Value />\n </Select.Trigger>\n <Select.Content className={styles.dropdown_content}>\n <Select.ScrollUpButton asChild>\n <Flex justify={'center'}>\n <ChevronUpIcon />\n </Flex>\n </Select.ScrollUpButton>\n <Select.Viewport>\n {options.map((opt) => (\n <Select.Item\n value={opt.value.toString()}\n key={opt.value}\n disabled={opt.disabled}\n textProps={{\n className: styles.dropdown_item_text,\n }}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Viewport>\n <Select.ScrollDownButton asChild>\n <Flex justify={'center'}>\n <ChevronDownIcon />\n </Flex>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n );\n}\n\nexport const Calendar = function ({\n className,\n classNames,\n showOutsideDays = true,\n onDropdownOpen,\n showTooltip = false,\n tooltipMessages = {},\n loadingData = false,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n components={{\n Chevron: (props) => {\n if (props.orientation === 'left') {\n return <ChevronLeftIcon {...props} />;\n }\n return <ChevronRightIcon {...props} />;\n },\n Dropdown: (props: DropdownProps) => (\n <DropDown {...props} onDropdownOpen={onDropdownOpen} />\n ),\n DayButton: (props) => {\n const { day, ...buttonProps } = props;\n const message =\n tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n return (\n <Tooltip\n side=\"top\"\n disabled={loadingData || !showTooltip || !message}\n message={message}\n >\n <button {...buttonProps} />\n </Tooltip>\n );\n },\n MonthGrid: (props) =>\n loadingData ? (\n <Skeleton\n count={6}\n height
|
|
1
|
+
{"version":3,"file":"calendar.cjs","sources":["../../../../v1/components/calendar/calendar.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { ChangeEvent, useEffect, useState } from 'react';\nimport {\n dateLib,\n DayPicker,\n DayPickerProps,\n DropdownProps,\n} from 'react-day-picker';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { Flex } from '../flex/flex';\nimport { Select } from '../select';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n showTooltip?: boolean;\n tooltipMessages?: { [key: string]: any };\n loadingData?: boolean;\n}\n\nexport type CalendarProps = DayPickerProps &\n OnDropdownOpen &\n CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\nfunction DropDown({\n options = [],\n value,\n onChange,\n onDropdownOpen,\n}: DropdownProps & OnDropdownOpen) {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open && onDropdownOpen) onDropdownOpen();\n }, [open]);\n\n function handleChange(value: string) {\n if (onChange) {\n onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n }\n }\n\n return (\n <Select\n value={value?.toString()}\n onValueChange={handleChange}\n open={open}\n onOpenChange={setOpen}\n >\n <Select.Trigger\n className={styles.dropdown_trigger}\n iconProps={{\n className: styles.dropdown_icon,\n }}\n stopPropagation={true}\n >\n <Select.Value />\n </Select.Trigger>\n <Select.Content className={styles.dropdown_content}>\n <Select.ScrollUpButton asChild>\n <Flex justify={'center'}>\n <ChevronUpIcon />\n </Flex>\n </Select.ScrollUpButton>\n <Select.Viewport>\n {options.map((opt) => (\n <Select.Item\n value={opt.value.toString()}\n key={opt.value}\n disabled={opt.disabled}\n textProps={{\n className: styles.dropdown_item_text,\n }}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Viewport>\n <Select.ScrollDownButton asChild>\n <Flex justify={'center'}>\n <ChevronDownIcon />\n </Flex>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n );\n}\n\nexport const Calendar = function ({\n className,\n classNames,\n showOutsideDays = true,\n onDropdownOpen,\n showTooltip = false,\n tooltipMessages = {},\n loadingData = false,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n components={{\n Chevron: (props) => {\n if (props.orientation === 'left') {\n return <ChevronLeftIcon {...props} />;\n }\n return <ChevronRightIcon {...props} />;\n },\n Dropdown: (props: DropdownProps) => (\n <DropDown {...props} onDropdownOpen={onDropdownOpen} />\n ),\n DayButton: (props) => {\n const { day, ...buttonProps } = props;\n const message =\n tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n return (\n <Tooltip\n side=\"top\"\n disabled={loadingData || !showTooltip || !message}\n message={message}\n >\n <button {...buttonProps} />\n </Tooltip>\n );\n },\n MonthGrid: (props) =>\n loadingData ? (\n <Skeleton\n count={6}\n height=\"12px\"\n width=\"252px\"\n style={{ marginBottom: \"var(--rs-space-5)\" }}\n highlightColor=\"var(--rs-color-background-base-primary)\"\n baseColor=\"var(--rs-color-background-base-primary-hover)\"\n />\n ) : (\n <table {...props} />\n ),\n }}\n classNames={{\n caption_label: styles.caption_label,\n button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n month_caption: styles.month_caption,\n months: styles.months,\n nav: styles.nav,\n day: styles.day,\n today: styles.today,\n outside: styles.outside,\n week: styles.week,\n weekdays: styles.week,\n weekday: styles.weekday,\n disabled: styles.disabled,\n selected: styles.selected,\n day_button: styles.day_button,\n range_middle: styles.range_middle,\n range_end: styles.range_end,\n range_start: styles.range_start,\n hidden: styles.hidden,\n dropdowns: styles.dropdowns,\n ...classNames,\n }}\n className={root({ className })}\n mode=\"single\"\n {...props}\n />\n );\n};\n"],"names":["cva","styles","useState","useEffect","_jsxs","Select","_jsx","Flex","ChevronUpIcon","ChevronDownIcon","DayPicker","ChevronLeftIcon","ChevronRightIcon","dateLib","Tooltip","Skeleton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/calendar.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAQ1B,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,cAAc,GACd,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/calendar.tsx"],"names":[],"mappings":"AAQA,OAAO,EAGL,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAQ1B,UAAU,cAAc;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,GACxC,cAAc,GACd,qBAAqB,CAAC;AAoExB,eAAO,MAAM,QAAQ,oHASlB,aAAa,4CAsEf,CAAC"}
|
|
@@ -26,7 +26,7 @@ function DropDown({ options = [], value, onChange, onDropdownOpen, }) {
|
|
|
26
26
|
}
|
|
27
27
|
return (jsxRuntimeExports.jsxs(Select, { value: value?.toString(), onValueChange: handleChange, open: open, onOpenChange: setOpen, children: [jsxRuntimeExports.jsx(Select.Trigger, { className: styles.dropdown_trigger, iconProps: {
|
|
28
28
|
className: styles.dropdown_icon,
|
|
29
|
-
}, children: jsxRuntimeExports.jsx(Select.Value, {}) }), jsxRuntimeExports.jsxs(Select.Content, { className: styles.dropdown_content, children: [jsxRuntimeExports.jsx(Select.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
|
|
29
|
+
}, stopPropagation: true, children: jsxRuntimeExports.jsx(Select.Value, {}) }), jsxRuntimeExports.jsxs(Select.Content, { className: styles.dropdown_content, children: [jsxRuntimeExports.jsx(Select.ScrollUpButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronUpIcon, {}) }) }), jsxRuntimeExports.jsx(Select.Viewport, { children: options.map((opt) => (jsxRuntimeExports.jsx(Select.Item, { value: opt.value.toString(), disabled: opt.disabled, textProps: {
|
|
30
30
|
className: styles.dropdown_item_text,
|
|
31
31
|
}, children: opt.label }, opt.value))) }), jsxRuntimeExports.jsx(Select.ScrollDownButton, { asChild: true, children: jsxRuntimeExports.jsx(Flex, { justify: 'center', children: jsxRuntimeExports.jsx(ChevronDownIcon, {}) }) })] })] }));
|
|
32
32
|
}
|
|
@@ -44,7 +44,7 @@ const Calendar = function ({ className, classNames, showOutsideDays = true, onDr
|
|
|
44
44
|
const message = tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];
|
|
45
45
|
return (jsxRuntimeExports.jsx(Tooltip, { side: "top", disabled: loadingData || !showTooltip || !message, message: message, children: jsxRuntimeExports.jsx("button", { ...buttonProps }) }));
|
|
46
46
|
},
|
|
47
|
-
MonthGrid: (props) => loadingData ? (jsxRuntimeExports.jsx(Skeleton, { count: 6, height:
|
|
47
|
+
MonthGrid: (props) => loadingData ? (jsxRuntimeExports.jsx(Skeleton, { count: 6, height: "12px", width: "252px", style: { marginBottom: "var(--rs-space-5)" }, highlightColor: "var(--rs-color-background-base-primary)", baseColor: "var(--rs-color-background-base-primary-hover)" })) : (jsxRuntimeExports.jsx("table", { ...props })),
|
|
48
48
|
}, classNames: {
|
|
49
49
|
caption_label: styles.caption_label,
|
|
50
50
|
button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.js","sources":["../../../../v1/components/calendar/calendar.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { ChangeEvent, useEffect, useState } from 'react';\nimport {\n dateLib,\n DayPicker,\n DayPickerProps,\n DropdownProps,\n} from 'react-day-picker';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { Flex } from '../flex/flex';\nimport { Select } from '../select';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n showTooltip?: boolean;\n tooltipMessages?: { [key: string]: any };\n loadingData?: boolean;\n}\n\nexport type CalendarProps = DayPickerProps &\n OnDropdownOpen &\n CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\nfunction DropDown({\n options = [],\n value,\n onChange,\n onDropdownOpen,\n}: DropdownProps & OnDropdownOpen) {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open && onDropdownOpen) onDropdownOpen();\n }, [open]);\n\n function handleChange(value: string) {\n if (onChange) {\n onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n }\n }\n\n return (\n <Select\n value={value?.toString()}\n onValueChange={handleChange}\n open={open}\n onOpenChange={setOpen}\n >\n <Select.Trigger\n className={styles.dropdown_trigger}\n iconProps={{\n className: styles.dropdown_icon,\n }}\n >\n <Select.Value />\n </Select.Trigger>\n <Select.Content className={styles.dropdown_content}>\n <Select.ScrollUpButton asChild>\n <Flex justify={'center'}>\n <ChevronUpIcon />\n </Flex>\n </Select.ScrollUpButton>\n <Select.Viewport>\n {options.map((opt) => (\n <Select.Item\n value={opt.value.toString()}\n key={opt.value}\n disabled={opt.disabled}\n textProps={{\n className: styles.dropdown_item_text,\n }}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Viewport>\n <Select.ScrollDownButton asChild>\n <Flex justify={'center'}>\n <ChevronDownIcon />\n </Flex>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n );\n}\n\nexport const Calendar = function ({\n className,\n classNames,\n showOutsideDays = true,\n onDropdownOpen,\n showTooltip = false,\n tooltipMessages = {},\n loadingData = false,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n components={{\n Chevron: (props) => {\n if (props.orientation === 'left') {\n return <ChevronLeftIcon {...props} />;\n }\n return <ChevronRightIcon {...props} />;\n },\n Dropdown: (props: DropdownProps) => (\n <DropDown {...props} onDropdownOpen={onDropdownOpen} />\n ),\n DayButton: (props) => {\n const { day, ...buttonProps } = props;\n const message =\n tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n return (\n <Tooltip\n side=\"top\"\n disabled={loadingData || !showTooltip || !message}\n message={message}\n >\n <button {...buttonProps} />\n </Tooltip>\n );\n },\n MonthGrid: (props) =>\n loadingData ? (\n <Skeleton\n count={6}\n height
|
|
1
|
+
{"version":3,"file":"calendar.js","sources":["../../../../v1/components/calendar/calendar.tsx"],"sourcesContent":["import {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n} from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { ChangeEvent, useEffect, useState } from 'react';\nimport {\n dateLib,\n DayPicker,\n DayPickerProps,\n DropdownProps,\n} from 'react-day-picker';\nimport Skeleton from 'react-loading-skeleton';\n\nimport { Flex } from '../flex/flex';\nimport { Select } from '../select';\nimport { Tooltip } from '../tooltip';\nimport styles from './calendar.module.css';\n\ninterface OnDropdownOpen {\n onDropdownOpen?: VoidFunction;\n}\n\ninterface CalendarPropsExtended {\n showTooltip?: boolean;\n tooltipMessages?: { [key: string]: any };\n loadingData?: boolean;\n}\n\nexport type CalendarProps = DayPickerProps &\n OnDropdownOpen &\n CalendarPropsExtended;\n\nconst root = cva(styles.calendarRoot);\n\nfunction DropDown({\n options = [],\n value,\n onChange,\n onDropdownOpen,\n}: DropdownProps & OnDropdownOpen) {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n if (open && onDropdownOpen) onDropdownOpen();\n }, [open]);\n\n function handleChange(value: string) {\n if (onChange) {\n onChange({ target: { value } } as ChangeEvent<HTMLSelectElement>);\n }\n }\n\n return (\n <Select\n value={value?.toString()}\n onValueChange={handleChange}\n open={open}\n onOpenChange={setOpen}\n >\n <Select.Trigger\n className={styles.dropdown_trigger}\n iconProps={{\n className: styles.dropdown_icon,\n }}\n stopPropagation={true}\n >\n <Select.Value />\n </Select.Trigger>\n <Select.Content className={styles.dropdown_content}>\n <Select.ScrollUpButton asChild>\n <Flex justify={'center'}>\n <ChevronUpIcon />\n </Flex>\n </Select.ScrollUpButton>\n <Select.Viewport>\n {options.map((opt) => (\n <Select.Item\n value={opt.value.toString()}\n key={opt.value}\n disabled={opt.disabled}\n textProps={{\n className: styles.dropdown_item_text,\n }}\n >\n {opt.label}\n </Select.Item>\n ))}\n </Select.Viewport>\n <Select.ScrollDownButton asChild>\n <Flex justify={'center'}>\n <ChevronDownIcon />\n </Flex>\n </Select.ScrollDownButton>\n </Select.Content>\n </Select>\n );\n}\n\nexport const Calendar = function ({\n className,\n classNames,\n showOutsideDays = true,\n onDropdownOpen,\n showTooltip = false,\n tooltipMessages = {},\n loadingData = false,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n components={{\n Chevron: (props) => {\n if (props.orientation === 'left') {\n return <ChevronLeftIcon {...props} />;\n }\n return <ChevronRightIcon {...props} />;\n },\n Dropdown: (props: DropdownProps) => (\n <DropDown {...props} onDropdownOpen={onDropdownOpen} />\n ),\n DayButton: (props) => {\n const { day, ...buttonProps } = props;\n const message =\n tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')];\n return (\n <Tooltip\n side=\"top\"\n disabled={loadingData || !showTooltip || !message}\n message={message}\n >\n <button {...buttonProps} />\n </Tooltip>\n );\n },\n MonthGrid: (props) =>\n loadingData ? (\n <Skeleton\n count={6}\n height=\"12px\"\n width=\"252px\"\n style={{ marginBottom: \"var(--rs-space-5)\" }}\n highlightColor=\"var(--rs-color-background-base-primary)\"\n baseColor=\"var(--rs-color-background-base-primary-hover)\"\n />\n ) : (\n <table {...props} />\n ),\n }}\n classNames={{\n caption_label: styles.caption_label,\n button_previous: `${styles.nav_button} ${styles.nav_button_previous}`,\n button_next: `${styles.nav_button} ${styles.nav_button_next}`,\n month_caption: styles.month_caption,\n months: styles.months,\n nav: styles.nav,\n day: styles.day,\n today: styles.today,\n outside: styles.outside,\n week: styles.week,\n weekdays: styles.week,\n weekday: styles.weekday,\n disabled: styles.disabled,\n selected: styles.selected,\n day_button: styles.day_button,\n range_middle: styles.range_middle,\n range_end: styles.range_end,\n range_start: styles.range_start,\n hidden: styles.hidden,\n dropdowns: styles.dropdowns,\n ...classNames,\n }}\n className={root({ className })}\n mode=\"single\"\n {...props}\n />\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -10,6 +10,8 @@ var index$1 = require('../../../node_modules/.pnpm/react-loading-skeleton@3.4.0_
|
|
|
10
10
|
var React = require('react');
|
|
11
11
|
var badge = require('../../badge/badge.cjs');
|
|
12
12
|
var flex = require('../../flex/flex.cjs');
|
|
13
|
+
var dataTable_module = require('../data-table.module.css.cjs');
|
|
14
|
+
var clsx = require('../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
13
15
|
|
|
14
16
|
function Headers({ headerGroups = [], className = "", }) {
|
|
15
17
|
return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Header, { className: className, children: headerGroups?.map((headerGroup) => (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Row, { children: headerGroup?.headers?.map((header) => {
|
|
@@ -28,22 +30,22 @@ function GroupHeader({ colSpan, data, }) {
|
|
|
28
30
|
return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.SectionHeader, { colSpan: colSpan, children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: 3, align: "center", children: [data?.group_key, data.showGroupCount ? (jsxRuntime.jsxRuntimeExports.jsx(badge.Badge, { variant: "neutral", children: data?.count })) : null] }) }));
|
|
29
31
|
}
|
|
30
32
|
const Rows = React.forwardRef((props, lastRowRef) => {
|
|
31
|
-
const { rows = [] } = props;
|
|
33
|
+
const { rows = [], onRowClick, classNames } = props;
|
|
32
34
|
return (jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: rows?.map((row, index$1) => {
|
|
33
35
|
const isSelected = row.getIsSelected();
|
|
34
36
|
const cells = row.getVisibleCells() || [];
|
|
35
37
|
const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();
|
|
36
38
|
const isLastRow = index$1 === rows.length - 1;
|
|
37
39
|
const rowKey = row.id + "-" + index$1;
|
|
38
|
-
return isSectionHeadingRow ? (jsxRuntime.jsxRuntimeExports.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Row, { "data-state": isSelected && "selected", ref: isLastRow ? lastRowRef : undefined, children: cells.map((cell) => {
|
|
40
|
+
return isSectionHeadingRow ? (jsxRuntime.jsxRuntimeExports.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Row, { className: clsx.clsx(dataTable_module.default["row"], onRowClick ? dataTable_module.default["clickable"] : "", classNames?.row), "data-state": isSelected && "selected", ref: isLastRow ? lastRowRef : undefined, onClick: () => onRowClick?.(row.original), children: cells.map((cell) => {
|
|
39
41
|
const columnDef = cell.column.columnDef;
|
|
40
|
-
return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Cell, { className: columnDef.classNames?.cell, style: columnDef.styles?.cell, children: index.flexRender(columnDef.cell, cell.getContext()) }, cell.id));
|
|
42
|
+
return (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Cell, { className: clsx.clsx(dataTable_module.default["cell"], columnDef.classNames?.cell), style: columnDef.styles?.cell, children: index.flexRender(columnDef.cell, cell.getContext()) }, cell.id));
|
|
41
43
|
}) }, rowKey));
|
|
42
44
|
}) }));
|
|
43
45
|
});
|
|
44
46
|
const DefaultEmptyComponent = () => (jsxRuntime.jsxRuntimeExports.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.TableIcon, {}), heading: "No Data" }));
|
|
45
47
|
function Content({ emptyState, classNames = {}, }) {
|
|
46
|
-
const { table: table$1,
|
|
48
|
+
const { onRowClick, table: table$1, mode, isLoading, loadMoreData, loadingRowCount = 3, } = useDataTable.useDataTable();
|
|
47
49
|
const headerGroups = table$1?.getHeaderGroups();
|
|
48
50
|
const { rows = [] } = table$1?.getRowModel();
|
|
49
51
|
const lastRowRef = React.useRef(null);
|
|
@@ -74,7 +76,10 @@ function Content({ emptyState, classNames = {}, }) {
|
|
|
74
76
|
}
|
|
75
77
|
};
|
|
76
78
|
}, [mode, rows.length, handleObserver]);
|
|
77
|
-
|
|
79
|
+
const visibleColumnsLength = table$1.getVisibleLeafColumns().length;
|
|
80
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(table.Table, { className: classNames.table, children: [jsxRuntime.jsxRuntimeExports.jsx(Headers, { headerGroups: headerGroups, className: classNames.header }), jsxRuntime.jsxRuntimeExports.jsx(table.Table.Body, { className: classNames.body, children: rows?.length || isLoading ? (jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [jsxRuntime.jsxRuntimeExports.jsx(Rows, { rows: rows, ref: lastRowRef, onRowClick: onRowClick, classNames: {
|
|
81
|
+
row: classNames.row,
|
|
82
|
+
} }), isLoading ? (jsxRuntime.jsxRuntimeExports.jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsxRuntime.jsxRuntimeExports.jsx(table.Table.Row, { children: jsxRuntime.jsxRuntimeExports.jsx(table.Table.Cell, { colSpan: visibleColumnsLength, children: emptyState || jsxRuntime.jsxRuntimeExports.jsx(DefaultEmptyComponent, {}) }) })) })] }));
|
|
78
83
|
}
|
|
79
84
|
|
|
80
85
|
exports.Content = Content;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.cjs","sources":["../../../../../v1/components/data-table/components/content.tsx"],"sourcesContent":["import { Table } from \"../../table\";\nimport type { Row, HeaderGroup } from \"@tanstack/react-table\";\nimport { EmptyState } from \"../../empty-state\";\nimport { TableIcon } from \"@radix-ui/react-icons\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {\n DataTableColumnDef,\n DataTableContentProps,\n GroupedData,\n} from \"../data-table.types\";\nimport Skeleton from \"react-loading-skeleton\";\nimport {\n ForwardedRef,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport { Badge } from \"../../badge\";\nimport { Flex } from \"../../flex\";\n\nfunction Headers<TData>({\n headerGroups = [],\n className = \"\",\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <Table.Header className={className}>\n {headerGroups?.map((headerGroup) => (\n <Table.Row key={headerGroup?.id}>\n {headerGroup?.headers?.map((header) => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <Table.Head\n key={header.id}\n colSpan={header.colSpan}\n className={columnDef.classNames?.header}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n );\n}\n\ninterface RowsProps<TData> {\n rows: Row<TData>[];\n lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n}\n\nfunction LoaderRows({\n rowCount,\n columnCount,\n}: {\n rowCount: number;\n columnCount: number;\n}) {\n const rows = Array.from({ length: rowCount });\n return rows.map((_, rowIndex) => {\n const columns = Array.from({ length: columnCount });\n return (\n <Table.Row key={\"loading-row-\" + rowIndex}>\n {columns.map((_, colIndex) => (\n <Table.Cell key={\"loading-column-\" + colIndex}>\n <Skeleton />\n </Table.Cell>\n ))}\n </Table.Row>\n );\n });\n}\n\nfunction GroupHeader<TData>({\n colSpan,\n data,\n}: {\n colSpan: number;\n data: GroupedData<TData>;\n}) {\n return (\n <Table.SectionHeader colSpan={colSpan}>\n <Flex gap={3} align=\"center\">\n {data?.group_key}\n {data.showGroupCount ? (\n <Badge variant=\"neutral\">{data?.count}</Badge>\n ) : null}\n </Flex>\n </Table.SectionHeader>\n );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n (props, lastRowRef) => {\n const { rows = [] } = props;\n return (\n <>\n {rows?.map((row, index) => {\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n const isLastRow = index === rows.length - 1;\n const rowKey = row.id + \"-\" + index;\n return isSectionHeadingRow ? (\n <GroupHeader\n key={rowKey}\n colSpan={cells.length}\n data={row.original as GroupedData<unknown>}\n />\n ) : (\n <Table.Row\n key={rowKey}\n data-state={isSelected && \"selected\"}\n ref={isLastRow ? lastRowRef : undefined}\n >\n {cells.map((cell) => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <Table.Cell\n key={cell.id}\n className={columnDef.classNames?.cell}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n })}\n </Table.Row>\n );\n })}\n </>\n );\n }\n);\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading=\"No Data\" />\n);\n\nexport function Content({\n emptyState,\n classNames = {},\n}: DataTableContentProps) {\n const {\n table,\n columns,\n mode,\n isLoading,\n loadMoreData,\n loadingRowCount = 3,\n } = useDataTable();\n const headerGroups = table?.getHeaderGroups();\n const { rows = [] } = table?.getRowModel();\n\n const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleObserver = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const target = entries[0];\n if (target.isIntersecting && !isLoading) {\n loadMoreData();\n }\n },\n [loadMoreData, isLoading]\n );\n\n useEffect(() => {\n if (mode !== \"server\") return;\n\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n observerRef.current = new IntersectionObserver(handleObserver, {\n threshold: 0.1,\n });\n const lastRow = lastRowRef.current;\n if (lastRow) {\n observerRef.current.observe(lastRow);\n }\n\n return () => {\n if (observerRef.current && lastRow) {\n observerRef.current.unobserve(lastRow);\n observerRef.current.disconnect();\n }\n };\n }, [mode, rows.length, handleObserver]);\n\n return (\n <Table className={classNames.table}>\n <Headers headerGroups={headerGroups} className={classNames.header} />\n <Table.Body className={classNames.body}>\n {rows?.length || isLoading ? (\n <>\n <Rows rows={rows} ref={lastRowRef} />\n {isLoading ? (\n <LoaderRows\n rowCount={loadingRowCount}\n columnCount={columns.length}\n />\n ) : null}\n </>\n ) : (\n <Table.Row>\n <Table.Cell colSpan={columns.length}>\n {emptyState || <DefaultEmptyComponent />}\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table>\n );\n}\n"],"names":["_jsx","Table","flexRender","Skeleton","_jsxs","Flex","Badge","forwardRef","_Fragment","index","EmptyState","TableIcon","table","useDataTable","useRef","useCallback","useEffect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"content.cjs","sources":["../../../../../v1/components/data-table/components/content.tsx"],"sourcesContent":["import { Table } from \"../../table\";\nimport type { Row, HeaderGroup } from \"@tanstack/react-table\";\nimport { EmptyState } from \"../../empty-state\";\nimport { TableIcon } from \"@radix-ui/react-icons\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {\n DataTableColumnDef,\n DataTableContentProps,\n GroupedData,\n} from \"../data-table.types\";\nimport Skeleton from \"react-loading-skeleton\";\nimport {\n ForwardedRef,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport { Badge } from \"../../badge\";\nimport { Flex } from \"../../flex\";\nimport styles from \"../data-table.module.css\";\nimport clsx from \"clsx\";\n\nfunction Headers<TData>({\n headerGroups = [],\n className = \"\",\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <Table.Header className={className}>\n {headerGroups?.map((headerGroup) => (\n <Table.Row key={headerGroup?.id}>\n {headerGroup?.headers?.map((header) => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <Table.Head\n key={header.id}\n colSpan={header.colSpan}\n className={columnDef.classNames?.header}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n );\n}\n\ninterface RowsProps<TData> {\n rows: Row<TData>[];\n lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n onRowClick?: (row: TData) => void;\n classNames?: {\n row?: string;\n };\n}\n\nfunction LoaderRows({\n rowCount,\n columnCount,\n}: {\n rowCount: number;\n columnCount: number;\n}) {\n const rows = Array.from({ length: rowCount });\n return rows.map((_, rowIndex) => {\n const columns = Array.from({ length: columnCount });\n return (\n <Table.Row key={\"loading-row-\" + rowIndex}>\n {columns.map((_, colIndex) => (\n <Table.Cell key={\"loading-column-\" + colIndex}>\n <Skeleton />\n </Table.Cell>\n ))}\n </Table.Row>\n );\n });\n}\n\nfunction GroupHeader<TData>({\n colSpan,\n data,\n}: {\n colSpan: number;\n data: GroupedData<TData>;\n}) {\n return (\n <Table.SectionHeader colSpan={colSpan}>\n <Flex gap={3} align=\"center\">\n {data?.group_key}\n {data.showGroupCount ? (\n <Badge variant=\"neutral\">{data?.count}</Badge>\n ) : null}\n </Flex>\n </Table.SectionHeader>\n );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n (props, lastRowRef) => {\n const { rows = [], onRowClick, classNames } = props;\n return (\n <>\n {rows?.map((row, index) => {\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n const isLastRow = index === rows.length - 1;\n const rowKey = row.id + \"-\" + index;\n return isSectionHeadingRow ? (\n <GroupHeader\n key={rowKey}\n colSpan={cells.length}\n data={row.original as GroupedData<unknown>}\n />\n ) : (\n <Table.Row\n key={rowKey}\n className={clsx(\n styles[\"row\"],\n onRowClick ? styles[\"clickable\"] : \"\",\n classNames?.row\n )}\n data-state={isSelected && \"selected\"}\n ref={isLastRow ? lastRowRef : undefined}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map((cell) => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <Table.Cell\n key={cell.id}\n className={clsx(styles[\"cell\"], columnDef.classNames?.cell)}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n })}\n </Table.Row>\n );\n })}\n </>\n );\n }\n);\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading=\"No Data\" />\n);\n\nexport function Content({\n emptyState,\n classNames = {},\n}: DataTableContentProps) {\n const {\n onRowClick,\n table,\n mode,\n isLoading,\n loadMoreData,\n loadingRowCount = 3,\n } = useDataTable();\n const headerGroups = table?.getHeaderGroups();\n const { rows = [] } = table?.getRowModel();\n\n const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleObserver = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const target = entries[0];\n if (target.isIntersecting && !isLoading) {\n loadMoreData();\n }\n },\n [loadMoreData, isLoading]\n );\n\n useEffect(() => {\n if (mode !== \"server\") return;\n\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n observerRef.current = new IntersectionObserver(handleObserver, {\n threshold: 0.1,\n });\n const lastRow = lastRowRef.current;\n if (lastRow) {\n observerRef.current.observe(lastRow);\n }\n\n return () => {\n if (observerRef.current && lastRow) {\n observerRef.current.unobserve(lastRow);\n observerRef.current.disconnect();\n }\n };\n }, [mode, rows.length, handleObserver]);\n\n const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n return (\n <Table className={classNames.table}>\n <Headers headerGroups={headerGroups} className={classNames.header} />\n <Table.Body className={classNames.body}>\n {rows?.length || isLoading ? (\n <>\n <Rows\n rows={rows}\n ref={lastRowRef}\n onRowClick={onRowClick}\n classNames={{\n row: classNames.row,\n }}\n />\n {isLoading ? (\n <LoaderRows\n rowCount={loadingRowCount}\n columnCount={visibleColumnsLength}\n />\n ) : null}\n </>\n ) : (\n <Table.Row>\n <Table.Cell colSpan={visibleColumnsLength}>\n {emptyState || <DefaultEmptyComponent />}\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table>\n );\n}\n"],"names":["_jsx","Table","flexRender","Skeleton","_jsxs","Flex","Badge","forwardRef","_Fragment","index","clsx","styles","EmptyState","TableIcon","table","useDataTable","useRef","useCallback","useEffect"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/content.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/content.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AAyJ7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,UAAe,GAChB,EAAE,qBAAqB,2CAiFvB"}
|
|
@@ -8,6 +8,8 @@ import Skeleton from '../../../node_modules/.pnpm/react-loading-skeleton@3.4.0_r
|
|
|
8
8
|
import { forwardRef, useRef, useCallback, useEffect } from 'react';
|
|
9
9
|
import { Badge } from '../../badge/badge.js';
|
|
10
10
|
import { Flex } from '../../flex/flex.js';
|
|
11
|
+
import styles from '../data-table.module.css.js';
|
|
12
|
+
import { clsx } from '../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
|
|
11
13
|
|
|
12
14
|
function Headers({ headerGroups = [], className = "", }) {
|
|
13
15
|
return (jsxRuntimeExports.jsx(Table.Header, { className: className, children: headerGroups?.map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup?.headers?.map((header) => {
|
|
@@ -26,22 +28,22 @@ function GroupHeader({ colSpan, data, }) {
|
|
|
26
28
|
return (jsxRuntimeExports.jsx(Table.SectionHeader, { colSpan: colSpan, children: jsxRuntimeExports.jsxs(Flex, { gap: 3, align: "center", children: [data?.group_key, data.showGroupCount ? (jsxRuntimeExports.jsx(Badge, { variant: "neutral", children: data?.count })) : null] }) }));
|
|
27
29
|
}
|
|
28
30
|
const Rows = forwardRef((props, lastRowRef) => {
|
|
29
|
-
const { rows = [] } = props;
|
|
31
|
+
const { rows = [], onRowClick, classNames } = props;
|
|
30
32
|
return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: rows?.map((row, index) => {
|
|
31
33
|
const isSelected = row.getIsSelected();
|
|
32
34
|
const cells = row.getVisibleCells() || [];
|
|
33
35
|
const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();
|
|
34
36
|
const isLastRow = index === rows.length - 1;
|
|
35
37
|
const rowKey = row.id + "-" + index;
|
|
36
|
-
return isSectionHeadingRow ? (jsxRuntimeExports.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (jsxRuntimeExports.jsx(Table.Row, { "data-state": isSelected && "selected", ref: isLastRow ? lastRowRef : undefined, children: cells.map((cell) => {
|
|
38
|
+
return isSectionHeadingRow ? (jsxRuntimeExports.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, rowKey)) : (jsxRuntimeExports.jsx(Table.Row, { className: clsx(styles["row"], onRowClick ? styles["clickable"] : "", classNames?.row), "data-state": isSelected && "selected", ref: isLastRow ? lastRowRef : undefined, onClick: () => onRowClick?.(row.original), children: cells.map((cell) => {
|
|
37
39
|
const columnDef = cell.column.columnDef;
|
|
38
|
-
return (jsxRuntimeExports.jsx(Table.Cell, { className: columnDef.classNames?.cell, style: columnDef.styles?.cell, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
|
|
40
|
+
return (jsxRuntimeExports.jsx(Table.Cell, { className: clsx(styles["cell"], columnDef.classNames?.cell), style: columnDef.styles?.cell, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
|
|
39
41
|
}) }, rowKey));
|
|
40
42
|
}) }));
|
|
41
43
|
});
|
|
42
44
|
const DefaultEmptyComponent = () => (jsxRuntimeExports.jsx(EmptyState, { icon: jsxRuntimeExports.jsx(TableIcon, {}), heading: "No Data" }));
|
|
43
45
|
function Content({ emptyState, classNames = {}, }) {
|
|
44
|
-
const {
|
|
46
|
+
const { onRowClick, table, mode, isLoading, loadMoreData, loadingRowCount = 3, } = useDataTable();
|
|
45
47
|
const headerGroups = table?.getHeaderGroups();
|
|
46
48
|
const { rows = [] } = table?.getRowModel();
|
|
47
49
|
const lastRowRef = useRef(null);
|
|
@@ -72,7 +74,10 @@ function Content({ emptyState, classNames = {}, }) {
|
|
|
72
74
|
}
|
|
73
75
|
};
|
|
74
76
|
}, [mode, rows.length, handleObserver]);
|
|
75
|
-
|
|
77
|
+
const visibleColumnsLength = table.getVisibleLeafColumns().length;
|
|
78
|
+
return (jsxRuntimeExports.jsxs(Table, { className: classNames.table, children: [jsxRuntimeExports.jsx(Headers, { headerGroups: headerGroups, className: classNames.header }), jsxRuntimeExports.jsx(Table.Body, { className: classNames.body, children: rows?.length || isLoading ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Rows, { rows: rows, ref: lastRowRef, onRowClick: onRowClick, classNames: {
|
|
79
|
+
row: classNames.row,
|
|
80
|
+
} }), isLoading ? (jsxRuntimeExports.jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: visibleColumnsLength, children: emptyState || jsxRuntimeExports.jsx(DefaultEmptyComponent, {}) }) })) })] }));
|
|
76
81
|
}
|
|
77
82
|
|
|
78
83
|
export { Content };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.js","sources":["../../../../../v1/components/data-table/components/content.tsx"],"sourcesContent":["import { Table } from \"../../table\";\nimport type { Row, HeaderGroup } from \"@tanstack/react-table\";\nimport { EmptyState } from \"../../empty-state\";\nimport { TableIcon } from \"@radix-ui/react-icons\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {\n DataTableColumnDef,\n DataTableContentProps,\n GroupedData,\n} from \"../data-table.types\";\nimport Skeleton from \"react-loading-skeleton\";\nimport {\n ForwardedRef,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport { Badge } from \"../../badge\";\nimport { Flex } from \"../../flex\";\n\nfunction Headers<TData>({\n headerGroups = [],\n className = \"\",\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <Table.Header className={className}>\n {headerGroups?.map((headerGroup) => (\n <Table.Row key={headerGroup?.id}>\n {headerGroup?.headers?.map((header) => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <Table.Head\n key={header.id}\n colSpan={header.colSpan}\n className={columnDef.classNames?.header}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n );\n}\n\ninterface RowsProps<TData> {\n rows: Row<TData>[];\n lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n}\n\nfunction LoaderRows({\n rowCount,\n columnCount,\n}: {\n rowCount: number;\n columnCount: number;\n}) {\n const rows = Array.from({ length: rowCount });\n return rows.map((_, rowIndex) => {\n const columns = Array.from({ length: columnCount });\n return (\n <Table.Row key={\"loading-row-\" + rowIndex}>\n {columns.map((_, colIndex) => (\n <Table.Cell key={\"loading-column-\" + colIndex}>\n <Skeleton />\n </Table.Cell>\n ))}\n </Table.Row>\n );\n });\n}\n\nfunction GroupHeader<TData>({\n colSpan,\n data,\n}: {\n colSpan: number;\n data: GroupedData<TData>;\n}) {\n return (\n <Table.SectionHeader colSpan={colSpan}>\n <Flex gap={3} align=\"center\">\n {data?.group_key}\n {data.showGroupCount ? (\n <Badge variant=\"neutral\">{data?.count}</Badge>\n ) : null}\n </Flex>\n </Table.SectionHeader>\n );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n (props, lastRowRef) => {\n const { rows = [] } = props;\n return (\n <>\n {rows?.map((row, index) => {\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n const isLastRow = index === rows.length - 1;\n const rowKey = row.id + \"-\" + index;\n return isSectionHeadingRow ? (\n <GroupHeader\n key={rowKey}\n colSpan={cells.length}\n data={row.original as GroupedData<unknown>}\n />\n ) : (\n <Table.Row\n key={rowKey}\n data-state={isSelected && \"selected\"}\n ref={isLastRow ? lastRowRef : undefined}\n >\n {cells.map((cell) => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <Table.Cell\n key={cell.id}\n className={columnDef.classNames?.cell}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n })}\n </Table.Row>\n );\n })}\n </>\n );\n }\n);\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading=\"No Data\" />\n);\n\nexport function Content({\n emptyState,\n classNames = {},\n}: DataTableContentProps) {\n const {\n table,\n columns,\n mode,\n isLoading,\n loadMoreData,\n loadingRowCount = 3,\n } = useDataTable();\n const headerGroups = table?.getHeaderGroups();\n const { rows = [] } = table?.getRowModel();\n\n const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleObserver = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const target = entries[0];\n if (target.isIntersecting && !isLoading) {\n loadMoreData();\n }\n },\n [loadMoreData, isLoading]\n );\n\n useEffect(() => {\n if (mode !== \"server\") return;\n\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n observerRef.current = new IntersectionObserver(handleObserver, {\n threshold: 0.1,\n });\n const lastRow = lastRowRef.current;\n if (lastRow) {\n observerRef.current.observe(lastRow);\n }\n\n return () => {\n if (observerRef.current && lastRow) {\n observerRef.current.unobserve(lastRow);\n observerRef.current.disconnect();\n }\n };\n }, [mode, rows.length, handleObserver]);\n\n return (\n <Table className={classNames.table}>\n <Headers headerGroups={headerGroups} className={classNames.header} />\n <Table.Body className={classNames.body}>\n {rows?.length || isLoading ? (\n <>\n <Rows rows={rows} ref={lastRowRef} />\n {isLoading ? (\n <LoaderRows\n rowCount={loadingRowCount}\n columnCount={columns.length}\n />\n ) : null}\n </>\n ) : (\n <Table.Row>\n <Table.Cell colSpan={columns.length}>\n {emptyState || <DefaultEmptyComponent />}\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table>\n );\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"content.js","sources":["../../../../../v1/components/data-table/components/content.tsx"],"sourcesContent":["import { Table } from \"../../table\";\nimport type { Row, HeaderGroup } from \"@tanstack/react-table\";\nimport { EmptyState } from \"../../empty-state\";\nimport { TableIcon } from \"@radix-ui/react-icons\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {\n DataTableColumnDef,\n DataTableContentProps,\n GroupedData,\n} from \"../data-table.types\";\nimport Skeleton from \"react-loading-skeleton\";\nimport {\n ForwardedRef,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport { Badge } from \"../../badge\";\nimport { Flex } from \"../../flex\";\nimport styles from \"../data-table.module.css\";\nimport clsx from \"clsx\";\n\nfunction Headers<TData>({\n headerGroups = [],\n className = \"\",\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <Table.Header className={className}>\n {headerGroups?.map((headerGroup) => (\n <Table.Row key={headerGroup?.id}>\n {headerGroup?.headers?.map((header) => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <Table.Head\n key={header.id}\n colSpan={header.colSpan}\n className={columnDef.classNames?.header}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n );\n}\n\ninterface RowsProps<TData> {\n rows: Row<TData>[];\n lastRowRef?: ForwardedRef<HTMLTableRowElement>;\n onRowClick?: (row: TData) => void;\n classNames?: {\n row?: string;\n };\n}\n\nfunction LoaderRows({\n rowCount,\n columnCount,\n}: {\n rowCount: number;\n columnCount: number;\n}) {\n const rows = Array.from({ length: rowCount });\n return rows.map((_, rowIndex) => {\n const columns = Array.from({ length: columnCount });\n return (\n <Table.Row key={\"loading-row-\" + rowIndex}>\n {columns.map((_, colIndex) => (\n <Table.Cell key={\"loading-column-\" + colIndex}>\n <Skeleton />\n </Table.Cell>\n ))}\n </Table.Row>\n );\n });\n}\n\nfunction GroupHeader<TData>({\n colSpan,\n data,\n}: {\n colSpan: number;\n data: GroupedData<TData>;\n}) {\n return (\n <Table.SectionHeader colSpan={colSpan}>\n <Flex gap={3} align=\"center\">\n {data?.group_key}\n {data.showGroupCount ? (\n <Badge variant=\"neutral\">{data?.count}</Badge>\n ) : null}\n </Flex>\n </Table.SectionHeader>\n );\n}\n\nconst Rows = forwardRef<HTMLTableRowElement, RowsProps<unknown>>(\n (props, lastRowRef) => {\n const { rows = [], onRowClick, classNames } = props;\n return (\n <>\n {rows?.map((row, index) => {\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isSectionHeadingRow = row.depth === 0 && row.getIsExpanded();\n const isLastRow = index === rows.length - 1;\n const rowKey = row.id + \"-\" + index;\n return isSectionHeadingRow ? (\n <GroupHeader\n key={rowKey}\n colSpan={cells.length}\n data={row.original as GroupedData<unknown>}\n />\n ) : (\n <Table.Row\n key={rowKey}\n className={clsx(\n styles[\"row\"],\n onRowClick ? styles[\"clickable\"] : \"\",\n classNames?.row\n )}\n data-state={isSelected && \"selected\"}\n ref={isLastRow ? lastRowRef : undefined}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map((cell) => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <Table.Cell\n key={cell.id}\n className={clsx(styles[\"cell\"], columnDef.classNames?.cell)}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n })}\n </Table.Row>\n );\n })}\n </>\n );\n }\n);\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading=\"No Data\" />\n);\n\nexport function Content({\n emptyState,\n classNames = {},\n}: DataTableContentProps) {\n const {\n onRowClick,\n table,\n mode,\n isLoading,\n loadMoreData,\n loadingRowCount = 3,\n } = useDataTable();\n const headerGroups = table?.getHeaderGroups();\n const { rows = [] } = table?.getRowModel();\n\n const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleObserver = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const target = entries[0];\n if (target.isIntersecting && !isLoading) {\n loadMoreData();\n }\n },\n [loadMoreData, isLoading]\n );\n\n useEffect(() => {\n if (mode !== \"server\") return;\n\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n observerRef.current = new IntersectionObserver(handleObserver, {\n threshold: 0.1,\n });\n const lastRow = lastRowRef.current;\n if (lastRow) {\n observerRef.current.observe(lastRow);\n }\n\n return () => {\n if (observerRef.current && lastRow) {\n observerRef.current.unobserve(lastRow);\n observerRef.current.disconnect();\n }\n };\n }, [mode, rows.length, handleObserver]);\n\n const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n return (\n <Table className={classNames.table}>\n <Headers headerGroups={headerGroups} className={classNames.header} />\n <Table.Body className={classNames.body}>\n {rows?.length || isLoading ? (\n <>\n <Rows\n rows={rows}\n ref={lastRowRef}\n onRowClick={onRowClick}\n classNames={{\n row: classNames.row,\n }}\n />\n {isLoading ? (\n <LoaderRows\n rowCount={loadingRowCount}\n columnCount={visibleColumnsLength}\n />\n ) : null}\n </>\n ) : (\n <Table.Row>\n <Table.Cell colSpan={visibleColumnsLength}>\n {emptyState || <DefaultEmptyComponent />}\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table>\n );\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ var text = require('../../text/text.cjs');
|
|
|
7
7
|
|
|
8
8
|
function DisplayProperties({ columns, }) {
|
|
9
9
|
const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);
|
|
10
|
-
return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", gap: 3, children: [jsxRuntime.jsxRuntimeExports.jsx(text.Text, { children: "Display Properties" }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 3, children: hidableColumns.map((column) => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
|
|
10
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", gap: 3, children: [jsxRuntime.jsxRuntimeExports.jsx(text.Text, { children: "Display Properties" }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { gap: 3, wrap: "wrap", children: hidableColumns.map((column) => (jsxRuntime.jsxRuntimeExports.jsx(chip.Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
exports.DisplayProperties = DisplayProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-properties.cjs","sources":["../../../../../v1/components/data-table/components/display-properties.tsx"],"sourcesContent":["import { Chip } from \"../../chip\";\nimport { Flex } from \"../../flex\";\nimport { Text } from \"../../text\";\nimport { DataTableColumn } from \"../data-table.types\";\n\nexport function DisplayProperties<TData, TValue>({\n columns,\n}: {\n columns: DataTableColumn<TData, TValue>[];\n}) {\n const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);\n\n return (\n <Flex direction={\"column\"} gap={3}>\n <Text>Display Properties</Text>\n <Flex gap={3}>\n {hidableColumns.map((column) => (\n <Chip\n key={column.id}\n variant=\"outline\"\n size=\"small\"\n color={column.getIsVisible() ? \"accent\" : \"neutral\"}\n onClick={() => column.toggleVisibility()}\n >\n {(column.columnDef.header as string) || column.id}\n </Chip>\n ))}\n </Flex>\n </Flex>\n );\n}\n"],"names":["_jsxs","Flex","_jsx","Text","Chip"],"mappings":";;;;;;;AAKgB,SAAA,iBAAiB,CAAgB,EAC/C,OAAO,GAGR,EAAA;AACC,IAAA,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"display-properties.cjs","sources":["../../../../../v1/components/data-table/components/display-properties.tsx"],"sourcesContent":["import { Chip } from \"../../chip\";\nimport { Flex } from \"../../flex\";\nimport { Text } from \"../../text\";\nimport { DataTableColumn } from \"../data-table.types\";\n\nexport function DisplayProperties<TData, TValue>({\n columns,\n}: {\n columns: DataTableColumn<TData, TValue>[];\n}) {\n const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);\n\n return (\n <Flex direction={\"column\"} gap={3}>\n <Text>Display Properties</Text>\n <Flex gap={3} wrap={\"wrap\"}>\n {hidableColumns.map((column) => (\n <Chip\n key={column.id}\n variant=\"outline\"\n size=\"small\"\n color={column.getIsVisible() ? \"accent\" : \"neutral\"}\n onClick={() => column.toggleVisibility()}\n >\n {(column.columnDef.header as string) || column.id}\n </Chip>\n ))}\n </Flex>\n </Flex>\n );\n}\n"],"names":["_jsxs","Flex","_jsx","Text","Chip"],"mappings":";;;;;;;AAKgB,SAAA,iBAAiB,CAAgB,EAC/C,OAAO,GAGR,EAAA;AACC,IAAA,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE5E,QACEA,kCAACC,SAAI,EAAA,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAC/B,QAAA,EAAA,CAAAC,gCAAA,CAACC,SAAI,EAA0B,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAA,EAC/BD,iCAACD,SAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EACvB,QAAA,EAAA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBC,iCAACE,SAAI,EAAA,EAEH,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,QAAQ,GAAG,SAAS,EACnD,OAAO,EAAE,MAAM,MAAM,CAAC,gBAAgB,EAAE,EAAA,QAAA,EAEtC,MAAM,CAAC,SAAS,CAAC,MAAiB,IAAI,MAAM,CAAC,EAAE,IAN5C,MAAM,CAAC,EAAE,CAOT,CACR,CAAC,EACG,CAAA,CAAA,EAAA,CACF,EACP;AACJ;;;;"}
|
|
@@ -5,7 +5,7 @@ import { Text } from '../../text/text.js';
|
|
|
5
5
|
|
|
6
6
|
function DisplayProperties({ columns, }) {
|
|
7
7
|
const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);
|
|
8
|
-
return (jsxRuntimeExports.jsxs(Flex, { direction: "column", gap: 3, children: [jsxRuntimeExports.jsx(Text, { children: "Display Properties" }), jsxRuntimeExports.jsx(Flex, { gap: 3, children: hidableColumns.map((column) => (jsxRuntimeExports.jsx(Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
|
|
8
|
+
return (jsxRuntimeExports.jsxs(Flex, { direction: "column", gap: 3, children: [jsxRuntimeExports.jsx(Text, { children: "Display Properties" }), jsxRuntimeExports.jsx(Flex, { gap: 3, wrap: "wrap", children: hidableColumns.map((column) => (jsxRuntimeExports.jsx(Chip, { variant: "outline", size: "small", color: column.getIsVisible() ? "accent" : "neutral", onClick: () => column.toggleVisibility(), children: column.columnDef.header || column.id }, column.id))) })] }));
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export { DisplayProperties };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-properties.js","sources":["../../../../../v1/components/data-table/components/display-properties.tsx"],"sourcesContent":["import { Chip } from \"../../chip\";\nimport { Flex } from \"../../flex\";\nimport { Text } from \"../../text\";\nimport { DataTableColumn } from \"../data-table.types\";\n\nexport function DisplayProperties<TData, TValue>({\n columns,\n}: {\n columns: DataTableColumn<TData, TValue>[];\n}) {\n const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);\n\n return (\n <Flex direction={\"column\"} gap={3}>\n <Text>Display Properties</Text>\n <Flex gap={3}>\n {hidableColumns.map((column) => (\n <Chip\n key={column.id}\n variant=\"outline\"\n size=\"small\"\n color={column.getIsVisible() ? \"accent\" : \"neutral\"}\n onClick={() => column.toggleVisibility()}\n >\n {(column.columnDef.header as string) || column.id}\n </Chip>\n ))}\n </Flex>\n </Flex>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKgB,SAAA,iBAAiB,CAAgB,EAC/C,OAAO,GAGR,EAAA;AACC,IAAA,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"display-properties.js","sources":["../../../../../v1/components/data-table/components/display-properties.tsx"],"sourcesContent":["import { Chip } from \"../../chip\";\nimport { Flex } from \"../../flex\";\nimport { Text } from \"../../text\";\nimport { DataTableColumn } from \"../data-table.types\";\n\nexport function DisplayProperties<TData, TValue>({\n columns,\n}: {\n columns: DataTableColumn<TData, TValue>[];\n}) {\n const hidableColumns = columns?.filter((col) => col.columnDef.enableHiding);\n\n return (\n <Flex direction={\"column\"} gap={3}>\n <Text>Display Properties</Text>\n <Flex gap={3} wrap={\"wrap\"}>\n {hidableColumns.map((column) => (\n <Chip\n key={column.id}\n variant=\"outline\"\n size=\"small\"\n color={column.getIsVisible() ? \"accent\" : \"neutral\"}\n onClick={() => column.toggleVisibility()}\n >\n {(column.columnDef.header as string) || column.id}\n </Chip>\n ))}\n </Flex>\n </Flex>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKgB,SAAA,iBAAiB,CAAgB,EAC/C,OAAO,GAGR,EAAA;AACC,IAAA,MAAM,cAAc,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE5E,QACEA,uBAAC,IAAI,EAAA,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAC/B,QAAA,EAAA,CAAAC,qBAAA,CAAC,IAAI,EAA0B,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAA,EAC/BA,sBAAC,IAAI,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EACvB,QAAA,EAAA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,MACzBA,sBAAC,IAAI,EAAA,EAEH,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,MAAM,CAAC,YAAY,EAAE,GAAG,QAAQ,GAAG,SAAS,EACnD,OAAO,EAAE,MAAM,MAAM,CAAC,gBAAgB,EAAE,EAAA,QAAA,EAEtC,MAAM,CAAC,SAAS,CAAC,MAAiB,IAAI,MAAM,CAAC,EAAE,IAN5C,MAAM,CAAC,EAAE,CAOT,CACR,CAAC,EACG,CAAA,CAAA,EAAA,CACF,EACP;AACJ;;;;"}
|
|
@@ -7,7 +7,7 @@ var button = require('../../button/button.cjs');
|
|
|
7
7
|
var popover = require('../../popover/popover.cjs');
|
|
8
8
|
var reactIcons_esm = require('../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
|
|
9
9
|
var useDataTable = require('../hooks/useDataTable.cjs');
|
|
10
|
-
var
|
|
10
|
+
var dataTable_types = require('../data-table.types.cjs');
|
|
11
11
|
var ordering = require('./ordering.cjs');
|
|
12
12
|
var grouping = require('./grouping.cjs');
|
|
13
13
|
var displayProperties = require('./display-properties.cjs');
|
|
@@ -44,7 +44,7 @@ function DisplaySettings() {
|
|
|
44
44
|
function onReset() {
|
|
45
45
|
onDisplaySettingsReset();
|
|
46
46
|
}
|
|
47
|
-
return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "outline", color: "neutral", size: "small", leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MixerHorizontalIcon, {}), children: "Display" }) }), jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Content, { className: dataTable_module.default["display-popover-content"], align: "end", children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", className: dataTable_module.default["display-popover-properties-container"], gap: 5, children: [jsxRuntime.jsxRuntimeExports.jsx(ordering.Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntime.jsxRuntimeExports.jsx(grouping.Grouping, { columns: columns, onChange: onGroupChange, value: tableQuery?.group_by?.[0] ||
|
|
47
|
+
return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "outline", color: "neutral", size: "small", leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MixerHorizontalIcon, {}), children: "Display" }) }), jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Content, { className: dataTable_module.default["display-popover-content"], align: "end", children: jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", children: [jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { direction: "column", className: dataTable_module.default["display-popover-properties-container"], gap: 5, children: [jsxRuntime.jsxRuntimeExports.jsx(ordering.Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntime.jsxRuntimeExports.jsx(grouping.Grouping, { columns: columns, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || dataTable_types.defaultGroupOption.id })] }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { className: dataTable_module.default["display-popover-properties-container"], children: jsxRuntime.jsxRuntimeExports.jsx(displayProperties.DisplayProperties, { columns: columns }) }), jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { justify: "end", className: dataTable_module.default["display-popover-reset-container"], children: jsxRuntime.jsxRuntimeExports.jsx(button.Button, { variant: "text", onClick: onReset, children: "Reset to default" }) })] }) })] }));
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
exports.DisplaySettings = DisplaySettings;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-settings.cjs","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"sourcesContent":["import { Flex } from \"../../flex\";\nimport styles from \"../data-table.module.css\";\nimport { Button } from \"../../button\";\nimport { Popover } from \"../../popover\";\nimport { MixerHorizontalIcon } from \"@radix-ui/react-icons\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {
|
|
1
|
+
{"version":3,"file":"display-settings.cjs","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"sourcesContent":["import { Flex } from \"../../flex\";\nimport styles from \"../data-table.module.css\";\nimport { Button } from \"../../button\";\nimport { Popover } from \"../../popover\";\nimport { MixerHorizontalIcon } from \"@radix-ui/react-icons\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {\n DataTableColumn,\n SortOrdersValues,\n defaultGroupOption,\n} from \"../data-table.types\";\nimport { Ordering } from \"./ordering\";\nimport { Grouping } from \"./grouping\";\nimport { DisplayProperties } from \"./display-properties\";\n\nexport function DisplaySettings<TData, TValue>() {\n const {\n table,\n updateTableQuery,\n tableQuery,\n defaultSort,\n onDisplaySettingsReset,\n } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const sortableColumns = columns\n ?.filter((col) => col.columnDef.enableSorting)\n ?.map((column) => {\n const id = column.id;\n return {\n label: column.columnDef.header || id,\n id: id,\n };\n });\n\n function onSortChange(columnId: string, order: SortOrdersValues) {\n updateTableQuery((query) => {\n return {\n ...query,\n sort: [{ name: columnId, order }],\n };\n });\n }\n\n function onGroupChange(columnId: string, order: SortOrdersValues) {\n updateTableQuery((query) => {\n return {\n ...query,\n group_by: [columnId],\n __group_by_sort: order,\n };\n });\n }\n\n function onReset() {\n onDisplaySettingsReset();\n }\n\n return (\n <Popover>\n <Popover.Trigger asChild>\n <Button\n variant={\"outline\"}\n color=\"neutral\"\n size={\"small\"}\n leadingIcon={<MixerHorizontalIcon />}\n >\n Display\n </Button>\n </Popover.Trigger>\n <Popover.Content\n className={styles[\"display-popover-content\"]}\n align=\"end\"\n >\n <Flex direction={\"column\"}>\n <Flex\n direction={\"column\"}\n className={styles[\"display-popover-properties-container\"]}\n gap={5}\n >\n <Ordering\n columnList={sortableColumns}\n onChange={onSortChange}\n value={tableQuery?.sort?.[0] || defaultSort}\n />\n <Grouping\n columns={columns}\n onChange={onGroupChange}\n value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n />\n </Flex>\n <Flex className={styles[\"display-popover-properties-container\"]}>\n <DisplayProperties columns={columns} />\n </Flex>\n <Flex\n justify={\"end\"}\n className={styles[\"display-popover-reset-container\"]}\n >\n <Button variant={\"text\"} onClick={onReset}>\n Reset to default\n </Button>\n </Flex>\n </Flex>\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["useDataTable","_jsxs","Popover","_jsx","Button","MixerHorizontalIcon","styles","Flex","Ordering","Grouping","defaultGroupOption","DisplayProperties"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAeA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,6CA2F5C"}
|
|
@@ -5,7 +5,7 @@ import { Button } from '../../button/button.js';
|
|
|
5
5
|
import { Popover } from '../../popover/popover.js';
|
|
6
6
|
import { MixerHorizontalIcon } from '../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
|
|
7
7
|
import { useDataTable } from '../hooks/useDataTable.js';
|
|
8
|
-
import { defaultGroupOption } from '../
|
|
8
|
+
import { defaultGroupOption } from '../data-table.types.js';
|
|
9
9
|
import { Ordering } from './ordering.js';
|
|
10
10
|
import { Grouping } from './grouping.js';
|
|
11
11
|
import { DisplayProperties } from './display-properties.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"display-settings.js","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"sourcesContent":["import { Flex } from \"../../flex\";\nimport styles from \"../data-table.module.css\";\nimport { Button } from \"../../button\";\nimport { Popover } from \"../../popover\";\nimport { MixerHorizontalIcon } from \"@radix-ui/react-icons\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {
|
|
1
|
+
{"version":3,"file":"display-settings.js","sources":["../../../../../v1/components/data-table/components/display-settings.tsx"],"sourcesContent":["import { Flex } from \"../../flex\";\nimport styles from \"../data-table.module.css\";\nimport { Button } from \"../../button\";\nimport { Popover } from \"../../popover\";\nimport { MixerHorizontalIcon } from \"@radix-ui/react-icons\";\nimport { useDataTable } from \"../hooks/useDataTable\";\nimport {\n DataTableColumn,\n SortOrdersValues,\n defaultGroupOption,\n} from \"../data-table.types\";\nimport { Ordering } from \"./ordering\";\nimport { Grouping } from \"./grouping\";\nimport { DisplayProperties } from \"./display-properties\";\n\nexport function DisplaySettings<TData, TValue>() {\n const {\n table,\n updateTableQuery,\n tableQuery,\n defaultSort,\n onDisplaySettingsReset,\n } = useDataTable();\n const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n const sortableColumns = columns\n ?.filter((col) => col.columnDef.enableSorting)\n ?.map((column) => {\n const id = column.id;\n return {\n label: column.columnDef.header || id,\n id: id,\n };\n });\n\n function onSortChange(columnId: string, order: SortOrdersValues) {\n updateTableQuery((query) => {\n return {\n ...query,\n sort: [{ name: columnId, order }],\n };\n });\n }\n\n function onGroupChange(columnId: string, order: SortOrdersValues) {\n updateTableQuery((query) => {\n return {\n ...query,\n group_by: [columnId],\n __group_by_sort: order,\n };\n });\n }\n\n function onReset() {\n onDisplaySettingsReset();\n }\n\n return (\n <Popover>\n <Popover.Trigger asChild>\n <Button\n variant={\"outline\"}\n color=\"neutral\"\n size={\"small\"}\n leadingIcon={<MixerHorizontalIcon />}\n >\n Display\n </Button>\n </Popover.Trigger>\n <Popover.Content\n className={styles[\"display-popover-content\"]}\n align=\"end\"\n >\n <Flex direction={\"column\"}>\n <Flex\n direction={\"column\"}\n className={styles[\"display-popover-properties-container\"]}\n gap={5}\n >\n <Ordering\n columnList={sortableColumns}\n onChange={onSortChange}\n value={tableQuery?.sort?.[0] || defaultSort}\n />\n <Grouping\n columns={columns}\n onChange={onGroupChange}\n value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n />\n </Flex>\n <Flex className={styles[\"display-popover-properties-container\"]}>\n <DisplayProperties columns={columns} />\n </Flex>\n <Flex\n justify={\"end\"}\n className={styles[\"display-popover-reset-container\"]}\n >\n <Button variant={\"text\"} onClick={onReset}>\n Reset to default\n </Button>\n </Flex>\n </Flex>\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ var filter = require('../../icons/assets/filter.svg.cjs');
|
|
|
8
8
|
var dropdownMenu = require('../../dropdown-menu/dropdown-menu.cjs');
|
|
9
9
|
var useDataTable = require('../hooks/useDataTable.cjs');
|
|
10
10
|
var flex = require('../../flex/flex.cjs');
|
|
11
|
+
var filters = require('../../../types/filters.cjs');
|
|
11
12
|
var useFilters = require('../hooks/useFilters.cjs');
|
|
12
13
|
|
|
13
14
|
function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, }) {
|
|
@@ -31,13 +32,13 @@ function Filters() {
|
|
|
31
32
|
return id === filter.name;
|
|
32
33
|
})?.columnDef;
|
|
33
34
|
return {
|
|
34
|
-
|
|
35
|
+
filterType: columnDef?.filterType || filters.FilterType.string,
|
|
35
36
|
label: columnDef?.header || "",
|
|
36
37
|
options: columnDef?.filterOptions || [],
|
|
37
38
|
...filter,
|
|
38
39
|
};
|
|
39
40
|
}) || [];
|
|
40
|
-
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.
|
|
41
|
+
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 })] }));
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
exports.Filters = Filters;
|