@enact/limestone 1.9.3 → 1.10.1

package/Input/InputFieldSpotlightDecorator.js

@@ -7,6 +7,7 @@ exports["default"] = exports.InputSpotlightDecorator = void 0;
 var _handle = require("@enact/core/handle");
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
 var _keymap = require("@enact/core/keymap");
+var _util = require("@enact/core/util");
 var _spotlight = require("@enact/spotlight");
 var _Pause = _interopRequireDefault(require("@enact/spotlight/Pause"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
@@ -20,6 +21,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
 var isBubbling = function isBubbling(ev) {
   return ev.currentTarget !== ev.target;
@@ -48,7 +55,7 @@ var defaultConfig = {
    * @type {Boolean}
    * @default false
    * @memberof limestone/Input/InputSpotlightDecorator.InputSpotlightDecorator.defaultConfig
-  */
+   */
   noLockPointer: false
 };
 
@@ -73,8 +80,11 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
   var forwardKeyUp = (0, _handle.forward)('onKeyUp');
 
   // eslint-disable-next-line no-shadow
-  var InputSpotlightDecorator = function InputSpotlightDecorator(_ref) {
+  var _InputSpotlightDecorator = function InputSpotlightDecorator(_ref) {
     var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+    (0, _util.checkPropTypes)(_InputSpotlightDecorator, props);
+    var _props$caretToEndOnFo = props.caretToEndOnFocus,
+      caretToEndOnFocus = _props$caretToEndOnFo === void 0 ? false : _props$caretToEndOnFo;
     var downTarget = (0, _react.useRef)(null);
     var focused = (0, _react.useRef)(null);
     var node = (0, _react.useRef)(null);
@@ -86,6 +96,10 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
     var paused = (0, _react.useMemo)(function () {
       return new _Pause["default"]('InputSpotlightDecorator');
     }, []);
+    var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      active = _useState2[0],
+      setActive = _useState2[1];
     var setDownTarget = (0, _react.useCallback)(function (ev) {
       var repeat = ev.repeat,
         target = ev.target;
@@ -93,6 +107,13 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
         downTarget.current = target;
       }
     }, []);
+    var moveCaretToEnd = (0, _react.useCallback)(function (inputNode) {
+      if (caretToEndOnFocus && inputNode && SELECTABLE_TYPES.test(inputNode.type)) {
+        var length = inputNode.value.length;
+        inputNode.setSelectionRange(length, length);
+        inputNode.scrollLeft = inputNode.dir === 'rtl' ? 0 : inputNode.scrollWidth;
+      }
+    }, [caretToEndOnFocus]);
     var updateFocus = (0, _react.useCallback)(function () {
       // focus node if `InputSpotlightDecorator` is pausing Spotlight or if Spotlight is paused
       if (node.current && _spotlight.Spotlight.getCurrent() !== node.current && (paused.isPaused() || !_spotlight.Spotlight.isPaused())) {
@@ -103,16 +124,29 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
         } else {
           node.current.focus();
         }
+
+        // Move caret to end if caretToEndOnFocus is enabled and we're focusing an input
+        if (focused.current === 'input') {
+          if (fromMouse.current) {
+            setTimeout(function () {
+              moveCaretToEnd(node.current);
+            }, 0);
+          } else {
+            moveCaretToEnd(node.current);
+          }
+        }
       }
       var focusChanged = focused.current !== prevStatus.current.focused;
       if (focusChanged) {
         if (focused.current === 'input') {
+          setActive(true);
           (0, _handle.forwardCustom)('onActivate')(null, props);
           if (!noLockPointer) {
             (0, _pointer.lockPointer)(node.current);
           }
           paused.pause();
         } else if (prevStatus.current.focused === 'input') {
+          setActive(false);
           (0, _handle.forwardCustom)('onDeactivate')(null, props);
           if (!noLockPointer) {
             (0, _pointer.releasePointer)(prevStatus.current.node);
@@ -124,7 +158,7 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
         focused: focused.current,
         node: node.current
       };
-    }, [paused, props]);
+    }, [moveCaretToEnd, paused, props]);
     var blur = (0, _react.useCallback)(function () {
       if (focused.current || node.current) {
         focused.current = null;
@@ -251,8 +285,9 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
         spotlightDisabled = props.spotlightDisabled;
       setDownTarget(ev);
       // focus the <input> whenever clicking on any part of the component to ensure both that
-      // the <input> has focus and Spotlight is paused.
-      if (!disabled && !spotlightDisabled) {
+      // the <input> has focus and Spotlight is paused. Skip when the target is a decorative
+      // icon so it doesn't activate the input.
+      if (!disabled && !spotlightDisabled && !ev.target.closest('[data-input-icon]')) {
         focusInput(ev.currentTarget, true);
       }
       forwardMouseDown(ev, props);
@@ -290,9 +325,11 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
     }, [focusDecorator, focusInput, props]);
     var componentProps = Object.assign({}, props);
     delete componentProps.autoFocus;
+    delete componentProps.caretToEndOnFocus;
     delete componentProps.onActivate;
     delete componentProps.onDeactivate;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+      active: active,
       onBlur: onBlur,
       onFocus: onFocus,
       onKeyDown: onKeyDown,
@@ -300,8 +337,8 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
       onMouseDown: onMouseDown
     }));
   };
-  InputSpotlightDecorator.displayName = 'InputSpotlightDecorator';
-  InputSpotlightDecorator.propTypes = /** @lends limestone/Input/InputSpotlightDecorator.InputSpotlightDecorator.prototype */{
+  _InputSpotlightDecorator.displayName = 'InputSpotlightDecorator';
+  _InputSpotlightDecorator.propTypes = /** @lends limestone/Input/InputSpotlightDecorator.InputSpotlightDecorator.prototype */{
     /**
      * Focuses the <input> when the decorator is focused via 5-way.
      *
@@ -310,6 +347,14 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
      * @public
      */
     autoFocus: _propTypes["default"].bool,
+    /**
+     * Moves the caret to the end of the text when the input receives focus.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    caretToEndOnFocus: _propTypes["default"].bool,
     /**
      * Applies a disabled style and the control becomes non-interactive.
      *
@@ -359,6 +404,6 @@ var InputSpotlightDecorator = exports.InputSpotlightDecorator = (0, _hoc["defaul
      */
     spotlightDisabled: _propTypes["default"].bool
   };
-  return InputSpotlightDecorator;
+  return _InputSpotlightDecorator;
 });
 var _default = exports["default"] = InputSpotlightDecorator;

