@rettangoli/ui 1.7.1 → 1.7.3

package/package.json

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

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

@@ -18,6 +18,19 @@ const normalizeSelectedValues = (selectedValues) => {
   return [...selectedValues];
 };
 
+const resolvePopoverPosition = (trigger) => {
+  if (!trigger || typeof trigger.getBoundingClientRect !== "function") {
+    return undefined;
+  }
+
+  const rect = trigger.getBoundingClientRect();
+  return {
+    x: Math.round(rect.left),
+    y: Math.round(rect.bottom + 12),
+    w: Math.max(Math.round(rect.width), 240),
+  };
+};
+
 const resolveCurrentValues = ({ store, props }) => {
   if (store.selectHasSelectedValues()) {
     return store.selectSelectedValues();
@@ -26,6 +39,18 @@ const resolveCurrentValues = ({ store, props }) => {
   return normalizeSelectedValues(props.selectedValues);
 };
 
+const resolveDraftValues = ({ store, props }) => {
+  if (Array.isArray(props?.draftSelectedValues)) {
+    return normalizeSelectedValues(props.draftSelectedValues);
+  }
+
+  if (store.getState().isOpen) {
+    return store.selectDraftSelectedValues();
+  }
+
+  return resolveCurrentValues({ store, props });
+};
+
 const emitValueChange = ({
   dispatchEvent,
   value,
@@ -50,57 +75,180 @@ const emitValueChange = ({
   );
 };
 
+const emitDraftValueChange = ({ dispatchEvent, value }) => {
+  dispatchEvent(
+    new CustomEvent("draft-value-change", {
+      detail: {
+        value,
+      },
+      bubbles: true,
+    }),
+  );
+};
+
+const emitOpenChange = ({ dispatchEvent, open }) => {
+  dispatchEvent(
+    new CustomEvent("open-change", {
+      detail: {
+        open,
+      },
+      bubbles: true,
+    }),
+  );
+};
+
+const openControlledPopover = ({ store, props, refs } = {}) => {
+  const position = resolvePopoverPosition(refs?.trigger);
+  if (!position) {
+    return false;
+  }
+
+  store.openOptionsPopover({
+    position,
+    values: resolveDraftValues({ store, props }),
+  });
+
+  return true;
+};
+
 export const handleBeforeMount = (deps) => {
-  const { store, props, render } = deps;
+  const { store, props, render, refs } = deps;
+  let shouldRender = false;
 
   if (props.selectedValues !== undefined) {
-    store.updateSelectedValues({ values: props.selectedValues });
+    store.updateSelectedValues({
+      values: props.selectedValues,
+      syncDraft: props.draftSelectedValues === undefined,
+      preserveDraft: Array.isArray(props.draftSelectedValues),
+    });
+    shouldRender = true;
+  }
+
+  if (Array.isArray(props.draftSelectedValues)) {
+    store.updateDraftSelectedValues({
+      values: props.draftSelectedValues,
+    });
+    shouldRender = true;
+  }
+
+  if (props.open === true && !props.disabled && openControlledPopover(deps)) {
+    shouldRender = true;
+  }
+
+  if (shouldRender) {
     render();
   }
 };
 
+export const handleAfterMount = (deps) => {
+  const { props, render, store, dispatchEvent } = deps;
+
+  if (props.disabled) {
+    if (props.open === true) {
+      emitOpenChange({
+        dispatchEvent,
+        open: false,
+      });
+    }
+    return;
+  }
+
+  if (props.open === true && !store.getState().isOpen) {
+    if (openControlledPopover(deps)) {
+      render();
+    }
+  }
+};
+
 export const handleOnUpdate = (deps, payload) => {
   const { oldProps, newProps } = payload;
-  const { store, render } = deps;
+  const { store, render, refs } = deps;
   let shouldRender = false;
 
   if (!!newProps?.disabled && !oldProps?.disabled) {
+    const wasOpen = store.getState().isOpen;
     store.closeOptionsPopover({});
+    if (wasOpen) {
+      emitOpenChange({
+        dispatchEvent: deps.dispatchEvent,
+        open: false,
+      });
+    }
     shouldRender = true;
   }
 
   if (oldProps.selectedValues !== newProps.selectedValues) {
-    store.updateSelectedValues({ values: newProps.selectedValues, syncDraft: true });
+    store.updateSelectedValues({
+      values: newProps.selectedValues,
+      syncDraft: newProps.draftSelectedValues === undefined,
+      preserveDraft: Array.isArray(newProps.draftSelectedValues),
+    });
     shouldRender = true;
   }
 
-  if (oldProps.options !== newProps.options) {
+  if (oldProps.draftSelectedValues !== newProps.draftSelectedValues) {
+    store.updateDraftSelectedValues({
+      values: Array.isArray(newProps?.draftSelectedValues)
+        ? newProps.draftSelectedValues
+        : resolveCurrentValues({ store, props: newProps }),
+    });
     shouldRender = true;
   }
 
+  if (oldProps.open !== newProps.open && newProps.open !== undefined) {
+    if (newProps.open) {
+      if (newProps.disabled) {
+        emitOpenChange({
+          dispatchEvent: deps.dispatchEvent,
+          open: false,
+        });
+      } else if (
+        openControlledPopover({
+          store,
+          props: newProps,
+          refs,
+        })
+      ) {
+        shouldRender = true;
+      }
+    } else {
+      store.closeOptionsPopover({});
+      shouldRender = true;
+    }
+  }
+
+  if (oldProps.options !== newProps.options) {
+    const hasCurrentValues = resolveCurrentValues({ store, props: newProps }).length > 0;
+
+    if (store.getState().isOpen || hasCurrentValues) {
+      shouldRender = true;
+    }
+  }
+
   if (shouldRender) {
     render();
   }
 };
 
 export const handleTriggerClick = (deps, payload) => {
-  const { store, render, refs, props } = deps;
+  const { store, render, refs, props, dispatchEvent } = deps;
   if (props.disabled) return;
 
   const event = payload._event;
   event.stopPropagation();
 
-  const trigger = refs.trigger;
-  const rect = trigger.getBoundingClientRect();
-  const currentValues = resolveCurrentValues({ store, props });
+  const position = resolvePopoverPosition(refs.trigger);
+  if (!position) {
+    return;
+  }
 
   store.openOptionsPopover({
-    position: {
-      x: Math.round(rect.left),
-      y: Math.round(rect.bottom + 12),
-      w: Math.max(Math.round(rect.width), 240),
-    },
-    values: currentValues,
+    position,
+    values: resolveDraftValues({ store, props }),
+  });
+  emitOpenChange({
+    dispatchEvent,
+    open: true,
   });
   render();
 };
@@ -116,13 +264,17 @@ export const handleTriggerKeyDown = (deps, payload) => {
 };
 
 export const handlePopoverClose = (deps) => {
-  const { store, render } = deps;
+  const { store, render, dispatchEvent } = deps;
   store.closeOptionsPopover({});
+  emitOpenChange({
+    dispatchEvent,
+    open: false,
+  });
   render();
 };
 
 export const handleOptionClick = (deps, payload) => {
-  const { render, props, store } = deps;
+  const { render, props, store, dispatchEvent } = deps;
   if (props.disabled) return;
 
   const event = payload._event;
@@ -137,6 +289,10 @@ export const handleOptionClick = (deps, payload) => {
   }
 
   store.toggleDraftSelectedValue({ value: option.value });
+  emitDraftValueChange({
+    dispatchEvent,
+    value: store.selectDraftSelectedValues(),
+  });
   render();
 };
 
@@ -175,6 +331,11 @@ export const handleSubmitClick = (deps, payload) => {
     item: undefined,
   });
 
+  emitOpenChange({
+    dispatchEvent,
+    open: false,
+  });
+
   render();
 };
 

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

@@ -31,6 +31,12 @@ propsSchema:
       type: array
       items:
         type: any
+    draftSelectedValues:
+      type: array
+      items:
+        type: any
+    open:
+      type: boolean
     onChange:
       type: function
     addOption:
@@ -44,8 +50,27 @@ propsSchema:
       type: string
 events:
   value-change: {}
+  draft-value-change: {}
+  open-change: {}
   add-option-click: {}
 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

@@ -7,7 +7,9 @@ const blacklistedProps = [
   "slot",
   "placeholder",
   "options",
+  "open",
   "selectedValues",
+  "draftSelectedValues",
   "onChange",
   "addOption",
   "disabled",
@@ -68,26 +70,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 +115,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 +178,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 +206,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,12 +227,8 @@ 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,
@@ -305,11 +266,15 @@ 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;
   state.hasSelectedValues = true;
-  if (payload.syncDraft || !state.isOpen) {
+  if ((payload.syncDraft || !state.isOpen) && !payload.preserveDraft) {
     state.draftSelectedValues = [...values];
   }
 };

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

@@ -31,13 +31,10 @@ 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;"':
+  - $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
@@ -51,7 +48,7 @@ template:
                           - 'rtgl-tag v=mu pre=${option.icon} style="${option.tagStyle}"':
                               ${option.label}
                     $elif option.isSeparator:
-                      - rtgl-view w=f h=1 bgc=mu my=xs: null
+                      - rtgl-view w=f h=1 bgc=mu mv=xs: null
               - $if showAddOption:
                   - rtgl-button#addOptionButton v=gh s=sm pre=plus data-testid="tag-select-add-option":
                       ${addOptionLabel}