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

package/src/View/Layout/Wizard/sections/columnLayoutHelpers.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLUMN_SORT_OPTIONS = exports.COLUMN_PINNING_OPTIONS = void 0;
+exports.getLayoutPinnedColumnIds = getLayoutPinnedColumnIds;
+exports.hasExplicitLayoutSizing = hasExplicitLayoutSizing;
+exports.getLayoutExplicitSizedColumnIds = getLayoutExplicitSizedColumnIds;
+exports.formatColumnSizingBrief = formatColumnSizingBrief;
+exports.getExplicitSizingDisplayValues = getExplicitSizingDisplayValues;
+exports.formatColumnInspectorPinning = formatColumnInspectorPinning;
+exports.formatColumnInspectorSizing = formatColumnInspectorSizing;
+exports.formatColumnInspectorSorting = formatColumnInspectorSorting;
+exports.getColumnSortSelection = getColumnSortSelection;
+exports.applyColumnPinChange = applyColumnPinChange;
+exports.applyColumnSortChange = applyColumnSortChange;
+exports.applyColumnSizingFieldChange = applyColumnSizingFieldChange;
+exports.COLUMN_PINNING_OPTIONS = [
+    { value: 'left', label: 'Left' },
+    { value: 'None', label: 'None' },
+    { value: 'right', label: 'Right' },
+];
+exports.COLUMN_SORT_OPTIONS = [
+    { value: 'Asc', label: 'Asc' },
+    { value: 'Desc', label: 'Desc' },
+    { value: 'None', label: 'None' },
+];
+function getLayoutPinnedColumnIds(layout, side) {
+    const pinning = layout.ColumnPinning ?? {};
+    return Object.entries(pinning)
+        .filter(([, pin]) => pin === side)
+        .map(([columnId]) => columnId);
+}
+/** Whether this column has sizing stored in the Layout that differs from grid defaults. */
+function hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth) {
+    if (!sizing) {
+        return false;
+    }
+    if (sizing.Flex != null) {
+        return true;
+    }
+    if (sizing.MinWidth != null || sizing.MaxWidth != null) {
+        return true;
+    }
+    if (sizing.Width != null) {
+        if (resolveDefaultWidth) {
+            return sizing.Width !== resolveDefaultWidth(columnId);
+        }
+        return true;
+    }
+    return false;
+}
+function getLayoutExplicitSizedColumnIds(layout, resolveDefaultWidth) {
+    const sizing = layout.ColumnSizing ?? {};
+    return Object.keys(sizing).filter((columnId) => hasExplicitLayoutSizing(columnId, sizing[columnId], resolveDefaultWidth));
+}
+function formatColumnSizingBrief(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return '';
+    }
+    const display = getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth);
+    const parts = [];
+    if (display.flex != null) {
+        parts.push(`flex ${display.flex}`);
+    }
+    else if (display.width != null) {
+        parts.push(String(display.width));
+    }
+    if (display.minWidth != null) {
+        parts.push(`min ${display.minWidth}`);
+    }
+    if (display.maxWidth != null) {
+        parts.push(`max ${display.maxWidth}`);
+    }
+    return parts.join(', ');
+}
+/** Width/flex values to show in the sizing editor (default grid widths are omitted). */
+function getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth) {
+    if (!sizing) {
+        return {
+            width: undefined,
+            flex: undefined,
+            minWidth: undefined,
+            maxWidth: undefined,
+        };
+    }
+    const width = sizing.Width != null &&
+        (!resolveDefaultWidth || sizing.Width !== resolveDefaultWidth(columnId))
+        ? sizing.Width
+        : undefined;
+    return {
+        width,
+        flex: sizing.Flex ?? undefined,
+        minWidth: sizing.MinWidth ?? undefined,
+        maxWidth: sizing.MaxWidth ?? undefined,
+    };
+}
+function formatColumnInspectorPinning(layout, columnId) {
+    const pin = layout.ColumnPinning?.[columnId];
+    if (pin === 'left') {
+        return 'Left';
+    }
+    if (pin === 'right') {
+        return 'Right';
+    }
+    return 'None';
+}
+function formatColumnInspectorSizing(columnId, sizing, resolveDefaultWidth) {
+    if (!hasExplicitLayoutSizing(columnId, sizing, resolveDefaultWidth)) {
+        return 'Default';
+    }
+    const display = getExplicitSizingDisplayValues(columnId, sizing, resolveDefaultWidth);
+    const parts = [];
+    if (display.width != null) {
+        parts.push(String(display.width));
+    }
+    if (display.flex != null) {
+        parts.push(`flex ${display.flex}`);
+    }
+    if (display.minWidth != null) {
+        parts.push(`min ${display.minWidth}`);
+    }
+    if (display.maxWidth != null) {
+        parts.push(`max ${display.maxWidth}`);
+    }
+    return parts.length ? parts.join(', ') : 'Default';
+}
+function formatColumnInspectorSorting(layout, columnId) {
+    return getColumnSortSelection(layout, columnId);
+}
+function getColumnSortSelection(layout, columnId) {
+    const sort = (layout.ColumnSorts ?? []).find((entry) => entry.ColumnId === columnId);
+    return sort?.SortOrder ?? 'None';
+}
+function applyColumnPinChange(layout, columnId, pinning) {
+    const ColumnPinning = { ...layout.ColumnPinning };
+    if (pinning) {
+        ColumnPinning[columnId] = pinning;
+    }
+    else {
+        delete ColumnPinning[columnId];
+    }
+    return {
+        ...layout,
+        ColumnPinning,
+    };
+}
+function applyColumnSortChange(layout, columnId, sortOrder) {
+    const existing = layout.ColumnSorts ?? [];
+    if (sortOrder === 'None') {
+        return {
+            ...layout,
+            ColumnSorts: existing.filter((entry) => entry.ColumnId !== columnId),
+        };
+    }
+    const current = existing.find((entry) => entry.ColumnId === columnId);
+    if (current) {
+        return {
+            ...layout,
+            ColumnSorts: existing.map((entry) => entry.ColumnId === columnId ? { ...entry, SortOrder: sortOrder } : entry),
+        };
+    }
+    return {
+        ...layout,
+        ColumnSorts: [...existing, { ColumnId: columnId, SortOrder: sortOrder }],
+    };
+}
+function applyColumnSizingFieldChange(layout, columnId, field, value, resolveDefaultWidth) {
+    const ColumnSizing = { ...layout.ColumnSizing };
+    const colSizingForCol = { ...(ColumnSizing[columnId] ?? {}) };
+    const next = { ...colSizingForCol };
+    switch (field) {
+        case 'width':
+            if (value == null || value === resolveDefaultWidth(columnId)) {
+                delete next.Width;
+            }
+            else {
+                delete next.Flex;
+                next.Width = value;
+            }
+            break;
+        case 'flex':
+            if (value == null) {
+                delete next.Flex;
+            }
+            else {
+                delete next.Width;
+                next.Flex = value;
+            }
+            break;
+        case 'minWidth':
+            if (value == null) {
+                delete next.MinWidth;
+            }
+            else {
+                next.MinWidth = value;
+            }
+            break;
+        case 'maxWidth':
+            if (value == null) {
+                delete next.MaxWidth;
+            }
+            else {
+                next.MaxWidth = value;
+            }
+            break;
+    }
+    if (hasExplicitLayoutSizing(columnId, next, resolveDefaultWidth)) {
+        ColumnSizing[columnId] = next;
+    }
+    else {
+        delete ColumnSizing[columnId];
+    }
+    return {
+        ...layout,
+        ColumnSizing,
+    };
+}