package/Input/index.d.ts

@@ -9,99 +9,6 @@ import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spo
 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 InputFieldBaseProps {
-  /**
-   * Passed by AnnounceDecorator for accessibility.
-   */
-  announce?: Function;
-  /**
-   * Disables InputField and becomes non-interactive.
-   */
-  disabled?: boolean;
-  /**
-   * Blurs the input when the "enter" key is pressed.
-   */
-  dismissOnEnter?: boolean;
-  /**
-   * The icon to be placed at the end of the input.
-   */
-  iconAfter?: string;
-  /**
-   * The icon to be placed at the beginning of the input.
-   */
-  iconBefore?: string;
-  /**
- * Indicates    is invalid and shows
-  , if set.
- */
-  invalid?: boolean;
-  /**
- * The tooltip text to be displayed when the input is
-  .
- * 
- * If this value is  _falsy_ , the tooltip will be shown with the default message.
- */
-  invalidMessage?: string;
-  /**
-   * Called before the input value is changed.
-   *
-   * The change can be prevented by calling  `preventDefault`  on the event.
-   */
-  onBeforeChange?: Function;
-  /**
-   * Called when blurred.
-   */
-  onBlur?: Function;
-  /**
- * Called when the input value is changed.
- * 
- * The event payload includes the current  `value`  as well as a  `stopPropagation()`  method
-which may be called to stop the original  `onChange`  event from the  `<input>`  from
-bubbling.
- */
-  onChange?: Function;
-  /**
-   * Called when clicked.
-   */
-  onClick?: Function;
-  /**
-   * Called when focused.
-   */
-  onFocus?: Function;
-  /**
-   * Called when a key is pressed down.
-   */
-  onKeyDown?: Function;
-  /**
-   * Text to display when    is not set.
-   */
-  placeholder?: string;
-  /**
-   * The size of the input field.
-   */
-  size?: "large" | "small";
-  /**
-   * The type of input.
-   *
-   * Accepted values correspond to the standard HTML5 input types.
-   */
-  type?: string;
-  /**
-   * The value of the input.
-   */
-  value?: string | number;
-}
-/**
- * A Limestone styled input component.
- * 
- * It supports start and end icons, but it does not support Spotlight. Apps should use
-  .
- */
-
-export class InputFieldBase extends React.Component<
-  Merge<React.HTMLProps<HTMLElement>, InputFieldBaseProps>
-> {}
-
 export interface InputPopupBaseProps {
   /**
    * Passed by AnnounceDecorator for accessibility.
@@ -158,6 +65,10 @@ and when  `numberInputField`  is  `'auto'` .
  * This value will override  `minLength`  and  `maxLength` .
  */
   length?: number;
+  /**
+   * Wraps the  `InputField` 's value display in a marquee.
+   */
+  marqueeInputField?: boolean;
   /**
    * The maximum length of number input fields.
    *
@@ -260,6 +171,107 @@ export class InputPopupBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, InputPopupBaseProps>
 > {}
 
+export interface InputFieldBaseProps {
+  /**
+   * Passed by AnnounceDecorator for accessibility.
+   */
+  announce?: Function;
+  /**
+   * Moves the caret to the end of the text when the input receives focus.
+   */
+  caretToEndOnFocus?: boolean;
+  /**
+   * Disables InputField and becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+   * Blurs the input when the "enter" key is pressed.
+   */
+  dismissOnEnter?: boolean;
+  /**
+   * The icon to be placed at the end of the input.
+   */
+  iconAfter?: string;
+  /**
+   * The icon to be placed at the beginning of the input.
+   */
+  iconBefore?: string;
+  /**
+ * Indicates    is invalid and shows
+  , if set.
+ */
+  invalid?: boolean;
+  /**
+ * The tooltip text to be displayed when the input is
+  .
+ * 
+ * If this value is  _falsy_ , the tooltip will be shown with the default message.
+ */
+  invalidMessage?: string;
+  /**
+   * Wraps the input's value/placeholder display in a marquee.
+   */
+  marqueeContent?: boolean;
+  /**
+   * Called before the input value is changed.
+   *
+   * The change can be prevented by calling  `preventDefault`  on the event.
+   */
+  onBeforeChange?: Function;
+  /**
+   * Called when blurred.
+   */
+  onBlur?: Function;
+  /**
+ * Called when the input value is changed.
+ * 
+ * The event payload includes the current  `value`  as well as a  `stopPropagation()`  method
+which may be called to stop the original  `onChange`  event from the  `<input>`  from
+bubbling.
+ */
+  onChange?: Function;
+  /**
+   * Called when clicked.
+   */
+  onClick?: Function;
+  /**
+   * Called when focused.
+   */
+  onFocus?: Function;
+  /**
+   * Called when a key is pressed down.
+   */
+  onKeyDown?: Function;
+  /**
+   * Text to display when    is not set.
+   */
+  placeholder?: string;
+  /**
+   * The size of the input field.
+   */
+  size?: "large" | "small";
+  /**
+   * The type of input.
+   *
+   * Accepted values correspond to the standard HTML5 input types.
+   */
+  type?: string;
+  /**
+   * The value of the input.
+   */
+  value?: string | number;
+}
+/**
+ * A Limestone styled input component.
+ * 
+ * It supports start and end icons, but it does not support Spotlight. Apps should use
+  .
+ */
+
+export class InputFieldBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, InputFieldBaseProps>
+> {}
+
 export interface InputFieldDecoratorProps extends Merge<
   ui_Changeable_ChangeableProps,
   limestone_Skinnable_SkinnableProps

