@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
 import { Icon } from '../../../components/icons';
 import { Box, Flex } from '../../../components/Flex';
@@ -6,24 +6,16 @@ import clsx from 'clsx';
 export function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
     const baseClassName = 'ab-ReorderDraggable';
-    return (React.createElement(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
-        React.createElement(DragDropProvider, null,
-            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column" },
-                React.createElement(DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    return (_jsx(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column", children: _jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column", children: _jsx(DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                         proxyElement.classList.add('twa:shadow-md');
                     }, onDrop: (sortedIndexes) => {
                         onChange(sortedIndexes.map((i) => order[i]));
-                    } }, (listDomProps) => (React.createElement("div", { ...listDomProps }, order.map((option, index) => {
-                    const identifier = toIdentifier(option);
-                    const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
-                    return (React.createElement(DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps, itemContext) => {
-                        const { onPointerDown, ...restDomProps } = itemDomProps;
-                        return (React.createElement(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx(`${baseClassName}__option`, index ? 'twa:mt-1' : 'twa:mt-0', 'twa:bg-primary twa:p-2', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e) },
-                            React.createElement(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
-                                reorderable && !disabled ? (React.createElement(Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
-                                    React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Box, { className: "twa:mr-3" },
-                                    React.createElement(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
-                                props.renderOption(option, index))));
-                    }));
-                }))))))));
+                    }, children: (listDomProps) => (_jsx("div", { ...listDomProps, children: order.map((option, index) => {
+                            const identifier = toIdentifier(option);
+                            const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
+                            return (_jsx(DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps, itemContext) => {
+                                    const { onPointerDown, ...restDomProps } = itemDomProps;
+                                    return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx(`${baseClassName}__option`, index ? 'twa:mt-1' : 'twa:mt-0', 'twa:bg-primary twa:p-2', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e), children: _jsxs(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center", children: [reorderable && !disabled ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : (_jsx(Box, { className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }) })), props.renderOption(option, index)] }) }));
+                                } }, identifier));
+                        }) })) }) }) }) }));
 }

package/src/View/Components/Selectors/BulkUpdateValueSelector.js

@@ -1,6 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useCallback } from 'react';
-import DropdownButton from '../../../components/DropdownButton';
 import UIHelper from '../../UIHelper';
 import AdaptableInput from '../AdaptableInput';
 import { PermittedValuesSelector } from './PermittedValuesSelector';
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import { Box, Flex } from '../../../components/Flex';
 import { Icon } from '../../../components/icons';
 import { InputGroup } from '../../../components/InputGroup';
+import { NewDropdownButton } from '../../../components/NewDropdownButton';
 export const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
     const adaptable = useAdaptable();
