Menu : deprecate props.mode / always support full capabilities + icons

packages/icons-react/examples/storybook/yarn.lock

@@ -6970,9 +6970,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-<<<<<<< HEAD
 "lodash@npm:^4.17.11, lodash@npm:^4.17.19":
-=======
 "lodash@npm:^4.17.11":
   version: 4.17.11
   resolution: "lodash@npm:4.17.11"
@@ -6981,7 +6979,6 @@ fsevents@^1.2.7:
   linkType: hard
 
 "lodash@npm:^4.17.19":
->>>>>>> main
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7

packages/web-components/package.json

@@ -66,6 +66,7 @@
     "@carbon/styles": "^1.75.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.5.0",
+    "@lit/context": "^1.1.1",
     "flatpickr": "4.6.13",
     "lit": "^3.1.0",
     "lodash-es": "^4.17.21",

packages/web-components/src/components/menu/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './menu';
+import './menu-item';
+import './menu-item-divider';
+import './menu-item-group';
+import './menu-item-selectable';
+import './menu-item-radio-group';

packages/web-components/src/components/menu/menu-context.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { createContext } from '@lit/context';
+export type StateType = {
+  isRoot: boolean;
+  hasIcons: boolean;
+  hasSelectableItems: boolean;
+  size: 'xs' | 'sm' | 'md' | 'lg' | null;
+  items: any[];
+  requestCloseRoot: (e: KeyboardEvent) => void;
+};
+
+export const menuDefaultState: StateType = {
+  isRoot: true,
+  hasIcons: true,
+  hasSelectableItems: false,
+  size: null,
+  items: [],
+  requestCloseRoot: () => {},
+};
+
+export const MenuContext = createContext<StateType>('myData');

packages/web-components/src/components/menu/menu-item-divider.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
+import styles from './menu-item.scss?lit';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+/**
+ * Menu Item.
+ *
+ * @element cds-menu-item-divider
+ */
+@customElement(`${prefix}-menu-item-divider`)
+class CDSmenuItemDivider extends LitElement {
+  render() {
+    return html`
+      <li class="${prefix}--menu-item-divider" role="separator"></li>
+    `;
+  }
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+}
+export default CDSmenuItemDivider;

packages/web-components/src/components/menu/menu-item-group.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './menu-item.scss?lit';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+/**
+ * Menu Item.
+ *
+ * @element cds-menu-item-group
+ */
+@customElement(`${prefix}-menu-item-group`)
+class CDSmenuItemGroup extends LitElement {
+  /**
+   * Label for the menu item.
+   */
+  @property({ type: String })
+  label;
+
+  render() {
+    const { label } = this;
+    return html`
+      <li class="${prefix}--menu-item-group" role="none">
+        <ul role="group" aria-label="${label}">
+          <slot></slot>
+        </ul>
+      </li>
+    `;
+  }
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+}
+export default CDSmenuItemGroup;

packages/web-components/src/components/menu/menu-item-radio-group.ts

@@ -0,0 +1,97 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './menu-item.scss?lit';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import { ChangeEventHandler } from 'react';
+import { consume } from '@lit/context';
+import { MenuContext } from './menu-context';
+
+/**
+ * Menu Item.
+ *
+ * @element cds-menu-item-radio-group
+ */
+@customElement(`${prefix}-menu-item-radio-group`)
+class CDSmenuItemRadioGroup extends LitElement {
+  // @provide({ context: MenuContext })
+  @consume({ context: MenuContext })
+  context;
+
+  /**
+   * Label for the menu item radio group.
+   */
+  @property({ type: String })
+  label;
+  /**
+   * List of items in the radio group.
+   */
+  @property({ type: Array })
+  items = [];
+
+  /**
+   * Selected item in the radio group.
+   */
+  @property({ type: String, attribute: true })
+  selectedItem;
+
+  /**
+   * List of items in the radio group.
+   */
+  @property()
+  itemToString?: (item: Array<String | number>) => String;
+  /**
+   * Provide an optional function to be called when the selection state changes.
+   */
+  @property()
+  onChange?: ChangeEventHandler;
+
+  firstUpdated(): void {
+    this.context.updateFromChild?.({ hasSelectableItems: true });
+  }
+
+  _handleClick = (item, e) => {
+    this.selectedItem = item;
+    if (this.onChange) {
+      this.onChange(e);
+    }
+  };
+  render() {
+    const defaultItemToString = (item) => item.toString();
+    const {
+      label,
+      items,
+      itemToString = defaultItemToString,
+      selectedItem,
+      _handleClick: handleClick,
+    } = this;
+    return html`
+      <li class="${prefix}--menu-item-radio-group" role="none">
+        <ul role="group" aria-label="${label}">
+          ${items.map(
+            (item) => html`
+              <cds-menu-item
+                label="${itemToString(item)}"
+                role="menuitemradio"
+                aria-checked="${item === selectedItem}"
+                .onClick="${(e) => {
+                  handleClick(item, e);
+                }}"></cds-menu-item>
+            `
+          )}
+        </ul>
+      </li>
+    `;
+  }
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+}
+export default CDSmenuItemRadioGroup;

packages/web-components/src/components/menu/menu-item-selectable.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './menu-item.scss?lit';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import { consume } from '@lit/context';
+import { MenuContext } from './menu-context';
+/**
+ * Menu Item.
+ *
+ * @element cds-menu-item
+ */
+@customElement(`${prefix}-menu-item-selectable`)
+class CDSmenuItemSelectable extends LitElement {
+  @consume({ context: MenuContext })
+  context;
+  /**
+   * Label for the menu item selectable.
+   */
+  @property({ type: String })
+  label;
+  /**
+   * Whether the menu item is selected or not.
+   */
+  @property({ type: Boolean })
+  selected = false;
+
+  /**
+   * Provide an optional function to be called when the selection state changes.
+   */
+  onChange?;
+
+  /**
+   * Sets the menu item's icon.
+   */
+  @property()
+  renderIcon?: () => void;
+
+  _handleClick = (e) => {
+    this.selected = !this.selected;
+    if (this.onChange) {
+      this.onChange(e);
+    }
+  };
+  firstUpdated(): void {
+    this.context.updateFromChild?.({ hasSelectableItems: true });
+  }
+  render() {
+    const { label, selected, _handleClick: handleClick } = this;
+
+    return html`
+      <cds-menu-item
+        label="${label}"
+        class="${prefix}--menu-item-selectable--selected"
+        role="menuitemcheckbox"
+        aria-checked="${selected}"
+        .renderIcon=${this.renderIcon || undefined}
+        .onClick="${handleClick}"></cds-menu-item>
+    `;
+  }
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
+}
+export default CDSmenuItemSelectable;