@rettangoli/ui 1.6.0 → 1.7.0

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

@@ -0,0 +1,335 @@
+import { deepEqual } from "../../common.js";
+
+const blacklistedProps = [
+  "id",
+  "class",
+  "style",
+  "slot",
+  "placeholder",
+  "options",
+  "selectedValues",
+  "onChange",
+  "addOption",
+  "disabled",
+];
+
+const stringifyProps = (props = {}) => {
+  return Object.entries(props)
+    .filter(([key]) => !blacklistedProps.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" ");
+};
+
+const hasOwnProp = (object, key) => Object.prototype.hasOwnProperty.call(object || {}, key);
+
+const getOptionType = (option = {}) => {
+  if (option.type === "section") {
+    return "section";
+  }
+
+  if (option.type === "separator") {
+    return "separator";
+  }
+
+  return "item";
+};
+
+const isSelectableOption = (option = {}) => getOptionType(option) === "item";
+
+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 normalizeSelectedValues = (selectedValues) => {
+  if (!Array.isArray(selectedValues)) {
+    return [];
+  }
+
+  return [...selectedValues];
+};
+
+const sameValueArray = (left = [], right = []) => {
+  if (left.length !== right.length) {
+    return false;
+  }
+
+  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));
+};
+
+const getCurrentValues = ({ state, props }) => {
+  if (state.hasSelectedValues) {
+    return normalizeSelectedValues(state.selectedValues);
+  }
+
+  return normalizeSelectedValues(props.selectedValues);
+};
+
+const getDraftValues = ({ state, props }) => {
+  if (state.isOpen) {
+    return normalizeSelectedValues(state.draftSelectedValues);
+  }
+
+  return getCurrentValues({ state, props });
+};
+
+const stringifyFallbackLabel = (value) => {
+  if (value === undefined || value === null) {
+    return "";
+  }
+
+  return String(value);
+};
+
+const findMatchingOption = (options = [], value) => {
+  return options.find((option) => isSelectableOption(option) && deepEqual(option.value, value));
+};
+
+const buildTagStyle = ({ isSelected = true, isAddChip = false } = {}) => {
+  const baseStyle = [
+    "--tag-border-radius: var(--border-radius-md)",
+    "--muted-foreground: var(--foreground)",
+  ];
+
+  if (isAddChip || !isSelected) {
+    baseStyle.push("--muted: color-mix(in srgb, var(--muted) 82%, var(--background) 18%)");
+  }
+
+  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,
+  selectedValues = [],
+  hasIconColumn = false,
+}) => {
+  const type = getOptionType(option);
+  const isSection = type === "section";
+  const isSeparator = type === "separator";
+  const isItem = type === "item";
+
+  if (isSection || isSeparator) {
+    return {
+      ...option,
+      index,
+      type,
+      isSection,
+      isSeparator,
+      isItem,
+    };
+  }
+
+  const isSelected = isSelectedValue(selectedValues, option.value);
+  const icon = getOptionIcon(option);
+  const baseSuffixText = getOptionSuffixText(option);
+  const suffixText = isSelected ? (baseSuffixText || "Added") : baseSuffixText;
+
+  return {
+    ...option,
+    index,
+    type,
+    isSection,
+    isSeparator,
+    isItem,
+    isSelected,
+    hasIconSlot: hasIconColumn,
+    icon,
+    hasIcon: icon.length > 0,
+    cursor: "pointer",
+    tagStyle: buildTagStyle({ isSelected }),
+    suffixText,
+    hasSuffixText: suffixText.length > 0,
+  };
+};
+
+export const createInitialState = () =>
+  Object.freeze({
+    isOpen: false,
+    position: {
+      x: 0,
+      y: 0,
+      w: 240,
+    },
+    selectedValues: [],
+    draftSelectedValues: [],
+    hasSelectedValues: false,
+  });
+
+export const selectViewData = ({ state, props }) => {
+  const containerAttrString = stringifyProps(props);
+  const isDisabled = !!props.disabled;
+  const currentValues = getCurrentValues({ state, props });
+  const draftValues = getDraftValues({ state, props });
+  const options = Array.isArray(props.options) ? props.options : [];
+  const hasIconColumn = options.some((option) => isSelectableOption(option) && hasOwnProp(option, "icon"));
+  const normalizedOptions = options.map((option, index) =>
+    normalizeOption({
+      option,
+      index,
+      selectedValues: draftValues,
+      hasIconColumn,
+    }),
+  );
+
+  const selectedTags = currentValues.map((value, selectionIndex) => {
+    const matchedOption = findMatchingOption(options, value);
+    const icon = matchedOption ? getOptionIcon(matchedOption) : "";
+
+    return {
+      value,
+      selectionIndex,
+      label: matchedOption?.label || stringifyFallbackLabel(value),
+      icon,
+      hasIcon: icon.length > 0,
+      testId: `tag-select-tag-${selectionIndex}`,
+    };
+  });
+
+  const hasSelectableOptions = normalizedOptions.some((option) => option.isItem);
+  const hasDraftChanges = !sameValueArray(currentValues, draftValues);
+
+  return {
+    containerAttrString,
+    isDisabled,
+    isOpen: state.isOpen,
+    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 }),
+    triggerCursor: isDisabled ? "not-allowed" : "pointer",
+    triggerTabIndex: isDisabled ? -1 : 0,
+    showAddOption: true,
+    addOptionLabel: props.addOption?.label || "Add tag",
+    hasDraftChanges,
+    submitDisabled: isDisabled || !hasDraftChanges,
+    submitLabel: "Save",
+  };
+};
+
+export const selectSelectedValues = ({ state }) => {
+  return normalizeSelectedValues(state.selectedValues);
+};
+
+export const selectHasSelectedValues = ({ state }) => {
+  return !!state.hasSelectedValues;
+};
+
+export const selectDraftSelectedValues = ({ state }) => {
+  return normalizeSelectedValues(state.draftSelectedValues);
+};
+
+export const openOptionsPopover = ({ state }, payload = {}) => {
+  const { position, values } = payload;
+  state.position = {
+    ...state.position,
+    ...(position || {}),
+  };
+  state.draftSelectedValues = normalizeSelectedValues(values);
+  state.isOpen = true;
+};
+
+export const closeOptionsPopover = ({ state }) => {
+  state.isOpen = false;
+  state.draftSelectedValues = [];
+};
+
+export const updateSelectedValues = ({ state }, payload = {}) => {
+  const values = normalizeSelectedValues(payload.values);
+  state.selectedValues = values;
+  state.hasSelectedValues = true;
+  if (payload.syncDraft || !state.isOpen) {
+    state.draftSelectedValues = [...values];
+  }
+};
+
+export const toggleDraftSelectedValue = ({ state }, payload = {}) => {
+  const draftValues = normalizeSelectedValues(state.draftSelectedValues);
+  const value = payload.value;
+  const existingIndex = draftValues.findIndex((currentValue) => deepEqual(currentValue, value));
+
+  if (existingIndex >= 0) {
+    state.draftSelectedValues = draftValues.filter((_, index) => index !== existingIndex);
+    return;
+  }
+
+  state.draftSelectedValues = [...draftValues, value];
+};
+
+export const commitDraftSelectedValues = ({ state }) => {
+  state.selectedValues = normalizeSelectedValues(state.draftSelectedValues);
+  state.hasSelectedValues = true;
+  state.isOpen = false;
+  state.draftSelectedValues = [];
+};

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