package/src/View/Layout/Wizard/sections/layoutWizardAccordionHelpers.d.ts

@@ -0,0 +1,8 @@
+import { Layout, PivotLayout, TableLayout } from '../../../../types';
+export declare function getLayoutWizardInitialExpandedCardId(layoutWizardMode: 'create' | 'edit' | undefined, firstCardId: string, isSectionConfigured: boolean): string | null;
+export declare function isColumnsSectionConfigured(layout: TableLayout): boolean;
+export declare function isRowGroupingSectionConfigured(layout: Layout): boolean;
+export declare function isPivotRowGroupingSectionConfigured(layout: PivotLayout): boolean;
+export declare function isTableAggregationsSectionConfigured(layout: TableLayout): boolean;
+export declare function isPivotAggregationsSectionConfigured(layout: PivotLayout): boolean;
+export declare function isPivotColumnsSectionConfigured(layout: PivotLayout): boolean;

package/src/View/Layout/Wizard/sections/layoutWizardAccordionHelpers.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLayoutWizardInitialExpandedCardId = getLayoutWizardInitialExpandedCardId;
+exports.isColumnsSectionConfigured = isColumnsSectionConfigured;
+exports.isRowGroupingSectionConfigured = isRowGroupingSectionConfigured;
+exports.isPivotRowGroupingSectionConfigured = isPivotRowGroupingSectionConfigured;
+exports.isTableAggregationsSectionConfigured = isTableAggregationsSectionConfigured;
+exports.isPivotAggregationsSectionConfigured = isPivotAggregationsSectionConfigured;
+exports.isPivotColumnsSectionConfigured = isPivotColumnsSectionConfigured;
+function getLayoutWizardInitialExpandedCardId(layoutWizardMode, firstCardId, isSectionConfigured) {
+    if (layoutWizardMode !== 'create' || isSectionConfigured) {
+        return null;
+    }
+    return firstCardId;
+}
+function isColumnsSectionConfigured(layout) {
+    if ((layout.TableColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.ColumnPinning && Object.keys(layout.ColumnPinning).length > 0) {
+        return true;
+    }
+    if ((layout.ColumnSorts?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.ColumnSizing && Object.keys(layout.ColumnSizing).length > 0) {
+        return true;
+    }
+    return false;
+}
+function isRowGroupingSectionConfigured(layout) {
+    return (layout.RowGroupedColumns?.length ?? 0) > 0;
+}
+function isPivotRowGroupingSectionConfigured(layout) {
+    return (layout.PivotGroupedColumns?.length ?? 0) > 0;
+}
+function isTableAggregationsSectionConfigured(layout) {
+    if ((layout.TableAggregationColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.GrandTotalRow != null && layout.GrandTotalRow !== false) {
+        return true;
+    }
+    return false;
+}
+function isPivotAggregationsSectionConfigured(layout) {
+    if ((layout.PivotAggregationColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.GrandTotalRow != null && layout.GrandTotalRow !== false) {
+        return true;
+    }
+    if (layout.PivotGrandTotal != null && layout.PivotGrandTotal !== false) {
+        return true;
+    }
+    if (layout.PivotColumnTotal != null && layout.PivotColumnTotal !== false) {
+        return true;
+    }
+    return false;
+}
+function isPivotColumnsSectionConfigured(layout) {
+    if ((layout.PivotColumns?.length ?? 0) > 0) {
+        return true;
+    }
+    if (layout.PivotResultColumnsOrder) {
+        return true;
+    }
+    if ((layout.ColumnSorts?.length ?? 0) > 0) {
+        return true;
+    }
+    return false;
+}

package/src/View/Layout/Wizard/sections/layoutWizardColumns.d.ts

@@ -0,0 +1,11 @@
+import { AdaptableColumn } from '../../../../AdaptableState/Common/AdaptableColumn';
+import type { IAdaptable } from '../../../../AdaptableInterfaces/IAdaptable';
+import type { Layout } from '../../../../../types';
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = "twa:!py-1 twa:!px-1.5";
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = "twa:gap-4";
+/** Narrow search field (matches Visibility list column width, not full card width). */
+export declare const LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = "twa:w-[12rem] twa:shrink-0 twa:min-w-0";
+/** Columns shown in Layout wizard column steps, in layout table order. */
+export declare function getLayoutWizardOrderedColumns(adaptable: IAdaptable, layout: Layout): AdaptableColumn[];

package/src/View/Layout/Wizard/sections/layoutWizardColumns.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = exports.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = exports.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = void 0;
+exports.getLayoutWizardOrderedColumns = getLayoutWizardOrderedColumns;
+const tslib_1 = require("tslib");
+const ColumnApiImpl_1 = require("../../../../Api/Implementation/ColumnApiImpl");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
+const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const wizardColumnListStyles_1 = require("../../../Components/wizardColumnListStyles");
+/** ValueSelector row sizing — matches Visibility and Order list rows. */
+exports.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_OPTION_CLASS;
+/** Compact list header — spacing between Select All, Show Selected Only, and search. */
+exports.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_HEADER_CLASS;
+/** Narrow search field (matches Visibility list column width, not full card width). */
+exports.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS = wizardColumnListStyles_1.WIZARD_COLUMN_LIST_SEARCH_CLASS;
+/** Columns shown in Layout wizard column steps, in layout table order. */
+function getLayoutWizardOrderedColumns(adaptable, layout) {
+    const hasSelectionColumn = adaptable.api.columnApi
+        .getColumns()
+        .some((col) => col.isGeneratedSelectionColumn);
+    const allColumns = adaptable.api.columnApi
+        .getUIAvailableColumns()
+        .filter((col) => !col.isGeneratedRowGroupColumn)
+        .filter((col) => !col.isGeneratedPivotResultColumn)
+        .filter((col) => !col.isGeneratedSelectionColumn);
+    if (layout.RowGroupedColumns && layout.RowGroupedColumns.length > 0) {
+        if (layout.RowGroupDisplayType === 'single') {
+            allColumns.unshift((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
+        }
+        else if (layout.RowGroupDisplayType === 'multi') {
+            [...layout.RowGroupedColumns].reverse().forEach((col) => {
+                const groupCol = (0, ColumnApiImpl_1.generateAutoRowGroupColumnForColumn)(adaptable.api.columnApi.getColumnWithColumnId(col));
+                allColumns.unshift(groupCol);
+            });
+        }
+    }
+    if (adaptable.api.gridApi.isTreeDataGrid() &&
+        !allColumns.find((col) => col.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
+        allColumns.unshift((0, ColumnApiImpl_1.generateAutoTreeSingleColumn)());
+    }
+    if (hasSelectionColumn) {
+        allColumns.unshift((0, ColumnApiImpl_1.generateSelectionColumn)());
+    }
+    const colIdToCol = allColumns.reduce((acc, col) => {
+        if (col) {
+            acc[col.columnId] = col;
+        }
+        return acc;
+    }, {});
+    let tableColumns = layout.TableColumns ?? [];
+    if (hasSelectionColumn && !tableColumns.includes(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
+        tableColumns = [GeneralConstants_1.AG_GRID_SELECTION_COLUMN, ...tableColumns];
+    }
+    return ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), tableColumns, { sortUnorderedItems: false })
+        .map((colId) => colIdToCol[colId])
+        .filter(Boolean);
+}

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),r=require("react/jsx-runtime"),t=e.__importStar(require("react")),o=require("../../components/Logo"),n=require("../../components/Flex"),i={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=e=>{const r=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[t,o]of r)if(e.style[t]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect(()=>{const e=setInterval(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.style&&(l.current.style.border=i.border,l.current.style.padding=i.padding,l.current.style.fontWeight=`${i.fontWeight}`,l.current.style.margin=i.margin,l.current.style.fontSize=i.fontSize,l.current.style.color=i.color,l.current.style.background=i.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")},5e3);return()=>clearTimeout(e)},[]),(0,r.jsxs)(n.Flex,{style:i,ref:l,children:[(0,r.jsx)(o.Logo,{style:{marginRight:10}}),(0,r.jsx)("div",{children:e.children})]})};exports.LicenseWatermark=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LicenseWatermark=void 0;const e=require("tslib"),r=require("react/jsx-runtime"),t=e.__importStar(require("react")),o=require("../../components/Logo"),n=require("../../components/Flex"),i={border:"1px solid red",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=e=>{const r=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[t,o]of r)if(e.style[t]===o)return!1;return!0},l=e=>{const l=t.useRef(null);return t.useEffect(()=>{const e=setInterval(()=>{l.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(l.current)||alert("It is not allowed to modify the Adaptable watermark."),l?.current?.style&&(l.current.style.border=i.border,l.current.style.padding=i.padding,l.current.style.fontWeight=`${i.fontWeight}`,l.current.style.margin=i.margin,l.current.style.fontSize=i.fontSize,l.current.style.color=i.color,l.current.style.background=i.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")},5e3);return()=>clearTimeout(e)},[]),(0,r.jsxs)(n.Flex,{style:i,ref:l,children:[(0,r.jsx)(o.Logo,{style:{marginRight:10}}),(0,r.jsx)("div",{children:e.children})]})};exports.LicenseWatermark=l;

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.d.ts

@@ -5,5 +5,5 @@ export interface NamedQueryExpressionWizardSectionProps {
     onChange: (data: NamedQuery) => void;
 }
 export declare const isValidNamedQueryExpression: (data: NamedQuery, api: AdaptableApi) => string | true;
-export declare const renderNamedQueryExpressionSummary: (data: NamedQuery) => React.JSX.Element;
+export declare const renderNamedQueryExpressionSummary: (data: NamedQuery, api: AdaptableApi) => React.JSX.Element;
 export declare const NamedQueryExpressionWizardSection: (props: NamedQueryExpressionWizardSectionProps) => React.JSX.Element;

package/src/View/NamedQuery/Wizard/NamedQueryExpressionWizardSection.js

@@ -19,8 +19,7 @@ const isValidNamedQueryExpression = (data, api) => {
     return valid;
 };
 exports.isValidNamedQueryExpression = isValidNamedQueryExpression;
-const renderNamedQueryExpressionSummary = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+const renderNamedQueryExpressionSummary = (data, api) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: ["Expression: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: api.internalApi.getAdaptableQueryExpressionText(data) })] }));
 };
 exports.renderNamedQueryExpressionSummary = renderNamedQueryExpressionSummary;

package/src/View/Note/NoteEditor.js

@@ -8,7 +8,7 @@ const React = tslib_1.__importStar(require("react"));
 const Textarea_1 = tslib_1.__importDefault(require("../../components/Textarea"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const showPopupCloseButton = api.optionsApi.getNoteOptions()?.showPopupCloseButton ?? true;
@@ -29,7 +29,7 @@ const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     if (note === undefined || note === null) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Textarea_1.default, { readOnly: isReadonly, ref: textAreaRef, className: (0, clsx_1.default)('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Textarea_1.default, { readOnly: isReadonly, ref: textAreaRef, className: (0, utils_1.cn)('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
                     'twa:pr-[30px]': showPopupCloseButton,
                     'twa:pr-0': !showPopupCloseButton,
                 }), value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -14,10 +14,9 @@ const Tabs_1 = require("../../components/Tabs");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const useQuickSearchDebounced_1 = require("./useQuickSearchDebounced");
 const QuickSearchInput_1 = require("./QuickSearchInput");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const Card_1 = require("../../components/Card");
 const QuickSearchStyleHelper_1 = require("../../Utilities/Helpers/QuickSearchStyleHelper");
-const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:text-2", children: helpText }), (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", headerText: headerText, api: api, Style: style, UpdateStyle: updateStyle })] }));
+const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: headerText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", api: api, Style: style, UpdateStyle: updateStyle }) })] }));
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const [state, setState] = (0, react_1.useState)({
@@ -29,7 +28,7 @@ const QuickSearchPopupComponent = (props) => {
             checked;
     };
     const isServerSideRowModel = props.api.agGridApi.getGridOption('rowModelType') === 'serverSide';
-    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-4", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Search Text" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1 twa:w-fit", children: (0, jsx_runtime_1.jsx)(QuickSearchInput_1.QuickSearchInput, {}) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Behaviour" }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { className: "twa:p-1", gap: 2, children: [(0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:text-2 twa:w-fit", children: ["Filter Grid when searching to only show rows with matching cells; ", (0, jsx_runtime_1.jsx)("b", { children: "use with care" }), " as can cause performance issues"] }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" })] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Matching Styles" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-0", children: isServerSideRowModel ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })) : ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "text", children: "Text Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "current", children: "Current Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "cell", children: "Cell Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "text", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "current", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "cell", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) })] })) })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), bodyClassName: "twa:gap-3 twa:flex twa:flex-col", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Search Text" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter the text to find across visible grid cells" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1 twa:w-fit", children: (0, jsx_runtime_1.jsx)(QuickSearchInput_1.QuickSearchInput, {}) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Behaviour" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Filter the grid to matching rows only when searching; use with care as this can affect performance" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", gap: 2, children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "filter-quick-search-results", value: "existing", checked: state.RunQueryAfterQuickSearch, disabled: StringExtensions_1.default.IsNotNullOrEmpty(searchText), onChange: onQuickSearchBehaviourChange, children: "Filter using Quick Search Results" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Matching Styles" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure colours and fonts for how search matches appear in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: isServerSideRowModel ? ((0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Server-side row model: styles the whole matching cell.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle })) : ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { defaultValue: "text", className: "twa:min-h-0", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "text", children: "Text Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "current", children: "Current Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "cell", children: "Cell Match" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "text", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pt-2", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Highlights the matching text within each cell (AG Grid Find).", headerText: "Text Matching Style", style: props.QuickSearchTextMatchStyle, updateStyle: props.onSetTextMatchingStyle }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "current", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pt-2", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Applied to the active match when cycling through results.", headerText: "Current Match Style", style: props.QuickSearchCurrentTextMatchStyle, updateStyle: props.onSetCurrentTextMatchingStyle }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "cell", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pt-2", children: (0, jsx_runtime_1.jsx)(QuickSearchStyleEditor, { api: props.api, helpText: "Optional background for whole matching cells. When unset, only matching text is highlighted.", headerText: "Cell Matching Style", style: props.QuickSearchCellMatchStyle, updateStyle: props.onSetCellMatchingStyle }) }) })] })) })] })] }) }));
 };
 function mapStateToProps(state, ownProps) {
     const quickSearch = state.QuickSearch;

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -160,6 +160,6 @@ const ScheduleBuilderWizard = (props) => {
         commit({ customCron: value, preset: 'custom' });
     };
     const timeValue = `${`${hour}`.padStart(2, '0')}:${`${minute}`.padStart(2, '0')}`;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "schedule-setup", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Schedule" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Frequency", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Date", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Pattern", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Days", children: daysMap.map((day) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Day of month", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cron expression", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Time", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) })] }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "schedule-setup", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Schedule" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure when this should run" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Frequency", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "frequency-recurring", className: "twa:mr-2", value: "recurring", checked: !isOneOff, onChange: (checked) => checked && handleFrequencyChange(false), children: "Recurring" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "frequency-one-off", checked: isOneOff, value: "oneoff", onChange: (checked) => checked && handleFrequencyChange(true), children: "One-off" })] }), isOneOff ? ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Date", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "one-off-date", className: "twa:w-[300px]", type: "date", placeholder: "Date", onChange: handleOneOffDateChange, value: oneOffDate }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Pattern", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", "data-name": "recurrence-preset", items: PRESET_OPTIONS, value: preset, placeholder: "Select pattern", onValueChange: handlePresetChange }) }) }), preset === 'selectedDays' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Days", children: daysMap.map((day) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": `day-${day.value}`, className: "twa:ml-2 twa:w-1/3", value: day.value, checked: selectedDays.includes(day.value), onChange: (checked) => handleDayChange(checked, day.value), children: day.label }, day.value))) })), preset === 'monthly' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Day of month", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "day-of-month", className: "twa:w-[120px]", type: "number", min: 1, max: 31, value: dayOfMonth, onChange: handleDayOfMonthChange }) })), preset === 'custom' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cron expression", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "custom-cron", className: "twa:w-[300px]", placeholder: "minute hour day month weekday", value: customCron, onChange: handleCustomCronChange }) }))] })), (isOneOff || preset !== 'custom') && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Time", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "time", className: "twa:w-[300px]", value: timeValue, type: "time", onChange: handleTimeChange }) }))] }) })] }) }));
 };
 exports.ScheduleBuilderWizard = ScheduleBuilderWizard;

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -81,6 +81,6 @@ const ShortcutSettingsWizard = (props) => {
             result,
         };
     }, [shortcut.ShortcutOperation, shortcut.ShortcutValue]);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "shortcut-column-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Key" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Operation" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Value" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Example" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", shortcutOperations_1.SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: 'error' in preview ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-error", children: preview.error })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "shortcut-column-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Key" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Operation" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Value" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Example" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", shortcutOperations_1.SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: 'error' in preview ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-destructive", children: preview.error })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
 };
 exports.ShortcutSettingsWizard = ShortcutSettingsWizard;

