@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

package/src/View/Wizard/WizardTypeSelection.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardTypeSelectionPreviewFrame = exports.WizardNameFieldSection = exports.WizardTypeSelectionSection = exports.WizardTypeSelectionCard = exports.getWizardTypeSelectionGridColumns = exports.WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
+const Flex_1 = require("../../components/Flex");
+const Card_1 = require("../../components/Card");
+const utils_1 = require("../../lib/utils");
+exports.WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = 'twa:flex twa:w-full twa:min-h-[32px] twa:items-center twa:justify-center twa:overflow-hidden twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_35%,transparent)] twa:px-2 twa:py-1';
+const getWizardTypeSelectionGridColumns = (choiceCount) => choiceCount === 4 ? 2 : 3;
+exports.getWizardTypeSelectionGridColumns = getWizardTypeSelectionGridColumns;
+const WizardTypeSelectionCard = ({ label, description, selected, disabled, disabledTooltip, dataName, minHeightClassName = 'twa:min-h-[108px]', onSelect, children, footer, }) => {
+    const handleActivate = () => {
+        if (!disabled) {
+            onSelect();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { role: "radio", tabIndex: disabled ? -1 : 0, "aria-checked": selected, "aria-disabled": disabled, "data-name": dataName, className: (0, utils_1.cn)('ab-WizardTypeSelectionCard group twa:relative twa:h-full twa:rounded-standard twa:border twa:border-primarydark/32 twa:bg-card twa:text-card-foreground twa:outline-none twa:transition-colors twa:focus-visible:ring-2 twa:focus-visible:ring-accent', minHeightClassName, disabled
+            ? 'twa:cursor-not-allowed twa:opacity-60'
+            : 'twa:cursor-pointer hover:twa:border-accent/55 hover:twa:bg-accent/5', selected &&
+            'twa:after:pointer-events-none twa:after:absolute twa:after:inset-0 twa:after:rounded-standard twa:after:border-2 twa:after:border-[var(--ab-cmp-wizard-type-selection-card__selected-border)] twa:after:bg-[var(--ab-cmp-wizard-type-selection-card__selected-overlay)]'), onClick: handleActivate, onKeyDown: (event) => {
+            if (disabled) {
+                return;
+            }
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onSelect();
+            }
+        }, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { "aria-hidden": true, className: (0, utils_1.cn)('twa:pointer-events-none twa:absolute twa:top-2.5 twa:right-2.5 twa:z-10 twa:size-4 twa:rounded-full twa:border-2 twa:transition-colors', selected
+                    ? 'twa:border-[var(--ab-cmp-wizard-type-selection-card__selected-border)] twa:bg-[var(--ab-cmp-wizard-type-selection-card__selected-border)]'
+                    : 'twa:border-primarydark/35 twa:bg-base group-hover:twa:border-accent/55'), children: selected ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:absolute twa:inset-0 twa:m-auto twa:size-1.5 twa:rounded-full twa:bg-[var(--ab-cmp-wizard-type-selection-card__selected-indicator-inner)]" })) : null }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, style: { backgroundColor: 'transparent' }, className: "twa:flex twa:h-full twa:flex-col twa:justify-between twa:p-3 twa:pr-7", gap: 0, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: label }), children, description || disabledTooltip ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [description ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:leading-snug twa:opacity-70", children: description })) : null, disabled && disabledTooltip ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-1 twa:text-1 twa:leading-snug twa:italic twa:opacity-80", children: disabledTooltip })) : null] })) : null, footer] })] }));
+};
+exports.WizardTypeSelectionCard = WizardTypeSelectionCard;
+const WizardTypeSelectionSection = ({ headingId, title, intro, columns, dataName, className, children }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, gap: 1, className: (0, utils_1.cn)('twa:flex-1 twa:min-h-0', className), children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { gap: 1, border: false, className: "twa:flex-col twa:items-start twa:px-1 twa:pb-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { id: headingId, className: "twa:font-medium", children: title }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-1.5 twa:text-xs twa:font-normal twa:opacity-70", children: intro })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:min-h-0 twa:overflow-y-auto twa:p-1 twa:pt-0", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": dataName, className: (0, utils_1.cn)('twa:grid twa:gap-2', columns === 2 ? 'twa:grid-cols-2' : 'twa:grid-cols-3'), role: "radiogroup", "aria-labelledby": headingId, children: children }) })] }));
+exports.WizardTypeSelectionSection = WizardTypeSelectionSection;
+const WizardNameFieldSection = ({ value, onChange, inputDataName = 'wizard-name', placeholder = 'Enter Name', }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, gap: 1, className: "twa:bg-card twa:text-card-foreground", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { gap: 1, border: false, className: "twa:px-1 twa:pb-1", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }) }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full twa:max-w-[420px]", "data-name": inputDataName, onChange: onChange, placeholder: placeholder, value: value }) })] }));
+exports.WizardNameFieldSection = WizardNameFieldSection;
+const WizardTypeSelectionPreviewFrame = ({ children, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "aria-hidden": true, className: exports.WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS, children: children }));
+exports.WizardTypeSelectionPreviewFrame = WizardTypeSelectionPreviewFrame;

