Merge branch 'main' into fix/mark-lit-as-external

Author: ncamera

.prettierignore

@@ -1,2 +1,3 @@
 components.d.ts
-renders.lit.ts
+renders.lit.ts
+structure.lit.ts

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/chameleon-controls-library",
-  "version": "6.21.0",
+  "version": "6.22.1",
   "description": "chameleon - A library of white-label, highly-customizable and reusable web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package.json

@@ -1,18 +1,37 @@
 import {
   Component,
   Element,
+  Event,
+  EventEmitter,
   Host,
-  h,
+  Listen,
+  Method,
+  // EventEmitter
   Prop,
   State,
-  Listen,
   Watch,
   forceUpdate,
-  Event,
-  EventEmitter,
-  Method
-  // EventEmitter
+  h
 } from "@stencil/core";
+import { removeElement } from "../../common/array";
+import { SCROLLABLE_CLASS } from "../../common/reserved-names";
+import { adoptCommonThemes } from "../../common/theme";
+import {
+  ActionListTranslations,
+  ChActionListItemCustomEvent
+} from "../../components";
+import { mouseEventModifierKey } from "../common/helpers";
+import { flattenActionListUIModel } from "./flatten-model";
+import {
+  ActionListCaptionChangeEventDetail,
+  ActionListFixedChangeEventDetail
+} from "./internal/action-list-item/types";
+import { actionListKeyboardNavigation } from "./keyboard-navigation";
+import {
+  selectedItemsChangeShouldBeEmitted,
+  setActionListSelectedItems
+} from "./selections";
+import { actionListDefaultTranslations } from "./translations";
 import {
   ActionListImagePathCallback,
   ActionListItemActionable,
@@ -25,32 +44,13 @@ import {
   ActionListItemType,
   ActionListModel
 } from "./types";
-import {
-  ActionListTranslations,
-  ChActionListItemCustomEvent
-} from "../../components";
-import {
-  ActionListCaptionChangeEventDetail,
-  ActionListFixedChangeEventDetail
-} from "./internal/action-list-item/types";
-import { mouseEventModifierKey } from "../common/helpers";
-import { removeElement } from "../../common/array";
-import { SCROLLABLE_CLASS } from "../../common/reserved-names";
-import { adoptCommonThemes } from "../../common/theme";
-import { actionListKeyboardNavigation } from "./keyboard-navigation";
+import { updateItemProperty } from "./update-item-property";
 import {
   ACTION_LIST_ITEM_TAG,
   getActionListItemOrGroupInfo,
   getActionListOrGroupItemFromEvent,
   getParentArray
 } from "./utils";
-import { updateItemProperty } from "./update-item-property";
-import { actionListDefaultTranslations } from "./translations";
-import {
-  selectedItemsChangeShouldBeEmitted,
-  setActionListSelectedItems
-} from "./selections";
-import { flattenActionListUIModel } from "./flatten-model";
 
 const DEFAULT_EDITABLE_ITEMS_VALUE = true;
 // const DEFAULT_ORDER_VALUE = 0;
@@ -209,12 +209,6 @@ export class ChActionListRender {
 
   @State() expanded: boolean = true;
 
-  /**
-   * This property lets you specify if the tree is waiting to process the drop
-   * of items.
-   */
-  @State() waitDropProcessing = false;
-
   /**
    * Set this attribute if you want display a checkbox in all items by default.
    */
@@ -355,7 +349,7 @@ export class ChActionListRender {
   ) => Promise<void>;
 
   /**
-   * This property allows us to implement custom rendering of tree items.
+   * This property allows us to implement custom rendering of action-list items.
    */
   @Prop() readonly renderItem: (
     itemModel: ActionListItemModel,
@@ -384,7 +378,7 @@ export class ChActionListRender {
   }
 
   /**
-   * Callback that is executed when the treeModel is changed to order its items.
+   * Callback that is executed when the action-list model is changed to order its items.
    */
   @Prop() readonly sortItemsCallback: (subModel: ActionListModel) => void =
     defaultSortItemsCallback;

src/components/action-list/action-list-render.tsx

@@ -20,9 +20,9 @@
 | `model`                     | --               | This property lets you define the model of the control.                                                                                                                                | `ActionListItemModel[]`                                                                                                                                | `[]`                            |
 | `modifyItemCaptionCallback` | --               | Callback that is executed when a item request to modify its caption.                                                                                                                   | `(actionListItemId: string, newCaption: string) => Promise<void>`                                                                                      | `undefined`                     |
 | `removeItemCallback`        | --               | Callback that is executed when and item requests to be removed. If the callback is not defined, the item will be removed without further confirmation.                                 | `(itemInfo: ActionListItemActionable) => Promise<boolean>`                                                                                             | `undefined`                     |
-| `renderItem`                | --               | This property allows us to implement custom rendering of tree items.                                                                                                                   | `(itemModel: ActionListItemModel, actionListRenderState: ChActionListRender, disabled?: boolean, nested?: boolean, nestedExpandable?: boolean) => any` | `defaultRenderItem`             |
+| `renderItem`                | --               | This property allows us to implement custom rendering of action-list items.                                                                                                            | `(itemModel: ActionListItemModel, actionListRenderState: ChActionListRender, disabled?: boolean, nested?: boolean, nestedExpandable?: boolean) => any` | `defaultRenderItem`             |
 | `selection`                 | `selection`      | Specifies the type of selection implemented by the control.                                                                                                                            | `"multiple" \| "none" \| "single"`                                                                                                                     | `"none"`                        |
-| `sortItemsCallback`         | --               | Callback that is executed when the treeModel is changed to order its items.                                                                                                            | `(subModel: ActionListModel) => void`                                                                                                                  | `defaultSortItemsCallback`      |
+| `sortItemsCallback`         | --               | Callback that is executed when the action-list model is changed to order its items.                                                                                                    | `(subModel: ActionListModel) => void`                                                                                                                  | `defaultSortItemsCallback`      |
 | `translations`              | --               | Specifies the literals required for the control.                                                                                                                                       | `{ confirmDelete: string; cancelDelete: string; confirmModify: string; cancelModify: string; }`                                                        | `actionListDefaultTranslations` |
 
 

src/components/action-list/readme.md

@@ -1,5 +1,4 @@
 import { html, nothing } from "lit";
-import { when } from "lit/directives/when.js";
 import { getMimeTypeFileFormat } from "../../../../common/mimeTypes/mime-types-utils";
 import { ArgumentTypes } from "../../../../common/types";
 import { tokenMap } from "../../../../common/utils";
@@ -38,65 +37,62 @@ export const defaultMessageStructureRender: ChatMessageStructureRender = (
   const { files, sources } = getMessageFilesAndSources(message);
   const { sourceFiles } = chatRef.translations.text;
 
-  return html`<div
-    part=${tokenMap({
-      [`content-container ${message.role} ${message.id}`]: true,
-      [assistantStatus]: !!assistantStatus,
-      [message.parts]: !!message.parts
-    })}
-  >
-    ${renders.contentBefore
-      ? renders.contentBefore(message, chatRef, renders.codeBlock)
-      : nothing}
-    ${renders.content(message, chatRef, renders.codeBlock)}
-    ${renders.contentAfter
-      ? renders.contentAfter(message, chatRef, renders.codeBlock)
-      : nothing}
-    ${
-      // Files
-      when(
-        files.length !== 0,
-        () => html`<ul
+  const contentBefore = renders.contentBefore
+    ? renders.contentBefore(message, chatRef, renders.codeBlock)
+    : nothing;
+
+  const content = renders.content(message, chatRef, renders.codeBlock);
+
+  const contentAfter = renders.contentAfter
+    ? renders.contentAfter(message, chatRef, renders.codeBlock)
+    : nothing;
+
+  const filesRender =
+    files.length !== 0
+      ? html`<ul
           class="files-container"
           part=${tokenMap({
             [`files-container ${message.role} ${message.id}`]: true,
             [assistantStatus]: !!assistantStatus,
             [message.parts]: !!message.parts
           })}
-        >
-          ${files.map(file => applyFileRenders(file, chatRef, renders.file))}
-        </ul>`
-      )
-    }
-    ${
-      // Sources
-      when(
-        sources.length !== 0,
-        () => html`<ul
+        >${files.map(file => applyFileRenders(file, chatRef, renders.file))}</ul>`
+      : nothing;
+
+  const sourcesCaption = sourceFiles
+    ? // TODO: Test the accessibility of this span
+      html`<span
+        part=${tokenMap({
+          [`sources-caption ${message.role} ${message.id}`]: true,
+          [assistantStatus]: !!assistantStatus,
+          [message.parts]: !!message.parts
+        })}
+        >${sourceFiles}</span
+      >`
+    : nothing;
+
+  const sourcesRender =
+    sources.length !== 0
+      ? html`<ul
           class="sources-container"
           part=${tokenMap({
             [`sources-container ${message.role} ${message.id}`]: true,
             [assistantStatus]: !!assistantStatus,
             [message.parts]: !!message.parts
           })}
-        >
-          ${when(
-            sourceFiles,
-            // TODO: Test the accessibility of this span
-            () => html`<span
-              part=${tokenMap({
-                [`sources-caption ${message.role} ${message.id}`]: true,
-                [assistantStatus]: !!assistantStatus,
-                [message.parts]: !!message.parts
-              })}
-            >
-              ${sourceFiles}
-            </span>`
-          )}
-          ${sources.map(source => renders.source(source, chatRef))}
-        </ul>`
-      )
-    }
-    ${renders.actions(message, chatRef)}
-  </div>`;
+        >${sourcesCaption}${sources.map(source =>
+            renders.source(source, chatRef)
+          )}</ul>`
+      : nothing;
+
+  return html`<div
+    part=${tokenMap({
+      [`content-container ${message.role} ${message.id}`]: true,
+      [assistantStatus]: !!assistantStatus,
+      [message.parts]: !!message.parts
+    })}
+  >${contentBefore}${content}${contentAfter}${filesRender}${sourcesRender}${renders.actions(
+      message,
+      chatRef
+    )}</div>`;
 };

src/components/chat/internal/renders/structure.lit.ts

@@ -89,6 +89,20 @@
    */
   --ch-combo-box__placeholder-color: currentColor;
 
+  /**
+   * @prop --ch-combo-box__popover-max-block-size:
+   * Specifies the maximum block size of the popover. Only px values are supported.
+   * @default auto
+   */
+  --ch-combo-box__popover-max-block-size: auto;
+
+  /**
+   * @prop --ch-combo-box__popover-max-inline-size:
+   * Specifies the maximum inline size of the popover. Only px values are supported.
+   * @default auto
+   */
+  --ch-combo-box__popover-max-inline-size: auto;
+
   /**
    * @prop --ch-combo-box-item-gap:
    * Specifies the spacing between the images, text and the expandable button
@@ -209,6 +223,9 @@ select {
 //           Separation
 // - - - - - - - - - - - - - - - -
 ch-popover {
+  // TODO: Add e2e tests for these assignments
+  --ch-popover-max-inline-size: var(--ch-combo-box__popover-max-inline-size);
+  --ch-popover-max-block-size: var(--ch-combo-box__popover-max-block-size);
   --ch-popover-separation-x: var(--ch-combo-box-separation-x);
   --ch-popover-separation-y: var(--ch-combo-box-separation-y);
 

src/components/combo-box/combo-box.scss

@@ -59,6 +59,8 @@
 | `--ch-combo-box__picker-mask-size`                   | Specifies the image size of the combo-box's picker. @default 100%                                                                                                                                                                                                                                           |
 | `--ch-combo-box__picker-size`                        | Specifies the box size that contains the combo-box's picker. @default 0.875em                                                                                                                                                                                                                               |
 | `--ch-combo-box__placeholder-color`                  | Define the placeholder color when the combo-box does not have a value set. (currentColor by default)                                                                                                                                                                                                        |
+| `--ch-combo-box__popover-max-block-size`             | Specifies the maximum block size of the popover. Only px values are supported. @default auto                                                                                                                                                                                                                |
+| `--ch-combo-box__popover-max-inline-size`            | Specifies the maximum inline size of the popover. Only px values are supported. @default auto                                                                                                                                                                                                               |
 
 
 ## Dependencies

src/components/combo-box/readme.md

@@ -14,6 +14,12 @@ export const LAST_NESTED_CHILD_CLASS = "last-nested-child";
 const findLastNestedChild = (elementWithChildren: MdAstParent | Root) => {
   const lastChild = elementWithChildren.children.at(-1);
 
+  // When rendering special values like "\n\n" or "\r\n", the root has no
+  // children
+  if (lastChild === undefined) {
+    return elementWithChildren;
+  }
+
   // The last element have children. We must check its sub children
   if ((lastChild as MdAstParent).children?.length > 0) {
     return findLastNestedChild(lastChild as MdAstParent);

src/components/markdown-viewer/parsers/markdown-to-template-result.lit.ts

@@ -184,9 +184,12 @@ describe("[ch-markdown-viewer][value]", () => {
   const testValueRender = (
     value: string,
     render: string,
-    description: string
+    description: string,
+    valueDescription?: string | undefined
   ) => {
-    it(`should render ${description} when the "value" property is "${value}"`, async () => {
+    it(`should render ${description} when the "value" property is "${
+      valueDescription ?? value
+    }"`, async () => {
       markdownViewerRef.setProperty("value", value);
       await page.waitForChanges();
       markdownViewerRef = await page.find("ch-markdown-viewer"); // Refresh the reference
@@ -215,6 +218,39 @@ describe("[ch-markdown-viewer][value]", () => {
     "the paragraph without the bold because it ends with a dot"
   );
 
+  /**
+   * These test cases validate that the root doesn't throw when trying to
+   * render empty children, using an actual value with special characters.
+   */
+  const testThrowEmptyChildren = (description: string, value: string) =>
+    it(`should not throw when the value ("${description}") is defined but the root has empty children`, async () => {
+      markdownViewerRef.setProperty("value", value);
+      await page.waitForChanges();
+      markdownViewerRef = await page.find("ch-markdown-viewer"); // Refresh the reference
+    });
+
+  testThrowEmptyChildren("\\n\\n", "\n\n");
+  testThrowEmptyChildren("\\r\\n", "\r\n");
+  testThrowEmptyChildren("\\r\\r", "\r\r");
+  testThrowEmptyChildren("%0A%0A", "%0A%0A");
+  testThrowEmptyChildren("- \\n\\n", "- \n\n");
+  testThrowEmptyChildren("> \\n\\n", "> \n\n");
+  testThrowEmptyChildren("- \\r\\n", "- \r\n");
+  testThrowEmptyChildren("> \\r\\n", "> \r\n");
+  testThrowEmptyChildren("- \\r\\r", "- \r\r");
+  testThrowEmptyChildren("> \\r\\r", "> \r\r");
+  testThrowEmptyChildren("- %0A%0A", "- %0A%0A");
+  testThrowEmptyChildren("> %0A%0A", "> %0A%0A");
+
+  testValueRender("\n\n", "", "nothing", "\\n\\n");
+  testValueRender("\r\n", "", "nothing", "\\r\\n");
+  testValueRender(
+    "%0A%0A",
+    `<p${LAST_NESTED_CHILD_CLASS}>%0A%0A</p>`,
+    "%0A%0A"
+  );
+
+  // TODO: Add the previous e2e test for validating the crash in the ch-code
   // TODO: Add unit test for updating the value at runtime
   // TODO: Add unit test for checking that the DOM is reused
   // TODO: Add unit test for checking the ch-code value bindings