@adaptabletools/adaptable-cjs 22.1.1-canary.1 → 23.0.0-canary.0

package/src/components/ExpressionEditor/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
 exports.ExpressionEditor = ExpressionEditor;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DocumentationLinkConstants_1 = require("../../Utilities/Constants/DocumentationLinkConstants");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
@@ -33,12 +33,12 @@ function ExpressionEditor(props) {
     const { namedQuery, setNamedQuery } = (0, NamedQueryContext_1.useNamedQueryContext)();
     const textAreaRef = (0, react_1.useRef)(null);
     const allowSaveNamedQuery = props.allowSaveNamedQuery ?? type === 'boolean';
-    const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (React.createElement(EditorInputWithWhereClause_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
+    const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? ((0, jsx_runtime_1.jsx)(EditorInputWithWhereClause_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
             setExpressionText(value);
             props.onChange(value);
         }, testData: props.initialData, api: props.api })) : (
     // 'boolean','scalar','aggregatedScalar'/'cumulativeAggregatedScalar'/'quantileAggregatedScalar'
-    (React.createElement(
+    ((0, jsx_runtime_1.jsx)(
         EditorInput_1.default,
         { type: type, module: module, columnScope: props.columnScope, value: props.value, onChange: (value) => {
                 setExpressionText(value);
@@ -58,72 +58,44 @@ function ExpressionEditor(props) {
         props.api.internalApi
             .getModuleService()
             .getModuleById(ModuleConstants_1.NamedQueryModuleId)
-            .isModuleEditable() && (React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:mb-2 twa:text-3" },
-        React.createElement(CheckBox_1.CheckBox, { checked: !!namedQuery, onChange: (checked) => {
-                if (checked) {
+            .isModuleEditable() && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:mb-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: !!namedQuery, onChange: (checked) => {
+                    if (checked) {
+                        setNamedQuery({
+                            Name: '',
+                            BooleanExpression: expressionText,
+                        });
+                    }
+                    else {
+                        setNamedQuery(false);
+                    }
+                }, className: "twa:mr-2 twa:items-center", children: "Save as new Named Query" }), namedQuery ? ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { className: "twa:flex-1", onChange: (event) => {
+                    const { target: { value }, } = event;
                     setNamedQuery({
-                        Name: '',
+                        Name: value,
                         BooleanExpression: expressionText,
                     });
-                }
-                else {
-                    setNamedQuery(false);
-                }
-            }, className: "twa:mr-2 twa:items-center" }, "Save as new Named Query"),
-        namedQuery ? (React.createElement(AdaptableInput_1.default, { className: "twa:flex-1", onChange: (event) => {
-                const { target: { value }, } = event;
-                setNamedQuery({
-                    Name: value,
-                    BooleanExpression: expressionText,
-                });
-            } })) : null));
-    const editorElement = (React.createElement(Flex_1.Flex, { className: (0, twMerge_1.twMerge)(`${exports.baseClassName} twa:flex-1 twa:pl-2 twa:overflow-auto`, props.className), "data-name": "expression-editor-wrapper", style: props.style },
-        React.createElement(Flex_1.Flex, { className: "twa:flex-1", style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
+                } })) : null] }));
+    const editorElement = ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, twMerge_1.twMerge)(`${exports.baseClassName} twa:flex-1 twa:pl-2 twa:overflow-auto`, props.className), "data-name": "expression-editor-wrapper", style: props.style, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
                 if (event.target.tagName === 'TEXTAREA') {
                     textAreaRef.current = event.target;
                 }
-            } },
-            React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 } },
-                React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column" },
-                    editorInput,
-                    StringExtensions_1.default.IsNotNullOrEmpty(expressionText?.trim()) && (React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
-                    /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                    StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type),
-                    showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3" },
-                        React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }),
-                        "See documentation for more details and examples")),
-                    React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-                    showNamedQueryStuff && saveAsNamedQueryElement),
-                React.createElement(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar" },
-                    React.createElement(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-defaultbackground twa:text-text-on-defaultbackground" },
-                        React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
-                            React.createElement(Tabs_1.Tabs.Tab, { value: "column" }, "Columns"),
-                            React.createElement(Tabs_1.Tabs.Tab, { value: "field" }, "Fields"),
-                            React.createElement(Tabs_1.Tabs.Tab, { value: "named-query" }, "Named Queries"),
-                            React.createElement(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full" },
-                                React.createElement(DataTableEditor_1.DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
-                                        label: column.friendlyName,
-                                        value: column.columnId,
-                                        dataType: column.dataType,
-                                        readOnly: column.readOnly,
-                                    })), data: props.initialData })),
-                            React.createElement(Tabs_1.Tabs.Content, null, adaptableFields && adaptableFields.length > 0 ? (React.createElement(DataTableEditor_1.DataTableEditor, { type: "field", labels: {
-                                    showIds: 'Show Field path',
-                                    filterPlaceholder: 'Filter fields...',
-                                }, dataFormatter: (value) => `FIELD("${value}")`, data: props.initialData, fields: adaptableFields?.map((field) => ({
-                                    label: field.label,
-                                    value: field.name,
-                                    dataType: field.dataType,
-                                    readOnly: true,
-                                })) })) : (React.createElement(Flex_1.Box, { className: "twa:p-2" }, "No Data Fields provided"))),
-                            React.createElement(Tabs_1.Tabs.Content, null, ArrayExtensions_1.default.IsNullOrEmpty(props.namedQueries) ? (React.createElement("div", null,
-                                React.createElement(Flex_1.Box, { className: "twa:p-2" }, "No Named Queries defined"),
-                                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:p-2" },
-                                    "Named Queries are saved Expressions which can be referenced in other Expressions using the ",
-                                    React.createElement("i", null, "QUERY"),
-                                    " keyword",
-                                    ' '))) : (React.createElement(NamedQueryEditor_1.NamedQueryEditor, { namedQueries: props.namedQueries }))))))))));
-    const queryBuilderElement = (React.createElement(QueryBuilder_1.QueryBuilder, { module: module, query: expressionText, onChange: (query) => {
+            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions_1.default.IsNotNullOrEmpty(expressionText?.trim()) && ((0, jsx_runtime_1.jsx)(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), 
+                            /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
+                            StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-defaultbackground twa:text-foreground", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:h-full", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "column", children: "Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "field", children: "Fields" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "named-query", children: "Named Queries" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full", children: (0, jsx_runtime_1.jsx)(DataTableEditor_1.DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
+                                                label: column.friendlyName,
+                                                value: column.columnId,
+                                                dataType: column.dataType,
+                                                readOnly: column.readOnly,
+                                            })), data: props.initialData }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: adaptableFields && adaptableFields.length > 0 ? ((0, jsx_runtime_1.jsx)(DataTableEditor_1.DataTableEditor, { type: "field", labels: {
+                                                showIds: 'Show Field path',
+                                                filterPlaceholder: 'Filter fields...',
+                                            }, dataFormatter: (value) => `FIELD("${value}")`, data: props.initialData, fields: adaptableFields?.map((field) => ({
+                                                label: field.label,
+                                                value: field.name,
+                                                dataType: field.dataType,
+                                                readOnly: true,
+                                            })) })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: "No Data Fields provided" })) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: ArrayExtensions_1.default.IsNullOrEmpty(props.namedQueries) ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: "No Named Queries defined" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:p-2", children: ["Named Queries are saved Expressions which can be referenced in other Expressions using the ", (0, jsx_runtime_1.jsx)("i", { children: "QUERY" }), " keyword", ' '] })] })) : ((0, jsx_runtime_1.jsx)(NamedQueryEditor_1.NamedQueryEditor, { namedQueries: props.namedQueries })) })] }) }) })] }) }) }));
+    const queryBuilderElement = ((0, jsx_runtime_1.jsx)(QueryBuilder_1.QueryBuilder, { module: module, query: expressionText, onChange: (query) => {
             setExpressionText(query);
             props.onChange(query);
         }, getFields: (type) => {
@@ -165,30 +137,22 @@ function ExpressionEditor(props) {
         } }));
     const showQueryBuilder = props.showQueryBuilder ?? false;
     const showExpressionEditor = props.showExpressionEditor ?? true;
-    return (React.createElement(EditorContext_1.ExpressionEditorContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(EditorContext_1.ExpressionEditorContext.Provider, { value: {
             selectedFunction,
             setSelectedFunction,
             textAreaRef,
-        } }, (() => {
-        switch (true) {
-            case showQueryBuilder && showExpressionEditor:
-                return (React.createElement(Tabs_1.Tabs, { "data-name": "editor-selector-tabs", className: "twa:mb-2 twa:p-2 twa:min-h-0 twa:flex-1" },
-                    React.createElement(Tabs_1.Tabs.Tab, { value: "editor" }, "Expression Editor"),
-                    React.createElement(Tabs_1.Tabs.Tab, { value: "ui" }, "Query Builder"),
-                    React.createElement(Tabs_1.Tabs.Content, null, editorElement),
-                    React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full" },
-                            queryBuilderElement,
-                            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
-                            showNamedQueryStuff && saveAsNamedQueryElement))));
-            case showQueryBuilder:
-                return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" }, queryBuilderElement));
-            case showExpressionEditor:
-                return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" }, editorElement));
-            default:
-                return null;
-        }
-    })()));
+        }, children: (() => {
+            switch (true) {
+                case showQueryBuilder && showExpressionEditor:
+                    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": "editor-selector-tabs", className: "twa:mb-2 twa:p-2 twa:min-h-0 twa:flex-1", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "editor", children: "Expression Editor" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ui", children: "Query Builder" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: editorElement }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full", children: [queryBuilderElement, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }) })] }));
+                case showQueryBuilder:
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: queryBuilderElement }));
+                case showExpressionEditor:
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: editorElement }));
+                default:
+                    return null;
+            }
+        })() }));
 }
 const renderQueryHints = (type) => {
     const examples = [];
@@ -230,17 +194,7 @@ const renderQueryHints = (type) => {
             description: "The cumulative sum of all 'PnL' columns in the order given by the 'TradeDate' column",
         });
     }
