@adaptabletools/adaptable 13.0.3 → 13.0.4-canary.0

package/src/View/Layout/Wizard/sections/FilterSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterSection = exports.FilterSectionSummary = void 0;
+exports.FilterSection = exports.FilterSectionSummary = exports.isColumnFiltersValid = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
@@ -11,6 +11,18 @@ const AdaptableObjectList_1 = require("../../../Components/AdaptableObjectList/A
 const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
 const getLayoutFilterViewItems_1 = require("../../../../Strategy/Utilities/Layout/getLayoutFilterViewItems");
 const Tag_1 = require("../../../../components/Tag");
+const PredicateEditor_1 = require("../../../Components/PredicateEditor/PredicateEditor");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const isColumnFiltersValid = (layout) => {
+    var _a, _b;
+    const invalidColumnFilters = (_b = ((_a = layout.ColumnFilters) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.filter((columnFilter) => { var _a; return !((_a = columnFilter === null || columnFilter === void 0 ? void 0 : columnFilter.Predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
+    if (invalidColumnFilters.length > 0) {
+        return 'Please select a predicate for each column filter';
+    }
+    return true;
+};
+exports.isColumnFiltersValid = isColumnFiltersValid;
 const FilterSectionSummary = () => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -27,9 +39,46 @@ const FilterSection = (props) => {
     const handleDelete = React.useCallback((columnFilter) => {
         props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.filter((layoutFilter) => layoutFilter.ColumnId !== columnFilter.ColumnId) }));
     }, [layout]);
+    const handlePredicateEdit = React.useCallback((predicate, columnFilter) => {
+        props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: layoutFilters.map((layoutFilter) => layoutFilter.ColumnId === columnFilter.ColumnId
+                ? Object.assign(Object.assign({}, columnFilter), { Predicate: predicate }) : layoutFilter) }));
+    }, [layout.ColumnFilters]);
+    const columnsOptions = React.useMemo(() => adaptable.api.columnApi
+        .getFiltrableColumns()
+        .filter(
+    // filter out columns with filters already
+    (abColumn) => {
+        var _a;
+        return !((_a = layout.ColumnFilters) === null || _a === void 0 ? void 0 : _a.some((columnFilter) => abColumn.columnId === columnFilter.ColumnId));
+    })
+        .map(({ columnId }) => ({
+        label: adaptable.api.columnApi.getFriendlyNameFromColumnId(columnId),
+        onClick: () => {
+            props.onChange(Object.assign(Object.assign({}, layout), { ColumnFilters: [
+                    ...layoutFilters,
+                    {
+                        ColumnId: columnId,
+                        Predicate: null,
+                    },
+                ] }));
+        },
+    })), [layout, layoutFilters]);
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Column Filters"),
-        React.createElement(Tabs_1.Tabs.Content, null, (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) ? (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { abObject: columnFilter, entityType: "Filter", showActions: true, showEditButton: false, items: filterModule.toView(columnFilter).items, onDelete: () => handleDelete(columnFilter) }))))) : (React.createElement(rebass_1.Box, null,
-            React.createElement(Tag_1.Tag, null, "No Column Filters are applied. Filters are set using the grid."))))));
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, { mb: 2 },
+                React.createElement(FormLayout_1.FormRow, { label: "Add new filter" },
+                    React.createElement(DropdownButton_1.default, { "data-name": "select-column", minWidth: 250, items: columnsOptions, mr: 2, columns: ['label'] }, "Select Column"))),
+            (layoutFilters === null || layoutFilters === void 0 ? void 0 : layoutFilters.length) > 0 && (React.createElement(rebass_1.Box, { p: 0, as: "ul" }, layoutFilters.map((columnFilter) => {
+                const predicateDefs = adaptable.api.filterApi.getFilterPredicateDefsForColumnId(columnFilter.ColumnId);
+                const items = [
+                    ...filterModule.toView(columnFilter).items,
+                    {
+                        name: 'Filter',
+                        view: (React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnFilter.ColumnId, predicate: columnFilter.Predicate, predicateDefs: predicateDefs, onChange: (predicate) => handlePredicateEdit(predicate, columnFilter), onClear: () => handlePredicateEdit(null, columnFilter) })),
+                    },
+                ];
+                return (React.createElement(AdaptableObjectList_1.AdaptableObjectListItemView, { abObject: columnFilter, entityType: "Filter", showActions: true, showEditButton: false, items: items, onDelete: () => handleDelete(columnFilter), key: columnFilter.ColumnId }));
+            }))))));
 };
 exports.FilterSection = FilterSection;

package/src/View/Query/QueryViewPanel.d.ts

@@ -26,5 +26,5 @@ declare class QueryViewPanelComponent extends React.Component<QueryViewPanelComp
     onSelectedQueryChanged(queryName: string): void;
     runQuery(expression?: string): void;
 }
-export declare let QueryViewPanelControl: import("react-redux").ConnectedComponent<typeof QueryViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<QueryViewPanelComponent> & QueryViewPanelComponentProps, "api" | "accessLevel" | "NamedQueries" | "CurrentQuery" | "moduleInfo" | "CachedQueries" | "viewType" | "onAddCachedQuery" | "onRunQuery" | "onShowNamedQueries">>;
+export declare let QueryViewPanelControl: import("react-redux").ConnectedComponent<typeof QueryViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<QueryViewPanelComponent> & QueryViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "NamedQueries" | "CurrentQuery" | "CachedQueries" | "viewType" | "onAddCachedQuery" | "onRunQuery" | "onShowNamedQueries">>;
 export {};

package/src/View/StyledColumn/Wizard/StyledColumnWizard.js

