@enact/limestone 1.3.0 → 1.9.4

package/Checkbox/tests/Checkbox-specs.js

@@ -9,7 +9,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-describe('CheckboxItem Specs', function () {
+describe('Checkbox Specs', function () {
   test('should not include the selected class when not selected', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxBase, {}));
     var checkboxElement = _react.screen.getByRole('checkbox');

package/CheckboxItem/CheckboxItem.d.ts

@@ -1,14 +1,16 @@
 // Type definitions for limestone/CheckboxItem
 
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
-import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
 import * as React from "react";
+import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
 
-export interface CheckboxItemBaseProps
-  extends Omit<limestone_Item_ItemProps, "iconComponent"> {
+export interface CheckboxItemBaseProps extends Omit<
+  limestone_Item_ItemProps,
+  "iconComponent"
+> {
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.
@@ -77,14 +79,15 @@ export class CheckboxItemBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, CheckboxItemBaseProps>
 > {}
 
-export interface CheckboxItemDecoratorProps
-  extends ui_Toggleable_ToggleableProps {}
+export interface CheckboxItemDecoratorProps extends ui_Toggleable_ToggleableProps {}
 export function CheckboxItemDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & CheckboxItemDecoratorProps>;
 
-export interface CheckboxItemProps
-  extends Merge<CheckboxItemBaseProps, CheckboxItemDecoratorProps> {}
+export interface CheckboxItemProps extends Merge<
+  CheckboxItemBaseProps,
+  CheckboxItemDecoratorProps
+> {}
 /**
  * A Limestone-styled item with a checkbox component.
  * 
@@ -96,4 +99,16 @@ export class CheckboxItem extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, CheckboxItemProps>
 > {}
 
+export interface CheckboxItemGroupProps {}
+/**
+ * A container that surrounds multiple CheckboxItems.
+ * 
+ * A list of multiple CheckboxItems wrapped with a CheckboxItemGroup component gets
+required audio guidance.
+ */
+
+export class CheckboxItemGroup extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, CheckboxItemGroupProps>
+> {}
+
 export default CheckboxItem;

package/CheckboxItem/CheckboxItem.js

@@ -3,19 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.CheckboxItemDecorator = exports.CheckboxItemBase = exports.CheckboxItem = void 0;
+exports["default"] = exports.CheckboxItemGroup = exports.CheckboxItemDecorator = exports.CheckboxItemBase = exports.CheckboxItem = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _Group = _interopRequireDefault(require("@enact/ui/Group"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
 var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
+var _IString = _interopRequireDefault(require("ilib/lib/IString"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Checkbox = require("../Checkbox");
 var _Item = require("../Item");
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _CheckboxItemModule = _interopRequireDefault(require("./CheckboxItem.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "css", "icon", "indeterminate", "indeterminateIcon", "selected", "slotBefore"];
+var _excluded = ["children", "css", "icon", "indeterminate", "indeterminateIcon", "selected", "slotBefore"],
+  _excluded2 = ["children", "groupId", "itemProps"],
+  _excluded3 = ["children"];
 /**
  * Limestone styled item components with a toggleable checkbox.
  *
@@ -207,4 +212,64 @@ var CheckboxItemDecorator = exports.CheckboxItemDecorator = (0, _compose["defaul
  * @public
  */
 var CheckboxItem = exports.CheckboxItem = (0, _Pure["default"])(CheckboxItemDecorator(CheckboxItemBase));
+
+/**
+ * A container that surrounds multiple CheckboxItems.
+ *
+ * A list of multiple CheckboxItems wrapped with a CheckboxItemGroup component gets
+ * required audio guidance.
+ *
+ * @class CheckboxItemGroup
+ * @memberof limestone/CheckboxItem
+ * @ui
+ * @public
+ */
+var _CheckboxItemGroup = exports.CheckboxItemGroup = function CheckboxItemGroup(props) {
+  var children = props.children,
+    groupId = props.groupId,
+    itemProps = props.itemProps,
+    rest = _objectWithoutProperties(props, _excluded2);
+  _CheckboxItemGroup.propTypes = {
+    groupId: _propTypes["default"].string,
+    itemProps: _propTypes["default"].object
+  };
+  if (typeof children[0] === 'string') {
+    // The case of multiple checkbox items are represented by string array instead of `CheckboxItem` components using `ui/Group`
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "region",
+      "aria-labelledby": groupId || "checkboxItemGroup",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Group["default"], _objectSpread(_objectSpread({}, rest), {}, {
+        id: groupId || "checkboxItemGroup",
+        "aria-label": new _IString["default"]((0, _$L["default"])('{total} items in total')).format({
+          'total': children.length
+        }),
+        childComponent: CheckboxItem,
+        childSelect: "onToggle",
+        itemProps: _objectSpread({}, itemProps),
+        children: children
+      }))
+    });
+  } else {
+    // The case of multiple checkbox items are represented by `CheckboxItem` components
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "region",
+      "aria-labelledby": groupId || "checkboxItemGroup",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+        role: "group",
+        id: groupId || "checkboxItemGroup",
+        "aria-label": new _IString["default"]((0, _$L["default"])('{total} items in total')).format({
+          'total': children.length
+        }),
+        children: children.map(function (child, index) {
+          var _child$props = child.props,
+            itemValue = _child$props.children,
+            childRest = _objectWithoutProperties(_child$props, _excluded3);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxItem, _objectSpread(_objectSpread(_objectSpread({}, childRest), itemProps), {}, {
+            children: itemValue
+          }), index);
+        })
+      }))
+    });
+  }
+};
 var _default = exports["default"] = CheckboxItem;

package/Chips/Chip.js

@@ -12,11 +12,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _react = require("react");
 var _Button = _interopRequireDefault(require("../Button"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Image = _interopRequireDefault(require("../Image"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _Chips = require("./Chips");
 var _ChipModule = _interopRequireDefault(require("./Chip.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "className", "deleteButton", "disabled", "icon", "id", "onClick", "ref"];
+var _excluded = ["checked", "children", "className", "deleteButton", "disabled", "icon", "id", "imageSize", "isImage", "onClick", "ref"],
+  _excluded2 = ["children"];
 /**
  * The shape of the chip delete button for {@link limestone/Chips.Chip|Chip}.
  *
@@ -42,7 +46,8 @@ var chipDeleteButtonShape = exports.chipDeleteButtonShape = _propTypes["default"
   position: _propTypes["default"].oneOf(['top', 'bottom', 'right'])
 });
 var ChipDefaultProps = {
-  disabled: false
+  disabled: false,
+  imageSize: 24
 };
 
 /**
@@ -72,17 +77,21 @@ var ChipBase = exports.ChipBase = function ChipBase(props) {
     getNextTargetFromDeleteButton = _use.getNextTargetFromDeleteButton,
     registerChild = _use.registerChild;
   var chipProps = (0, _util.setDefaultProps)(props, ChipDefaultProps);
-  var children = chipProps.children,
+  var checked = chipProps.checked,
+    children = chipProps.children,
     className = chipProps.className,
     deleteButton = chipProps.deleteButton,
     disabled = chipProps.disabled,
     icon = chipProps.icon,
     id = chipProps.id,
+    imageSize = chipProps.imageSize,
+    isImage = chipProps.isImage,
     onClick = chipProps.onClick,
     ref = chipProps.ref,
     rest = _objectWithoutProperties(chipProps, _excluded);
-  var chipClassName = (0, _classnames["default"])(className, deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.position);
+  var ariaLabel = children + ' ' + (0, _$L["default"])('Chip') + ' ' + (0, _$L["default"])('button');
   var buttonClassName = (0, _classnames["default"])(_ChipModule["default"].deleteButtonContainer, _ChipModule["default"][(deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.position) || 'right']);
+  var chipClassName = (0, _classnames["default"])(className, deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.position);
   var containerRef = (0, _react.useRef)(null);
   var clientRef = (0, _react.useRef)(null);
   var deleteButtonRef = (0, _react.useRef)(null);
@@ -160,6 +169,24 @@ var ChipBase = exports.ChipBase = function ChipBase(props) {
       deleteButton.onDelete(ev);
     }
   }, [deleteButton, handleChipDelete, id]);
+  var iconComponent = (0, _react.useCallback)(function (_ref) {
+    var childComponent = _ref.children,
+      iconProps = _objectWithoutProperties(_ref, _excluded2);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [checked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], _objectSpread(_objectSpread({}, iconProps), {}, {
+        children: "checkmark"
+      })), isImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], _objectSpread(_objectSpread({}, iconProps), {}, {
+        src: childComponent,
+        style: {
+          borderRadius: '999px',
+          width: "".concat(imageSize, "px"),
+          height: "".concat(imageSize, "px")
+        }
+      })), !isImage && childComponent && childComponent !== 'check' && childComponent !== 'checkmark' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], _objectSpread(_objectSpread({}, iconProps), {}, {
+        children: childComponent
+      }))]
+    });
+  }, [checked, imageSize, isImage]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
     className: _ChipModule["default"].chip,
     onMouseLeave: handleMouseLeave,
@@ -169,28 +196,33 @@ var ChipBase = exports.ChipBase = function ChipBase(props) {
     onKeyDown: handleKeyDown,
     ref: containerRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+      "aria-label": ariaLabel,
+      "aria-checked": checked,
       css: _ChipModule["default"],
       className: chipClassName,
       "data-chip-index": id,
       disabled: disabled,
-      focusEffect: "static",
-      icon: icon ? icon : null,
+      icon: icon ? icon : '',
+      iconComponent: iconComponent,
       size: "small",
       onFocus: handleFocus,
       onClick: onClick,
       ref: chipRef,
+      role: "checkbox",
       roundBorder: true,
       children: children
     }), deleteButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: buttonClassName,
       ref: deleteButtonRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+        "aria-label": children + ' ' + (0, _$L["default"])("Delete"),
         css: _ChipModule["default"],
         backgroundOpacity: "transparent",
         disabled: disabled,
         icon: (deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.icon) || 'closex',
         size: "small",
         onClick: handleDelete,
+        role: "button",
         roundBorder: true
       })
     })]
@@ -214,6 +246,13 @@ ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
    * @public
    */
   id: _propTypes["default"].string.isRequired,
+  /**
+   * Sets the chip as `checked` if `true`
+   *
+   * @type {Boolean}
+   * @public
+   */
+  checked: _propTypes["default"].bool,
   /**
    * Define the icon, delete handler, and position for the delete button.
    *
@@ -236,7 +275,21 @@ ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
    * @type {String|Object}
    * @public
    */
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])
+  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  /**
+   * Sets the size of the image passed to the component.
+   *
+   * @type {Number}
+   * @public
+   */
+  imageSize: _propTypes["default"].number,
+  /**
+   * If `true` tells the component to use `Image` instead of `Icon` element inside `Chip`.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  isImage: _propTypes["default"].bool
 };
 
 /**

package/Chips/Chip.module.css

@@ -13,15 +13,15 @@
 .chip .deleteButtonContainer.right {
   top: 50%;
   right: 0;
-  transform: translateY(-50%) translateX(calc(100% + 0.25rem ));
+  transform: translateY(-50%) translateX(calc(100% + var(--primitive-spacing-12) ));
 }
 .chip .deleteButtonContainer.bottom {
-  bottom: -0.25rem;
+  bottom: calc( var(--primitive-spacing-12) * -1);
   left: 50%;
   transform: translate(-50%, 100%);
 }
 .chip .deleteButtonContainer.top {
-  top: calc(-100% - 0.25rem );
+  top: calc(-100% - var(--primitive-spacing-12) );
   left: 50%;
   transform: translateX(-50%);
 }

package/Chips/Chips.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ChipsDecorator = exports.ChipsContext = exports.ChipsBase = exports.Chips = void 0;
 var _util = require("@enact/core/util");
+var _IString = _interopRequireDefault(require("ilib/lib/IString"));
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _SpotlightContainerDecorator = require("@enact/spotlight/SpotlightContainerDecorator");
 var _container = require("@enact/spotlight/src/container");
@@ -13,6 +14,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _react = require("react");
+var _$L = _interopRequireDefault(require("../internal/$L"));
 var _ChipsModule = _interopRequireDefault(require("./Chips.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "className", "orientation"];
@@ -62,6 +64,10 @@ var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
   var chipsClassName = (0, _classnames["default"])(_ChipsModule["default"].chips, _ChipsModule["default"][orientation], className);
   var childRefs = (0, _react.useRef)([]);
   var containerRef = (0, _react.useRef)(null);
+  var ariaLabel = new _IString["default"]((0, _$L["default"])('{total} items in total')).format({
+    total: children === null || children === void 0 ? void 0 : children.length
+  });
+  var ariaId = Math.random().toString(36).substring(2, 10);
   var getPreviousChip = (0, _react.useCallback)(function (id) {
     var currentIndex = childRefs.current.findIndex(function (child) {
       return child.id === id;
@@ -149,18 +155,26 @@ var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
       });
     }
   }, [children]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
-    className: chipsClassName,
-    ref: containerRef,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipsContext, {
-      value: {
-        getNextTargetFromDeleteButton: getNextTargetFromDeleteButton,
-        handleChipDelete: handleChipDelete,
-        registerChild: registerChild
-      },
-      children: children
-    })
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "region",
+    "aria-labelledby": "".concat(ariaId, "_chips"),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+      "aria-label": ariaLabel,
+      className: chipsClassName,
+      id: "".concat(ariaId, "_chips"),
+      ref: containerRef,
+      role: "group"
+    }, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipsContext, {
+        value: {
+          getNextTargetFromDeleteButton: getNextTargetFromDeleteButton,
+          handleChipDelete: handleChipDelete,
+          registerChild: registerChild
+        },
+        children: children
+      })
+    }))
+  });
 };
 ChipsBase.displayName = 'Chips';
 ChipsBase.propTypes = /** @lends limestone/Chips.Chips.prototype */{

package/Chips/Chips.module.css

@@ -1,6 +1,6 @@
 .chips {
   display: inline-flex;
-  gap: 0.75rem;
+  gap: var(--primitive-spacing-36);
 }
 .chips.vertical {
   flex-direction: column;

package/Chips/tests/Chip-specs.js

@@ -15,6 +15,16 @@ describe('Chip', function () {
     var actual = _react.screen.getByTestId('chip').textContent.codePointAt();
     expect(actual).toBe(expected);
   });
+  test('should support image if prop `isImage` is `true', function () {
+    var svg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCI+PGRlZnM+PHN0eWxlPi5hLC5ie2ZpbGw6I2ZmZjt9LmJ7b3BhY2l0eTowLjg7fTwvc3R5bGU+PC9kZWZzPjxwb2x5Z29uIGNsYXNzPSJhIiBwb2ludHM9IjM0OS45IDUyNy44IDE5OS45IDQyOS44IDE5OS45IDM3NC40IDM1MC4xIDQ3Mi43IDM0OS45IDM0OC41IDE5OS45IDI2MS4xIDE5OS45IDIwOS4zIDM1MCAyOTMuNiAzNTAgMjkzLjYgMzUwLjIgMjkzLjcgMzQ5LjkgMTY5LjMgMTAyLjcgNDguNSAxMDIuNyA0NzIuNiAzNTAuMSA2NTEuNiAzNDkuOSA1MjcuOCIvPjxwb2x5Z29uIGNsYXNzPSJiIiBwb2ludHM9IjM1MC4xIDY1MS42IDU5Ny4zIDQ3Mi44IDU5Ny4zIDM2Ni4zIDM0OS45IDUyNy44IDM1MC4xIDY1MS42Ii8+PHBvbHlnb24gY2xhc3M9ImIiIHBvaW50cz0iMzUwLjEgNDcyLjcgNTIzLjUgMzU5LjMgNTIzLjUgMjQ3LjQgMzQ5LjkgMzQ4LjUgMzUwLjEgNDcyLjciLz48cG9seWdvbiBjbGFzcz0iYiIgcG9pbnRzPSIzNTAgMjkzLjYgMzUwIDI5My42IDM1MC4yIDI5My43IDU5Ny4zIDE1NC44IDU5Ny4zIDQ4LjQgMzQ5LjkgMTY5LjMgMzUwIDI5My42Ii8+PC9zdmc+';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
+      "data-testid": "chip",
+      icon: svg,
+      isImage: true
+    }));
+    var actual = _react.screen.queryAllByRole('img')[0].firstChild;
+    expect(actual).toHaveAttribute('src', svg);
+  });
   test('should support `children` prop', function () {
     var children = 'label';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
@@ -88,7 +98,7 @@ describe('Chip', function () {
       disabled: true,
       children: "Disabled Chip"
     }));
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     expect(chipButton).toHaveAttribute('aria-disabled', 'true');
   });
   test('should handle disabled state with delete button', function () {
@@ -100,10 +110,10 @@ describe('Chip', function () {
       },
       children: "Disabled Chip"
     }));
-    var allButtons = _react.screen.getAllByRole('button');
-    allButtons.forEach(function (button) {
-      expect(button).toHaveAttribute('aria-disabled', 'true');
-    });
+    var chip = _react.screen.getByRole('checkbox');
+    var deleteButton = _react.screen.getByRole('button');
+    expect(chip).toHaveAttribute('aria-disabled', 'true');
+    expect(deleteButton).toHaveAttribute('aria-disabled', 'true');
   });
   test('should use default delete button icon when not specified', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.ChipBase, {
@@ -136,7 +146,7 @@ describe('Chip', function () {
       id: chipId,
       children: "Test Chip"
     }));
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     expect(chipButton).toHaveAttribute('data-chip-index', chipId);
   });
   test('should handle onClick events', function () {
@@ -145,7 +155,7 @@ describe('Chip', function () {
       onClick: mockOnClick,
       children: "Clickable Chip"
     }));
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     _react.fireEvent.click(chipButton);
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
@@ -170,7 +180,7 @@ describe('Chip', function () {
       "data-testid": "chip",
       children: "Test Chip"
     }));
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     expect(chipButton).toHaveClass(customClass);
   });
   test('should render chip with required props only', function () {
@@ -180,7 +190,7 @@ describe('Chip', function () {
     }));
     var chipText = _react.screen.getByText('Minimal Chip');
     expect(chipText).toBeInTheDocument();
-    var chipButton = _react.screen.getByRole('button');
+    var chipButton = _react.screen.getByRole('checkbox');
     expect(chipButton).toHaveAttribute('data-chip-index', 'minimal-chip');
   });
 });