-    return examples.length ? (React.createElement(Flex_1.Box, { "data-name": "expression-hints", className: "twa:my-2 twa:p-2 twa:bg-primary twa:rounded-standard" },
-        React.createElement(Flex_1.Box, null,
-            React.createElement(Flex_1.Box, { className: "twa:mb-2" },
-                React.createElement("b", null, "Examples"),
-                " (click on each to see its explanation):"),
-            examples.map((example, index) => (React.createElement("details", { key: index, className: "twa:mb-2" },
-                React.createElement(Flex_1.Flex, { className: "twa:mr-2 twa:rounded-standard twa:mb-1 twa:text-2", alignItems: "center", as: "summary" },
-                    React.createElement(CodeBlock_1.CodeBlock, null,
-                        " ",
-                        example.code)),
-                React.createElement(Flex_1.Box, { className: "twa:ml-3 twa:italic twa:text-2" }, example.description))))))) : null;
+    return examples.length ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "expression-hints", className: "twa:my-2 twa:p-2 twa:bg-primary twa:rounded-standard", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)("b", { children: "Examples" }), " (click on each to see its explanation):"] }), examples.map((example, index) => ((0, jsx_runtime_1.jsxs)("details", { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mr-2 twa:rounded-standard twa:mb-1 twa:text-2", alignItems: "center", as: "summary", children: (0, jsx_runtime_1.jsxs)(CodeBlock_1.CodeBlock, { children: [" ", example.code] }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-3 twa:italic twa:text-2", children: example.description })] }, index)))] }) })) : null;
 };
 const queryDocumentationLinks = {
     boolean: DocumentationLinkConstants_1.BooleanQueryDocsLink,

package/src/components/FieldWrap/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twUtils_1 = require("../twUtils");
 const FieldWrap = (props) => {
-    return (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", ...props, className: (0, clsx_1.default)('ab-FieldWrap', props.className) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", ...props, className: (0, clsx_1.default)('ab-FieldWrap', twUtils_1.targetOwn.focusWithinOutline, props.className) }));
 };
 exports.default = FieldWrap;

