@adaptabletools/adaptable-react-aggrid 22.1.1 → 23.0.0-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-react-aggrid",
-  "version": "22.1.1",
+  "version": "23.0.0-canary.1",
   "description": "React version of AdapTable - the powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [],
   "license": "contact sales@adaptabletools.com for details",
@@ -8,11 +8,11 @@
   "dependencies": {
     "tslib": "^2.8.1",
     "react-redux": "9.2.0",
-    "@adaptabletools/adaptable": "22.1.1"
+    "@adaptabletools/adaptable": "23.0.0-canary.1"
   },
   "peerDependencies": {
-    "ag-grid-enterprise": ">=35.2.0",
-    "ag-grid-react": ">=35.2.0",
+    "ag-grid-enterprise": ">=35.3.0",
+    "ag-grid-react": ">=35.3.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },

package/src/components/AdaptableOptionsWizardView.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { AdaptableWizardView } from '@adaptabletools/adaptable';
 import AdaptableReact from './AdaptableReact';
@@ -5,7 +6,7 @@ export const AdaptableOptionsWizardView = (props) => {
     const { shouldRenderAdaptable, adaptableProps, ...adaptableWizardViewProps } = props;
     const [adaptableConfig, setAdaptableConfig] = React.useState(null);
     if (!adaptableConfig) {
-        return (React.createElement(AdaptableWizardView, { ...adaptableWizardViewProps, onInit: (adaptableOptions, gridOptions) => {
+        return (_jsx(AdaptableWizardView, { ...adaptableWizardViewProps, onInit: (adaptableOptions, gridOptions) => {
                 setAdaptableConfig({ adaptableOptions, gridOptions });
                 props?.onInit(adaptableOptions, gridOptions);
             } }));
@@ -16,7 +17,7 @@ export const AdaptableOptionsWizardView = (props) => {
             adaptableOptions: adaptableConfig.adaptableOptions,
             gridOptions: adaptableConfig.gridOptions,
         };
-        return React.createElement(AdaptableReact, { ...preparedAdaptableProps });
+        return _jsx(AdaptableReact, { ...preparedAdaptableProps });
     }
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };

package/src/components/AdaptableProvider.d.ts

@@ -38,7 +38,7 @@ export declare const Adaptable: {
     UI: (props: {
         style?: React.CSSProperties;
         className?: string;
-    }) => React.JSX.Element;
-    AgGridReact: (props: AgGridReactPropsWithoutGridOptionsAndModules) => React.JSX.Element;
+    }) => import("react").JSX.Element;
+    AgGridReact: (props: AgGridReactPropsWithoutGridOptionsAndModules) => import("react").JSX.Element;
 };
 export {};

package/src/components/AdaptableProvider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useId, useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
@@ -49,7 +50,13 @@ function usePromise() {
 const AdaptableProvider = (props) => {
     const [currentTransition, setCurrentTransition] = React.useState(AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS);
     const useIdResult = useId();
-    const id = `${props.adaptableOptions.adaptableId || 'adaptable'}-${useIdResult}`;
+    // Stable for the lifetime of this Provider — must not change when adaptableOptions
+    // is recreated on parent re-render (e.g. inline object literals in JSX).
+    const idRef = React.useRef(null);
+    if (idRef.current === null) {
+        idRef.current = `${props.adaptableOptions.adaptableId || 'adaptable'}-${useIdResult}`;
+    }
+    const id = idRef.current;
     const [agGridProps, setAgGridProps] = React.useState();
     const [gridOptions, setGridOptions] = React.useState(props.gridOptions);
     const [agGridApi, setAgGridApi] = React.useState();
@@ -88,7 +95,7 @@ const AdaptableProvider = (props) => {
             clearTimeout(timeoutId);
         };
     }, []);
-    return (React.createElement(AdaptableAgGridContext.Provider, { value: {
+    return (_jsx(AdaptableAgGridContext.Provider, { value: {
             id,
             onAdaptableReady,
             adaptableApi,
@@ -121,17 +128,16 @@ const AdaptableProvider = (props) => {
                 ...props,
                 renderAgGridFrameworkComponent,
             },
-        } },
-        React.createElement(ReduxProvider, { store: adaptableApi?.internalApi.getAdaptableInstance()?.adaptableStore
-                ?.TheStore ?? PLACEHOLDER_REDUX_STORE }, props.children)));
+        }, children: _jsx(ReduxProvider, { store: adaptableApi?.internalApi.getAdaptableInstance()?.adaptableStore?.TheStore ??
+                PLACEHOLDER_REDUX_STORE, children: props.children }) }));
 };
 // -- ADAPTABLE UI WRAPPER -
 const AdaptableUI = (props) => {
-    const { adaptableProps, modules, gridOptions, transition, onAdaptableReady, id } = useAdaptableAgGridContext();
+    const { adaptableProps, modules, gridOptions, transition, onAdaptableReady } = useAdaptableAgGridContext();
     if (transition === AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS) {
         return null;
     }
-    return (React.createElement(AdaptableReactComponent
+    return (_jsx(AdaptableReactComponent
     // This needs to be first, so gridOptions is the one passed and not from props
     , { ...adaptableProps, onAdaptableReady: onAdaptableReady, style: props.style, className: props.className, gridOptions: gridOptions, modules: modules }));
 };
@@ -184,7 +190,7 @@ const AdaptableAgGridReact = (props) => {
     if (transition !== AdaptableAgGridStateTransitions.INITIALIZE_AG_GRID) {
         return null;
     }
-    return (React.createElement(AgGridReact, { ref: agGridRef, ...agGridPassThroughProps, modules: modules, onGridReady: (event) => {
+    return (_jsx(AgGridReact, { ref: agGridRef, ...agGridPassThroughProps, modules: modules, onGridReady: (event) => {
             // this is not called extra in strict mode
             setAgGridApi(event.api);
             if (props.onGridReady) {

package/src/components/AdaptableReact.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState, useRef, useCallback } from 'react';
 import { ColumnApiModule } from 'ag-grid-enterprise';
 import { _AdaptableAgGrid } from '@adaptabletools/adaptable';
@@ -66,6 +66,6 @@ const AdaptableReact = ({ adaptableOptions, gridOptions, onAdaptableReady, ...pr
             console.error('Failed to initialize AdaptableReact component', err);
         });
     }, [id]);
-    return (React.createElement("div", { style: props.style, ref: containerRef, id: adaptableContainerId, className: join(props.className, 'ab__react-wrapper') }, adaptableJSXElement));
+    return (_jsx("div", { style: props.style, ref: containerRef, id: adaptableContainerId, className: join(props.className, 'ab__react-wrapper'), children: adaptableJSXElement }));
 };
 export default AdaptableReact;

package/src/setupFrameworkComponents.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 const weakMap = new WeakMap();
 export const setupFrameworkComponents = (adaptableApi) => {
     adaptableApi.internalApi
@@ -13,7 +13,7 @@ export const setupFrameworkComponents = (adaptableApi) => {
                 const ReactComponent = frameworkComponent;
                 const unmount = adaptableApi.internalApi
                     .getAdaptableInstance()
-                    .renderReactRoot(React.createElement(ReactComponent, { adaptableApi: adaptableApi }), containerDomNode);
+                    .renderReactRoot(_jsx(ReactComponent, { adaptableApi: adaptableApi }), containerDomNode);
                 weakMap.set(containerDomNode, unmount);
             }
             catch (err) {

package/themes/dark.css

@@ -1,29 +1,57 @@
 @layer adaptable.theme {
   .ab--theme-dark {
+    /****** Shadcn colors ******/
+    --ab-color-background: oklch(0.145 0 0);
+    --ab-color-foreground: oklch(0.985 0 0);
+    --ab-color-secondary: oklch(0.269 0 0);
+    --ab-color-secondary-foreground: oklch(0.985 0 0);
+    --ab-color-destructive: oklch(0.396 0.141 25.723);
+    --ab-color-destructive-foreground: oklch(0.637 0.237 25.331);
+    --ab-color-border: oklch(0.269 0 0);
+    /******/
+
     --ab-theme-loaded: dark;
 
     --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */
 
     --ab-color-defaultbackground: #3e444c;
     --ab-color-text-on-defaultbackground: #e2e2e2;
+    /* Inputs/comboboxes: panel gray, not app chrome black */
+    --ab-color-input-background: var(--ab-color-defaultbackground);
 
     --ab-color-primary: #262d2f;
+    --ab-color-primary-foreground: var(--ab-color-text-on-primary);
     --ab-color-primarylight: #3d3e3f;
     --ab-color-primarydark: #1c2021;
     --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */
 
+    --ab-color-palette-1: #5c1a1a;
+    --ab-color-palette-2: #ffb4b4;
+    --ab-color-palette-3: #4a3b00;
+    --ab-color-palette-4: #ffd966;
+    --ab-color-palette-5: #1b4332;
+    --ab-color-palette-6: #95d5b2;
+    --ab-color-palette-7: #1a365d;
+    --ab-color-palette-8: #90cdf4;
+    --ab-color-palette-9: #2d3748;
+    --ab-color-palette-10: #e2e8f0;
+    --ab-color-palette-11: #44337a;
+    --ab-color-palette-12: #d6bcfa;
+
     --ab-color-shadow: rgb(255 255 255 / 0.45);
     --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);
 
     --ab-dashboard__border: #555;
     --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;
 
-  
-    --ab-color-filtered-columns: var(--ab-color-text-on-primary);
-    --ab-color-filtered-columns-background: var(--ab-color-defaultbackground);
-
     --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
     --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
+
+    /* Tabs: darker strip, lighter active tab + panel (inactive vs active was too similar) */
+    --ab-cmp-tabs-strip__background: var(--ab-color-primary);
+    --ab-cmp-tabs-active__background: var(--ab-color-defaultbackground);
+    --ab-cmp-tabs-inactive__opacity: 0.78;
+    --ab-cmp-tabs-inactive-separator__color: #555;
   }
 
     .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
@@ -41,8 +69,8 @@ as our dark theme is anyways applied on the document element.
 
 */
   .ab--theme-dark {
-    --ab-color-inputcolor: var(--ab-color-text-on-primary);
-    --ab-cmp-input__color: var(--ab-color-inputcolor);
+    --ab-color-input-foreground: var(--ab-color-text-on-primary);
+    --ab-cmp-input__color: var(--ab-color-input-foreground);
     --ab-cmp-input__background: var(--ab-color-defaultbackground);
     --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
     --ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);