tosijs-ui 1.5.18 → 1.5.21

package/dist/menu.d.ts

@@ -27,7 +27,8 @@ export interface SubMenu {
     dropAction?: (dataTransfer: DataTransfer) => void;
 }
 export type MenuSeparator = null;
-export type MenuItem = MenuAction | SubMenu | MenuSeparator;
+export type MenuElement = () => HTMLElement;
+export type MenuItem = MenuAction | SubMenu | MenuSeparator | MenuElement;
 export declare const resolveMenuItems: (provider: MenuItemsProvider) => MenuItem[];
 export declare const filterForDrop: (items: MenuItem[], dataTypes: readonly string[], hideDisabled?: boolean) => MenuItem[];
 export declare const filterForClick: (items: MenuItem[], hideDisabled?: boolean) => MenuItem[];

package/dist/menu.js

@@ -235,12 +235,14 @@ export interface PopMenuOptions {
 
 ## MenuItem
 
-A `MenuItem` can be one of three things:
+A `MenuItem` can be one of four things:
 
 - `null` denotes a separator
 - `MenuAction` denotes a labeled button or `<a>` tag based on whether the `action` provided
   is a url (string) or an event handler (function).
 - `SubMenu` is a submenu.
+- A `() => HTMLElement` function returns a custom element to embed inline in
+  the menu (see `MenuElement` below).
 
 ### MenuAction
 
@@ -272,6 +274,54 @@ interface SubMenu {
 }
 ```
 
+### MenuElement
+
+For embedding a custom widget inline in a menu — e.g. a `<tosi-segmented>` for
+quick option-picking — pass a function that returns an `HTMLElement`:
+
+```
+type MenuElement = () => HTMLElement
+```
+
+The returned element is added as-is and tagged with the `tosi-menu-element`
+class, which sets `min-height` to match standard menu items so the row
+aligns visually. The widget is responsible for its own click/focus behaviour.
+
+```js
+import { popMenu, tosiSegmented } from 'tosijs-ui'
+import { elements } from 'tosijs'
+
+const { button } = elements
+
+let view = 'list'
+
+const btn = button('View options')
+btn.addEventListener('click', () => {
+  popMenu({
+    target: btn,
+    menuItems: [
+      { caption: 'Refresh', icon: 'refreshCcw', action() {} },
+      null,
+      () => tosiSegmented({
+        choices: 'list,grid,table',
+        value: view,
+        style: { margin: '0 1em' },
+        onChange(event) {
+          view = event.target.value
+        },
+        // stop the menu's outer onClick from closing it when the user
+        // picks a segment
+        onClick(event) { event.stopPropagation() },
+      }),
+      null,
+      { caption: 'Settings…', icon: 'settings', action() {} },
+    ]
+  })
+})
+
+preview.append(btn)
+```
+
 ### Keyboard Shortcuts
 
 If a menu is embodied in a `<tosi-menu>` it is supported by keyboard
@@ -736,6 +786,10 @@ export const filterForDrop = (items, dataTypes, hideDisabled = false) => {
             filtered.push(item);
             continue;
         }
+        if (typeof item === 'function') {
+            filtered.push(item);
+            continue;
+        }
         const { acceptsDrop } = item;
         if (!acceptsDrop) {
             if (!hideDisabled) {
@@ -777,6 +831,10 @@ export const filterForClick = (items, hideDisabled = false) => {
             filtered.push(item);
             continue;
         }
+        if (typeof item === 'function') {
+            filtered.push(item);
+            continue;
+        }
         const action = item.action;
         const menuItemsProvider = item.menuItems;
         if (action || menuItemsProvider) {
@@ -870,6 +928,9 @@ StyleSheet('xin-menu-helper', {
         background: varDefault.menuSeparatorColor('#2224'),
         margin: varDefault.menuSeparatorMargin('8px 0'),
     },
+    '.xin-menu-element, .tosi-menu-element': {
+        minHeight: varDefault.menuItemHeight('48px'),
+    },
     '.xin-menu-item, .tosi-menu-item': menuItemStyles,
     '.xin-menu-item, .xin-menu-item > span, .tosi-menu-item, .tosi-menu-item > span': menuItemColorStyles,
     '.xin-menu-with-icons .xin-menu-item, .tosi-menu-with-icons .tosi-menu-item': {
@@ -917,19 +978,18 @@ export const createMenuAction = (item, options) => {
     let menuItem;
     const props = item.properties || {};
     if (typeof item?.action === 'string') {
-        menuItem = a({
-            class: 'xin-menu-item tosi-menu-item',
+        menuItem = a(props, {
             role: itemRole,
             href: item.action,
-        }, props, icon, options.localized ? span(localize(item.caption)) : span(item.caption), span(item.shortcut ? displayShortcut(item.shortcut) : ' '));
+        }, icon, options.localized ? span(localize(item.caption)) : span(item.caption), span(item.shortcut ? displayShortcut(item.shortcut) : ' '));
     }
     else {
-        menuItem = button({
-            class: 'xin-menu-item tosi-menu-item',
+        menuItem = button(props, {
             role: itemRole,
             onClick: item.action,
-        }, props, icon, options.localized ? span(localize(item.caption)) : span(item.caption), span(item.shortcut ? displayShortcut(item.shortcut) : ' '));
+        }, icon, options.localized ? span(localize(item.caption)) : span(item.caption), span(item.shortcut ? displayShortcut(item.shortcut) : ' '));
     }
+    menuItem.classList.add('xin-menu-item', 'tosi-menu-item');
     menuItem.classList.toggle('xin-menu-item-checked', checked !== false);
     menuItem.classList.toggle('tosi-menu-item-checked', checked !== false);
     if (item.tooltip) {
@@ -950,8 +1010,7 @@ export const createDropMenuItem = (item, options) => {
         icon = icons[icon]();
     }
     const props = item.properties || {};
-    const menuItem = button({
-        class: 'xin-menu-item tosi-menu-item',
+    const menuItem = button(props, {
         onDragenter(event) {
             clearDropGraceTimer();
             menuItem.classList.add('xin-drop-over', 'tosi-drop-over');
@@ -978,7 +1037,8 @@ export const createDropMenuItem = (item, options) => {
             }
             removeLastMenu(0);
         },
-    }, props, icon, options.localized ? span(localize(item.caption)) : span(item.caption), span(' '));
+    }, icon, options.localized ? span(localize(item.caption)) : span(item.caption), span(' '));
+    menuItem.classList.add('xin-menu-item', 'tosi-menu-item');
     if (item.tooltip) {
         menuItem.dataset.tooltip = item.tooltip;
     }
@@ -1000,8 +1060,7 @@ export const createSubMenu = (item, options) => {
     let disclosureTimer = null;
     let disclosed = false;
     const props = item.properties || {};
-    const submenuItem = button({
-        class: 'xin-menu-item tosi-menu-item',
+    const submenuItem = button(props, {
         disabled: !(!item.enabled || item.enabled()),
         onClick(event) {
             if (options._dropMode)
@@ -1093,7 +1152,8 @@ export const createSubMenu = (item, options) => {
             }
             removeLastMenu(0);
         },
-    }, props, icon, options.localized ? span(localize(item.caption)) : span(item.caption), icons.chevronRight({ style: { justifySelf: 'flex-end' } }));
+    }, icon, options.localized ? span(localize(item.caption)) : span(item.caption), icons.chevronRight({ style: { justifySelf: 'flex-end' } }));
+    submenuItem.classList.add('xin-menu-item', 'tosi-menu-item');
     if (item.tooltip) {
         submenuItem.dataset.tooltip = item.tooltip;
     }
@@ -1106,6 +1166,11 @@ export const createMenuItem = (item, options) => {
     if (item === null) {
         return span({ class: 'xin-menu-separator tosi-menu-separator' });
     }
+    else if (typeof item === 'function') {
+        const el = item();
+        el.classList.add('xin-menu-element', 'tosi-menu-element');
+        return el;
+    }
     else if (options._dropMode) {
         const sub = item;
         const hasChildren = sub.menuItems && resolveMenuItems(sub.menuItems).length > 0;
@@ -1142,7 +1207,9 @@ export const createMenuItem = (item, options) => {
 };
 export const menu = (options) => {
     const { target, width, menuItems, role = 'menu' } = options;
-    const hasIcons = menuItems.find((item) => item?.icon || item?.checked);
+    const hasIcons = menuItems.find((item) => item != null &&
+        typeof item !== 'function' &&
+        (item.icon || item.checked));
     const menuDepth = options.submenuDepth || 0;
     const menuDiv = div({
         class: hasIcons
@@ -1296,6 +1363,8 @@ export function findShortcutAction(items, event, path = []) {
     for (const item of items) {
         if (!item)
             continue;
+        if (typeof item === 'function')
+            continue;
         const { shortcut } = item;
         const { menuItems } = item;
         if (shortcut) {

package/dist/select.js

@@ -399,7 +399,7 @@ export class TosiSelect extends Component {
             return options;
         }
         const showOption = (option) => {
-            if (option === null) {
+            if (option === null || typeof option === 'function') {
                 return true;
             }
             else if (option.menuItems) {

package/dist/tag-list.js

@@ -26,9 +26,9 @@ as a comma-delimited string or an array of strings).
   <b>Editable</b>
   <tosi-tag-list
     class="editable-tag-list"
-    value="belongs,also belongs,custom"
+    value="belongs,also belongs,has\, comma,custom"
     editable
-    available-tags="belongs,also belongs,not initially chosen"
+    available-tags="belongs,also belongs,has\, comma,not initially chosen"
   ></tosi-tag-list>
 </label>
 <br>
@@ -77,13 +77,29 @@ test('first tag-list has correct tags', () => {
 test('editable tag-list has editable attribute', () => {
   expect(tagLists[2].editable).toBe(true)
 })
+test('a comma inside a tag survives the value round-trip', () => {
+  const tl = document.createElement('tosi-tag-list')
+  tl.tags = ['New York, NY', 'Boston']
+  // the literal comma is escaped in `value` so it is not a delimiter
+  expect(tl.value).toBe('New York\\, NY,Boston')
+  expect(tl.tags.length).toBe(2)
+  expect(tl.tags).toContain('New York, NY')
+})
+test('an escaped comma in a value string parses as one tag', () => {
+  const tl = document.createElement('tosi-tag-list')
+  tl.value = 'New York\\, NY,Boston'
+  expect(tl.tags.length).toBe(2)
+  expect(tl.tags).toContain('New York, NY')
+})
 ```
 
 ## Properties
 
 ### `value`: string | string[]
 
-A list of tags
+A comma-delimited list of tags. A tag that itself contains a comma must
+escape it as `\,` — e.g. `value="New York\, NY,Boston"` is two tags. The
+`tags` accessor handles this escaping for you in both directions.
 
 ### `tags`: string[]
 
@@ -97,7 +113,8 @@ A read-only property giving the value as an array.
 ### `available-tags`: string | string[]
 
 A list of tags that will be displayed in the popup menu by default. The popup menu
-will always display custom tags (allowing their removal).
+will always display custom tags (allowing their removal). As with `value`, a
+comma inside a tag must be escaped as `\,` when set via the attribute string.
 
 ### `editable`: boolean
 
@@ -115,6 +132,12 @@ import { Component as WebComponent, elements, vars, varDefault, deprecated, } fr
 import { popMenu } from './menu';
 import { icons } from './icons';
 const { div, input, span, button } = elements;
+// Tags are serialised as a comma-delimited string (the form `value`). A
+// literal comma inside a tag is escaped as `\,` so it survives the
+// split/join round-trip — both in programmatic values and in the
+// `value` / `available-tags` HTML attributes.
+const splitTags = (str) => str.split(/(?<!\\),/).map((tag) => tag.trim().replace(/\\,/g, ','));
+const joinTags = (tags) => tags.map((tag) => tag.replace(/,/g, '\\,')).join(',');
 export class TosiTag extends WebComponent {
     static preferredTagName = 'tosi-tag';
     static lightStyleSpec = {
@@ -248,13 +271,10 @@ export class TosiTagList extends WebComponent {
     value = '';
     // tags parses value into array
     get tags() {
-        return this.value
-            .split(',')
-            .map((tag) => tag.trim())
-            .filter((tag) => tag !== '');
+        return splitTags(this.value).filter((tag) => tag !== '');
     }
     set tags(v) {
-        this.value = v.join(',');
+        this.value = joinTags(v);
     }
     _availableTags = [];
     get availableTags() {
@@ -269,12 +289,9 @@ export class TosiTagList extends WebComponent {
         }
         this.queueRender();
     }
-    // Parse available-tags string (comma-delimited)
+    // Parse available-tags string (comma-delimited; `\,` is a literal comma).
     static parseAvailableTagsString(tagsStr) {
-        return tagsStr.split(',').map((tag) => {
-            const trimmed = tag.trim();
-            return trimmed === '' ? null : trimmed;
-        });
+        return splitTags(tagsStr).map((tag) => (tag === '' ? null : tag));
     }
     connectedCallback() {
         super.connectedCallback();