@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -1,30 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Flex } from '../../../components/Flex';
+import { Box, Flex } from '../../../components/Flex';
 import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
 export const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full", children: _jsx(NewScopeComponent, { descriptions: {
-                rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
-                columnScope: 'Changes in selected columns will trigger an Flashing Cell',
-            }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
-                const newData = { ...data, Scope };
-                if (newData.Rule.Predicates) {
-                    const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
-                    newData.Rule = {
-                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
-                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
-                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
-                            if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
-                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
-                            }
-                            return true;
-                        }),
-                    };
-                }
-                props.onChange(newData);
-            } }) }));
+    const availableColumns = React.useMemo(() => api.columnApi
+        .getUIAvailableColumns()
+        .filter((column) => !column.isActionColumn && !api.columnApi.isFdc3Column(column.columnId)), [api]);
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Specify which data changes should trigger cell flashing" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { descriptions: {
+                        rowScope: 'Changes anywhere in the row will trigger a Flashing Cell',
+                        columnScope: 'Changes in selected columns will trigger a Flashing Cell',
+                        dataTypeScope: 'Changes in columns with these Data Types will trigger a Flashing Cell',
+                    }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
+                        const newData = { ...data, Scope };
+                        if (newData.Rule.Predicates) {
+                            const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
+                            newData.Rule = {
+                                Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                    if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
+                                        return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                    }
+                                    return true;
+                                }),
+                            };
+                        }
+                        props.onChange(newData);
+                    } }) })] }));
 };
+export { FlashingCellScopeSummaryContent, FlashingCellScopeSummaryView, renderFlashingCellScopeSummary, } from './FlashingCellScopeSummary';

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -3,14 +3,14 @@ import * as React from 'react';
 import { useRef } from 'react';
 import Input from '../../../components/Input';
 import usePrevious from '../../../components/utils/usePrevious';
-import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { CodeBlock } from '../../../components/CodeBlock';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { CheckBox } from '../../../components/CheckBox';
 import { Box, Flex } from '../../../components/Flex';
 import { Tag } from '../../../components/Tag';
 import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
+import { Card } from '../../../components/Card';
+import { TypeRadio } from '../../Wizard/TypeRadio';
 export const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -22,8 +22,17 @@ export const isSettingsValid = (data, api) => {
     }
     return true;
 };
+const formatFlashTarget = (flashTarget) => {
+    if (!flashTarget) {
+        return 'Not specified';
+    }
+    if (typeof flashTarget === 'string') {
+        return flashTarget;
+    }
+    return flashTarget.join(', ');
+};
 export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
-    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: flashingAlert.Name || 'Not specified' })] }), _jsx(Box, { className: "twa:text-2", children: flashingAlert.FlashDuration === 'always' ? (_jsx(_Fragment, { children: "Flashing is never removed" })) : (_jsxs(_Fragment, { children: ["Flashing is removed after ", _jsx(CodeBlock, { children: flashingAlert.FlashDuration }), ' ', "milliseconds"] })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: flashingAlert.Name || 'Not specified' })] }), _jsx(Box, { className: "twa:text-2", children: flashingAlert.FlashDuration === 'always' ? (_jsx(_Fragment, { children: "Flashing is never removed" })) : (_jsxs(_Fragment, { children: ["Flashing is removed after ", _jsx(CodeBlock, { children: flashingAlert.FlashDuration }), ' ', "milliseconds"] })) }), _jsxs(SummaryText, { children: ["Flash Target ", _jsx(Tag, { children: formatFlashTarget(flashingAlert.FlashTarget) })] })] }));
 };
 export const FlashingAlertSettingsWizardSection = (props) => {
     let { data: flashingCell } = useOnePageAdaptableWizardContext();
@@ -46,7 +55,7 @@ export const FlashingAlertSettingsWizardSection = (props) => {
             inputRef.current?.focus();
         }
     }, [duration, oldDuration]);
-    const handleTypeChange = (type) => {
+    const handleDurationTypeChange = (type) => {
         setDuration(type === 'number' ? numberDuration.current : 'always');
     };
     const handleTargetChange = (type, checked) => {
@@ -67,11 +76,11 @@ export const FlashingAlertSettingsWizardSection = (props) => {
             FlashTarget,
         });
     };