package/Chips/tests/Chips-specs.js

@@ -46,13 +46,13 @@ describe('Chips', function () {
   it('should render correctly with default props', function () {
     var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps))),
       container = _render.container;
-    expect(container.firstChild).toHaveClass('chips');
-    expect(container.firstChild).toHaveClass('vertical');
+    expect(container.firstChild.firstChild).toHaveClass('chips');
+    expect(container.firstChild.firstChild).toHaveClass('vertical');
   });
   it('should focus the correct chip on navigation', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps)));
-    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
-    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="checkbox"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="checkbox"]');
     chip1.setAttribute('tabIndex', '0');
     chip2.setAttribute('tabIndex', '0');
     chip1.focus();
@@ -72,7 +72,7 @@ describe('Chips', function () {
   });
   it('should call handleDelete when delete button is clicked', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, defaultProps)));
-    var chipButtons = _react.screen.getAllByRole('button', {
+    var chipButtons = _react.screen.getAllByRole('checkbox', {
       name: /Chip [12]/i
     });
     _react.fireEvent.focus(chipButtons[0]);
@@ -87,16 +87,16 @@ describe('Chips', function () {
     });
     var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, horizontalProps))),
       container = _render2.container;
-    expect(container.firstChild).toHaveClass('chips');
-    expect(container.firstChild).toHaveClass('horizontal');
+    expect(container.firstChild.firstChild).toHaveClass('chips');
+    expect(container.firstChild.firstChild).toHaveClass('horizontal');
   });
   it('should handle navigation in horizontal orientation', function () {
     var horizontalProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
       orientation: 'horizontal'
     });
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, horizontalProps)));
-    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
-    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="checkbox"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="checkbox"]');
     chip1.setAttribute('tabIndex', '0');
     chip2.setAttribute('tabIndex', '0');
     chip1.focus();