package/src/View/Wizard/rowGroupSummaryTags.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AdaptableApi, Layout } from '../../types';
+export declare const TableRowGroupSummaryTags: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const PivotRowGroupSummaryTags: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const TableRowGroupSummaryView: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;
+export declare const PivotRowGroupSummaryView: React.FC<{
+    layout: Layout;
+    api: AdaptableApi;
+}>;

package/src/View/Wizard/rowGroupSummaryTags.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotRowGroupSummaryView = exports.TableRowGroupSummaryView = exports.PivotRowGroupSummaryTags = exports.TableRowGroupSummaryTags = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Tag_1 = require("../../components/Tag");
+const Flex_1 = require("../../components/Flex");
+const rowGroupSummaryHelpers_1 = require("../../Strategy/Utilities/Layout/rowGroupSummaryHelpers");
+const TableRowGroupSummaryTags = ({ layout, api, }) => {
+    const columnIds = layout.RowGroupedColumns ?? [];
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [!columnIds.length ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Row Grouped Columns" })) : (columnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Display Type: ", (0, rowGroupSummaryHelpers_1.getRowGroupDisplayTypeLabel)(layout)] }), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Behaviour: ", (0, rowGroupSummaryHelpers_1.getRowGroupBehaviorLabel)(layout)] })] }));
+};
+exports.TableRowGroupSummaryTags = TableRowGroupSummaryTags;
+const PivotRowGroupSummaryTags = ({ layout, api, }) => {
+    const columnIds = layout.PivotGroupedColumns ?? [];
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [!columnIds.length ? ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Row Grouped Columns" })) : (columnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { children: api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Behaviour: ", (0, rowGroupSummaryHelpers_1.getRowGroupBehaviorLabel)(layout)] })] }));
+};
+exports.PivotRowGroupSummaryTags = PivotRowGroupSummaryTags;
+const TableRowGroupSummaryView = (props) => (0, jsx_runtime_1.jsx)(exports.TableRowGroupSummaryTags, { ...props });
+exports.TableRowGroupSummaryView = TableRowGroupSummaryView;
+const PivotRowGroupSummaryView = (props) => (0, jsx_runtime_1.jsx)(exports.PivotRowGroupSummaryTags, { ...props });
+exports.PivotRowGroupSummaryView = PivotRowGroupSummaryView;

package/src/View/Wizard/scopeSummaryTags.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
+export { getScopeViewItemsTagVariant as getScopeSummaryTagVariant } from '../../components/Tag/columnScopeTagHelpers';
+export declare const ScopeSummaryTags: React.FC<{
+    scope: ColumnScope;
+}>;

package/src/View/Wizard/scopeSummaryTags.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScopeSummaryTags = exports.getScopeSummaryTagVariant = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AdaptableColumn_1 = require("../../AdaptableState/Common/AdaptableColumn");
+const Tag_1 = require("../../components/Tag");
+const Flex_1 = require("../../components/Flex");
+const AdaptableContext_1 = require("../AdaptableContext");
+var columnScopeTagHelpers_1 = require("../../components/Tag/columnScopeTagHelpers");
+Object.defineProperty(exports, "getScopeSummaryTagVariant", { enumerable: true, get: function () { return columnScopeTagHelpers_1.getScopeViewItemsTagVariant; } });
+const ScopeSummaryTags = ({ scope }) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const scopeApi = api.columnScopeApi;
+    const columnsInScope = scopeApi.getColumnsInScope(scope);
+    if (scopeApi.scopeIsAll(scope)) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "All Columns" });
+    }
+    if ('ColumnIds' in scope) {
+        if (!columnsInScope.length) {
+            return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" });
+        }
+        return ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName), variant: "column" }));
+    }
+    if ('DataTypes' in scope) {
+        if (!scope.DataTypes.length) {
+            return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" });
+        }
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.DataTypes.map((dataType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, AdaptableColumn_1.getColumnTypeFriendlyName)(dataType) }, dataType))) }));
+    }
+    if ('ColumnTypes' in scope) {
+        if (!scope.ColumnTypes.length) {
+            return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" });
+        }
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.ColumnTypes.map((columnType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: columnType }, columnType))) }));
+    }
+    return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "None" });
+};
+exports.ScopeSummaryTags = ScopeSummaryTags;

