@rettangoli/ui 1.4.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "1.4.1",
+  "version": "1.5.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.2",
+    "@rettangoli/fe": "1.1.3",
     "jempl": "1.0.1"
   }
 }

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

@@ -22,7 +22,7 @@ template:
       - $for item, i in items:
           - $if item.isLabel:
               - rtgl-view w=f p=md:
-                  - rtgl-text s=sm c=mu-fg: ${item.label}
+                  - rtgl-text s=xs c=mu-fg: ${item.label}
             $elif item.isItem && item.isDisabled:
               - rtgl-view w=f p=md bgc=${item.bgc}:
                   - rtgl-view d=h av=c w=f g=md:
@@ -34,7 +34,7 @@ template:
                                   - div class=icon-placeholder aria-hidden="true": null
                           - rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
                       - $if item.hasSuffixText:
-                          - rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
+                          - rtgl-text s=xs c=${item.suffixTextColor} ta=e: ${item.suffixText}
             $elif item.isItem && item.hasHref && item.linkExtraAttrs:
               - a#option${i} href=${item.href} ${item.linkExtraAttrs} data-index=${item.index} data-testid=${item.testId}:
                   - rtgl-view w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc}:
@@ -47,7 +47,7 @@ template:
                                       - div class=icon-placeholder aria-hidden="true": null
                               - rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
                           - $if item.hasSuffixText:
-                              - rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
+                              - rtgl-text s=xs c=${item.suffixTextColor} ta=e: ${item.suffixText}
             $elif item.isItem && item.hasHref:
               - a#option${i} href=${item.href} data-index=${item.index} data-testid=${item.testId}:
                   - rtgl-view w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc}:
@@ -60,7 +60,7 @@ template:
                                       - div class=icon-placeholder aria-hidden="true": null
                               - rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
                           - $if item.hasSuffixText:
-                              - rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
+                              - rtgl-text s=xs c=${item.suffixTextColor} ta=e: ${item.suffixText}
             $elif item.isItem:
               - rtgl-view#option${i} w=f h-bgc=${item.hoverBgc} p=md cur=pointer bgc=${item.bgc} data-index=${item.index} data-testid=${item.testId}:
                   - rtgl-view d=h av=c w=f g=md:
@@ -72,6 +72,6 @@ template:
                                   - div class=icon-placeholder aria-hidden="true": null
                           - rtgl-text s=sm c=${item.c} w=1fg ellipsis: ${item.label}
                       - $if item.hasSuffixText:
-                          - rtgl-text s=sm c=${item.suffixTextColor} ta=e: ${item.suffixText}
+                          - rtgl-text s=xs c=${item.suffixTextColor} ta=e: ${item.suffixText}
             $elif item.isSeparator:
               - rtgl-view w=f h=1 bgc=mu mv=sm: null

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

@@ -1,3 +1,7 @@
+const TOAST_DURATION_MS = 3000;
+const TOAST_EXIT_DURATION_MS = 180;
+const toastTimeoutsByGlobalUI = new WeakMap();
+
 const clearComponentDialogBody = (refs) => {
   if (!refs) {
     return;
@@ -74,6 +78,64 @@ const createUiPromise = (globalUI, { rejectOnError = false } = {}) => {
   });
 };
 
