@adaptabletools/adaptable 22.0.0-canary.9 → 22.0.0

package/src/Utilities/utils/orderBy.js

@@ -0,0 +1,30 @@
+/**
+ * This method is like `sortBy` except that it allows specifying the sort
+ * orders of the iteratees to sort by. If orders is unspecified, all values
+ * are sorted in ascending order. Otherwise, specify an order of "desc" for
+ * descending or "asc" for ascending sort order of corresponding values.
+ * Drop-in replacement for lodash/orderBy.
+ */
+export default function orderBy(collection, iteratees, orders) {
+    const result = [...collection];
+    const fns = iteratees.map((iteratee) => typeof iteratee === 'function' ? iteratee : (item) => item?.[iteratee]);
+    result.sort((a, b) => {
+        for (let i = 0; i < fns.length; i++) {
+            const valA = fns[i](a);
+            const valB = fns[i](b);
+            if (valA !== valB) {
+                const order = orders?.[i] === 'desc' ? -1 : 1;
+                if (valA == null)
+                    return 1;
+                if (valB == null)
+                    return -1;
+                if (valA < valB)
+                    return -order;
+                if (valA > valB)
+                    return order;
+            }
+        }
+        return 0;
+    });
+    return result;
+}

package/src/Utilities/utils/parseInt.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Converts string to an integer of the specified radix.
+ * If radix is undefined or 0, a radix of 10 is used (unlike native parseInt which auto-detects).
+ * Drop-in replacement for lodash/parseInt.
+ */
+export default function parseIntFn(string: string, radix?: number): number;

package/src/Utilities/utils/parseInt.js

@@ -0,0 +1,9 @@
+/**
+ * Converts string to an integer of the specified radix.
+ * If radix is undefined or 0, a radix of 10 is used (unlike native parseInt which auto-detects).
+ * Drop-in replacement for lodash/parseInt.
+ */
+export default function parseIntFn(string, radix) {
+    const str = typeof string === 'string' ? string.trim() : String(string);
+    return globalThis.parseInt(str, radix || 10);
+}

package/src/Utilities/utils/sentenceCase.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Converts string to Sentence case.
+ * Splits on camelCase, PascalCase, dots, underscores, hyphens, and non-alphanumeric characters.
+ * Drop-in replacement for the sentence-case package.
+ */
+export default function sentenceCase(input: string): string;

package/src/Utilities/utils/sentenceCase.js

@@ -0,0 +1,15 @@
+/**
+ * Converts string to Sentence case.
+ * Splits on camelCase, PascalCase, dots, underscores, hyphens, and non-alphanumeric characters.
+ * Drop-in replacement for the sentence-case package.
+ */
+import words from './words';
+export default function sentenceCase(input) {
+    const parts = words(input);
+    if (parts.length === 0) {
+        return '';
+    }
+    return parts
+        .map((w, i) => (i === 0 ? w.charAt(0).toUpperCase() + w.slice(1).toLowerCase() : w.toLowerCase()))
+        .join(' ');
+}

package/src/Utilities/utils/startCase.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Converts string to Start Case.
+ * Drop-in replacement for lodash/startCase.
+ */
+export default function startCase(string: string): string;

package/src/Utilities/utils/startCase.js

@@ -0,0 +1,11 @@
+/**
+ * Converts string to Start Case.
+ * Drop-in replacement for lodash/startCase.
+ */
+import words from './words';
+function capitalize(word) {
+    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+}
+export default function startCase(string) {
+    return words(string).map(capitalize).join(' ');
+}

package/src/Utilities/utils/throttle.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Creates a throttled function that only invokes func at most once per
+ * every wait milliseconds. The throttled function comes with a cancel
+ * method to cancel delayed func invocations and a flush method to
+ * immediately invoke them.
+ *
+ * Supports options: { leading, trailing }
+ * Drop-in replacement for lodash/throttle.
+ *
+ * Implemented using debounce with maxWait (same approach as lodash).
+ */
+import { DebouncedFunction } from './debounce';
+export interface ThrottleOptions {
+    leading?: boolean;
+    trailing?: boolean;
+}
+export default function throttle<T extends (...args: any[]) => any>(func: T, wait?: number, options?: ThrottleOptions): DebouncedFunction<T>;