package/src/agGrid/AdaptableAgGrid.js

@@ -1442,7 +1442,7 @@ class AdaptableAgGrid {
                 // dataType: 'Number',
                 // AG Grid requires either dataType or numberFormat to be set for Numbers
                 numberFormat: {
-                    format: '0.###############',
+                    format: `#,##0.00`,
                 },
             });
             // store original excel styles, we will have to revert to them after each VISUAL EXPORT

package/src/agGrid/AgGridAdapter.js

@@ -590,11 +590,6 @@ class AgGridAdapter {
             return 'unknown';
         }
         let dataType = 'unknown';
-        // get the column type if already in store (and not unknown)
-        const existingColumn = this.adaptableApi.columnApi.getColumnWithColumnId(agColumn.getId(), logWarning);
-        if (existingColumn && existingColumn.dataType !== 'unknown') {
-            return existingColumn.dataType;
-        }
         // check for colDef dataType
         const colDefDataType = agColumn.getColDef().cellDataType;
         if (typeof colDefDataType === 'string' && agGridDataTypeDefinitions_1.ALL_ADAPTABLE_DATA_TYPES.includes(colDefDataType)) {

package/src/agGrid/AgGridColumnAdapter.js

@@ -1446,7 +1446,7 @@ class AgGridColumnAdapter {
                 const bg = (0, tinycolor2_1.default)(preparedColor).setAlpha(alpha);
                 style.backgroundColor = bg.toRgbString();
                 if (gradientStyle.AutoContrastText) {
-                    style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+                    style.color = (0, StyleHelper_1.getAutoContrastTextColor)(preparedColor, alpha);
                 }
             }
         }

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionColumnRenderer = exports.ReactActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const DropdownButton_1 = require("../../components/DropdownButton");
 const React = tslib_1.__importStar(require("react"));
 const Icon_1 = require("../../components/Icon");
 const AdaptableButton_1 = require("../../View/Components/AdaptableButton");
@@ -17,10 +17,7 @@ function getActionColumnButtonProps(button, index, adaptableApi, context, rerend
     }
     const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
     const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-    const identifier = button.label ??
-        button.icon?.name ??
-        button.tooltip ??
-        `${index + 1}`;
+    const identifier = button.label ?? button.icon?.name ?? button.tooltip ?? `${index + 1}`;
     return {
         button,
         buttonLabel,
@@ -56,7 +53,7 @@ const ActionColumnDropdown = (props) => {
         });
         return {
             label: buttonLabel || buttonTooltip,
-            icon: menuIcon ? ((0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: menuIcon })) : undefined,
+            icon: menuIcon ? (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: menuIcon }) : undefined,
             disabled,
             onClick: () => {
                 actionButton.onClick?.(actionButton, context);
@@ -68,7 +65,7 @@ const ActionColumnDropdown = (props) => {
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, collapseOnItemClick: true, listMinWidth: 140, showToggleIcon: true, accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: dropdownLabel }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: dropdownLabel }));
 };
 const ActionColumnCellContent = (props) => {
     const { buttons, actionColumn, adaptableApi, context, rerender } = props;

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -281,7 +281,7 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         if (!field.helpText && !error) {
             return control;
         }
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [control, field.helpText && !error ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { id: helpId, className: "ab-Form_help twa:text-xs twa:opacity-70 twa:mt-1", children: field.helpText })) : null, error ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { id: errorId, role: "alert", "aria-live": "polite", className: "ab-Form_error twa:text-xs twa:mt-1", style: { color: 'var(--ab-color-error, #c00)' }, children: error })) : null] }));
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [control, field.helpText && !error ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { id: helpId, className: "ab-Form_help twa:text-xs twa:opacity-70 twa:mt-1", children: field.helpText })) : null, error ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { id: errorId, role: "alert", "aria-live": "polite", className: "ab-Form_error twa:text-xs twa:mt-1", style: { color: 'var(--ab-color-destructive, #c00)' }, children: error })) : null] }));
     };
     // by default we have 2 columns: label & input
     const columns = formDef.config?.columns ?? [1, 2];

