colibri-ui 0.8.44 → 0.8.45

package/Menu/components/MenuItem/MenuItem.module.css

@@ -16,6 +16,9 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+.item_selected {
+  background-color: var(--palette-bg-2, rgb(232, 240, 254));
+}
 .item_variant_primary {
   background-color: var(--palette-white);
 }

package/Menu/components/MenuItem/index.js

@@ -27,24 +27,26 @@ var MenuItem = function MenuItem(_a) {
     onMouseEnter = _a.onMouseEnter,
     ref = _a.ref,
     props = tslib.__rest(_a, ["className", "isSelected", "variant", "disabled", "onClick", "children", "onMouseEnter", "ref"]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React__default.default.createElement("li", Object.assign({
-      ref: ref,
-      style: {
-        backgroundColor: isSelected ? "var(--palette-bg-2, rgb(232, 240, 254))" : ""
-      },
-      "aria-label": "MenuItem",
-      "data-testid": "menuitem",
-      "aria-disabled": disabled,
-      className: clx("item", _defineProperty__default.default({
-        item_disabled: !!disabled
-      }, "item_variant_".concat(variant), !!variant), className),
-      onClick: !disabled ? onClick : undefined,
-      onMouseEnter: onMouseEnter
-    }, props), children)
-  );
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  };
+  return /*#__PURE__*/React__default.default.createElement("li", Object.assign({
+    ref: ref,
+    role: "menuitem",
+    tabIndex: disabled ? -1 : 0,
+    "data-testid": "menuitem",
+    "aria-disabled": disabled || undefined,
+    className: clx("item", _defineProperty__default.default({
+      item_disabled: disabled,
+      item_selected: isSelected
+    }, "item_variant_".concat(variant), true), className),
+    onClick: !disabled ? onClick : undefined,
+    onKeyDown: handleKeyDown,
+    onMouseEnter: onMouseEnter
+  }, props), children);
 };
 
 exports.default = MenuItem;

package/Menu/components/MenuItem/index.props.d.ts

@@ -1,9 +1,9 @@
-import type { MouseEvent } from "react";
+import type { KeyboardEvent, MouseEvent } from "react";
 import type { MenuVariant } from "../../index.props";
 export interface MenuItemProps {
     className?: string;
     isSelected?: boolean;
-    onClick?: (e: MouseEvent) => void;
+    onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
     variant?: MenuVariant;
     disabled?: boolean;
     ref?: React.Ref<HTMLLIElement>;

package/Menu/index.js

@@ -22,26 +22,25 @@ var Menu = function Menu(_ref) {
     ref = _ref.ref;
   var renderChild = React.useMemo(function () {
     return React.Children.map(children, function (child) {
-      if (/*#__PURE__*/React.isValidElement(child)) {
-        var isSelected = selected ? selected.includes(String(child.key)) : undefined;
-        var onClickHandler = function onClickHandler(event) {
-          if (child.props.onClick) child.props.onClick(event);
-          if (onClick && child.key) onClick(child.key.toString(), event);
-        };
-        return /*#__PURE__*/React.cloneElement(child, {
-          isSelected: isSelected,
-          onClick: onClickHandler,
-          variant: variant
-        });
-      }
-      return child;
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      var childKey = child.key ? String(child.key) : null;
+      var isSelected = selected && childKey ? selected.includes(childKey) : undefined;
+      var onClickHandler = function onClickHandler(event) {
+        var _a, _b;
+        (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        if (onClick && childKey) onClick(childKey, event);
+      };
+      return /*#__PURE__*/React.cloneElement(child, {
+        isSelected: isSelected,
+        onClick: onClickHandler,
+        variant: variant
+      });
     });
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [children, selected, onClick]);
+  }, [children, selected, onClick, variant]);
   return /*#__PURE__*/React__default.default.createElement("ul", {
     ref: ref,
-    className: clx(styles__default.default.menu, className)
+    className: clx('menu', className),
+    role: "menu"
   }, renderChild);
 };
 

package/Menu/index.props.d.ts

@@ -1,11 +1,11 @@
-import type { ReactElement, MouseEvent } from "react";
+import type { ReactElement, KeyboardEvent, MouseEvent } from "react";
 import type { MenuItemProps } from "./components/MenuItem/index.props";
 export type MenuVariant = "primary";
 export type Props = {
     selected?: string[];
     variant?: MenuVariant;
     className?: string;
-    onClick?: (key: string, e: MouseEvent) => void;
+    onClick?: (key: string, e: MouseEvent | KeyboardEvent) => void;
     children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];
     ref?: React.Ref<HTMLUListElement>;
 };

