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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-react-aggrid-cjs",
-  "version": "22.1.1-canary.1",
+  "version": "23.0.0-canary.0",
   "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",
@@ -9,11 +9,11 @@
   "dependencies": {
     "tslib": "^2.8.1",
     "react-redux": "9.2.0",
-    "@adaptabletools/adaptable-cjs": "22.1.1-canary.1"
+    "@adaptabletools/adaptable-cjs": "23.0.0-canary.0"
   },
   "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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableOptionsWizardView = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const adaptable_1 = require("@adaptabletools/adaptable-cjs");
 const AdaptableReact_1 = tslib_1.__importDefault(require("./AdaptableReact"));
@@ -9,7 +10,7 @@ const AdaptableOptionsWizardView = (props) => {
     const { shouldRenderAdaptable, adaptableProps, ...adaptableWizardViewProps } = props;
     const [adaptableConfig, setAdaptableConfig] = React.useState(null);
     if (!adaptableConfig) {
-        return (React.createElement(adaptable_1.AdaptableWizardView, { ...adaptableWizardViewProps, onInit: (adaptableOptions, gridOptions) => {
+        return ((0, jsx_runtime_1.jsx)(adaptable_1.AdaptableWizardView, { ...adaptableWizardViewProps, onInit: (adaptableOptions, gridOptions) => {
                 setAdaptableConfig({ adaptableOptions, gridOptions });
                 props?.onInit(adaptableOptions, gridOptions);
             } }));
@@ -20,8 +21,8 @@ const AdaptableOptionsWizardView = (props) => {
             adaptableOptions: adaptableConfig.adaptableOptions,
             gridOptions: adaptableConfig.gridOptions,
         };
-        return React.createElement(AdaptableReact_1.default, { ...preparedAdaptableProps });
+        return (0, jsx_runtime_1.jsx)(AdaptableReact_1.default, { ...preparedAdaptableProps });
     }
-    return React.createElement(React.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 };
 exports.AdaptableOptionsWizardView = AdaptableOptionsWizardView;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Adaptable = exports.useAdaptableAgGridContext = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const ag_grid_react_1 = require("ag-grid-react");
@@ -54,7 +55,13 @@ function usePromise() {
 const AdaptableProvider = (props) => {
     const [currentTransition, setCurrentTransition] = React.useState(AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS);
     const useIdResult = (0, react_1.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();
@@ -93,7 +100,7 @@ const AdaptableProvider = (props) => {
             clearTimeout(timeoutId);
         };
     }, []);
-    return (React.createElement(AdaptableAgGridContext.Provider, { value: {
+    return ((0, jsx_runtime_1.jsx)(AdaptableAgGridContext.Provider, { value: {
             id,
             onAdaptableReady,
             adaptableApi,
@@ -126,17 +133,16 @@ const AdaptableProvider = (props) => {
                 ...props,
                 renderAgGridFrameworkComponent,
             },
-        } },
-        React.createElement(react_redux_1.Provider, { store: adaptableApi?.internalApi.getAdaptableInstance()?.adaptableStore
-                ?.TheStore ?? PLACEHOLDER_REDUX_STORE }, props.children)));
+        }, children: (0, jsx_runtime_1.jsx)(react_redux_1.Provider, { 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 } = (0, exports.useAdaptableAgGridContext)();
+    const { adaptableProps, modules, gridOptions, transition, onAdaptableReady } = (0, exports.useAdaptableAgGridContext)();
     if (transition === AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS) {
         return null;
     }
-    return (React.createElement(AdaptableReact_1.default
+    return ((0, jsx_runtime_1.jsx)(AdaptableReact_1.default
     // 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 }));
 };
@@ -189,7 +195,7 @@ const AdaptableAgGridReact = (props) => {
     if (transition !== AdaptableAgGridStateTransitions.INITIALIZE_AG_GRID) {
         return null;
     }
-    return (React.createElement(ag_grid_react_1.AgGridReact, { ref: agGridRef, ...agGridPassThroughProps, modules: modules, onGridReady: (event) => {
+    return ((0, jsx_runtime_1.jsx)(ag_grid_react_1.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,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ag_grid_enterprise_1 = require("ag-grid-enterprise");
 const adaptable_1 = require("@adaptabletools/adaptable-cjs");
@@ -69,6 +69,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: (0, join_1.default)(props.className, 'ab__react-wrapper') }, adaptableJSXElement));
+    return ((0, jsx_runtime_1.jsx)("div", { style: props.style, ref: containerRef, id: adaptableContainerId, className: (0, join_1.default)(props.className, 'ab__react-wrapper'), children: adaptableJSXElement }));
 };
 exports.default = AdaptableReact;

package/src/setupFrameworkComponents.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupFrameworkComponents = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const weakMap = new WeakMap();
 const setupFrameworkComponents = (adaptableApi) => {
     adaptableApi.internalApi
@@ -17,7 +16,7 @@ const setupFrameworkComponents = (adaptableApi) => {
                 const ReactComponent = frameworkComponent;
                 const unmount = adaptableApi.internalApi
                     .getAdaptableInstance()
-                    .renderReactRoot(React.createElement(ReactComponent, { adaptableApi: adaptableApi }), containerDomNode);
+                    .renderReactRoot((0, jsx_runtime_1.jsx)(ReactComponent, { adaptableApi: adaptableApi }), containerDomNode);
                 weakMap.set(containerDomNode, unmount);
             }
             catch (err) {

package/themes/dark.css

@@ -1,10 +1,21 @@
 @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-background: var(--ab-color-defaultbackground, #3e444c);
     --ab-color-text-on-defaultbackground: #e2e2e2;
 
     --ab-color-primary: #262d2f;
@@ -12,16 +23,25 @@
     --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);
   }
@@ -41,9 +61,9 @@ 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-cmp-input__background: var(--ab-color-defaultbackground);
+    --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-input-background);
     --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
     --ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);
   }