package/src/components/Card/index.js

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = Card;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const twMerge_1 = require("../../twMerge");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
 function Card(props) {
     const { shadow = true, children, className, style, gap = 2 } = props;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:bg-background twa:text-foreground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:bg-background twa:text-foreground', 'ab-Card', 'twa:text-3', 'twa:rounded-standard twa:p-2', 'twa:flex twa:flex-col', {
             'twa:shadow-sm': shadow,
             'twa:gap-0': gap === 0,
             'twa:gap-1': gap === 1,
@@ -20,7 +18,7 @@ function Card(props) {
 }
 const CardTitle = (props) => {
     const { children, className, gap = 2, border = true } = props;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, twMerge_1.twMerge)((0, clsx_1.default)('ab-Card__title', {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('ab-Card__title', {
             'twa:flex twa:flex-row': true,
             'twa:items-center': true,
             'twa:text-4 twa:px-2': true,
@@ -32,11 +30,11 @@ const CardTitle = (props) => {
             'twa:gap-3': gap === 3,
             'twa:gap-4': gap === 4,
             'twa:gap-8': gap === 8,
-        }, className)), children: children }));
+        }, className), children: children }));
 };
 const CardBody = (props) => {
     const { children, gap, className } = props;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)('ab-Card__body', 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('ab-Card__body', 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', {
             'twa:gap-0': gap === 0,
             'twa:gap-1': gap === 1,
             'twa:gap-2': gap === 2,

package/src/components/CheckBox/index.js

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const utils_1 = require("../../lib/utils");
 const twUtils_1 = require("../twUtils");
 const Square = (props) => {
@@ -48,10 +47,10 @@ const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly
     React.useEffect(() => {
         checkboxRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    let input = ((0, jsx_runtime_1.jsx)("input", { className: (0, clsx_1.default)(`ab-CheckBox-input twa:peer twa:align-middle twa:opacity-0`, {
+    let input = ((0, jsx_runtime_1.jsx)("input", { className: (0, utils_1.cn)(`ab-CheckBox-input twa:peer twa:align-middle twa:opacity-0`, {
             'twa:cursor-pointer': !readOnly && !disabled,
         }), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, tabIndex: tabIndex, type: "checkbox", name: name, value: value, onChange: onInputChange }));
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as, children: [before, beforeGap, input, (0, jsx_runtime_1.jsx)(Square, { type: type, className: checkSquareClassName }), afterGap, after] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...props, className: (0, utils_1.cn)('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as, children: [before, beforeGap, input, (0, jsx_runtime_1.jsx)(Square, { type: type, className: checkSquareClassName }), afterGap, after] }));
 };
 exports.CheckBox = CheckBox;
 const CheckBoxGroup = (props) => {

package/src/components/CodeBlock/index.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = exports.baseClassName = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-CodeBlock';
 const CodeBlock = (props) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "code", ...props, className: (0, clsx_1.default)('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', exports.baseClassName, props.className) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "code", ...props, className: (0, utils_1.cn)('twa:p-1 twa:rounded-standard twa:bg-primary twa:text-primary-foreground', exports.baseClassName, props.className) }));
 };
 exports.CodeBlock = CodeBlock;

package/src/components/ColorPicker/ColorPicker.d.ts

@@ -5,6 +5,7 @@ import { BoxProps } from '../Flex';
 export type ColorPickerProps = Omit<HTMLProps<HTMLInputElement>, 'onChange'> & {
     api: AdaptableApi;
     onChange: (color: string) => void;
+    className?: string;
     value: string;
     includeAlpha?: boolean;
 } & Omit<BoxProps, 'onChange'>;

package/src/components/ColorPicker/ColorPicker.js

@@ -6,15 +6,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const debounce_1 = tslib_1.__importDefault(require("../../Utilities/utils/debounce"));
+const utils_1 = require("../../lib/utils");
 const Input_1 = tslib_1.__importDefault(require("../Input"));
 const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 const Flex_1 = require("../Flex");
 const twMerge_1 = require("../../twMerge");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.ColorPicker = React.forwardRef((props, ref) => {
     const ColorPalette = props.api.userInterfaceApi.getColorPalette();
-    let { api, value, includeAlpha = true, ...restProps } = props;
+    let { value, includeAlpha = true, className, ...restProps } = props;
     // Create a debounced version of onChange
     // we need this because moving the mouse A LOT in the custom color picker can break the React rendering
     const debouncedOnChange = (0, react_1.useCallback)((0, debounce_1.default)((color) => {
@@ -40,17 +40,19 @@ exports.ColorPicker = React.forwardRef((props, ref) => {
         return [(0, tinycolor2_1.default)(color).setAlpha(0).toRgbString(), (0, tinycolor2_1.default)(color).setAlpha(1).toRgbString()];
     }, [value]);
     const rangeBackround = `linear-gradient(90deg, ${preparedAlphaColor[0]} 0%, ${preparedAlphaColor[1]} 100%)`;
-    const alpha = (0, tinycolor2_1.default)(value).getAlpha();
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)('ColorPicker twa:items-center twa:gap-2', {
+    const alpha = (0, tinycolor2_1.default)((0, StyleHelper_1.getVariableColor)(value)).getAlpha();
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, utils_1.cn)('ColorPicker twa:items-center twa:gap-2', {
             'twa:opacity-30': props.disabled,
-        }, props.className), children: [(0, jsx_runtime_1.jsx)(Input_1.default, { ...restProps, as: undefined, disabled: props.disabled, className: (0, twMerge_1.twMerge)('twa:w-[70px] twa:p-0', restProps.className), onChange: (event) => {
+        }, className), children: [(0, jsx_runtime_1.jsx)(Input_1.default, { ...restProps, as: undefined, disabled: props.disabled, className: (0, twMerge_1.twMerge)('ab-ColorPicker-swatch'), onChange: (event) => {
                     /**
                      * The value is not in the map when the color is not in the palette.
                      */
                     const color = optionsMap[event.target.value] ?? event.target.value;
                     debouncedOnChange(color);
                 }, value: preparedValue, ref: ref, type: "color", list: "ABcolorChoices", title: props.title }), ABcolorChoices, includeAlpha && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Opacity" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:min-h-input", children: (0, jsx_runtime_1.jsx)(Input_1.default, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
-                                const color = (0, tinycolor2_1.default)(value).setAlpha(event.target.value).toRgbString();
+                                const color = (0, tinycolor2_1.default)((0, StyleHelper_1.getVariableColor)(value))
+                                    .setAlpha(event.target.value)
+                                    .toRgbString();
                                 debouncedOnChange(color);
                             }, min: 0, max: 1, step: 0.01, type: "range" }) })] }))] }));
 });

package/src/components/ColorPicker/OptionalColorPicker.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+export type OptionalColorPickerProps = {
+    api: AdaptableApi;
+    value: string | undefined;
+    onChange: (color: string | undefined) => void;
+    defaultColor?: string;
+    disabled?: boolean;
+    includeAlpha?: boolean;
+    className?: string;
+};
+export declare const OptionalColorPicker: React.FC<OptionalColorPickerProps>;

package/src/components/ColorPicker/OptionalColorPicker.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionalColorPicker = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Flex_1 = require("../Flex");
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const twMerge_1 = require("../../twMerge");
+const ColorPicker_1 = require("./ColorPicker");
+const DEFAULT_COLOR = '#000000';
+const OptionalColorPicker = (props) => {
+    const { api, value, onChange, defaultColor = DEFAULT_COLOR, disabled = false, includeAlpha = true, className, } = props;
+    const pickerRef = (0, react_1.useRef)(null);
+    const pendingOpenRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (pendingOpenRef.current && value && pickerRef.current) {
+            pendingOpenRef.current = false;
+            pickerRef.current.click();
+        }
+    }, [value]);
+    const handleActivate = () => {
+        pendingOpenRef.current = true;
+        onChange(defaultColor);
+    };
+    if (!value) {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: (0, twMerge_1.twMerge)('OptionalColorPicker twa:gap-1', className), children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: disabled, className: "ab-OptionalColorPicker-empty", onClick: handleActivate, "aria-label": "Set colour", title: "Click to set colour" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-muted-foreground", children: "None" })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: (0, twMerge_1.twMerge)('OptionalColorPicker twa:gap-1', className), children: [(0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { ref: pickerRef, api: api, value: value, disabled: disabled, includeAlpha: includeAlpha, onChange: onChange }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "close", variant: "text", disabled: disabled, tooltip: "Clear colour", onClick: () => onChange(undefined) })] }));
+};
+exports.OptionalColorPicker = OptionalColorPicker;

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