package/src/components/FileDroppable/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.readJSONFile = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const contains_1 = tslib_1.__importDefault(require("../../components/utils/contains"));
@@ -40,7 +40,7 @@ const readJSONFile = async (file, toJSON) => {
 };
 exports.readJSONFile = readJSONFile;
 const FileDroppable = (props = {}) => {
-    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(icons_1.Icon, { name: "paperclip", size: 40 }), value, ...domProps } = props;
+    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "paperclip", size: 40 }), value, ...domProps } = props;
     const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, initialState);
     const onDragEnter = (e) => {
         dispatch({
@@ -76,7 +76,7 @@ const FileDroppable = (props = {}) => {
                 dispatch({
                     type: reducer_1.ActionTypes.DROP_SUCCES,
                     payload: {
-                        message: (React.createElement(Flex_1.Box, null, props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText)),
+                        message: ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText })),
                     },
                 });
                 requestAnimationFrame(() => {
@@ -91,37 +91,26 @@ const FileDroppable = (props = {}) => {
                 dispatch({
                     type: reducer_1.ActionTypes.SET_INVALID_FILE,
                     payload: {
-                        message: React.createElement(Flex_1.Box, null, 'The file is not a valid JSON file! Please try again!'),
+                        message: (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: 'The file is not a valid JSON file! Please try again!' }),
                     },
                 });
             }
         }
     };
     const domRef = (0, react_1.useRef)(null);