package/src/View/SmartEdit/SmartEditPopup.js

@@ -15,7 +15,7 @@ const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
 const PreviewHelper_1 = require("../../Utilities/Helpers/PreviewHelper");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const DropdownButton_1 = require("../../components/DropdownButton");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const Flex_1 = require("../../components/Flex");
 const preventDefault = (e) => e.preventDefault();
@@ -58,7 +58,7 @@ class SmartEditPopupComponent extends React.Component {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
-            }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
+            }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
                                 ? this.props.SmartEditOperation.name
                                 : this.props.SmartEditOperation }), (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), className: "twa:mx-2", type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                                 (this.props.PreviewInfo &&

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -17,8 +17,8 @@ const AdaptablePopover_1 = require("../AdaptablePopover");
 const UIHelper_1 = require("../UIHelper");
 const react_redux_1 = require("react-redux");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const NewSelect_1 = require("../../components/NewSelect");
+const utils_1 = require("../../lib/utils");
 class SmartEditViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -72,7 +72,7 @@ class SmartEditViewPanelComponent extends React.Component {
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, utils_1.cn)(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
                 'twa:flex-nowrap': this.props.viewType === 'Toolbar',
                 'twa:flex-wrap': this.props.viewType !== 'Toolbar',
             }), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'

package/src/View/StateManagement/StateManagementPopup.js

@@ -11,6 +11,6 @@ const ExportDropdown_1 = require("./components/ExportDropdown");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
-    return ((0, jsx_runtime_1.jsxs)(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [(0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { style: { color: 'var(--ab-color-warn)' }, children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mt-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', (0, jsx_runtime_1.jsx)(LoadButton_1.LoadButton, { tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [(0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:text-warn twa:mb-2", children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', (0, jsx_runtime_1.jsx)(LoadButton_1.LoadButton, { tone: "info", variant: "raised", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
 };
 exports.StateManagementPopup = StateManagementPopup;

package/src/View/StateManagement/components/ExportDropdown.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../../types';
-import { DropdownButtonProps } from '../../../components/DropdownButton';
-export interface ExportDropdownProps extends Omit<DropdownButtonProps, 'options' | 'value'> {
+import { type NewDropdownButtonProps } from '../../../components/DropdownButton';
+export interface ExportDropdownProps extends Omit<NewDropdownButtonProps, 'items'> {
     api: AdaptableApi;
     type: 'adaptableState' | 'initialState';
 }