@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.2

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -1,13 +1,88 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableDateEditor = void 0;
+exports.AdaptableDateEditor = exports.ReactAdaptableDateEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableDateEditor_1 = require("./InternalAdaptableDateEditor");
 const core_1 = require("@ag-grid-community/core");
 const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
+const react_1 = require("react");
+function shouldClearExistingValue(params) {
+    return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+}
+function getStartValue(params) {
+    return shouldClearExistingValue(params) ? '' : params.value;
+}
+const style = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+};
+const defaultDateValueParser = ({ newValue, oldValue, defaultParser }) => {
+    if ((typeof oldValue === 'string' || oldValue == null) && defaultParser) {
+        return defaultParser(newValue);
+    }
+    return newValue;
+};
+exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
+    const valueRef = (0, react_1.useRef)(initialValue);
+    const colValueParser = props.column.getColDef().valueParser;
+    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultDateValueParser;
+    const adaptable = props.api.__adaptable;
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            focusIn() {
+                var _a;
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            // the final value to send to the grid, on completion of editing
+            getValue() {
+                return valueRef.current;
+            },
+        };
+    });
+    const editorElement = (React.createElement(InternalAdaptableDateEditor_1.InternalAdaptableDateEditor, { defaultValue: initialValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
+            const invalid = isNaN(+value);
+            if (valueParser) {
+                const params = Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value, defaultParser: (value) => {
+                        var _a, _b;
+                        const Pattern = (_b = (_a = adaptable.adaptableOptions.userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.dateInputOptions) === null || _b === void 0 ? void 0 : _b.dateFormat;
+                        if (!Pattern) {
+                            return value;
+                        }
+                        return (0, FormatHelper_1.DateFormatter)(value, {
+                            Pattern,
+                        });
+                    } });
+                valueRef.current = valueParser(params);
+            }
+            else {
+                valueRef.current = invalid ? null : value;
+            }
+            if (!invalid) {
+                requestAnimationFrame(() => {
+                    props.stopEditing();
+                });
+            }
+        }, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, onStopEdit: (keyboardEventKey) => {
+            if (keyboardEventKey === 'Escape') {
+                props.api.stopEditing(true);
+            }
+            else {
+                props.stopEditing();
+            }
+        }, ref: (editor) => {
+            editorRef.current = editor;
+            editor === null || editor === void 0 ? void 0 : editor.focus();
+        } }));
+    return React.createElement("div", { style: style }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable));
+});
 /**
  * Used by default for all `abColDefDate` columns.
  *
@@ -33,26 +108,20 @@ const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
  */
 class AdaptableDateEditor {
     constructor() {
-        this.valueParser = ({ newValue, oldValue, defaultParser }) => {
-            if ((typeof oldValue === 'string' || oldValue == null) && defaultParser) {
-                return defaultParser(newValue);
-            }
-            return newValue;
-        };
+        this.valueParser = defaultDateValueParser;
     }
     init(params) {
-        this.value = this.shouldClearExistingValue(params) ? '' : params.value;
+        this.value = getStartValue(params);
         const { valueParser } = params.column.getColDef();
         this.params = params;
         if (typeof valueParser === 'function') {
             this.valueParser = valueParser;
         }
         this.el = document.createElement('div');
-        this.el.style.position = 'absolute';
-        this.el.style.top = '0px';
-        this.el.style.left = '0px';
-        this.el.style.right = '0px';
-        this.el.style.bottom = '0px';
+        Object.keys(style).forEach((key) => {
+            //@ts-ignore
+            this.el.style[key] = style[key];
+        });
     }
     /* Component Editor Lifecycle methods */
     // gets called once when grid ready to insert the element
@@ -76,7 +145,7 @@ class AdaptableDateEditor {
     afterGuiAttached() {
         var _a;
         const adaptable = this.getAdaptableInstance(this.params);
-        const defaultValue = this.shouldClearExistingValue(this.params) ? '' : this.params.value;
+        const defaultValue = shouldClearExistingValue(this.params) ? '' : this.params.value;
         const editorElement = (React.createElement(InternalAdaptableDateEditor_1.InternalAdaptableDateEditor, { defaultValue: defaultValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
                 const invalid = isNaN(+value);
                 if (this.valueParser) {
@@ -111,13 +180,11 @@ class AdaptableDateEditor {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
             } }));
-        (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
+        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
     }
     destroy() {
-        (0, react_dom_1.unmountComponentAtNode)(this.el);
-    }
-    shouldClearExistingValue(params) {
-        return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
 exports.AdaptableDateEditor = AdaptableDateEditor;

package/src/agGrid/editors/AdaptableNumberEditor/InternalAdaptableNumberEditor.js

@@ -22,7 +22,7 @@ const inputStyle = {
     width: '100%',
     border: 'none',
 };
-exports.InternalAdaptableNumberEditor = React.forwardRef((props, ref) => {
+exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdaptableNumberEditorFn(props, ref) {
     var _a;
     const inputRef = React.useRef(null);
     const focus = () => {

package/src/agGrid/editors/AdaptableNumberEditor/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
 /**
  * Adaptable number editor parameters extending the AG Grid {@link ICellEditorParams}.
@@ -14,6 +15,7 @@ interface AdaptableNumberCellEditorParams extends ICellEditorParams {
      */
     emptyValue: string;
 }
+export declare const ReactAdaptableNumberEditor: React.ForwardRefExoticComponent<AdaptableNumberCellEditorParams & React.RefAttributes<unknown>>;
 /**
  * Used by default for all `abColDefNumber` columns.
  *
@@ -42,6 +44,7 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     private params;
     private editor;
     private valueParser;
+    private unmountReactRoot?;
     init(params: AdaptableNumberCellEditorParams): void;
     getGui(): HTMLDivElement;
     getValue(): any;
@@ -50,8 +53,5 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     afterGuiAttached(): void;
     destroy(): void;
     private onValueChange;
-    private getStartValue;
-    private shouldClearExistingValue;
-    private isValidChar;
 }
 export {};

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -1,12 +1,82 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableNumberEditor = void 0;
+exports.AdaptableNumberEditor = exports.ReactAdaptableNumberEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableNumberEditor_1 = require("./InternalAdaptableNumberEditor");
 const core_1 = require("@ag-grid-community/core");
+const react_1 = require("react");
+function shouldClearExistingValue(params) {
+    return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+}
+function isValidChar(char) {
+    // allow only digits
+    return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(char);
+    // we do NOT allow key shortcuts for starting non-digits (minus sign, decimal separators) as the input[number] handling is very buggy and we would open a can of worms
+}
+function getStartValue(params) {
+    if (shouldClearExistingValue(params)) {
+        return '';
+    }
+    if (params.charPress && isValidChar(params.charPress)) {
+        return params.charPress;
+    }
+    return params.value;
+}
+const defaultValueParser = ({ newValue, oldValue: _ }) => {
+    return newValue;
+};
+const style = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+};
+exports.ReactAdaptableNumberEditor = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
+    const valueRef = (0, react_1.useRef)(initialValue);
+    const columnId = props.column.getColId();
+    const adaptable = props.api.__adaptable;
+    const colValueParser = props.column.getColDef().valueParser;
+    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
+    function onValueChange(value) {
+        value = valueParser
+            ? valueParser(Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value }))
+            : value;
+        valueRef.current = value;
+    }
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            focusIn() {
+                var _a;
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            // the final value to send to the grid, on completion of editing
+            getValue() {
+                return valueRef.current;
+            },
+        };
+    });
+    const editorElement = (React.createElement(InternalAdaptableNumberEditor_1.InternalAdaptableNumberEditor, { defaultValue: initialValue, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = props.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: onValueChange, ref: (editor) => {
+            editorRef.current = editor;
+            editor === null || editor === void 0 ? void 0 : editor.focus();
+        } }));
+    function onKeyDown(keyDownEvent) {
+        adaptable._emit('CellEditorKeyDown', {
+            keyDownEvent,
+            cellValue: valueRef.current,
+            columnId,
+            updateValueCallback: (updatedValue) => {
+                editorRef.current.setValue(updatedValue);
+            },
+        });
+    }
+    return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable)));
+});
 /**
  * Used by default for all `abColDefNumber` columns.
  *
@@ -30,9 +100,7 @@ const core_1 = require("@ag-grid-community/core");
  */
 class AdaptableNumberEditor {
     constructor() {
-        this.valueParser = ({ newValue, oldValue: _ }) => {
-            return newValue;
-        };
+        this.valueParser = defaultValueParser;
         this.onValueChange = (value) => {
             this.value = this.valueParser
                 ? this.valueParser(Object.assign(Object.assign({}, this.params), { oldValue: this.params.value, newValue: value }))
@@ -40,7 +108,7 @@ class AdaptableNumberEditor {
         };
     }
     init(params) {
-        this.value = this.getStartValue(params);
+        this.value = getStartValue(params);
         this.params = params;
         this.columnId = params.column.getColId();
         const { valueParser } = params.column.getColDef();
@@ -48,11 +116,10 @@ class AdaptableNumberEditor {
             this.valueParser = valueParser;
         }
         this.el = document.createElement('div');
-        this.el.style.position = 'absolute';
-        this.el.style.top = '0px';
-        this.el.style.left = '0px';
-        this.el.style.right = '0px';
-        this.el.style.bottom = '0px';
+        Object.keys(style).forEach((key) => {
+            //@ts-ignore
+            this.el.style[key] = style[key];
+        });
     }
     /* Component Editor Lifecycle methods */
     // gets called once when grid ready to insert the element
@@ -77,7 +144,7 @@ class AdaptableNumberEditor {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
             } }));
-        (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
+        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
         this.getGui().addEventListener('keydown', (keyDownEvent) => {
             adaptable._emit('CellEditorKeyDown', {
                 keyDownEvent,
@@ -90,24 +157,8 @@ class AdaptableNumberEditor {
         });
     }
     destroy() {
-        (0, react_dom_1.unmountComponentAtNode)(this.el);
-    }
-    getStartValue(params) {
-        if (this.shouldClearExistingValue(params)) {
-            return '';
-        }
-        if (params.charPress && this.isValidChar(params.charPress)) {
-            return params.charPress;
-        }
-        return params.value;
-    }
-    shouldClearExistingValue(params) {
-        return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
-    }
-    isValidChar(char) {
-        // allow only digits
-        return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(char);
-        // we do NOT allow key shortcuts for starting non-digits (minus sign, decimal separators) as the input[number] handling is very buggy and we would open a can of worms
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
 exports.AdaptableNumberEditor = AdaptableNumberEditor;

package/src/agGrid/weightedAverage.js

@@ -79,22 +79,30 @@ const cellSummaryWeightedAverage = ({ numericColumns, selectedCellInfo, adaptabl
                 sumPrimaryValues += weightedGridCell.rawValue * gridCell.normalisedValue;
             }
         });
-        if (isValid) {
-            const formatColumn = adaptableApi.formatColumnApi.getFormatColumnForColumnId(columnId);
-            if (formatColumn && formatColumn.DisplayFormat) {
-                const options = formatColumn.DisplayFormat
-                    .Options;
-                if (options) {
-                    return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, options);
-                }
+        if (!isValid) {
+            return '';
+        }
+        const abColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
+        if (!abColumn) {
+            return '';
+        }
+        const activeFormatColumnsWithDisplayFormat = adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+        if (activeFormatColumnsWithDisplayFormat.length === 1 &&
+            activeFormatColumnsWithDisplayFormat[0].DisplayFormat.Formatter === 'NumberFormatter') {
+            // there only one FormatColumn on this column, so we will use it to format the aggregated value
+            const [singleActiveFormatColumnsWithDisplayFormat] = activeFormatColumnsWithDisplayFormat;
+            const options = singleActiveFormatColumnsWithDisplayFormat
+                .DisplayFormat.Options;
+            if (options) {
+                return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, options);
             }
+        }
+        else {
+            // there are multiple (possibly conflicting) FormatColumns for this column, we cannot know which to use
             return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, {
                 FractionDigits: 2,
             });
         }
-        else {
-            return '';
-        }
     }
 };
 exports.cellSummaryWeightedAverage = cellSummaryWeightedAverage;

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/CheckBox/index.d.ts

@@ -15,7 +15,7 @@ declare type TypeProps = {
     gapDistance?: number | string;
     childrenPosition?: 'start' | 'end';
 };
-export interface CheckBoxProps extends TypeProps, Omit<ContainerProps, keyof TypeProps>, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps> {
+export interface CheckBoxProps extends TypeProps, Omit<ContainerProps, keyof TypeProps>, Omit<React.HTMLProps<HTMLDivElement>, keyof TypeProps | 'ref'> {
 }
 declare const CheckBox: ({ children, checked, onChange, value, name, disabled, readOnly, variant, gapDistance, childrenPosition, as, ...props }: CheckBoxProps) => JSX.Element;
 export declare const CheckBoxGroup: (props: FlexProps & {

package/src/components/CheckBox/index.js

@@ -31,7 +31,12 @@ const CheckBox = (_a) => {
             ? 'unchecked'
             : 'indeterminate';
     const gap = React.createElement("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
-    children = children ? React.createElement("div", { style: { display: 'inline-block' } }, children) : null;
+    children = children ? (React.createElement("div", { style: {
+            display: 'inline-block',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        } }, children)) : null;
     const before = childrenPosition === 'start' ? children : null;
     const beforeGap = childrenPosition === 'start' && children ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
@@ -46,7 +51,7 @@ const CheckBox = (_a) => {
             opacity: 0,
             cursor: 'pointer',
         }, onChange: onInputChange }));
-    return (React.createElement(rebass_1.Box, Object.assign({ my: 2 }, props, { className: (0, join_1.default)('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: Object.assign({ display: 'inline-flex', flexFlow: 'row', alignItems: 'center', cursor: 'pointer', position: 'relative' }, props.style), as: as }),
+    return (React.createElement(rebass_1.Box, Object.assign({ my: 2 }, props, { className: (0, join_1.default)('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as }),
         before,
         beforeGap,
         input,

package/src/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { HTMLProps } from 'react';
+import { BoxProps } from 'rebass';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+export declare type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
+    api: AdaptableApi;
+    onChange: (color: string) => void;
+    value: string;
+    includeAlpha?: boolean;
+} & Omit<BoxProps, 'onChange'>;
+export declare const ColorPicker: React.ForwardRefExoticComponent<Pick<ColorPickerProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "api" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "includeAlpha"> & React.RefAttributes<unknown>>;

package/src/{View → components/ColorPicker}/ColorPicker.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPicker = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Input_1 = tslib_1.__importDefault(require("../components/Input"));
-const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
+const rebass_1 = require("rebass");
+const Input_1 = tslib_1.__importDefault(require("../Input"));
+const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
 const tinycolor = require('tinycolor2');
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
-    let { api, value } = props, restProps = tslib_1.__rest(props, ["api", "value"]);
+    let { api, value, includeAlpha = true } = props, restProps = tslib_1.__rest(props, ["api", "value", "includeAlpha"]);
     const optionsMap = ColorPalette.reduce((acc, colorItem) => (Object.assign(Object.assign({}, acc), { [(0, StyleHelper_1.getVariableColor)(colorItem)]: colorItem })), {});
     const ABcolorChoicesOptions = Object.keys(optionsMap).map((x) => {
         return (React.createElement("option", { key: x, value: x }, x));
@@ -18,8 +19,14 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
         const color = (0, StyleHelper_1.getVariableColor)(value);
         return tinycolor(color).toHexString();
     }, [value]);
-    return (React.createElement("div", { className: 'ColorPicker' },
-        React.createElement(Input_1.default, Object.assign({}, restProps, { onChange: (event) => {
+    const preparedAlphaColor = React.useMemo(() => {
+        const color = (0, StyleHelper_1.getVariableColor)(value);
+        return [tinycolor(color).setAlpha(0).toRgbString(), tinycolor(color).setAlpha(1).toRgbString()];
+    }, [value]);
+    const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
+    const alpha = tinycolor(value).getAlpha();
+    return (React.createElement(rebass_1.Flex, { className: 'ColorPicker' },
+        React.createElement(Input_1.default, Object.assign({}, restProps, { mr: 2, onChange: (event) => {
                 var _a;
                 /**
                  * The value is not in the map when the color is not in the palette.
@@ -30,5 +37,11 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
                 width: 70,
                 padding: 0 /* we need this to be 0, since otherwise on Windows browsers, the chosen color cannot be seen */,
             }, list: "ABcolorChoices" })),
-        ABcolorChoices));
+        ABcolorChoices,
+        includeAlpha && (React.createElement(rebass_1.Flex, { alignItems: "center" },
+            React.createElement(rebass_1.Box, { mr: 1 }, "Opacity"),
+            React.createElement(Input_1.default, { className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
+                    const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
+                    props.onChange(color);
+                }, min: 0, max: 1, step: 0.01, type: "range" })))));
 });

package/src/components/ColorPicker/index.d.ts

@@ -0,0 +1 @@
+export * from './ColorPicker';

package/src/components/ColorPicker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ColorPicker"), exports);