-    let form = (React.createElement("form", { onSubmit: preventEventPropagation },
-        React.createElement(SimpleButton_1.default, { style: { cursor: 'pointer' }, variant: "outlined" },
-            React.createElement("div", null, state.dragOver ? dragOverText : defaultText),
-            React.createElement("input", { type: "file", onChange: onDrop, accept: fileAccept, value: props?.file?.name, style: {
-                    opacity: 0,
-                    position: 'absolute',
-                    cursor: 'pointer',
-                    fontSize: 0,
-                    lineHeight: 0,
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '100%',
-                    zIndex: 1,
-                } }))));
+    let form = ((0, jsx_runtime_1.jsx)("form", { onSubmit: preventEventPropagation, children: (0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { style: { cursor: 'pointer' }, variant: "outlined", children: [(0, jsx_runtime_1.jsx)("div", { children: state.dragOver ? dragOverText : defaultText }), (0, jsx_runtime_1.jsx)("input", { type: "file", onChange: onDrop, accept: fileAccept, value: props?.file?.name, style: {
+                        opacity: 0,
+                        position: 'absolute',
+                        cursor: 'pointer',
+                        fontSize: 0,
+                        lineHeight: 0,
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: '100%',
+                        zIndex: 1,
+                    } })] }) }));
     const msg = message || state.message;
-    return (React.createElement(Flex_1.Flex, { ...domProps, flexDirection: "column", className: (0, join_1.default)(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef },
-        props.children,
-        helpText || icon ? (React.createElement(Flex_1.Flex, { flexDirection: "column" },
-            helpText ? (React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2" },
-                React.createElement(HelpBlock_1.default, null,
-                    React.createElement("b", null, helpText)))) : null,
-            icon ? (React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2" }, icon)) : null)) : null,
-        msg,
-        form));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...domProps, flexDirection: "column", className: (0, join_1.default)(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef, children: [props.children, helpText || icon ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [helpText ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2", children: (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: (0, jsx_runtime_1.jsx)("b", { children: helpText }) }) })) : null, icon ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2", children: icon })) : null] })) : null, msg, form] }));
 };
 exports.default = FileDroppable;

package/src/components/Flex.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = exports.Flex = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twMerge_1 = require("../twMerge");
@@ -35,10 +36,10 @@ exports.Flex = React.forwardRef((props, ref) => {
     const { className: _, flexDirection, alignItems, justifyContent, flexWrap, as, ...domProps } = props;
     const className = (0, clsx_1.default)('twa:flex', 'twa:box-border', FLEX_DIRECTION_MAP[flexDirection], ALIGN_ITEMS_MAP[alignItems], JUSTIFY_CONTENT_MAP[justifyContent], FLEX_WRAP_MAP[flexWrap]);
     const Cmp = (as || 'div');
-    return (React.createElement(Cmp, { ref: ref, ...domProps, className: (0, twMerge_1.twMerge)(className, props.className) }));
+    return ((0, jsx_runtime_1.jsx)(Cmp, { ref: ref, ...domProps, className: (0, twMerge_1.twMerge)(className, props.className) }));
 });
 exports.Box = React.forwardRef((props, ref) => {
     const { className, as, ...domProps } = props;
     const Cmp = (as || 'div');
-    return (React.createElement(Cmp, { ref: ref, ...domProps, className: (0, twMerge_1.twMerge)('twa:box-border', className) }));
+    return ((0, jsx_runtime_1.jsx)(Cmp, { ref: ref, ...domProps, className: (0, twMerge_1.twMerge)('twa:box-border', className) }));
 });

