@object-ui/components 4.0.4 → 4.0.6

package/CHANGELOG.md

@@ -1,5 +1,70 @@
 # @object-ui/components
 
+## 4.0.6
+
+### Patch Changes
+
+- 925051d: fix: convert Tailwind v3 `[--var]` arbitrary value syntax to v4 `(--var)`
+
+  Shadcn `Sidebar`, `Calendar`, `Chart`, `Popover`, `Tooltip`, `HoverCard`,
+  `Menubar`, `Select`, `Dropdown`, `Context-Menu`, and `AppSidebar` used the
+  Tailwind v3 syntax `w-[--sidebar-width]`, `origin-[--radix-...]`, etc.
+  Tailwind v4 no longer interprets the bare `--xxx` inside arbitrary values
+  as `var(--xxx)`, so the rule emits empty CSS — the sidebar collapses to
+  0 width and overlays the main content, dropdown/popover positions fall
+  back to the wrong origin, and the calendar cells lose their fixed size.
+
+  Replaced all such occurrences with the v4 CSS-variable shorthand
+  `w-(--sidebar-width)`, `origin-(--radix-...)`, etc. Existing
+  `[calc(var(--xxx)*-1)]` arbitrary expressions are unaffected.
+
+- 1b6dc64: fix: complete Tailwind v3→v4 migration cleanup
+  - Rename deprecated `flex-shrink-0` → `shrink-0` and `flex-grow-N` →
+    `grow-N` (Tailwind v4 dropped the long-form aliases). Affects
+    data-table, fields/index, FileField, ChatbotEnhanced,
+    FloatingChatbotPanel, ProcessDesigner, HistoryPanel, KanbanEnhanced,
+    KanbanImpl, plugin-timeline index, FlowDesigner, LayoutRenderer.
+  - Replace `theme(spacing.4)` inside arbitrary-value `[calc(...)]` with
+    literal `1rem` in sidebar.tsx — `theme()` is deprecated in v4.
+  - Remove obsolete v3-escape CSS overrides from index.css and
+    sidebar-fixes.css. The component source now uses native v4 stacked
+    data variants (`group-data-[state=collapsed]:group-data-[collapsible=icon]:w-(--sidebar-width-icon)`)
+    which Tailwind v4 emits correctly without the manual overrides.
+    Only the bespoke `.sidebar-menu-button-icon-mode*` rules are kept.
+  - @object-ui/types@4.0.6
+  - @object-ui/core@4.0.6
+  - @object-ui/i18n@4.0.6
+  - @object-ui/react@4.0.6
+
+## 4.0.5
+
+### Patch Changes
+
+- 1dc6061: fix(build): inline dynamic imports in library outputs
+
+  Library `vite build --lib` outputs were emitting separate code-split chunks
+  (`rolldown-runtime-*.js`, `LookupField-*.js`, etc.) when source files used
+  `React.lazy()` / dynamic `import()`. When consumer apps re-bundled these
+  multi-file dists, the library's per-chunk rolldown-runtime collided with the
+  consumer's own runtime, causing "TypeError: i is not a function" at runtime
+  when lazy components tried to register themselves (e.g. TextField in
+  `@object-ui/fields` after 4.0.4).
+
+  Adding `output.inlineDynamicImports: true` to all `@object-ui/*` library vite
+  configs forces a single `dist/index.js` per package, which lets consumer
+  bundlers handle the library as an opaque ESM module without identifier
+  mismatches across chunks.
+
+  Affected packages: components, fields, layout, plugin-aggrid, plugin-ai,
+  plugin-calendar, plugin-charts, plugin-chatbot, plugin-dashboard,
+  plugin-designer, plugin-detail, plugin-editor, plugin-form, plugin-gantt,
+  plugin-grid, plugin-kanban, plugin-list, plugin-map, plugin-markdown,
+  plugin-report, plugin-timeline, plugin-view, plugin-workflow.
+  - @object-ui/types@4.0.5
+  - @object-ui/core@4.0.5
+  - @object-ui/i18n@4.0.5
+  - @object-ui/react@4.0.5
+
 ## 4.0.4
 
 ### Patch Changes

package/dist/index.css

