@adaptabletools/adaptable-angular-aggrid 23.0.9 → 23.0.11

package/README.md

@@ -8,6 +8,39 @@ AdapTable provides a huge range of Data Grid (and FDC3) features, which extend A
 
 For full details on how to install, instantiate and reference AdapTable programmatically at run-time please read the [AdapTable Angular Documentation](https://www.adaptabletools.com/docs/angular-overview).
 
+## CommonJS Build Warnings
+
+When building an Angular application which uses AdapTable, you may see warnings like:
+
+```
+[WARNING] Module 'react' used by 'node_modules/@adaptabletools/adaptable/...' is not ESM
+CommonJS or AMD dependencies can cause optimization bailouts.
+```
+
+These warnings are emitted by all Angular builders — both the esbuild-based ones (`@angular/build:application`, `@angular-devkit/build-angular:browser-esbuild`) and the older webpack-based one (`@angular-devkit/build-angular:browser`, where the message reads `'...' depends on 'react'` instead).
+
+These warnings refer to React ecosystem packages used internally by AdapTable (`react`, `react-dom`, and the transitive dependency `use-sync-external-store`). These packages are published as CommonJS only — no ESM distribution exists — so the warnings cannot be avoided at the package level. They are harmless: the build output is correct, and the "optimization bailout" only means the bundler cannot tree-shake inside those specific modules (which would have no effect on React's monolithic runtime anyway).
+
+To silence the warnings, add the packages to the [`allowedCommonJsDependencies`](https://angular.dev/tools/cli/build#configuring-commonjs-dependencies) build option — in `angular.json`, or in `project.json` if you are using an Nx monorepo:
+
+```json
+{
+  "targets": {
+    "build": {
+      "executor": "@angular/build:application",
+      "options": {
+        "allowedCommonJsDependencies": [
+          "react",
+          "react-dom",
+          "use-sync-external-store"
+        ]
+      }
+    }
+  }
+}
+```
+
+Listing a package name also covers its deep imports (e.g. `react/jsx-runtime`, `react-dom/client`, `use-sync-external-store/shim`), so these three entries are sufficient.
 
 ## Demos
 

package/index.css

@@ -405,9 +405,6 @@
   .twa\:-mx-1 {
     margin-inline: calc(var(--ab-base-space) * -1);
   }
-  .twa\:mx-0\.5 {
-    margin-inline: calc(var(--ab-base-space) * 0.5);
-  }
   .twa\:mx-1 {
     margin-inline: var(--ab-base-space);
   }
@@ -711,8 +708,8 @@
   .twa\:max-h-\[min\(calc\(--spacing\(72\)---spacing\(9\)\)\,calc\(var\(--available-height\)---spacing\(9\)\)\)\] {
     max-height: min(calc(calc(var(--ab-base-space) * 72) - calc(var(--ab-base-space) * 9)), calc(var(--available-height) - calc(var(--ab-base-space) * 9)));
   }
-  .twa\:max-h-\[min\(var\(--available-height\)\,80vh\)\] {
-    max-height: min(var(--available-height), 80vh);
+  .twa\:max-h-\[min\(var\(--available-height\,80vh\)\,80vh\)\] {
+    max-height: min(var(--available-height,80vh), 80vh);
   }
   .twa\:max-h-full {
     max-height: 100%;
@@ -1023,6 +1020,9 @@
   .twa\:max-w-\[min\(var\(--available-width\)\,80vw\)\] {
     max-width: min(var(--available-width), 80vw);
   }
+  .twa\:max-w-\[min\(var\(--available-width\,80vw\)\,80vw\)\] {
+    max-width: min(var(--available-width,80vw), 80vw);
+  }
   .twa\:max-w-full {
     max-width: 100%;
   }
@@ -1379,9 +1379,6 @@
   .twa\:gap-y-3 {
     row-gap: calc(var(--ab-base-space) * 3);
   }
-  .twa\:self-center {
-    align-self: center;
-  }
   .twa\:self-end {
     align-self: flex-end;
   }
@@ -1825,6 +1822,9 @@
   .twa\:px-0 {
     padding-inline: 0;
   }
+  .twa\:px-0\.5 {
+    padding-inline: calc(var(--ab-base-space) * 0.5);
+  }
   .twa\:px-1 {
     padding-inline: var(--ab-base-space);
   }
@@ -2756,6 +2756,16 @@
       }
     }
   }
+  @media (hover: hover) {
+    .twa\:hover\:bg-current\/15:hover {
+      background-color: currentcolor;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .twa\:hover\:bg-current\/15:hover {
+        background-color: color-mix(in oklab, currentcolor 15%, transparent);
+      }
+    }
+  }
   @media (hover: hover) {
     .twa\:hover\:bg-destructive\/20:hover {
       background-color: var(--ab-color-destructive);
@@ -3630,6 +3640,9 @@
   :is(.twa\:\*\:\[\[role\=button\]\]\:absolute > *):is([role=button]) {
     position: absolute;
   }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:relative > *):is([role=button]) {
+    position: relative;
+  }
   :is(.twa\:\*\:\[\[role\=button\]\]\:inset-x-0\.5 > *):is([role=button]) {
     inset-inline: calc(var(--ab-base-space) * 0.5);
   }
@@ -3639,12 +3652,31 @@
   :is(.twa\:\*\:\[\[role\=button\]\]\:h-auto > *):is([role=button]) {
     height: auto;
   }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:h-full > *):is([role=button]) {
+    height: 100%;
+  }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:min-w-0 > *):is([role=button]) {
+    min-width: 0;
+  }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:flex-1 > *):is([role=button]) {
+    flex: 1;
+  }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:basis-0 > *):is([role=button]) {
+    flex-basis: 0;
+  }
   :is(.twa\:\*\:\[\[role\=button\]\]\:rounded-input > *):is([role=button]) {
     border-radius: var(--ab-border-radius-input);
   }