@@ -173,7 +173,7 @@ describe('Chips', function () {
       }, "chip1")]
     };
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, clickableProps)));
-    var chipButton = _react.screen.getByText('Chip 1').closest('[role="button"]');
+    var chipButton = _react.screen.getByText('Chip 1').closest('[role="checkbox"]');
     _react.fireEvent.click(chipButton);
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
@@ -213,7 +213,7 @@ describe('Chips', function () {
       }, "chip2")]
     };
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, disabledProps)));
-    var disabledChips = _react.screen.getAllByRole('button');
+    var disabledChips = _react.screen.getAllByRole('checkbox');
     disabledChips.forEach(function (chip) {
       expect(chip).toHaveAttribute('aria-disabled', 'true');
     });
@@ -243,9 +243,9 @@ describe('Chips', function () {
     };
     var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, emptyProps))),
       container = _render3.container;
-    expect(container.firstChild).toHaveClass('chips');
-    expect(container.firstChild).toHaveClass('vertical');
-    var buttons = _react.screen.queryAllByRole('button');
+    expect(container.firstChild.firstChild).toHaveClass('chips');
+    expect(container.firstChild.firstChild).toHaveClass('vertical');
+    var buttons = _react.screen.queryAllByRole('checkbox');
     expect(buttons).toHaveLength(0);
   });
   it('should handle custom className', function () {
@@ -254,17 +254,17 @@ describe('Chips', function () {
     });
     var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, customProps))),
       container = _render4.container;
