@nectary/components 2.6.1 → 2.7.0

package/select-button/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import '../icon';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context, isAttrEqual } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, isAttrEqual } from '../utils';
 import { DEFAULT_SIZE, sizeValues } from '../utils/size';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></div>';
 const template = document.createElement('template');
@@ -87,13 +87,15 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
       case 'invalid':
         {
           const isInvalid = isAttrTrue(newVal);
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          this.ariaInvalid = isInvalid.toString();
           updateBooleanAttribute(this, 'invalid', isInvalid);
           break;
         }
       case 'disabled':
         {
-          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          const isDisabled = isAttrTrue(newVal);
+          this.ariaDisabled = isDisabled.toString();
+          updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
       case 'size':

package/textarea/index.js

@@ -1,6 +1,6 @@
-import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, getRect, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
 import { DEFAULT_SIZE } from '../utils/size';
-const templateHTML = '<style>:host{all:initial;display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 4px 4px}#bottom.empty{display:none}#resize-handle{display:none;position:absolute;width:20px;height:20px;bottom:36px;right:0;cursor:ns-resize}:host([resizable]) #resize-handle{display:block}#bottom.empty+#resize-handle{bottom:0}#resize-icon{display:block;pointer-events:none;fill:var(--sinch-comp-textarea-color-default-border-initial)}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div><div id="resize-handle"><svg id="resize-icon" width="16" height="16"><path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/></svg></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 4px 4px}#bottom.empty{display:none}#resize-handle{display:none;position:absolute;width:20px;height:20px;bottom:36px;right:0;cursor:ns-resize}:host([resizable]) #resize-handle{display:block}#bottom.empty+#resize-handle{bottom:0}#resize-icon{display:block;pointer-events:none;fill:var(--sinch-comp-textarea-color-default-border-initial)}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div><div id="resize-handle"><svg id="resize-icon" width="16" height="16"><path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/></svg></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', class extends NectaryElement {
@@ -102,7 +102,7 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
             break;
           }
           const isInvalid = isAttrTrue(newVal);
-          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          this.ariaInvalid = isInvalid.toString();
           updateBooleanAttribute(this, 'invalid', isInvalid);
           break;
         }

package/tooltip/index.js

@@ -63,7 +63,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['text', 'orientation', 'type'];
+    return ['text', 'orientation', 'type', 'aria-label', 'aria-description'];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
@@ -88,6 +88,12 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
           });
           break;
         }
