@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.d.ts

@@ -1,5 +1,18 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+/**
+ * The title displayed in the wizard header. Switches from "Styled
+ * Column" to the specific type ("Gradient Column", "Percent Bar
+ * Column", …) once a type has been picked, so the user always knows
+ * which kind of column they're configuring.
+ */
+export declare const getStyledColumnWizardTitle: (data: StyledColumn) => string;
+export declare const renderStyledColumnSettingsSummary: (data: StyledColumn) => React.JSX.Element;
+/**
+ * Backwards-compatible export: the wizard previously imported
+ * `renderStyledColumnTypeSummary`. The settings step now also covers Name,
+ * but to keep external imports happy we re-export under the old alias.
+ */
 export declare const renderStyledColumnTypeSummary: (data: StyledColumn) => React.JSX.Element;
 export interface StyledColumnWizardTypeSectionProps {
     onChange: (styledColumn: StyledColumn) => void;

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.js

@@ -1,32 +1,90 @@
-import * as React from 'react';
-import { Tabs } from '../../../components/Tabs';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import Input from '../../../components/Input';
 import { Tag } from '../../../components/Tag';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useAdaptable } from '../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { TypeRadio } from '../../Wizard/TypeRadio';
 import { Flex, Box } from '../../../components/Flex';
-export const renderStyledColumnTypeSummary = (data) => {
-    let type = null;
-    if (data.GradientStyle) {
-        type = 'Gradient Column';
-    }
-    else if (data.PercentBarStyle) {
-        type = 'Percent Bar';
-    }
-    else if (data.SparklineStyle) {
-        type = 'Spark Line';
-    }
-    else if (data.BadgeStyle) {
-        type = 'Badge';
-    }
-    return (React.createElement(Box, { className: "twa:pr-2 twa:py-2" },
-        "Type ",
-        React.createElement(Tag, null, type)));
+const TYPE_LABELS = {
+    Gradient: 'Gradient Column',
+    PercentBar: 'Percent Bar',
+    Sparkline: 'Spark Line',
+    Badge: 'Badge',
+    BulletChart: 'Bullet Chart',
+    Rating: 'Rating',
+    RangeBar: 'Range Bar',
+    Icon: 'Icon',
 };
+/**
+ * Wizard-header title for each Styled Column type. Reads as a complete
+ * subject so it works as a top-level title in the wizard frame
+ * ("Gradient Column" rather than just "Gradient"). Falls back to
+ * "Styled Column" before a type has been chosen.
+ */
+const TYPE_WIZARD_TITLES = {
+    Gradient: 'Gradient Column',
+    PercentBar: 'Percent Bar Column',
+    Sparkline: 'Sparkline Column',
+    Badge: 'Badge Column',
+    BulletChart: 'Bullet Chart Column',
+    Rating: 'Rating Column',
+    RangeBar: 'Range Bar Column',
+    Icon: 'Icon Column',
+};
+/**
+ * Resolves the Styled Column type from the discriminator properties. Used by
+ * the Settings-step summary to show a human-readable type tag.
+ */
+const getTypeLabel = (data) => {
+    if (data.GradientStyle)
+        return 'Gradient';
+    if (data.PercentBarStyle)
+        return 'PercentBar';
+    if (data.SparklineStyle)
+        return 'Sparkline';
+    if (data.BadgeStyle)
+        return 'Badge';
+    if (data.BulletChartStyle)
+        return 'BulletChart';
+    if (data.RatingStyle)
+        return 'Rating';
+    if (data.RangeBarStyle)
+        return 'RangeBar';
+    if (data.IconStyle)
+        return 'Icon';
+    return null;
+};
+/**
+ * The title displayed in the wizard header. Switches from "Styled
+ * Column" to the specific type ("Gradient Column", "Percent Bar
+ * Column", …) once a type has been picked, so the user always knows
+ * which kind of column they're configuring.
+ */
+export const getStyledColumnWizardTitle = (data) => {
+    const typeKey = getTypeLabel(data);
+    return typeKey ? TYPE_WIZARD_TITLES[typeKey] : 'Styled Column';
+};
+export const renderStyledColumnSettingsSummary = (data) => {
+    const typeKey = getTypeLabel(data);
+    return (_jsxs(Box, { className: "twa:pr-2 twa:py-2", children: [_jsxs(Box, { className: "twa:mt-1", children: ["Name ", _jsx(Tag, { children: data.Name || '(none)' })] }), _jsxs(Box, { className: "twa:mt-2", children: ["Type ", _jsx(Tag, { children: typeKey ? TYPE_LABELS[typeKey] : '(none)' })] })] }));
+};
+/**
+ * Backwards-compatible export: the wizard previously imported
+ * `renderStyledColumnTypeSummary`. The settings step now also covers Name,
+ * but to keep external imports happy we re-export under the old alias.
+ */
+export const renderStyledColumnTypeSummary = renderStyledColumnSettingsSummary;
 export const StyledColumnWizardTypeSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
+    const onNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
     const handleTypeChange = (type) => {
         const newStyledColumn = {
             ...data,
@@ -35,6 +93,10 @@ export const StyledColumnWizardTypeSection = (props) => {
         delete newStyledColumn.PercentBarStyle;
         delete newStyledColumn.SparklineStyle;
         delete newStyledColumn.BadgeStyle;
+        delete newStyledColumn.BulletChartStyle;
+        delete newStyledColumn.RatingStyle;
+        delete newStyledColumn.RangeBarStyle;
+        delete newStyledColumn.IconStyle;
         switch (type) {
             case 'gradient':
                 newStyledColumn.GradientStyle = {};
@@ -54,16 +116,28 @@ export const StyledColumnWizardTypeSection = (props) => {
                     Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
                 };
                 break;
+            case 'bullet':
+                newStyledColumn.BulletChartStyle = {};
+                break;
+            case 'rating':
+                newStyledColumn.RatingStyle = {};
+                break;
+            case 'rangeBar':
+                // Range Bar requires Min and Max — seed sensible defaults so the
+                // wizard's Style step opens with a valid configuration.
+                newStyledColumn.RangeBarStyle = {
+                    Min: 'Col-Min',
+                    Max: 'Col-Max',
+                };
+                break;
+            case 'icon':
+                newStyledColumn.IconStyle = {
+                    Mappings: [],
+                };
+                break;
         }
         newStyledColumn.ColumnId = null;
         props.onChange(newStyledColumn);
     };
-    return (React.createElement(Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full" },
-        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
-            React.createElement(Tabs.Tab, null, "Type"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }),
-                React.createElement(TypeRadio, { text: "Percent Bar", description: "Display a coloured Bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }),
-                adaptable.api.styledColumnApi.canDisplaySparklines() && (React.createElement(TypeRadio, { text: "Sparkline", description: "Render the column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparklineStyle), onClick: () => handleTypeChange('sparkline') })),
-                React.createElement(TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') })))));
+    return (_jsxs(Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:p-2", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium twa:mb-3", children: "Settings" }), _jsx(Flex, { flexDirection: "row", className: "twa:mb-4", children: _jsx(FormLayout, { className: "twa:max-w-[420px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "styled-column-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }), _jsx(Box, { className: "twa:text-5 twa:font-medium twa:mb-2", children: "Type" }), _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') }), _jsx(TypeRadio, { text: "Rating", description: "Render values as row of icons (or stars, hearts etc.) (Numeric Columns)", checked: Boolean(data.RatingStyle), onClick: () => handleTypeChange('rating') }), _jsx(TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }), _jsx(TypeRadio, { text: "Percent Bar", description: "Display a coloured Bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }), _jsx(TypeRadio, { text: "Bullet Chart", description: "Show a bar with target marker and qualitative bands per cell (Numeric Columns)", checked: Boolean(data.BulletChartStyle), onClick: () => handleTypeChange('bullet') }), _jsx(TypeRadio, { text: "Range Bar", description: "Show where values sit between Min & Max (per-row or column) (Numeric Columns)", checked: Boolean(data.RangeBarStyle), onClick: () => handleTypeChange('rangeBar') }), _jsx(TypeRadio, { text: "Icon", description: "Map cell values to icons (e.g. flag for country) (All Columns)", checked: Boolean(data.IconStyle), onClick: () => handleTypeChange('icon') }), _jsx(TypeRadio, { text: "Sparkline", description: "Render Column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparklineStyle), disabled: !adaptable.api.styledColumnApi.canDisplaySparklines(), disabledTooltip: "Requires the AG Grid Sparklines module to be registered.", onClick: () => handleTypeChange('sparkline') })] })] }));
 };

package/src/View/SystemStatus/SystemStatusEntityRow.js

@@ -1,3 +1,4 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { AdaptableObjectRow } from '../Components/AdaptableObjectRow';
 import UIHelper from '../UIHelper';
@@ -10,14 +11,9 @@ export class SystemStatusEntityRow extends React.Component {
             .adaptableObject;
         let messageTypeColor = UIHelper.getColorByMessageType(systemStatus?.statusType ?? 'Success');
         let colItems = cloneObject(this.props.colItems);
-        colItems[0].Content = systemStatus ? (React.createElement("details", null,
-            React.createElement(Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: join('ab-DashboardToolbar__SystemStatus__text', systemStatus.statusFurtherInformation &&
-                    'ab-DashboardToolbar__SystemStatus__text--expandable'), style: { backgroundColor: messageTypeColor }, alignItems: "center", as: "summary" },
-                systemStatus.statusMessage,
-                " ",
-                systemStatus.statusFurtherInformation ? '...' : ''),
-            systemStatus.statusFurtherInformation ? (React.createElement(Box, { className: "ab-DashboardToolbar__SystemStatus__further-information twa:m-2" }, systemStatus.statusFurtherInformation)) : null)) : null;
+        colItems[0].Content = systemStatus ? (_jsxs("details", { children: [_jsxs(Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: join('ab-DashboardToolbar__SystemStatus__text', systemStatus.statusFurtherInformation &&
+                        'ab-DashboardToolbar__SystemStatus__text--expandable'), style: { backgroundColor: messageTypeColor }, alignItems: "center", as: "summary", children: [systemStatus.statusMessage, " ", systemStatus.statusFurtherInformation ? '...' : ''] }), systemStatus.statusFurtherInformation ? (_jsx(Box, { className: "ab-DashboardToolbar__SystemStatus__further-information twa:m-2", children: systemStatus.statusFurtherInformation })) : null] })) : null;
         colItems[1].Content = systemStatus.timestamp.toLocaleString();
-        return React.createElement(AdaptableObjectRow, { colItems: colItems });
+        return _jsx(AdaptableObjectRow, { colItems: colItems });
     }
 }

package/src/View/SystemStatus/SystemStatusPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
@@ -22,13 +23,12 @@ class SystemStatusPopupComponent extends React.Component {
         this.props.onSystemStatusMessageInfoDeleteAll();
     }
     render() {
-        let clearAllButton = (React.createElement(SimpleButton, { onClick: () => this.onSystemStatusMessageInfoDeleteAll(), tooltip: "Clear All", tone: "neutral", variant: "raised", accessLevel: this.props.accessLevel, disabled: ArrayExtensions.IsNullOrEmpty(this.props.SystemStatusMessages) }, "Delete All Messages"));
+        let clearAllButton = (_jsx(SimpleButton, { onClick: () => this.onSystemStatusMessageInfoDeleteAll(), tooltip: "Clear All", tone: "neutral", variant: "raised", accessLevel: this.props.accessLevel, disabled: ArrayExtensions.IsNullOrEmpty(this.props.SystemStatusMessages), children: "Delete All Messages" }));
         const messages = ArrayExtensions.sortArrayWithProperty(SortOrder.Desc, this.props.SystemStatusMessages, 'Timestamp').map((smi, index) => {
             const accessLevel = AdaptableHelper.getAccessLevelForObject(smi, this.props.accessLevel);
-            return (React.createElement(SystemStatusEntityRow, { adaptableObject: smi, key: 'smi' + index, onEdit: null, moduleInfo: this.props.moduleInfo, colItems: colItems, api: this.props.api, accessLevel: accessLevel, teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: null, onShare: null }));
+            return (_jsx(SystemStatusEntityRow, { adaptableObject: smi, onEdit: null, moduleInfo: this.props.moduleInfo, colItems: colItems, api: this.props.api, accessLevel: accessLevel, teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: null, onShare: null }, 'smi' + index));
         });
-        return (React.createElement(PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() }, ArrayExtensions.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (React.createElement(Box, { className: "ab-SystemStatus-Popup-List twa:p-2" },
-            React.createElement(AdaptableObjectCollection, { colItems: colItems, items: messages })))));
+        return (_jsx(PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: ArrayExtensions.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (_jsx(Box, { className: "ab-SystemStatus-Popup-List twa:p-2", children: _jsx(AdaptableObjectCollection, { colItems: colItems, items: messages }) })) }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/SystemStatus/SystemStatusStatusBarContent.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useAdaptable } from '../AdaptableContext';
 import { getStatusItemStyle } from './Utilities/getStatusItemStyle';
 import { Box } from '../../components/Flex';
@@ -7,5 +7,5 @@ export const SystemStatusStatusBarContent = () => {
     const currentSystemStatusMessageInfo = adaptable.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
     const { color, background } = getStatusItemStyle(currentSystemStatusMessageInfo);
     const message = currentSystemStatusMessageInfo?.statusMessage;
-    return (React.createElement(Box, { style: { color: message ? color : '', backgroundColor: message ? background : '' }, className: "twa:p-1 twa:rounded-standard" }, message || '0 Messages'));
+    return (_jsx(Box, { style: { color: message ? color : '', backgroundColor: message ? background : '' }, className: "twa:p-1 twa:rounded-standard", children: message || '0 Messages' }));
 };

package/src/View/SystemStatus/SystemStatusViewPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { getStatusItemStyle } from './Utilities/getStatusItemStyle';
@@ -11,8 +12,7 @@ class SystemStatusViewPanelComponent extends React.Component {
         const { color, background } = getStatusItemStyle(currentSystemStatusMessageInfo);
         const message = currentSystemStatusMessageInfo?.statusMessage;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
-            React.createElement(Flex, { style: { color, backgroundColor: message ? background : '' }, className: `ab-${elementType}__SystemStatus__text twa:mr-2 twa:p-2 twa:text-2 twa:rounded-standard twa:min-h-input`, alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
+        return (_jsx(Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap`, children: _jsx(Flex, { style: { color, backgroundColor: message ? background : '' }, className: `ab-${elementType}__SystemStatus__text twa:mr-2 twa:p-2 twa:text-2 twa:rounded-standard twa:min-h-input`, alignItems: "center", "data-name": "system-status-message", children: message || '0 Messages' }) }));
     }
 }
 function mapStateToProps(state) {

package/src/View/TeamSharing/SharedEntityDependencies.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
@@ -6,18 +7,13 @@ import { Box, Flex } from '../../components/Flex';
 export const Dependencies = (props) => {
     const adaptable = useAdaptable();
     const dependencies = adaptable.api.teamSharingApi.internalApi.getSharedEntryDependencies(props.sharedEntity);
-    return (React.createElement(React.Fragment, null, dependencies.map((sharedEntity) => {
-        const module = adaptable.ModuleService.getModuleById('TeamSharing');
-        const itemView = module.toView(sharedEntity);
-        return (React.createElement(Box, { as: "ul", key: sharedEntity.Uuid, className: "ab-Shared-Entity-Shared-Object twa:mb-2 twa:p-0 twa:flex twa:flex-col twa:gap-3" },
-            React.createElement(AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView })));
-    })));
+    return (_jsx(_Fragment, { children: dependencies.map((sharedEntity) => {
+            const module = adaptable.ModuleService.getModuleById('TeamSharing');
+            const itemView = module.toView(sharedEntity);
+            return (_jsx(Box, { as: "ul", className: "ab-Shared-Entity-Shared-Object twa:mb-2 twa:p-0 twa:flex twa:flex-col twa:gap-3", children: _jsx(AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView }) }, sharedEntity.Uuid));
+        }) }));
 };
 export const SharedEntityDependencies = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, null,
-            React.createElement(Box, { className: 'ab-Adaptable-Object-List__Item__label twa:mr-3' }, "Dependencies"),
-            React.createElement(Box, { className: "twa:my-2" }, isExpanded ? (React.createElement(SimpleButton, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand")))),
-        isExpanded && React.createElement(Dependencies, { sharedEntity: props.data })));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { children: [_jsx(Box, { className: 'ab-Adaptable-Object-List__Item__label twa:mr-3', children: "Dependencies" }), _jsx(Box, { className: "twa:my-2", children: isExpanded ? (_jsx(SimpleButton, { onClick: () => setIsExpanded(false), icon: "arrow-up", children: "Collapse" })) : (_jsx(SimpleButton, { onClick: () => setIsExpanded(true), icon: "arrow-down", children: "Expand" })) })] }), isExpanded && _jsx(Dependencies, { sharedEntity: props.data })] }));
 };

package/src/View/TeamSharing/SharedEntityObjectView.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { Tag } from '../../components/Tag';
@@ -11,13 +12,7 @@ export const SharedEntityTypeItemView = (props) => {
     const module = adaptable.ModuleService.getModuleById(moduleName);
     const sharedObject = props.data.Entity;
     const item = module?.toView(sharedObject);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { className: "twa:my-2" },
-            React.createElement(Flex, { className: "twa:mr-2", alignItems: "center" },
-                React.createElement(Tag, { className: "twa:m-0" }, props.data.Module)),
-            item ? (isExpanded ? (React.createElement(SimpleButton, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))) : null),
-        isExpanded && item && (React.createElement(Box, { as: "ul", className: "ab-Shared-Entity-Shared-Object twa:p-0 twa:flex twa:flex-col twa:gap-3" },
-            React.createElement(AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { className: "twa:my-2", children: [_jsx(Flex, { className: "twa:mr-2", alignItems: "center", children: _jsx(Tag, { className: "twa:m-0", children: props.data.Module }) }), item ? (isExpanded ? (_jsx(SimpleButton, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up", children: "Collapse" })) : (_jsx(SimpleButton, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down", children: "Expand" }))) : null] }), isExpanded && item && (_jsx(Box, { as: "ul", className: "ab-Shared-Entity-Shared-Object twa:p-0 twa:flex twa:flex-col twa:gap-3", children: _jsx(AdaptableObjectListItem, { hideControls: true, data: item, module: module }) }))] }));
 };
 export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
     const adaptable = useAdaptable();
@@ -41,27 +36,21 @@ export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) =
             const newRevision = sharedEntity.Revision;
             let statusInfo = null;
             if (isUpToDateAndActive) {
-                statusInfo = (React.createElement(Box, { className: "twa:ml-1 twa:text-success" },
-                    React.createElement("b", null, "up-to-date")));
+                statusInfo = (_jsx(Box, { className: "twa:ml-1 twa:text-success", children: _jsx("b", { children: "up-to-date" }) }));
             }
             if (isStaleAndActive) {
-                statusInfo = (React.createElement(Box, { className: "twa:ml-1 twa:text-warn" }, ` (Rev. ${newRevision} available)`));
+                statusInfo = (_jsx(Box, { className: "twa:ml-1 twa:text-warn", children: ` (Rev. ${newRevision} available)` }));
             }
-            activeInfo = activeRevision && (React.createElement(React.Fragment, null,
-                activeRevision &&
-                    `Imported Rev. ${activeRevision} ${isStaleAndActive ? 'is stale' : ''} `,
-                ' ',
-                statusInfo));
+            activeInfo = activeRevision && (_jsxs(_Fragment, { children: [activeRevision &&
+                        `Imported Rev. ${activeRevision} ${isStaleAndActive ? 'is stale' : ''} `, ' ', statusInfo] }));
         }
         else {
             // snapshot
-            activeInfo = activeRevision && React.createElement(React.Fragment, null, `Imported Rev. ${activeRevision}`);
+            activeInfo = activeRevision && _jsx(_Fragment, { children: `Imported Rev. ${activeRevision}` });
         }
     }
     const sharedValue = `by ${sharedEntity.UserName} at ${new Date(sharedEntity.Timestamp).toLocaleString()}`;
-    return (React.createElement(React.Fragment, null,
-        !isDependency && React.createElement(Tag, null, sharedValue),
-        activeInfo && React.createElement(Tag, null, activeInfo)));
+    return (_jsxs(_Fragment, { children: [!isDependency && _jsx(Tag, { children: sharedValue }), activeInfo && _jsx(Tag, { children: activeInfo })] }));
 };
 export const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
     let staleDepsString = 'Shared entity has';
@@ -71,6 +60,5 @@ export const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
     else {
         staleDepsString += ` ${staleDependencies.length} stale dependencies`;
     }
-    return (React.createElement(Tag, null,
-        React.createElement(Box, { className: "twa:ml-1 twa:text-warn" }, staleDepsString)));
+    return (_jsx(Tag, { children: _jsx(Box, { className: "twa:ml-1 twa:text-warn", children: staleDepsString }) }));
 };

package/src/View/TeamSharing/TeamSharingApplyButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
@@ -6,5 +7,5 @@ export const TeamSharingApplyButton = (props) => {
     const handleImport = React.useCallback(() => {
         adaptable.api.teamSharingApi.importSharedEntry(props.data);
     }, []);
-    return (React.createElement(SimpleButton, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Import", icon: "import-export" }));
+    return (_jsx(SimpleButton, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Import", icon: "import-export" }));
 };

package/src/View/Theme/ThemePopup.js

@@ -1,14 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import FormLayout, { FormRow } from '../../components/FormLayout';
-import DropdownButton from '../../components/DropdownButton';
-import { ThemeEditor } from './ThemeEditor';
 import ObjectFactory from '../../Utilities/ObjectFactory';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
-import SimpleButton from '../../components/SimpleButton';
-import { Icon } from '../../components/icons';
 import { ThemeSelector } from './ThemeSelector';
 import { Box } from '../../components/Flex';
 class ThemePopupComponent extends React.Component {
@@ -17,29 +14,7 @@ class ThemePopupComponent extends React.Component {
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
         const disabled = this.props.accessLevel === ACCESS_LEVEL_READ_ONLY;
-        const newButton = (React.createElement(DropdownButton, { className: "twa:ml-2", disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
-                {
-                    label: 'Dark',
-                    onClick: () => this.handleCreateNewTheme('dark'),
-                },
-                {
-                    label: 'Light',
-                    onClick: () => this.handleCreateNewTheme('light'),
-                },
-            ] },
-            React.createElement(Icon, { name: "plus" }),
-            " New"));
-        return (React.createElement(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), button: React.createElement(React.Fragment, null,
-                !this.props.hideShowInWindow && (React.createElement(SimpleButton, { icon: "open-in-new", onClick: () => {
-                        this.props.api.themeApi.internalApi.openInWindow();
-                    } })),
-                newButton) },
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Current Theme:" },
-                    React.createElement(Box, { className: "twa:max-w-[150px]" },
-                        React.createElement(ThemeSelector, null)))),
-            isCustomTheme && (React.createElement(Box, { className: "twa:mt-3" },
-                React.createElement(ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
+        return (_jsx(PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Select Current Theme:", children: _jsx(Box, { className: "twa:max-w-[150px]", children: _jsx(ThemeSelector, {}) }) }) }) }));
     }
     onChangeTheme(value) {
         this.props.SelectTheme(value);

package/src/View/Theme/ThemeSelector.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { SelectProps } from '../../components/Select';
 export declare const ThemeSelector: React.FunctionComponent<{
-    size?: SelectProps<any>['size'];
+    size?: 'small' | 'normal';
 }>;

package/src/View/Theme/ThemeSelector.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useDispatch, useSelector } from 'react-redux';
-import { Select } from '../../components/Select';
+import { SingleSelect } from '../../components/NewSelect';
 import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 import { ThemeModuleId } from '../../Utilities/Constants/ModuleConstants';
@@ -25,7 +25,7 @@ export const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return (_jsx(SingleSelect, { ariaLabel: "Select Theme", "data-name": "select-theme-dropdown", size: props.size, items: optionThemes, value: currentTheme, disabled: disabled, onValueChange: (themeName) => {
             dispatch(ThemeRedux.ThemeSelect(themeName));
         } }));
 };

package/src/View/Theme/ThemeStatusbar.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import * as React from 'react';
 export declare const ThemeStatusbar: () => React.JSX.Element;

package/src/View/Theme/ThemeStatusbar.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeSelector } from './ThemeSelector';
 import { Box } from '../../components/Flex';
 export const ThemeStatusbar = () => {
-    return (React.createElement(Box, { onClick: (event) => {
+    return (_jsx(Box, { onClick: (event) => {
             event.stopPropagation();
-        } },
-        React.createElement(ThemeSelector, { size: "small" })));
+        }, children: _jsx(ThemeSelector, { size: "small" }) }));
 };

package/src/View/Theme/ThemeViewPanel.js

@@ -1,11 +1,10 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import join from '../../components/utils/join';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { ThemeSelector } from './ThemeSelector';
 export const ThemeViewPanelControl = (props) => {
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement("div", { className: join(props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+    return (_jsx("div", { className: join(props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
             ? GeneralConstants.READ_ONLY_STYLE
-            : '', `ab-${elementType}__Theme__wrap`) },
-        React.createElement(ThemeSelector, null)));
+            : '', `ab-${elementType}__Theme__wrap`), children: _jsx(ThemeSelector, {}) }));
 };

package/src/View/Theme/VariantSelector.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import DropdownButton from '../../components/DropdownButton';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
@@ -16,7 +16,5 @@ export const VariantSelector = (props) => {
     const label = props.theme.Variant
         ? options.find((theme) => theme.value === props.theme.Variant)?.label
         : 'Select a theme';
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownButton, { className: "twa:mr-2", columns: ['label'], items: options, disabled: props.disabled }, label),
-        React.createElement(SimpleButton, { onClick: () => props.onChange(null), disabled: !props.theme.Variant || props.disabled, hidden: props.disabled, icon: "delete" })));
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { className: "twa:mr-2", columns: ['label'], items: options, disabled: props.disabled, children: label }), _jsx(SimpleButton, { onClick: () => props.onChange(null), disabled: !props.theme.Variant || props.disabled, hidden: props.disabled, icon: "delete" })] }));
 };

package/src/View/UIHelper.d.ts

@@ -7,30 +7,17 @@ import { AdaptableColumnDataType, AdaptableSystemIconName, AdaptableOptions } fr
 import { AdaptableAlert } from '../AdaptableState/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../AdaptableState/Common/AdaptableMessageType';
 import type { ContainerContext } from '../AdaptableOptions/ContainerOptions';
-export declare const BLACK: string;
-export declare const WHITE: string;
-export declare const LIGHT_GRAY: string;
-export declare const GRAY: string;
-export declare const BROWN: string;
-export declare const DARK_GREEN: string;
-export declare const GREEN: string;
-export declare const LIME_GREEN: string;
-export declare const YELLOW: string;
-export declare const LIGHT_YELLOW: string;
-export declare const DARK_BLUE: string;
-export declare const BLUE: string;
-export declare const LIGHT_BLUE: string;
-export declare const CYAN: string;
-export declare const MAGENTA: string;
-export declare const PURPLE: string;
-export declare const DARK_RED: string;
-export declare const RED: string;
-export declare const LIGHT_RED: string;
-export declare const ORANGE: string;
-export declare function getHexForName(name: string): string;
-export declare function getDefaultColors(): string[];
+/** Generic swatch entries for the Colour Picker (resolved at runtime per active theme). */
+export declare function getSwatchColorVar(index: number): string;
+/** Default mid-gray from the theme swatch palette (`--ab-color-swatch-4`). */
+export declare function getGraySwatchColor(): string;
+export declare function getSwatchColorPaletteEntries(): string[];
+/** Theme semantic colours for the Colour Picker (resolved at runtime per active theme). */
+export declare function getThemeSemanticColorPaletteEntries(): string[];
+/** Swatch and theme semantic entries (default Colour Picker set). */
+export declare function getDefaultColorPalette(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
-export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "text" | "number" | "date";
+export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "number" | "date" | "text";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
 export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document, context?: ContainerContext): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
@@ -57,8 +44,11 @@ export declare function getCSSVariableValue(cssVariable: string): string | undef
 export declare function setCSSVariableValue(cssVariable: string, value: string): void;
 export declare function isBrowserDocumentAvailable(): boolean;
 export declare const UIHelper: {
-    getHexForName: typeof getHexForName;
-    getDefaultColors: typeof getDefaultColors;
+    getSwatchColorVar: typeof getSwatchColorVar;
+    getGraySwatchColor: typeof getGraySwatchColor;
+    getSwatchColorPaletteEntries: typeof getSwatchColorPaletteEntries;
+    getThemeSemanticColorPaletteEntries: typeof getThemeSemanticColorPaletteEntries;
+    getDefaultColorPalette: typeof getDefaultColorPalette;
     getEmptyConfigState: typeof getEmptyConfigState;
     getDescriptionForDataType: typeof getDescriptionForDataType;
     getPlaceholderForDataType: typeof getPlaceholderForDataType;