-    return (_jsxs(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full", children: [_jsxs(Tabs, { autoFocus: false, className: "twa:p-2", children: [_jsx(Tabs.Tab, { children: "Flashing Cell Settings" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }) }) }) })] }), _jsxs(Tabs, { autoFocus: false, className: "twa:p-2", children: [_jsx(Tabs.Tab, { children: "Flash Duration" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1, children: "Always" }), duration !== 'always' && (_jsxs(_Fragment, { children: [_jsx(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
-                                                        const value = event.target.value;
-                                                        setDuration(isNaN(Number(value)) ? 500 : Number(value));
-                                                    } }), _jsx(Box, { className: "twa:text-2", children: "ms" })] }))] }) }) }) })] }), ' ', _jsxs(Tabs, { autoFocus: false, className: "twa:p-2", children: [_jsx(Tabs.Tab, { children: "Flash Target" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsxs(FormRow, { label: "", children: [_jsx(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
-                                            flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1, children: "Cell" }), _jsx(CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
-                                            flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1, children: "Row" }), _jsx(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
-                                            flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1, children: "Aggregated Function Cell" })] }) }) })] })] }));
+    const isTargetChecked = (type) => flashingCell?.FlashTarget === type || flashingCell?.FlashTarget?.includes?.(type);
+    return (_jsx(Box, { "data-name": "flashing-cell-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Flashing Cell rule" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "flashing-cell-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Flash Duration" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how long the flash style remains visible after a change" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3", children: [_jsx(TypeRadio, { "data-name": "duration-always", text: "Always", description: "The flash style is never removed automatically", checked: duration === 'always', onClick: () => handleDurationTypeChange('always') }), _jsx(TypeRadio, { "data-name": "duration-timed", text: "Timed", description: "The flash style is removed after a set number of milliseconds", checked: duration !== 'always', onClick: () => handleDurationTypeChange('number') }), duration !== 'always' ? (_jsxs(Flex, { alignItems: "center", className: "twa:ml-6", children: [_jsx(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-24 twa:mr-2", value: duration, onChange: (event) => {
+                                                    const value = event.target.value;
+                                                    const parsed = Number(value);
+                                                    numberDuration.current = isNaN(parsed) ? 500 : parsed;
+                                                    setDuration(numberDuration.current);
+                                                } }), _jsx(Box, { className: "twa:text-2", children: "ms" })] })) : null] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Flash Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which parts of the grid flash when a change occurs" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), checked: isTargetChecked('cell'), children: "Cell" }), _jsx(CheckBox, { "data-name": "flashing-target-row", onChange: (checked) => handleTargetChange('row', checked), checked: isTargetChecked('row'), children: "Row" }), _jsx(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: isTargetChecked('aggFuncCell'), children: "Aggregated Function Cell" })] }) })] })] }) }));
 };

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.d.ts

@@ -1,15 +1,10 @@
 import * as React from 'react';
 import { AdaptableStyle } from '../../../types';
 import { FlashingCellDefinition } from '../../../../types';
-import { BoxProps } from '../../../components/Flex';
 type FlashingAlertStyleWizardSectionProps = {
     flashingAlert?: FlashingCellDefinition;
     onStyleChange: (styleName: 'UpChangeStyle' | 'DownChangeStyle' | 'NeutralChangeStyle', style: AdaptableStyle) => void;
 };
 export declare const FlashingAlertStyleWizardSection: (props: FlashingAlertStyleWizardSectionProps) => React.JSX.Element;
-export interface FlashingCellStyleProps extends Omit<BoxProps & {}, 'data'> {
-    data: FlashingCellDefinition;
-}
-export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;
 export declare const renderFlashingAlertStyleSummary: (flashingAlert: FlashingCellDefinition) => React.JSX.Element;
 export {};

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.js

@@ -1,18 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Tabs } from '../../../components/Tabs';
 import { StyleComponent } from '../../Components/StyleComponent';