@@ -18,8 +19,7 @@ export const BulkUpdateValueSelector = (props) => {
     // TODO = this seems to be called whenever we edit a cell
     // which is then triggering a get all values
     // not sure that we need to
-    const permittedValueSelector = (React.createElement(Box, { className: 'twa:flex-1' },
-        React.createElement(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: useCallback(({ currentSearchValue }) => {
+    const permittedValueSelector = (_jsx(Box, { className: 'twa:flex-1', children: _jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: 'Select value', loadValues: useCallback(({ currentSearchValue }) => {
                 if (!columnId || !props.selectedGridCells.length) {
                     return Promise.resolve([]);
                 }
@@ -34,24 +34,20 @@ export const BulkUpdateValueSelector = (props) => {
                 props.selectedGridCells?.[0]?.primaryKeyValue,
             ]), onChange: (value) => {
                 props.onColumnValueChange(value || null);
-            } })));
-    const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
+            } }) }));
+    const input = (_jsx(AdaptableInput, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
             ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
             ? UIHelper.getPlaceholderForDataType(props.selectedColumn.dataType)
             : 'Enter Value', autoFocus: true, disabled: props.disabled, className: "twa:w-full", value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
-    return (React.createElement(Flex, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style }, isDateType ? (React.createElement(React.Fragment, null,
-        React.createElement(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full" },
-            React.createElement(DropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, columns: ['label'], variant: "outlined", tone: "neutral", items: [
-                    { label: 'New', icon: React.createElement(Icon, { name: "edit" }), onClick: () => setValueType('new') },
-                    {
-                        label: 'Existing',
-                        icon: React.createElement(Icon, { name: "grid" }),
-                        onClick: () => setValueType('existing'),
-                    },
-                ] },
-                React.createElement(React.Fragment, null, valueType === 'existing' ? React.createElement(Icon, { name: "grid" }) : React.createElement(Icon, { name: "edit" }))),
-            valueType === 'new' ? input : permittedValueSelector))) : (permittedValueSelector)));
+    return (_jsx(Flex, { className: clsx('twa:overflow-visible twa:max-w-full', props.className), style: props.style, children: isDateType ? (_jsx(_Fragment, { children: _jsxs(InputGroup, { Component: Flex, "data-id": "bulk-update-input-wrapper", className: "twa:w-full twa:gap-0.5", children: [_jsx(NewDropdownButton, { "aria-label": "Bulk Update Value Selector", "data-id": "bulk-update-value-type-selector", "data-value": valueType, variant: "outlined", items: [
+                            { label: 'New', icon: _jsx(Icon, { name: "edit" }), onClick: () => setValueType('new') },
+                            {
+                                label: 'Existing',
+                                icon: _jsx(Icon, { name: "grid" }),
+                                onClick: () => setValueType('existing'),
+                            },
+                        ], children: _jsx(_Fragment, { children: valueType === 'existing' ? _jsx(Icon, { name: "grid" }) : _jsx(Icon, { name: "edit" }) }) }), valueType === 'new' ? input : permittedValueSelector] }) })) : (permittedValueSelector) }));
 };

package/src/View/Components/Selectors/ColumnSelector.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { SelectProps } from '../../../components/Select';
 import { AdaptableColumn } from '../../../types';
 export type ColumnSelectorProps<IsMulti extends boolean = false> = {
+    className?: string;
     type?: AdaptableColumn['dataType'];
     isMulti?: IsMulti;
     disabled?: boolean;
-    menuPosition?: SelectProps<any>['menuPosition'];
     filterColumn?: (column: AdaptableColumn) => boolean;
     value?: IsMulti extends true ? string[] : string;
     onChange: (column: IsMulti extends true ? string[] : string) => void;

package/src/View/Components/Selectors/ColumnSelector.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { Select } from '../../../components/Select';
 import { useAdaptable } from '../../AdaptableContext';
+import { MultiCombobox, SingleCombobox, } from '../../../components/Combobox';
 export const ColumnSelector = function (props) {
     const { api } = useAdaptable();
     const columns = React.useMemo(() => {
@@ -9,12 +10,11 @@ export const ColumnSelector = function (props) {
     const getColumn = (columnId) => columns.find((c) => c.columnId === columnId);
     const options = columns
         .map((column) => {
-        let label = column.friendlyName ?? column.columnId;
-        if (props.renderOption) {
-            label = props.renderOption(column);
-        }
+        const textLabel = column.friendlyName ?? column.columnId;
+        const label = props.renderOption ? props.renderOption(column) : textLabel;
         return {
             label,
+            textLabel,
             value: column.columnId,
         };
     })
@@ -24,7 +24,21 @@ export const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select, { "data-name": "column-selector", searchable: 'inline', disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: props.placeholder ?? 'Select Column', onChange: (colId) => {
+    const comboBoxProps = {
+        ['data-name']: 'column-selector',
+        disabled: props.disabled,
+        className: props.className,
+        virtualized: true,
+        items: options,
+        showClear: false,
+        onValueChange: (colId) => {
             props.onChange(colId);
-        }, options: options }));
+        },
+        value: props.value,
+        placeholder: props.placeholder ?? 'Select Column',
+    };
+    if (props.isMulti) {
+        return _jsx(MultiCombobox, { ...comboBoxProps });
+    }
+    return _jsx(SingleCombobox, { ...comboBoxProps });
 };

package/src/View/Components/Selectors/FieldSelector.d.ts

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { SelectProps } from '../../../components/Select';
 import { AdaptableColumnDataType } from '../../../types';
 interface FieldSelectorProps {
     value: string;
     onChange: (fieldExp: string) => void;
     type?: AdaptableColumnDataType;
     disabled?: boolean;
-    menuPosition?: SelectProps<any>['menuPosition'];
     placeholder?: string;
 }
 export declare const FieldSelector: React.FunctionComponent<FieldSelectorProps>;

package/src/View/Components/Selectors/FieldSelector.js

@@ -1,17 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Select } from '../../../components/Select';
 import { useAdaptable } from '../../AdaptableContext';
+import { SingleCombobox } from '../../../components/Combobox';
 export const FieldSelector = (props) => {
     const { api } = useAdaptable();
     const fields = React.useMemo(() => {
         return api.expressionApi.internalApi.getFieldsOfType(props.type);
-    }, []);
+    }, [props.type, api.expressionApi.internalApi]);
     const options = fields.map((field) => ({
         label: field.label ?? field.name,
         value: field.name,
     }));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Select, { "data-name": "column-selector", searchable: 'inline', disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onChange: (fieldValue) => {
+    return (_jsx(_Fragment, { children: _jsx(SingleCombobox, { "data-name": "column-selector", disabled: props.disabled, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onValueChange: (fieldValue) => {
                 props.onChange(fieldValue);
-            }, options: options })));
+            }, items: options }) }));
 };