@@ -13,9 +13,10 @@ const StyledColumnWizardTypeSection_1 = require("./StyledColumnWizardTypeSection
 const StyledColumnWizardColumnSection_1 = require("./StyledColumnWizardColumnSection");
 const StyledColumnWizardStyleSection_1 = require("./StyledColumnWizardStyleSection");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const StyledColumnWizardSettingsSection_1 = require("./StyledColumnWizardSettingsSection");
 const StyledColumnWizard = (props) => {
-    var _a;
-    const data = (_a = props.data) !== null && _a !== void 0 ? _a : props.popupParams.value;
+    var _a, _b;
+    const data = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
     const [styledColumn, setStyledColumn] = (0, react_1.useState)(() => {
         if (data) {
             return (0, Helper_1.cloneObject)(data);
@@ -63,6 +64,14 @@ const StyledColumnWizard = (props) => {
                 },
                 title: 'Style',
             },
+            {
+                renderSummary: StyledColumnWizardSettingsSection_1.renderStyledColumnWizardSettingsSummary,
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(StyledColumnWizardSettingsSection_1.StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
+                },
+                title: 'Settings',
+            },
             '-',
             {
                 title: 'Summary',

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.js

@@ -32,21 +32,25 @@ const StyledColumnWizardColumnSection = (props) => {
             ? api.columnApi.getBooleanColumns()
             : api.columnApi.getNumericColumns();
         const styledColumns = api.styledColumnApi.getAllStyledColumn();
-        const usedColumnIds = styledColumns.map((StyledColumn) => StyledColumn.ColumnId);
-        // filter out used colum ids, but include the current one
-        return sortableColumns.filter((column) => {
-            if (!props.isNew && column.columnId === (data === null || data === void 0 ? void 0 : data.ColumnId)) {
-                return true;
+        const usedColumnIds = styledColumns
+            .map((styledColumn) => {
+            // filter out current styled column columnID
+            if (styledColumn.Uuid === data.Uuid) {
+                return null;
             }
+            return styledColumn.ColumnId;
+        })
+            .filter(Boolean);
+        return sortableColumns.filter((column) => {
             return usedColumnIds.every((usedColumnId) => {
                 return column.columnId !== usedColumnId;
             });
         });
-    }, []);
+    }, [data]);
     const handleColumnsChange = (columnIds) => {
         const columnId = columnIds[0];
         const emptyRanges = api.scopeApi.createCellColorRangesForScope({
-            ColumnIds: [columnId], // TODO: refactor to not use scope
+            ColumnIds: [columnId],
         });
         const newStyledColumn = Object.assign(Object.assign({}, data), { ColumnId: columnId });
         if (newStyledColumn.PercentBarStyle) {

package/src/View/StyledColumn/Wizard/StyledColumnWizardSettingsSection.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StyledColumn } from '../../../types';
+declare type StyledColumnWizardSettingsSectionSectionProps = {
+    onChange: (data: StyledColumn) => void;
+};
+export declare const renderStyledColumnWizardSettingsSummary: (data: StyledColumn) => JSX.Element;
+export declare const StyledColumnWizardSettingsSection: (props: StyledColumnWizardSettingsSectionSectionProps) => JSX.Element;
+export {};

package/src/View/StyledColumn/Wizard/StyledColumnWizardSettingsSection.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardSettingsSection = exports.renderStyledColumnWizardSettingsSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const Tabs_1 = require("../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Tag_1 = require("../../../components/Tag");
+let alignmentOptions = [
+    { value: 'Left', label: 'Left' },
+    { value: 'Right', label: 'Right' },
+    { value: 'Center', label: 'Center' },
+];
+const renderStyledColumnWizardSettingsSummary = (data) => {
+    return (React.createElement(rebass_1.Box, { padding: 2 },
+        React.createElement(rebass_1.Text, { mt: 3 },
+            "Include grouped rows ",
+            React.createElement(Tag_1.Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
+};
+exports.renderStyledColumnWizardSettingsSummary = renderStyledColumnWizardSettingsSummary;
+const StyledColumnWizardSettingsSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
+        props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
+    };
+    return (React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
+                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+};
+exports.StyledColumnWizardSettingsSection = StyledColumnWizardSettingsSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection.js

@@ -19,12 +19,18 @@ const renderFormatColumnStyleWizardSummary = (data) => {
     return (0, exports.renderStyledColumnStyleSummary)(data, api);
 };
 exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
-const getRanges = (ranges) => {
+const getRanges = (ranges, rangeValueType) => {
+    let postfix = '';
+    if (rangeValueType === 'Percentage') {
+        postfix = '%';
+    }
     return ranges.map((r, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "center", mr: 3 },
         React.createElement(rebass_1.Box, { mr: 1 },
             r.Min,
+            postfix,
             " to ",
             r.Max,
+            postfix,
             ' '),
         React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
                 BackColor: r.Color,
@@ -57,7 +63,7 @@ const renderStyledColumnStyleSummary = (data, api) => {
     }
     if (data.GradientStyle) {
         if (data.GradientStyle.CellRanges) {
-            return getRanges(data.GradientStyle.CellRanges);
+            return getRanges(data.GradientStyle.CellRanges, data.GradientStyle.RangeValueType);
         }
         if (data.GradientStyle.ColumnComparison) {
             return getColumnComparison(data.GradientStyle.ColumnComparison, api);
@@ -65,7 +71,7 @@ const renderStyledColumnStyleSummary = (data, api) => {
     }
     if (data.PercentBarStyle) {
         if (data.PercentBarStyle.CellRanges) {
-            return getRanges(data.PercentBarStyle.CellRanges);
+            return getRanges(data.PercentBarStyle.CellRanges, data.PercentBarStyle.RangeValueType);
         }
         if (data.PercentBarStyle.ColumnComparison) {
             return getColumnComparison(data.PercentBarStyle.ColumnComparison, api);
@@ -75,7 +81,7 @@ const renderStyledColumnStyleSummary = (data, api) => {
 };
 exports.renderStyledColumnStyleSummary = renderStyledColumnStyleSummary;
 const StyledColumnWizardStyleSection = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const minMaxRangeValues = React.useMemo(() => {
         const columnId = data.ColumnId;
@@ -91,9 +97,7 @@ const StyledColumnWizardStyleSection = (props) => {
     const scope = { ColumnIds: [data.ColumnId] }; // TODO: remove scope when format column columnStyle is removed
     // gradient
     const onUpdateGradientStyleRanges = (ranges) => {
-        const GradientStyle = {
-            CellRanges: ranges,
-        };
+        const GradientStyle = Object.assign(Object.assign({}, data.GradientStyle), { CellRanges: ranges });
         props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
     };
     const onUpdateGradientStyleColumnComparison = (columnComparison) => {
@@ -201,34 +205,57 @@ const StyledColumnWizardStyleSection = (props) => {
         percentBarStyle.BackColor = color;
         props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
     };
+    const handleRangeValueTypeChange = React.useCallback((rangeValueType) => {
+        const ranges = rangeValueType === 'Number'
+            ? api.scopeApi.createCellColorRangesForScope(scope)
+            : [
+                {
+                    Min: 0,
+                    Max: 100,
+                    Color: (0, UIHelper_1.getHexForName)(UIHelper_1.GRAY),
+                },
+            ];
+        let newStyledColumn = data;
+        const commonStyle = {
+            CellRanges: ranges,
+            RangeValueType: rangeValueType,
+        };
+        if ('GradientStyle' in newStyledColumn) {
+            newStyledColumn = Object.assign(Object.assign({}, newStyledColumn), { GradientStyle: Object.assign(Object.assign({}, newStyledColumn.GradientStyle), commonStyle) });
+        }
+        else {
+            newStyledColumn = Object.assign(Object.assign({}, newStyledColumn), { PercentBarStyle: Object.assign(Object.assign({}, newStyledColumn.PercentBarStyle), commonStyle) });
+        }
+        props.onChange(newStyledColumn);
+    }, [data]);
     const disabled = !data.ColumnId;
     return (React.createElement(rebass_1.Box, null,
         data.CheckBoxStyle && (React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Check Box Column"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(CheckBox_1.CheckBox, { marginLeft: 2, readOnly: true, checked: true }, "Display Column As CheckBox")))),
-        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, columnComparison: (_b = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _b === void 0 ? void 0 : _b.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
+        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent_1.RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, rangeValueType: (_b = data.GradientStyle) === null || _b === void 0 ? void 0 : _b.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_c = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _c === void 0 ? void 0 : _c.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
         data.PercentBarStyle && (React.createElement(React.Fragment, null,
-            React.createElement(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_c = data.PercentBarStyle) === null || _c === void 0 ? void 0 : _c.CellRanges, columnComparison: (_d = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
+            React.createElement(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_d = data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.CellRanges, rangeValueType: (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_f = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _f === void 0 ? void 0 : _f.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
             React.createElement(FormLayout_1.default, { marginLeft: 2, marginTop: 2 },
                 React.createElement(FormLayout_1.FormRow, { label: "Cell Display:" },
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_f = (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.CellText) === null || _f === void 0 ? void 0 : _f.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_h = (_g = data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_h = (_g = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.CellText) === null || _k === void 0 ? void 0 : _k.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
                 React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.ToolTipText) === null || _k === void 0 ? void 0 : _k.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: (_m = (_l = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.ToolTipText) === null || _m === void 0 ? void 0 : _m.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_m = (_l = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.ToolTipText) === null || _m === void 0 ? void 0 : _m.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: (_p = (_o = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.ToolTipText) === null || _p === void 0 ? void 0 : _p.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
                 React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
                     React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!((_o = data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
-                        ((_p = data.PercentBarStyle) === null || _p === void 0 ? void 0 : _p.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_q = data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
+                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!((_q = data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                        ((_r = data.PercentBarStyle) === null || _r === void 0 ? void 0 : _r.BackColor) !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: (_s = data.PercentBarStyle) === null || _s === void 0 ? void 0 : _s.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
         !data.ColumnId && React.createElement(ErrorBox_1.default, { mt: 2 }, "You need to select a column before styling.")));
 };
 exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

package/src/agGrid/Adaptable.js

@@ -924,31 +924,47 @@ class Adaptable {
         if (params.value === undefined) {
             return;
         }
+        let colValue = params.value;
+        if (this.api.gridApi.isGroupRowNode(params.node)) {
+            if (styledColumn.IncludeGroupedRows) {
+                const minColumnValue = this.api.columnApi.getMinValueForNumericColumn(abColumn);
+                const maxColumnValue = this.api.columnApi.getMaxValueForNumericColumn(abColumn);
+                /**
+                 * Color should always be in bounds, it should not overflow.
+                 * If the value is out of range, it shoul set the maximum/minimum color.
+                 */
+                colValue = (0, clamp_1.default)(params.value, minColumnValue, maxColumnValue);
+            }
+            else {
+                return style;
+            }
+        }
         if (gradientStyle) {
-            const min = this.api.styledColumnApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
-            const max = this.api.styledColumnApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
-            const clampedValue = (0, clamp_1.default)(params.value, min, max);
+            const min = this.api.styledColumnApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, colValue);
+            const max = this.api.styledColumnApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, colValue);
             let cellBackColor;
             let reverseGradient = false;
             if (gradientStyle.ColumnComparison) {
                 cellBackColor = gradientStyle.ColumnComparison.Color;
             }
             else {
-                const matchingRange = gradientStyle.CellRanges.find((r) => (r.Min == 'Col-Min' || r.Min <= clampedValue) &&
-                    (r.Max == 'Col-Max' || r.Max >= clampedValue));
+                const matchingRange = this.api.styledColumnApi.findRangeForColumn(gradientStyle.CellRanges, abColumn, gradientStyle.RangeValueType, colValue);
                 if (matchingRange) {
                     cellBackColor = matchingRange.Color;
                     reverseGradient = matchingRange.ReverseGradient;
                 }
             }
             const increase = Math.abs(max - min);
-            const percentage = ((params.value - min) / increase) * 100;
+            const percentage = ((colValue - min) / increase) * 100;
             let alpha = Number((percentage / 100).toPrecision(2));
             if (reverseGradient) {
                 alpha = 1 - alpha;
             }
             const preparedColor = (0, StyleHelper_1.getVariableColor)(cellBackColor);
-            style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
+            // if no range match, do not apply color (black in this case)
+            if (cellBackColor) {
+                style.backgroundColor = tinycolor(preparedColor).setAlpha(alpha).toRgbString();
+            }
         }
         if (styledColumn.PercentBarStyle && styledColumn.PercentBarStyle.CellText) {
             style.paddingTop = 0;

package/src/agGrid/PercentBarRenderer.d.ts

@@ -1,8 +1,4 @@
-import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/StyledColumnState';
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
 import { AdaptableApi } from '../Api/AdaptableApi';
 import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
-export declare const getPercentBarRendererForColumn: (columnStyle: {
-    GradientStyle?: GradientStyle;
-    PercentBarStyle?: PercentBarStyle;
-    CheckBoxStyle?: boolean;
-}, abColumn: AdaptableColumn, api: AdaptableApi) => any;
+export declare const getPercentBarRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/PercentBarRenderer.js

@@ -5,14 +5,17 @@ const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
-const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
-    if (!columnStyle.PercentBarStyle) {
+const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
+    if (!styledColumn.PercentBarStyle) {
         return;
     }
     return class PercentBarRenderer {
         init(params) {
-            const min = api.styledColumnApi.getNumericStyleMinValue(columnStyle, abColumn, params.node, params.value);
-            const max = api.styledColumnApi.getNumericStyleMaxValue(columnStyle, abColumn, params.node, params.value);
+            if (!styledColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
+                return;
+            }
+            const min = api.styledColumnApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
+            const max = api.styledColumnApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
             let value = params.value;
             if (Helper_1.default.objectNotExists(value)) {
                 value = 0;
@@ -20,16 +23,12 @@ const getPercentBarRendererForColumn = (columnStyle, abColumn, api) => {
             const clampedValue = (0, clamp_1.default)(value, min, max);
             const percentageValue = ((clampedValue - min) / (max - min)) * 100;
             let cellBackColor;
-            const percentBarStyle = columnStyle.PercentBarStyle;
+            const percentBarStyle = styledColumn.PercentBarStyle;
             if (percentBarStyle.ColumnComparison) {
                 cellBackColor = percentBarStyle.ColumnComparison.Color;
             }
             else {
-                const matchingRange = percentBarStyle.CellRanges.find((r) => {
-                    const rMin = r.Min === 'Col-Min' ? min : r.Min;
-                    const rMax = r.Max === 'Col-Max' ? max : r.Max;
-                    return rMin <= clampedValue && rMax >= clampedValue;
-                });
+                const matchingRange = api.styledColumnApi.findRangeForColumn(percentBarStyle.CellRanges, abColumn, percentBarStyle.RangeValueType, params.value);
                 if (matchingRange) {
                     cellBackColor = matchingRange.Color;
                 }

package/src/agGrid/agGridHelper.d.ts

@@ -5,7 +5,7 @@ import { AdaptableNodeComparerFunction } from '../PredefinedConfig/Common/Adapta
 import { AdaptableColumnType, AdaptableModule } from '../PredefinedConfig/Common/Types';
 import { IModule } from '../Strategy/Interface/IModule';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
-import { GradientStyle, PercentBarStyle } from '../PredefinedConfig/StyledColumnState';
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
 /**
  * Adaptable AG Grid implementation is getting really big and unwieldy
  * So lets put some of the more obvious 'Helper' functions here
@@ -22,11 +22,7 @@ export declare class agGridHelper {
     setUpModules(): Map<AdaptableModule, IModule>;
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey: boolean): boolean;
     createCheckboxRendererComp(columnId: string, isColumnReadOnly: boolean): ICellRendererFunc | undefined;
-    createPercentBarRendererComp(columnStyle: {
-        GradientStyle?: GradientStyle;
-        PercentBarStyle?: PercentBarStyle;
-        CheckBoxStyle?: boolean;
-    }, abColumn: AdaptableColumn): ICellRendererFunc;
+    createPercentBarRendererComp(styledColumn: StyledColumn, abColumn: AdaptableColumn): ICellRendererFunc;
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;
     createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;

package/src/agGrid/agGridHelper.js

@@ -151,8 +151,8 @@ class agGridHelper {
     createCheckboxRendererComp(columnId, isColumnReadOnly) {
         return (0, CheckboxRenderer_1.getCheckboxRendererForColumn)(columnId, isColumnReadOnly, this.adaptable.api);
     }
-    createPercentBarRendererComp(columnStyle, abColumn) {
-        return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(columnStyle, abColumn, this.adaptable.api);
+    createPercentBarRendererComp(styledColumn, abColumn) {
+        return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(styledColumn, abColumn, this.adaptable.api);
     }
     getCleanValue(value) {
         if (value == null || value == 'null' || value == undefined || value == 'undefined') {

package/src/bundle-dependencies/bundles/react-toastify/index.js

@@ -1 +1 @@
-var Le=Object.defineProperty,Re=Object.defineProperties;var Pe=Object.getOwnPropertyDescriptors;var K=Object.getOwnPropertySymbols;var ce=Object.prototype.hasOwnProperty,ue=Object.prototype.propertyIsEnumerable;var de=(e,t,n)=>t in e?Le(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,m=(e,t)=>{for(var n in t||(t={}))ce.call(t,n)&&de(e,n,t[n]);if(K)for(var n of K(t))ue.call(t,n)&&de(e,n,t[n]);return e},S=(e,t)=>Re(e,Pe(t));var ne=(e,t)=>{var n={};for(var o in e)ce.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(e!=null&&K)for(var o of K(e))t.indexOf(o)<0&&ue.call(e,o)&&(n[o]=e[o]);return n};var xe=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var ge=xe((Xe,se)=>{function fe(e){var t,n,o="";if(typeof e=="string"||typeof e=="number")o+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=fe(e[t]))&&(o&&(o+=" "),o+=n);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function me(){for(var e,t,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(t=fe(e))&&(o&&(o+=" "),o+=t);return o}se.exports=me,se.exports.clsx=me});var f=require("react"),Be=ge();function ye(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var g=ye(f),w=ye(Be);function W(e){return typeof e=="number"&&!isNaN(e)}function G(e){return typeof e=="boolean"}function A(e){return typeof e=="string"}function B(e){return typeof e=="function"}function Z(e){return A(e)||B(e)?e:null}function oe(e){return e===0||e}function De(e,t){return e===!1||W(e)&&e>0?e:t}function ae(e){return f.isValidElement(e)||A(e)||B(e)||W(e)}var Te={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},k={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"};function pe(e,t,n){n===void 0&&(n=300);let{scrollHeight:o,style:c}=e;requestAnimationFrame(()=>{c.minHeight="initial",c.height=o+"px",c.transition="all "+n+"ms",requestAnimationFrame(()=>{c.height="0",c.padding="0",c.margin="0",setTimeout(t,n)})})}function Y(e){let{enter:t,exit:n,appendPosition:o=!1,collapse:c=!0,collapseDuration:i=300}=e;return function(l){let{children:L,position:v,preventExitTransition:E,done:p,nodeRef:I,isIn:b}=l,_=o?t+"--"+v:t,r=o?n+"--"+v:n,d=f.useRef(),C=f.useRef(0);f.useLayoutEffect(()=>{O()},[]),f.useEffect(()=>{b||(E?P():R())},[b]);function O(){let y=I.current;d.current=y.className,y.className+=" "+_,y.addEventListener("animationend",a),y.addEventListener("animationcancel",a)}function a(y){if(y.target!==I.current)return;let u=I.current;u.dispatchEvent(new Event("d")),u.removeEventListener("animationend",a),u.removeEventListener("animationcancel",a),C.current===0&&y.type!=="animationcancel"&&(u.className=d.current)}function R(){C.current=1;let y=I.current;y.className+=" "+r,y.addEventListener("animationend",P)}function P(){let y=I.current;y.removeEventListener("animationend",P),c?pe(y,p,i):p()}return g.default.createElement(g.default.Fragment,null,L)}}function he(e,t){return{content:e.content,containerId:e.props.containerId,id:e.props.toastId,theme:e.props.theme,type:e.props.type,data:e.props.data||{},isLoading:e.props.isLoading,icon:e.props.icon,status:t}}var D={list:new Map,emitQueue:new Map,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t){let n=this.list.get(e).filter(o=>o!==t);return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit(e){let t=this.emitQueue.get(e);return t&&(t.forEach(clearTimeout),this.emitQueue.delete(e)),this},emit(e){this.list.has(e)&&this.list.get(e).forEach(t=>{let n=setTimeout(()=>{t(...[].slice.call(arguments,1))},0);this.emitQueue.has(e)||this.emitQueue.set(e,[]),this.emitQueue.get(e).push(n)})}},J=e=>{let c=e,{theme:t,type:n}=c,o=ne(c,["theme","type"]);return g.default.createElement("svg",m({viewBox:"0 0 24 24",width:"100%",height:"100%",fill:t==="colored"?"currentColor":"var(--toastify-icon-color-"+n+")"},o))};function Se(e){return g.default.createElement(J,m({},e),g.default.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))}function Me(e){return g.default.createElement(J,m({},e),g.default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))}function ke(e){return g.default.createElement(J,m({},e),g.default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))}function we(e){return g.default.createElement(J,m({},e),g.default.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))}function Fe(){return g.default.createElement("div",{className:"Toastify__spinner"})}var $={info:Me,warning:Se,success:ke,error:we,spinner:Fe},Ae=e=>e in $;function ze(e){let{theme:t,type:n,isLoading:o,icon:c}=e,i=null,s={theme:t,type:n};return c===!1||(B(c)?i=c(s):f.isValidElement(c)?i=f.cloneElement(c,s):A(c)||W(c)?i=c:o?i=$.spinner():Ae(n)&&(i=$[n](s))),i}function Ee(e){let[,t]=f.useReducer(r=>r+1,0),[n,o]=f.useState([]),c=f.useRef(null),i=f.useRef(new Map).current,s=r=>n.indexOf(r)!==-1,l=f.useRef({toastKey:1,displayedToast:0,count:0,queue:[],props:e,containerId:null,isToastActive:s,getToast:r=>i.get(r)}).current;f.useEffect(()=>(l.containerId=e.containerId,D.cancelEmit(3).on(0,I).on(1,r=>c.current&&v(r)).on(5,L).emit(2,l),()=>{i.clear(),c.current=null,D.off(0),D.off(1),D.off(5),D.emit(3,l)}),[]),f.useEffect(()=>{l.props=e,l.isToastActive=s,l.displayedToast=n.length});function L(r){let{containerId:d}=r,{limit:C}=l.props;C&&(!d||l.containerId===d)&&(l.count-=l.queue.length,l.queue=[])}function v(r){o(d=>oe(r)?d.filter(C=>C!==r):[])}function E(){let{toastContent:r,toastProps:d,staleId:C}=l.queue.shift();b(r,d,C)}function p(r){return!c.current||l.props.enableMultiContainer&&r.containerId!==l.props.containerId||i.has(r.toastId)&&r.updateId==null}function I(r,d){let U=d,{delay:C,staleId:O}=U,a=ne(U,["delay","staleId"]);if(!ae(r)||p(a))return;let{toastId:R,updateId:P,data:y}=a,{props:u}=l,T=()=>v(R),x=P==null;x&&l.count++;let N={toastId:R,updateId:P,data:y,containerId:a.containerId,isLoading:a.isLoading,theme:a.theme||u.theme,icon:a.icon!=null?a.icon:u.icon,isIn:!1,key:a.key||l.toastKey++,type:a.type,closeToast:T,closeButton:a.closeButton,rtl:u.rtl,position:a.position||u.position,transition:a.transition||u.transition,className:Z(a.className||u.toastClassName),bodyClassName:Z(a.bodyClassName||u.bodyClassName),style:a.style||u.toastStyle,bodyStyle:a.bodyStyle||u.bodyStyle,onClick:a.onClick||u.onClick,pauseOnHover:G(a.pauseOnHover)?a.pauseOnHover:u.pauseOnHover,pauseOnFocusLoss:G(a.pauseOnFocusLoss)?a.pauseOnFocusLoss:u.pauseOnFocusLoss,draggable:G(a.draggable)?a.draggable:u.draggable,draggablePercent:a.draggablePercent||u.draggablePercent,draggableDirection:a.draggableDirection||u.draggableDirection,closeOnClick:G(a.closeOnClick)?a.closeOnClick:u.closeOnClick,progressClassName:Z(a.progressClassName||u.progressClassName),progressStyle:a.progressStyle||u.progressStyle,autoClose:a.isLoading?!1:De(a.autoClose,u.autoClose),hideProgressBar:G(a.hideProgressBar)?a.hideProgressBar:u.hideProgressBar,progress:a.progress,role:a.role||u.role,deleteToast(){let Q=he(i.get(R),"removed");i.delete(R),D.emit(4,Q);let F=l.queue.length;if(l.count=oe(R)?l.count-1:l.count-l.displayedToast,l.count<0&&(l.count=0),F>0){let V=oe(R)?1:l.props.limit;if(F===1||V===1)l.displayedToast++,E();else{let z=V>F?F:V;l.displayedToast=z;for(let H=0;H<z;H++)E()}}else t()}};N.iconOut=ze(N),B(a.onOpen)&&(N.onOpen=a.onOpen),B(a.onClose)&&(N.onClose=a.onClose),N.closeButton=u.closeButton,a.closeButton===!1||ae(a.closeButton)?N.closeButton=a.closeButton:a.closeButton===!0&&(N.closeButton=ae(u.closeButton)?u.closeButton:!0);let M=r;f.isValidElement(r)&&!A(r.type)?M=f.cloneElement(r,{closeToast:T,toastProps:N,data:y}):B(r)&&(M=r({closeToast:T,toastProps:N,data:y})),u.limit&&u.limit>0&&l.count>u.limit&&x?l.queue.push({toastContent:M,toastProps:N,staleId:O}):W(C)?setTimeout(()=>{b(M,N,O)},C):b(M,N,O)}function b(r,d,C){let{toastId:O}=d;C&&i.delete(C);let a={content:r,props:d};i.set(O,a),o(R=>[...R,O].filter(P=>P!==C)),D.emit(4,he(a,a.props.updateId==null?"added":"updated"))}function _(r){let d=new Map,C=Array.from(i.values());return e.newestOnTop&&C.reverse(),C.forEach(O=>{let{position:a}=O.props;d.has(a)||d.set(a,[]),d.get(a).push(O)}),Array.from(d,O=>r(O[0],O[1]))}return{getToastToRender:_,containerRef:c,isToastActive:s}}function ve(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}function Ce(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}function be(e){let[t,n]=f.useState(!1),[o,c]=f.useState(!1),i=f.useRef(null),s=f.useRef({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,l=f.useRef(e),{autoClose:L,pauseOnHover:v,closeToast:E,onClick:p,closeOnClick:I}=e;f.useEffect(()=>{l.current=e}),f.useEffect(()=>(i.current&&i.current.addEventListener("d",r,{once:!0}),B(e.onOpen)&&e.onOpen(f.isValidElement(e.children)&&e.children.props),()=>{let T=l.current;B(T.onClose)&&T.onClose(f.isValidElement(T.children)&&T.children.props)}),[]),f.useEffect(()=>(e.pauseOnFocusLoss&&C(),()=>{e.pauseOnFocusLoss&&O()}),[e.pauseOnFocusLoss]);function b(T){if(e.draggable){a();let x=i.current;s.canCloseOnClick=!0,s.canDrag=!0,s.boundingRect=x.getBoundingClientRect(),x.style.transition="",s.x=ve(T.nativeEvent),s.y=Ce(T.nativeEvent),e.draggableDirection==="x"?(s.start=s.x,s.removalDistance=x.offsetWidth*(e.draggablePercent/100)):(s.start=s.y,s.removalDistance=x.offsetHeight*(e.draggablePercent===80?e.draggablePercent*1.5:e.draggablePercent/100))}}function _(){if(s.boundingRect){let{top:T,bottom:x,left:N,right:M}=s.boundingRect;e.pauseOnHover&&s.x>=N&&s.x<=M&&s.y>=T&&s.y<=x?d():r()}}function r(){n(!0)}function d(){n(!1)}function C(){document.hasFocus()||d(),window.addEventListener("focus",r),window.addEventListener("blur",d)}function O(){window.removeEventListener("focus",r),window.removeEventListener("blur",d)}function a(){s.didMove=!1,document.addEventListener("mousemove",P),document.addEventListener("mouseup",y),document.addEventListener("touchmove",P),document.addEventListener("touchend",y)}function R(){document.removeEventListener("mousemove",P),document.removeEventListener("mouseup",y),document.removeEventListener("touchmove",P),document.removeEventListener("touchend",y)}function P(T){let x=i.current;s.canDrag&&x&&(s.didMove=!0,t&&d(),s.x=ve(T),s.y=Ce(T),e.draggableDirection==="x"?s.delta=s.x-s.start:s.delta=s.y-s.start,s.start!==s.x&&(s.canCloseOnClick=!1),x.style.transform="translate"+e.draggableDirection+"("+s.delta+"px)",x.style.opacity=""+(1-Math.abs(s.delta/s.removalDistance)))}function y(){R();let T=i.current;if(s.canDrag&&s.didMove&&T){if(s.canDrag=!1,Math.abs(s.delta)>s.removalDistance){c(!0),e.closeToast();return}T.style.transition="transform 0.2s, opacity 0.2s",T.style.transform="translate"+e.draggableDirection+"(0)",T.style.opacity="1"}}let u={onMouseDown:b,onTouchStart:b,onMouseUp:_,onTouchEnd:_};return L&&v&&(u.onMouseEnter=d,u.onMouseLeave=r),I&&(u.onClick=T=>{p&&p(T),s.canCloseOnClick&&E()}),{playToast:r,pauseToast:d,isRunning:t,preventExitTransition:o,toastRef:i,eventHandlers:u}}function _e(e){let{closeToast:t,theme:n,ariaLabel:o="close"}=e;return g.default.createElement("button",{className:"Toastify__close-button Toastify__close-button--"+n,type:"button",onClick:c=>{c.stopPropagation(),t(c)},"aria-label":o},g.default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},g.default.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function Ie(e){let{delay:t,isRunning:n,closeToast:o,type:c,hide:i,className:s,style:l,controlledProgress:L,progress:v,rtl:E,isIn:p,theme:I}=e,b=S(m({},l),{animationDuration:t+"ms",animationPlayState:n?"running":"paused",opacity:i?0:1});L&&(b.transform="scaleX("+v+")");let _=w.default("Toastify__progress-bar",L?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated","Toastify__progress-bar-theme--"+I,"Toastify__progress-bar--"+c,{["Toastify__progress-bar--rtl"]:E}),r=B(s)?s({rtl:E,type:c,defaultClassName:_}):w.default(_,s),d={[L&&v>=1?"onTransitionEnd":"onAnimationEnd"]:L&&v<1?null:()=>{p&&o()}};return g.default.createElement("div",m({role:"progressbar","aria-hidden":i?"true":"false","aria-label":"notification timer",className:r,style:b},d))}Ie.defaultProps={type:k.DEFAULT,hide:!1};var He=e=>{let{isRunning:t,preventExitTransition:n,toastRef:o,eventHandlers:c}=be(e),{closeButton:i,children:s,autoClose:l,onClick:L,type:v,hideProgressBar:E,closeToast:p,transition:I,position:b,className:_,style:r,bodyClassName:d,bodyStyle:C,progressClassName:O,progressStyle:a,updateId:R,role:P,progress:y,rtl:u,toastId:T,deleteToast:x,isIn:N,isLoading:M,iconOut:U,theme:Q}=e,F=w.default("Toastify__toast","Toastify__toast-theme--"+Q,"Toastify__toast--"+v,{["Toastify__toast--rtl"]:u}),V=B(_)?_({rtl:u,position:b,type:v,defaultClassName:F}):w.default(F,_),z=!!y,H={closeToast:p,type:v,theme:Q},j=null;return i===!1||(B(i)?j=i(H):g.default.isValidElement(i)?j=g.default.cloneElement(i,H):j=_e(H)),g.default.createElement(I,{isIn:N,done:x,position:b,preventExitTransition:n,nodeRef:o},g.default.createElement("div",S(m({id:T,onClick:L,className:V},c),{style:r,ref:o}),g.default.createElement("div",S(m({},N&&{role:P}),{className:B(d)?d({type:v}):w.default("Toastify__toast-body",d),style:C}),U!=null&&g.default.createElement("div",{className:w.default("Toastify__toast-icon",{["Toastify--animate-icon Toastify__zoom-enter"]:!M})},U),g.default.createElement("div",null,s)),j,(l||z)&&g.default.createElement(Ie,S(m({},R&&!z?{key:"pb-"+R}:{}),{rtl:u,theme:Q,delay:l,isRunning:t,isIn:N,closeToast:p,hide:E,type:v,style:a,className:O,controlledProgress:z,progress:y}))))},Oe=Y({enter:"Toastify--animate Toastify__bounce-enter",exit:"Toastify--animate Toastify__bounce-exit",appendPosition:!0}),qe=Y({enter:"Toastify--animate Toastify__slide-enter",exit:"Toastify--animate Toastify__slide-exit",appendPosition:!0}),Ue=Y({enter:"Toastify--animate Toastify__zoom-enter",exit:"Toastify--animate Toastify__zoom-exit"}),Qe=Y({enter:"Toastify--animate Toastify__flip-enter",exit:"Toastify--animate Toastify__flip-exit"}),ie=f.forwardRef((e,t)=>{let{getToastToRender:n,containerRef:o,isToastActive:c}=Ee(e),{className:i,style:s,rtl:l,containerId:L}=e;function v(E){let p=w.default("Toastify__toast-container","Toastify__toast-container--"+E,{["Toastify__toast-container--rtl"]:l});return B(i)?i({position:E,rtl:l,defaultClassName:p}):w.default(p,Z(i))}return f.useEffect(()=>{t&&(t.current=o.current)},[]),g.default.createElement("div",{ref:o,className:"Toastify",id:L},n((E,p)=>{let I=p.length?m({},s):S(m({},s),{pointerEvents:"none"});return g.default.createElement("div",{className:v(E),style:I,key:"container-"+E},p.map((b,_)=>{let{content:r,props:d}=b;return g.default.createElement(He,S(m({},d),{isIn:c(d.toastId),style:S(m({},d.style),{"--nth":_+1,"--len":p.length}),key:"toast-"+d.key}),r)}))}))});ie.displayName="ToastContainer";ie.defaultProps={position:Te.TOP_RIGHT,transition:Oe,rtl:!1,autoClose:5e3,hideProgressBar:!1,closeButton:_e,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,newestOnTop:!1,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};var q=new Map,re,le=[];function Ve(e,t){let{containerId:n}=t,o=q.get(n||re);return o?o.getToast(e):null}function Ne(){return Math.random().toString(36).substring(2,9)}function We(e){return e&&(A(e.toastId)||W(e.toastId))?e.toastId:Ne()}function X(e,t){return q.size>0?D.emit(0,e,t):le.push({content:e,options:t}),t.toastId}function ee(e,t){return S(m({},t),{type:t&&t.type||e,toastId:We(t)})}function te(e){return(t,n)=>X(t,ee(e,n))}function h(e,t){return X(e,ee(k.DEFAULT,t))}h.loading=(e,t)=>X(e,ee(k.DEFAULT,m({isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1},t)));function Ge(e,t,n){let{pending:o,error:c,success:i}=t,s;o&&(s=A(o)?h.loading(o,n):h.loading(o.render,m(m({},n),o)));let l={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null,delay:100},L=(E,p,I)=>{if(p==null){h.dismiss(s);return}let b=S(m(m({type:E},l),n),{data:I}),_=A(p)?{render:p}:p;return s?h.update(s,m(m({},b),_)):h(_.render,m(m({},b),_)),I},v=B(e)?e():e;return v.then(E=>L("success",i,E)).catch(E=>L("error",c,E)),v}h.promise=Ge;h.success=te(k.SUCCESS);h.info=te(k.INFO);h.error=te(k.ERROR);h.warning=te(k.WARNING);h.warn=h.warning;h.dark=(e,t)=>X(e,ee(k.DEFAULT,m({theme:"dark"},t)));h.dismiss=e=>D.emit(1,e);h.clearWaitingQueue=function(e){return e===void 0&&(e={}),D.emit(5,e)};h.isActive=e=>{let t=!1;return q.forEach(n=>{n.isToastActive&&n.isToastActive(e)&&(t=!0)}),t};h.update=function(e,t){t===void 0&&(t={}),setTimeout(()=>{let n=Ve(e,t);if(n){let{props:o,content:c}=n,i=S(m(m({},o),t),{toastId:t.toastId||e,updateId:Ne()});i.toastId!==e&&(i.staleId=e);let s=i.render||c;delete i.render,X(s,i)}},0)};h.done=e=>{h.update(e,{progress:1})};h.onChange=e=>(D.on(4,e),()=>{D.off(4,e)});h.POSITION=Te;h.TYPE=k;D.on(2,e=>{re=e.containerId||e,q.set(re,e),le.forEach(t=>{D.emit(0,t.content,t.options)}),le=[]}).on(3,e=>{q.delete(e.containerId||e),q.size===0&&D.off(0).off(1).off(5)});exports.Bounce=Oe;exports.Flip=Qe;exports.Icons=$;exports.Slide=qe;exports.ToastContainer=ie;exports.Zoom=Ue;exports.collapseToast=pe;exports.cssTransition=Y;exports.toast=h;exports.useToast=be;exports.useToastContainer=Ee;
+var Ie=Object.create;var W=Object.defineProperty,Oe=Object.defineProperties,Le=Object.getOwnPropertyDescriptor,Ne=Object.getOwnPropertyDescriptors,Pe=Object.getOwnPropertyNames,Z=Object.getOwnPropertySymbols,xe=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty,ce=Object.prototype.propertyIsEnumerable;var ue=(e,t,n)=>t in e?W(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,g=(e,t)=>{for(var n in t||(t={}))oe.call(t,n)&&ue(e,n,t[n]);if(Z)for(var n of Z(t))ce.call(t,n)&&ue(e,n,t[n]);return e},D=(e,t)=>Oe(e,Ne(t)),de=e=>W(e,"__esModule",{value:!0});var ae=(e,t)=>{var n={};for(var s in e)oe.call(e,s)&&t.indexOf(s)<0&&(n[s]=e[s]);if(e!=null&&Z)for(var s of Z(e))t.indexOf(s)<0&&ce.call(e,s)&&(n[s]=e[s]);return n};var Re=(e,t)=>{de(e);for(var n in t)W(e,n,{get:t[n],enumerable:!0})},Be=(e,t,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Pe(t))!oe.call(e,s)&&s!=="default"&&W(e,s,{get:()=>t[s],enumerable:!(n=Le(t,s))||n.enumerable});return e},De=e=>Be(de(W(e!=null?Ie(xe(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);Re(exports,{Bounce:()=>Ce,Flip:()=>Ge,Icons:()=>te,Slide:()=>Qe,ToastContainer:()=>ie,Zoom:()=>We,collapseToast:()=>ge,cssTransition:()=>V,toast:()=>T,useToast:()=>Ee,useToastContainer:()=>ye});var a=De(require("react"));function fe(e){var t,n,s="";if(typeof e=="string"||typeof e=="number")s+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=fe(e[t]))&&(s&&(s+=" "),s+=n);else for(t in e)e[t]&&(s&&(s+=" "),s+=t);return s}function Se(){for(var e,t,n=0,s="";n<arguments.length;)(e=arguments[n++])&&(t=fe(e))&&(s&&(s+=" "),s+=t);return s}var M=Se;function G(e){return typeof e=="number"&&!isNaN(e)}function Y(e){return typeof e=="boolean"}function F(e){return typeof e=="string"}function x(e){return typeof e=="function"}function J(e){return F(e)||x(e)?e:null}function $(e){return e!=null}function Me(e,t){return e===!1||G(e)&&e>0?e:t}function re(e){return(0,a.isValidElement)(e)||F(e)||x(e)||G(e)}var me={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},k={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"};function ge(e,t,n){n===void 0&&(n=300);let{scrollHeight:s,style:u}=e;requestAnimationFrame(()=>{u.minHeight="initial",u.height=s+"px",u.transition="all "+n+"ms",requestAnimationFrame(()=>{u.height="0",u.padding="0",u.margin="0",setTimeout(t,n)})})}function V(e){let{enter:t,exit:n,appendPosition:s=!1,collapse:u=!0,collapseDuration:i=300}=e;return function(c){let{children:I,position:v,preventExitTransition:h,done:y,nodeRef:O,isIn:b}=c,C=s?t+"--"+v:t,l=s?n+"--"+v:n,d=(0,a.useRef)(0);return(0,a.useLayoutEffect)(()=>{let m=O.current,E=C.split(" "),r=P=>{P.target===O.current&&(m.dispatchEvent(new Event("d")),m.removeEventListener("animationend",r),m.removeEventListener("animationcancel",r),d.current===0&&P.type!=="animationcancel"&&m.classList.remove(...E))};(()=>{m.classList.add(...E),m.addEventListener("animationend",r),m.addEventListener("animationcancel",r)})()},[]),(0,a.useEffect)(()=>{let m=O.current,E=()=>{m.removeEventListener("animationend",E),u?ge(m,y,i):y()};b||(h?E():(()=>{d.current=1,m.className+=" "+l,m.addEventListener("animationend",E)})())},[b]),a.default.createElement(a.default.Fragment,null,I)}}function pe(e,t){return{content:e.content,containerId:e.props.containerId,id:e.props.toastId,theme:e.props.theme,type:e.props.type,data:e.props.data||{},isLoading:e.props.isLoading,icon:e.props.icon,status:t}}var R={list:new Map,emitQueue:new Map,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t){let n=this.list.get(e).filter(s=>s!==t);return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit(e){let t=this.emitQueue.get(e);return t&&(t.forEach(clearTimeout),this.emitQueue.delete(e)),this},emit(e){this.list.has(e)&&this.list.get(e).forEach(t=>{let n=setTimeout(()=>{t(...[].slice.call(arguments,1))},0);this.emitQueue.has(e)||this.emitQueue.set(e,[]),this.emitQueue.get(e).push(n)})}},ee=e=>{let u=e,{theme:t,type:n}=u,s=ae(u,["theme","type"]);return a.default.createElement("svg",g({viewBox:"0 0 24 24",width:"100%",height:"100%",fill:t==="colored"?"currentColor":"var(--toastify-icon-color-"+n+")"},s))};function ke(e){return a.default.createElement(ee,g({},e),a.default.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))}function we(e){return a.default.createElement(ee,g({},e),a.default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))}function Fe(e){return a.default.createElement(ee,g({},e),a.default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))}function Ae(e){return a.default.createElement(ee,g({},e),a.default.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))}function ze(){return a.default.createElement("div",{className:"Toastify__spinner"})}var te={info:we,warning:ke,success:Fe,error:Ae,spinner:ze},He=e=>e in te;function qe(e){let{theme:t,type:n,isLoading:s,icon:u}=e,i=null,o={theme:t,type:n};return u===!1||(x(u)?i=u(o):(0,a.isValidElement)(u)?i=(0,a.cloneElement)(u,o):F(u)||G(u)?i=u:s?i=te.spinner():He(n)&&(i=te[n](o))),i}function ye(e){let[,t]=(0,a.useReducer)(l=>l+1,0),[n,s]=(0,a.useState)([]),u=(0,a.useRef)(null),i=(0,a.useRef)(new Map).current,o=l=>n.indexOf(l)!==-1,c=(0,a.useRef)({toastKey:1,displayedToast:0,count:0,queue:[],props:e,containerId:null,isToastActive:o,getToast:l=>i.get(l)}).current;(0,a.useEffect)(()=>(c.containerId=e.containerId,R.cancelEmit(3).on(0,O).on(1,l=>u.current&&v(l)).on(5,I).emit(2,c),()=>{i.clear(),R.emit(3,c)}),[]),(0,a.useEffect)(()=>{c.props=e,c.isToastActive=o,c.displayedToast=n.length});function I(l){let{containerId:d}=l,{limit:m}=c.props;m&&(!d||c.containerId===d)&&(c.count-=c.queue.length,c.queue=[])}function v(l){s(d=>$(l)?d.filter(m=>m!==l):[])}function h(){let{toastContent:l,toastProps:d,staleId:m}=c.queue.shift();b(l,d,m)}function y(l){return!u.current||c.props.enableMultiContainer&&l.containerId!==c.props.containerId||i.has(l.toastId)&&l.updateId==null}function O(l,d){let q=d,{delay:m,staleId:E}=q,r=ae(q,["delay","staleId"]);if(!re(l)||y(r))return;let{toastId:N,updateId:P,data:B}=r,{props:f}=c,p=()=>v(N),L=P==null;L&&c.count++;let _={toastId:N,updateId:P,data:B,containerId:r.containerId,isLoading:r.isLoading,theme:r.theme||f.theme,icon:r.icon!=null?r.icon:f.icon,isIn:!1,key:r.key||c.toastKey++,type:r.type,closeToast:p,closeButton:r.closeButton,rtl:f.rtl,position:r.position||f.position,transition:r.transition||f.transition,className:J(r.className||f.toastClassName),bodyClassName:J(r.bodyClassName||f.bodyClassName),style:r.style||f.toastStyle,bodyStyle:r.bodyStyle||f.bodyStyle,onClick:r.onClick||f.onClick,pauseOnHover:Y(r.pauseOnHover)?r.pauseOnHover:f.pauseOnHover,pauseOnFocusLoss:Y(r.pauseOnFocusLoss)?r.pauseOnFocusLoss:f.pauseOnFocusLoss,draggable:Y(r.draggable)?r.draggable:f.draggable,draggablePercent:r.draggablePercent||f.draggablePercent,draggableDirection:r.draggableDirection||f.draggableDirection,closeOnClick:Y(r.closeOnClick)?r.closeOnClick:f.closeOnClick,progressClassName:J(r.progressClassName||f.progressClassName),progressStyle:r.progressStyle||f.progressStyle,autoClose:r.isLoading?!1:Me(r.autoClose,f.autoClose),hideProgressBar:Y(r.hideProgressBar)?r.hideProgressBar:f.hideProgressBar,progress:r.progress,role:r.role||f.role,deleteToast(){let U=pe(i.get(N),"removed");i.delete(N),R.emit(4,U);let w=c.queue.length;if(c.count=$(N)?c.count-1:c.count-c.displayedToast,c.count<0&&(c.count=0),w>0){let Q=$(N)?1:c.props.limit;if(w===1||Q===1)c.displayedToast++,h();else{let z=Q>w?w:Q;c.displayedToast=z;for(let H=0;H<z;H++)h()}}else t()}};_.iconOut=qe(_),x(r.onOpen)&&(_.onOpen=r.onOpen),x(r.onClose)&&(_.onClose=r.onClose),_.closeButton=f.closeButton,r.closeButton===!1||re(r.closeButton)?_.closeButton=r.closeButton:r.closeButton===!0&&(_.closeButton=re(f.closeButton)?f.closeButton:!0);let S=l;(0,a.isValidElement)(l)&&!F(l.type)?S=(0,a.cloneElement)(l,{closeToast:p,toastProps:_,data:B}):x(l)&&(S=l({closeToast:p,toastProps:_,data:B})),f.limit&&f.limit>0&&c.count>f.limit&&L?c.queue.push({toastContent:S,toastProps:_,staleId:E}):G(m)?setTimeout(()=>{b(S,_,E)},m):b(S,_,E)}function b(l,d,m){let{toastId:E}=d;m&&i.delete(m);let r={content:l,props:d};i.set(E,r),s(N=>[...N,E].filter(P=>P!==m)),R.emit(4,pe(r,r.props.updateId==null?"added":"updated"))}function C(l){let d=new Map,m=Array.from(i.values());return e.newestOnTop&&m.reverse(),m.forEach(E=>{let{position:r}=E.props;d.has(r)||d.set(r,[]),d.get(r).push(E)}),Array.from(d,E=>l(E[0],E[1]))}return{getToastToRender:C,containerRef:u,isToastActive:o}}function Te(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}function he(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}function Ee(e){let[t,n]=(0,a.useState)(!1),[s,u]=(0,a.useState)(!1),i=(0,a.useRef)(null),o=(0,a.useRef)({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,c=(0,a.useRef)(e),{autoClose:I,pauseOnHover:v,closeToast:h,onClick:y,closeOnClick:O}=e;(0,a.useEffect)(()=>{c.current=e}),(0,a.useEffect)(()=>(i.current&&i.current.addEventListener("d",l,{once:!0}),x(e.onOpen)&&e.onOpen((0,a.isValidElement)(e.children)&&e.children.props),()=>{let p=c.current;x(p.onClose)&&p.onClose((0,a.isValidElement)(p.children)&&p.children.props)}),[]),(0,a.useEffect)(()=>(e.pauseOnFocusLoss&&m(),()=>{e.pauseOnFocusLoss&&E()}),[e.pauseOnFocusLoss]);function b(p){if(e.draggable){r();let L=i.current;o.canCloseOnClick=!0,o.canDrag=!0,o.boundingRect=L.getBoundingClientRect(),L.style.transition="",o.x=Te(p.nativeEvent),o.y=he(p.nativeEvent),e.draggableDirection==="x"?(o.start=o.x,o.removalDistance=L.offsetWidth*(e.draggablePercent/100)):(o.start=o.y,o.removalDistance=L.offsetHeight*(e.draggablePercent===80?e.draggablePercent*1.5:e.draggablePercent/100))}}function C(){if(o.boundingRect){let{top:p,bottom:L,left:_,right:S}=o.boundingRect;e.pauseOnHover&&o.x>=_&&o.x<=S&&o.y>=p&&o.y<=L?d():l()}}function l(){n(!0)}function d(){n(!1)}function m(){document.hasFocus()||d(),window.addEventListener("focus",l),window.addEventListener("blur",d)}function E(){window.removeEventListener("focus",l),window.removeEventListener("blur",d)}function r(){o.didMove=!1,document.addEventListener("mousemove",P),document.addEventListener("mouseup",B),document.addEventListener("touchmove",P),document.addEventListener("touchend",B)}function N(){document.removeEventListener("mousemove",P),document.removeEventListener("mouseup",B),document.removeEventListener("touchmove",P),document.removeEventListener("touchend",B)}function P(p){let L=i.current;o.canDrag&&L&&(o.didMove=!0,t&&d(),o.x=Te(p),o.y=he(p),e.draggableDirection==="x"?o.delta=o.x-o.start:o.delta=o.y-o.start,o.start!==o.x&&(o.canCloseOnClick=!1),L.style.transform="translate"+e.draggableDirection+"("+o.delta+"px)",L.style.opacity=""+(1-Math.abs(o.delta/o.removalDistance)))}function B(){N();let p=i.current;if(o.canDrag&&o.didMove&&p){if(o.canDrag=!1,Math.abs(o.delta)>o.removalDistance){u(!0),e.closeToast();return}p.style.transition="transform 0.2s, opacity 0.2s",p.style.transform="translate"+e.draggableDirection+"(0)",p.style.opacity="1"}}let f={onMouseDown:b,onTouchStart:b,onMouseUp:C,onTouchEnd:C};return I&&v&&(f.onMouseEnter=d,f.onMouseLeave=l),O&&(f.onClick=p=>{y&&y(p),o.canCloseOnClick&&h()}),{playToast:l,pauseToast:d,isRunning:t,preventExitTransition:s,toastRef:i,eventHandlers:f}}function ve(e){let{closeToast:t,theme:n,ariaLabel:s="close"}=e;return a.default.createElement("button",{className:"Toastify__close-button Toastify__close-button--"+n,type:"button",onClick:u=>{u.stopPropagation(),t(u)},"aria-label":s},a.default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},a.default.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function be(e){let{delay:t,isRunning:n,closeToast:s,type:u,hide:i,className:o,style:c,controlledProgress:I,progress:v,rtl:h,isIn:y,theme:O}=e,b=D(g({},c),{animationDuration:t+"ms",animationPlayState:n?"running":"paused",opacity:i?0:1});I&&(b.transform="scaleX("+v+")");let C=M("Toastify__progress-bar",I?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated","Toastify__progress-bar-theme--"+O,"Toastify__progress-bar--"+u,{["Toastify__progress-bar--rtl"]:h}),l=x(o)?o({rtl:h,type:u,defaultClassName:C}):M(C,o),d={[I&&v>=1?"onTransitionEnd":"onAnimationEnd"]:I&&v<1?null:()=>{y&&s()}};return a.default.createElement("div",g({role:"progressbar","aria-hidden":i?"true":"false","aria-label":"notification timer",className:l,style:b},d))}be.defaultProps={type:k.DEFAULT,hide:!1};var Ue=e=>{let{isRunning:t,preventExitTransition:n,toastRef:s,eventHandlers:u}=Ee(e),{closeButton:i,children:o,autoClose:c,onClick:I,type:v,hideProgressBar:h,closeToast:y,transition:O,position:b,className:C,style:l,bodyClassName:d,bodyStyle:m,progressClassName:E,progressStyle:r,updateId:N,role:P,progress:B,rtl:f,toastId:p,deleteToast:L,isIn:_,isLoading:S,iconOut:q,theme:U}=e,w=M("Toastify__toast","Toastify__toast-theme--"+U,"Toastify__toast--"+v,{["Toastify__toast--rtl"]:f}),Q=x(C)?C({rtl:f,position:b,type:v,defaultClassName:w}):M(w,C),z=!!B,H={closeToast:y,type:v,theme:U},j=null;return i===!1||(x(i)?j=i(H):a.default.isValidElement(i)?j=a.default.cloneElement(i,H):j=ve(H)),a.default.createElement(O,{isIn:_,done:L,position:b,preventExitTransition:n,nodeRef:s},a.default.createElement("div",D(g({id:p,onClick:I,className:Q},u),{style:l,ref:s}),a.default.createElement("div",D(g({},_&&{role:P}),{className:x(d)?d({type:v}):M("Toastify__toast-body",d),style:m}),q!=null&&a.default.createElement("div",{className:M("Toastify__toast-icon",{["Toastify--animate-icon Toastify__zoom-enter"]:!S})},q),a.default.createElement("div",null,o)),j,(c||z)&&a.default.createElement(be,D(g({},N&&!z?{key:"pb-"+N}:{}),{rtl:f,theme:U,delay:c,isRunning:t,isIn:_,closeToast:y,hide:h,type:v,style:r,className:E,controlledProgress:z,progress:B}))))},Ce=V({enter:"Toastify--animate Toastify__bounce-enter",exit:"Toastify--animate Toastify__bounce-exit",appendPosition:!0}),Qe=V({enter:"Toastify--animate Toastify__slide-enter",exit:"Toastify--animate Toastify__slide-exit",appendPosition:!0}),We=V({enter:"Toastify--animate Toastify__zoom-enter",exit:"Toastify--animate Toastify__zoom-exit"}),Ge=V({enter:"Toastify--animate Toastify__flip-enter",exit:"Toastify--animate Toastify__flip-exit"}),ie=(0,a.forwardRef)((e,t)=>{let{getToastToRender:n,containerRef:s,isToastActive:u}=ye(e),{className:i,style:o,rtl:c,containerId:I}=e;function v(h){let y=M("Toastify__toast-container","Toastify__toast-container--"+h,{["Toastify__toast-container--rtl"]:c});return x(i)?i({position:h,rtl:c,defaultClassName:y}):M(y,J(i))}return(0,a.useEffect)(()=>{t&&(t.current=s.current)},[]),a.default.createElement("div",{ref:s,className:"Toastify",id:I},n((h,y)=>{let O=y.length?g({},o):D(g({},o),{pointerEvents:"none"});return a.default.createElement("div",{className:v(h),style:O,key:"container-"+h},y.map((b,C)=>{let{content:l,props:d}=b;return a.default.createElement(Ue,D(g({},d),{isIn:u(d.toastId),style:D(g({},d.style),{"--nth":C+1,"--len":y.length}),key:"toast-"+d.key}),l)}))}))});ie.displayName="ToastContainer";ie.defaultProps={position:me.TOP_RIGHT,transition:Ce,rtl:!1,autoClose:5e3,hideProgressBar:!1,closeButton:ve,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,newestOnTop:!1,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};var A=new Map,le,X=[];function Ye(e,t){let{containerId:n}=t,s=A.get(n||le);return s?s.getToast(e):null}function _e(){return Math.random().toString(36).substring(2,9)}function Ve(e){return e&&(F(e.toastId)||G(e.toastId))?e.toastId:_e()}function K(e,t){return A.size>0?R.emit(0,e,t):X.push({content:e,options:t}),t.toastId}function ne(e,t){return D(g({},t),{type:t&&t.type||e,toastId:Ve(t)})}function se(e){return(t,n)=>K(t,ne(e,n))}function T(e,t){return K(e,ne(k.DEFAULT,t))}T.loading=(e,t)=>K(e,ne(k.DEFAULT,g({isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1},t)));function Xe(e,t,n){let{pending:s,error:u,success:i}=t,o;s&&(o=F(s)?T.loading(s,n):T.loading(s.render,g(g({},n),s)));let c={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null,delay:100},I=(h,y,O)=>{if(y==null){T.dismiss(o);return}let b=D(g(g({type:h},c),n),{data:O}),C=F(y)?{render:y}:y;return o?T.update(o,g(g({},b),C)):T(C.render,g(g({},b),C)),O},v=x(e)?e():e;return v.then(h=>I("success",i,h)).catch(h=>I("error",u,h)),v}T.promise=Xe;T.success=se(k.SUCCESS);T.info=se(k.INFO);T.error=se(k.ERROR);T.warning=se(k.WARNING);T.warn=T.warning;T.dark=(e,t)=>K(e,ne(k.DEFAULT,g({theme:"dark"},t)));T.dismiss=e=>{A.size>0?R.emit(1,e):X=X.filter(t=>$(e)&&t.options.toastId!==e)};T.clearWaitingQueue=function(e){return e===void 0&&(e={}),R.emit(5,e)};T.isActive=e=>{let t=!1;return A.forEach(n=>{n.isToastActive&&n.isToastActive(e)&&(t=!0)}),t};T.update=function(e,t){t===void 0&&(t={}),setTimeout(()=>{let n=Ye(e,t);if(n){let{props:s,content:u}=n,i=D(g(g({},s),t),{toastId:t.toastId||e,updateId:_e()});i.toastId!==e&&(i.staleId=e);let o=i.render||u;delete i.render,K(o,i)}},0)};T.done=e=>{T.update(e,{progress:1})};T.onChange=e=>(R.on(4,e),()=>{R.off(4,e)});T.POSITION=me;T.TYPE=k;R.on(2,e=>{le=e.containerId||e,A.set(le,e),X.forEach(t=>{R.emit(0,t.content,t.options)}),X=[]}).on(3,e=>{A.delete(e.containerId||e),A.size===0&&R.off(0).off(1).off(5)});

package/src/components/EllipsisContainer/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EllipsisContainer = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const react_1 = require("react");
+const rebass_1 = require("rebass");
 const useLatest_1 = require("../utils/useLatest");
 const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
 const Container = ({ children, index, hidden, observerRef, }) => {