+  :is(.twa\:\*\:\[\[role\=button\]\]\:border-none > *):is([role=button]) {
+    --tw-border-style: none;
+    border-style: none;
+  }
   :is(.twa\:\*\:\[input\]\:absolute > *):is(input) {
     position: absolute;
   }
+  :is(.twa\:\*\:\[input\]\:relative > *):is(input) {
+    position: relative;
+  }
   :is(.twa\:\*\:\[input\]\:inset-x-0\.5 > *):is(input) {
     inset-inline: calc(var(--ab-base-space) * 0.5);
   }
@@ -3654,9 +3686,25 @@
   :is(.twa\:\*\:\[input\]\:h-auto > *):is(input) {
     height: auto;
   }
+  :is(.twa\:\*\:\[input\]\:h-full > *):is(input) {
+    height: 100%;
+  }
+  :is(.twa\:\*\:\[input\]\:min-w-0 > *):is(input) {
+    min-width: 0;
+  }
+  :is(.twa\:\*\:\[input\]\:flex-1 > *):is(input) {
+    flex: 1;
+  }
+  :is(.twa\:\*\:\[input\]\:basis-0 > *):is(input) {
+    flex-basis: 0;
+  }
   :is(.twa\:\*\:\[input\]\:rounded-input > *):is(input) {
     border-radius: var(--ab-border-radius-input);
   }
+  :is(.twa\:\*\:\[input\]\:border-none > *):is(input) {
+    --tw-border-style: none;
+    border-style: none;
+  }
   :is(.twa\:\*\*\:\[input\]\:min-h-auto\! *):is(input) {
     min-height: auto !important;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-angular-aggrid",
-  "version": "23.0.9",
+  "version": "23.0.11",
   "description": "Angular version of AdapTable - the powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "license": "contact sales@adaptabletools.com for details",
   "peerDependencies": {
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "tslib": "^2.8.1",
-    "@adaptabletools/adaptable": "23.0.9"
+    "@adaptabletools/adaptable": "23.0.11"
   },
   "exports": {
     "./index.css": "./index.css",