package/Input/tests/Input-specs.js

@@ -534,4 +534,30 @@ describe('Input specs', function () {
       expect(buttonSubmit).toBeNull();
     });
   });
+  describe('marqueeInputField', function () {
+    test('should not render a marquee node in the InputField by default', function () {
+      var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
+            open: true,
+            value: "hello"
+          })
+        })),
+        baseElement = _render.baseElement;
+      var marqueeText = baseElement.querySelector('.marqueeText');
+      expect(marqueeText).toBeNull();
+    });
+    test('should render a marquee node in the InputField when marqueeInputField is true', function () {
+      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
+            open: true,
+            marqueeInputField: true,
+            value: "hello"
+          })
+        })),
+        baseElement = _render2.baseElement;
+      var marqueeText = baseElement.querySelector('.marqueeText');
+      expect(marqueeText).not.toBeNull();
+      expect(marqueeText.querySelector('.marquee')).not.toBeNull();
+    });
+  });
 });

package/Input/tests/InputField-specs.js

@@ -25,7 +25,7 @@ describe('InputField Specs', function () {
     var inputField = _react.screen.getByLabelText('hello Input field');
     var expected = 'hello';
     var actual = inputField.textContent;
-    expect(actual).toBe(expected);
+    expect(actual).toContain(expected);
   });
   test('should callback onChange with `onChange` type when the text changes', /*#__PURE__*/_asyncToGenerator(function* () {
     var handleChange = jest.fn();
@@ -175,13 +175,13 @@ describe('InputField Specs', function () {
     var inputField = _react.screen.getByLabelText('hello Input field');
     var actual = inputField.textContent;
     var expected = 'hello';
-    expect(actual).toBe(expected);
+    expect(actual).toContain(expected);
   });
   test('should have dir equal to rtl when there is rtl text', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
       value: "\u05E9\u05D5\u05E2\u05DC \u05D4\u05D7\u05D5\u05DD \u05D4\u05D6\u05E8\u05D9\u05D6 \u05E7\u05E4\u05E5 \u05DE\u05E2\u05DC \u05D4\u05DB\u05DC\u05D1 \u05D4\u05E2\u05E6\u05DC\u05DF.\u05E6\u05D9\u05E4\u05D5\u05E8 \u05E2\u05E4\u05D4 \u05D4\u05E9\u05E2\u05D5\u05E2\u05D9\u05EA \u05E2\u05DD \u05E9\u05E7\u05D9"
     }));
-    var inputField = _react.screen.getByLabelText('שועל החום הזריז קפץ מעל הכלב העצלן.ציפור עפה השעועית עם שקי' + ' Input field').children.item(2);
+    var inputField = _react.screen.getByPlaceholderText('');
     var expectedAttribute = 'dir';
     var expectedValue = 'rtl';
     expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
@@ -310,4 +310,150 @@ describe('InputField Specs', function () {
     expect(key).toBe('ArrowLeft');
     expect(actual).toMatchObject(expected);
   }));
