@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.0

package/src/View/ColumnInfo/ColumnInfo.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useSelector } from 'react-redux';
 import { Box, Flex } from 'rebass';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
@@ -9,20 +8,20 @@ import { useAdaptable } from '../AdaptableContext';
 import { AdaptableObjectList } from '../Components/AdaptableObjectList';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 // TODOS:
 // - use column from props as initial value
 // - table summary
 // - access level for edit/new buttons
 const MODULES_WITH_COLUMN = [
-    'Alert',
-    'CalculatedColumn',
-    'CustomSort',
-    'ColumnFilter',
-    'FormatColumn',
+    'Alert', // Scope
+    'CalculatedColumn', // ColumnId
+    'CustomSort', // ColumnId
+    'FormatColumn', // Scope
     'FlashingCell',
-    'PlusMinus',
-    'Shortcut',
+    'PlusMinus', // Scope
+    'Shortcut', // Scope
     'StyledColumn', // Scope
 ];
 const MODULES_WITH_SCOPE = [
@@ -32,89 +31,134 @@ const MODULES_WITH_SCOPE = [
     'Shortcut',
     'StyledColumn',
 ];
-// These modules are shown only if they have objects defiend
-const MODULES_WITH_VIEW_ONLY = ['CalculatedColumn', 'ColumnFilter'];
-const MODULES_WITHOUT_NEW = ['CalculatedColumn', 'ColumnFilter'];
 const ColumnDefPreview = (props) => {
-    const keyValuePairs = [
-        {
-            Key: 'Column Id',
-            Value: props.column ? props.column.columnId : null,
-        },
-        {
-            Key: 'Header',
-            Value: props.column ? props.column.friendlyName : null,
-        },
-        {
-            Key: 'DataType',
-            Value: props.column ? props.column.dataType : null,
-        },
-        {
-            Key: 'Groupable',
-            Value: props.column ? props.column.groupable : null,
-        },
-        {
-            Key: 'Aggregatable',
-            Value: props.column ? props.column.aggregatable : null,
-        },
-        {
-            Key: 'Filterable',
-            Value: props.column ? props.column.filterable : null,
-        },
-        {
-            Key: 'Hideable',
-            Value: props.column ? props.column.hideable : null,
-        },
-        {
-            Key: 'Editable',
-            Value: props.column ? !props.column.IsReadOnly : null,
-        },
-        {
-            Key: 'Moveable',
-            Value: props.column ? props.column.moveable : null,
-        },
-        {
-            Key: 'Pivotable',
-            Value: props.column ? props.column.pivotable : null,
-        },
-        {
-            Key: 'Queryable',
-            Value: props.column ? props.column.queryable : null,
-        },
-        {
-            Key: 'Sortable',
-            Value: props.column ? props.column.sortable : null,
-        },
-        {
-            Key: 'Visible',
-            Value: props.column ? props.column.visible : null,
-        },
-        {
-            Key: 'Grouped',
-            Value: props.column ? props.column.isGrouped : null,
-        },
-    ]
-        .map((keyValuePair) => {
-        return {
-            Key: keyValuePair.Key,
-            Value: keyValuePair.Value === true ? 'Yes' : keyValuePair.Value,
+    const adaptable = useAdaptable();
+    if (props.column) {
+        const keyValuePairs = [
+            {
+                Key: 'Column Id',
+                Value: props.column.columnId,
+            },
+            {
+                Key: 'Header',
+                Value: props.column.friendlyName,
+            },
+            {
+                Key: 'Data Type',
+                Value: props.column.dataType,
+            },
+            {
+                Key: 'Column Types',
+                Value: ArrayExtensions.createCommaSeparatedString(props.column.columnTypes),
+            },
+            {
+                Key: 'Primary Key Column',
+                Value: props.column.isPrimaryKey ? 'Yes' : 'Ignore',
+            },
+            {
+                Key: 'Calculated Column',
+                Value: props.column.isCalculatedColumn ? 'Yes' : 'Ignore',
+            },
+            {
+                Key: 'Free Text Column',
+                Value: props.column.isFreeTextColumn ? 'Yes' : 'Ignore',
+            },
+            {
+                Key: 'Action Column',
+                Value: props.column.isActionColumn ? 'Yes' : 'Ignore',
+            },
+            {
+                Key: 'Sparkline Column',
+                Value: props.column.isSparkline ? 'Yes' : 'Ignore',
+            },
+            {
+                Key: 'Column Group',
+                Value: props.column.columnGroup ? props.column.columnGroup.friendlyName : 'Ignore',
+            },
+            {
+                Key: 'Visible',
+                Value: props.column.visible ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Width',
+                Value: props.column.width,
+            },
+            {
+                Key: 'Row Grouped',
+                Value: props.column.groupable ? (props.column.isGrouped ? 'Yes' : 'No') : 'Ignore',
+            },
+            {
+                Key: 'Groupable',
+                Value: props.column.groupable ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Aggregatable',
+                Value: props.column.aggregatable ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Aggregation Function',
+                Value: props.column.aggregatable ? props.column.aggregationFunction : 'Ignore',
+            },
+            {
+                Key: 'Filterable',
+                Value: props.column.filterable ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Column Filter',
+                Value: props.column.filterable
+                    ? adaptable.api.filterApi.columnFilterApi.columnFilterToString(adaptable.api.filterApi.columnFilterApi.getColumnFilterForColumn(props.column.columnId))
+                    : 'Ignore',
+            },
+            {
+                Key: 'Hideable',
+                Value: props.column.hideable ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Editable',
+                Value: !props.column.IsReadOnly ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Moveable',
+                Value: props.column.moveable ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Pivotable',
+                Value: props.column.pivotable ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Queryable',
+                Value: props.column.queryable ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Exportable',
+                Value: props.column.exportable ? 'Yes' : 'No',
+            },
+            {
+                Key: 'Sortable',
+                Value: props.column.sortable ? 'Yes' : 'No',
+            },
+        ]
+            .map((keyValuePair) => {
+            return {
+                Key: keyValuePair.Key,
+                Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
+            };
+        })
+            .filter((x) => x.Value);
+        const columnsMap = {
+            Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+            Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
         };
-    })
-        .filter((x) => x.Value);
-    const columnsMap = {
-        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
-        Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
-    };
-    return (React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
-        React.createElement(InfiniteTable, { domProps: {
-                style: {
-                    height: '460px',
-                    width: '100%',
-                },
-            }, columns: columnsMap })));
+        return (React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
+            React.createElement(InfiniteTable, { domProps: {
+                    style: {
+                        height: '460px',
+                        width: '100%',
+                    },
+                }, columns: columnsMap })));
+    }
 };
 const ModuleView = (props) => {
-    var _a, _b, _c, _d;
     const adaptable = useAdaptable();
     const module = adaptable.ModuleService.getModuleById(props.moduleName);
     if (!module || !module.isModuleAvailable()) {
@@ -122,20 +166,22 @@ const ModuleView = (props) => {
     }
     const moduleInfo = module.moduleInfo;
     const [isWizardOpen, setIsWizardOpen] = React.useState(false);
-    const EditWizard = (_c = (_b = (_a = module === null || module === void 0 ? void 0 : module.getViewProperties) === null || _a === void 0 ? void 0 : _a.call(module)) === null || _b === void 0 ? void 0 : _b.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(_b);
+    const EditWizard = module?.getViewProperties?.()?.getEditWizard?.();
     const column = adaptable.api.columnApi.getColumnWithColumnId(props.selectedColumnId);
-    const allItems = (_d = module === null || module === void 0 ? void 0 : module.toViewAll) === null || _d === void 0 ? void 0 : _d.call(module);
-    if (MODULES_WITH_VIEW_ONLY.includes(props.moduleName) && !(allItems === null || allItems === void 0 ? void 0 : allItems.length)) {
+    const allItems = module?.toViewAll?.();
+    // Dont show calculated column for non calc cols
+    if (module.moduleInfo.ModuleName == 'CalculatedColumn' && !column.isCalculatedColumn) {
         return React.createElement(React.Fragment, null);
     }
+    // if (MODULES_WITH_VIEW_ONLY.includes(props.moduleName) && !allItems?.length) {
+    //   return <></>;
+    // }
     const itemsInScope = allItems.filter((item) => {
-        var _a;
         if ('Scope' in item.abObject) {
-            const abColumn = adaptable.api.columnApi.getColumnWithColumnId(props.selectedColumnId);
-            return adaptable.api.columnScopeApi.isColumnInScope(abColumn, item.abObject.Scope);
+            return adaptable.api.columnScopeApi.isColumnInScope(column, item.abObject.Scope);
         }
         if ('ColumnId' in item.abObject) {
-            return ((_a = item.abObject) === null || _a === void 0 ? void 0 : _a.ColumnId) === props.selectedColumnId;
+            return item.abObject?.ColumnId === props.selectedColumnId;
         }
         return false;
     });
@@ -150,8 +196,8 @@ const ModuleView = (props) => {
         React.createElement(Flex, null,
             React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
             React.createElement(Box, { flex: 1 }),
-            !MODULES_WITHOUT_NEW.includes(props.moduleName) && (React.createElement(ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New"))),
-        (itemsInScope === null || itemsInScope === void 0 ? void 0 : itemsInScope.length) ? React.createElement(AdaptableObjectList, { items: itemsInScope, module: module }) : null,
+            React.createElement(ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New")),
+        itemsInScope?.length ? React.createElement(AdaptableObjectList, { items: itemsInScope, module: module }) : null,
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { popupParams: {
                 column,
                 action: 'New',
@@ -159,7 +205,7 @@ const ModuleView = (props) => {
             }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };
 export const ColumnInfo = (props) => {
-    const state = useSelector((state) => state);
+    //  const state = useSelector((state: AdaptableState) => state);
     const adaptable = useAdaptable();
     const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
     const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
@@ -167,7 +213,7 @@ export const ColumnInfo = (props) => {
         React.createElement(Box, { mb: 3 },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Select Column" },
-                    React.createElement(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
+                    React.createElement(ColumnSelector, { filterColumn: (column) => !column.alwaysHidden, value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
         selectedColumnId && (React.createElement(Tabs, { mb: 3 },
             React.createElement(Tabs.Tab, null, "Config"),
             React.createElement(Tabs.Tab, null, "Column Summary"),

package/src/View/ColumnInfo/ColumnInfoPopup.js

@@ -3,8 +3,7 @@ import { Flex } from 'rebass';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { ColumnInfo } from './ColumnInfo';
 export const ColumnInfoPopup = (props) => {
-    var _a, _b;
     return (React.createElement(PopupPanel, { headerText: 'Column Info', glyphicon: 'info' },
         React.createElement(Flex, { flexDirection: "column", flex: 1, height: "100%" },
-            React.createElement(ColumnInfo, { selectedColumnId: (_b = (_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.columnId }))));
+            React.createElement(ColumnInfo, { selectedColumnId: props.popupParams?.column?.columnId }))));
 };

package/src/View/Comments/CommentsEditor.js

@@ -5,7 +5,7 @@ import { Icon } from '../../components/icons';
 import Panel from '../../components/Panel';
 import SimpleButton from '../../components/SimpleButton';
 import * as CommentsRedux from '../../Redux/ActionsReducers/CommentsRedux';
-import { SystemCommentsAndNotesSelector } from '../../Redux/ActionsReducers/SystemRedux';
+import { CommentsAndNotesSelector } from '../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../AdaptableContext';
 import AdaptableInput from '../Components/AdaptableInput';
 import dateFnsFormat from 'date-fns/format';
@@ -18,15 +18,14 @@ import dateFnsFormat from 'date-fns/format';
 // [text]
 // [show-all-comments-button]
 export const CommentsEditor = (props) => {
-    var _a, _b;
-    const adaptable = useAdaptable();
-    const showCloseButton = (_b = (_a = adaptable.adaptableOptions.commentOptions) === null || _a === void 0 ? void 0 : _a.showPopupCloseButton) !== null && _b !== void 0 ? _b : true;
-    const cellAddress = useSelector((state) => SystemCommentsAndNotesSelector(state.System));
+    const { api } = useAdaptable();
+    const showCloseButton = api.optionsApi.getCommentOptions()?.showPopupCloseButton ?? true;
+    const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
     const userId = React.useMemo(() => {
-        return adaptable.api.optionsApi.getUserName();
+        return api.optionsApi.getUserName();
     }, []);
     const commentThread = useSelector((state) => CommentsRedux.GetCellCommentSelector(state.Comment, cellAddress));
-    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
+    const isReadOnlyModule = api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
     const [activeEditingComment, setActiveEditingComment] = React.useState(() => {
         /**
          * When opening the popup and there is only one comment, we want to open it in edit mode.
@@ -39,10 +38,9 @@ export const CommentsEditor = (props) => {
     });
     const [newCommentText, setNewCommentText] = React.useState('');
     const commentsWrapperRef = React.useRef(null);
-    const comments = commentThread === null || commentThread === void 0 ? void 0 : commentThread.Comments;
+    const comments = commentThread?.Comments;
     const scrollToBottom = () => {
-        var _a, _b;
-        (_a = commentsWrapperRef === null || commentsWrapperRef === void 0 ? void 0 : commentsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, (_b = commentsWrapperRef === null || commentsWrapperRef === void 0 ? void 0 : commentsWrapperRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight);
+        commentsWrapperRef?.current?.scrollTo(0, commentsWrapperRef?.current?.scrollHeight);
     };
     React.useEffect(() => {
         scrollToBottom();
@@ -52,14 +50,14 @@ export const CommentsEditor = (props) => {
     }
     return (React.createElement(Panel, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), minWidth: 250, className: "ab-CommentPopup", onKeyDown: (event) => {
             if (event.key === 'Escape') {
-                adaptable.api.commentApi.hideCommentsPopup();
+                api.commentApi.hideCommentsPopup();
             }
         } },
         showCloseButton && (React.createElement(Flex, null,
             React.createElement(Box, { flex: 1 }),
             React.createElement(SimpleButton, { onClick: (event) => {
                     event.stopPropagation();
-                    adaptable.api.commentApi.hideCommentsPopup();
+                    api.commentApi.hideCommentsPopup();
                 }, variant: "text", icon: "close" }))),
         React.createElement(Flex, { style: {
                 overflow: 'auto',
@@ -67,22 +65,21 @@ export const CommentsEditor = (props) => {
             }, flexDirection: "column", ref: commentsWrapperRef }, comments &&
             comments.length > 0 &&
             comments.map((comment, index) => {
-                var _a, _b, _c, _d;
                 if (!comment) {
                     return null;
                 }
-                const isOwnComment = ((_a = comment === null || comment === void 0 ? void 0 : comment.Author) === null || _a === void 0 ? void 0 : _a.UserName)
-                    ? ((_b = comment === null || comment === void 0 ? void 0 : comment.Author) === null || _b === void 0 ? void 0 : _b.UserName) === userId
+                const isOwnComment = comment?.Author?.UserName
+                    ? comment?.Author?.UserName === userId
                     : true; // no owner means it's the current user
-                return (React.createElement(Box, { p: 2, key: (_c = comment.Uuid) !== null && _c !== void 0 ? _c : index, className: "ab-Comment" },
+                return (React.createElement(Box, { p: 2, key: comment.Uuid ?? index, className: "ab-Comment" },
                     React.createElement(Flex, { mb: 2, alignItems: "center" },
                         React.createElement(Box, null,
-                            React.createElement(Box, { "data-name": "comment-username", fontSize: 3, fontWeight: "bold" }, (_d = comment === null || comment === void 0 ? void 0 : comment.Author) === null || _d === void 0 ? void 0 : _d.UserName),
-                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", fontSize: 2 }, dateFnsFormat(comment.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat())))),
+                            React.createElement(Box, { "data-name": "comment-username", fontSize: 3, fontWeight: "bold" }, comment?.Author?.UserName),
+                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", fontSize: 2 }, dateFnsFormat(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
                         React.createElement(Box, { flex: 1 }),
                         React.createElement(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
                         React.createElement(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
-                                adaptable.api.commentApi.deleteComment(comment, cellAddress);
+                                api.commentApi.deleteComment(comment, cellAddress);
                                 requestAnimationFrame(() => {
                                     props.onRefreshContent();
                                 });
@@ -92,14 +89,17 @@ export const CommentsEditor = (props) => {
                                 setActiveEditingComment(null);
                             }
                         }, onChange: (event) => {
-                            adaptable.api.commentApi.editComment(Object.assign(Object.assign({}, comment), { Value: event.target.value }), cellAddress);
+                            api.commentApi.editComment({
+                                ...comment,
+                                Value: event.target.value,
+                            }, cellAddress);
                         } })) : (React.createElement(Text, { "data-name": "comment-text" }, comment.Value)))));
             })),
         React.createElement(AdaptableInput, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
                 setNewCommentText(event.target.value);
             }, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
-                    adaptable.api.commentApi.addComment(newCommentText, cellAddress);
+                    api.commentApi.addComment(newCommentText, cellAddress);
                     setNewCommentText('');
                     requestAnimationFrame(() => {
                         props.onRefreshContent();
@@ -108,8 +108,8 @@ export const CommentsEditor = (props) => {
                 }
             }, mt: 2, mb: "2", width: "100%", placeholder: "Write new Comment" }),
         React.createElement(SimpleButton, { width: "100%", variant: "raised", onClick: () => {
-                adaptable.api.settingsPanelApi.openSettingsPanel('Comment');
-                adaptable.api.internalApi.getCellPopupService().hidePopup();
+                api.settingsPanelApi.openSettingsPanel('Comment');
+                api.internalApi.getAnnotationsService().hidePopup();
             } },
             React.createElement(Box, { mr: 2 },
                 React.createElement(Icon, { name: "folder" })),

package/src/View/Comments/CommentsPopup.js

@@ -61,7 +61,7 @@ const CellComments = (props) => {
                 columnFriendlyName),
             React.createElement(Box, { flex: 1 }),
             React.createElement(AdaptableButtonComponent, { mr: 1, variant: "text", icon: "visibility-on", onClick: () => {
-                    adaptable.api.internalApi.getCellPopupService().showPopup({
+                    adaptable.api.internalApi.getAnnotationsService().showPopup({
                         ColumnId: props.commentThread.ColumnId,
                         PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
                     }, true);
@@ -84,8 +84,7 @@ export const CommentsPopup = (props) => {
     const commentThreads = useSelector((state) => {
         return state.Comment.CommentThreads;
     });
-    return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads !== null && commentThreads !== void 0 ? commentThreads : []).map((commentThread, index) => {
-        var _a;
-        return React.createElement(CellComments, { key: (_a = commentThread === null || commentThread === void 0 ? void 0 : commentThread.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: commentThread });
+    return (React.createElement(PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads ?? []).map((commentThread, index) => {
+        return React.createElement(CellComments, { key: commentThread?.Uuid ?? index, commentThread: commentThread });
     })));
 };

package/src/View/Components/AdaptableButton/index.js

@@ -9,5 +9,5 @@ export const AdaptableButtonComponent = (props) => {
     if (isAdaptableSystemIcon(icon)) {
         icon = adaptable.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(icon);
     }
-    return React.createElement(SimpleButton, Object.assign({}, props, { icon: icon }));
+    return React.createElement(SimpleButton, { ...props, icon: icon });
 };

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
-export type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "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" | "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" | "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" | "onTransitionEndCapture" | "opacity" | "value" | "step" | "sizes" | "variant" | "tx" | "as" | "css" | "key" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "type" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>;
+export type AdaptableDateInputProps = AdaptableInputProps & {
+    showClearButton?: boolean;
+};
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Omit<AdaptableDateInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

package/src/View/Components/AdaptableDateInput/index.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { Datepicker } from '../../../components/Datepicker';
 import { useAdaptable } from '../../AdaptableContext';
@@ -6,30 +5,37 @@ import useProperty from '../../../components/utils/useProperty';
 import { dateToISO, parseDateValue } from '../../../Utilities/Helpers/DateHelper';
 const AdaptableDateInput = React.forwardRef((props, ref) => {
     const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
-    const { value: _, defaultValue: __, onChange, required, disabled } = props, inputProps = __rest(props, ["value", "defaultValue", "onChange", "required", "disabled"]);
+    const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
     const [value, setValue] = useProperty(props, 'value', undefined, {
-        onChange: (dateString) => {
-            var _a;
-            // wrap date value in FormEvent in order to keep the external API unchanged
-            return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, {
-                target: {
-                    // ALWAYS trigger onChange with the ISO format
-                    value: dateString,
-                },
-            });
-        },
+        onChange: (dateString) => 
+        // wrap date value in FormEvent in order to keep the external API unchanged
+        props.onChange?.({
+            target: {
+                // ALWAYS trigger onChange with the ISO format
+                value: dateString,
+            },
+        }),
     });
     const dateValue = value ? parseDateValue(value) : null;
-    const datepickerProps = Object.assign({ 
+    const datepickerProps = {
         // this is OK as long as we do not support range datepicker
-        value: dateValue, onChange: (dateValue) => { var _a; 
+        value: dateValue,
+        onChange: (dateValue) => 
         // convert to ISO8601 string format
         // see https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#date_strings
-        return setValue((_a = dateToISO(dateValue)) !== null && _a !== void 0 ? _a : ''); }, required,
-        disabled, dateProps: {
+        setValue(dateToISO(dateValue) ?? ''),
+        required,
+        disabled,
+        dateProps: {
             format: dateInputOptions.dateFormat,
             locale: dateInputOptions.locale,
-        }, showWeekNumber: dateInputOptions.showWeekNumber, showOutsideDays: dateInputOptions.showOutsideDays, datepickerButtons: dateInputOptions.datepickerButtons }, inputProps);
-    return React.createElement(Datepicker, Object.assign({ ref: ref }, datepickerProps));
+        },
+        showWeekNumber: dateInputOptions.showWeekNumber,
+        showOutsideDays: dateInputOptions.showOutsideDays,
+        datepickerButtons: dateInputOptions.datepickerButtons,
+        showClearButton,
+        ...inputProps,
+    };
+    return React.createElement(Datepicker, { ref: ref, ...datepickerProps });
 });
 export default AdaptableDateInput;

package/src/View/Components/AdaptableIconComponent/index.js

@@ -7,5 +7,5 @@ import { useCustomIcon } from './useCustomIcon';
  */
 export const AdaptableIconComponent = (props) => {
     const icon = useCustomIcon(props.icon);
-    return React.createElement(IconComponent, Object.assign({}, props, { icon: icon }));
+    return React.createElement(IconComponent, { ...props, icon: icon });
 };

package/src/View/Components/AdaptableIconSelector/index.js

@@ -5,9 +5,8 @@ import { useAdaptable } from '../../AdaptableContext';
  * This component connects to adaptable to retrieve custom icons
  */
 export const AdaptableIconSelector = (props) => {
-    var _a, _b;
     const adaptable = useAdaptable();
-    const userInterfaceOptions = (_a = adaptable.api.optionsApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.userInterfaceOptions;
-    const customDefinedIcons = (_b = userInterfaceOptions.customIcons) !== null && _b !== void 0 ? _b : [];
-    return React.createElement(IconSelector, Object.assign({ customIcons: customDefinedIcons }, props));
+    const userInterfaceOptions = adaptable.api.optionsApi.getAdaptableOptions()?.userInterfaceOptions;
+    const customDefinedIcons = userInterfaceOptions.customIcons ?? [];
+    return React.createElement(IconSelector, { customIcons: customDefinedIcons, ...props });
 };

package/src/View/Components/AdaptableInput/AdaptableDateInlineInput.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export declare const AdaptableDateInlineInput: React.ForwardRefExoticComponent<Pick<Omit<import("../../../components/Input").InputProps, "onChange" | "value"> & {
+import { AdaptableInputProps } from '.';
+export declare const AdaptableDateInlineInput: React.ForwardRefExoticComponent<Omit<Omit<AdaptableInputProps, "onChange" | "value"> & {
     onChange: (value: string) => void;
     value: string;
-}, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "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" | "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" | "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" | "onTransitionEndCapture" | "opacity" | "value" | "step" | "sizes" | "variant" | "tx" | "as" | "css" | "key" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "type" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;