Refactor the entire implementation of the ch-action-group-render components and ch-dropdown-render and rename the dropdown component to action-menu (#477)

* Backup dropdown refactoring

* Partial refactor ch-dropdown-render's implementation

 - Added support for Shadow DOM.

 - Reduced the memory consumption.

 - Implemented event delegation.

 - Fixed performance issues.

* Backup refactoring for ch-dropdown-render

* Fix issue provoked by refactoring

* Add support to close the dropdown on escape key

* Disable action button with disable property

* Update models.ts

* Add support for keyboard actions

* Use button-reset mixin

* Add comments

* Remove old styles

* Remove WA as the ch-popover is no longer rendered if the item is not expanded

* Add support to render slots and separator

* Update showcase

* Improve keyboard navigation

* Add support for buttonClick and hyperlinkClick events

* Update dropdown.showcase.tsx

* Update models.ts

* Rename values for the itemsOverflowBehavior prop

* Backup refactoring

* Backup refactoring

* Add a Symbol for adding metadata to UI models

* Simplify dropdown implementation by the Symbol

* Backup action-group new implementation

* Use utility function

* Fix dropdown not working with undefined model

* Improve action-group implementation

* Update showcase

* Add missing commit

* Add support for getImagePathCallback and registerProperty

* Add parts for the separator

* Update showcase

* Improve default styles

* Split bundles

* Rename "dropdown" to "action-menu"

* Optimize bundles

* Improve action-group responsiveness

* Improve accessibility

* Rename custom vars

* Update showcase

* Export React wrapper for the action-menu-render component

* Update showcase-flexible-layout.css

* Update readmes

* Remove ch-action-group-item and ch-action-group components

* Improve docs

* Fix breaking changes

* Remove unnecessary overflow: hidden

* Update showcase-flexible-layout.css

* Improve action-menu showcase

* Improve default value

* Add basic unit tests

* Update readmes

* Rename "part" member to "parts"

* Remove commented code

Author: ncamera

src/common/reserved-names.ts

@@ -1,5 +1,15 @@
 import { ImageRender } from "./types";
 
+/**
+ * This Symbol allow us to add metadata to UI models, without making it
+ * available to the UI model host.
+ *
+ * Additionally, object entries that are Symbols are not serialize
+ * (JSON.stringify), which is perfect for further hiding even more this
+ * metadata that must be internal to each component's implementation.
+ */
+export const MODEL_METADATA = Symbol("metadata");
+
 const joinParts = (parts: { [key in string]: string }) =>
   Object.values(parts).join(",");
 
@@ -115,6 +125,23 @@ export const ACCORDION_EXPORT_PARTS = joinParts(ACCORDION_PARTS_DICTIONARY);
 // - - - - - - - - - - - - - - - - - - - -
 //           Action Group Parts
 // - - - - - - - - - - - - - - - - - - - -
+export const ACTION_GROUP_PARTS_DICTIONARY = {
+  ACTIONS: "actions",
+  MORE_ACTIONS: "more-actions",
+  MORE_ACTIONS_BUTTON: "more-actions-button",
+  MORE_ACTIONS_WINDOW: "more-actions-window",
+
+  // - - - - - - - - States - - - - - - - -
+  VERTICAL: "vertical" // SEPARATOR (comes from dropdown dictionary)
+} as const;
+
+export const ACTION_GROUP_EXPORT_PARTS = joinParts(
+  ACTION_GROUP_PARTS_DICTIONARY
+);
+
+// - - - - - - - - - - - - - - - - - - - -
+//            Action List Parts
+// - - - - - - - - - - - - - - - - - - - -
 export const ACTION_LIST_ITEM_PARTS_DICTIONARY = {
   ACTION: "item__action",
   ADDITIONAL_ITEM: "item__additional-item",
@@ -216,18 +243,32 @@ export const ACTION_LIST_EXPORT_PARTS = joinParts(
 );
 
 // - - - - - - - - - - - - - - - - - - - -
-//           Action Group Parts
+//            Action Menu Parts
 // - - - - - - - - - - - - - - - - - - - -
-export const ACTION_GROUP_PARTS_DICTIONARY = {
-  ACTIONS: "actions",
-  MORE_ACTIONS: "more-actions",
-  MORE_ACTIONS_BUTTON: "more-actions-button",
-  MORE_ACTIONS_WINDOW: "more-actions-window"
+export const ACTION_MENU_ITEM_PARTS_DICTIONARY = {
+  CONTENT: "content",
+  SHORTCUT: "shortcut",
+  ACTION: "action",
+  BUTTON: "button",
+  LINK: "link",
+  WINDOW: "window",
+  SEPARATOR: "separator",
+
+  // - - - - - - - - States - - - - - - - -
+  EXPANDABLE: "expandable", // ACTION
+  EXPANDED: "expanded", // ACTION
+  COLLAPSED: "collapsed", // ACTION
+  DISABLED: "disabled" // ACTION
 } as const;
 
-export const ACTION_GROUP_EXPORT_PARTS = joinParts(
-  ACTION_GROUP_PARTS_DICTIONARY
+export const ACTION_MENU_PARTS_DICTIONARY = {
+  EXPANDABLE_BUTTON: "expandable-button"
+};
+
+export const ACTION_MENU_ITEM_EXPORT_PARTS = joinParts(
+  ACTION_MENU_ITEM_PARTS_DICTIONARY
 );
+export const ACTION_MENU_EXPORT_PARTS = joinParts(ACTION_MENU_PARTS_DICTIONARY);
 
 // - - - - - - - - - - - - - - - - - - - -
 //             Combo Box Parts
@@ -266,22 +307,6 @@ export const EDIT_HOST_PARTS = {
   EMPTY_VALUE: "ch-edit--empty-value"
 } as const;
 
-// - - - - - - - - - - - - - - - - - - - -
-//             Dropdown Parts
-// - - - - - - - - - - - - - - - - - - - -
-export const DROPDOWN_PARTS_DICTIONARY = {
-  CONTENT: "content",
-  SHORTCUT: "shortcut",
-  ACTION: "action",
-  BUTTON: "button",
-  LINK: "link",
-  EXPANDABLE_BUTTON: "expandable-button",
-  EXPANDABLE: "expandable",
-  WINDOW: "window"
-} as const;
-
-export const DROPDOWN_EXPORT_PARTS = joinParts(DROPDOWN_PARTS_DICTIONARY);
-
 // - - - - - - - - - - - - - - - - - - - -
 //          Flexible Layout Parts
 // - - - - - - - - - - - - - - - - - - - -

src/common/types.ts

@@ -36,6 +36,9 @@ export type GxImageMultiState = {
   disabled?: string;
 };
 
+export type GxImageMultiStateByDirection<T extends "start" | "end"> =
+  T extends "start" ? GxImageMultiStateStart : GxImageMultiStateEnd;
+
 export type GxImageMultiStateStart = {
   classes: string;
   styles: GxImageMultiStateStartStyles;
@@ -149,6 +152,7 @@ export type ChameleonImagePathCallbackControlsTagName = Extract<
   ChameleonControlsTagName,
   | "ch-accordion-render"
   | "ch-action-list-render"
+  | "ch-action-menu-render"
   | "ch-checkbox"
   | "ch-combo-box-render"
   | "ch-edit"

src/components/action-group/action-group-render.scss

@@ -1,17 +1,43 @@
-ch-action-group-render {
-  display: contents;
-}
+@import "../../common/_base";
+
+@include box-sizing();
 
-.ch-dropdown-separator {
+:host {
   display: grid;
-  block-size: 1px;
-  background-color: color-mix(in srgb, currentColor 25%, transparent);
-  pointer-events: none;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  align-items: center;
+}
+
+:host([items-overflow-behavior="add-scroll"]) {
+  overflow-x: auto;
+}
+
+:host([items-overflow-behavior="multiline"]) {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+:host([items-overflow-behavior="responsive-collapse"]) {
+  contain: inline-size;
 }
 
-.ch-action-group-separator--vertical {
+hr {
   display: grid;
+  align-self: stretch;
   inline-size: 1px;
+  margin: 0;
   background-color: color-mix(in srgb, currentColor 25%, transparent);
+  border: unset;
   pointer-events: none;
 }
+
+.marker {
+  display: grid;
+  align-items: center;
+  align-self: stretch;
+
+  &--hidden {
+    visibility: hidden;
+  }
+}