-import { StylePreview } from '../../../components/StylePreview';
-import { Box } from '../../../components/Flex';
-const changeStyle = _jsx(Box, { className: "twa:text-2 twa:inline-block", children: "Change style" });
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
+import { FlashingCellStyle } from '../FlashingCellStyle';
+const FLASH_STYLE_CARDS = [
+    {
+        key: 'UpChangeStyle',
+        title: 'Up Change Style',
+        description: 'Style applied when a cell value increases',
+    },
+    {
+        key: 'DownChangeStyle',
+        title: 'Down Change Style',
+        description: 'Style applied when a cell value decreases',
+    },
+    {
+        key: 'NeutralChangeStyle',
+        title: 'Neutral Change Style',
+        description: 'Style applied when a cell value changes but not up or down (e.g. text edits)',
+    },
+];
 export const FlashingAlertStyleWizardSection = (props) => {
     let { data: flashingAlert, api } = useOnePageAdaptableWizardContext();
     flashingAlert = flashingAlert ?? props.flashingAlert;
-    return (_jsx(_Fragment, { children: _jsxs(Tabs, { defaultValue: "up", children: [_jsxs(Tabs.Tab, { value: "up", children: ["Up ", changeStyle] }), _jsx(Tabs.Content, { value: "up", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.UpChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) }) }), _jsxs(Tabs.Tab, { value: "down", children: ["Down ", changeStyle] }), _jsx(Tabs.Content, { value: "down", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.DownChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) }) }), _jsxs(Tabs.Tab, { value: "neutral", children: ["Neutral ", changeStyle] }), _jsx(Tabs.Content, { value: "neutral", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.NeutralChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) }) })] }) }));
-};
-export const FlashingCellStyle = (props) => {
-    const { data, ...boxProps } = props;
-    return (_jsxs(Box, { ...boxProps, children: [_jsxs(StylePreview, { styleObject: props.data.UpChangeStyle, children: ["Up change style ", !props.data.UpChangeStyle ? ' - no style' : ''] }), _jsxs(StylePreview, { styleObject: props.data.DownChangeStyle, className: "twa:mt-2", children: ["Down change style ", !props.data.DownChangeStyle ? ' - no style' : ''] }), _jsxs(StylePreview, { styleObject: props.data.NeutralChangeStyle, className: "twa:mt-2", children: ["Neutral change style ", !props.data.NeutralChangeStyle ? ' - no style' : ''] })] }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: FLASH_STYLE_CARDS.map(({ key, title, description }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: title }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: description })] }), _jsx(Card.Body, { children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert[key] ?? {}, UpdateStyle: (style) => props.onStyleChange(key, style) }) })] }, key))) }));
 };
 export const renderFlashingAlertStyleSummary = (flashingAlert) => {
     return _jsx(FlashingCellStyle, { data: flashingAlert });

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -5,8 +5,7 @@ import { FlashingAlertSettingsWizardSection, renderFlashingAlertSettingsSummary,
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import { FlashingAlertRulesWizardSection, renderFlashingAlertRulesSummary, } from './FlashingCellRulesWizardSection';
 import { FlashingAlertStyleWizardSection, renderFlashingAlertStyleSummary, } from './FlashingCellStyleWizardSection';
-import { FlashingAlertScopeWizardSection } from './FlashingCellScopeWizardSection';
-import { renderScopeSummary } from '../../Alert/Wizard/BaseAlertScopeWizardSection';
+import { FlashingAlertScopeWizardSection, renderFlashingCellScopeSummary } from './FlashingCellScopeWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
 import { isScopeValid } from '../../Components/NewScopeComponent';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
@@ -63,7 +62,7 @@ export const FlashingCellWizard = (props) => {
             {
                 details: 'Set Name, Duration and Target Properties',
                 isValid: isSettingsValid,
-                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }) })),
+                render: () => _jsx(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }),
                 renderSummary: renderFlashingAlertSettingsSummary,
                 title: 'Settings',
             },
@@ -71,7 +70,7 @@ export const FlashingCellWizard = (props) => {
                 details: 'Specify which data changes should trigger Cell Flashing',
                 isValid: isScopeValid,
                 render: () => _jsx(FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
-                renderSummary: renderScopeSummary,
+                renderSummary: renderFlashingCellScopeSummary,
                 title: 'Columns',
             },
             {
@@ -83,9 +82,9 @@ export const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Choose Flash Styles for Up, Down and Neutral Changes',
-                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
-                            updateStyles[styleName](style);
-                        } }) })),
+                render: () => (_jsx(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+                        updateStyles[styleName](style);
+                    } })),
                 renderSummary: renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -10,7 +10,14 @@ export interface FormatColumnFormatWizardState {
     DisplayFormat: AdaptableFormat;
     NumericFormat?: 'Percent' | 'Thousand' | 'Million' | 'Dollar' | 'Sterling' | undefined;
 }
-export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
+type DisplayFormatSummaryItem = {
+    label: string;
+    value: string;
+};
+export declare const getFormatColumnDisplayFormatSummaryItems: (data: FormatColumn) => DisplayFormatSummaryItem[];
+export declare const hasFormatColumnDisplayFormat: (data: FormatColumn) => boolean;
+export declare const getFormatColumnFormatSummaryTagValues: (data: FormatColumn) => string[];
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => React.JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => "number" | "date" | "text" | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => React.JSX.Element;
+export {};