+const getToastTimeouts = (globalUI) => {
+  let timeouts = toastTimeoutsByGlobalUI.get(globalUI);
+
+  if (!timeouts) {
+    timeouts = new Map();
+    toastTimeoutsByGlobalUI.set(globalUI, timeouts);
+  }
+
+  return timeouts;
+};
+
+const clearToastTimeout = (globalUI, toastId) => {
+  const timeouts = toastTimeoutsByGlobalUI.get(globalUI);
+  const timeoutIds = timeouts?.get(toastId);
+
+  if (timeoutIds) {
+    clearTimeout(timeoutIds.exitTimerId);
+    clearTimeout(timeoutIds.removeTimerId);
+    timeouts.delete(toastId);
+  }
+};
+
+const clearAllToastTimeouts = (globalUI) => {
+  const timeouts = toastTimeoutsByGlobalUI.get(globalUI);
+
+  if (!timeouts) {
+    return;
+  }
+
+  for (const timeoutIds of timeouts.values()) {
+    clearTimeout(timeoutIds.exitTimerId);
+    clearTimeout(timeoutIds.removeTimerId);
+  }
+
+  timeouts.clear();
+};
+
+const scheduleToastRemoval = ({ store, render, globalUI }, toastId) => {
+  clearToastTimeout(globalUI, toastId);
+
+  const timeouts = getToastTimeouts(globalUI);
+  const exitTimerId = setTimeout(() => {
+    store.setToastPhase?.({ id: toastId, phase: "exiting" });
+    render();
+  }, Math.max(0, TOAST_DURATION_MS - TOAST_EXIT_DURATION_MS));
+
+  const removeTimerId = setTimeout(() => {
+    timeouts.delete(toastId);
+    store.removeToast({ id: toastId });
+    render();
+  }, TOAST_DURATION_MS);
+
+  timeouts.set(toastId, {
+    exitTimerId,
+    removeTimerId,
+  });
+};
+
 const scheduleFormDialogMount = (deps, expectedKey) => {
   setTimeout(() => {
     const { store, refs } = deps;
@@ -218,6 +280,21 @@ export const handleShowConfirm = async (deps, payload) => {
   return createUiPromise(globalUI);
 };
 
+export const handleShowToast = (deps, payload) => {
+  const { store, render, globalUI } = deps;
+  store.addToast(payload);
+  render();
+
+  const toasts = store.selectToasts?.() ?? [];
+  const toastId = toasts[toasts.length - 1]?.id;
+
+  if (!toastId) {
+    return;
+  }
+
+  scheduleToastRemoval({ store, render, globalUI }, toastId);
+};
+
 /**
  * Shows a dropdown menu at the specified position with the given items.
  * Closes any existing dialog or dropdown menu before showing the dropdown menu.
@@ -322,7 +399,21 @@ export const handleFormFieldEvent = (deps, payload) => {
  */
 export const handleCloseAll = (deps) => {
   const { store, render, globalUI, refs } = deps;
-  closeCurrentUi({ store, render, globalUI, refs, emitResult: true });
+  clearAllToastTimeouts(globalUI);
+  const hasToasts = (store.selectToasts?.().length ?? 0) > 0;
+
+  if (hasToasts) {
+    store.clearToasts();
+  }
+
+  if (store.selectIsOpen()) {
+    closeCurrentUi({ store, render, globalUI, refs, emitResult: true });
+    return;
+  }
+
+  if (hasToasts) {
+    render();
+  }
 };
 
 export const handleComponentDialogAction = async (deps, payload) => {

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

@@ -1,4 +1,6 @@
 const VALID_DIALOG_SIZES = new Set(["sm", "md", "lg", "f"]);
+const VALID_TOAST_SIZES = new Set(["sm", "md", "lg"]);
+const VALID_TOAST_PHASES = new Set(["active", "exiting"]);
 const VALID_COMPONENT_DIALOG_ROLES = new Set(["confirm", "cancel"]);
 
 const DEFAULT_COMPONENT_DIALOG_BUTTONS = Object.freeze([
@@ -29,6 +31,14 @@ const normalizeDialogSize = (value, fallback = "md") => {
   return VALID_DIALOG_SIZES.has(value) ? value : fallback;
 };
 
+const normalizeToastSize = (value, fallback = "sm") => {
+  return VALID_TOAST_SIZES.has(value) ? value : fallback;
+};
+
+const normalizeToastPhase = (value, fallback = "active") => {
+  return VALID_TOAST_PHASES.has(value) ? value : fallback;
+};
+
 const normalizeComponentDialogActions = (value) => {
   const sourceButtons = Array.isArray(value?.buttons) && value.buttons.length > 0
     ? value.buttons
@@ -84,6 +94,8 @@ const createDefaultComponentDialogConfig = () => ({
 export const createInitialState = () => Object.freeze({
   isOpen: false,
   uiType: "dialog", // "dialog" | "dropdown" | "formDialog" | "componentDialog"
+  nextToastId: 0,
+  toasts: [],
   config: {
     status: undefined, // undefined | info | warning | error
     title: "",
@@ -201,6 +213,52 @@ export const setComponentDialogConfig = ({ state }, options = {}) => {
   state.isOpen = true;
 };
 
+export const addToast = ({ state }, options = {}) => {
+  if (typeof options.message !== "string" || options.message.length === 0) {
+    throw new Error("message is required for showToast");
+  }
+
+  const nextToastId = (state.nextToastId ?? 0) + 1;
+  const toast = {
+    id: `toast-${nextToastId}`,
+    message: options.message,
+    size: normalizeToastSize(options.size ?? options.s, "sm"),
+    phase: "active",
+  };
+
+  state.nextToastId = nextToastId;
+  state.toasts = [...(state.toasts ?? []), toast];
+};
+
+export const removeToast = ({ state }, options = {}) => {
+  if (typeof options.id !== "string" || options.id.length === 0) {
+    return;
+  }
+
+  state.toasts = (state.toasts ?? []).filter((toast) => toast.id !== options.id);
+};
+
+export const setToastPhase = ({ state }, options = {}) => {
+  if (typeof options.id !== "string" || options.id.length === 0) {
+    return;
+  }
+
+  state.toasts = (state.toasts ?? []).map((toast) => {
+    if (toast.id !== options.id) {
+      return toast;
+    }
+
+    return {
+      ...toast,
+      phase: normalizeToastPhase(options.phase, "active"),
+    };
+  });
+};
+
+export const clearToasts = ({ state }) => {
+  state.toasts = [];
+};
+
 export const closeAll = ({ state }) => {
   state.isOpen = false;
   state.uiType = "dialog"; // Reset to default type
@@ -212,6 +270,7 @@ export const selectFormDialogConfig = ({ state }) => state.formDialogConfig;
 export const selectComponentDialogConfig = ({ state }) => state.componentDialogConfig;
 export const selectUiType = ({ state }) => state.uiType;
 export const selectIsOpen = ({ state }) => state.isOpen;
+export const selectToasts = ({ state }) => state.toasts ?? [];
 
 export const selectViewData = ({ state }) => {
   const isDialogOpen = state.isOpen && state.uiType === "dialog";
@@ -246,6 +305,13 @@ export const selectViewData = ({ state }) => {
       actions: componentDialogConfig.actions ?? normalizeComponentDialogActions(),
       key: componentDialogConfig.key ?? 0,
     },
+    toasts: Array.isArray(state.toasts)
+      ? state.toasts.map((toast) => ({
+          ...toast,
+          size: normalizeToastSize(toast.size, "sm"),
+          phase: normalizeToastPhase(toast.phase, "active"),
+        }))
+      : [],
     isDialogOpen,
     isFormDialogOpen,
     isComponentDialogOpen,

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

@@ -28,7 +28,44 @@ refs:
         handler: handleDropdownClose
       item-click:
         handler: handleDropdownItemClick
+styles:
+  .toast-layer:
+    pointer-events: none
+  .toast-card:
+    pointer-events: auto
+    box-sizing: border-box
+    width: 33vw
+    max-width: calc(100vw - 2 * var(--spacing-lg))
+    opacity: 1
+    transform: translateY(0) scale(1)
+    animation: toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1)
+    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 180ms cubic-bezier(0.16, 1, 0.3, 1)
+    will-change: opacity, transform
+  .toast-card-md:
+    width: 50vw
+  .toast-card-lg:
+    width: 80vw
+  .toast-card-exiting:
+    opacity: 0
+    transform: translateY(calc(var(--spacing-sm) * -0.5)) scale(0.98)
+  .toast-message:
+    overflow-wrap: anywhere
+  '@keyframes toast-in':
+    from:
+      opacity: 0
+      transform: translateY(calc(var(--spacing-sm) * -1)) scale(0.96)
+    to:
+      opacity: 1
+      transform: translateY(0) scale(1)
+  '@media (prefers-reduced-motion: reduce)':
+    .toast-card:
+      animation: none
+      transition: none
 template:
+  - rtgl-view class=toast-layer pos=fix edge=t z=2100 w=f ah=c g=sm p=md:
+      - $for toast, i in toasts:
+          - 'rtgl-view class="toast-card toast-card-${toast.size} toast-card-${toast.phase}" key=toast-${toast.id} bgc=su bc=bo bw=xs br=md shadow=md ph=lg pv=md':
+              - rtgl-text class=toast-message ta=c w=f: ${toast.message}
   - rtgl-dialog#dialog ?open=${isDialogContainerOpen} s=${dialogSize}:
       - $if isFormDialogOpen:
           - rtgl-form#formDialog slot=content :form=${formDialogConfig.form} :defaultValues=${formDialogConfig.defaultValues} :context=${formDialogConfig.context} ?disabled=${formDialogConfig.disabled} key=form-dialog-${formDialogConfig.key}: null

package/src/components/select/select.schema.yaml

@@ -13,6 +13,12 @@ propsSchema:
             type: string
           value:
             type: any
+          icon:
+            type: string
+          shortcut:
+            type: string
+          suffixText:
+            type: string
           testId:
             type: string
     selectedValue:

package/src/components/select/select.store.js

@@ -24,6 +24,45 @@ const stringifyProps = (props = {}) => {
     .join(" ");
 };
 
+const hasOwnProp = (object, key) => Object.prototype.hasOwnProperty.call(object || {}, key);
+
+const getOptionIcon = (option = {}) => {
+  return typeof option.icon === 'string' && option.icon.length > 0 ? option.icon : '';
+};
+
+const getOptionSuffixText = (option = {}) => {
+  if (typeof option.shortcut === 'string' && option.shortcut.length > 0) {
+    return option.shortcut;
+  }
+
+  if (typeof option.suffixText === 'string' && option.suffixText.length > 0) {
+    return option.suffixText;
+  }
+
+  return '';
+};
+
+const normalizeOption = (option = {}, index, currentValue, hoveredOptionId, hasIconColumn) => {
+  const isSelected = deepEqual(option.value, currentValue);
+  const isHovered = hoveredOptionId === index;
+  const icon = getOptionIcon(option);
+  const suffixText = getOptionSuffixText(option);
+
+  return {
+    ...option,
+    isSelected,
+    bgc: isHovered ? 'ac' : (isSelected ? 'mu' : ''),
+    hasIconSlot: hasIconColumn,
+    icon,
+    hasIcon: icon.length > 0,
+    iconColor: 'fg',
+    c: 'fg',
+    suffixText,
+    hasSuffixText: suffixText.length > 0,
+    suffixTextColor: 'mu-fg',
+  };
+};
+
 export const createInitialState = () => Object.freeze({
   isOpen: false,
   position: {
@@ -49,22 +88,17 @@ export const selectViewData = ({ state, props }) => {
   let isPlaceholderLabel = true;
 
   const options = props.options || [];
-  const selectedOption = options.find(opt => deepEqual(opt.value, currentValue));
+  const selectedOption = options.find((opt) => deepEqual(opt.value, currentValue));
   if (selectedOption) {
     displayLabel = selectedOption.label;
     isPlaceholderLabel = false;
   }
 
-  // Map options to include isSelected flag and computed background color
+  const hasIconColumn = options.some((option) => hasOwnProp(option, 'icon'));
   const optionsWithSelection = options.map((option, index) => {
-    const isSelected = deepEqual(option.value, currentValue);
-    const isHovered = state.hoveredOptionId === index;
-    return {
-      ...option,
-      isSelected,
-      bgc: isHovered ? 'ac' : (isSelected ? 'mu' : '')
-    };
+    return normalizeOption(option, index, currentValue, state.hoveredOptionId, hasIconColumn);
   });
+  const selectedOptionView = optionsWithSelection.find((option) => option.isSelected);
 
   return {
     containerAttrString,
@@ -75,6 +109,12 @@ export const selectViewData = ({ state, props }) => {
     selectedValue: currentValue,
     selectedLabel: displayLabel,
     selectedLabelColor: isPlaceholderLabel ? "mu-fg" : "fg",
+    selectedIcon: selectedOptionView?.icon || "",
+    hasSelectedIcon: !!selectedOptionView?.hasIcon,
+    selectedIconColor: isPlaceholderLabel ? "mu-fg" : "fg",
+    selectedSuffixText: selectedOptionView?.suffixText || "",
+    hasSelectedSuffixText: !!selectedOptionView?.hasSuffixText,
+    selectedSuffixTextColor: "mu-fg",
     selectButtonCursor: isDisabled ? "not-allowed" : "pointer",
     selectButtonHoverBorderColor: isDisabled ? "bo" : "ac",
     selectButtonTabIndex: isDisabled ? -1 : 0,

package/src/components/select/select.view.yaml

@@ -29,17 +29,36 @@ refs:
         handler: handleAddOptionMouseEnter
       mouseleave:
         handler: handleAddOptionMouseLeave
+styles:
+  .icon-placeholder:
+    width: 16px
+    height: 16px
+    flex-shrink: 0
 template:
   - 'rtgl-view#selectButton style="display: inline-flex;" d=h av=c h=32 ph=md bw=xs bc=bo h-bc=${selectButtonHoverBorderColor} br=md bgc=su cur=${selectButtonCursor} ${containerAttrString} data-testid="select-button" role="button" tabindex=${selectButtonTabIndex} aria-disabled=${isDisabled}':
-      - rtgl-view d=h av=c ah=s w=f:
-          - rtgl-text w=1fg ta=s c=${selectedLabelColor} ellipsis: ${selectedLabel}
+      - rtgl-view d=h av=c ah=s w=f g=md:
+          - rtgl-view d=h av=c g=md w=1fg:
+              - $if hasSelectedIcon:
+                  - rtgl-svg svg=${selectedIcon} wh=16 c=${selectedIconColor}: null
+              - rtgl-text w=1fg ta=s c=${selectedLabelColor} ellipsis: ${selectedLabel}
+          - $if hasSelectedSuffixText:
+              - rtgl-text s=xs c=${selectedSuffixTextColor} ta=e: ${selectedSuffixText}
           - $if showClear:
-              - rtgl-svg#clearButton ml=md svg=x wh=16 c=mu-fg cur=pointer data-testid="select-clear-button": null
-          - rtgl-svg ml=md svg=chevronDown wh=16 c=mu-fg: null
+              - rtgl-svg#clearButton svg=x wh=16 c=mu-fg cur=pointer data-testid="select-clear-button": null
+          - rtgl-svg svg=chevronDown wh=16 c=mu-fg: null
   - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs content-wh=300 content-g=xs content-sv=true content-pv=sm:
       - $for option, i in options:
           - rtgl-view#option${i} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId}:
-              - rtgl-text s=sm: ${option.label}
+              - rtgl-view d=h av=c w=f g=md:
+                  - rtgl-view d=h av=c g=md w=1fg:
+                      - $if option.hasIconSlot:
+                          - $if option.hasIcon:
+                              - rtgl-svg wh=16 svg=${option.icon} c=${option.iconColor}: null
+                            $else:
+                              - div class=icon-placeholder aria-hidden="true": null
+                      - rtgl-text s=sm c=${option.c} w=1fg ellipsis: ${option.label}
+                  - $if option.hasSuffixText:
+                      - rtgl-text s=xs c=${option.suffixTextColor} ta=e: ${option.suffixText}
       - $if showAddOption:
           - rtgl-view w=f bw=xs bc=mu bwt=sm: null
           - rtgl-view#optionAdd w=f ph=lg pv=md cur=pointer bgc=${addOptionBgc} data-testid="select-add-option":

package/src/deps/createGlobalUI.js

@@ -1,7 +1,7 @@
 /**
  * Creates a GlobalUI manager instance for controlling global UI components.
  * Provides methods for showing alerts, confirm dialogs, form dialogs,
- * dropdown menus, and closing all UI components.
+ * dropdown menus, toasts, and closing all UI components.
  *
  * @param {HTMLElement} globalUIElement - The globalUI component element
  * @returns {Object} GlobalUI manager instance
@@ -12,6 +12,7 @@
  * @returns {Function} returns.showFormDialog - Show a form dialog
  * @returns {Function} returns.showComponentDialog - Show a component dialog
  * @returns {Function} returns.showDropdownMenu - Show a dropdown menu
+ * @returns {Function} returns.showToast - Show a temporary toast message
  * @returns {Function} returns.closeAll - General-purpose function to close all currently open UI components
  */
 const createGlobalUI = (globalUIElement) => {
@@ -161,9 +162,27 @@ const createGlobalUI = (globalUIElement) => {
       return globalUIElement.transformedHandlers.handleShowDropdownMenu(options);
     },
 
+    /**
+     * Shows a top-centered toast message that auto-dismisses after 3 seconds.
+     *
+     * @param {Object} options - Toast configuration options
+     * @param {string} options.message - The toast message (required)
+     * @param {('sm'|'md'|'lg')} [options.size] - Toast width preset matching dialog sizing (default: "sm")
+     * @returns {void}
+     * @throws {Error} If globalUIElement is not initialized
+     */
+    showToast: (options) => {
+      if(!globalUIElement)
+      {
+        throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
+      }
+      globalUIElement.transformedHandlers.handleShowToast(options);
+    },
+
     /**
      * General-purpose function to close all currently open UI components.
-     * This includes dialogs, popovers, tooltips, selects, dropdown menus, and any other floating UI elements.
+     * This includes dialogs, dropdown menus, toasts, and any other floating UI elements
+     * managed by rtgl-global-ui.
      * Useful for programmatically cleaning up the entire UI surface.
      *
      * @returns {Promise<void>} Promise that resolves when all UI components are closed

package/src/primitives/popover.js

@@ -255,7 +255,9 @@ class RettangoliPopoverElement extends HTMLElement {
 
     const hasContent = Array.from(wrapper.childNodes).some((node) => !this._isIgnorableTextNode(node));
 
-    if (hasContent) {
+    // Keep the content wrapper slotted while open so callers can intentionally
+    // show an empty popover shell, such as an empty select menu.
+    if (hasContent || this.hasAttribute("open")) {
       wrapper.setAttribute("slot", "content");
     } else {
       wrapper.removeAttribute("slot");