@quillsql/react 2.11.20 → 2.11.21

package/dist/esm/components/UiComponents.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useContext, useEffect, useRef, } from 'react';
 import { XIcon } from '../assets';
 import { ThemeContext } from '../Context';
+import { useTheme } from '../hooks';
 import QuillTable from './QuillTable';
 /**
  * The fallback TextInput element for Quill.
@@ -46,7 +47,7 @@ export const MemoizedTextInput = ({ value, onChange, placeholder, id, }) => {
        box-sizing: border-box;
     }` }), _jsx("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: onChange, placeholder: placeholder, style: { fontFamily: theme?.fontFamily } })] }));
 };
-export const MemoizedButton = ({ label, onClick, primary = true, isLoading = false, }) => {
+export const MemoizedButton = ({ label, onClick, }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsxs("button", { className: "quill-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [_jsx("style", { children: `
     .quill-button {
@@ -66,9 +67,9 @@ export const MemoizedButton = ({ label, onClick, primary = true, isLoading = fal
     .quill-button:hover {
       background-color: rgba(56, 65, 81, 0.9);
       border-radius: 6px;
-    }` }), isLoading ? (_jsx("div", { style: { padding: '0px 16px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
+    }` }), label] }));
 };
-export const MemoizedSecondaryButton = ({ label, onClick }) => {
+export const MemoizedSecondaryButton = ({ label, onClick, }) => {
     const [theme] = useContext(ThemeContext);
     return (_jsxs("button", { className: "quill-secondary-button", onClick: onClick, style: { fontFamily: theme?.fontFamily }, children: [_jsx("style", { children: `
     .quill-secondary-button {
@@ -109,11 +110,30 @@ export const MemoizedLabel = ({ label }) => {
             fontFamily: theme?.fontFamily,
             color: theme?.secondaryTextColor || '#575E6A',
             userSelect: 'none',
-            paddingBottom: 5,
             margin: 0,
         }, children: label }));
 };
-export const MemoizedCheckbox = ({ isChecked, onChange, }) => (_jsx("input", { type: "checkbox", checked: isChecked, onChange: onChange, style: { width: '14px', height: '14px', margin: 'auto 0' } }));
+export const MemoizedCheckbox = ({ isChecked, label, onChange, }) => {
+    const theme = useTheme();
+    return (_jsxs("label", { style: {
+            display: 'flex',
+            width: '100%',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            gap: 4,
+        }, children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: onChange, style: { width: '14px', height: '14px', margin: 'auto 0' } }), _jsx("span", { style: {
+                    display: 'block',
+                    marginTop: 'auto',
+                    marginBottom: 'auto',
+                    marginLeft: '6px',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                }, children: label })] }));
+};
 export const DEFAULT_TAB_OPTIONS = [
     { label: 'or', value: 'OR' },
     { label: 'and', value: 'AND' },
@@ -134,14 +154,12 @@ export const QuillTabs = ({ options = DEFAULT_TAB_OPTIONS, value, onChange, }) =
             outlineStyle: 'none',
             transitionProperty: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
             transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-            transitionDuration: ['300ms', '300ms'],
-            borderColor: '#e7e7e7',
+            transitionDuration: '300ms',
             margin: '0px',
             paddingTop: '0.375rem',
             paddingBottom: '0.375rem',
             paddingLeft: '0.75rem',
             paddingRight: '0.75rem',
-            color: '12px',
             ...(option.value === value
                 ? {
                     fontWeight: 700,
@@ -244,16 +262,10 @@ export function MemoizedModal({ isOpen, setIsOpen, title, children, width, heigh
                 }, children: _jsxs("div", { style: {
                         width: '100%',
                         height: '100%',
-                        maxWidth: 'calc(100vw - 82px)',
-                        maxHeight: 'calc(100vh - 82px)',
                         overflowY: 'scroll',
-                        // maxWidth: "700px",
                         backgroundColor: '#ffffff',
-                        // padding: "20px",
-                        // borderRadius: "8px",
                         display: 'flex',
                         flexDirection: 'column',
-                        // alignItems: 'center',
                         position: 'relative',
                         fontFamily: theme?.fontFamily,
                     }, children: [_jsxs("div", { id: "quill-modal-header", style: {
@@ -262,15 +274,18 @@ export function MemoizedModal({ isOpen, setIsOpen, title, children, width, heigh
                                 width: '100%',
                                 justifyContent: 'space-between',
                                 alignItems: 'center',
+                                padding: 10,
                             }, children: [_jsx("h2", { style: {
                                         fontSize: 18,
                                         fontWeight: '600',
-                                        marginLeft: 20,
                                         // width: '90%',
                                         textAlign: 'left',
-                                        paddingTop: 18,
+                                        paddingLeft: 10,
                                         color: theme?.primaryTextColor,
-                                    }, children: title }), _jsx("div", { style: { marginRight: 10, marginTop: 10 }, children: _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false) }) })] }), children] }) })] }));
+                                    }, children: title }), _jsx(MemoizedDeleteButton, { onClick: () => setIsOpen(false) })] }), _jsx("div", { style: {
+                                height: 'calc(100% - 60px)', // full height minus title
+                                width: '100%', // full width minus margin
+                            }, children: children })] }) })] }));
 }
 export const MemoizedDeleteButton = ({ onClick, }) => (_jsxs("button", { className: "quill-delete-button", type: "button", onClick: onClick, style: {
         height: 40,

package/dist/esm/internals/ReportBuilder/PivotList.d.ts

@@ -9,7 +9,7 @@ export declare const PivotCard: ({ pivotTable, theme, index, onSelectPivot, sele
     ButtonComponent: any;
     showEdit?: boolean | undefined;
     clickable?: boolean | undefined;
-    onClose?: (() => void) | undefined;
+    onClose: any;
     minHeight?: number | undefined;
     CardComponent?: typeof QuillCard | undefined;
     LabelComponent: any;

package/dist/esm/internals/ReportBuilder/PivotList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PivotList.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;6CAiNrB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;6CAqFrB,CAAC"}
+{"version":3,"file":"PivotList.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;6CAmNrB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;6CAqFrB,CAAC"}

package/dist/esm/internals/ReportBuilder/PivotList.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { quillFormat } from '../../utils/valueFormatter';
 import { snakeCaseToTitleCase } from '../../utils/textProcessing';
 import { QuillCard } from '../../components/QuillCard';
-export const PivotCard = ({ pivotTable, theme, index, onSelectPivot, selectedPivotIndex, onEditPivot, ButtonComponent, showEdit = false, clickable = true, onClose = () => { }, minHeight = 0, CardComponent = QuillCard, LabelComponent, TextComponent, HeaderComponent, }) => {
+export const PivotCard = ({ pivotTable, theme, index, onSelectPivot, selectedPivotIndex, onEditPivot, ButtonComponent, showEdit = false, clickable = true, onClose, minHeight = 0, CardComponent = QuillCard, LabelComponent, TextComponent, HeaderComponent, }) => {
     const maxRowsInPivotPeak = 5;
-    return (_jsx(CardComponent, { onClick: () => onSelectPivot(pivotTable.pivot, index), onDelete: onClose, children: _jsxs("div", { style: {
+    return (_jsx(CardComponent, { onClick: onSelectPivot ? () => onSelectPivot(pivotTable.pivot, index) : undefined, onDelete: onClose, children: _jsxs("div", { style: {
                 fontSize: 14,
                 display: 'flex',
                 flexDirection: 'column',
@@ -84,5 +84,5 @@ export const PivotList = ({ recommendedPivotTables, createdPivotTables, onSelect
                             justifyContent: 'center',
                             alignItems: 'center',
                             width: '100%',
-                        }, children: "Create pivot +" }) }))] }) }));
+                        }, children: _jsx(LabelComponent, { label: "Create pivot +" }) }) }))] }) }));
 };

package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PivotModal.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotModal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PivotModal.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotModal.tsx"],"names":[],"mappings":"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"}

package/dist/esm/internals/ReportBuilder/PivotModal.js

@@ -248,11 +248,17 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                             setPopUpTitle('Add Pivot');
                         }
                         setIsOpen(isOpen);
-                    }, popoverChildren: _jsx("div", { children: showUpdatePivot ? (_jsxs("div", { className: "ref-in-use", ref: editModalRef, style: {
+                    }, popoverTitle: showUpdatePivot ? popUpTitle : 'Recommended pivots', popoverChildren: _jsx("div", { style: {
+                            paddingTop: showUpdatePivot ? 0 : 20,
+                            position: 'relative',
+                        }, children: showUpdatePivot ? (_jsxs("div", { className: "ref-in-use", ref: editModalRef, style: {
                                 backgroundColor: 'rgb(255, 255, 255)',
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: [_jsx(HeaderComponent, { label: popUpTitle }), _jsx("div", { style: { height: 12 } }), _jsxs("div", { style: {
+                            }, children: [_jsx("div", { style: { height: 12 } }), _jsx("div", { style: { width: divWidth }, children: samplePivotTable && (_jsx("div", { style: {
+                                            marginBottom: 20,
+                                            minHeight: 160,
+                                        }, children: _jsx(PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 140, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) })) }), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         gap: 10,
@@ -274,7 +280,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                                         dateFormatOptions.includes(format) ||
                                                                         isIdColumn(option.value));
                                                                 }),
-                                                            ] })] }), _jsxs("div", { children: [_jsx(LabelComponent, { label: "Column Field" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotColumnField, onChange: (e) => {
+                                                            ], width: 200 })] }), _jsxs("div", { children: [_jsx(LabelComponent, { label: "Column Field" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotColumnField, onChange: (e) => {
                                                                 setPivotColumnField(e.target.value === ''
                                                                     ? undefined
                                                                     : e.target.value);
@@ -282,7 +288,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                                 ...columnSelectOptions.filter((option) => {
                                                                     return (columns.find((col) => col.field === option.value)?.format === 'string');
                                                                 }),
-                                                            ] })] })] }), _jsxs("div", { style: {
+                                                            ], width: 200 })] })] }), _jsxs("div", { style: {
                                                 display: 'flex',
                                                 flexDirection: 'row',
                                                 gap: 20,
@@ -297,7 +303,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                                         numberFormatOptions.includes(columns.find((col) => col.field === option.value)?.format)) &&
                                                                         !isIdColumn(option.value));
                                                                 }),
-                                                            ] })] }), _jsxs("div", { children: [_jsx(LabelComponent, { label: "Aggregation Type" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, onChange: (e) => {
+                                                            ], width: 200 })] }), _jsxs("div", { children: [_jsx(LabelComponent, { label: "Aggregation Type" }), _jsx(SelectComponent, { id: "pivot-row-field", value: pivotAggregation, onChange: (e) => {
                                                                 if (e.target.value !== 'count' &&
                                                                     pivotValueField &&
                                                                     !numberFormatOptions.includes(columns.find((col) => col.field === pivotValueField)?.format)) {
@@ -310,7 +316,7 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                                                 ...['sum', 'average', 'count', 'max', 'min'].map((option) => {
                                                                     return { label: option, value: option };
                                                                 }),
-                                                            ] })] })] })] }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
+                                                            ], width: 200 })] })] })] }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
                                             const errors = [];
                                             if (!pivotValueField && pivotAggregation !== 'count') {
                                                 errors.push("Value field cannot be empty when aggregation is not 'count'");
@@ -366,24 +372,19 @@ export const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField,
                                             columns: selectedPivotTable?.columns,
                                         }, theme: theme, index: 0, onSelectPivot: () => { }, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, onClose: () => {
                                             removePivot();
-                                        }, clickable: true, minHeight: 180, CardComponent: CardComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) }) })) : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            width: '100%',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            paddingBottom: 12,
-                                        }, children: [_jsx("div", { style: {
-                                                    fontWeight: '600',
-                                                    fontSize: 18,
-                                                }, children: "Recommended pivots" }), _jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: refreshPivots, label: _jsxs("div", { style: {
-                                                            display: 'flex',
-                                                            flexDirection: 'row',
-                                                            whiteSpace: 'nowrap',
-                                                            alignItems: 'center',
-                                                            gap: 6,
-                                                            fontSize: 14,
-                                                        }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: _jsx("path", { fillRule: "evenodd", d: "M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z", clipRule: "evenodd" }) }), "Regenerate"] }) }) })] }), isLoading ? (_jsxs("div", { style: {
+                                        }, clickable: true, minHeight: 180, CardComponent: CardComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }) }) })) : (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: {
+                                            // position button inline with the popover title
+                                            position: 'absolute',
+                                            top: -36,
+                                            right: 0,
+                                        }, children: _jsx(SecondaryButtonComponent, { onClick: refreshPivots, label: _jsxs("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    whiteSpace: 'nowrap',
+                                                    alignItems: 'center',
+                                                    gap: 6,
+                                                    fontSize: 14,
+                                                }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: _jsx("path", { fillRule: "evenodd", d: "M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z", clipRule: "evenodd" }) }), "Regenerate"] }) }) }), isLoading ? (_jsxs("div", { style: {
                                             background: theme.backgroundColor,
                                             width: 250,
                                             minWidth: 250,

package/dist/esm/utils/color.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Generates an array of colors by interpolating between colors in the given array.
+ * @param colors - The array of colors to interpolate between.
+ * @param length - The desired length of the resulting array.
+ */
+export declare function generateArrayFromColor(colors: string | string[], length: number): string[];
 declare const colorValues: readonly ["red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
 export type Color = (typeof colorValues)[number];
 /**

package/dist/esm/utils/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/utils/color.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,mKAkBP,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,UAuBxE;AAyDD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,UAK5C;AAwJD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,YA4B9C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,YAuB9C"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/utils/color.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EACzB,MAAM,EAAE,MAAM,GACb,MAAM,EAAE,CAwBV;AA6ED,QAAA,MAAM,WAAW,mKAkBP,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,UAuBxE;AAyDD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,UAK5C;AAwJD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,YA4B9C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,YAuB9C"}

package/dist/esm/utils/color.js

@@ -1,3 +1,99 @@
+/**
+ * Generates an array of colors by interpolating between colors in the given array.
+ * @param colors - The array of colors to interpolate between.
+ * @param length - The desired length of the resulting array.
+ */
+export function generateArrayFromColor(colors, length) {
+    if (typeof colors === 'string') {
+        return monochromaticInterpolation(colors, length);
+    }
+    if (colors.length === 1) {
+        return monochromaticInterpolation(colors[0], length);
+    }
+    const pairs = colors.length - 1;
+    const needed = length - colors.length;
+    const baseAmount = Math.floor(needed / pairs);
+    const extras = needed % pairs;
+    let result = [];
+    let i = 0;
+    let j = 1;
+    while (j < colors.length) {
+        const additional = i < extras ? 1 : 0;
+        const interpLength = 2 + baseAmount + additional;
+        const interp = interpolateBetween(colors[i], colors[j], interpLength);
+        const lastIndex = j === colors.length - 1 ? undefined : -1;
+        result = result.concat(interp.slice(0, lastIndex));
+        i++;
+        j++;
+    }
+    return result;
+}
+function hexToRgb(hex) {
+    const r = parseInt(hex.substring(1, 3), 16);
+    const g = parseInt(hex.substring(3, 5), 16);
+    const b = parseInt(hex.substring(5, 7), 16);
+    return { r, g, b };
+}
+function rgbToHex(rgb) {
+    const rHex = rgb.r.toString(16).padStart(2, '0');
+    const gHex = rgb.g.toString(16).padStart(2, '0');
+    const bHex = rgb.b.toString(16).padStart(2, '0');
+    return `#${rHex}${gHex}${bHex}`;
+}
+function colorToHSL(color) {
+    const colorHex = namedColorToHex(color);
+    const { r, g, b } = hexToRgb(colorHex);
+    return rgbToHsl(r, g, b);
+}
+/**
+ * Interpolates between two colors using HSL color space.
+ * @param leftColor - The left color in hexadecimal format.
+ * @param rightColor - The right color in hexadecimal format.
+ * @param length - The number of interpolated colors to generate between the
+ * left and right colors.
+ */
+function interpolateBetween(leftColor, rightColor, length = 3) {
+    const [h, s, _l] = colorToHSL(leftColor);
+    const [h2, s2, _l2] = colorToHSL(rightColor);
+    const hues = linspace(h, h2, length);
+    const saturations = linspace(s, s2, length);
+    const lightnesses = linspace(_l, _l2, length);
+    return Array.from({ length }).map((_, i) => {
+        const [r, g, b] = HSLtoRGB(hues[i], saturations[i], lightnesses[i]);
+        return rgbToHex({ r: Math.round(r), g: Math.round(g), b: Math.round(b) });
+    });
+}
+/**
+ * Generates monochromatic interpolation of a given color.
+ * @param color - The base color in hexadecimal format.
+ * @param length - The number of interpolated colors to generate.
+ */
+function monochromaticInterpolation(color, length) {
+    const [h, s, _l] = colorToHSL(color);
+    const hues = linspace(h, h, length);
+    const saturations = linspace(s, s, length);
+    const lightnesses = linspace(0.6, 0.9, length);
+    return Array.from({ length }).map((_, i) => {
+        const [r, g, b] = HSLtoRGB(hues[i], saturations[i], lightnesses[i]);
+        return rgbToHex({ r: Math.round(r), g: Math.round(g), b: Math.round(b) });
+    });
+}
+/**
+ * Generates an array of numbers linearly spaced between start and end.
+ * @param start - The starting number of the sequence.
+ * @param end - The end number of the sequence.
+ * @param num - The number of samples to generate.
+ */
+function linspace(start, end, num) {
+    if (num <= 1)
+        return [start];
+    const step = (end - start) / (num - 1);
+    const result = new Array(num);
+    for (let i = 0; i < num; i++) {
+        result[i] = start + step * i;
+    }
+    return result;
+}
 const colorValues = [
     'red',
     'orange',

package/dist/esm/utils/valueFormatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAQ7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6BAA8B,KAAK,KAAG,MAwChE,CAAC;AAEF,eAAO,MAAM,WAAW;WAIf,GAAG;YACF,MAAM;MACZ,MAoCH,CAAC;AAmJF,eAAO,MAAM,aAAa;;;;WAGhB,MAAM,KACb,MA2BF,CAAC"}
+{"version":3,"file":"valueFormatter.d.ts","sourceRoot":"","sources":["../../../src/utils/valueFormatter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,KAAK,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAQ7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,6BAA8B,KAAK,KAAG,MAwChE,CAAC;AAEF,eAAO,MAAM,WAAW;WAIf,GAAG;YACF,MAAM;MACZ,MAoCH,CAAC;AAyKF,eAAO,MAAM,aAAa;;;;WAGhB,MAAM,KACb,MAoCF,CAAC"}

package/dist/esm/utils/valueFormatter.js

@@ -218,6 +218,26 @@ const format_wo_yyyy = (value) => {
         return 'Invalid date';
     return `${getWeek(utcDate)},${utcDate.getFullYear()}`;
 };
+/**
+ * Parses a numeric string back into a number, taking into account that
+ * users in different locales will format numbers differently (eg. 1,234 means
+ * something different from 1.234 in different countries).
+ *
+ * see: https://stackoverflow.com/a/45309230/9566888
+ */
+function parseNumber(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return Number.NaN;
+    const example = localeFormatter.format(1.1);
+    const cleanPattern = new RegExp(`[^-+0-9${example.charAt(1)}]`, 'g');
+    const cleaned = value.replace(cleanPattern, '');
+    const normalized = cleaned.replace(example.charAt(1), '.');
+    return parseFloat(normalized);
+}
+// Moved this out of parseNumber for perf reasons
+const localeFormatter = Intl.NumberFormat(typeof navigator !== 'undefined' ? navigator.language : 'en-US');
 export const compareValues = (a, b, column) => {
     const valueA = a[column];
     const valueB = b[column];
@@ -231,9 +251,19 @@ export const compareValues = (a, b, column) => {
     else if (valueB === null) {
         return 1; // ValueB is null, consider it smaller
     }
+    // Undefined checks
+    if (valueA === undefined && valueB === undefined) {
+        return 0; // Both values are undefined, consider them equal
+    }
+    else if (valueA === undefined) {
+        return -1; // ValueA is undefined, consider it smaller
+    }
+    else if (valueB === undefined) {
+        return 1; // ValueB is undefined, consider it smaller
+    }
     // For numbers
-    if (!isNaN(valueA) && !isNaN(valueB)) {
-        return valueA - valueB;
+    if (!isNaN(parseNumber(valueA)) && !isNaN(parseNumber(valueB))) {
+        return parseNumber(valueA) - parseNumber(valueB);
     }
     // For dates
     const dateA = new Date(valueA);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.11.20",
+  "version": "2.11.21",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",