@@ -1 +1,2 @@
 export * from './ColorPicker';
+export * from './OptionalColorPicker';

package/src/components/ColorPicker/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ColorPicker"), exports);
+tslib_1.__exportStar(require("./OptionalColorPicker"), exports);

package/src/components/Combobox/comboboxUtils.d.ts

@@ -77,6 +77,7 @@ export type ComboboxCommonProps<T extends ComboboxItemType> = {
      */
     renderSearchInputTrailing?: React.ReactNode | (() => React.ReactNode);
     renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props['render'];
+    showTrigger?: boolean;
 };
 export type AdaptableComboboxProps<T extends ComboboxItemType> = ComboboxCommonProps<T> & ComboboxDataProps<T>;
 export declare function valueToItem<T extends ComboboxItemType>(stringValue: T['value'] | undefined | null, lookup: Map<any, T>): T | undefined;

package/src/components/Combobox/index.js

@@ -9,7 +9,6 @@ const utils_1 = require("../../lib/utils");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");
 const input_group_1 = require("../ui/input-group");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const comboboxUtils_1 = require("./comboboxUtils");
 const VirtualizedList_1 = require("./VirtualizedList");
 const CheckBox_1 = require("../CheckBox");
@@ -185,15 +184,15 @@ function useCreatable(props, allItems, itemByValue) {
         if (props.isCreatable && itemsToCreate.length > 0) {
             savingCreatableItem = true;
             itemsAllNumeric = allItems.every((item) => !item.creatable ? typeof item.value === 'number' : true);
+            newCreatedItems = itemsToCreate.map((item) => ({
+                ...item,
+                creatable: true,
+                created: true,
+                // if all other items are numeric, and the value for the created item is a valid number, then convert the value to a number
+                // we'll also have to correctly call onValueChange with the new value
+                value: itemsAllNumeric && !Number.isNaN(Number(item.value)) ? Number(item.value) : item.value,
+            }));
             setAlreadySavedCreatableItems((current) => {
-                newCreatedItems = itemsToCreate.map((item) => ({
-                    ...item,
-                    creatable: true,
-                    created: true,
-                    // if all other items are numeric, and the value for the created item is a valid number, then convert the value to a number
-                    // we'll also have to correctly call onValueChange with the new value
-                    value: itemsAllNumeric && !Number.isNaN(Number(item.value)) ? Number(item.value) : item.value,
-                }));
                 const mergedItems = [...current, ...newCreatedItems];
                 const seenValues = new Set();
                 return mergedItems.filter((item) => {
@@ -361,7 +360,7 @@ const SingleCombobox_MenuListSearchable = (props) => {
                 'twa:flex twa:w-full twa:cursor-default twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-transparent twa:py-2 twa:pr-2 twa:pl-2.5 twa:text-sm twa:whitespace-nowrap twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:select-none twa:focus:border-ring twa:focus:ring-3 twa:focus:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:data-placeholder:text-muted-foreground twa:h-9', triggerClassName), disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { placeholder: (0, jsx_runtime_1.jsx)("span", { children: props.placeholder }), children: (value) => {
                         return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "twa:flex twa:flex-1 twa:truncate twa:text-left", "data-slot": "combobox-value", children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { placeholder: (0, jsx_runtime_1.jsx)("span", { children: props.placeholder }) }) }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", "data-slot": "combobox-value-input", readOnly: true, value: value ? (0, comboboxUtils_1.getItemTextLabel)(value) : '' }), props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), value && showClear ? ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled, onMouseDown: (e) => {
                                         e.preventBaseUIHandler();
-                                    } })) : ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", className: 'twa:min-h-auto!', children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:shrink-0 twa:text-muted-foreground" }) }))] }));
+                                    } })) : props.showTrigger !== false ? ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", className: 'twa:min-h-auto!', children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:shrink-0 twa:text-muted-foreground" }) })) : null] }));
                     } }) }), (0, jsx_runtime_1.jsxs)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, className: props.contentClassName, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxInput, { className: searchInputClassName, placeholder: props.placeholder, showClear: false, showTrigger: false, disabled: isDisabled, ref: searchInputRef, onFocus: handleFocus, onBlur: handleBlur }), (0, jsx_runtime_1.jsx)(AdaptableComboboxList, { renderItemLabel: props.renderItemLabel, searchable: props.searchable, emptyText: emptyText, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading })] })] }));
 };
 const SingleCombobox_SimpleSearchable = (props) => {
@@ -372,7 +371,7 @@ const SingleCombobox_SimpleSearchable = (props) => {
     const searchable = props.searchable === false ? false : 'inline';
     const isDisabled = props.disabled;
     const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
-    return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, allItems: allItems, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxInput, { className: className, groupRef: anchor, placeholder: props.placeholder, showClear: showClear, showTrigger: true, isLoading: props.isLoading, disabled: isDisabled, readOnly: searchable === false, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], onFocus: props.onFocus, onBlur: props.onBlur }), (0, jsx_runtime_1.jsx)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: (0, jsx_runtime_1.jsx)(AdaptableComboboxList, { searchable: props.searchable, renderItemLabel: props.renderItemLabel, emptyText: emptyText, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, allItems: allItems, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxInput, { className: className, groupRef: anchor, placeholder: props.placeholder, showClear: showClear, showTrigger: props.showTrigger !== false, isLoading: props.isLoading, disabled: isDisabled, readOnly: searchable === false, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], onFocus: props.onFocus, onBlur: props.onBlur }), (0, jsx_runtime_1.jsx)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: (0, jsx_runtime_1.jsx)(AdaptableComboboxList, { searchable: props.searchable, renderItemLabel: props.renderItemLabel, emptyText: emptyText, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
 };
 const MultiCombobox_SimpleSearchable = (props) => {
     const anchor = (0, combobox_1.useComboboxAnchor)();
@@ -405,13 +404,13 @@ const MultiCombobox_SimpleSearchable = (props) => {
                     if (!menuOpen) {
                         onOpenChange(true);
                     }
-                }, ref: anchor, className: (0, clsx_1.default)('twa:relative', props.className), children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { children: (selectedItems) => {
+                }, ref: anchor, className: (0, utils_1.cn)('twa:relative', props.className), children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { children: (selectedItems) => {
                         const shouldKeepTrigger = props.searchable === false && selectedItems.length > 0;
                         return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxChipsInput, { placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: props.searchable === false, onFocus: props.onFocus, onBlur: props.onBlur, className: props.searchable === false && selectedItems.length > 0
                                                 ? 'twa:absolute! twa:inset-0 twa:min-h-auto! twa:max-h-auto!' // so we fill the parent container and on click we can open the combobox as usual
-                                                : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })) : null, (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "combobox-toggle", className: (0, clsx_1.default)(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
+                                                : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })) : null, (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "combobox-toggle", className: (0, utils_1.cn)(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
                                                             ? ''
-                                                            : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
+                                                            : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
                     } }) }), (0, jsx_runtime_1.jsx)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: (0, jsx_runtime_1.jsx)(AdaptableComboboxList, { searchable: props.searchable, emptyText: emptyText, renderItemLabel: props.renderItemLabel, showSelectAllCheckbox: props.showSelectAllCheckbox, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, totalCount: allItems.length, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
 };
 const MultiComboboxChips = (props) => {
@@ -497,15 +496,15 @@ const MultiCombobox_MenuListSearchable = (props) => {
                     hasFocusRef.current = false;
                     props.onBlur?.();
                 }
-            }, className: (0, clsx_1.default)('twa:relative', props.className, _props?.className), children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { children: (selectedItems) => {
-                    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })), (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "combobox-toggle", 
+            }, className: (0, utils_1.cn)('twa:relative', props.className, _props?.className), children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxValue, { children: (selectedItems) => {
+                    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : ((0, jsx_runtime_1.jsx)(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1" })), (0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group", children: (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "combobox-toggle", 
                                                 // we already have the role="combobox" on the parent
                                                 // so we want to avoid the same role twice in the component,
                                                 // hence we use the role="widget" here.
-                                                role: "widget" }), "data-slot": "combobox-toggle", className: (0, clsx_1.default)(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled }), showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] }));
+                                                role: "widget" }), "data-slot": "combobox-toggle", className: (0, utils_1.cn)(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && (0, jsx_runtime_1.jsx)(combobox_1.ComboboxClear, { disabled: isDisabled })] }) })] }));
                 } }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { nativeButton: false, render: renderChips })) : (renderChips(undefined)), (0, jsx_runtime_1.jsxs)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxInput, { placeholder: 'Filter...', showClear: false, ref: searchInputRef, showTrigger: false, disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, role: "searchbox", className: 'twa:min-h-input', children: typeof props.renderSearchInputTrailing === 'function'
+    return ((0, jsx_runtime_1.jsxs)(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? ((0, jsx_runtime_1.jsx)(combobox_1.ComboboxTrigger, { nativeButton: false, render: renderChips, icon: props.showTrigger !== false ? undefined : null })) : (renderChips(undefined)), (0, jsx_runtime_1.jsxs)(combobox_1.ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [(0, jsx_runtime_1.jsx)(combobox_1.ComboboxInput, { placeholder: 'Filter...', showClear: false, ref: searchInputRef, showTrigger: false, disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, role: "searchbox", className: 'twa:min-h-input', children: typeof props.renderSearchInputTrailing === 'function'
                             ? props.renderSearchInputTrailing()
                             : undefined }), (0, jsx_runtime_1.jsx)(AdaptableComboboxList, { renderItemLabel: props.renderItemLabel, emptyText: emptyText, searchable: props.searchable, showSelectAllCheckbox: props.showSelectAllCheckbox, selectAllCheckboxValue: props.selectAllCheckboxValue, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, totalCount: allItems.length, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading })] })] }));
 };