+  describe('marqueeContent', function () {
+    test('should not render a marquee node by default', function () {
+      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+          value: "hello"
+        })),
+        baseElement = _render2.baseElement;
+      var marqueeText = baseElement.querySelector('.marqueeText');
+      expect(marqueeText).toBeNull();
+    });
+    test('should render a marquee node when marqueeContent is true', function () {
+      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+          marqueeContent: true,
+          value: "hello"
+        })),
+        baseElement = _render3.baseElement;
+      var marqueeText = baseElement.querySelector('.marqueeText');
+      expect(marqueeText).not.toBeNull();
+      expect(marqueeText.querySelector('.marquee')).not.toBeNull();
+    });
+  });
+  describe('moveCaretToEnd', function () {
+    test('should move caret to end of value on mouse focus when caretToEndOnFocus is true', function () {
+      jest.useFakeTimers();
+      var value = 'hello';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        caretToEndOnFocus: true,
+        value: value
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var setSelectionRange = jest.spyOn(inputField, 'setSelectionRange');
+      _react.fireEvent.mouseDown(inputField);
+      (0, _react.act)(function () {
+        return jest.runOnlyPendingTimers();
+      });
+      expect(setSelectionRange).toHaveBeenCalledWith(value.length, value.length);
+      jest.useRealTimers();
+    });
+    test('should set scrollLeft to scrollWidth for LTR input when caretToEndOnFocus is true', function () {
+      jest.useFakeTimers();
+      var value = 'hello';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        caretToEndOnFocus: true,
+        value: value
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var scrollLeft = 0;
+      Object.defineProperty(inputField, 'scrollLeft', {
+        get: function get() {
+          return scrollLeft;
+        },
+        set: function set(v) {
+          scrollLeft = v;
+        },
+        configurable: true
+      });
+      Object.defineProperty(inputField, 'scrollWidth', {
+        get: function get() {
+          return 200;
+        },
+        configurable: true
+      });
+      _react.fireEvent.mouseDown(inputField);
+      (0, _react.act)(function () {
+        return jest.runOnlyPendingTimers();
+      });
+      expect(scrollLeft).toBe(200);
+      jest.useRealTimers();
+    });
+    test('should set scrollLeft to 0 for RTL input when caretToEndOnFocus is true', function () {
+      jest.useFakeTimers();
+      var rtlValue = 'שועל החום הזריז';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        caretToEndOnFocus: true,
+        value: rtlValue
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var scrollLeft = 999;
+      Object.defineProperty(inputField, 'scrollLeft', {
+        get: function get() {
+          return scrollLeft;
+        },
+        set: function set(v) {
+          scrollLeft = v;
+        },
+        configurable: true
+      });
+      Object.defineProperty(inputField, 'scrollWidth', {
+        get: function get() {
+          return 200;
+        },
+        configurable: true
+      });
+      _react.fireEvent.mouseDown(inputField);
+      (0, _react.act)(function () {
+        return jest.runOnlyPendingTimers();
+      });
+      expect(scrollLeft).toBe(0);
+      jest.useRealTimers();
+    });
+    test('should not move caret when caretToEndOnFocus is not set', function () {
+      jest.useFakeTimers();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        value: "hello"
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var setSelectionRange = jest.spyOn(inputField, 'setSelectionRange');
+      _react.fireEvent.mouseDown(inputField);
+      (0, _react.act)(function () {
+        return jest.runOnlyPendingTimers();
+      });
+      expect(setSelectionRange).not.toHaveBeenCalled();
+      jest.useRealTimers();
+    });
+  });
+  describe('decorator icons', function () {
+    test('should render iconBefore and iconAfter with data-input-icon attribute', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        iconBefore: "plus",
+        iconAfter: "minus"
+      }));
+      var icons = document.querySelectorAll('[data-input-icon]');
+      expect(icons).toHaveLength(2);
+    });
+    test('should not activate the input when iconBefore is clicked', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        iconBefore: "plus",
+        value: "hello"
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var icon = document.querySelector('[data-input-icon]');
+      var focusSpy = jest.spyOn(inputField, 'focus');
+      _react.fireEvent.mouseDown(icon);
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+    test('should not activate the input when iconAfter is clicked', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        iconAfter: "minus",
+        value: "hello"
+      }));
+      var inputField = _react.screen.getByPlaceholderText('');
+      var icon = document.querySelector('[data-input-icon]');
+      var focusSpy = jest.spyOn(inputField, 'focus');
+      _react.fireEvent.mouseDown(icon);
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+  });
 });

package/Input/tests/InputPopup-specs.js

@@ -47,7 +47,7 @@ describe('InputPopup Specs', function () {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.InputPopup, {
         defaultValue: strDefaultValue,
         open: true,
-        value: strValue
+        value: strValue || strDefaultValue
       })
     }));
     var actual = _react.screen.getByDisplayValue(strValue);

package/Item/Item.module.css

@@ -120,7 +120,8 @@
   line-height: 1.5em;
 }
 .item:global(.largeText) .label {
-  font-size: var(--primitive-font-size-54);
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.2em;
 }
 .item.large {
   /* Needed to prevent global class being added in the DOM */