@adaptabletools/adaptable 18.0.0-canary.9 → 18.0.0

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -3,8 +3,12 @@ import { useSelector } from 'react-redux';
 import { useEffect, useState } from 'react';
 import { LoaderSpinner } from '../Loader';
 import { useAdaptable } from '../../View/AdaptableContext';
+import { ExternalRenderer } from '../../View/Components/ExternalRenderer';
+import Dialog from '../Dialog';
+import { Box, Flex } from 'rebass';
 export const ProgressIndicator = () => {
-    const { active, label } = useSelector((state) => state.System.ProgressIndicator);
+    const adaptable = useAdaptable();
+    const { active, text, render, frameworkComponent } = useSelector((state) => state.System.ProgressIndicator);
     const [visible, setVisible] = useState(false);
     const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = useState({
         top: 0,
@@ -12,7 +16,6 @@ export const ProgressIndicator = () => {
         height: 0,
         width: 0,
     });
-    const adaptable = useAdaptable();
     const disableAdaptableGrid = (containerElement, disabled) => {
         const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
         if (!containerElement) {
@@ -35,14 +38,20 @@ export const ProgressIndicator = () => {
     useEffect(() => {
         disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
         disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
-        updateGridContainerCoordinates(adaptable.getAdaptableContainerElement());
+        updateGridContainerCoordinates(adaptable.getAgGridContainerElement());
         // without rAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
         requestAnimationFrame(() => {
             setVisible(active);
         });
     }, [active]);
-    return (React.createElement(React.Fragment, null, active && (React.createElement("div", { className: `ab-progress-indicator-wrapper ${visible ? 'ab-progress-indicator-wrapper--visible' : ''}`, style: progressIndicatorCoordinates },
-        React.createElement("div", { className: "ab-progress-indicator-body" },
+    let customEl = null;
+    if (render || frameworkComponent) {
+        customEl = React.createElement(ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
+    }
+    return (React.createElement(React.Fragment, null, active && (React.createElement(Dialog, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}` },
+        React.createElement(Flex, { alignItems: "center", flexDirection: "column", p: 3, className: "ab-ProgressIndicator-body" },
             React.createElement(LoaderSpinner, null),
-            React.createElement("span", { style: { marginLeft: 'var(--ab-space-2)' } }, label))))));
+            React.createElement(Box, { mt: 3 },
+                text && React.createElement(Box, null, text),
+                customEl))))));
 };

package/src/components/Select/Select.d.ts

@@ -21,7 +21,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     'data-id'?: string;
     renderSingleValue?: (option: SelectOption<SelectValue>) => React.ReactNode;
     className?: string;
-    isLoding?: boolean;
+    isLoading?: boolean;
     onFocus?: () => void;
     accessLevel?: AccessLevel;
     style?: React.CSSProperties;

package/src/components/Select/Select.js

@@ -9,6 +9,8 @@ const commonStyles = ({ isFocused, isDisabled, }) => {
         background: isDisabled
             ? 'var(--ab-cmp-input--disabled__background)'
             : 'var(--ab-cmp-input__background)',
+        fontSize: 'var(--ab-cmp-select__font-size)',
+        fontFamily: 'var(--ab-cmp-select__font-family)',
     };
 };
 export const Select = function (props) {
@@ -80,7 +82,7 @@ export const Select = function (props) {
                 React.createElement(Icon, { name: "triangle-down", style: { height: 20, width: 20 } })));
         };
     }, []);
-    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, menuPlacement: (_g = props.menuPlacement) !== null && _g !== void 0 ? _g : 'auto', isSearchable: props.searchable, isMulti: props.isMulti, value: selectedOption, menuPosition: (_h = props.menuPosition) !== null && _h !== void 0 ? _h : 'absolute', 
+    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoading, options: props.options, className: props.className, isDisabled: disabled, menuPlacement: (_g = props.menuPlacement) !== null && _g !== void 0 ? _g : 'auto', isSearchable: props.searchable, isMulti: props.isMulti, value: selectedOption, menuPosition: (_h = props.menuPosition) !== null && _h !== void 0 ? _h : 'absolute', 
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: document.body, isClearable: props.isClearable, onChange: (option) => {
             if (props.isMulti) {

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

@@ -10,14 +10,14 @@ export declare const baseClassName = "ab-Textarea";
  * - when typing, expand to fit content - max x px
  */
 export type TextareaProps = Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> & {
-    placehoder?: string;
+    placeholder?: string;
     type?: string;
     disabled?: boolean;
     value?: string;
     autoResizeOnFocus?: boolean;
 } & Omit<BoxProps, 'ref'>;
 declare const Textarea: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLTextAreaElement>, "ref"> & {
-    placehoder?: string;
+    placeholder?: string;
     type?: string;
     disabled?: boolean;
     value?: string;

package/src/components/icons/collapse-all.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/collapse-all.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "m296-80-56-56 240-240 240 240-56 56-184-184L296-80Zm184-504L240-824l56-56 184 184 184-184 56 56-240 240Z" })));

package/src/components/icons/copy.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/copy.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" })));

package/src/components/icons/csv.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/csv.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M230-360h120v-60H250v-120h100v-60H230q-17 0-28.5 11.5T190-560v160q0 17 11.5 28.5T230-360Zm156 0h120q17 0 28.5-11.5T546-400v-60q0-17-11.5-31.5T506-506h-60v-34h100v-60H426q-17 0-28.5 11.5T386-560v60q0 17 11.5 30.5T426-456h60v36H386v60Zm264 0h60l70-240h-60l-40 138-40-138h-60l70 240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z" })));

package/src/components/icons/data-object.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/data-object.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35H560Zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80H280Z" })));

package/src/components/icons/excel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/excel.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M200-200h80v-80h-80v80Zm160 0h80v-80h-80v80Zm160 0h80v-80h-80v80Zm160 0h80v-80h-80v80ZM200-680h80v-80h-80v80Zm0 160h80v-80h-80v80Zm0 160h80v-80h-80v80Zm160-320h80v-80h-80v80Zm0 160h80v-80h-80v80Zm0 160h80v-80h-80v80Zm160-320h80v-80h-80v80Zm0 160h80v-80h-80v80Zm0 160h80v-80h-80v80Zm160-320h80v-80h-80v80Zm0 160h80v-80h-80v80Zm0 160h80v-80h-80v80ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z" }),
+    ' '));

package/src/components/icons/expand-all.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/expand-all.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M480-80 240-320l57-57 183 183 183-183 57 57L480-80ZM298-584l-58-56 240-240 240 240-58 56-182-182-182 182Z" })));

package/src/components/icons/filter-off.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/filter-off.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "m592-481-57-57 143-182H353l-80-80h487q25 0 36 22t-4 42L592-481ZM791-56 560-287v87q0 17-11.5 28.5T520-160h-80q-17 0-28.5-11.5T400-200v-247L56-791l56-57 736 736-57 56ZM535-538Z" })));

package/src/components/icons/grid-info.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/grid-info.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M143-192v-72h432v72H143Zm480.774-240Q544-432 488-488.226t-56-136Q432-704 488.226-760t136-56Q704-816 760-759.774t56 136Q816-544 759.774-488t-136 56ZM143-492v-72h224q5 20 12 37.5t17 34.5H143Zm0 150v-72h322q24.227 18.242 51.613 30.621Q544-371 575-365v23H143Zm457-186h48v-96h-48v96Zm24-144q9.6 0 16.8-7.2 7.2-7.2 7.2-16.8 0-9.6-7.2-16.8-7.2-7.2-16.8-7.2-9.6 0-16.8 7.2-7.2 7.2-7.2 16.8 0 9.6 7.2 16.8 7.2 7.2 16.8 7.2Z" })));

package/src/components/icons/index.js

@@ -36,6 +36,8 @@ import SortAsc from './sort-asc';
 import SortDesc from './sort-desc';
 import Calendar from './calendar';
 import Delete from './delete';
+import CSV from './csv';
+import Excel from './excel';
 import CheckCircle from './check-circle';
 import Refresh from './refresh';
 import Save from './save';
@@ -52,6 +54,7 @@ import CellValidation from './cell-validation';
 import ColumnFilter from './column-filter';
 import SystemStatus from './system-status';
 import DataSet from './data-set';
+import DataObject from './data-object';
 import FlashingCell from './flashing-cell';
 import edit from './edit';
 import Equation from './equation';
@@ -100,6 +103,7 @@ import Expand from './expand';
 import ArrowExpand from './arrow-expand';
 import History from './history';
 import Filter from './filter';
+import FilterOff from './filter-off';
 import Close from './close';
 import Function from './function';
 import GreaterThanOrEqual from './greater-than-or-equal';
@@ -139,6 +143,7 @@ import Lowercase from './case-lower';
 import Uppercase from './case-upper';
 import SentenceCase from './case-sentence';
 import GridFilter from './grid-filter';
+import GridInfo from './grid-info';
 import Rows from './rows';
 import Quote from './quote';
 import News from './news';
@@ -156,6 +161,12 @@ import Order from './order';
 import Contact from './contact';
 import Note from './note';
 import Comments from './comments';
+import SelectAll from './select-all';
+import SelectOff from './select-off';
+import SelectFwd from './select-fwd';
+import Copy from './copy';
+import ExpandAll from './expand-all';
+import CollapseAll from './collapse-all';
 import { IconComponent } from '../Icon';
 import { AdaptableLogger } from '../../agGrid/AdaptableLogger';
 export const allIcons = {
@@ -163,6 +174,7 @@ export const allIcons = {
     grid: Layout,
     cells: CellSummary,
     columns: ColumnChooser,
+    copy: Copy,
     'chart-and-grid': CalculatedColumn,
     laptop: Application,
     alert: Alert,
@@ -176,6 +188,8 @@ export const allIcons = {
     news: News,
     brush: Brush,
     'data-set': DataSet,
+    'excel': Excel,
+    json: DataObject,
     export: Export,
     broadcast: Campaign,
     theme: Theme,
@@ -184,7 +198,9 @@ export const allIcons = {
     chat: Chat,
     'filter-list': ColumnFilter,
     'grid-filter': GridFilter,
+    'grid-info': GridInfo,
     filter: Filter,
+    'filter-off': FilterOff,
     'search-table': QuickSearch,
     lightning: FlashingCell,
     'color-palette': FormatColumn,
@@ -193,6 +209,7 @@ export const allIcons = {
     'percent-tag': PercentBar,
     'spark-line': Sparkline,
     resume: Resume,
+    csv: CSV,
     'pie-chart': PieChart,
     'add-circle': PlusMinus,
     reminder: Reminder,
@@ -211,6 +228,9 @@ export const allIcons = {
     refresh: Refresh,
     delete: Delete,
     'tab-unselected': tabUnselected,
+    'select-all': SelectAll,
+    'select-off': SelectOff,
+    'select-fwd': SelectFwd,
     checked: checkBox,
     unchecked: checkBoxOutline,
     'boolean-list': booleanList,
@@ -315,6 +335,8 @@ export const allIcons = {
     note: Note,
     comments: Comments,
     rows: Rows,
+    'expand-all': ExpandAll,
+    'collapse-all': CollapseAll,
 };
 Object.keys(allIcons).forEach((name) => {
     const ReactCmp = allIcons[name];

package/src/components/icons/note.js

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import DefaultIcon from './DefaultIcon';
-export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
-    React.createElement("path", { d: "M440-240h80v-120h120v-80H520v-120h-80v120H320v80h120v120ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z" })));
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props),
+    React.createElement("path", { d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 14H6v-2h2v2zm0-3H6V9h2v2zm0-3H6V6h2v2zm7 6h-5v-2h5v2zm3-3h-8V9h8v2zm0-3h-8V6h8v2z" })));

package/src/components/icons/select-all.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/select-all.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M280-280v-400h400v400H280Zm80-80h240v-240H360v240ZM200-200v80q-33 0-56.5-23.5T120-200h80Zm-80-80v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm80-160h-80q0-33 23.5-56.5T200-840v80Zm80 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80q0 33-23.5 56.5T760-120Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80q33 0 56.5 23.5T840-760h-80Z" })));

package/src/components/icons/select-fwd.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/select-fwd.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "m672-336-51-51 57-57H432v-72h246l-57-57 51-51 144 144-144 144ZM216-216h78v-528h-78v528Zm-72 72v-672h222v672H144Zm300 0v-72h72v72h-72Zm0-600v-72h72v72h-72Zm150 600v-72h72v72h-72Zm0-600v-72h72v72h-72Zm150 600v-72h72v72h-72Zm0-600v-72h72v72h-72ZM216-216h78-78Z" })));

package/src/components/icons/select-off.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/select-off.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "m507-144-51-51 129.053-129.053L456-453.106 506.894-504l129.053 129.053L765-504l51 51-129.053 129.053L816-194.894 765.106-144 636.053-273.053 507-144Zm-213 0v-72h72v72h-72Zm-78-600h-72q0-29.7 21.15-50.85Q186.3-816 216-816v72Zm78 0v-72h72v72h-72Zm150 0v-72h72v72h-72Zm150 0v-72h72v72h-72Zm150 0v-72q29.7 0 50.85 21.15Q816-773.7 816-744h-72ZM216-216v72q-29.7 0-50.85-21.15Q144-186.3 144-216h72Zm-72-78v-72h72v72h-72Zm0-150v-72h72v72h-72Zm0-150v-72h72v72h-72Zm600 0v-72h72v72h-72Z" })));

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1710934146909 || Date.now(),
-    VERSION: "18.0.0-canary.9" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1713175428736 || Date.now(),
+    VERSION: "18.0.0" || '--current-version--',
 };