package/src/components/FlexWithFooter.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("./Flex");
 const defaultStyle = {
     height: '100%',
@@ -11,9 +10,6 @@ const defaultStyle = {
 };
 const FlexWithFooter = (props) => {
     const { footer, footerProps, children, style, ...domProps } = props;
-    return (React.createElement(Flex_1.Flex, { flexDirection: "column", ...domProps, style: { ...defaultStyle, ...style } },
-        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-0 twa:flex-1" },
-            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1" }, children)),
-        footer ? (React.createElement(Flex_1.Flex, { className: "twa:p-2 twa:bg-primary", ...footerProps }, footer)) : null));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", ...domProps, style: { ...defaultStyle, ...style }, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:p-0 twa:flex-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1", children: children }) }), footer ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:p-2 twa:bg-primary", ...footerProps, children: footer })) : null] }));
 };
 exports.default = FlexWithFooter;

package/src/components/FormLayout/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormRow = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const merge_1 = tslib_1.__importDefault(require("../../Utilities/utils/merge"));
@@ -16,7 +17,7 @@ const defaultColumns = {
         },
     },
 };
-const PLACEHOLDER = React.createElement("div", null);
+const PLACEHOLDER = (0, jsx_runtime_1.jsx)("div", {});
 const FormLayout = (props) => {
     let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Flex_1.Box, sizes = ['auto', '1fr'], gridColumnGap = 'calc(var(--ab-base-space) * 2)', gridRowGap = 'calc(var(--ab-base-space) * 2)', style, childrenToColumns = true, ...boxProps } = props;
     columns = columns.map((c) => {
@@ -48,12 +49,11 @@ const FormLayout = (props) => {
         rowGap: gridRowGap,
         columnGap: gridColumnGap,
     };
-    return (React.createElement(FormLayoutContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(FormLayoutContext.Provider, { value: {
             columns,
             currentRow: 0,
             childrenToColumns,
-        } },
-        React.createElement(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-FormLayout'), style: { ...style, ...formStyle } })));
+        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-FormLayout'), style: { ...style, ...formStyle } }) }));
 };
 const FormRow = (props) => {
     const ctx = (0, react_1.useContext)(FormLayoutContext);
@@ -73,15 +73,15 @@ const FormRow = (props) => {
         }
         if (props.as != null || column.component != null) {
             const Cmp = column.component;
-            value = (React.createElement(Cmp, { "data-name": props.dataName, style: {
+            value = ((0, jsx_runtime_1.jsx)(Cmp, { "data-name": props.dataName, style: {
                     ...column.style,
                     gridColumn: columnIndex + 1,
                     gridRow: rowIndex + 1,
-                }, className: column.className }, value));
+                }, className: column.className, children: value }));
         }
         return typeof value === 'string' ? value : React.cloneElement(value, { key: columnName });
     });
-    return React.createElement(React.Fragment, null, columnValues);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: columnValues });
 };
 exports.FormRow = FormRow;
 exports.default = FormLayout;

package/src/components/HelpBlock/index.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpBlockClassName = exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Flex_1 = require("../Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-HelpBlock';
 exports.HelpBlockClassName = (0, clsx_1.default)('twa:text-2/relaxed twa:p-2 twa:rounded-standard', 'twa:bg-primarylight twa:text-primary-foreground', exports.baseClassName);
 const HelpBlock = (props) => {
-    return React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)(exports.HelpBlockClassName, props.className) });
+    return (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, clsx_1.default)(exports.HelpBlockClassName, props.className) });
 };
 exports.default = HelpBlock;