+      case 'aria-label':
+      case 'aria-description':
+        {
+          updateAttribute(this.#$pop, name, newVal);
+          break;
+        }
     }
   }
   get text() {

package/utils/markdown.d.ts

@@ -1 +1,19 @@
-export declare const parseMarkdown: (md: string) => string;
+export type TMarkdownInlineParams = {
+    isBold?: boolean;
+    isItalic?: boolean;
+    isStrikethrough?: boolean;
+};
+export type TMarkdownParseVisitor = {
+    link(text: string, href: string): void;
+    emoji(emojiChar: string): void;
+    codetag(text: string): void;
+    inline(text: string, params: TMarkdownInlineParams): void;
+    linebreak(): void;
+    paragraph(): void;
+    list(isOrdered: boolean): void;
+    endList(): void;
+    listItem(): void;
+    end(): Node;
+};
+export declare const isEmojiString: (data: string) => boolean;
+export declare const parseMarkdown: (md: string, visitor: TMarkdownParseVisitor) => Node;

package/utils/markdown.js

@@ -1,128 +1,143 @@
-import { filterXSS } from 'xss';
-const contextTags = {
-  em1: ['<span class="em1">', '</span>'],
-  em2: ['<span class="em2">', '</span>'],
-  em3: ['<span class="em3">', '</span>'],
-  s: ['<span class="strikethrough">', '</span>'],
-  p: ['<p class="paragraph">', '</p>']
-};
-const getContextTags = token => {
-  switch (token) {
-    case '_':
-    case '*':
-      return contextTags.em1;
-    case '__':
-    case '**':
-      return contextTags.em2;
-    case '___':
-    case '***':
-      return contextTags.em3;
-    case '~~':
-      return contextTags.s;
-    case 'p':
-      return contextTags.p;
-    default:
-      return null;
+const regLinebreak = /(?:<br>\n|<br>|\n)/;
+const regParagraph = /\n{2,}/;
+const regEm3Star = /\*\*\*(?<em3>.+?)\*\*\*/;
+const regEm2Star = /\*\*(?<em2>.+?)\*\*/;
+const regEm1Star = /\*(?<em1>.+?)\*/;
+const regEm3Underscore = /___(?<em3>.+?)___/;
+const regEm2Underscore = /__(?<em2>.+?)__/;
+const regEm1Underscore = /_(?<em1>.+?)_/;
+const regCodeTag = /`(?<code>.+?)`/;
+const regStrikethrough = /~~(?<strike>.+?)~~/;
+const regLink = /!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\)/;
+const regEmoji = /(?<emoji>(?![0-9*#])\p{Emoji})/u;
+const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
+const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
+const allRegs = [regCodeTag, regLink, regEm3Star, regEm2Star, regEm1Star, regEm3Underscore, regEm2Underscore, regEm1Underscore, regStrikethrough, regEmoji];
+export const isEmojiString = data => regEmoji.test(data);
+const excludeRegs = function (regs) {
+  for (var _len = arguments.length, excluding = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    excluding[_key - 1] = arguments[_key];
   }
+  return regs.filter(r => !excluding.includes(r));
 };
-const encodeAttr = str => {
-  return `${str}`.replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-};
-const tokenizer = /(?<em>___|\*\*\*|__|\*\*|[_*]|~~)|(?:!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\))|(?:`(?<code>[^`].*?)`)|(?<paragraph>\n{2,})|(?<newline>\n)/gm;
-export const parseMarkdown = md => {
-  const context = [];
-  let out = '';
-  let lastIndex = 0;
-  const isContextEnd = token => {
-    return context.length > 0 && context.at(-1).token === token;
-  };
-  const pushContext = token => {
-    const desc = getContextTags(token);
-    if (desc === null) {
-      return;
+const matchClosest = (regs, line) => {
+  return regs.map(reg => reg.exec(line)).reduce((res, match) => {
+    if (match === null) {
+      return res;
     }
-    context.push({
-      token,
-      out: ''
-    });
-  };
-  const popContext = (token, prev) => {
-    const desc = getContextTags(token);
-    if (desc === null) {
-      return token;
-    }
-    const ctx = context.pop();
-    return `${desc[0]}${ctx.out}${prev}${desc[1]}`;
-  };
-  const flushContext = prev => {
-    let str = '';
-    while (context.length > 1) {
-      const ctx = context.pop();
-      str = `${ctx.token}${ctx.out}${str}`;
+    if (res === null || res.index > match.index) {
+      return match;
     }
-    if (context.length === 0) {
-      pushContext('p');
-    }
-    return popContext(context.at(-1).token, str + prev);
-  };
-  md = md.trim();
-  while (true) {
-    const tokens = tokenizer.exec(md);
-    if (tokens === null) {
-      break;
+    return res;
+  }, null);
+};
+const INITIAL_CONTEXT = {
+  isBold: false,
+  isItalic: false,
+  isStrikethrough: false
+};
+const createLineParser = visitor => function parseLine(regs, md) {
+  let context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INITIAL_CONTEXT;
+  let line = md;
+  let match = null;
+  while ((match = matchClosest(regs, line)) !== null) {
+    const groups = match.groups;
+    const matchedStr = match[0];
+    if (match.index > 0) {
+      visitor.inline(line.substring(0, match.index), context);
     }
-    let prev = md.substring(lastIndex, tokens.index);
-    let chunk = tokens[0];
-    const groups = tokens.groups;
-    lastIndex = tokenizer.lastIndex;
-    if (context.length === 0) {
-      pushContext('p');
+    line = line.substring(match.index + matchedStr.length);
+    if (groups.linkhref != null) {
+      visitor.link(groups.linktext, groups.linkhref);
     }
-    if (prev.match(/[^\\](\\\\)*\\$/) != null) {
-      prev = prev.substring(0, prev.length - 1);
-      context.at(-1).out += prev + chunk;
-      continue;
+    if (groups.code != null) {
+      visitor.codetag(groups.code);
     }
-    if (groups.em != null) {
-      const isCloseTag = isContextEnd(groups.em);
-      if (isCloseTag) {
-        chunk = popContext(groups.em, prev);
-        context.at(-1).out += chunk;
-        continue;
-      }
-      context.at(-1).out += prev;
-      pushContext(groups.em);
-      continue;
+    if (groups.emoji != null) {
+      visitor.emoji(groups.emoji);
     }
-    if (groups.linkhref != null) {
-      const href = groups.linkhref;
-      const text = groups.linktext.length > 0 ? groups.linktext : href;
-      chunk = `<a class="link" target="_blank" href="${encodeAttr(href)}">${encodeAttr(text)}</a>`;
-      context.at(-1).out += prev + chunk;
-      continue;
+    if (groups.em1 != null) {
+      parseLine(excludeRegs(regs, regEm1Star, regEm1Underscore), groups.em1, {
+        ...context,
+        isItalic: true
+      });
     }
-    if (groups.code != null) {
-      chunk = `<span class="code">${encodeAttr(groups.code)}</span>`;
-      context.at(-1).out += prev + chunk;
-      continue;
+    if (groups.em2 != null) {
+      parseLine(excludeRegs(regs, regEm2Star, regEm2Underscore), groups.em2, {
+        ...context,
+        isBold: true
+      });
     }
-    if (groups.newline != null) {
-      chunk = '<br/>';
-      context.at(-1).out += prev + chunk;
-      continue;
+    if (groups.em3 != null) {
+      parseLine(excludeRegs(regs, regEm3Star, regEm3Underscore, regEm2Star, regEm2Underscore, regEm1Star, regEm1Underscore), groups.em3, {
+        ...context,
+        isBold: true,
+        isItalic: true
+      });
     }
-    if (groups.paragraph != null) {
-      out += flushContext(prev);
-      continue;
+    if (groups.strike != null) {
+      parseLine(excludeRegs(regs, regStrikethrough), groups.strike, {
+        ...context,
+        isStrikethrough: true
+      });
     }
   }
-  out = (out + flushContext(md.substring(lastIndex))).trim();
-  return filterXSS(out, {
-    whiteList: {
-      p: ['class'],
-      span: ['class'],
-      a: ['href', 'class', 'target'],
-      br: []
+  if (line.length > 0) {
+    visitor.inline(line, context);
+  }
+};
+const createBlockParser = visitor => {
+  const parseLine = createLineParser(visitor);
+  const listRegs = [regUList, regOList];
+  const getListItemText = match => {
+    return match.groups.ultext ?? match.groups.oltext;
+  };
+  const BLOCK_MODE_PARAGRAPH = 1;
+  const BLOCK_MODE_ULIST = 2;
+  const BLOCK_MODE_OLIST = 2;
+  return function parseBlock(lines) {
+    let mode = 0;
+    for (let i = 0; i < lines.length; ++i) {
+      const listMatch = matchClosest(listRegs, lines[i]);
+      const isListLine = listMatch !== null;
+      if (isListLine) {
+        const groups = listMatch.groups;
+        const isOrderedList = groups.oltext != null;
+        mode = isOrderedList ? BLOCK_MODE_OLIST : BLOCK_MODE_ULIST;
+        visitor.list(isOrderedList);
+        const listItemInitialIndent = groups.indent;
+        let listItemLines = [getListItemText(listMatch)];
+        visitor.listItem();
+        for (++i; i < lines.length; ++i) {
+          const listItemMatch = isOrderedList ? regOList.exec(lines[i]) : regUList.exec(lines[i]);
+          if (listItemMatch !== null && listItemMatch.groups.indent === listItemInitialIndent) {
+            parseBlock(listItemLines);
+            listItemLines = [getListItemText(listItemMatch)];
+            visitor.listItem();
+          } else {
+            listItemLines.push(lines[i]);
+          }
+        }
+        parseBlock(listItemLines);
+        visitor.endList();
+        mode = 0;
+      } else {
+        if (mode === BLOCK_MODE_PARAGRAPH) {
+          visitor.linebreak();
+        }
+        if (mode !== BLOCK_MODE_PARAGRAPH) {
+          mode = BLOCK_MODE_PARAGRAPH;
+          visitor.paragraph();
+        }
+        parseLine(allRegs, lines[i]);
+      }
     }
-  });
+  };
+};
+export const parseMarkdown = (md, visitor) => {
+  const parseBlock = createBlockParser(visitor);
+  for (const block of md.trim().split(regParagraph)) {
+    parseBlock(block.trim().split(regLinebreak));
+  }
+  return visitor.end();
 };