@enact/limestone 1.9.3 → 1.10.0

package/.github/workflows/ci-reusable.yml

@@ -35,7 +35,7 @@ jobs:
 
       - name: Clone and setup Enact CLI
         run: |
-          git clone --branch=7.2.1 --depth 1 https://github.com/enactjs/cli ../cli
+          git clone --branch=develop --depth 1 https://github.com/enactjs/cli ../cli
           pushd ../cli
           npm install
           npm link
@@ -43,7 +43,7 @@ jobs:
 
       - name: Clone and setup Enact framework
         run: |
-          git clone --branch=release/5.4.x.develop --depth 1 https://github.com/enactjs/enact ../enact
+          git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
           pushd ../enact
           npm install
           npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install

package/Alert/Alert.d.ts

@@ -32,6 +32,15 @@ export class AlertImage extends React.Component<
 > {}
 
 export interface AlertBaseProps {
+  /**
+   * Sets the buttons layout direction.
+   *
+   * In  `auto`  mode, button direction follows UX defaults:
+   * *  `overlay`  - horizontal when there are exactly 2 buttons
+   * *  `fullscreen`  - horizontal when there are less than 3 buttons
+   * *  otherwise vertical
+   */
+  buttonDirection?: "auto" | "horizontal" | "vertical";
   /**
    * Buttons to be included under the component.
    *

package/Alert/Alert.js

@@ -24,7 +24,7 @@ var _Popup = _interopRequireDefault(require("../Popup"));
 var _AlertImage = _interopRequireDefault(require("./AlertImage"));
 var _AlertModule = _interopRequireDefault(require("./Alert.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "title", "type"];
+var _excluded = ["buttonDirection", "buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "title", "type", "style"];
 /**
  * Limestone styled modal Alert components.
  *
@@ -56,6 +56,19 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var AlertBase = exports.AlertBase = (0, _kind["default"])({
   name: 'Alert',
   propTypes: /** @lends limestone/Alert.AlertBase.prototype */{
+    /**
+     * Sets the buttons layout direction.
+     *
+     * In `auto` mode, button direction follows UX defaults:
+     * * `overlay` - horizontal when there are exactly 2 buttons
+     * * `fullscreen` - horizontal when there are less than 3 buttons
+     * * otherwise vertical
+     *
+     * @type {('auto'|'horizontal'|'vertical')}
+     * @default 'auto'
+     * @public
+     */
+    buttonDirection: _propTypes["default"].oneOf(['auto', 'horizontal', 'vertical']),
     /**
      * Buttons to be included under the component.
      *
@@ -171,6 +184,7 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
     type: _propTypes["default"].oneOf(['fullscreen', 'overlay'])
   },
   defaultProps: {
+    buttonDirection: 'auto',
     open: false,
     overlayPosition: 'center',
     type: 'fullscreen'
@@ -212,7 +226,8 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
     }
   },
   render: function render(_ref4) {
-    var buttons = _ref4.buttons,
+    var buttonDirection = _ref4.buttonDirection,
+      buttons = _ref4.buttons,
       contentComponent = _ref4.contentComponent,
       children = _ref4.children,
       css = _ref4.css,
@@ -221,10 +236,25 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
       overlayPosition = _ref4.overlayPosition,
       title = _ref4.title,
       type = _ref4.type,
+      style = _ref4.style,
       rest = _objectWithoutProperties(_ref4, _excluded);
     var fullscreen = type === 'fullscreen';
     var position = type === 'overlay' ? overlayPosition : type;
     var showTitle = fullscreen && title;
+    var buttonCount = _react.Children.toArray(buttons).filter(Boolean).length;
+    var resolvedButtonDirection = buttonDirection;
+    if (buttonDirection === 'auto') {
+      var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 3;
+      resolvedButtonDirection = useHorizontal ? 'horizontal' : 'vertical';
+    }
+    var overlayHorizontalButtons = type === 'overlay' && resolvedButtonDirection === 'horizontal';
+    var popupStyle = style;
+    if (overlayHorizontalButtons) {
+      var overlayHorizontalButtonCount = Math.max(1, Math.min(buttonCount, 4));
+      popupStyle = _objectSpread(_objectSpread({}, style), {}, {
+        '--alert-overlay-horizontal-button-count': overlayHorizontalButtonCount
+      });
+    }
     var ariaLabelledBy = (showTitle ? "".concat(id, "_title ") : '') + "".concat(id, "_content ").concat(id, "_buttons");
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-owns": id,
@@ -235,6 +265,7 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
         "aria-labelledby": ariaLabelledBy,
         css: css,
         position: position,
+        style: popupStyle,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout["default"], {
           align: "center center",
           orientation: "vertical",
@@ -262,8 +293,8 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
             shrink: true,
             className: css.buttonContainer,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout["default"], {
-              align: "center",
-              orientation: "vertical",
+              align: "center center",
+              orientation: resolvedButtonDirection,
               id: "".concat(id, "_buttons"),
               children: buttons
             })

package/Alert/Alert.module.css

@@ -40,6 +40,7 @@
 .alert.overlay .buttonContainer {
   box-sizing: border-box;
   margin-top: var(--primitive-spacing-36);
+  padding: 0 var(--primitive-spacing-84);
 }
 .alert.overlay .content {
   align-self: stretch;
@@ -52,6 +53,7 @@
   word-break: keep-all;
   padding: 0 var(--primitive-spacing-84);
   margin: 0;
+  max-width: var(--alert-overlay-content-max-width, 23.5rem);
 }
 :global(.enact-locale-non-latin) .alert.overlay .content {
   font-family: "Limestone";
@@ -77,7 +79,16 @@
   word-break: normal;
 }
 .popup.overlay {
-  width: 23.5rem;
+  box-sizing: border-box;
+  --alert-overlay-horizontal-button-count: 1;
+  --alert-overlay-horizontal-button-width: NaNrem + (2 * var(--primitive-spacing-36)));
+  --alert-overlay-horizontal-buttons-total-width: calc(var(--alert-overlay-horizontal-button-width) * var(--alert-overlay-horizontal-button-count));
+  --alert-overlay-width: max(1128px, var(--alert-overlay-horizontal-buttons-total-width));
+  --alert-overlay-content-horizontal-padding: var(--primitive-spacing-84);
+  --alert-overlay-content-max-width: calc(var(--alert-overlay-width) - (2 * var(--alert-overlay-content-horizontal-padding)));
+  width: var(--alert-overlay-width);
+  min-width: 23.5rem;
+  max-width: calc(100vw - 2 * var(--primitive-spacing-60));
   margin-left: auto;
   margin-right: auto;
 }

package/Alert/tests/Alert-specs.js

@@ -102,6 +102,60 @@ describe('Alert', function () {
     var expectedClass = 'thumbnail';
     expect(image).toHaveClass(expectedClass);
   });
+  test('should align buttons horizontally by default in fullscreen when button count is less than 3', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('horizontal');
+  });
+  test('should align buttons vertically by default in fullscreen when button count is 3', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "later"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
+  test('should allow overriding button direction to vertical', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        buttonDirection: "vertical",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
 });
 describe('AlertOverlay specs', function () {
   test('should be rendered opened if open is set to true', function () {
@@ -201,4 +255,41 @@ describe('AlertOverlay specs', function () {
     var expectedClass = 'thumbnail';
     expect(image).toHaveClass(expectedClass);
   });
+  test('should align buttons horizontally by default in overlay when button count is 2', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        type: "overlay",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("buttons", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "yes"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "no"
+          })]
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('horizontal');
+  });
+  test('should align buttons vertically by default in overlay when button count is not 2', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
+        open: true,
+        type: "overlay",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("buttons", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            size: "small",
+            children: "yes"
+          })
+        })
+      })
+    }));
+    var alert = _react.screen.getByRole('alert');
+    var buttonsLayout = alert.querySelector('[id$="_buttons"]');
+    expect(buttonsLayout).toHaveClass('vertical');
+  });
 });

package/Button/tests/Button-specs.js

@@ -30,6 +30,32 @@ describe('Button', function () {
     var expected = 'focusExpand';
     expect(button).toHaveClass(expected);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {}));
+    var button = _react.screen.getByRole('button');
+
+    // Select by key
+    _react.fireEvent.keyDown(button, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(button).toHaveClass('pressed');
+    _react.fireEvent.keyUp(button, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(button).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(button);
+    expect(button).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(button);
+    expect(button).not.toHaveClass('pressed');
+  });
   test('should be able to disable the expand focus effect', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonBase, {
       focusEffect: "static"

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 The following is a curated list of changes in the Enact limestone module, newest changes on the top.
 
+## [1.10.0] - 2026-05-08
+
+### Added
+
+- `limestone/Alert` `buttonDirection` prop to control button layout direction (`auto`, `horizontal`, `vertical`)
+- `limestone/Icon` supported icon list, adding new icon `f1`
+- `limestone/Input` props `marqueeInputField` to marquee inputField text on focus
+- `limestone/Inputfield` prop `caretToEndOnFocus` to move caret to the end of the input field on input activation via 5-way
+- `limestone/Inputfield` prop `marqueeContent` to marquee text on focus
+- `limestone/PageViews` `showFooterButtons` prop to show optional Close/Next buttons
+- `limestone/PageViews` `footerCloseLabel` prop to custom the Close button label
+- `limestone/PageViews` `onFooterCloseClick` prop to custom the Close button behavior when it is clicked
+- `limestone/Slider` `colorPicker` prop to change slider functionality
+- `limestone/ThemeDecorator` config `focusEffectClass` to support customization for spottable components
+
+### Changed
+
+- `limestone/Slider` styling to match the latest GUI
+- `@storybook/addon-docs` version to `^10.3.4`.
+- `@storybook/react-webpack5` version to `^10.3.4`.
+- `storybook` version to `^10.3.4`.
+
+### Fixed
+
+- `limestone/Card` `captionOverlayOnFocus` prop to work in `focusRing` mode
+- `limestone/Card` press motion to work with key press
+- `limestone/Dropdown` button to match `DropdownList` items size when `size` is `small`
+- `limestone/IconItem` press motion to work with key press
+- `limestone/MediaOverlay` press motion to work with key press
+- `limestone/Popup` to not flicker on transition
+- `limestone/Popup` to not delay when closed with pointer
+- `limestone/Slider` press motion to work with key press
+- `limestone/useScroll` to not scroll on hover right after scroll by wheel
+
 ## [1.9.3] - 2026-04-20
 
 ### Fixed

package/Card/Card.d.ts

@@ -10,10 +10,6 @@ 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 CardBaseProps extends ui_Card_CardProps {
-  /**
-   * The primary caption displayed with the image.
-   */
-  children: string;
   /**
  * Source for the image.
 String value or Object of values used to determine which image will appear on
@@ -38,6 +34,10 @@ It only applies when  `orientation`  is  `'vertical'` .
    * Centers the captions when  `imageIconSrc`  is not provided.
    */
   centered?: boolean;
+  /**
+   * The primary caption displayed with the image.
+   */
+  children?: string;
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.

package/Card/Card.js

@@ -72,14 +72,6 @@ var getDefaultImageSize = function getDefaultImageSize(orientation) {
 var CardBase = exports.CardBase = (0, _kind["default"])({
   name: 'Card',
   propTypes: /** @lends limestone/Card.CardBase.prototype */{
-    /**
-     * The primary caption displayed with the image.
-     *
-     * @type {String}
-     * @required
-     * @public
-     */
-    children: _propTypes["default"].string.isRequired,
     /**
      * Source for the image.
      * String value or Object of values used to determine which image will appear on
@@ -120,6 +112,13 @@ var CardBase = exports.CardBase = (0, _kind["default"])({
      * @public
      */
     centered: _propTypes["default"].bool,
+    /**
+     * The primary caption displayed with the image.
+     *
+     * @type {String}
+     * @public
+     */
+    children: _propTypes["default"].string,
     /**
      * Customizes the component by mapping the supplied collection of CSS class names to the
      * corresponding internal elements and states of this component.

package/Card/tests/Card-specs.js

@@ -2,8 +2,9 @@
 
 require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
-var _Card = require("../Card");
+var _Card = _interopRequireWildcard(require("../Card"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var src = {
   'hd': 'https://placehold.co/200x200/000000/ffffff/png',
   'fhd': 'https://placehold.co/300x300/000000/ffffff/png',
@@ -46,7 +47,8 @@ describe('Card', function () {
     var imageIconSrc = 'imageIconSrc';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
       imageIconSrc: imageIconSrc,
-      orientation: "vertical"
+      orientation: "vertical",
+      src: src
     }));
     var expected = imageIconSrc;
     var actual = _react.screen.getAllByRole('img')[2].children.item(0);
@@ -56,7 +58,8 @@ describe('Card', function () {
     var imageIconSrc = 'imageIconSrc';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
       imageIconSrc: imageIconSrc,
-      orientation: "horizontal"
+      orientation: "horizontal",
+      src: src
     }));
     var expected = 2;
     var actual = _react.screen.getAllByRole('img').length;
@@ -67,7 +70,8 @@ describe('Card', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
       "data-testid": "card",
       fitImage: true,
-      imageIconSrc: imageIconSrc
+      imageIconSrc: imageIconSrc,
+      src: src
     }));
     var expected = 'fitImage';
     var actual = _react.screen.getByTestId('card');
@@ -75,7 +79,8 @@ describe('Card', function () {
   });
   test('should have "Select" voice intent', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardBase, {
-      "data-testid": "card"
+      "data-testid": "card",
+      src: src
     }));
     var card = _react.screen.getByTestId('card');
     expect(card).toHaveAttribute('data-webos-voice-intent', 'Select');
@@ -92,4 +97,33 @@ describe('Card', function () {
     var actual = _react.screen.getByText('children');
     expect(actual).not.toHaveAttribute(expected);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card["default"], {
+      "data-testid": "card",
+      src: src
+    }));
+    var card = _react.screen.getByTestId('card');
+
+    // Select by key
+    _react.fireEvent.keyDown(card, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(card).toHaveClass('pressed');
+    _react.fireEvent.keyUp(card, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(card).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(card);
+    expect(card).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(card);
+    expect(card).not.toHaveClass('pressed');
+  });
 });

package/CheckboxItem/CheckboxItem.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.CheckboxItemGroup = exports.CheckboxItemDecorator = exports.CheckboxItemBase = exports.CheckboxItem = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+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"));
@@ -225,14 +226,11 @@ var CheckboxItem = exports.CheckboxItem = (0, _Pure["default"])(CheckboxItemDeco
  * @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);
-  _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", {
@@ -272,4 +270,8 @@ var _CheckboxItemGroup = exports.CheckboxItemGroup = function CheckboxItemGroup(
     });
   }
 };
+_CheckboxItemGroup.propTypes = {
+  groupId: _propTypes["default"].string,
+  itemProps: _propTypes["default"].object
+};
 var _default = exports["default"] = CheckboxItem;

package/Chips/Chip.js

@@ -61,6 +61,7 @@ var ChipDefaultProps = {
  * 		position: 'right'
  * 	}}
  * 	icon="check"
+ * 	id="chip"
  * >
  *  Label
  * </Chip>
@@ -71,12 +72,13 @@ 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);
+  (0, _util.checkPropTypes)(_ChipBase, chipProps);
   var checked = chipProps.checked,
     children = chipProps.children,
     className = chipProps.className,
@@ -92,11 +94,15 @@ var ChipBase = exports.ChipBase = function ChipBase(props) {
   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);
@@ -228,8 +234,7 @@ var ChipBase = exports.ChipBase = function ChipBase(props) {
     })]
   }));
 };
-ChipBase.displayName = 'Chip';
-ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
+_ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
   /**
    * A label displayed in the chip content.
    *
@@ -291,6 +296,7 @@ ChipBase.propTypes = /** @lends limestone/Chips.Chip.prototype */{
    */
   isImage: _propTypes["default"].bool
 };
+_ChipBase.displayName = 'Chip';
 
 /**
  * Limestone-specific Chip behaviors to apply to {@link limestone/Chips.Chip|Chip}.
@@ -301,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/Chips.js

@@ -33,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.
@@ -42,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>
  * 		);
@@ -55,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,
@@ -67,7 +71,9 @@ var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
   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 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;
@@ -176,8 +182,7 @@ var ChipsBase = exports.ChipsBase = function ChipsBase(props) {
     }))
   });
 };
-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
    *
@@ -194,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.
@@ -225,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;