package/src/components/Icon/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableCustomIcon = exports.isAdaptableSystemIcon = exports.IconComponent = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("../icons");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const react_1 = require("react");
@@ -38,16 +38,16 @@ const IconComponent = (props) => {
         };
     }, [icon]);
     if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.allIcons) {
-        return (React.createElement(icons_1.Icon, { "aria-hidden": "true", name: icon.name, size: icon.size, style: icon.style, className: className }));
+        return ((0, jsx_runtime_1.jsx)(icons_1.Icon, { "aria-hidden": "true", name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
     if ((0, exports.isAdaptableCustomIcon)(icon)) {
         let width = icon.style?.width ?? 'var(--ab-cmp-icon__width)';
         let height = icon.style?.height ?? 'var(--ab-cmp-icon__height)';
         const iconStyle = icon.style ?? {};
-        return React.createElement("img", { src: icon.src, className: className, style: { height, width, ...iconStyle } });
+        return (0, jsx_runtime_1.jsx)("img", { src: icon.src, className: className, style: { height, width, ...iconStyle } });
     }
     if ((0, exports.isAdaptableElementIcon)(icon)) {
-        return (React.createElement("span", { ref: divRef, style: { display: 'none' }, "data-name": "adaptable-icon-placeholder" }));
+        return ((0, jsx_runtime_1.jsx)("span", { ref: divRef, style: { display: 'none' }, "data-name": "adaptable-icon-placeholder" }));
     }
     return null;
 };

package/src/components/IconSelector/IconSelector.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconSelector = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
 const Icon_1 = require("../Icon");
@@ -10,7 +11,7 @@ const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const Flex_1 = require("../Flex");
 const IconButton = (props) => {
-    return (react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon, children: props.children }));
 };
 const IconSelector = (props) => {
     const [query, setQuery] = react_1.default.useState('');
@@ -21,37 +22,25 @@ const IconSelector = (props) => {
         })
         : allIconsNames;
     const iconsElements = filteredIcons.map((iconName) => {
-        return (react_1.default.createElement(Flex_1.Flex, { key: iconName },
-            react_1.default.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsx)(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName }) }, iconName));
     });
     const customIconsElements = props.customIcons?.map((def) => {
-        return (react_1.default.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
-            react_1.default.createElement(Icon_1.IconComponent, { key: def.name, icon: def.icon })));
+        return ((0, jsx_runtime_1.jsx)(IconButton, { active: false, onClick: () => props.onChange(def.name), children: (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: def.icon }, def.name) }, def.name));
     });
-    const popup = (react_1.default.createElement(Flex_1.Box, { className: "ab-IconSelector__Popup" },
-        react_1.default.createElement(Flex_1.Box, { className: "twa:mb-2" },
-            react_1.default.createElement(Flex_1.Box, { className: "twa:mb-2 twa:text-4" }, "Select an Icon"),
-            react_1.default.createElement(AdaptableInput_1.default, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })),
-        react_1.default.createElement(Flex_1.Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap" },
-            iconsElements,
-            " ",
-            customIconsElements)));
+    const popup = ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-IconSelector__Popup", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2 twa:text-4", children: "Select an Icon" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap", children: [iconsElements, " ", customIconsElements] })] }));
     let value = 'No Icon Selected';
     if (props.value in icons_1.allIcons) {
-        value = (react_1.default.createElement(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
+        value = ((0, jsx_runtime_1.jsx)(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
     }
     else {
         const icon = props.customIcons?.find((def) => def.name === props.value);
         if (icon)
-            value = react_1.default.createElement(Icon_1.IconComponent, { icon: icon.icon });
+            value = (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: icon.icon });
     }
-    return (react_1.default.createElement(Flex_1.Flex, { className: "ab-IconSelector" },
-        react_1.default.createElement(OverlayTrigger_1.default, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
-            react_1.default.createElement(SimpleButton_1.default, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised" }, value)),
-        (props.clearable ?? true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
-                event.stopPropagation();
-                event.preventDefault();
-                props.onChange('');
-            }, variant: "text", icon: "close" }))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-IconSelector", children: [(0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300, children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised", children: value }) }), (props.clearable ?? true) && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    props.onChange('');
+                }, variant: "text", icon: "close" }))] }));
 };
 exports.IconSelector = IconSelector;