@@ -0,0 +1,61 @@
+refs:
+  trigger:
+    eventListeners:
+      click:
+        handler: handleTriggerClick
+      keydown:
+        handler: handleTriggerKeyDown
+  popover:
+    eventListeners:
+      close:
+        handler: handlePopoverClose
+  option*:
+    eventListeners:
+      click:
+        handler: handleOptionClick
+      keydown:
+        handler: handleOptionKeyDown
+  submitButton:
+    eventListeners:
+      click:
+        handler: handleSubmitClick
+  addOptionButton:
+    eventListeners:
+      click:
+        handler: handleAddOptionClick
+styles:
+  .icon-placeholder:
+    width: 16px
+    height: 16px
+    flex-shrink: 0
+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}"':
+                  ${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 !hasSelectableOptions:
+              - rtgl-text s=sm c=mu-fg: No tags available
+          - rtgl-view d=h wrap g=sm w=f:
+              - $for option, i in options:
+                  - $if option.isSection:
+                      - rtgl-view w=f pt=xs:
+                          - rtgl-text s=xs c=mu-fg: ${option.label}
+                    $elif option.isItem:
+                      - 'rtgl-view#option${option.index} cur=${option.cursor} data-testid=${option.testId} role="button" tabindex=0 aria-pressed=${option.isSelected}':
+                          - '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
+              - $if showAddOption:
+                  - rtgl-button#addOptionButton v=gh s=sm pre=plus data-testid="tag-select-add-option":
+                      ${addOptionLabel}
+          - rtgl-view d=h av=c g=sm w=f pt=sm:
+              - rtgl-view w=1fg: null
+              - rtgl-button#submitButton v=pr s=sm data-testid="tag-select-submit" ?disabled=${submitDisabled}:
+                  ${submitLabel}

package/src/deps/createGlobalUI.js

@@ -163,11 +163,12 @@ const createGlobalUI = (globalUIElement) => {
     },
 
     /**
-     * Shows a top-centered toast message that auto-dismisses after 3 seconds.
+     * Shows a 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")
+     * @param {('top'|'bottom')} [options.position] - Vertical viewport placement (default: "top")
      * @returns {void}
      * @throws {Error} If globalUIElement is not initialized
      */