package/esm/Menu/components/MenuItem/MenuItem.module.css

@@ -16,6 +16,9 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+.item_selected {
+  background-color: var(--palette-bg-2, rgb(232, 240, 254));
+}
 .item_variant_primary {
   background-color: var(--palette-white);
 }

package/esm/Menu/components/MenuItem/index.js

@@ -16,24 +16,26 @@ var MenuItem = function MenuItem(_a) {
     onMouseEnter = _a.onMouseEnter,
     ref = _a.ref,
     props = __rest(_a, ["className", "isSelected", "variant", "disabled", "onClick", "children", "onMouseEnter", "ref"]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React__default.createElement("li", Object.assign({
-      ref: ref,
-      style: {
-        backgroundColor: isSelected ? "var(--palette-bg-2, rgb(232, 240, 254))" : ""
-      },
-      "aria-label": "MenuItem",
-      "data-testid": "menuitem",
-      "aria-disabled": disabled,
-      className: clx("item", _defineProperty({
-        item_disabled: !!disabled
-      }, "item_variant_".concat(variant), !!variant), className),
-      onClick: !disabled ? onClick : undefined,
-      onMouseEnter: onMouseEnter
-    }, props), children)
-  );
+  var handleKeyDown = function handleKeyDown(event) {
+    if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({
+    ref: ref,
+    role: "menuitem",
+    tabIndex: disabled ? -1 : 0,
+    "data-testid": "menuitem",
+    "aria-disabled": disabled || undefined,
+    className: clx("item", _defineProperty({
+      item_disabled: disabled,
+      item_selected: isSelected
+    }, "item_variant_".concat(variant), true), className),
+    onClick: !disabled ? onClick : undefined,
+    onKeyDown: handleKeyDown,
+    onMouseEnter: onMouseEnter
+  }, props), children);
 };
 
 export { MenuItem as default };

package/esm/Menu/components/MenuItem/index.props.d.ts

@@ -1,9 +1,9 @@
-import type { MouseEvent } from "react";
+import type { KeyboardEvent, MouseEvent } from "react";
 import type { MenuVariant } from "../../index.props";
 export interface MenuItemProps {
     className?: string;
     isSelected?: boolean;
-    onClick?: (e: MouseEvent) => void;
+    onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
     variant?: MenuVariant;
     disabled?: boolean;
     ref?: React.Ref<HTMLLIElement>;

package/esm/Menu/index.js

@@ -12,26 +12,25 @@ var Menu = function Menu(_ref) {
     ref = _ref.ref;
   var renderChild = useMemo(function () {
     return Children.map(children, function (child) {
-      if (/*#__PURE__*/isValidElement(child)) {
-        var isSelected = selected ? selected.includes(String(child.key)) : undefined;
-        var onClickHandler = function onClickHandler(event) {
-          if (child.props.onClick) child.props.onClick(event);
-          if (onClick && child.key) onClick(child.key.toString(), event);
-        };
-        return /*#__PURE__*/cloneElement(child, {
-          isSelected: isSelected,
-          onClick: onClickHandler,
-          variant: variant
-        });
-      }
-      return child;
+      if (! /*#__PURE__*/isValidElement(child)) return child;
+      var childKey = child.key ? String(child.key) : null;
+      var isSelected = selected && childKey ? selected.includes(childKey) : undefined;
+      var onClickHandler = function onClickHandler(event) {
+        var _a, _b;
+        (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        if (onClick && childKey) onClick(childKey, event);
+      };
+      return /*#__PURE__*/cloneElement(child, {
+        isSelected: isSelected,
+        onClick: onClickHandler,
+        variant: variant
+      });
     });
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [children, selected, onClick]);
+  }, [children, selected, onClick, variant]);
   return /*#__PURE__*/React__default.createElement("ul", {
     ref: ref,
-    className: clx(styles.menu, className)
+    className: clx('menu', className),
+    role: "menu"
   }, renderChild);
 };
 

package/esm/Menu/index.props.d.ts

@@ -1,11 +1,11 @@
-import type { ReactElement, MouseEvent } from "react";
+import type { ReactElement, KeyboardEvent, MouseEvent } from "react";
 import type { MenuItemProps } from "./components/MenuItem/index.props";
 export type MenuVariant = "primary";
 export type Props = {
     selected?: string[];
     variant?: MenuVariant;
     className?: string;
-    onClick?: (key: string, e: MouseEvent) => void;
+    onClick?: (key: string, e: MouseEvent | KeyboardEvent) => void;
     children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];
     ref?: React.Ref<HTMLUListElement>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.44",
+  "version": "0.8.45",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",