@rettangoli/ui 1.0.22 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/sidebar/sidebar.handlers.js

@@ -1,3 +1,25 @@
+const parseBooleanProp = (value) => {
+  if (value === true) {
+    return true;
+  }
+  if (value === false || value === undefined || value === null) {
+    return false;
+  }
+  if (typeof value === 'string') {
+    const normalizedValue = value.trim().toLowerCase();
+    return normalizedValue === '' || normalizedValue === 'true';
+  }
+  return false;
+};
+
+const resolveCompactTooltipEnabled = (props = {}) => {
+  if (props.tooltip !== undefined && props.tooltip !== null) {
+    return parseBooleanProp(props.tooltip);
+  }
+
+  return parseBooleanProp(props.showCompactTooltip);
+};
+
 export const handleHeaderClick = (deps, payload) => {
   const { store, dispatchEvent } = deps;
   const event = payload._event;
@@ -41,9 +63,7 @@ export const handleItemClick = (deps, payload) => {
 
 export const handleItemMouseEnter = (deps, payload) => {
   const { props, store, render } = deps;
-  const showCompactTooltip = props.showCompactTooltip === true ||
-    props.showCompactTooltip === '' ||
-    props.showCompactTooltip === 'true';
+  const showCompactTooltip = resolveCompactTooltipEnabled(props);
 
   if (!showCompactTooltip || (props.mode || 'full') === 'full') {
     return;

package/src/components/sidebar/sidebar.schema.yaml

@@ -7,9 +7,13 @@ propsSchema:
     hideHeader:
       type: boolean
       default: false
+    tooltip:
+      type: boolean
+      default: false
     showCompactTooltip:
       type: boolean
       default: false
+      description: Deprecated alias for tooltip. Use tooltip instead.
     w:
       type: string
     bwr:

package/src/components/sidebar/sidebar.store.js

@@ -8,7 +8,7 @@ export const createInitialState = () => Object.freeze({
   },
 });
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'header', 'items', 'selectedItemId', 'mode', 'hideHeader', 'showCompactTooltip', 'w', 'bwr'];
+const blacklistedAttrs = ['id', 'class', 'style', 'slot', 'header', 'items', 'selectedItemId', 'mode', 'hideHeader', 'tooltip', 'showCompactTooltip', 'w', 'bwr'];
 
 const stringifyAttrs = (props = {}) => {
   return Object.entries(props).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
@@ -50,6 +50,14 @@ const parseBooleanProp = (value) => {
   return false;
 };
 
+const resolveCompactTooltipEnabled = (props = {}) => {
+  if (props.tooltip !== undefined && props.tooltip !== null) {
+    return parseBooleanProp(props.tooltip);
+  }
+
+  return parseBooleanProp(props.showCompactTooltip);
+};
+
 const resolveSidebarWidth = (value, mode) => {
   if (value !== undefined && value !== null && value !== '') {
     return value;
@@ -142,7 +150,7 @@ export const selectViewData = ({ state, props }) => {
   const items = resolvedItems ? flattenItems(resolvedItems, selectedItemId) : [];
 
   const showHeader = !parseBooleanProp(props.hideHeader);
-  const showCompactTooltip = parseBooleanProp(props.showCompactTooltip);
+  const showCompactTooltip = resolveCompactTooltipEnabled(props);
   const rightBorderWidth = props.bwr || 'xs';
   // Computed values based on mode
   const sidebarWidth = resolveSidebarWidth(props.w, mode);

package/src/primitives/dialog.js

@@ -229,7 +229,10 @@ class RettangoliDialogElement extends HTMLElement {
 
       window.addEventListener("resize", this._onWindowResize);
       this._observeAssignedContent();
-      this._scheduleAdaptiveCentering({ resetRetries: true });
+      this._layoutRetryCount = 0;
+      // Apply the first centering pass before paint so the enter animation
+      // starts from the final position instead of jumping after mount.
+      this._applyAdaptiveCentering();
     }
   }
 

package/src/primitives/popover.js

@@ -25,6 +25,7 @@ class RettangoliPopoverElement extends HTMLElement {
           left: 0;
           width: 100vw;
           height: 100vh;
+          z-index: 2000;
           /* Prevent dialog from being focused */
           pointer-events: none;
         }
@@ -37,7 +38,7 @@ class RettangoliPopoverElement extends HTMLElement {
 
         .popover-container {
           position: fixed;
-          z-index: 1000;
+          z-index: inherit;
           outline: none;
           pointer-events: auto;
         }