@@ -541,6 +540,8 @@ const GridFilterCombobox = (props) => {
         virtualized: true,
         resizable: true,
         showClear: false,
+        // don't show a chevron icon in the grid filter combobox
+        showTrigger: false,
         renderInputValues: (items) => {
             let children = items.map((item) => (0, comboboxUtils_1.getItemTextLabel)(item)).join(', ');
             if (items.length === 0) {

package/src/components/Dashboard/DashboardManager.js

@@ -5,8 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const ModuleManager_1 = require("../DragAndDropContext/ModuleManager");
 const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled, }) => {
-    const moduleService = api.internalApi.getModuleService();
-    const moduleInfo = moduleService.getModuleInfoByModule('Dashboard');
     const moduleTabs = tabs.map((tab) => {
         return {
             Name: tab.Name,
@@ -19,7 +17,7 @@ const DashboardManager = ({ tabs, onTabsChange, availableToolbars, api, disabled
             Toolbars: tab.Items,
         }));
         onTabsChange(dashboardTabs);
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: moduleTabs, tabsTitle: moduleInfo.FriendlyName + ' Tabs', unusedPanelTitle: 'Available Toolbars', dragItemText: "Drag into a Tab below" }));
+    }, [onTabsChange]);
+    return ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { dragScope: "dashboard-tabs", layout: "rows", availableItems: availableToolbars, disabled: disabled, onTabsChange: handleTabsChange, tabs: moduleTabs }));
 };
 exports.default = DashboardManager;