package/src/components/InfiniteTable/index.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfiniteTableGrid = InfiniteTableGrid;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const infinite_react_1 = require("@infinite-table/infinite-react");
 tslib_1.__exportStar(require("@infinite-table/infinite-react"), exports);
 const EnvVars_1 = require("../../EnvVars");
-const React = tslib_1.__importStar(require("react"));
 function InfiniteTableGrid(props) {
-    return (React.createElement(infinite_react_1.InfiniteTable, { sortable: false, rowHeight: '--ab-grid-row-height', draggableColumns: false, keyboardNavigation: false, ...props, licenseKey: EnvVars_1.INFINITE_TABLE_LICENSE_KEY }));
+    return ((0, jsx_runtime_1.jsx)(infinite_react_1.InfiniteTable, { sortable: false, rowHeight: '--ab-grid-row-height', draggableColumns: false, keyboardNavigation: false, ...props, licenseKey: EnvVars_1.INFINITE_TABLE_LICENSE_KEY }));
 }
 infinite_react_1.InfiniteTable.licenseKey = EnvVars_1.INFINITE_TABLE_LICENSE_KEY;

package/src/components/Input/NumberInput.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const index_1 = tslib_1.__importStar(require("./index"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
@@ -41,5 +42,5 @@ exports.NumberInput = React.forwardRef((props, ref) => {
         }
     }, [props.value, value]);
     const { noArrows, ...restOfProps } = props;
-    return (React.createElement(index_1.default, { ...restOfProps, ref: ref, className: (0, join_1.default)(noArrows ? `${index_1.baseClassName}--no-arrows` : '', props.className), value: value, onBlur: handleBlur, onChange: handleChange }));
+    return ((0, jsx_runtime_1.jsx)(index_1.default, { ...restOfProps, ref: ref, className: (0, join_1.default)(noArrows ? `${index_1.baseClassName}--no-arrows` : '', props.className), value: value, onBlur: handleBlur, onChange: handleChange }));
 });

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

@@ -5,6 +5,7 @@ export type InputProps = HTMLProps<HTMLInputElement> & {
     type?: string;
     disabled?: boolean;
     list?: any;
+    as?: React.ComponentType<any>;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/src/components/Input/index.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twUtils_1 = require("../twUtils");
+const utils_1 = require("../../lib/utils");
 exports.baseClassName = 'ab-Input';
 const Input = React.forwardRef((props, ref) => {
-    const { disabled, className, ...inputProps } = props;
+    const { disabled, className, as, ...inputProps } = props;
     let type = 'text';
     if (inputProps && inputProps.type) {
         type = inputProps.type;
@@ -15,9 +17,9 @@ const Input = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(Flex_1.Box, { as: "input", ref: ref, ...inputProps, type: type, disabled: disabled, className: (0, clsx_1.default)(className, exports.baseClassName, 'twa:min-h-input', type ? `${exports.baseClassName}--type-${type}` : '', disabled ? `${exports.baseClassName}--disabled` : '', {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: as ?? 'input', ref: ref, ...inputProps, type: type, disabled: disabled, className: (0, utils_1.cn)(exports.baseClassName, 'twa:min-h-input', 'twa:rounded-input', twUtils_1.targetOwn.focusOutline, type ? `${exports.baseClassName}--type-${type}` : '', disabled ? `${exports.baseClassName}--disabled` : '', {
             'twa:bg-(--ab-cmp-input__background)': !disabled,
             'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
-        }) }));
+        }, className) }));
 });
 exports.default = Input;

package/src/components/InputGroup/InputGroup.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputGroup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const InputGroup = ({ Component = 'div', children, ...rest }) => {
     const Comp = Component;
-    return (React.createElement(Comp, { ...rest, className: `ab-cmp-input-group ${rest.className ?? ''}` }, children));
+    return ((0, jsx_runtime_1.jsx)(Comp, { ...rest, className: `ab-cmp-input-group ${rest.className ?? ''}`, children: children }));
 };
 exports.InputGroup = InputGroup;