@@ -642,6 +642,10 @@
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
+  .size-\(--cell-size\) {
+    width: var(--cell-size);
+    height: var(--cell-size);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -670,9 +674,8 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
-  .size-\[--cell-size\] {
-    width: --cell-size;
-    height: --cell-size;
+  .h-\(--cell-size\) {
+    height: var(--cell-size);
   }
   .h-1 {
     height: calc(var(--spacing) * 1);
@@ -749,9 +752,6 @@
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
-  .h-\[--cell-size\] {
-    height: --cell-size;
-  }
   .h-\[1px\] {
     height: 1px;
   }
@@ -800,14 +800,14 @@
   .h-svh {
     height: 100svh;
   }
-  .max-h-40 {
-    max-height: calc(var(--spacing) * 40);
+  .max-h-\(--radix-context-menu-content-available-height\) {
+    max-height: var(--radix-context-menu-content-available-height);
   }
-  .max-h-\[--radix-context-menu-content-available-height\] {
-    max-height: --radix-context-menu-content-available-height;
+  .max-h-\(--radix-select-content-available-height\) {
+    max-height: var(--radix-select-content-available-height);
   }
-  .max-h-\[--radix-select-content-available-height\] {
-    max-height: --radix-select-content-available-height;
+  .max-h-40 {
+    max-height: calc(var(--spacing) * 40);
   }
   .max-h-\[50vh\] {
     max-height: 50vh;
@@ -875,6 +875,12 @@
   .min-h-svh {
     min-height: 100svh;
   }
+  .w-\(--cell-size\) {
+    width: var(--cell-size);
+  }
+  .w-\(--sidebar-width\) {
+    width: var(--sidebar-width);
+  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -962,9 +968,6 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
-  .w-\[--cell-size\] {
-    width: --cell-size;
-  }
   .w-\[--sidebar-width\] {
     width: --sidebar-width;
   }
@@ -1016,6 +1019,9 @@
   .w-px {
     width: 1px;
   }
+  .max-w-\(--skeleton-width\) {
+    max-width: var(--skeleton-width);
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -1034,9 +1040,6 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
-  .max-w-\[--skeleton-width\] {
-    max-width: --skeleton-width;
-  }
   .max-w-\[40\%\] {
     max-width: 40%;
   }
@@ -1085,6 +1088,9 @@
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .min-w-\(--cell-size\) {
+    min-width: var(--cell-size);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1103,9 +1109,6 @@
   .min-w-11 {
     min-width: calc(var(--spacing) * 11);
   }
-  .min-w-\[--cell-size\] {
-    min-width: --cell-size;
-  }
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1148,26 +1151,29 @@
   .border-collapse {
     border-collapse: collapse;
   }
-  .origin-\[--radix-context-menu-content-transform-origin\] {
-    transform-origin: --radix-context-menu-content-transform-origin;
+  .origin-\(--radix-context-menu-content-transform-origin\) {
+    transform-origin: var(--radix-context-menu-content-transform-origin);
+  }
+  .origin-\(--radix-dropdown-menu-content-transform-origin\) {
+    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
   }
-  .origin-\[--radix-dropdown-menu-content-transform-origin\] {
-    transform-origin: --radix-dropdown-menu-content-transform-origin;
+  .origin-\(--radix-hover-card-content-transform-origin\) {
+    transform-origin: var(--radix-hover-card-content-transform-origin);
   }
-  .origin-\[--radix-hover-card-content-transform-origin\] {
-    transform-origin: --radix-hover-card-content-transform-origin;
+  .origin-\(--radix-menubar-content-transform-origin\) {
+    transform-origin: var(--radix-menubar-content-transform-origin);
   }
-  .origin-\[--radix-menubar-content-transform-origin\] {
-    transform-origin: --radix-menubar-content-transform-origin;
+  .origin-\(--radix-popover-content-transform-origin\) {
+    transform-origin: var(--radix-popover-content-transform-origin);
   }
-  .origin-\[--radix-popover-content-transform-origin\] {
-    transform-origin: --radix-popover-content-transform-origin;
+  .origin-\(--radix-select-content-transform-origin\) {
+    transform-origin: var(--radix-select-content-transform-origin);
   }
-  .origin-\[--radix-select-content-transform-origin\] {
-    transform-origin: --radix-select-content-transform-origin;
+  .origin-\(--radix-tooltip-content-transform-origin\) {
+    transform-origin: var(--radix-tooltip-content-transform-origin);
   }
-  .origin-\[--radix-tooltip-content-transform-origin\] {
-    transform-origin: --radix-tooltip-content-transform-origin;
+  .origin-\[--radix-\.\.\.\] {
+    transform-origin: --radix-...;
   }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
@@ -1604,8 +1610,8 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-\[--color-border\] {
-    border-color: --color-border;
+  .border-\(--color-border\) {
+    border-color: var(--color-border);
   }
   .border-blue-300 {
     border-color: var(--color-blue-300);
@@ -1670,8 +1676,8 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
-  .bg-\[--color-bg\] {
-    background-color: --color-bg;
+  .bg-\(--color-bg\) {
+    background-color: var(--color-bg);
   }
   .bg-accent {
     background-color: var(--color-accent);
@@ -1939,6 +1945,9 @@
   .p-\[1px\] {
     padding: 1px;
   }
+  .px-\(--cell-size\) {
+    padding-inline: var(--cell-size);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -1963,9 +1972,6 @@
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
-  .px-\[--cell-size\] {
-    padding-inline: --cell-size;
-  }
   .px-\[0\.3rem\] {
     padding-inline: 0.3rem;
   }
@@ -2717,41 +2723,6 @@
       align-self: flex-start;
     }
   }
-  .group-data-\[collapsible\=icon\]\:-mt-8 {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      margin-top: calc(var(--spacing) * -8);
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:hidden {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      display: none;
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      width: --sidebar-width-icon;
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      width: calc(var(--sidebar-width-icon) + 1rem);
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      width: calc(var(--sidebar-width-icon) + 1rem + 2px);
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:overflow-hidden {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      overflow: hidden;
-    }
-  }
-  .group-data-\[collapsible\=icon\]\:opacity-0 {
-    &:is(:where(.group)[data-collapsible="icon"] *) {
-      opacity: 0%;
-    }
-  }
   .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\] {
     &:is(:where(.group)[data-collapsible="offcanvas"] *) {
       right: calc(var(--sidebar-width) * -1);
@@ -2829,6 +2800,55 @@
       border-left-width: 1px;
     }
   }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:-mt-8 {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        margin-top: calc(var(--spacing) * -8);
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:hidden {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        display: none;
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\) {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        width: var(--sidebar-width-icon);
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_1rem\)\] {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        width: calc(var(--sidebar-width-icon) + 1rem);
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_1rem_\+_2px\)\] {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        width: calc(var(--sidebar-width-icon) + 1rem + 2px);
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:overflow-hidden {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        overflow: hidden;
+      }
+    }
+  }
+  .group-data-\[state\=collapsed\]\:group-data-\[collapsible\=icon\]\:opacity-0 {
+    &:is(:where(.group)[data-state="collapsed"] *) {
+      &:is(:where(.group)[data-collapsible="icon"] *) {
+        opacity: 0%;
+      }
+    }
+  }
   .group-data-\[state\=open\]\:rotate-180 {
     &:is(:where(.group)[data-state="open"] *) {
       rotate: 180deg;
@@ -5961,48 +5981,6 @@ body {
 .dark [data-sidebar="menu-button"][data-active="true"]:hover {
   background-color: hsl(var(--primary) / 0.24);
 }
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
-  width: var(--sidebar-width-icon);
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\] {
-  width: var(--sidebar-width);
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
-  width: calc(var(--sidebar-width-icon) + 1rem);
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\] {
-  width: var(--sidebar-width);
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
-  width: calc(var(--sidebar-width-icon) + 1rem + 2px);
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\] {
-  width: var(--sidebar-width);
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:opacity-0 {
-  opacity: 0;
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:opacity-0 {
-  opacity: 1;
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:-mt-8 {
-  margin-top: -2rem;
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:-mt-8 {
-  margin-top: 0;
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:hidden {
-  display: none;
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:hidden {
-  display: block;
-}
-.group[data-collapsible="icon"][data-state="collapsed"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
-  overflow: hidden;
-}
-.group[data-collapsible="icon"][data-state="expanded"] .group-data-\[collapsible\=icon\]\:overflow-hidden {
-  overflow: auto;
-}
 .group[data-collapsible="icon"][data-state="collapsed"] .sidebar-menu-button-icon-mode {
   width: 2rem !important;
   height: 2rem !important;
@@ -6019,9 +5997,6 @@ body {
 .group[data-collapsible="icon"][data-state="expanded"] .sidebar-menu-button-icon-mode-lg {
   padding: 0.5rem;
 }
-.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 {
-  width: 0;
-}
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -6445,5 +6420,5 @@ body {
 
 
 /* === sidebar-fixes.css (extracted by Vite) === */
-.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]{width:var(--sidebar-width-icon)}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:w-\[--sidebar-width-icon\]{width:var(--sidebar-width)}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]{width:calc(var(--sidebar-width-icon) + 1rem)}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)\)\]{width:var(--sidebar-width)}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]{width:calc(var(--sidebar-width-icon) + 1rem + 2px)}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)_\+_theme\(spacing\.4\)_\+2px\)\]{width:var(--sidebar-width)}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:opacity-0{opacity:0}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:opacity-0{opacity:1}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:-mt-8{margin-top:-2rem}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:-mt-8{margin-top:0}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:hidden{display:none}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:hidden{display:block}.group[data-collapsible=icon][data-state=collapsed] .group-data-\[collapsible\=icon\]\:overflow-hidden{overflow:hidden}.group[data-collapsible=icon][data-state=expanded] .group-data-\[collapsible\=icon\]\:overflow-hidden{overflow:auto}.group[data-collapsible=icon][data-state=collapsed] .sidebar-menu-button-icon-mode{width:2rem!important;height:2rem!important;padding:.5rem!important}.group[data-collapsible=icon][data-state=expanded] .sidebar-menu-button-icon-mode{width:100%;height:auto;padding:.5rem}.group[data-collapsible=icon][data-state=collapsed] .sidebar-menu-button-icon-mode-lg{padding:0!important}.group[data-collapsible=icon][data-state=expanded] .sidebar-menu-button-icon-mode-lg{padding:.5rem}.group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:w-0{width:0}
+.group[data-collapsible=icon][data-state=collapsed] .sidebar-menu-button-icon-mode{width:2rem!important;height:2rem!important;padding:.5rem!important}.group[data-collapsible=icon][data-state=expanded] .sidebar-menu-button-icon-mode{width:100%;height:auto;padding:.5rem}.group[data-collapsible=icon][data-state=collapsed] .sidebar-menu-button-icon-mode-lg{padding:0!important}.group[data-collapsible=icon][data-state=expanded] .sidebar-menu-button-icon-mode-lg{padding:.5rem}
 /*$vite$:1*/