@enact/limestone 1.3.0 → 1.10.0

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,25 @@
 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 _util = require("@enact/core/util");
+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 +213,65 @@ 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) {
+  (0, _util.checkPropTypes)(_CheckboxItemGroup, props);
+  var children = props.children,
+    groupId = props.groupId,
+    itemProps = props.itemProps,
+    rest = _objectWithoutProperties(props, _excluded2);
+  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);
+        })
+      }))
+    });
+  }
+};
+_CheckboxItemGroup.propTypes = {
+  groupId: _propTypes["default"].string,
+  itemProps: _propTypes["default"].object
+};
 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
 };
 
 /**
@@ -56,6 +61,7 @@ var ChipDefaultProps = {
  * 		position: 'right'
  * 	}}
  * 	icon="check"
+ * 	id="chip"
  * >
  *  Label
  * </Chip>
@@ -66,28 +72,37 @@ var ChipDefaultProps = {
  * @ui
  * @public
  */
-var ChipBase = exports.ChipBase = function ChipBase(props) {
+var _ChipBase = exports.ChipBase = function ChipBase(props) {
   var _use = (0, _react.use)(_Chips.ChipsContext),
     handleChipDelete = _use.handleChipDelete,
     getNextTargetFromDeleteButton = _use.getNextTargetFromDeleteButton,
     registerChild = _use.registerChild;
   var chipProps = (0, _util.setDefaultProps)(props, ChipDefaultProps);
-  var children = chipProps.children,
+  (0, _util.checkPropTypes)(_ChipBase, chipProps);
+  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 chipRef = (0, _react.useRef)(null);
   var containerRef = (0, _react.useRef)(null);
-  var clientRef = (0, _react.useRef)(null);
   var deleteButtonRef = (0, _react.useRef)(null);
-  var chipRef = clientRef || ref;
   var isHovering = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (!chipRef.current) {
+      chipRef.current = ref.current;
+    }
+  }, [ref]);
   (0, _react.useEffect)(function () {
     if (chipRef.current && registerChild) {
       registerChild(chipRef, id);
@@ -160,6 +175,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,35 +202,39 @@ 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
       })
     })]
   }));
 };
-ChipBase.displayName = 'Chip';
-ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
+_ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
   /**
    * A label displayed in the chip content.
    *
@@ -214,6 +251,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,8 +280,23 @@ 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
 };
+_ChipBase.displayName = 'Chip';
 
 /**
  * Limestone-specific Chip behaviors to apply to {@link limestone/Chips.Chip|Chip}.
@@ -248,5 +307,5 @@ ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
  * @public
  */
 var ChipDecorator = exports.ChipDecorator = (0, _compose["default"])(_Skinnable["default"]);
-var Chip = exports.Chip = ChipDecorator(ChipBase);
+var Chip = exports.Chip = ChipDecorator(_ChipBase);
 var _default = exports["default"] = Chip;

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"];
@@ -31,6 +33,9 @@ var ChipsContext = exports.ChipsContext = /*#__PURE__*/(0, _react.createContext)
 var ChipsDefaultProps = {
   orientation: 'vertical'
 };
+var generateAriaId = function generateAriaId() {
+  return Math.random().toString(36).substring(2, 10);
+};
 
 /**
  * A container that surrounds the chips.
@@ -40,7 +45,7 @@ var ChipsDefaultProps = {
  * <Chips>
  * 	{chips.map(({id, icon, children}) => {
  * 		return (
- * 			<Chip key={id} icon={icon} onClick={onClick}>
+ * 			<Chip key={id} id={id} icon={icon} onClick={onClick}>
  * 				{children}
  * 			</Chip>
  * 		);
@@ -53,8 +58,9 @@ var ChipsDefaultProps = {
  * @ui
  * @public
  */
-var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
+var _ChipsBase = exports.ChipsBase = function ChipsBase(props) {
   var chipsProps = (0, _util.setDefaultProps)(props, ChipsDefaultProps);
+  (0, _util.checkPropTypes)(_ChipsBase, chipsProps);
   var children = chipsProps.children,
     className = chipsProps.className,
     orientation = chipsProps.orientation,
@@ -62,6 +68,12 @@ 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 = (0, _react.useMemo)(function () {
+    return generateAriaId();
+  }, []);
   var getPreviousChip = (0, _react.useCallback)(function (id) {
     var currentIndex = childRefs.current.findIndex(function (child) {
       return child.id === id;
@@ -149,21 +161,28 @@ 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 */{
+_ChipsBase.propTypes = /** @lends limestone/Chips.Chips.prototype */{
   /**
    * {@link limestone/Chips.Chip|Chip} to be rendered
    *
@@ -180,6 +199,7 @@ ChipsBase.propTypes = /** @lends limestone/Chips.Chips.prototype */{
    */
   orientation: _propTypes["default"].oneOf(['horizontal', 'vertical'])
 };
+_ChipsBase.displayName = 'Chips';
 
 /**
  * Applies Limestone specific behaviors to {@link limestone/Chips.Chips|Chips} components.
@@ -211,5 +231,5 @@ var ChipsDecorator = exports.ChipsDecorator = (0, _compose["default"])((0, _Spot
  * @ui
  * @public
  */
-var Chips = exports.Chips = ChipsDecorator(ChipsBase);
+var Chips = exports.Chips = ChipsDecorator(_ChipsBase);
 var _default = exports["default"] = Chips;

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;