package/src/components/Dialog/index.js

@@ -4,6 +4,7 @@ exports.Dialog = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../lib/utils");
 const react_1 = require("react");
 const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
 const captureTabNavigation_1 = tslib_1.__importDefault(require("../utils/captureTabNavigation"));
@@ -13,7 +14,6 @@ const useAutoFocus_1 = tslib_1.__importDefault(require("../utils/useAutoFocus"))
 const icons_1 = require("../icons");
 const WindowModal_1 = require("../WindowModal");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twUtils_1 = require("../twUtils");
 const baseClassName = 'ab-Dialog';
 exports.Dialog = React.forwardRef((props, dialogRef) => {
@@ -99,7 +99,7 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
     if (!isOpen) {
         return null;
     }
-    const closeButton = showCloseButton ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: (0, clsx_1.default)(`${baseClassName}__close-button twa:p-1`, 'twa:text-accentlight', 'twa:text-shadow-[0_1px_0_#fff]', `twa:text-3 twa:cursor-pointer twa:leading-none twa:font-bold`, 'twa:absolute twa:top-[6px] twa:right-[6px]'), children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { size: 20, name: "close" }) })) : null;
+    const closeButton = showCloseButton ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: (0, utils_1.cn)(`${baseClassName}__close-button twa:p-1`, 'twa:text-accentlight', 'twa:text-shadow-[0_1px_0_#fff]', `twa:text-3 twa:cursor-pointer twa:leading-none twa:font-bold`, 'twa:absolute twa:top-[6px] twa:right-[6px]'), children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { size: 20, name: "close" }) })) : null;
     const setPreventDismissFlag = (e) => {
         if (dismissOnClickOutside) {
             e.nativeEvent.preventDialogDismiss = true;
@@ -110,8 +110,8 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);
             }
-        }, onKeyDown: onKeyDown, className: (0, clsx_1.default)('twa:relative', 'twa:bg-background', 'twa:text-foreground', 'twa:fill-foreground', 'twa:rounded-standard', 'twa:flex twa:flex-col', twUtils_1.targetOwn.focusOutline, twUtils_1.targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef, children: [children, closeButton] }));
-    const content = fixed ? ((0, jsx_runtime_1.jsx)("div", { onClick: setPreventDismissFlag, className: (0, clsx_1.default)(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center'), children: box })) : (box);
+        }, onKeyDown: onKeyDown, className: (0, utils_1.cn)('twa:relative', 'twa:bg-background', 'twa:text-foreground', 'twa:fill-foreground', 'twa:rounded-standard', 'twa:flex twa:flex-col', twUtils_1.targetOwn.focusOutline, twUtils_1.targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef, children: [children, closeButton] }));
+    const content = fixed ? ((0, jsx_runtime_1.jsx)("div", { onClick: setPreventDismissFlag, className: (0, utils_1.cn)(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center'), children: box })) : (box);
     if (windowModal) {
         return (0, jsx_runtime_1.jsx)(WindowModal_1.WindowModal, { ...windowModalProps, children: content });
     }