@rettangoli/ui 1.5.0 → 1.6.0

package/package.json

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

package/src/components/dropdownMenu/dropdownMenu.handlers.js

@@ -1,4 +1,16 @@
 
+const getItemType = (item = {}) => {
+  if (item.type === 'section' || item.type === 'label') {
+    return 'section';
+  }
+
+  if (item.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
+
 export const handleClosePopover = (deps, payload) => {
   const { dispatchEvent } = deps;
   dispatchEvent(new CustomEvent('close'));
@@ -9,7 +21,7 @@ export const handleClickMenuItem = (deps, payload) => {
   const event = payload._event;
   const index = Number(event.currentTarget.dataset.index ?? event.currentTarget.id.slice('option'.length));
   const item = props.items[index];
-  const itemType = item?.type || 'item';
+  const itemType = getItemType(item);
 
   if (!item || itemType !== 'item' || item.disabled) {
     event.preventDefault();

package/src/components/dropdownMenu/dropdownMenu.schema.yaml

@@ -12,9 +12,10 @@ propsSchema:
           type:
             type: string
             enum:
-              - label
+              - section
               - item
               - separator
+              - label
           id:
             type: string
           icon:

package/src/components/dropdownMenu/dropdownMenu.store.js

@@ -3,12 +3,23 @@ export const createInitialState = () => Object.freeze({
 });
 
 const escapeAttrValue = (value) => `${value}`.replace(/"/g, '"');
+const getItemType = (item = {}) => {
+  if (item.type === 'section' || item.type === 'label') {
+    return 'section';
+  }
+
+  if (item.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
 
 const normalizeItems = (items) => {
   return items.map((item, index) => {
-    const type = item.type || 'item';
+    const type = getItemType(item);
     const isSeparator = type === 'separator';
-    const isLabel = type === 'label';
+    const isSection = type === 'section';
     const isItem = type === 'item';
     const isDisabled = !!item.disabled;
     const isInteractive = isItem && !isDisabled;
@@ -34,7 +45,7 @@ const normalizeItems = (items) => {
       index,
       type,
       isSeparator,
-      isLabel,
+      isSection,
       isItem,
       isDisabled,
       isInteractive,

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

@@ -20,7 +20,7 @@ styles:
 template:
   - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} content-w=${w} content-h=${h} content-sv=true content-g=xs content-pv=sm:
       - $for item, i in items:
-          - $if item.isLabel:
+          - $if item.isSection:
               - rtgl-view w=f p=md:
                   - rtgl-text s=xs c=mu-fg: ${item.label}
             $elif item.isItem && item.isDisabled:

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

@@ -1,10 +1,22 @@
 import { deepEqual } from '../../common.js';
 
+const getOptionType = (option = {}) => {
+  if (option.type === 'section') {
+    return 'section';
+  }
+
+  if (option.type === 'separator') {
+    return 'separator';
+  }
+
+  return 'item';
+};
+
 export const handleBeforeMount = (deps) => {
   const { store, props, render } = deps;
 
   if (props.selectedValue !== null && props.selectedValue !== undefined && props.options) {
-    const selectedOption = props.options.find(opt => deepEqual(opt.value, props.selectedValue));
+    const selectedOption = props.options.find((opt) => getOptionType(opt) === 'item' && deepEqual(opt.value, props.selectedValue));
     if (selectedOption) {
       store.updateSelectedValue({
         value: selectedOption?.value
@@ -48,7 +60,7 @@ export const handleButtonClick = (deps, payload) => {
   const currentValue = storeSelectedValue !== null ? storeSelectedValue : props.selectedValue;
   let selectedIndex = null;
   if (currentValue !== null && currentValue !== undefined && props.options) {
-    selectedIndex = props.options.findIndex(opt => deepEqual(opt.value, currentValue));
+    selectedIndex = props.options.findIndex((opt) => getOptionType(opt) === 'item' && deepEqual(opt.value, currentValue));
     if (selectedIndex === -1) selectedIndex = null;
   }
 
@@ -87,6 +99,9 @@ export const handleOptionClick = (deps, payload) => {
   const index = Number(id);
 
   const option = props.options[id];
+  if (getOptionType(option) !== 'item') {
+    return;
+  }
 
   // Update internal state
   store.updateSelectedValue({ value: option?.value });

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

@@ -9,6 +9,12 @@ propsSchema:
       items:
         type: object
         properties:
+          type:
+            type: string
+            enum:
+              - section
+              - item
+              - separator
           label:
             type: string
           value:

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

@@ -25,6 +25,18 @@ const stringifyProps = (props = {}) => {
 };
 
 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 : '';
@@ -43,6 +55,33 @@ const getOptionSuffixText = (option = {}) => {
 };
 
 const normalizeOption = (option = {}, index, currentValue, hoveredOptionId, hasIconColumn) => {
+  const type = getOptionType(option);
+  const isSection = type === 'section';
+  const isSeparator = type === 'separator';
+  const isItem = type === 'item';
+
+  if (isSection) {
+    return {
+      ...option,
+      index,
+      type,
+      isSection,
+      isSeparator,
+      isItem,
+    };
+  }
+
+  if (isSeparator) {
+    return {
+      ...option,
+      index,
+      type,
+      isSection,
+      isSeparator,
+      isItem,
+    };
+  }
+
   const isSelected = deepEqual(option.value, currentValue);
   const isHovered = hoveredOptionId === index;
   const icon = getOptionIcon(option);
@@ -50,6 +89,11 @@ const normalizeOption = (option = {}, index, currentValue, hoveredOptionId, hasI
 
   return {
     ...option,
+    index,
+    type,
+    isSection,
+    isSeparator,
+    isItem,
     isSelected,
     bgc: isHovered ? 'ac' : (isSelected ? 'mu' : ''),
     hasIconSlot: hasIconColumn,
@@ -88,17 +132,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) => isSelectableOption(opt) && deepEqual(opt.value, currentValue));
   if (selectedOption) {
     displayLabel = selectedOption.label;
     isPlaceholderLabel = false;
   }
 
-  const hasIconColumn = options.some((option) => hasOwnProp(option, 'icon'));
+  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 selectedOptionView = optionsWithSelection.find((option) => option.isSelected);
+  const selectedOptionView = optionsWithSelection.find((option) => option.isItem && option.isSelected);
 
   return {
     containerAttrString,

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

@@ -48,17 +48,23 @@ template:
           - 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-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 option.isSection:
+              - rtgl-view w=f p=md:
+                  - 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 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}
+            $elif option.isSeparator:
+              - rtgl-view w=f h=1 bgc=mu mv=sm: null
       - $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":