package/src/Utilities/utils/throttle.js

@@ -0,0 +1,19 @@
+/**
+ * Creates a throttled function that only invokes func at most once per
+ * every wait milliseconds. The throttled function comes with a cancel
+ * method to cancel delayed func invocations and a flush method to
+ * immediately invoke them.
+ *
+ * Supports options: { leading, trailing }
+ * Drop-in replacement for lodash/throttle.
+ *
+ * Implemented using debounce with maxWait (same approach as lodash).
+ */
+import debounce from './debounce';
+export default function throttle(func, wait = 0, options) {
+    return debounce(func, wait, {
+        leading: options?.leading ?? true,
+        trailing: options?.trailing ?? true,
+        maxWait: wait,
+    });
+}

package/src/Utilities/utils/toNumber.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Converts value to a number.
+ * Drop-in replacement for lodash/toNumber.
+ */
+export default function toNumber(value: any): number;

package/src/Utilities/utils/toNumber.js

@@ -0,0 +1,39 @@
+/**
+ * Converts value to a number.
+ * Drop-in replacement for lodash/toNumber.
+ */
+const reTrimStart = /^\s+/;
+const reTrimEnd = /\s+$/;
+const reIsBinary = /^0b[01]+$/i;
+const reIsOctal = /^0o[0-7]+$/i;
+const reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+export default function toNumber(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (typeof value === 'symbol') {
+        return NaN;
+    }
+    if (typeof value === 'boolean') {
+        return value ? 1 : 0;
+    }
+    if (value == null) {
+        return value === undefined ? NaN : 0;
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.replace(reTrimStart, '').replace(reTrimEnd, '');
+        if (reIsBinary.test(trimmed)) {
+            return globalThis.parseInt(trimmed.slice(2), 2);
+        }
+        if (reIsOctal.test(trimmed)) {
+            return globalThis.parseInt(trimmed.slice(2), 8);
+        }
+        if (reIsBadHex.test(trimmed)) {
+            return NaN;
+        }
+        return +trimmed;
+    }
+    // Objects: try valueOf
+    const other = typeof value.valueOf === 'function' ? value.valueOf() : value;
+    return +other;
+}

package/src/Utilities/utils/uniq.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Creates a duplicate-free version of an array, using SameValueZero for equality comparisons,
+ * in which only the first occurrence of each element is kept. The order of result values is
+ * determined by the order they occur in the array.
+ * Drop-in replacement for lodash/uniq.
+ */
+export default function uniq<T>(array: T[]): T[];

package/src/Utilities/utils/uniq.js

@@ -0,0 +1,9 @@
+/**
+ * Creates a duplicate-free version of an array, using SameValueZero for equality comparisons,
+ * in which only the first occurrence of each element is kept. The order of result values is
+ * determined by the order they occur in the array.
+ * Drop-in replacement for lodash/uniq.
+ */
+export default function uniq(array) {
+    return [...new Set(array)];
+}

package/src/Utilities/utils/uniqBy.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This method is like `uniq` except that it accepts iteratee which is
+ * invoked for each element in array to generate the criterion by which
+ * uniqueness is computed. The order of result values is determined by the
+ * order they occur in the array. The iteratee is invoked with one argument: (value).
+ * Drop-in replacement for lodash/uniqBy.
+ */
+export default function uniqBy<T>(array: T[], iteratee: ((value: T) => any) | string): T[];

package/src/Utilities/utils/uniqBy.js

@@ -0,0 +1,22 @@
+/**
+ * This method is like `uniq` except that it accepts iteratee which is
+ * invoked for each element in array to generate the criterion by which
+ * uniqueness is computed. The order of result values is determined by the
+ * order they occur in the array. The iteratee is invoked with one argument: (value).
+ * Drop-in replacement for lodash/uniqBy.
+ */
+export default function uniqBy(array, iteratee) {
+    const seen = new Set();
+    const result = [];
+    const fn = typeof iteratee === 'function'
+        ? iteratee
+        : (value) => value?.[iteratee];
+    for (const item of array) {
+        const key = fn(item);
+        if (!seen.has(key)) {
+            seen.add(key);
+            result.push(item);
+        }
+    }
+    return result;
+}

