@enact/limestone 1.9.3 → 1.10.1

package/IconItem/IconItem.module.css

@@ -170,8 +170,8 @@ Motion Mixins
   transform: scale(1.05);
   transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:not(.pressed),
-:global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:not(.pressed) {
+:global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:not(:pressed),
+:global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:not(:pressed) {
   transform: scale(1.1);
   transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
@@ -180,13 +180,29 @@ Motion Mixins
   transform: scale(1.05);
   transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:not(.pressed) {
+:global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:not(:pressed) {
   transform: scale(1.1);
   transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.noAnimation) .iconItem {
   transition: none;
 }
+.iconItem:global(.largeText).hasTitle {
+  height: calc( 5.33333rem + 1.45833rem + 24px);
+}
+.iconItem:global(.largeText) .icon {
+  height: 3.04167rem;
+  width: 3.04167rem;
+  line-height: 3.04167rem;
+}
+.iconItem:global(.largeText) .label {
+  font-size: var(--primitive-font-size-50);
+  line-height: 1.33333rem;
+}
+.iconItem:global(.largeText) .title {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 .iconItem:global(.neutral).bordered .content {
   border-color: var(--semantic-color-stroke-white);
 }

package/IconItem/tests/IconItem-specs.js

@@ -2,8 +2,9 @@
 
 require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
-var _IconItem = require("../IconItem");
+var _IconItem = _interopRequireWildcard(require("../IconItem"));
 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); }
 describe('IconItem', function () {
   test('should support `background` prop', function () {
     var background = '#ffffff';
@@ -103,4 +104,32 @@ describe('IconItem', function () {
     var actual = _react.screen.getByTestId('iconitem');
     expect(actual).toHaveClass(expected);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconItem["default"], {
+      "data-testid": "iconitem"
+    }));
+    var iconItem = _react.screen.getByTestId('iconitem');
+
+    // Select by key
+    _react.fireEvent.keyDown(iconItem, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(iconItem).toHaveClass('pressed');
+    _react.fireEvent.keyUp(iconItem, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(iconItem).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(iconItem);
+    expect(iconItem).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(iconItem);
+    expect(iconItem).not.toHaveClass('pressed');
+  });
 });

package/Image/Image.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.ImageDecorator = exports.ImageBase = exports.Image = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _util = require("@enact/core/util");
 var _Image = require("@enact/ui/Image");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _ForwardRef = _interopRequireDefault(require("@enact/ui/ForwardRef"));
@@ -106,7 +107,8 @@ var ImageBase = exports.ImageBase = (0, _kind["default"])({
 // another time. -B 2018-05-01
 var ResponsiveImageDecorator = (0, _hoc["default"])(function (config, Wrapped) {
   // eslint-disable-next-line no-shadow
-  var ResponsiveImageDecorator = function ResponsiveImageDecorator(props) {
+  var _ResponsiveImageDecorator = function ResponsiveImageDecorator(props) {
+    (0, _util.checkPropTypes)(_ResponsiveImageDecorator, props);
     var _useState = (0, _react.useState)((0, _resolution.selectSrc)(props.src)),
       _useState2 = _slicedToArray(_useState, 2),
       setSrc = _useState2[1];
@@ -122,11 +124,11 @@ var ResponsiveImageDecorator = (0, _hoc["default"])(function (config, Wrapped) {
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
   };
-  ResponsiveImageDecorator.displayName = 'ResponsiveImageDecorator';
-  ResponsiveImageDecorator.propTypes = {
+  _ResponsiveImageDecorator.displayName = 'ResponsiveImageDecorator';
+  _ResponsiveImageDecorator.propTypes = {
     src: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object])
   };
-  return ResponsiveImageDecorator;
+  return _ResponsiveImageDecorator;
 });
 
 /**

package/ImageItem/ImageItem.module.css

@@ -48,6 +48,23 @@
 :global(.enact-locale-vi) .imageItem .label {
   font-size: var(--primitive-font-size-36);
 }
+.imageItem:global(.largeText) .caption {
+  font-size: var(--primitive-font-size-72);
+  line-height: 2.08333rem;
+}
+.imageItem:global(.largeText) .label {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
+.imageItem:global(.largeText).vertical .selectionContainer .selectionIcon {
+  width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
+.imageItem:global(.largeText).vertical .imageIcon {
+  width: 3.3rem;
+  height: 3.3rem;
+}
 .imageItem.vertical.fullImage {
   border-radius: 0;
   padding: var(--primitive-spacing-60);

package/Input/Input.js

@@ -29,7 +29,7 @@ var _InputField = _interopRequireDefault(require("./InputField"));
 var _util2 = require("./util");
 var _InputModule = _interopRequireDefault(require("./Input.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["announce", "backButtonAriaLabel", "buttons", "children", "css", "defaultValue", "disabled", "inputAreaClassName", "inputFieldSpotlightId", "noBackButton", "noSubmitButton", "numberInputField", "onBeforeChange", "onClose", "onNumberComplete", "onInputKeyDown", "onShow", "open", "placeholder", "popupAriaLabel", "popupClassName", "popupType", "size", "subtitle", "title", "type", "maxLength", "minLength"],
+var _excluded = ["announce", "backButtonAriaLabel", "buttons", "children", "css", "defaultValue", "disabled", "inputAreaClassName", "inputFieldSpotlightId", "marqueeInputField", "noBackButton", "noSubmitButton", "numberInputField", "onBeforeChange", "onClose", "onNumberComplete", "onInputKeyDown", "onShow", "open", "placeholder", "popupAriaLabel", "popupClassName", "popupType", "size", "subtitle", "title", "type", "maxLength", "minLength"],
   _excluded2 = ["value"],
   _excluded3 = ["announce", "buttonAriaLabel", "buttonLabel", "type", "size", "disabled", "value", "placeholder", "onClick", "className", "style"];
 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); }
@@ -148,6 +148,14 @@ var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
      * @public
      */
     length: _propTypes["default"].number,
+    /**
+     * Wraps the `InputField`'s value display in a marquee.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    marqueeInputField: _propTypes["default"].bool,
     /**
      * The maximum length of number input fields.
      *
@@ -298,6 +306,7 @@ var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
   },
   defaultProps: {
     defaultValue: '',
+    marqueeInputField: false,
     popupType: 'fullscreen',
     numberInputField: 'auto',
     size: 'small',
@@ -384,6 +393,7 @@ var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
       disabled = _ref8.disabled,
       inputAreaClassName = _ref8.inputAreaClassName,
       inputFieldSpotlightId = _ref8.inputFieldSpotlightId,
+      marqueeInputField = _ref8.marqueeInputField,
       noBackButton = _ref8.noBackButton,
       noSubmitButton = _ref8.noSubmitButton,
       numberInputField = _ref8.numberInputField,
@@ -485,6 +495,7 @@ var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
               css: css,
               maxLength: maxLength,
               minLength: minLength,
+              marqueeContent: marqueeInputField,
               size: size,
               autoFocus: true,
               type: type,

package/Input/Input.module.css

@@ -80,6 +80,10 @@
 .inputPopup .inputArea .contentArea {
   /* Available for customization */
 }
+.inputPopup:global(.largeText) .tooltip .tooltipLabel {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 :global(.enact-locale-right-to-left) .inputPopup .keypad {
   direction: ltr;
 }
@@ -92,6 +96,9 @@
 .inputPopup .keypad .key .icon {
   font-size: var(--primitive-font-size-90);
 }
+.inputPopup .keypad .key .icon:global(.largeText) {
+  font-size: var(--primitive-font-size-108);
+}
 .inputPopup.fullscreen .back {
   top: var(--primitive-spacing-108);
   left: var(--primitive-spacing-132);
@@ -152,9 +159,6 @@
 :global(.enact-orientation-portrait) .inputPopup.fullscreen .keypad {
   margin: var(--primitive-spacing-132) auto 0 auto;
 }
-:global(.enact-text-large) .inputPopup.fullscreen .keypad .key {
-  height: 4rem;
-}
 .inputPopup.fullscreen .buttonArea {
   margin: 0;
   display: flex;
@@ -241,12 +245,6 @@
   justify-content: flex-end;
   column-gap: var(--primitive-spacing-60);
 }
-:global(.enact-text-large) .inputPopup.overlay .keypad {
-  width: 14.5rem;
-}
-:global(.enact-text-large) .inputPopup.overlay .keypad .key {
-  height: 4rem;
-}
 .inputPopup.overlay .buttonArea {
   align-items: center;
   display: flex;
@@ -257,6 +255,24 @@
 .inputPopup.overlay .tooltip .tooltipLabel {
   max-width: 15.375rem;
 }
+.inputPopup:global(.largeText).fullscreen .numberCell.password {
+  font-size: var(--primitive-font-size-56);
+}
+.inputPopup:global(.largeText).fullscreen .joined {
+  font-size: var(--primitive-font-size-94);
+}
+.inputPopup:global(.largeText).fullscreen .joined.password {
+  font-size: var(--primitive-font-size-56);
+}
+.inputPopup:global(.largeText).overlay .numberCell.password {
+  font-size: var(--primitive-font-size-48);
+}
+.inputPopup:global(.largeText).overlay .joined {
+  font-size: var(--primitive-font-size-94);
+}
+.inputPopup:global(.largeText).overlay .joined.password {
+  font-size: var(--primitive-font-size-48);
+}
 .inputPopup:global(.neutral) {
   background-color: var(--semantic-color-background-full-default);
 }

package/Input/InputField.js

@@ -13,11 +13,12 @@ var _AnnounceDecorator = require("@enact/ui/AnnounceDecorator");
 var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
 var _speech = require("@enact/webos/speech");
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames3 = _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 _Marquee = require("../Marquee");
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _Tooltip = _interopRequireDefault(require("../TooltipDecorator/Tooltip"));
 var _util2 = require("../internal/util");
@@ -26,7 +27,23 @@ var _InputFieldSpotlightDecorator = _interopRequireDefault(require("./InputField
 var _util3 = require("./util");
 var _InputFieldModule = _interopRequireDefault(require("./InputField.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["css", "dir", "disabled", "iconAfter", "iconBefore", "invalidTooltip", "onChange", "placeholder", "type", "value"];
+var _excluded = ["css", "dir", "disabled", "iconAfter", "iconBefore", "invalidTooltip", "marqueeContent", "onChange", "placeholder", "type", "value"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var MarqueeText = (0, _Marquee.MarqueeDecorator)({
+  css: {
+    text: _InputFieldModule["default"].marqueeTextInner,
+    animate: _InputFieldModule["default"].marqueeTextAnimate,
+    willAnimate: _InputFieldModule["default"].marqueeTextWillAnimate
+  }
+}, 'div');
+
 /**
  * A Limestone styled input component.
  *
@@ -38,17 +55,16 @@ var _excluded = ["css", "dir", "disabled", "iconAfter", "iconBefore", "invalidTo
  * @ui
  * @public
  */
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
   name: 'InputField',
   propTypes: /** @lends limestone/Input.InputFieldBase.prototype */{
+    /**
+     * Indicates the input is currently active/focused for editing
+     *
+     * @type {Boolean}
+     * @private
+     */
+    active: _propTypes["default"].bool,
     /**
      * Passed by AnnounceDecorator for accessibility.
      *
@@ -56,6 +72,14 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
      * @public
      */
     announce: _propTypes["default"].func,
+    /**
+     * Moves the caret to the end of the text when the input receives focus.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    caretToEndOnFocus: _propTypes["default"].bool,
     /**
      * Customizes the component by mapping the supplied collection of CSS class names to the
      * corresponding internal elements and states of this component.
@@ -128,6 +152,14 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
      * @public
      */
     invalidMessage: _propTypes["default"].string,
+    /**
+     * Wraps the input's value/placeholder display in a marquee.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    marqueeContent: _propTypes["default"].bool,
     /**
      * Called before the input value is changed.
      *
@@ -224,9 +256,12 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
   },
   defaultProps: {
+    active: false,
+    caretToEndOnFocus: false,
     disabled: false,
     dismissOnEnter: false,
     invalid: false,
+    marqueeContent: false,
     placeholder: '',
     size: 'small',
     type: 'text'
@@ -234,7 +269,7 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
   styles: {
     css: _InputFieldModule["default"],
     className: 'inputField',
-    publicClassNames: ['bg', 'inputField', 'input', 'inputHighlight', 'tooltip', 'tooltipLabel']
+    publicClassNames: ['bg', 'inputField', 'input', 'inputHighlight', 'inputWrapper', 'marqueeText', 'placeholderText', 'tooltip', 'tooltipLabel']
   },
   handlers: {
     onChange: (0, _handle.handle)((0, _handle.forwardCustomWithPrevent)('onBeforeChange', function (ev) {
@@ -266,14 +301,18 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
       return (0, _util3.calcAriaLabel)(title, type, value);
     },
     className: function className(_ref3) {
-      var iconAfter = _ref3.iconAfter,
+      var active = _ref3.active,
+        iconAfter = _ref3.iconAfter,
         iconBefore = _ref3.iconBefore,
         invalid = _ref3.invalid,
+        marqueeContent = _ref3.marqueeContent,
         size = _ref3.size,
         styler = _ref3.styler;
       return styler.append({
+        active: active,
         hasIconAfter: iconAfter,
         hasIconBefore: iconBefore,
+        hasMarquee: marqueeContent,
         invalid: invalid
       }, size);
     },
@@ -310,6 +349,7 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
       iconAfter = _ref7.iconAfter,
       iconBefore = _ref7.iconBefore,
       invalidTooltip = _ref7.invalidTooltip,
+      marqueeContent = _ref7.marqueeContent,
       onChange = _ref7.onChange,
       placeholder = _ref7.placeholder,
       type = _ref7.type,
@@ -321,7 +361,9 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
     if (type === 'password' || type === 'passwordtel') {
       inputProps.spellCheck = false;
     }
+    delete rest.active;
     delete rest.announce;
+    delete rest.caretToEndOnFocus;
     delete rest.dismissOnEnter;
     delete rest.invalid;
     delete rest.invalidMessage;
@@ -341,17 +383,24 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: css.inputHighlight,
         children: value ? value : placeholder
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), voiceProps), {}, {
-        "aria-hidden": isPasswordtel,
-        className: (0, _classnames2["default"])(css.input, _defineProperty({}, css.passwordtel, isPasswordtel)),
-        dir: dir,
-        disabled: disabled,
-        onChange: onChange,
-        placeholder: placeholder,
-        tabIndex: -1,
-        type: isPasswordtel ? 'tel' : type,
-        value: value
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFieldDecoratorIcon["default"], {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: css.inputWrapper,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), voiceProps), {}, {
+          "aria-hidden": isPasswordtel,
+          className: (0, _classnames3["default"])(css.input, _defineProperty({}, css.passwordtel, isPasswordtel)),
+          dir: dir,
+          disabled: disabled,
+          onChange: onChange,
+          placeholder: placeholder,
+          tabIndex: -1,
+          type: isPasswordtel ? 'tel' : type,
+          value: value
+        })), marqueeContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarqueeText, {
+          className: (0, _classnames3["default"])(css.marqueeText, _defineProperty(_defineProperty({}, css.passwordtel, isPasswordtel || type === 'password'), css.placeholderText, value === '')),
+          disabled: disabled,
+          children: value !== '' ? value : placeholder
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFieldDecoratorIcon["default"], {
         className: css.iconAfter,
         position: "after",
         size: "large",
@@ -387,7 +436,9 @@ var AnnounceDecorator = function AnnounceDecorator(Wrapped) {
  */
 var InputFieldDecorator = exports.InputFieldDecorator = (0, _compose["default"])(_Pure["default"], (0, _I18nDecorator.I18nContextDecorator)({
   rtlProp: 'rtl'
-}), _Changeable["default"], _InputFieldSpotlightDecorator["default"], AnnounceDecorator, _Skinnable["default"]);
+}), _Changeable["default"], _InputFieldSpotlightDecorator["default"], AnnounceDecorator, (0, _Marquee.MarqueeController)({
+  marqueeOnFocus: true
+}), _Skinnable["default"]);
 
 /**
  * A Spottable, Limestone styled input component with embedded icon support.