@adaptabletools/adaptable 23.0.0-canary.8 → 23.0.0-canary.9

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { buildBarChartCellTextLabels, getBarChartCellTextSlotPresence, hasBarChartCellTextConfigured, } from '../../../../../Utilities/Helpers/barChartCellText';
+import { buildBarStyleCellTextLabels, getBarStyleCellTextSlotPresence, hasBarStyleCellTextConfigured, } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { Box, Flex } from '../../../../../components/Flex';
 import { Card } from '../../../../../components/Card';
 import { Tag } from '../../../../../components/Tag';
 import { StyledColumnRangeBarListPreview } from './StyledColumnChartListPreviews';
-import { BarChartCellTextPreview } from './BarChartCellTextPreview';
+import { BarStyleCellTextPreview } from './BarStyleCellTextPreview';
 const PREVIEW_CELL_CLASS = 'ab-RangeBarPreviewCell twa:inline-flex twa:items-center twa:min-w-[180px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
 const getRangeBarPreviewSample = (range) => {
     let min = 0;
@@ -25,17 +25,17 @@ const getRangeBarPreviewSample = (range) => {
 const RangeBarPreviewContent = ({ range }) => {
     const { sampleValue, valueFraction } = getRangeBarPreviewSample(range);
     const cellTextProperties = range.CellTextProperties;
-    const labels = buildBarChartCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
-    const hasCellText = hasBarChartCellTextConfigured(cellTextProperties) &&
+    const labels = buildBarStyleCellTextLabels(cellTextProperties, Number.isInteger(sampleValue) ? String(sampleValue) : sampleValue.toFixed(1), `${(valueFraction * 100).toFixed(0)}%`);
+    const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties) &&
         Boolean(labels.cellValue || labels.percentage);
-    const presence = getBarChartCellTextSlotPresence(cellTextProperties);
+    const presence = getBarStyleCellTextSlotPresence(cellTextProperties);
     const isVertical = range.Orientation === 'Vertical';
     const cellTextClassName = 'ab-RangeBar__text twa:text-2 twa:leading-tight twa:truncate twa:max-w-full';
     const chartEl = _jsx(StyledColumnRangeBarListPreview, { range: range });
     if (hasCellText && presence.hasMerged && !presence.hasAbove && !presence.hasBelow) {
-        return (_jsxs(Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarChartCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
+        return (_jsxs(Box, { className: "ab-RangeBar__wrapper twa:relative twa:inline-flex", children: [chartEl, _jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" })] }));
     }
-    return (_jsxs(Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(BarChartCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && (_jsx(BarChartCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
+    return (_jsxs(Flex, { className: "ab-RangeBar__wrapper twa:relative", flexDirection: "column", alignItems: isVertical ? 'center' : 'stretch', style: { justifyContent: 'center', gap: hasCellText ? 2 : 0 }, children: [hasCellText && presence.hasAbove && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Above" })), _jsxs(Box, { className: "twa:relative twa:w-full", style: { display: 'inline-flex' }, children: [chartEl, hasCellText && presence.hasMerged && (_jsx(BarStyleCellTextPreview, { mergedOverlayClassName: "ab-RangeBar__text twa:absolute twa:inset-x-0 twa:top-1/2 twa:-translate-y-1/2 twa:px-1 twa:text-2 twa:truncate twa:pointer-events-none", cellTextProperties: cellTextProperties, labels: labels, vertical: "Merged" }))] }), hasCellText && presence.hasBelow && (_jsx(BarStyleCellTextPreview, { className: cellTextClassName, cellTextProperties: cellTextProperties, labels: labels, vertical: "Below" }))] }));
 };
 export const StyledColumnRangeBarPreview = ({ data }) => {
     const range = data.RangeBarStyle;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';
 import { AdaptableHelper } from '../../../../../Utilities/Helpers/AdaptableHelper';
-import { resolveSparklineOptionsForRender } from '../../../../../Utilities/Helpers/SparklineOptionsHelper';
+import { resolveSparklineOptionsForRender } from '../../../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper';
 import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
 import { Box } from '../../../../../components/Flex';
 import { Card } from '../../../../../components/Card';

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

@@ -3,8 +3,8 @@ import { CheckBox } from '../../../../components/CheckBox';
 import ErrorBox from '../../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import { Tag } from '../../../../components/Tag';
-import { formatBarChartCellTextLayoutSummary, getActiveBarChartCellTextTokens, hasBarChartCellTextConfigured, patchBarChartCellTextPlacement, resolveBarChartCellTextLayout, toggleBarChartCellTextToken, } from '../../../../Utilities/Helpers/barChartCellText';
-import { BarChartCellTextLayoutEditor } from './Components/BarChartCellTextLayoutEditor';
+import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { BarStyleCellTextLayoutEditor } from './Components/BarStyleCellTextLayoutEditor';
 import { OptionalColorPicker } from '../../../../components/ColorPicker';
 import { getGraySwatchColor } from '../../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
@@ -28,18 +28,14 @@ const formatOriginLabel = (origin) => {
     }
     return origin;
 };
-const formatPercentBarCellTextSummary = (cellText) => cellText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
-const formatPercentBarToolTipSummary = (toolTipText) => toolTipText
-    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
-    .join(' + ') ?? '';
+const formatPercentBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatPercentBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
 const buildStyledColumnPercentBarStyleSummaryStrings = (pb, options) => {
     const items = [`Origin: ${formatOriginLabel(pb.Origin)}`];
-    if (hasBarChartCellTextConfigured(pb.CellTextProperties)) {
-        const tokens = getActiveBarChartCellTextTokens(pb.CellTextProperties);
+    if (hasBarStyleCellTextConfigured(pb.CellTextProperties)) {
+        const tokens = getActiveBarStyleCellTextTokens(pb.CellTextProperties);
         items.push(`Cell Text: ${formatPercentBarCellTextSummary(tokens)}`);
-        const layoutSummary = formatBarChartCellTextLayoutSummary(resolveBarChartCellTextLayout(pb.CellTextProperties));
+        const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(pb.CellTextProperties));
         if (layoutSummary) {
             items.push(`Placement: ${layoutSummary}`);
         }
@@ -126,11 +122,11 @@ export const StyledColumnWizardStyleSection = (props) => {
         });
     };
     const onCellTextLayoutToggle = (token, show) => {
-        update(toggleBarChartCellTextToken(cellTextProperties, token, show));
+        update(toggleBarStyleCellTextToken(cellTextProperties, token, show));
     };
     const onCellTextPlacementChange = (token, patch) => {
         update({
-            CellTextProperties: patchBarChartCellTextPlacement(cellTextProperties, token, patch),
+            CellTextProperties: patchBarStyleCellTextPlacement(cellTextProperties, token, patch),
         });
     };
     const onToolTipTextChanged = (token, checked) => {
@@ -149,11 +145,11 @@ export const StyledColumnWizardStyleSection = (props) => {
         const { BackColor: _removed, ...rest } = pb;
         props.onChange({ ...data, PercentBarStyle: rest });
     };
-    const cellTextDisabled = !hasBarChartCellTextConfigured(cellTextProperties) || disabled;
+    const cellTextDisabled = !hasBarStyleCellTextConfigured(cellTextProperties) || disabled;
     const currentOrigin = typeof pb.Origin === 'number'
         ? 'Min' // numeric origin doesn't fit the radio set; treat as Min for selection state
         : pb.Origin ?? 'Auto';
-    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(FormRow, { label: "Cell Text Layout:", children: _jsx(BarChartCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar Position" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the position of the cell text relative to the bar" })] }), _jsx(Card.Body, { children: _jsx(RadioGroup, { orientation: "vertical", name: "ab-percentbar-origin", value: currentOrigin, onRadioChange: handleOriginChange, children: ORIGIN_CHOICES.map((choice) => (_jsx(Radio, { value: choice.value, disabled: disabled, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:min-w-[60px]", children: choice.label }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: choice.hint })] }) }, choice.value))) }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[540px]", children: "Pick which values to display and where each one sits around the bar (font properties take precedence over Format Column)" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: onCellTextLayoutToggle, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: pb.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }

package/src/View/UIHelper.js

@@ -1,7 +1,7 @@
 import { WizardStatus, } from './Components/SharedProps/EditableConfigEntityState';
 import { FontWeight, FontStyle, StatusColour } from '../AdaptableState/Common/Enums';
 import { StringExtensions } from '../Utilities/Extensions/StringExtensions';
-import { getScheduleDescription as getScheduleDescriptionFromHelper } from '../Utilities/Helpers/ScheduleHelper';
+import { getScheduleDescription as getScheduleDescriptionFromHelper } from '../Utilities/Helpers/Scheduling/ScheduleHelper';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { resolveContainerElement } from '../Utilities/resolveContainerElement';
 /** Generic swatch entries for the Colour Picker (resolved at runtime per active theme). */

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -8,7 +8,7 @@ import { Card } from '../../components/Card';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import { OnePageWizard, useOnePageWizardContext } from './OnePageWizards';
-import kebabCase from '../../Utilities/utils/kebabCase';
+import { kebabCase } from '../../Utilities/Extensions/StringExtensions';
 import { Box } from '../../components/Flex';
 import { twMerge } from '../../twMerge';
 export const SummaryTag = (props) => (_jsx(Box, { ...props }));

package/src/View/Wizard/OnePageWizards.js

@@ -163,6 +163,8 @@ export const OnePageWizard = (props) => {
                                                         return;
                                                     }
                                                     setCurrentSection(index);
-                                                }, children: [_jsx(KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-accent-foreground", children: navIndex }), _jsx("div", { className: "twa:flex-1", children: section.title }), _jsx(Icon, { name: "error", className: cn('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })] }, section.title));
+                                                }, children: [_jsx(KeyHint, { className: cn('twa:mr-2 twa:inline-block', {
+                                                            'twa:text-accent-foreground': active,
+                                                        }), children: navIndex }), _jsx("div", { className: "twa:flex-1", children: section.title }), _jsx(Icon, { name: "error", className: cn('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })] }, section.title));
                                         }), selectedFeedback, _jsx(Box, { className: "twa:flex-1" }), _jsxs(KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [isMacLike() ? 'Cmd' : 'Ctrl', " + #", _jsx("br", {}), "or arrow keys", _jsx("br", {}), "to navigate"] })] }), _jsx(Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1", children: renderSection(currentSection) })] }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [_jsx(SimpleButton, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), _jsx(KeyHint, { className: "twa:ml-2", children: "Esc" }), _jsx(Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-destructive twa:text-end", children: firstErrorMessage }), _jsx(SimpleButton, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
 };

package/src/agGrid/AdaptableAgGrid.js

@@ -1,9 +1,9 @@
-import debounce from '../Utilities/utils/debounce';
+import { debounce } from '../Utilities/Helpers/TimingHelper';
 import { createGrid, LocalEventService, } from 'ag-grid-enterprise';
 import { AdaptableLogger } from './AdaptableLogger';
 import { PrimaryKeyDocsLink } from '../Utilities/Constants/DocumentationLinkConstants';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
-import { applyQuickSearchFindCssVars } from '../Utilities/Helpers/QuickSearchStyleHelper';
+import { applyQuickSearchFindCssVars } from '../Utilities/Helpers/QuickSearchHelper';
 import Emitter from '../Utilities/Emitter';
 import { applyDefaultAdaptableOptions } from '../AdaptableOptions/DefaultAdaptableOptions';
 import { resolveContainerElement } from '../Utilities/resolveContainerElement';
@@ -20,7 +20,7 @@ import { ThemeService } from '../Utilities/Services/ThemeService';
 import { ValidationService } from '../Utilities/Services/ValidationService';
 import { ModuleService } from '../Utilities/Services/ModuleService';
 import { CalculatedColumnExpressionService } from '../Utilities/Services/CalculatedColumnExpressionService';
-import { expandCellDataChangedInfosWithCalculatedColumns } from '../Utilities/Services/CalculatedColumnSyntheticChange';
+import { expandCellDataChangedInfosWithCalculatedColumns } from '../Utilities/Services/CalculatedColumnExpressionService';
 import { QueryLanguageService } from '../Utilities/Services/QueryLanguageService';
 import { AlertService } from '../Utilities/Services/AlertService';
 import { TeamSharingService } from '../Utilities/Services/TeamSharingService';
@@ -86,8 +86,8 @@ import { ensureLoadingScreenPortalElement } from '../components/Modal';
 import { AdaptableLoadingScreen } from '../View/Components/Popups/AdaptableLoadingScreen';
 import { createElement } from 'react';
 import { createAgStatusPanelComponent } from '../Utilities/createAgStatusPanelComponent';
-import { only } from '../Utilities/only';
-import { weightedAverage } from '../Utilities/weightedAverage';
+import { only } from '../AdaptableState/Aggregations/only';
+import { weightedAverage } from '../AdaptableState/Aggregations/weightedAverage';
 import { ROW_SUMMARY_ROW_ID } from '../AdaptableState/Common/RowSummary';
 import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
@@ -103,7 +103,7 @@ import { tagProvidedByAdaptable } from '../Utilities/adaptableOverrideCheck';
 import { AgGridModulesAdapter } from './AgGridModulesAdapter';
 import { getMarker } from '../devTools';
 import { DeepMap } from '@infinite-table/infinite-react';
-import { DateFormatter } from '../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../Utilities/Helpers/DisplayFormatHelper';
 import { clearPredicateDefMapMemo } from '../Api/Implementation/PredicateApiImpl';
 import { AgGridFilterAdapterFactory } from './AgGridFilterAdapter';
 import { AdaptableFilterHandler } from './AdaptableFilterHandler';

package/src/agGrid/AgGridColumnAdapter.js

@@ -1,8 +1,8 @@
-import kebabCase from '../Utilities/utils/kebabCase';
+import { kebabCase } from '../Utilities/Extensions/StringExtensions';
 import { resolveDisplayFormat } from '../AdaptableState/Common/AdaptableFormatPresets';
-import merge from '../Utilities/utils/merge';
-import { resolveSparklineOptionsForRender } from '../Utilities/Helpers/SparklineOptionsHelper';
-import { hasBarChartCellTextConfigured } from '../Utilities/Helpers/barChartCellText';
+import { merge } from '../Utilities/Extensions/ObjectExtensions';
+import { resolveSparklineOptionsForRender } from '../Utilities/Helpers/StyledColumns/SparklineStyleHelper';
+import { hasBarStyleCellTextConfigured } from '../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { convertAdaptableStyleToCSS, getAutoContrastTextColor, getVariableColor, hasCellBoxStyle, hasCellFontStyle, normalizeStyleForAgGrid, } from '../Utilities/Helpers/StyleHelper';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
@@ -13,11 +13,11 @@ import { getBadgeRendererForColumn } from './cellRenderers/BadgeRenderer';
 import { getBulletChartRendererForColumn } from './cellRenderers/BulletChartRenderer';
 import { getRangeBarRendererForColumn } from './cellRenderers/RangeBarRenderer';
 import { getRatingRendererForColumn } from './cellRenderers/RatingRenderer';
-import { shouldRenderStyledColumnOnRow } from './cellRenderers/shouldRenderStyledColumnOnRow';
+import { shouldRenderStyledColumnOnRow } from '../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { findIconStyleMappingForValue, getIconRendererForColumn, } from './cellRenderers/IconRenderer';
-import Helper from '../Utilities/Helpers/Helper';
-import { getRuleAlertProperties } from '../Utilities/Helpers/ScheduledAlertHelper';
-import { isNegativeZeroCentredBand, expandGradientCellRanges, gradientStyleRangeLookupValueType, DEFAULT_GRADIENT_MIN_ALPHA, DEFAULT_GRADIENT_MAX_ALPHA, } from '../Utilities/Helpers/StyledColumnGradientHelper';
+import { clamp } from '../Utilities/Extensions/NumberExtensions';
+import { getRuleAlertProperties } from '../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
+import { isNegativeZeroCentredBand, expandGradientCellRanges, gradientStyleRangeLookupValueType, DEFAULT_GRADIENT_MIN_ALPHA, DEFAULT_GRADIENT_MAX_ALPHA, } from '../Utilities/Helpers/StyledColumns/GradientStyleHelper';
 import { AdaptableNumberEditor, AdaptableReactNumberEditor } from './editors/AdaptableNumberEditor';
 import { AdaptableDateEditor, AdaptableReactDateEditor } from './editors/AdaptableDateEditor';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
@@ -27,7 +27,7 @@ import { AdaptableFilterHandler } from './AdaptableFilterHandler';
 import { AgGridFilterAdapterFactory } from './AgGridFilterAdapter';
 import { AgGridFloatingFilterAdapterFactory } from './AgGridFloatingFilterAdapter';
 import { errorOnce } from './AdaptableLogger';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { isUnsupportedColumnDataTypeForIconStyle } from '../Utilities/Helpers/StyledColumns/IconStyleHelper';
 import { isWeightedAverageAggFuncName, } from '../AdaptableState/Common/AggregationColumns';
 /**
  * CSS property keys produced by `convertAdaptableStyleToCSS` from a
@@ -611,7 +611,7 @@ export class AgGridColumnAdapter {
                     if (ratingToolTip.includes('PercentageValue') && ratingMax > 0) {
                         const n = Number(params.value);
                         if (!isNaN(n)) {
-                            const clamped = Helper.clamp(n, 0, ratingMax);
+                            const clamped = clamp(n, 0, ratingMax);
                             const percentageValue = (clamped / ratingMax) * 100;
                             const pct = `${percentageValue.toFixed(0)}%`;
                             returnValue = returnValue ? `${returnValue} (${pct})` : pct;
@@ -659,7 +659,7 @@ export class AgGridColumnAdapter {
                     }
                     else {
                         const scaleSpan = max - min;
-                        const clamped = Helper.clamp(Number(params.value), min, max);
+                        const clamped = clamp(Number(params.value), min, max);
                         percentageValue = scaleSpan === 0 ? 0 : ((clamped - min) / scaleSpan) * 100;
                     }
                     returnValue += ` (${percentageValue.toFixed(0)}%)`;
@@ -1427,11 +1427,11 @@ export class AgGridColumnAdapter {
             }
             const minAlphaBound = gradientStyle.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
             const maxAlphaBound = gradientStyle.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
-            const lo = Math.min(Helper.clamp(minAlphaBound, 0, 1), Helper.clamp(maxAlphaBound, 0, 1));
-            const hi = Math.max(Helper.clamp(minAlphaBound, 0, 1), Helper.clamp(maxAlphaBound, 0, 1));
+            const lo = Math.min(clamp(minAlphaBound, 0, 1), clamp(maxAlphaBound, 0, 1));
+            const hi = Math.max(clamp(minAlphaBound, 0, 1), clamp(maxAlphaBound, 0, 1));
             const span = Math.abs(max - min);
             let t = span === 0 ? 0.5 : (Number(colValue) - min) / span;
-            t = Helper.clamp(t, 0, 1);
+            t = clamp(t, 0, 1);
             if (reverseGradient) {
                 t = 1 - t;
             }
@@ -1446,7 +1446,8 @@ export class AgGridColumnAdapter {
                 }
             }
         }
-        if (styledColumn.PercentBarStyle && hasBarChartCellTextConfigured(styledColumn.PercentBarStyle.CellTextProperties)) {
+        if (styledColumn.PercentBarStyle &&
+            hasBarStyleCellTextConfigured(styledColumn.PercentBarStyle.CellTextProperties)) {
             style.paddingTop = 0;
             style.paddingBottom = 0;
         }

package/src/agGrid/AgGridExportAdapter.js

@@ -5,7 +5,7 @@ import { createUuid } from '../AdaptableState/Uuid';
 import { AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_COLUMN, } from '../Utilities/Constants/GeneralConstants';
 import { ExportModuleId } from '../Utilities/Constants/ModuleConstants';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
-import FormatHelper, { DateFormatter } from '../Utilities/Helpers/FormatHelper';
+import FormatHelper, { DateFormatter } from '../Utilities/Helpers/DisplayFormatHelper';
 import { convertCSSAbsoluteFontSizeToPt, getVariableColor, sanitizeStyle, } from '../Utilities/Helpers/StyleHelper';
 import { waitForTimeout } from '../Utilities/waitForTimeout';
 export class AgGridExportAdapter {

package/src/agGrid/AgGridMenuAdapter.js

@@ -2,8 +2,133 @@ import { isAdaptableElementIcon } from '../components/Icon';
 import { iconToString } from '../components/icons';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { MENU_SEPARATOR } from '../Utilities/Constants/GeneralConstants';
-import { buildValueAggregationMenuItem } from './buildValueAggregationMenuItem';
-import { createAgGridIcon } from './createAgGridIcon';
+import { getAggFuncName, getDisplayAggFuncNames, isWeightedAverageAggregation, WEIGHTED_AVERAGE_AGG_FN_NAME, } from '../AdaptableState/Common/AggregationColumns';
+/**
+ * Creates an AG Grid icon element for the given icon name.
+ *
+ * Mimics AG Grid's internal icon creation, producing a
+ * `<span class="ag-icon ag-icon-{name}" role="presentation" unselectable="on">`
+ * so the icon picks up AG Grid's own icon font/theme styling.
+ *
+ * @see https://github.com/ag-grid/ag-grid/blob/5ca14e73188f6f52fd7d545d595c067bf1b72168/packages/ag-grid-community/src/utils/icon.ts#L139
+ */
+function createAgGridIcon(name) {
+    const element = document.createElement('span');
+    element.className = `ag-icon ag-icon-${name}`;
+    element.setAttribute('role', 'presentation');
+    element.setAttribute('unselectable', 'on');
+    return element;
+}
+const toFuncLabel = (funcName) => {
+    if (funcName === 'avg') {
+        return 'Average';
+    }
+    if (funcName === 'weightedAvg') {
+        return 'Weighted Average';
+    }
+    return funcName ? funcName.charAt(0).toUpperCase() + funcName.slice(1) : funcName;
+};
+/**
+ * Builds the replacement for AG Grid's built-in `valueAggSubMenu` column menu item.
+ *
+ * AG Grid does not allow customizing the built-in submenu, so we rebuild an
+ * equivalent one: the column's existing aggregation functions plus a
+ * `Weighted Average` item whose submenu lists the numeric columns that can be
+ * used as the weight parameter.
+ *
+ * Both standard and weighted selections persist through the current Layout
+ * (`updateCurrentLayout`), so the existing `weightedAvg` aggFunc can read the
+ * chosen `weightedColumnId` back from the Layout.
+ *
+ * Weighted Average is never used in Pivot Layouts, so this only deals with the
+ * Table Layout aggregations and the caller skips it entirely in Pivot mode.
+ */
+function buildValueAggregationMenuItem(adaptableApi, menuContext) {
+    const column = menuContext.adaptableColumn;
+    const columnId = column.columnId;
+    const currentLayout = adaptableApi.layoutApi.getCurrentLayout();
+    const aggregationColumns = currentLayout.TableAggregationColumns || [];
+    const currentAggFunc = aggregationColumns.find((agg) => agg.ColumnId === columnId)?.AggFunc;
+    let activeAggFuncName;
+    if (currentAggFunc != null) {
+        const aggFuncName = getAggFuncName(currentAggFunc);
+        activeAggFuncName = aggFuncName === true ? column.aggregationFunction : aggFuncName;
+    }
+    const activeWeightColumnId = isWeightedAverageAggregation(currentAggFunc)
+        ? currentAggFunc.weightedColumnId
+        : undefined;
+    const applyAggregation = (aggFuncValue) => {
+        const upsert = (cols) => {
+            const list = cols ? [...cols] : [];
+            const index = list.findIndex((col) => col.ColumnId === columnId);
+            if (index >= 0) {
+                list[index] = { ...list[index], AggFunc: aggFuncValue };
+            }
+            else {
+                list.push({ ColumnId: columnId, AggFunc: aggFuncValue });
+            }
+            return list;
+        };
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: upsert(tableLayout.TableAggregationColumns),
+            };
+        });
+    };
+    const removeAggregation = () => {
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: (tableLayout.TableAggregationColumns || []).filter((col) => col.ColumnId !== columnId),
+            };
+        });
+    };
+    // 'None' clears any aggregation for the column and is checked when none is set
+    const subMenu = [
+        {
+            name: 'None',
+            checked: activeAggFuncName == null,
+            action: () => removeAggregation(),
+        },
+    ];
+    // getDisplayAggFuncNames already positions weightedAvg right after 'avg'
+    // (and only includes it when the column is eligible)
+    const aggFuncItems = getDisplayAggFuncNames(column).map((funcName) => {
+        // Weighted Average needs a weight column parameter, so instead of a plain
+        // action it gets a submenu listing the numeric columns usable as the weight.
+        if (funcName === WEIGHTED_AVERAGE_AGG_FN_NAME) {
+            const weightColumnItems = adaptableApi.columnApi
+                .getNumericColumns()
+                .filter((numericColumn) => numericColumn.columnId !== columnId)
+                .map((numericColumn) => ({
+                name: numericColumn.friendlyName ?? numericColumn.columnId,
+                checked: activeWeightColumnId === numericColumn.columnId,
+                action: () => applyAggregation({
+                    type: 'weightedAverage',
+                    weightedColumnId: numericColumn.columnId,
+                }),
+            }));
+            return {
+                name: 'Weighted Average',
+                checked: activeAggFuncName === WEIGHTED_AVERAGE_AGG_FN_NAME,
+                subMenu: weightColumnItems,
+            };
+        }
+        return {
+            name: toFuncLabel(funcName),
+            checked: activeAggFuncName === funcName,
+            action: () => applyAggregation(funcName),
+        };
+    });
+    subMenu.push(...aggFuncItems);
+    return {
+        name: 'Value Aggregation',
+        subMenu,
+    };
+}
 export class AgGridMenuAdapter {
     _adaptableInstance;
     constructor(_adaptableInstance) {

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -1,7 +1,7 @@
 import { Badge } from '../../View/Components/Badge';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import * as React from 'react';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',

package/src/agGrid/cellRenderers/BulletChartRenderer.js

@@ -1,7 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { buildBarChartCellTextLabels, hasBarChartCellTextConfigured, mountBarChartCellText, } from '../../Utilities/Helpers/barChartCellText';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_BAR_HEIGHT = 8;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -155,7 +155,7 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             const barThickness = bulletStyle.Bar?.Height ?? DEFAULT_BAR_HEIGHT;
             const bandThickness = Math.max(barThickness + 6, DEFAULT_BAND_HEIGHT);
             const cellTextProperties = bulletStyle.CellTextProperties;
-            const hasCellText = hasBarChartCellTextConfigured(cellTextProperties);
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Map a 0..1 value fraction onto the long-axis viewBox (0..100).
             // In horizontal: 0 -> left, 1 -> right.
             // In vertical:   0 -> bottom, 1 -> top (SVG y origin is at the top so
@@ -281,8 +281,8 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
                 // `valueFormatter` returns the raw value (a number here), so coerce
                 // to string before it flows into the helpers.
                 const formattedCellValue = String(params.formatValue?.(cellValue) ?? cellValue);
-                const labels = buildBarChartCellTextLabels(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
-                mountBarChartCellText({
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
+                mountBarStyleCellText({
                     wrapperEl: this.eGui,
                     mergedOverlayEl: svgContainer,
                     textClassName: 'ab-BulletChart__text',

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -2,9 +2,8 @@ import * as React from 'react';
 import { IconComponent, isAdaptableSystemIcon, isAdaptableCustomIcon, isAdaptableElementIcon, } from '../../components/Icon';
 import { renderWithAdaptableContext } from '../../View/renderWithAdaptableContext';
 import Helper from '../../Utilities/Helpers/Helper';
-import { getIconStylePresetMappings } from '../../Utilities/Helpers/IconStylePresets';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
-import { isUnsupportedColumnDataTypeForIconStyle } from '../../Utilities/Helpers/iconStyledColumnColumnSupport';
+import { getIconStylePresetMappings, isUnsupportedColumnDataTypeForIconStyle, } from '../../Utilities/Helpers/StyledColumns/IconStyleHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { errorOnce } from '../AdaptableLogger';
 const DEFAULT_SIZE = 18;
 const DEFAULT_GAP = 4;

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -1,7 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
-import { buildBarChartCellTextLabels, hasBarChartCellTextConfigured, mountBarChartCellText, } from '../../Utilities/Helpers/barChartCellText';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 /**
  * Resolve the origin value (in the same numeric space as `min`/`max`) the bar
  * should grow from.
@@ -141,7 +141,7 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             }
             // ----- Build the DOM -------------------------------------------------
             const cellTextProperties = percentBarStyle.CellTextProperties;
-            const hasCellText = hasBarChartCellTextConfigured(cellTextProperties);
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Wrapper always fills the cell. The bar is the flex-grow child so it
             // claims whatever space the (compact) text rows leave, with a small
             // floor to stay visible even on short rows.
@@ -189,8 +189,8 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 // columns), which then propagates through the helpers as a non-string
                 // and breaks string-only operations (e.g. `.length` checks).
                 const formattedCellValue = String(params.formatValue?.(rawCellValue) ?? rawCellValue);
-                const labels = buildBarChartCellTextLabels(cellTextProperties, formattedCellValue, `${percentageValue.toFixed(0)}%`);
-                mountBarChartCellText({
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${percentageValue.toFixed(0)}%`);
+                mountBarStyleCellText({
                     wrapperEl: this.eGui,
                     mergedOverlayEl: barEl,
                     textClassName: 'ab-PercentBar__text',

package/src/agGrid/cellRenderers/RangeBarRenderer.js

@@ -1,7 +1,7 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { buildBarChartCellTextLabels, hasBarChartCellTextConfigured, mountBarChartCellText, } from '../../Utilities/Helpers/barChartCellText';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_TRACK_HEIGHT = 4;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -47,8 +47,7 @@ const normaliseMarker = (override, defaults) => {
     return {
         Shape: shape,
         Color: override?.Color ?? defaults.Color,
-        Size: override?.Size ??
-            (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
+        Size: override?.Size ?? (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
     };
 };
 /**
@@ -124,7 +123,7 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             const trackThickness = trackProperties?.Height ?? DEFAULT_TRACK_HEIGHT;
             const bandThickness = Math.max(trackThickness + 6, DEFAULT_BAND_HEIGHT);
             const cellTextProperties = rangeStyle.CellTextProperties;
-            const hasCellText = hasBarChartCellTextConfigured(cellTextProperties);
+            const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
             // Map a 0..1 fraction onto the long-axis viewBox (0..100). Vertical
             // orientation inverts so that lower values appear at the bottom of
             // the cell, matching user expectation.
@@ -262,8 +261,8 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                 // `valueFormatter` returns the raw value (a number here), so coerce
                 // to string before it flows into the helpers.
                 const formattedCellValue = String(params.formatValue?.(numericValue) ?? numericValue);
-                const labels = buildBarChartCellTextLabels(cellTextProperties, formattedCellValue, `${pct.toFixed(0)}%`);
-                mountBarChartCellText({
+                const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${pct.toFixed(0)}%`);
+                mountBarStyleCellText({
                     wrapperEl: this.eGui,
                     mergedOverlayEl: svgContainer,
                     textClassName: 'ab-RangeBar__text',

package/src/agGrid/cellRenderers/RatingRenderer.js

@@ -1,6 +1,6 @@
 import Helper from '../../Utilities/Helpers/Helper';
-import clamp from '../../Utilities/utils/clamp';
-import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
+import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_MAX = 5;
 const DEFAULT_SIZE = 14;

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -3,7 +3,7 @@ import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableCon
 import { InternalAdaptableDateEditor, } from './InternalAdaptableDateEditor';
 import { KeyCode } from 'ag-grid-enterprise';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../../Utilities/Helpers/DisplayFormatHelper';
 function shouldClearExistingValue(params) {
     return params.eventKey === KeyCode.BACKSPACE || params.eventKey === KeyCode.DELETE;
 }

package/src/components/ColorPicker/ColorPicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useCallback, useEffect } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
 import { cn } from '../../lib/utils';
 import Input from '../Input';
 import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';

package/src/components/Datepicker/index.js

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import useProperty from '../utils/useProperty';
 import SimpleButton from '../SimpleButton';
 import { ACCESS_LEVEL_FULL } from '../../Utilities/Constants/GeneralConstants';
-import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../Utilities/Helpers/DisplayFormatHelper';
 import { useDatepickerContext } from './DatepickerContext';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
 import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';

package/src/components/FormLayout/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { createContext, useContext } from 'react';
-import merge from '../../Utilities/utils/merge';
+import { merge } from '../../Utilities/Extensions/ObjectExtensions';
 import join from '../utils/join';
 import { Box } from '../Flex';
 const FormLayoutContext = createContext(null);