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

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

@@ -1,37 +1,96 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = void 0;
+exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = exports.renderStyledColumnSettingsSummary = exports.getStyledColumnWizardTitle = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Tabs_1 = require("../../../components/Tabs");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Tag_1 = require("../../../components/Tag");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Flex_1 = require("../../../components/Flex");
-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(Flex_1.Box, { className: "twa:pr-2 twa:py-2" },
-        "Type ",
-        React.createElement(Tag_1.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',
 };
-exports.renderStyledColumnTypeSummary = renderStyledColumnTypeSummary;
+/**
+ * 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.
+ */
+const getStyledColumnWizardTitle = (data) => {
+    const typeKey = getTypeLabel(data);
+    return typeKey ? TYPE_WIZARD_TITLES[typeKey] : 'Styled Column';
+};
+exports.getStyledColumnWizardTitle = getStyledColumnWizardTitle;
+const renderStyledColumnSettingsSummary = (data) => {
+    const typeKey = getTypeLabel(data);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:pr-2 twa:py-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-1", children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name || '(none)' })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-2", children: ["Type ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: typeKey ? TYPE_LABELS[typeKey] : '(none)' })] })] }));
+};
+exports.renderStyledColumnSettingsSummary = renderStyledColumnSettingsSummary;
+/**
+ * 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.
+ */
+exports.renderStyledColumnTypeSummary = exports.renderStyledColumnSettingsSummary;
 const StyledColumnWizardTypeSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const onNameChange = (event) => {
+        props.onChange({
+            ...data,
+            Name: event.target.value,
+        });
+    };
     const handleTypeChange = (type) => {
         const newStyledColumn = {
             ...data,
@@ -40,6 +99,10 @@ 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 = {};
@@ -59,17 +122,29 @@ const StyledColumnWizardTypeSection = (props) => {
                     Badges: [ObjectFactory_1.default.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_1.Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full" },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Type"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(TypeRadio_1.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_1.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_1.TypeRadio, { text: "Sparkline", description: "Render the column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparklineStyle), onClick: () => handleTypeChange('sparkline') })),
-                React.createElement(TypeRadio_1.TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') })))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium twa:mb-3", children: "Settings" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:mb-4", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:max-w-[420px] twa:w-full", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", "data-name": "styled-column-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium twa:mb-2", children: "Type" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Rating", description: "Render values as row of icons (or stars, hearts etc.) (Numeric Columns)", checked: Boolean(data.RatingStyle), onClick: () => handleTypeChange('rating') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.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') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.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') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.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') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Icon", description: "Map cell values to icons (e.g. flag for country) (All Columns)", checked: Boolean(data.IconStyle), onClick: () => handleTypeChange('icon') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.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') })] })] }));
 };
 exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;

package/src/View/SystemStatus/SystemStatusEntityRow.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemStatusEntityRow = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
@@ -14,15 +15,10 @@ class SystemStatusEntityRow extends React.Component {
             .adaptableObject;
         let messageTypeColor = UIHelper_1.default.getColorByMessageType(systemStatus?.statusType ?? 'Success');
         let colItems = (0, Helper_1.cloneObject)(this.props.colItems);
-        colItems[0].Content = systemStatus ? (React.createElement("details", null,
-            React.createElement(Flex_1.Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: (0, join_1.default)('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(Flex_1.Box, { className: "ab-DashboardToolbar__SystemStatus__further-information twa:m-2" }, systemStatus.statusFurtherInformation)) : null)) : null;
+        colItems[0].Content = systemStatus ? ((0, jsx_runtime_1.jsxs)("details", { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: (0, join_1.default)('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 ? ((0, jsx_runtime_1.jsx)(Flex_1.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_1.AdaptableObjectRow, { colItems: colItems });
+        return (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
     }
 }
 exports.SystemStatusEntityRow = SystemStatusEntityRow;

package/src/View/SystemStatus/SystemStatusPopup.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemStatusPopup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
@@ -26,13 +27,12 @@ class SystemStatusPopupComponent extends React.Component {
         this.props.onSystemStatusMessageInfoDeleteAll();
     }
     render() {
-        let clearAllButton = (React.createElement(SimpleButton_1.default, { onClick: () => this.onSystemStatusMessageInfoDeleteAll(), tooltip: "Clear All", tone: "neutral", variant: "raised", accessLevel: this.props.accessLevel, disabled: ArrayExtensions_1.default.IsNullOrEmpty(this.props.SystemStatusMessages) }, "Delete All Messages"));
+        let clearAllButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => this.onSystemStatusMessageInfoDeleteAll(), tooltip: "Clear All", tone: "neutral", variant: "raised", accessLevel: this.props.accessLevel, disabled: ArrayExtensions_1.default.IsNullOrEmpty(this.props.SystemStatusMessages), children: "Delete All Messages" }));
         const messages = ArrayExtensions_1.default.sortArrayWithProperty(Enums_1.SortOrder.Desc, this.props.SystemStatusMessages, 'Timestamp').map((smi, index) => {
             const accessLevel = AdaptableHelper_1.default.getAccessLevelForObject(smi, this.props.accessLevel);
-            return (React.createElement(SystemStatusEntityRow_1.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 ((0, jsx_runtime_1.jsx)(SystemStatusEntityRow_1.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_1.PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() }, ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (React.createElement(Flex_1.Box, { className: "ab-SystemStatus-Popup-List twa:p-2" },
-            React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: colItems, items: messages })))));
+        return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.SystemStatusMessages) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-SystemStatus-Popup-List twa:p-2", children: (0, jsx_runtime_1.jsx)(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: colItems, items: messages }) })) }));
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/SystemStatus/SystemStatusStatusBarContent.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemStatusStatusBarContent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const AdaptableContext_1 = require("../AdaptableContext");
 const getStatusItemStyle_1 = require("./Utilities/getStatusItemStyle");
 const Flex_1 = require("../../components/Flex");
@@ -11,6 +10,6 @@ const SystemStatusStatusBarContent = () => {
     const currentSystemStatusMessageInfo = adaptable.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
     const { color, background } = (0, getStatusItemStyle_1.getStatusItemStyle)(currentSystemStatusMessageInfo);
     const message = currentSystemStatusMessageInfo?.statusMessage;
-    return (React.createElement(Flex_1.Box, { style: { color: message ? color : '', backgroundColor: message ? background : '' }, className: "twa:p-1 twa:rounded-standard" }, message || '0 Messages'));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { style: { color: message ? color : '', backgroundColor: message ? background : '' }, className: "twa:p-1 twa:rounded-standard", children: message || '0 Messages' }));
 };
 exports.SystemStatusStatusBarContent = SystemStatusStatusBarContent;

package/src/View/SystemStatus/SystemStatusViewPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemStatusViewPanel = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const getStatusItemStyle_1 = require("./Utilities/getStatusItemStyle");
@@ -15,8 +16,7 @@ class SystemStatusViewPanelComponent extends React.Component {
         const { color, background } = (0, getStatusItemStyle_1.getStatusItemStyle)(currentSystemStatusMessageInfo);
         const message = currentSystemStatusMessageInfo?.statusMessage;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
-            React.createElement(Flex_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap`, children: (0, jsx_runtime_1.jsx)(Flex_1.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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SharedEntityDependencies = exports.Dependencies = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -10,20 +11,15 @@ const Flex_1 = require("../../components/Flex");
 const Dependencies = (props) => {
     const adaptable = (0, AdaptableContext_1.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(Flex_1.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(AdaptableObjectList_1.AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView })));
-    })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: dependencies.map((sharedEntity) => {
+            const module = adaptable.ModuleService.getModuleById('TeamSharing');
+            const itemView = module.toView(sharedEntity);
+            return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "ul", className: "ab-Shared-Entity-Shared-Object twa:mb-2 twa:p-0 twa:flex twa:flex-col twa:gap-3", children: (0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView }) }, sharedEntity.Uuid));
+        }) }));
 };
 exports.Dependencies = Dependencies;
 const SharedEntityDependencies = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Flex_1.Flex, null,
-            React.createElement(Flex_1.Box, { className: 'ab-Adaptable-Object-List__Item__label twa:mr-3' }, "Dependencies"),
-            React.createElement(Flex_1.Box, { className: "twa:my-2" }, isExpanded ? (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand")))),
-        isExpanded && React.createElement(exports.Dependencies, { sharedEntity: props.data })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: 'ab-Adaptable-Object-List__Item__label twa:mr-3', children: "Dependencies" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:my-2", children: isExpanded ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => setIsExpanded(false), icon: "arrow-up", children: "Collapse" })) : ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => setIsExpanded(true), icon: "arrow-down", children: "Expand" })) })] }), isExpanded && (0, jsx_runtime_1.jsx)(exports.Dependencies, { sharedEntity: props.data })] }));
 };
 exports.SharedEntityDependencies = SharedEntityDependencies;

package/src/View/TeamSharing/SharedEntityObjectView.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSharedEntityStaleDepsItemView = exports.getSharedEntityActiveStatusObjectView = exports.SharedEntityTypeItemView = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const Tag_1 = require("../../components/Tag");
@@ -15,13 +16,7 @@ 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_1.Flex, { className: "twa:my-2" },
-            React.createElement(Flex_1.Flex, { className: "twa:mr-2", alignItems: "center" },
-                React.createElement(Tag_1.Tag, { className: "twa:m-0" }, props.data.Module)),
-            item ? (isExpanded ? (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))) : null),
-        isExpanded && item && (React.createElement(Flex_1.Box, { as: "ul", className: "ab-Shared-Entity-Shared-Object twa:p-0 twa:flex twa:flex-col twa:gap-3" },
-            React.createElement(AdaptableObjectList_1.AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:my-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:mr-2", alignItems: "center", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:m-0", children: props.data.Module }) }), item ? (isExpanded ? ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up", children: "Collapse" })) : ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down", children: "Expand" }))) : null] }), isExpanded && item && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "ul", className: "ab-Shared-Entity-Shared-Object twa:p-0 twa:flex twa:flex-col twa:gap-3", children: (0, jsx_runtime_1.jsx)(AdaptableObjectList_1.AdaptableObjectListItem, { hideControls: true, data: item, module: module }) }))] }));
 };
 exports.SharedEntityTypeItemView = SharedEntityTypeItemView;
 const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
@@ -46,27 +41,21 @@ const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
             const newRevision = sharedEntity.Revision;
             let statusInfo = null;
             if (isUpToDateAndActive) {
-                statusInfo = (React.createElement(Flex_1.Box, { className: "twa:ml-1 twa:text-success" },
-                    React.createElement("b", null, "up-to-date")));
+                statusInfo = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1 twa:text-success", children: (0, jsx_runtime_1.jsx)("b", { children: "up-to-date" }) }));
             }
             if (isStaleAndActive) {
-                statusInfo = (React.createElement(Flex_1.Box, { className: "twa:ml-1 twa:text-warn" }, ` (Rev. ${newRevision} available)`));
+                statusInfo = ((0, jsx_runtime_1.jsx)(Flex_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [activeRevision &&
+                        `Imported Rev. ${activeRevision} ${isStaleAndActive ? 'is stale' : ''} `, ' ', statusInfo] }));
         }
         else {
             // snapshot
-            activeInfo = activeRevision && React.createElement(React.Fragment, null, `Imported Rev. ${activeRevision}`);
+            activeInfo = activeRevision && (0, jsx_runtime_1.jsx)(jsx_runtime_1.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_1.Tag, null, sharedValue),
-        activeInfo && React.createElement(Tag_1.Tag, null, activeInfo)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isDependency && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: sharedValue }), activeInfo && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: activeInfo })] }));
 };
 exports.getSharedEntityActiveStatusObjectView = getSharedEntityActiveStatusObjectView;
 const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
@@ -77,7 +66,6 @@ const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
     else {
         staleDepsString += ` ${staleDependencies.length} stale dependencies`;
     }
-    return (React.createElement(Tag_1.Tag, null,
-        React.createElement(Flex_1.Box, { className: "twa:ml-1 twa:text-warn" }, staleDepsString)));
+    return ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1 twa:text-warn", children: staleDepsString }) }));
 };
 exports.getSharedEntityStaleDepsItemView = getSharedEntityStaleDepsItemView;

package/src/View/TeamSharing/TeamSharingApplyButton.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TeamSharingApplyButton = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -10,6 +11,6 @@ const TeamSharingApplyButton = (props) => {
     const handleImport = React.useCallback(() => {
         adaptable.api.teamSharingApi.importSharedEntry(props.data);
     }, []);
-    return (React.createElement(SimpleButton_1.default, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Import", icon: "import-export" }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "shared-entity-apply-button", onClick: handleImport, variant: "text", tooltip: "Import", icon: "import-export" }));
 };
 exports.TeamSharingApplyButton = TeamSharingApplyButton;

package/src/View/Theme/ThemePopup.js

@@ -2,17 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemePopup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-const ThemeEditor_1 = require("./ThemeEditor");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const icons_1 = require("../../components/icons");
 const ThemeSelector_1 = require("./ThemeSelector");
 const Flex_1 = require("../../components/Flex");
 class ThemePopupComponent extends React.Component {
@@ -21,29 +18,7 @@ class ThemePopupComponent extends React.Component {
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
         const disabled = this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
-        const newButton = (React.createElement(DropdownButton_1.default, { 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(icons_1.Icon, { name: "plus" }),
-            " New"));
-        return (React.createElement(PopupPanel_1.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_1.default, { icon: "open-in-new", onClick: () => {
-                        this.props.api.themeApi.internalApi.openInWindow();
-                    } })),
-                newButton) },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
-                    React.createElement(Flex_1.Box, { className: "twa:max-w-[150px]" },
-                        React.createElement(ThemeSelector_1.ThemeSelector, null)))),
-            isCustomTheme && (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
-                React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
+        return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Select Current Theme:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[150px]", children: (0, jsx_runtime_1.jsx)(ThemeSelector_1.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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeSelector = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_redux_1 = require("react-redux");
-const Select_1 = require("../../components/Select");
+const NewSelect_1 = require("../../components/NewSelect");
 const ThemeRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ThemeRedux"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
@@ -29,7 +29,7 @@ const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(Select_1.Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return ((0, jsx_runtime_1.jsx)(NewSelect_1.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,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeStatusbar = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ThemeSelector_1 = require("./ThemeSelector");
 const Flex_1 = require("../../components/Flex");
 const ThemeStatusbar = () => {
-    return (react_1.default.createElement(Flex_1.Box, { onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { onClick: (event) => {
             event.stopPropagation();
-        } },
-        react_1.default.createElement(ThemeSelector_1.ThemeSelector, { size: "small" })));
+        }, children: (0, jsx_runtime_1.jsx)(ThemeSelector_1.ThemeSelector, { size: "small" }) }));
 };
 exports.ThemeStatusbar = ThemeStatusbar;

package/src/View/Theme/ThemeViewPanel.js

@@ -2,15 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeViewPanelControl = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const ThemeSelector_1 = require("./ThemeSelector");
 const ThemeViewPanelControl = (props) => {
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement("div", { className: (0, join_1.default)(props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, join_1.default)(props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
             ? GeneralConstants.READ_ONLY_STYLE
-            : '', `ab-${elementType}__Theme__wrap`) },
-        React.createElement(ThemeSelector_1.ThemeSelector, null)));
+            : '', `ab-${elementType}__Theme__wrap`), children: (0, jsx_runtime_1.jsx)(ThemeSelector_1.ThemeSelector, {}) }));
 };
 exports.ThemeViewPanelControl = ThemeViewPanelControl;

package/src/View/Theme/VariantSelector.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VariantSelector = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -20,8 +20,6 @@ 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_1.default, { className: "twa:mr-2", columns: ['label'], items: options, disabled: props.disabled }, label),
-        React.createElement(SimpleButton_1.default, { onClick: () => props.onChange(null), disabled: !props.theme.Variant || props.disabled, hidden: props.disabled, icon: "delete" })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.default, { className: "twa:mr-2", columns: ['label'], items: options, disabled: props.disabled, children: label }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: () => props.onChange(null), disabled: !props.theme.Variant || props.disabled, hidden: props.disabled, icon: "delete" })] }));
 };
 exports.VariantSelector = VariantSelector;

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;