package/src/Utilities/utils/words.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Split a string into words: handles camelCase, PascalCase, UPPER_CASE,
+ * UPPER_SNAKE_CASE, snake_case, kebab-case, spaces, and dot.notation.
+ *
+ * Shared helper used by kebabCase, startCase, and sentenceCase.
+ */
+export default function words(str: string): string[];

package/src/Utilities/utils/words.js

@@ -0,0 +1,10 @@
+/**
+ * Split a string into words: handles camelCase, PascalCase, UPPER_CASE,
+ * UPPER_SNAKE_CASE, snake_case, kebab-case, spaces, and dot.notation.
+ *
+ * Shared helper used by kebabCase, startCase, and sentenceCase.
+ */
+export default function words(str) {
+    const matches = str.match(/[A-Z]?[a-z]+|[A-Z]+(?=[A-Z][a-z]|\d|$|[^a-zA-Z0-9])|[A-Z]|[0-9]+/g);
+    return matches || [];
+}

package/src/Utilities/weightedAverage.js

@@ -1,4 +1,4 @@
-import toNumber from 'lodash/toNumber';
+import toNumber from './utils/toNumber';
 export const getNumericValue = (input) => {
     if (typeof input === 'number') {
         return input;

package/src/View/AdaptableComputedCSSVarsContext.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CSSNumericVariableWatch } from '../components/Select/CSSNumericVariableWatch';
-import debounce from 'lodash/debounce';
+import debounce from '../Utilities/utils/debounce';
 import { useMemo } from 'react';
 const computedCSSVarNames = [
     '--ab-cmp-select-menu__max-width',

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -8,7 +8,7 @@ import { useRef, useState } from 'react';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 import { Box, Flex } from '../../../components/Flex';
-import throttle from 'lodash/throttle';
+import throttle from '../../../Utilities/utils/throttle';
 import { twMerge } from '../../../twMerge';
 const dataTypes = [
     {

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -8,7 +8,7 @@ import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { Select } from '../../../components/Select';
 import { Box, Flex } from '../../../components/Flex';
-import { sentenceCase } from 'sentence-case';
+import sentenceCase from '../../../Utilities/utils/sentenceCase';
 function renderCommand(command) {
     switch (command) {
         case 'highlight-cell':

package/src/View/Charting/ChartingWizard/AgChargingWizard/PreviewChartSection.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import isEqual from 'lodash/isEqual';
+import isEqual from '../../../../Utilities/utils/isEqual';
 import * as InternalRedux from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 export const PreviewChartSection = (props) => {

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js

@@ -4,7 +4,7 @@ import AdaptableInput from '../../AdaptableInput';
 import { AdaptableDateInlineInput } from '../../AdaptableInput/AdaptableDateInlineInput';
 import { PermittedValuesSelector } from '../../Selectors/PermittedValuesSelector';
 import { useAdaptable } from '../../../AdaptableContext';
-import debounce from 'lodash/debounce';
+import debounce from '../../../../Utilities/utils/debounce';
 import { useCallback } from 'react';
 function debounceOrImmediate(fn, time) {
     return time && time > 0 ? debounce(fn, time) : fn;

package/src/View/Components/ColumnFilter/components/ColumnFilterInputList.js

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash';
+import debounce from '../../../../Utilities/utils/debounce';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import Panel from '../../../../components/Panel';

package/src/View/Components/ColumnFilter/components/FloatingFilterInputList.js

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash';
+import debounce from '../../../../Utilities/utils/debounce';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';

package/src/View/Components/RangesComponent.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ColorPicker } from '../../components/ColorPicker';
-import clamp from 'lodash/clamp';
+import clamp from '../../Utilities/utils/clamp';
 import { CheckBox } from '../../components/CheckBox';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -98,5 +98,5 @@ export const PermittedValuesSelector = function (props) {
             reload();
         }
     };
-    return (React.createElement(Select, { "aria-label": "Permitted Values Selector", searchable: props.searchable, size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
+    return (React.createElement(Select, { "aria-label": "Permitted Values Selector", searchable: props.searchable ?? 'menulist', size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
 };

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../../Utilities/utils/kebabCase';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { connect } from 'react-redux';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';
 import { createUuid } from '../../../components/utils/uuid';
 import SimpleButton from '../../../components/SimpleButton';
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../../Utilities/utils/kebabCase';
 export const CustomToolPanelContent = (props) => {
     const { customToolPanel } = props;
     const { api } = useAdaptable();

package/src/View/Components/ValueSelector/index.js

@@ -159,7 +159,12 @@ export const renderSelectionSection = (props) => {
     const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;
     const selectionBox = (React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2" },
         React.createElement(Box, { className: clsx('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
-            React.createElement(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
+            singleSelect ? (React.createElement(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal" },
+                "(",
+                value.length,
+                " of ",
+                options.length,
+                " selected)")) : (React.createElement(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
                     if (checked) {
                         props.onSelectAll();
                     }
@@ -174,7 +179,7 @@ export const renderSelectionSection = (props) => {
                         value.length,
                         " of ",
                         options.length,
-                        " selected)"))),
+                        " selected)")))),
             React.createElement("div", { className: "twa:flex-1" }),
             React.createElement(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal" }, props.showOnlySelectedCheckbox))));
     return React.createElement(Box, { className: clsx(`${baseClassName}__header `) }, selectionBox);

package/src/View/Dashboard/CustomDashboardButton.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import SimpleButton from '../../components/SimpleButton';
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../Utilities/utils/kebabCase';
 export const CustomDashboardButton = (props) => {
     const { button } = props;
     const [componentRevision, setComponentRevision] = useState(1);

package/src/View/Dashboard/Dashboard.js

@@ -1,4 +1,4 @@
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../Utilities/utils/kebabCase';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dashboard as DashboardUI, DashboardTab as DashboardTabUI, } from '../../components/Dashboard';

package/src/View/Dashboard/DashboardPopup.js

@@ -71,9 +71,10 @@ class DashboardPopupComponent extends React.Component {
                     React.createElement(Card, null,
                         React.createElement(Card.Title, { gap: 8 }, "Display Settings"),
                         React.createElement(Card.Body, { gap: 2, className: "twa:p-2" },
-                            React.createElement(ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible'),
-                            this.props.DashboardState.Tabs?.length > 0 ? (React.createElement(ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded')) : null,
-                            this.props.api.optionsApi.getDashboardOptions().canFloat ? (React.createElement(ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating" }, this.props.IsFloating ? 'Floating' : 'Pinned')) : null)))),
+                            React.createElement("div", { className: "twa:flex twa:flex-row twa:items-center twa:justify-start twa:gap-3" },
+                                React.createElement(ToggleButton, { className: "twa:w-24", onChange: (visible) => this.props.onSetDashboardHidden(!visible), checked: !this.props.IsHidden, "data-name": "dashboard-visibility" }, this.props.IsHidden ? 'Hidden' : 'Visible'),
+                                this.props.DashboardState.Tabs?.length > 0 ? (React.createElement(ToggleButton, { disabled: this.props.IsFloating, className: "twa:w-24", onChange: (expanded) => this.props.onSetDashboardCollapsed(!expanded), checked: !this.props.IsCollapsed, "data-name": "expand-state" }, this.props.IsCollapsed ? 'Collapsed' : 'Expanded')) : null,
+                                this.props.api.optionsApi.getDashboardOptions().canFloat ? (React.createElement(ToggleButton, { className: "twa:w-24", onChange: (pinned) => this.props.onSetDashboardFloating(!pinned), checked: !this.props.IsFloating, "data-name": "floating" }, this.props.IsFloating ? 'Floating' : 'Pinned')) : null))))),
                 React.createElement(Card, { className: "twa:flex-1 twa:overflow-hidden", gap: 0 },
                     React.createElement(Card.Title, null, "Contents"),
                     React.createElement(Card.Body, { className: "twa:p-2" },

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -1,4 +1,4 @@
-import flatten from 'lodash/flatten';
+import flatten from '../../../../Utilities/utils/flatten';
 import * as React from 'react';
 import HelpBlock from '../../../../components/HelpBlock';
 import { Icon } from '../../../../components/icons';

package/src/View/DataSet/DataSetViewPanel.d.ts

@@ -16,8 +16,8 @@ declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanel
     onSelectedDataSetChanged(dataSetName: string): void;
 }
 export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, {
-    ref?: React.Ref<DataSetViewPanelComponent>;
     key?: React.Key | null | undefined;
+    ref?: React.Ref<DataSetViewPanelComponent>;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 }>;

package/src/View/Export/Wizard/NewReportWizard.js

@@ -35,6 +35,14 @@ export const NewReportWizard = (props) => {
         props.onFinishWizard(report);
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: report, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Name',
+                details: 'Enter the name of the Report',
+                isValid: isValidReportName,
+                renderSummary: renderReportNameSummary,
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
+                    React.createElement(ReportNameWizardSection, { onChange: setReport }))),
+            },
             {
                 title: 'Columns',
                 details: 'Choose the Columns you want to include in the Report',
@@ -48,14 +56,6 @@ export const NewReportWizard = (props) => {
                 renderSummary: renderReportRowsSummary,
                 render: () => React.createElement(ReportRowsWizardSection, { onChange: setReport }),
             },
-            {
-                title: 'Name',
-                details: 'Enter the name of the Report',
-                isValid: isValidReportName,
-                renderSummary: renderReportNameSummary,
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ReportNameWizardSection, { onChange: setReport }))),
-            },
             {
                 details: 'Select Report Tags',
                 title: 'Tags',

package/src/View/Filter/FilterViewPanel.d.ts

@@ -18,8 +18,8 @@ declare class FilterViewPanelComponent extends React.Component<FilterViewPanelCo
     private onClearFilters;
 }
 export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, {
-    ref?: React.Ref<FilterViewPanelComponent>;
     key?: React.Key | null | undefined;
+    ref?: React.Ref<FilterViewPanelComponent>;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 }>;

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

@@ -80,15 +80,12 @@ export const FlashingAlertSettingsWizardSection = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Name" },
-                        React.createElement(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' })),
-                    React.createElement(FormRow, { label: "Flash Target" },
-                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
-                                flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
-                        React.createElement(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 }, "Row"),
-                        React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
-                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")),
-                    React.createElement(FormRow, { label: "Duration" },
+                        React.createElement(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }))))),
+        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
+            React.createElement(Tabs.Tab, null, "Flash Duration"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "" },
                         React.createElement(Flex, { alignItems: "center" },
                             React.createElement(CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1 }, "Always"),
                             duration !== 'always' && (React.createElement(React.Fragment, null,
@@ -96,5 +93,17 @@ export const FlashingAlertSettingsWizardSection = (props) => {
                                         const value = event.target.value;
                                         setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                     } }),
-                                React.createElement(Box, { className: "twa:text-2" }, "ms"))))))))));
+                                React.createElement(Box, { className: "twa:text-2" }, "ms")))))))),
+        ' ',
+        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
+            React.createElement(Tabs.Tab, null, "Flash Target"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "" },
+                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
+                                flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
+                        React.createElement(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 }, "Row"),
+                        React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
+                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));
 };

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

@@ -73,7 +73,7 @@ export const FlashingCellWizard = (props) => {
                 isValid: isScopeValid,
                 render: () => React.createElement(FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
                 renderSummary: renderScopeSummary,
-                title: 'Scope',
+                title: 'Columns',
             },
             {
                 details: 'Build the Rules for when Cells should Flash',

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import uniq from 'lodash/uniq';
-import clamp from 'lodash/clamp';
+import uniq from '../../../Utilities/utils/uniq';
+import clamp from '../../../Utilities/utils/clamp';
 import HelpBlock from '../../../components/HelpBlock';
 import Input from '../../../components/Input';
 import SimpleButton from '../../../components/SimpleButton';

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormatColumn } from '../../../AdaptableState/FormatColumnState';
+type FormatColumnRowScopeWizardSectionProps = {
+    onChange: (data: FormatColumn) => void;
+};
+export declare const renderFormatColumnRowScopeSummary: (data: FormatColumn) => React.JSX.Element;
+export declare const FormatColumnRowScopeWizardSection: (props: FormatColumnRowScopeWizardSectionProps) => React.JSX.Element;
+export {};