@rettangoli/ui 1.7.5 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.7.5",
+  "version": "1.8.0",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -62,7 +62,7 @@
   },
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
-    "@rettangoli/fe": "1.1.3",
+    "@rettangoli/fe": "1.2.0",
     "jempl": "1.0.1"
   }
 }

package/src/common/popover.js

@@ -61,6 +61,11 @@ export const calculatePopoverPosition = ({
       left = x - width - offset;
       top = y - height;
       break;
+    case "center":
+    case "c":
+      left = (viewportWidth - width) / 2;
+      top = (viewportHeight - height) / 2;
+      break;
     default:
       left = x;
       top = y + offset;

package/src/components/dropdownMenu/dropdownMenu.handlers.js

@@ -11,6 +11,18 @@ const getItemType = (item = {}) => {
   return 'item';
 };
 
+export const handleOnUpdate = (deps, payload) => {
+  const { render, refs } = deps;
+  const { oldProps = {}, newProps = {} } = payload;
+  const shouldRefreshPopover = oldProps.items !== newProps.items && !!newProps.open;
+
+  render();
+
+  if (shouldRefreshPopover) {
+    refs?.popover?.refreshContent?.();
+  }
+}
+
 export const handleClosePopover = (deps, payload) => {
   const { dispatchEvent } = deps;
   dispatchEvent(new CustomEvent('close'));

package/src/components/dropdownMenu/dropdownMenu.schema.yaml

@@ -44,6 +44,34 @@ propsSchema:
       type: string
     place:
       type: string
+    overlay:
+      type: boolean
+    no-overlay:
+      type: boolean
+    sm-place:
+      type: string
+    md-place:
+      type: string
+    lg-place:
+      type: string
+    xl-place:
+      type: string
+    sm-overlay:
+      type: boolean
+    md-overlay:
+      type: boolean
+    lg-overlay:
+      type: boolean
+    xl-overlay:
+      type: boolean
+    sm-no-overlay:
+      type: boolean
+    md-no-overlay:
+      type: boolean
+    lg-no-overlay:
+      type: boolean
+    xl-no-overlay:
+      type: boolean
     w:
       type: string
     h:

package/src/components/dropdownMenu/dropdownMenu.store.js

@@ -3,6 +3,38 @@ export const createInitialState = () => Object.freeze({
 });
 
 const escapeAttrValue = (value) => `${value}`.replace(/"/g, '"');
+const POPOVER_ATTR_PROPS = [
+  ["overlay", "overlay"],
+  ["noOverlay", "no-overlay"],
+  ["smPlace", "sm-place"],
+  ["mdPlace", "md-place"],
+  ["lgPlace", "lg-place"],
+  ["xlPlace", "xl-place"],
+  ["smOverlay", "sm-overlay"],
+  ["mdOverlay", "md-overlay"],
+  ["lgOverlay", "lg-overlay"],
+  ["xlOverlay", "xl-overlay"],
+  ["smNoOverlay", "sm-no-overlay"],
+  ["mdNoOverlay", "md-no-overlay"],
+  ["lgNoOverlay", "lg-no-overlay"],
+  ["xlNoOverlay", "xl-no-overlay"],
+];
+
+const stringifyPopoverAttrs = (props = {}) => {
+  return POPOVER_ATTR_PROPS
+    .filter(([propName]) => props[propName] !== undefined && props[propName] !== null)
+    .map(([propName, attrName]) => {
+      const value = props[propName];
+
+      if (value === true) {
+        return attrName;
+      }
+
+      return `${attrName}="${escapeAttrValue(value)}"`;
+    })
+    .join(" ");
+};
+
 const getItemType = (item = {}) => {
   if (item.type === 'section' || item.type === 'label') {
     return 'section';
@@ -76,5 +108,6 @@ export const selectViewData = ({ props }) => {
     w: props.w || '300',
     h: props.h || '300',
     place: props.place || 'bs',
+    popoverAttrString: stringifyPopoverAttrs(props),
   };
 }

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -18,7 +18,7 @@ styles:
     height: 16px
     flex-shrink: 0
 template:
-  - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} content-w=${w} content-h=${h} content-sv=true content-g=xs content-pv=sm:
+  - 'rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} ${popoverAttrString} content-w=${w} content-h=${h} content-sv=true content-g=xs content-pv=sm':
       - $for item, i in items:
           - $if item.isSection:
               - rtgl-view w=f p=md:

package/src/components/globalUi/globalUi.handlers.js

@@ -308,6 +308,9 @@ export const handleShowToast = (deps, payload) => {
  * @param {number} payload.x - X coordinate position (required)
  * @param {number} payload.y - Y coordinate position (required)
  * @param {string} [payload.place] - Dropdown menu place token (default: "bs")
+ * @param {string} [payload.mdPlace] - Responsive place token, for example "center" on mobile
+ * @param {boolean} [payload.overlay] - Whether to show a dialog-style dim overlay
+ * @param {boolean} [payload.mdOverlay] - Responsive overlay flag for mobile breakpoints
  * @returns {Promise<Object|null>} Promise that resolves with clicked item info or null if closed without selection
  * @returns {Object} [result.index] - Index of the clicked item
  * @returns {Object} [result.item] - The clicked item object

package/src/components/globalUi/globalUi.store.js

@@ -3,6 +3,22 @@ const VALID_TOAST_SIZES = new Set(["sm", "md", "lg"]);
 const VALID_TOAST_PHASES = new Set(["active", "exiting"]);
 const VALID_TOAST_POSITIONS = new Set(["top", "bottom"]);
 const VALID_COMPONENT_DIALOG_ROLES = new Set(["confirm", "cancel"]);
+const DROPDOWN_POPOVER_ATTR_PROPS = [
+  ["overlay", "overlay"],
+  ["noOverlay", "no-overlay"],
+  ["smPlace", "sm-place"],
+  ["mdPlace", "md-place"],
+  ["lgPlace", "lg-place"],
+  ["xlPlace", "xl-place"],
+  ["smOverlay", "sm-overlay"],
+  ["mdOverlay", "md-overlay"],
+  ["lgOverlay", "lg-overlay"],
+  ["xlOverlay", "xl-overlay"],
+  ["smNoOverlay", "sm-no-overlay"],
+  ["mdNoOverlay", "md-no-overlay"],
+  ["lgNoOverlay", "lg-no-overlay"],
+  ["xlNoOverlay", "xl-no-overlay"],
+];
 
 const DEFAULT_COMPONENT_DIALOG_BUTTONS = Object.freeze([
   {
@@ -28,6 +44,43 @@ const normalizeObject = (value) => {
   return value;
 };
 
+const escapeAttrValue = (value) => `${value}`.replace(/"/g, '"');
+
+const readResponsiveOptionValue = (source = {}, propName, attrName) => {
+  if (source[propName] !== undefined) {
+    return source[propName];
+  }
+
+  return source[attrName];
+};
+
+const collectDropdownPopoverOptions = (source = {}) => {
+  return DROPDOWN_POPOVER_ATTR_PROPS.reduce((acc, [propName, attrName]) => {
+    const value = readResponsiveOptionValue(source, propName, attrName);
+
+    if (value !== undefined && value !== null) {
+      acc[propName] = value;
+    }
+
+    return acc;
+  }, {});
+};
+
+const stringifyDropdownPopoverAttrs = (source = {}) => {
+  return DROPDOWN_POPOVER_ATTR_PROPS
+    .filter(([propName]) => source[propName] !== undefined && source[propName] !== null)
+    .map(([propName, attrName]) => {
+      const value = source[propName];
+
+      if (value === true) {
+        return attrName;
+      }
+
+      return `${attrName}="${escapeAttrValue(value)}"`;
+    })
+    .join(" ");
+};
+
 const normalizeDialogSize = (value, fallback = "md") => {
   return VALID_DIALOG_SIZES.has(value) ? value : fallback;
 };
@@ -172,6 +225,7 @@ export const setDropdownConfig = ({ state }, options = {}) => {
     x: options.x ?? 0,
     y: options.y ?? 0,
     place: options.place ?? "bs",
+    ...collectDropdownPopoverOptions(options),
   };
   state.uiType = "dropdown";
   state.isOpen = true;
@@ -301,6 +355,7 @@ export const selectViewData = ({ state }) => {
       x: state.dropdownConfig?.x ?? 0,
       y: state.dropdownConfig?.y ?? 0,
       place: state.dropdownConfig?.place ?? "bs",
+      popoverAttrString: stringifyDropdownPopoverAttrs(state.dropdownConfig),
     },
     formDialogConfig: {
       form: state.formDialogConfig?.form ?? { fields: [], actions: { buttons: [] } },

package/src/components/globalUi/globalUi.view.yaml

@@ -74,6 +74,9 @@ styles:
     .toast-card:
       animation: none
       transition: none
+  '@media only screen and (max-width: 768px)':
+    .toast-card:
+      width: calc(100vw - 2 * var(--spacing-lg))
 template:
   - $if topToasts.length > 0:
       - rtgl-view class="toast-layer toast-layer-top" pos=fix edge=t z=2100 w=f ah=c g=sm ph=md pt=xl:
@@ -117,4 +120,4 @@ template:
                   - $if config.mode == 'confirm':
                       - rtgl-button#cancelButton v=se: ${config.cancelText}
                   - rtgl-button#confirmButton v=pr: ${config.confirmText}
-  - rtgl-dropdown-menu#dropdownMenu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} place=${dropdownConfig.place} :items=${dropdownConfig.items} key=dropdown-${isDropdownOpen}: null
+  - 'rtgl-dropdown-menu#dropdownMenu ?open=${isDropdownOpen} x=${dropdownConfig.x} y=${dropdownConfig.y} place=${dropdownConfig.place} ${dropdownConfig.popoverAttrString} :items=${dropdownConfig.items} key=dropdown-${isDropdownOpen}': null

package/src/deps/createGlobalUI.js

@@ -149,6 +149,9 @@ const createGlobalUI = (globalUIElement) => {
      * @param {number} options.x - X coordinate position (required)
      * @param {number} options.y - Y coordinate position (required)
      * @param {string} [options.place] - Dropdown menu place token (default: "bs")
+     * @param {string} [options.mdPlace] - Responsive place token, for example "center" on mobile
+     * @param {boolean} [options.overlay] - Whether to show a dialog-style dim overlay
+     * @param {boolean} [options.mdOverlay] - Responsive overlay flag for mobile breakpoints
      * @returns {Promise<Object|null>} Promise that resolves with clicked item info or null if closed without selection
      * @returns {Object} [result.index] - Index of the clicked item
      * @returns {Object} [result.item] - The clicked item object

package/src/primitives/dialog.js

@@ -1,7 +1,47 @@
-import { css, mediaQueries } from "../common.js";
+import {
+  css,
+  mediaQueries,
+  getResponsiveAttribute,
+  permutateBreakpoints,
+} from "../common.js";
 
 const MIN_MARGIN_PX = 40;
 const MAX_LAYOUT_RETRIES = 6;
+const RESPONSIVE_LAYOUT_SIZES = ["sm", "md", "lg", "xl"];
+const CLOSE_BUTTON_SIZE_PX = 32;
+const CLOSE_BUTTON_OFFSET_PX = 8;
+const ACTIVE_LAYOUT_ATTR = "data-rtgl-active-layout";
+const FIXED_LAYOUT_SELECTOR = `:host([${ACTIVE_LAYOUT_ATTR}="fixed"])`;
+
+const mediaQueryCondition = (mediaQuery) => mediaQuery.replace(/^@media\s+/, "");
+const fixedLayoutStyle = (selector) => css`
+  ${selector} dialog {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    height: 100vh !important;
+    height: 100dvh !important;
+    max-height: 100vh !important;
+    max-height: 100dvh !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+  }
+
+  ${selector} slot[name="content"] {
+    box-sizing: border-box;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    height: 100vh !important;
+    height: 100dvh !important;
+    max-height: 100vh !important;
+    max-height: 100dvh !important;
+    margin: 0 !important;
+    overflow-y: auto !important;
+    overscroll-behavior: contain;
+    border-radius: 0;
+    padding-top: max(var(--spacing-lg), env(safe-area-inset-top));
+    padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
+  }
+`;
 
 class RettangoliDialogElement extends HTMLElement {
   static styleSheet = null;
@@ -15,6 +55,7 @@ class RettangoliDialogElement extends HTMLElement {
         }
 
         dialog {
+          position: relative;
           padding: 0;
           border: none;
           background: transparent;
@@ -47,6 +88,64 @@ class RettangoliDialogElement extends HTMLElement {
           margin-bottom: 40px;
         }
 
+        .close-button {
+          align-items: center;
+          appearance: none;
+          background: transparent;
+          border: none;
+          border-radius: var(--border-radius-sm);
+          box-shadow: none;
+          color: var(--muted-foreground);
+          cursor: pointer;
+          display: none;
+          height: ${CLOSE_BUTTON_SIZE_PX}px;
+          justify-content: center;
+          left: var(--rtgl-dialog-close-left, auto);
+          padding: 0;
+          position: absolute;
+          top: var(--rtgl-dialog-close-top, ${CLOSE_BUTTON_OFFSET_PX}px);
+          width: ${CLOSE_BUTTON_SIZE_PX}px;
+          z-index: 1;
+          -webkit-appearance: none;
+        }
+
+        :host([close-button]) .close-button {
+          display: flex;
+        }
+
+        .close-button[hidden] {
+          display: none;
+        }
+
+        .close-button:hover {
+          background: var(--accent);
+          color: var(--foreground);
+        }
+
+        .close-button:focus-visible {
+          background: var(--accent);
+          color: var(--foreground);
+          outline: none;
+        }
+
+        .close-button::before,
+        .close-button::after {
+          background: currentColor;
+          border-radius: 999px;
+          content: "";
+          height: 16px;
+          position: absolute;
+          width: 2px;
+        }
+
+        .close-button::before {
+          transform: rotate(45deg);
+        }
+
+        .close-button::after {
+          transform: rotate(-45deg);
+        }
+
         /* Size attribute styles */
         :host([s="sm"]) slot[name="content"] {
           width: 33vw;
@@ -91,11 +190,25 @@ class RettangoliDialogElement extends HTMLElement {
           animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
         }
 
+        dialog[open] .close-button {
+          animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
         @media (prefers-reduced-motion: reduce) {
-          dialog[open] slot[name="content"] {
+          dialog[open] slot[name="content"],
+          dialog[open] .close-button {
             animation: none;
           }
         }
+
+        ${fixedLayoutStyle(FIXED_LAYOUT_SELECTOR)}
+
+        :host([no-padding]) slot[name="content"] {
+          margin-left: 0;
+          margin-right: 0;
+          max-width: 100vw;
+          padding: 0;
+        }
       `);
     }
   }
@@ -108,10 +221,12 @@ class RettangoliDialogElement extends HTMLElement {
 
     // Create dialog element
     this._dialogElement = document.createElement('dialog');
+    this._dialogElement.tabIndex = -1;
     this.shadow.appendChild(this._dialogElement);
 
     // Store reference for content slot
     this._slotElement = null;
+    this._closeButtonElement = null;
     this._isConnected = false;
     this._adaptiveFrameId = null;
     this._layoutRetryCount = 0;
@@ -133,8 +248,17 @@ class RettangoliDialogElement extends HTMLElement {
       this._scheduleAdaptiveCentering({ resetRetries: true });
     };
     this._onWindowResize = () => {
+      this._updateActiveLayoutAttribute();
       this._scheduleAdaptiveCentering({ resetRetries: true });
     };
+    this._onDialogScroll = () => {
+      this._updateCloseButtonPosition();
+    };
+    this._onCloseButtonClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this._attemptClose();
+    };
 
     // Track if mouse down occurred inside dialog content
     this._mouseDownInContent = false;
@@ -178,7 +302,13 @@ class RettangoliDialogElement extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["open", "w", "s"];
+    return [
+      "open",
+      "w",
+      "s",
+      "close-button",
+      ...permutateBreakpoints(["layout"]),
+    ];
   }
 
   connectedCallback() {
@@ -209,16 +339,22 @@ class RettangoliDialogElement extends HTMLElement {
       } else if (newValue === null && this._dialogElement.open) {
         this._hideModal();
       }
-    } else if (name === 's') {
+    } else if (name === 's' || name.endsWith('layout')) {
       // Size is handled via CSS :host() selectors.
+      this._updateActiveLayoutAttribute();
       this._scheduleAdaptiveCentering({ resetRetries: true });
     } else if (name === 'w') {
       this._updateWidth();
+    } else if (name === 'close-button') {
+      this._updateCloseButton();
+      this._updateCloseButtonPosition();
     }
   }
 
   _updateDialog() {
     this._updateWidth();
+    this._updateCloseButton();
+    this._updateActiveLayoutAttribute();
   }
 
   _updateWidth() {
@@ -230,6 +366,22 @@ class RettangoliDialogElement extends HTMLElement {
     }
   }
 
+  _updateCloseButton() {
+    if (!this._closeButtonElement) {
+      return;
+    }
+    this._closeButtonElement.setAttribute("aria-label", "Close dialog");
+    this._closeButtonElement.hidden = !this.hasAttribute("close-button");
+  }
+
+  _createCloseButtonElement() {
+    const closeButtonElement = document.createElement("button");
+    closeButtonElement.type = "button";
+    closeButtonElement.className = "close-button";
+    closeButtonElement.addEventListener("click", this._onCloseButtonClick);
+    return closeButtonElement;
+  }
+
   _clearManagedLongTokenWrapping() {
     for (const textElement of this._managedLongTokenTextElements) {
       if (textElement?.isConnected) {
@@ -292,13 +444,23 @@ class RettangoliDialogElement extends HTMLElement {
         this._slotElement.addEventListener('slotchange', this._onSlotChange);
         this._dialogElement.appendChild(this._slotElement);
       }
+      if (!this._closeButtonElement) {
+        this._closeButtonElement = this._createCloseButtonElement();
+        this._dialogElement.appendChild(this._closeButtonElement);
+      }
+      this._updateCloseButton();
 
+      this._updateActiveLayoutAttribute();
       this._dialogElement.showModal();
+      if (this.shadow.activeElement === this._closeButtonElement) {
+        this._dialogElement.focus({ preventScroll: true });
+      }
 
       // Reset scroll position
       this._dialogElement.scrollTop = 0;
 
       window.addEventListener("resize", this._onWindowResize);
+      this._dialogElement.addEventListener("scroll", this._onDialogScroll, { passive: true });
       this._syncLongTokenWrapping();
       this._observeAssignedContent();
       this._layoutRetryCount = 0;
@@ -324,9 +486,16 @@ class RettangoliDialogElement extends HTMLElement {
         this._dialogElement.removeChild(this._slotElement);
         this._slotElement = null;
       }
+      if (this._closeButtonElement) {
+        this._closeButtonElement.removeEventListener("click", this._onCloseButtonClick);
+        this._dialogElement.removeChild(this._closeButtonElement);
+        this._closeButtonElement = null;
+      }
 
       // Reset dialog height
       this._dialogElement.style.height = '';
+      this._dialogElement.style.removeProperty("--rtgl-dialog-close-top");
+      this._dialogElement.style.removeProperty("--rtgl-dialog-close-left");
 
       // Don't emit any event when programmatically closed via attribute
     }
@@ -339,6 +508,7 @@ class RettangoliDialogElement extends HTMLElement {
     }
     this._layoutRetryCount = 0;
     window.removeEventListener("resize", this._onWindowResize);
+    this._dialogElement.removeEventListener("scroll", this._onDialogScroll);
     if (this._resizeObserver && this._observedContentElement) {
       this._resizeObserver.unobserve(this._observedContentElement);
     }
@@ -405,11 +575,84 @@ class RettangoliDialogElement extends HTMLElement {
     });
   }
 
+  _getActiveResponsiveSize() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return "default";
+    }
+
+    for (const size of RESPONSIVE_LAYOUT_SIZES) {
+      const query = mediaQueries[size];
+      if (query && window.matchMedia(mediaQueryCondition(query)).matches) {
+        return size;
+      }
+    }
+
+    return "default";
+  }
+
+  _getActiveLayout() {
+    return getResponsiveAttribute({
+      element: this,
+      size: this._getActiveResponsiveSize(),
+      attr: "layout",
+    }) || "centered";
+  }
+
+  _isFixedLayoutActive() {
+    return this._updateActiveLayoutAttribute() === "fixed";
+  }
+
+  _updateActiveLayoutAttribute() {
+    const activeLayout = this._getActiveLayout();
+    if (activeLayout === "fixed") {
+      if (this.getAttribute(ACTIVE_LAYOUT_ATTR) !== "fixed") {
+        this.setAttribute(ACTIVE_LAYOUT_ATTR, "fixed");
+      }
+    } else if (this.hasAttribute(ACTIVE_LAYOUT_ATTR)) {
+      this.removeAttribute(ACTIVE_LAYOUT_ATTR);
+    }
+    return activeLayout;
+  }
+
+  _updateCloseButtonPosition() {
+    if (!this._slotElement || !this._closeButtonElement || !this._dialogElement.open) {
+      return;
+    }
+
+    const slotWidth = Math.round(this._slotElement.getBoundingClientRect().width);
+    const scrollTop = Math.round(this._dialogElement.scrollTop);
+    const scrollLeft = Math.round(this._dialogElement.scrollLeft);
+    const top = Math.max(
+      0,
+      Math.round(this._slotElement.offsetTop) + scrollTop + CLOSE_BUTTON_OFFSET_PX,
+    );
+    const left = Math.max(
+      0,
+      Math.round(this._slotElement.offsetLeft) +
+        scrollLeft +
+        slotWidth -
+        CLOSE_BUTTON_SIZE_PX -
+        CLOSE_BUTTON_OFFSET_PX,
+    );
+
+    this._dialogElement.style.setProperty("--rtgl-dialog-close-top", `${top}px`);
+    this._dialogElement.style.setProperty("--rtgl-dialog-close-left", `${left}px`);
+  }
+
   _applyAdaptiveCentering() {
     if (!this._slotElement || !this._dialogElement.open) {
       return;
     }
 
+    if (this._isFixedLayoutActive()) {
+      this._slotElement.style.marginTop = '';
+      this._slotElement.style.marginBottom = '';
+      this._dialogElement.style.height = '';
+      this._updateCloseButtonPosition();
+      this._layoutRetryCount = 0;
+      return;
+    }
+
     this._observeAssignedContent();
     const contentElement = this._getAssignedContentElement();
     const contentHeight = contentElement
@@ -431,6 +674,7 @@ class RettangoliDialogElement extends HTMLElement {
       this._slotElement.style.marginTop = `${MIN_MARGIN_PX}px`;
       this._slotElement.style.marginBottom = `${MIN_MARGIN_PX}px`;
       this._dialogElement.style.height = '100vh';
+      this._updateCloseButtonPosition();
       return;
     }
 
@@ -439,6 +683,7 @@ class RettangoliDialogElement extends HTMLElement {
     this._slotElement.style.marginTop = `${margin}px`;
     this._slotElement.style.marginBottom = `${margin}px`;
     this._dialogElement.style.height = 'auto';
+    this._updateCloseButtonPosition();
   }