@rettangoli/ui 1.8.1 → 1.9.0

package/dist/themes/base.css

@@ -55,7 +55,7 @@ table {
 
 :root {
   --width-stretch: 100%;
-  --scrollbar-size: 6px;
+  --scrollbar-size: var(--spacing-sm);
   --scrollbar-track: transparent;
   --scrollbar-thumb: var(--muted-foreground);
   --scrollbar-thumb-hover: var(--ring);
@@ -93,7 +93,6 @@ html {
   height: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
-  scrollbar-gutter: stable both-edges;
   overflow-y: auto;
 }
 
@@ -114,7 +113,7 @@ body {
 html::-webkit-scrollbar,
 body::-webkit-scrollbar,
 ::-webkit-scrollbar {
-  width: 4px !important;
+  width: var(--scrollbar-size, var(--spacing-sm)) !important;
   background: transparent !important;
 }
 

package/package.json

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

package/src/components/form/form.view.yaml

@@ -67,7 +67,7 @@ template:
                       - $if field.type == "input-textarea":
                           - rtgl-textarea#field${field._idx} data-field-name=${field.name} w=f rows=${field.rows} placeholder=${field.placeholder} ?disabled=${field._disabled}: null
                       - $if field.type == "select":
-                          - rtgl-select#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled}: null
+                          - rtgl-select#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} ?no-clear=${field.noClear} :selectedValue=${field._selectedValue} :placeholder=${field.placeholder} ?disabled=${field._disabled} ?searchable=${field.searchable} :searchPlaceholder=${field.searchPlaceholder} :emptySearchLabel=${field.emptySearchLabel}: null
                       - $if field.type == "tag-select":
                           - rtgl-tag-select#field${field._idx} data-field-name=${field.name} w=f :options=${field.options} :selectedValues=${field._selectedValues} :placeholder=${field.placeholder} :addOption=${field.addOption} ?no-add=${field.noAdd} ?disabled=${field._disabled}: null
                       - $if field.type == "segmented-control":

package/src/components/select/select.handlers.js

@@ -12,6 +12,50 @@ const getOptionType = (option = {}) => {
   return 'item';
 };
 
+const focusSearchInput = (refs = {}) => {
+  const input = refs.searchInput;
+
+  if (!input) {
+    return;
+  }
+
+  if (typeof input.focus === "function") {
+    input.focus();
+  }
+
+  const innerInput = input.shadowRoot?.querySelector("input, textarea");
+  if (innerInput && typeof innerInput.focus === "function") {
+    innerInput.focus();
+  }
+};
+
+const focusSearchInputWhenReady = (refs = {}, remainingAttempts = 10) => {
+  const popover = refs.popover;
+
+  if (!popover?.hasAttribute?.("open")) {
+    return;
+  }
+
+  if (popover.hasAttribute("positioned") || remainingAttempts === 0) {
+    focusSearchInput(refs);
+    return;
+  }
+
+  setTimeout(() => focusSearchInputWhenReady(refs, remainingAttempts - 1), 16);
+};
+
+const refreshOpenPopover = (refs = {}) => {
+  refs?.popover?.refreshContent?.();
+};
+
+const getEventValue = (event = {}) => {
+  if (event.detail && Object.prototype.hasOwnProperty.call(event.detail, "value")) {
+    return event.detail.value;
+  }
+
+  return event.currentTarget?.value ?? "";
+};
+
 export const handleBeforeMount = (deps) => {
   const { store, props, render } = deps;
 
@@ -47,11 +91,25 @@ export const handleOnUpdate = (deps, payload) => {
     shouldRefreshPopover = true;
   }
 
+  if (oldProps.searchable !== newProps.searchable) {
+    store.setSearchQuery?.({ query: "" });
+    shouldRender = true;
+    shouldRefreshPopover = true;
+  }
+
+  if (
+    oldProps.searchPlaceholder !== newProps.searchPlaceholder
+    || oldProps.emptySearchLabel !== newProps.emptySearchLabel
+  ) {
+    shouldRender = true;
+    shouldRefreshPopover = true;
+  }
+
   if (shouldRender) {
     render();
 
     if (shouldRefreshPopover && store.selectState?.().isOpen) {
-      refs?.popover?.refreshContent?.();
+      refreshOpenPopover(refs);
     }
   }
 }
@@ -82,6 +140,10 @@ export const handleButtonClick = (deps, payload) => {
     selectedIndex
   })
   render();
+
+  if (props.searchable) {
+    focusSearchInputWhenReady(refs);
+  }
 }
 
 export const handleButtonKeyDown = (deps, payload) => {
@@ -100,6 +162,32 @@ export const handleClickOptionsPopoverOverlay = (deps) => {
   render();
 }
 
+export const handleSearchInput = (deps, payload) => {
+  const { store, render } = deps;
+  const event = payload._event;
+
+  event.stopPropagation();
+  store.setSearchQuery({ query: getEventValue(event) });
+  render();
+  // The popover observes size changes itself. Resyncing here re-slots the
+  // active search field and causes Chromium to drop focus while typing.
+};
+
+export const handleSearchKeyDown = (deps, payload) => {
+  const { store, render } = deps;
+  const event = payload._event;
+
+  event.stopPropagation();
+
+  if (event.key !== "Escape") {
+    return;
+  }
+
+  event.preventDefault();
+  store.closeOptionsPopover({});
+  render();
+};
+
 export const handleOptionClick = (deps, payload) => {
   const { render, dispatchEvent, props, store } = deps;
   if (props.disabled) return;

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

@@ -40,6 +40,12 @@ propsSchema:
           type: string
     disabled:
       type: boolean
+    searchable:
+      type: boolean
+    searchPlaceholder:
+      type: string
+    emptySearchLabel:
+      type: string
     w:
       type: string
 events:

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

@@ -15,6 +15,9 @@ const blacklistedProps = [
   "noClear",
   "addOption",
   "disabled",
+  "searchable",
+  "searchPlaceholder",
+  "emptySearchLabel",
 ];
 
 const stringifyProps = (props = {}) => {
@@ -54,6 +57,120 @@ const getOptionSuffixText = (option = {}) => {
   return '';
 };
 
+const normalizeSearchQuery = (query) => {
+  if (query === undefined || query === null) {
+    return "";
+  }
+
+  return String(query).trim().toLowerCase();
+};
+
+const optionLabelMatches = (option = {}, query = "") => {
+  if (!query) {
+    return true;
+  }
+
+  return String(option.label ?? "").toLowerCase().includes(query);
+};
+
+const collectOptionGroups = (options = []) => {
+  const groups = [];
+  let currentGroup = {
+    section: null,
+    entries: [],
+  };
+
+  options.forEach((option, index) => {
+    const entry = {
+      option,
+      index,
+      type: getOptionType(option),
+    };
+
+    if (entry.type === "section") {
+      if (currentGroup.section || currentGroup.entries.length > 0) {
+        groups.push(currentGroup);
+      }
+
+      currentGroup = {
+        section: entry,
+        entries: [],
+      };
+      return;
+    }
+
+    currentGroup.entries.push(entry);
+  });
+
+  if (currentGroup.section || currentGroup.entries.length > 0) {
+    groups.push(currentGroup);
+  }
+
+  return groups;
+};
+
+const filterOptionEntriesBySearch = (options = [], rawQuery = "") => {
+  const query = normalizeSearchQuery(rawQuery);
+
+  if (!query) {
+    return options.map((option, index) => ({
+      option,
+      index,
+    }));
+  }
+
+  return collectOptionGroups(options).flatMap((group) => {
+    const sectionMatches = group.section ? optionLabelMatches(group.section.option, query) : false;
+    const itemVisibility = group.entries.map((entry) => {
+      if (entry.type !== "item") {
+        return false;
+      }
+
+      return sectionMatches || optionLabelMatches(entry.option, query);
+    });
+    const hasVisibleItem = itemVisibility.some(Boolean);
+
+    if (!sectionMatches && !hasVisibleItem) {
+      return [];
+    }
+
+    const visibleEntries = [];
+
+    if (group.section) {
+      visibleEntries.push(group.section);
+    }
+
+    group.entries.forEach((entry, entryIndex) => {
+      if (entry.type === "item") {
+        if (itemVisibility[entryIndex]) {
+          visibleEntries.push(entry);
+        }
+        return;
+      }
+
+      if (entry.type !== "separator") {
+        return;
+      }
+
+      const hasVisibleItemBefore = itemVisibility
+        .slice(0, entryIndex)
+        .some(Boolean);
+      const hasVisibleItemAfter = itemVisibility
+        .slice(entryIndex + 1)
+        .some(Boolean);
+
+      if (hasVisibleItemBefore && hasVisibleItemAfter) {
+        visibleEntries.push(entry);
+      }
+    });
+
+    return visibleEntries.map(({ option, index }) => ({
+      option,
+      index,
+    }));
+  });
+};
+
 const normalizeOption = (option = {}, index, currentValue, hoveredOptionId, hasIconColumn) => {
   const type = getOptionType(option);
   const isSection = type === 'section';
@@ -116,6 +233,7 @@ export const createInitialState = () => Object.freeze({
   selectedValue: null,
   hoveredOptionId: null,
   hoveredAddOption: false,
+  searchQuery: "",
 });
 
 export const selectViewData = ({ state, props }) => {
@@ -139,10 +257,24 @@ export const selectViewData = ({ state, props }) => {
   }
 
   const hasIconColumn = options.some((option) => isSelectableOption(option) && hasOwnProp(option, 'icon'));
-  const optionsWithSelection = options.map((option, index) => {
-    return normalizeOption(option, index, currentValue, state.hoveredOptionId, hasIconColumn);
+  const visibleOptionEntries = filterOptionEntriesBySearch(
+    options,
+    props.searchable ? state.searchQuery : "",
+  );
+  const visibleOptionIndexes = new Set(visibleOptionEntries.map(({ index }) => index));
+  const renderOptions = options.map((option, index) => {
+    return {
+      ...normalizeOption(option, index, currentValue, state.hoveredOptionId, hasIconColumn),
+      isSearchHidden: !visibleOptionIndexes.has(index),
+    };
   });
-  const selectedOptionView = optionsWithSelection.find((option) => option.isItem && option.isSelected);
+  const optionsWithSelection = renderOptions.filter((option) => !option.isSearchHidden);
+  const selectedOptionIcon = getOptionIcon(selectedOption);
+  const selectedOptionSuffixText = getOptionSuffixText(selectedOption);
+  const searchQuery = props.searchable ? state.searchQuery : "";
+  const hasSearchQuery = normalizeSearchQuery(searchQuery).length > 0;
+  const hasVisibleSelectableOptions = optionsWithSelection.some((option) => option.isItem);
+  const showEmptySearch = !!props.searchable && hasSearchQuery && !hasVisibleSelectableOptions;
 
   return {
     containerAttrString,
@@ -150,14 +282,15 @@ export const selectViewData = ({ state, props }) => {
     isOpen: state.isOpen,
     position: state.position,
     options: optionsWithSelection,
+    renderOptions,
     selectedValue: currentValue,
     selectedLabel: displayLabel,
     selectedLabelColor: isPlaceholderLabel ? "mu-fg" : "fg",
-    selectedIcon: selectedOptionView?.icon || "",
-    hasSelectedIcon: !!selectedOptionView?.hasIcon,
+    selectedIcon: selectedOptionIcon,
+    hasSelectedIcon: selectedOptionIcon.length > 0,
     selectedIconColor: isPlaceholderLabel ? "mu-fg" : "fg",
-    selectedSuffixText: selectedOptionView?.suffixText || "",
-    hasSelectedSuffixText: !!selectedOptionView?.hasSuffixText,
+    selectedSuffixText: selectedOptionSuffixText,
+    hasSelectedSuffixText: selectedOptionSuffixText.length > 0,
     selectedSuffixTextColor: "mu-fg",
     selectButtonCursor: isDisabled ? "not-allowed" : "pointer",
     selectButtonHoverBorderColor: isDisabled ? "bo" : "ac",
@@ -167,6 +300,12 @@ export const selectViewData = ({ state, props }) => {
     showAddOption: !isDisabled && !!props.addOption,
     addOptionLabel: props.addOption?.label ? `+ ${props.addOption.label}` : "+ Add",
     addOptionBgc: state.hoveredAddOption ? "ac" : "",
+    showSearch: !isDisabled && !!props.searchable,
+    searchQuery,
+    searchPlaceholder: props.searchPlaceholder || "Search options",
+    showEmptySearch,
+    hideEmptySearch: !showEmptySearch,
+    emptySearchLabel: props.emptySearchLabel || "No matching options",
   };
 };
 
@@ -182,6 +321,7 @@ export const openOptionsPopover = ({ state }, payload = {}) => {
   const { position, selectedIndex } = payload;
   state.position = position;
   state.isOpen = true;
+  state.searchQuery = "";
   // Set hoveredOptionId to the selected option's index if available
   if (selectedIndex !== undefined && selectedIndex !== null) {
     state.hoveredOptionId = selectedIndex;
@@ -190,11 +330,13 @@ export const openOptionsPopover = ({ state }, payload = {}) => {
 
 export const closeOptionsPopover = ({ state }) => {
   state.isOpen = false;
+  state.searchQuery = "";
 };
 
 export const updateSelectedValue = ({ state }, payload = {}) => {
   state.selectedValue = payload.value;
   state.isOpen = false;
+  state.searchQuery = "";
 };
 
 export const resetSelection = ({ state }) => {
@@ -216,3 +358,10 @@ export const clearSelectedValue = ({ state }) => {
 export const setHoveredAddOption = ({ state }, payload = {}) => {
   state.hoveredAddOption = !!payload.isHovered;
 };
+
+export const setSearchQuery = ({ state }, payload = {}) => {
+  state.searchQuery = payload.query === undefined || payload.query === null
+    ? ""
+    : String(payload.query);
+  state.hoveredOptionId = null;
+};

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

@@ -9,6 +9,14 @@ refs:
     eventListeners:
       click:
         handler: handleClearClick
+  searchInput:
+    eventListeners:
+      value-input:
+        handler: handleSearchInput
+        stopPropagation: true
+      keydown:
+        handler: handleSearchKeyDown
+        stopPropagation: true
   popover:
     eventListeners:
       close:
@@ -46,13 +54,16 @@ template:
           - $if showClear:
               - 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-popover#popover ?open=${isOpen} x=${position.x} y=${position.y} place=rs content-wh=300 content-g=xs content-sv=true ?content-hsb=${showSearch} content-pv=sm:
+      - $if showSearch:
+          - rtgl-view w=f mt=md mh=md mb=xs:
+              - 'rtgl-input#searchInput w=f s=sm value=${searchQuery} placeholder="${searchPlaceholder}"': null
+      - $for option, i in renderOptions:
           - $if option.isSection:
-              - rtgl-view w=f p=md:
+              - rtgl-view w=f p=md ?hide=${option.isSearchHidden}:
                   - rtgl-text s=xs c=mu-fg: ${option.label}
             $elif option.isItem:
-              - rtgl-view#option${option.index} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId}:
+              - rtgl-view#option${option.index} w=f ph=lg pv=md cur=pointer bgc=${option.bgc} data-testid=${option.testId} ?hide=${option.isSearchHidden}:
                   - rtgl-view d=h av=c w=f g=md:
                       - rtgl-view d=h av=c g=md w=1fg:
                           - $if option.hasIconSlot:
@@ -64,7 +75,10 @@ template:
                       - $if option.hasSuffixText:
                           - rtgl-text s=xs c=${option.suffixTextColor} ta=e: ${option.suffixText}
             $elif option.isSeparator:
-              - rtgl-view w=f h=1 bgc=mu mv=sm: null
+              - rtgl-view w=f h=1 bgc=mu mv=sm ?hide=${option.isSearchHidden}: null
+      - $if showSearch:
+          - rtgl-view w=f ph=lg pv=md ?hide=${hideEmptySearch}:
+              - rtgl-text s=sm c=mu-fg: ${emptySearchLabel}
       - $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/primitives/grid.js

@@ -185,13 +185,13 @@ class RettangoliGridElement extends HTMLElement {
 
       if (scrollHorizontal && scrollVertical) {
         this._styles[size].overflow = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
+        this._styles[size]["scrollbar-gutter"] = "stable";
       } else if (scrollHorizontal) {
         this._styles[size]["overflow-x"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
+        this._styles[size]["scrollbar-gutter"] = "stable";
       } else if (scrollVertical) {
         this._styles[size]["overflow-y"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
+        this._styles[size]["scrollbar-gutter"] = "stable";
       }
 
       if (overflow === "hidden") {

package/src/primitives/popover.js

@@ -188,6 +188,7 @@ class RettangoliPopoverElement extends HTMLElement {
       "content-wh",
       "content-g",
       "content-sv",
+      "content-hsb",
       "content-ph",
       "content-pv",
       "content-bgc",
@@ -375,6 +376,7 @@ class RettangoliPopoverElement extends HTMLElement {
       ["content-wh", "wh"],
       ["content-g", "g"],
       ["content-sv", "sv"],
+      ["content-hsb", "hsb"],
     ];
 
     for (const [sourceAttr, targetAttr] of attrs) {

package/src/primitives/view.js

@@ -314,15 +314,15 @@ class RettangoliViewElement extends HTMLElement {
 
       if (scrollHorizontal && scrollVertical) {
         this._styles[size]["overflow"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
+        this._styles[size]["scrollbar-gutter"] = "stable";
         this._styles[size]["flex-wrap"] = "nowrap";
       } else if (scrollHorizontal) {
         this._styles[size]["overflow-x"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
+        this._styles[size]["scrollbar-gutter"] = "stable";
         this._styles[size]["flex-wrap"] = "nowrap";
       } else if (scrollVertical) {
         this._styles[size]["overflow-y"] = "auto";
-        this._styles[size]["scrollbar-gutter"] = "stable both-edges";
+        this._styles[size]["scrollbar-gutter"] = "stable";
         this._styles[size]["flex-wrap"] = "nowrap";
       }
 

package/src/styles/scrollStyles.js

@@ -21,14 +21,14 @@ export default css`
 :host([sh]),
 :host([sv]) {
     -ms-overflow-style: auto;
-    scrollbar-gutter: stable both-edges;
+    scrollbar-gutter: stable;
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb, var(--muted-foreground)) var(--scrollbar-track, transparent);
 }
 :host([sh])::-webkit-scrollbar,
 :host([sv])::-webkit-scrollbar {
-    width: var(--scrollbar-size, 6px);
-    height: var(--scrollbar-size, 6px);
+    width: var(--scrollbar-size, var(--spacing-sm));
+    height: var(--scrollbar-size, var(--spacing-sm));
     background: var(--scrollbar-track, transparent);
 }
 :host([sh])::-webkit-scrollbar-track,

package/src/themes/base.css

@@ -55,7 +55,7 @@ table {
 
 :root {
   --width-stretch: 100%;
-  --scrollbar-size: 6px;
+  --scrollbar-size: var(--spacing-sm);
   --scrollbar-track: transparent;
   --scrollbar-thumb: var(--muted-foreground);
   --scrollbar-thumb-hover: var(--ring);
@@ -93,7 +93,6 @@ html {
   height: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
-  scrollbar-gutter: stable both-edges;
   overflow-y: auto;
 }
 
@@ -114,7 +113,7 @@ body {
 html::-webkit-scrollbar,
 body::-webkit-scrollbar,
 ::-webkit-scrollbar {
-  width: 4px !important;
+  width: var(--scrollbar-size, var(--spacing-sm)) !important;
   background: transparent !important;
 }