-    expect(container.firstChild).toHaveClass('chips');
-    expect(container.firstChild).toHaveClass('vertical');
-    expect(container.firstChild).toHaveClass('custom-chips-class');
+    expect(container.firstChild.firstChild).toHaveClass('chips');
+    expect(container.firstChild.firstChild).toHaveClass('vertical');
+    expect(container.firstChild.firstChild).toHaveClass('custom-chips-class');
   });
   it('should handle keyboard navigation with mixed orientations', function () {
     var verticalProps = _objectSpread(_objectSpread({}, defaultProps), {}, {
       orientation: 'vertical'
     });
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.ChipsBase, _objectSpread({}, verticalProps)));
-    var chip1 = _react.screen.getByText('Chip 1').closest('[role="button"]');
-    var chip2 = _react.screen.getByText('Chip 2').closest('[role="button"]');
+    var chip1 = _react.screen.getByText('Chip 1').closest('[role="checkbox"]');
+    var chip2 = _react.screen.getByText('Chip 2').closest('[role="checkbox"]');
     chip1.setAttribute('tabIndex', '0');
     chip2.setAttribute('tabIndex', '0');
 

package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts

@@ -18,11 +18,10 @@ wrapped component.
  */
   openProp?: string;
 }
-export interface ContextualMenuDecoratorProps
-  extends Merge<
-    Merge<ui_Toggleable_ToggleableProps, limestone_Skinnable_SkinnableProps>,
-    limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps
-  > {
+export interface ContextualMenuDecoratorProps extends Merge<
+  Merge<ui_Toggleable_ToggleableProps, limestone_Skinnable_SkinnableProps>,
+  limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps
+> {
   /**
    * Direction of popup with respect to the wrapped component.
    */