@rettangoli/ui 1.7.0 → 1.7.2

package/package.json

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

package/src/components/tagSelect/tagSelect.handlers.js

@@ -75,7 +75,11 @@ export const handleOnUpdate = (deps, payload) => {
   }
 
   if (oldProps.options !== newProps.options) {
-    shouldRender = true;
+    const hasCurrentValues = resolveCurrentValues({ store, props: newProps }).length > 0;
+
+    if (store.getState().isOpen || hasCurrentValues) {
+      shouldRender = true;
+    }
   }
 
   if (shouldRender) {

package/src/components/tagSelect/tagSelect.methods.js

@@ -1,3 +1,5 @@
+import { deepEqual } from "../../common.js";
+
 const resolvePopoverPosition = (trigger) => {
   if (!trigger || typeof trigger.getBoundingClientRect !== "function") {
     return null;
@@ -11,12 +13,66 @@ const resolvePopoverPosition = (trigger) => {
   };
 };
 
-export const refreshPopover = function () {
+const normalizeSelectedValues = (selectedValues) => {
+  if (!Array.isArray(selectedValues)) {
+    return [];
+  }
+
+  return [...selectedValues];
+};
+
+const renderInstance = (instance) => {
+  if (typeof instance.render === "function") {
+    instance.render();
+  }
+};
+
+const resolveCurrentValues = (instance) => {
+  if (instance.store?.selectHasSelectedValues?.()) {
+    return instance.store?.selectSelectedValues?.() || [];
+  }
+
+  return normalizeSelectedValues(instance.props?.selectedValues);
+};
+
+const openPopoverWithDraft = (instance, values = []) => {
+  const position = resolvePopoverPosition(instance.refs?.trigger);
+
+  if (!position || !instance.store?.openOptionsPopover) {
+    return false;
+  }
+
+  instance.store.openOptionsPopover({
+    position,
+    values,
+  });
+
+  return true;
+};
+
+const setDraftValues = (instance, values = [], keepOpen = false) => {
+  const state = instance.store?.getState?.();
+
+  if (state?.isOpen && instance.store?.updateDraftSelectedValues) {
+    instance.store.updateDraftSelectedValues({ values });
+    return true;
+  }
+
+  if (keepOpen) {
+    return openPopoverWithDraft(instance, values);
+  }
+
+  return false;
+};
+
+export const refreshPopover = function (payload = {}) {
   const state = this.store?.getState?.();
+  const draftValues = Array.isArray(payload.values)
+    ? normalizeSelectedValues(payload.values)
+    : (this.store?.selectDraftSelectedValues?.() || []);
 
   if (state?.isOpen) {
     const position = resolvePopoverPosition(this.refs?.trigger);
-    const draftValues = this.store?.selectDraftSelectedValues?.() || [];
 
     if (position) {
       this.store.openOptionsPopover({
@@ -24,9 +80,46 @@ export const refreshPopover = function () {
         values: draftValues,
       });
     }
+  } else if (payload.keepOpen) {
+    openPopoverWithDraft(this, draftValues.length > 0 ? draftValues : resolveCurrentValues(this));
   }
 
-  if (typeof this.render === "function") {
-    this.render();
+  renderInstance(this);
+};
+
+export const setDraftSelectedValues = function (payload = {}) {
+  const values = normalizeSelectedValues(payload.values);
+
+  if (!setDraftValues(this, values, !!payload.keepOpen)) {
+    return;
+  }
+
+  renderInstance(this);
+};
+
+export const appendDraftSelectedValue = function (payload = {}) {
+  if (!Object.prototype.hasOwnProperty.call(payload || {}, "value")) {
+    return;
   }
+
+  const state = this.store?.getState?.();
+  const currentValues = state?.isOpen
+    ? (this.store?.selectDraftSelectedValues?.() || [])
+    : resolveCurrentValues(this);
+
+  if (currentValues.some((currentValue) => deepEqual(currentValue, payload.value))) {
+    if (!!payload.keepOpen && !state?.isOpen && openPopoverWithDraft(this, currentValues)) {
+      renderInstance(this);
+    }
+
+    return;
+  }
+
+  const nextValues = [...normalizeSelectedValues(currentValues), payload.value];
+
+  if (!setDraftValues(this, nextValues, !!payload.keepOpen)) {
+    return;
+  }
+
+  renderInstance(this);
 };

package/src/components/tagSelect/tagSelect.schema.yaml

@@ -48,4 +48,21 @@ events:
 methods:
   type: object
   properties:
-    refreshPopover: {}
+    refreshPopover:
+      description: Recomputes the open popover position and rerenders the current options and draft values.
+      params:
+        - values
+        - keepOpen
+      returns: void
+    setDraftSelectedValues:
+      description: Replaces the draft-only selection without committing `selectedValues`; optionally reopens the popover around the trigger when `keepOpen` is true.
+      params:
+        - values
+        - keepOpen
+      returns: void
+    appendDraftSelectedValue:
+      description: Adds a value to the draft-only selection without committing `selectedValues`; optionally reopens the popover around the trigger when `keepOpen` is true.
+      params:
+        - value
+        - keepOpen
+      returns: void

package/src/components/tagSelect/tagSelect.store.js

@@ -68,26 +68,6 @@ const sameValueArray = (left = [], right = []) => {
   return left.every((value, index) => deepEqual(value, right[index]));
 };
 
-const stringifyKeyPart = (value) => {
-  if (value === undefined) {
-    return "undefined";
-  }
-
-  if (value === null) {
-    return "null";
-  }
-
-  if (typeof value === "string") {
-    return value;
-  }
-
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return String(value);
-  }
-};
-
 const isSelectedValue = (selectedValues = [], candidate) => {
   return selectedValues.some((value) => deepEqual(value, candidate));
 };
@@ -133,37 +113,6 @@ const buildTagStyle = ({ isSelected = true, isAddChip = false } = {}) => {
   return `${baseStyle.join("; ")};`;
 };
 
-const buildPopoverSignature = (options = []) => {
-  if (!Array.isArray(options) || options.length === 0) {
-    return "empty";
-  }
-
-  return options.map((option, index) => {
-    const type = getOptionType(option);
-
-    if (type === "section") {
-      return `section:${index}:${option.label || ""}`;
-    }
-
-    if (type === "separator") {
-      return `separator:${index}`;
-    }
-
-    return `item:${index}:${option.label || ""}:${stringifyKeyPart(option.value)}`;
-  }).join("|");
-};
-
-const buildPopoverKey = (options = []) => {
-  const signature = buildPopoverSignature(options);
-  let hash = 0;
-
-  for (let index = 0; index < signature.length; index += 1) {
-    hash = ((hash << 5) - hash + signature.charCodeAt(index)) >>> 0;
-  }
-
-  return `tagSelectPopover${hash}`;
-};
-
 const normalizeOption = ({
   option = {},
   index,
@@ -227,7 +176,8 @@ export const selectViewData = ({ state, props }) => {
   const isDisabled = !!props.disabled;
   const currentValues = getCurrentValues({ state, props });
   const draftValues = getDraftValues({ state, props });
-  const options = Array.isArray(props.options) ? props.options : [];
+  const shouldResolveOptions = state.isOpen || currentValues.length > 0;
+  const options = shouldResolveOptions && Array.isArray(props.options) ? props.options : [];
   const hasIconColumn = options.some((option) => isSelectableOption(option) && hasOwnProp(option, "icon"));
   const normalizedOptions = options.map((option, index) =>
     normalizeOption({
@@ -254,6 +204,19 @@ export const selectViewData = ({ state, props }) => {
 
   const hasSelectableOptions = normalizedOptions.some((option) => option.isItem);
   const hasDraftChanges = !sameValueArray(currentValues, draftValues);
+  const triggerTags = selectedTags.length > 0
+    ? selectedTags.map((tag) => ({
+      ...tag,
+      tagStyle: buildTagStyle({ isSelected: true }),
+    }))
+    : [{
+      value: undefined,
+      selectionIndex: "",
+      label: props.placeholder || "Add tag",
+      icon: "",
+      testId: "",
+      tagStyle: buildTagStyle({ isAddChip: true }),
+    }];
 
   return {
     containerAttrString,
@@ -262,18 +225,14 @@ export const selectViewData = ({ state, props }) => {
     position: state.position,
     options: normalizedOptions,
     hasSelectableOptions,
-    popoverKey: buildPopoverKey(options),
     placeholder: props.placeholder || "Add tag",
-    selectedTags,
-    hasSelectedTags: selectedTags.length > 0,
-    triggerTagStyle: buildTagStyle({ isSelected: true }),
-    placeholderTagStyle: buildTagStyle({ isAddChip: true }),
+    triggerTags,
     triggerCursor: isDisabled ? "not-allowed" : "pointer",
     triggerTabIndex: isDisabled ? -1 : 0,
     showAddOption: true,
     addOptionLabel: props.addOption?.label || "Add tag",
     hasDraftChanges,
-    submitDisabled: isDisabled || !hasDraftChanges,
+    submitDisabled: isDisabled,
     submitLabel: "Save",
   };
 };
@@ -305,6 +264,10 @@ export const closeOptionsPopover = ({ state }) => {
   state.draftSelectedValues = [];
 };
 
+export const updateDraftSelectedValues = ({ state }, payload = {}) => {
+  state.draftSelectedValues = normalizeSelectedValues(payload.values);
+};
+
 export const updateSelectedValues = ({ state }, payload = {}) => {
   const values = normalizeSelectedValues(payload.values);
   state.selectedValues = values;

package/src/components/tagSelect/tagSelect.view.yaml

@@ -31,14 +31,11 @@ styles:
 template:
   - 'rtgl-view#trigger d=h av=c g=sm cur=${triggerCursor} ${containerAttrString} data-testid="tag-select-trigger" role="button" tabindex=${triggerTabIndex} aria-disabled=${isDisabled} style="min-height: 24px;"':
       - rtgl-view d=h av=c wrap g=sm w=1fg:
-          - $if !hasSelectedTags:
-              - 'rtgl-tag v=mu style="${placeholderTagStyle}"':
-                  ${placeholder}
-          - $for tag, i in selectedTags:
-              - 'rtgl-tag#tag${tag.selectionIndex} data-selection-index=${tag.selectionIndex} pre=${tag.icon} data-testid=${tag.testId} v=mu style="${triggerTagStyle}"':
+          - $for tag, i in triggerTags:
+              - 'rtgl-tag data-selection-index=${tag.selectionIndex} pre=${tag.icon} data-testid=${tag.testId} v=mu style="${tag.tagStyle}"':
                   ${tag.label}
-  - 'div#${popoverKey} style="display: contents;"':
-      - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=bs content-w=${position.w} content-g=sm content-sv=true content-pv=sm:
+  - $if isOpen:
+      - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=bs content-w=${position.w} content-g=sm content-sv=true content-ph=md content-pv=md:
           - $if !hasSelectableOptions:
               - rtgl-text s=sm c=mu-fg: No tags available
           - rtgl-view d=h wrap g=sm w=f:

package/src/primitives/popover.js

@@ -136,6 +136,7 @@ class RettangoliPopoverElement extends HTMLElement {
       "content-wh",
       "content-g",
       "content-sv",
+      "content-ph",
       "content-pv",
       "content-bgc",
       "content-style",
@@ -232,7 +233,7 @@ class RettangoliPopoverElement extends HTMLElement {
     }
 
     wrapper.setAttribute("bgc", this.getAttribute("content-bgc") || "su");
-    wrapper.setAttribute("ph", "sm");
+    wrapper.setAttribute("ph", this.getAttribute("content-ph") || "sm");
     wrapper.setAttribute("pv", this.getAttribute("content-pv") || "sm");
 
     const contentStyle = this.getAttribute("content-style");