package/src/View/Components/Selectors/PermittedValuesSelector.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SelectProps } from '../../../components/Select';
 import { InFilterValue } from '../../../AdaptableOptions/FilterOptions';
 export type ValueType = number | string | Date;
 interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
@@ -14,7 +13,6 @@ interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends
     className?: string;
     disabled?: boolean;
     placeholder?: string;
-    size?: SelectProps<Value, IsMulti>['size'];
     loadValues?: (options: {
         currentSearchValue: string;
     }) => Promise<InFilterValue[]>;

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { Select } from '../../../components/Select';
 import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
 import { useAdaptable } from '../../AdaptableContext';
 import { useCallback } from 'react';
+import { MultiCombobox, SingleCombobox, } from '../../../components/Combobox';
 export const PermittedValuesSelector = function (props) {
     const adaptable = useAdaptable();
     const [refetchKey, setRefetchKey] = React.useState(0);
@@ -98,5 +99,33 @@ export const PermittedValuesSelector = function (props) {
             reload();
         }
     };
-    return (React.createElement(Select, { "aria-label": "Permitted Values Selector", searchable: props.searchable ?? 'menulist', size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
+    const comboBoxProps = {
+        ['aria-label']: 'Permitted Values Selector',
+        searchable: props.searchable ?? 'menulist',
+        className: props.className,
+        disabled: props.disabled,
+        placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'),
+        ['data-name']: 'permitted-values-selector',
+        items: options,
+        onInputValueChange: onInputChange,
+        onValueChange: handleOnChange,
+        value: props.value ?? '',
+        onOpenChange: (open) => {
+            if (open) {
+                reload();
+            }
+        },
+        isCreatable,
+        isLoading,
+        virtualized: true,
+        resizable: true,
+        showClear: true,
+        // showClear: false,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+    };
+    if (props.isMulti) {
+        return _jsx(MultiCombobox, { ...comboBoxProps });
+    }
+    return (_jsx(SingleCombobox, { ...comboBoxProps }));
 };

package/src/View/Components/SharedProps/EditableConfigEntityState.js

@@ -1,4 +1,3 @@
-/// <reference path="../../typings/.d.ts" />
 export var WizardStatus;
 (function (WizardStatus) {
     WizardStatus["New"] = "New";

package/src/View/Components/SharedProps/ModuleViewPopupProps.d.ts

@@ -14,7 +14,7 @@ export interface ModuleViewPopupProps<View> extends BaseProps<View> {
 }
 export interface ModuleParams {
     column?: AdaptableColumn;
-    action?: 'New' | 'Edit' | 'Clone';
+    action?: 'New' | 'NewSchedule' | 'Edit' | 'Clone';
     value?: any;
     primaryKeyValues?: any[];
     maxWidth?: number;

package/src/View/Components/StyleComponent.d.ts

@@ -10,8 +10,6 @@ export interface StyleComponentProps {
     hidePreview?: boolean;
     headerText?: string;
     Style: AdaptableStyle;
-    /** @deprecated No longer used - font size is always displayed as dropdown */
-    showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;
 }
 export declare const StyleComponent: React.FC<StyleComponentProps>;

package/src/View/Components/StyleComponent.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import clsx from 'clsx';
 import { CheckBox } from '../../components/CheckBox';
@@ -6,7 +6,6 @@ import { ColorPicker } from '../../components/ColorPicker';
 import HelpBlock from '../../components/HelpBlock';
 import Panel from '../../components/Panel';
 import { Tabs } from '../../components/Tabs';
-import { Select } from '../../components/Select';
 import { StylePreview } from '../../components/StylePreview';
 import { Toggle, ToggleGroup } from '../../components/Toggle';
 import { FontSize, FontStyle, FontWeight } from '../../AdaptableState/Common/Enums';
@@ -17,6 +16,7 @@ import AdaptableInput from './AdaptableInput';
 import { Box, Flex } from '../../components/Flex';
 import { twMerge } from '../../twMerge';
 import { Card } from '../../components/Card';
+import { SingleSelect } from '../../components/NewSelect';
 export const StyleComponent = (props) => {
     const [showClassName, setShowClassName] = useState(StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
     const componentStyle = props.Style;
@@ -148,49 +148,29 @@ export const StyleComponent = (props) => {
     const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
     const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
     const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
-    return (React.createElement(Cmp, { ...cmpProps, className: twMerge(clsx('ab-StyleComponent twa:text-3', props.className)) },
-        ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
-            React.createElement(Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
-            React.createElement(Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
-            React.createElement(Tabs.Content, { value: "classname" },
-                React.createElement(Card, { shadow: false },
-                    React.createElement(Card.Title, null, "CSS Class Name"),
-                    React.createElement(Card.Body, { gap: 2, className: "twa:p-1" },
-                        React.createElement(HelpBlock, null, "Select a CSS Class Name"),
-                        React.createElement(Box, { className: "twa:max-w-[15rem]" },
-                            React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
-                                    ? []
-                                    : styleClassNames.map((item) => ({
-                                        label: item,
-                                        value: item,
-                                    })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
-                        React.createElement(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))),
-            React.createElement(Tabs.Content, { value: "createstyle" },
-                React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
-                    React.createElement(Card, { shadow: false, className: "twa:flex-1" },
-                        React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
-                            React.createElement(Card.Title, { className: "twa:col-span-2" },
-                                colourSpellingVariant,
-                                " & Border Properties"),
-                            React.createElement(HelpBlock, { className: "twa:col-span-2" },
-                                "Set ",
-                                coloursSpellingVariant,
-                                " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
-                                coloursSpellingVariant),
-                            React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
-                                "Back ",
-                                colourSpellingVariant),
-                            React.createElement(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
-                            React.createElement(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
-                                "Fore ",
-                                colourSpellingVariant),
-                            React.createElement(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
-                            React.createElement(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
-                                "Border ",
-                                colourSpellingVariant),
-                            React.createElement(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
-                            React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
-                            React.createElement(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+    return (_jsxs(Cmp, { ...cmpProps, className: twMerge(clsx('ab-StyleComponent twa:text-3', props.className)), children: [ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (_jsxs(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname'), children: [_jsx(Tabs.Tab, { "data-name": "show-class-name", value: "classname", children: "Use Style Class Name" }), _jsx(Tabs.Tab, { "data-name": "create-style", value: "createstyle", children: "Create Style" }), _jsx(Tabs.Content, { value: "classname", children: _jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "CSS Class Name" }), _jsxs(Card.Body, { gap: 2, className: "twa:p-1", children: [_jsx(HelpBlock, { children: "Select a CSS Class Name" }), _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(SingleSelect, { items: ArrayExtensions.IsNullOrEmpty(styleClassNames)
+                                                    ? []
+                                                    : styleClassNames.map((item) => ({
+                                                        label: item,
+                                                        value: item,
+                                                    })), value: componentStyle.ClassName, onValueChange: (value) => onStyleClassNameChanged(value) }) }), _jsx(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn", children: 'Please ensure that the styles listed are in the current stylesheet' })] })] }) }), _jsx(Tabs.Content, { value: "createstyle", children: _jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: _jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(HelpBlock, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), _jsxs(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked), children: ["Fore ", colourSpellingVariant] }), _jsx(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked), children: ["Border ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }), _jsx("span", { className: "twa:row-start-6", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+                                                const number = Number(event.target.value);
+                                                if (isNaN(number)) {
+                                                    onBorderRadiusChange(0);
+                                                }
+                                                else {
+                                                    onBorderRadiusChange(number);
+                                                }
+                                            } }), _jsx(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), _jsx(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), _jsx("span", { children: "Font Style" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), _jsx(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), _jsx("span", { children: "Text Decoration" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), _jsx(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), _jsx(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), _jsx("span", { children: "Font Size" }), _jsx(Flex, { flexDirection: "row", alignItems: "center", children: _jsx(SingleSelect, { placeholder: "Default", items: [
+                                                    {
+                                                        label: 'Default',
+                                                        value: '',
+                                                    },
+                                                    ...EnumExtensions.getNames(FontSize).map((enumName) => ({
+                                                        label: enumName,
+                                                        value: enumName,
+                                                    })),
+                                                ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { children: "Alignment" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) }) })] })) : (_jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: _jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(HelpBlock, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), _jsxs(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked), children: ["Fore ", colourSpellingVariant] }), _jsx(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked), children: ["Border ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }), _jsx("span", { className: "twa:row-start-6", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
                                     const number = Number(event.target.value);
                                     if (isNaN(number)) {
                                         onBorderRadiusChange(0);
@@ -198,21 +178,7 @@ export const StyleComponent = (props) => {
                                     else {
                                         onBorderRadiusChange(number);
                                     }
-                                } }),
-                            React.createElement(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
-                            React.createElement(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
-                            React.createElement("span", null, "Font Style"),
-                            React.createElement(ToggleGroup, null,
-                                React.createElement(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
-                                React.createElement(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
-                            React.createElement("span", null, "Text Decoration"),
-                            React.createElement(ToggleGroup, null,
-                                React.createElement(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                                React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                                React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
-                            React.createElement("span", null, "Font Size"),
-                            React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(Select, { placeholder: "Default", options: [
+                                } }), _jsx(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), _jsx(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), _jsx("span", { children: "Font Style" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), _jsx(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), _jsx("span", { children: "Text Decoration" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), _jsx(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), _jsx(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), _jsx("span", { children: "Font Size" }), _jsx(Flex, { flexDirection: "row", alignItems: "center", children: _jsx(SingleSelect, { placeholder: "Default", items: [
                                         {
                                             label: 'Default',
                                             value: '',
@@ -221,75 +187,5 @@ export const StyleComponent = (props) => {
                                             label: enumName,
                                             value: enumName,
                                         })),
-                                    ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
-                            React.createElement("span", null, "Alignment"),
-                            React.createElement(ToggleGroup, null,
-                                React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
-                                React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
-                                React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
-            React.createElement(Card, { shadow: false, className: "twa:flex-1" },
-                React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
-                    React.createElement(Card.Title, { className: "twa:col-span-2" },
-                        colourSpellingVariant,
-                        " & Border Properties"),
-                    React.createElement(HelpBlock, { className: "twa:col-span-2" },
-                        "Set ",
-                        coloursSpellingVariant,
-                        " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
-                        coloursSpellingVariant),
-                    React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
-                        "Back ",
-                        colourSpellingVariant),
-                    React.createElement(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
-                    React.createElement(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
-                        "Fore ",
-                        colourSpellingVariant),
-                    React.createElement(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
-                    React.createElement(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
-                        "Border ",
-                        colourSpellingVariant),
-                    React.createElement(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
-                    React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
-                    React.createElement(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
-                            const number = Number(event.target.value);
-                            if (isNaN(number)) {
-                                onBorderRadiusChange(0);
-                            }
-                            else {
-                                onBorderRadiusChange(number);
-                            }
-                        } }),
-                    React.createElement(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
-                    React.createElement(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
-                    React.createElement("span", null, "Font Style"),
-                    React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
-                        React.createElement(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
-                    React.createElement("span", null, "Text Decoration"),
-                    React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                        React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                        React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
-                    React.createElement("span", null, "Font Size"),
-                    React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                        React.createElement(Select, { placeholder: "Default", options: [
-                                {
-                                    label: 'Default',
-                                    value: '',
-                                },
-                                ...EnumExtensions.getNames(FontSize).map((enumName) => ({
-                                    label: enumName,
-                                    value: enumName,
-                                })),
-                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
-                    React.createElement("span", null, "Alignment"),
-                    React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
-                        React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
-                        React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
-        !props.hidePreview && (React.createElement(Card, { shadow: false },
-            React.createElement(Card.Title, null, "Preview"),
-            React.createElement(Card.Body, { className: "twa:grid twa:place-items-center" },
-                React.createElement(Box, { className: "twa:p-2 twa:inline-block" },
-                    React.createElement(StylePreview, { className: "twa:mt-0", styleObject: componentStyle })))))));
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { children: "Alignment" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "Preview" }), _jsx(Card.Body, { className: "twa:grid twa:place-items-center", children: _jsx(Box, { className: "twa:p-2 twa:inline-block", children: _jsx(StylePreview, { className: "twa:mt-0", styleObject: componentStyle }) }) })] }))] }));
 };

package/src/View/Components/StyleVisualItem.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-/// <reference path="../../typings/.d.ts" />
 import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
 import { FontWeight, FontStyle } from '../../AdaptableState/Common/Enums';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
@@ -13,7 +13,7 @@ export class StyleVisualItem extends React.Component {
             : 'Style';
         let styleVisualisation;
         if (this.props.Style.ClassName) {
-            styleVisualisation = React.createElement("div", null, 'CSS Class: ' + this.props.Style.ClassName);
+            styleVisualisation = _jsx("div", { children: 'CSS Class: ' + this.props.Style.ClassName });
         }
         else {
             let backColorForStyle = this.props.Style.BackColor != undefined ? this.props.Style.BackColor : null;
@@ -22,7 +22,7 @@ export class StyleVisualItem extends React.Component {
             let fontWeightForStyle = this.props.Style.FontWeight == FontWeight.Bold ? 'bold' : 'normal';
             let fontStyleForStyle = this.props.Style.FontStyle == FontStyle.Italic ? 'italic' : 'normal';
             let fontSizeForStyle = EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
-            styleVisualisation = (React.createElement("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
+            styleVisualisation = (_jsx("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
                     textAlign: 'center',
                     margin: '2px',
                     padding: '3px',
@@ -33,7 +33,7 @@ export class StyleVisualItem extends React.Component {
                     fontWeight: fontWeightForStyle,
                     fontStyle: fontStyleForStyle,
                     fontSize: fontSizeForStyle,
-                } }, styleText));
+                }, children: styleText }));
         }
         return styleVisualisation;
     }

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ValueSelector } from '../ValueSelector';
 import { useAdaptable } from '../../AdaptableContext';
 import { TagList } from '../../../components/Tag/Tag';
@@ -8,12 +8,12 @@ export const TagValueSelector = (props) => {
         return api.internalApi.getAvailableTags() ?? [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
-    return (React.createElement(ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
+    return (_jsx(ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
             onChange(selectedTagsIds.map((id) => selectedTagsMap.get(id)));
         }, toIdentifier: (tag) => api.internalApi.getLabelForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag) }));
 };
 export const TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
     const { api } = useAdaptable();
-    return React.createElement(TagList, { tags: tags.map((tag) => api.internalApi.getLabelForTag(tag)) });
+    return _jsx(TagList, { tags: tags.map((tag) => api.internalApi.getLabelForTag(tag)) });
 };