@enact/limestone 1.9.3 → 1.10.0

package/Dropdown/DropdownList.js

@@ -9,6 +9,7 @@ var _handle = require("@enact/core/handle");
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _WithRef = require("@enact/core/internal/WithRef");
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"));
 var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
@@ -17,12 +18,12 @@ var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _react = require("react");
 var _$L = _interopRequireDefault(require("../internal/$L"));
+var _util2 = require("../internal/util");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Item = _interopRequireDefault(require("../Item"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _VirtualList = _interopRequireDefault(require("../VirtualList"));
 var _DropdownModule = _interopRequireDefault(require("./Dropdown.module.css"));
-var _util = require("../internal/util");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["index"],
   _excluded2 = ["key"],
@@ -34,13 +35,21 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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 _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; }
 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 ReadyState = {
+  // Initial state. Scrolling and focusing pending
+  INIT: 0,
+  // Scroll requested
+  SCROLLED: 1,
+  // Focus completed or not required
+  DONE: 2
+};
 var isSelectedValid = exports.isSelectedValid = function isSelectedValid(_ref) {
   var children = _ref.children,
     selected = _ref.selected;
@@ -65,6 +74,31 @@ var indexFromKey = function indexFromKey(children, key) {
   }
   return index;
 };
+var stateReducer = function stateReducer(prevState, _ref3) {
+  var adjustedFocusIndex = _ref3.adjustedFocusIndex,
+    props = _ref3.props,
+    type = _ref3.type;
+  switch (type) {
+    case ReadyState.INIT:
+      return {
+        prevChildren: props.children,
+        prevFocused: adjustedFocusIndex,
+        prevSelected: props.selected,
+        prevSelectedKey: getKey(props),
+        ready: ReadyState.INIT
+      };
+    case ReadyState.SCROLLED:
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        ready: ReadyState.SCROLLED
+      });
+    case ReadyState.DONE:
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        ready: ReadyState.DONE
+      });
+    default:
+      return prevState;
+  }
+};
 var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
   name: 'DropdownListBase',
   propTypes: {
@@ -122,9 +156,9 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
     className: 'dropdownList'
   },
   handlers: {
-    itemRenderer: function itemRenderer(_ref3, props) {
-      var index = _ref3.index,
-        rest = _objectWithoutProperties(_ref3, _excluded);
+    itemRenderer: function itemRenderer(_ref4, props) {
+      var index = _ref4.index,
+        rest = _objectWithoutProperties(_ref4, _excluded);
       var children = props.children,
         selected = props.selected;
       var isSelected = index === selected;
@@ -159,16 +193,16 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
     }
   },
   computed: {
-    className: function className(_ref4) {
-      var children = _ref4.children,
-        styler = _ref4.styler,
-        width = _ref4.width;
+    className: function className(_ref5) {
+      var children = _ref5.children,
+        styler = _ref5.styler,
+        width = _ref5.width;
       return styler.append(typeof width === 'string' ? width : null, {
         verticalScrollbar: (children === null || children === void 0 ? void 0 : children.length) > 5
       });
     },
-    dataSize: function dataSize(_ref5) {
-      var children = _ref5.children;
+    dataSize: function dataSize(_ref6) {
+      var children = _ref6.children;
       return children ? children.length : 0;
     },
     // Note: Retaining this in case we need to support different item sizes for large text mode:
@@ -176,19 +210,19 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
     itemSize: function itemSize() {
       return 156;
     },
-    maxItems: function maxItems(_ref6) {
-      var children = _ref6.children;
+    maxItems: function maxItems(_ref7) {
+      var children = _ref7.children;
       return (children === null || children === void 0 ? void 0 : children.length) > 5;
     }
   },
-  render: function render(_ref7) {
-    var dataSize = _ref7.dataSize,
-      id = _ref7.id,
-      itemSize = _ref7.itemSize,
-      maxItems = _ref7.maxItems,
-      scrollTo = _ref7.scrollTo,
-      width = _ref7.width,
-      rest = _objectWithoutProperties(_ref7, _excluded3);
+  render: function render(_ref8) {
+    var dataSize = _ref8.dataSize,
+      id = _ref8.id,
+      itemSize = _ref8.itemSize,
+      maxItems = _ref8.maxItems,
+      scrollTo = _ref8.scrollTo,
+      width = _ref8.width,
+      rest = _objectWithoutProperties(_ref8, _excluded3);
     delete rest.children;
     delete rest.onSelect;
     delete rest.selected;
@@ -217,30 +251,23 @@ var DropdownListBase = exports.DropdownListBase = (0, _kind["default"])({
     });
   }
 });
-var ReadyState = {
-  // Initial state. Scrolling and focusing pending
-  INIT: 0,
-  // Scroll requested
-  SCROLLED: 1,
-  // Focus completed or not required
-  DONE: 2
-};
 var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped) {
   var WrappedWithRef = (0, _WithRef.WithRef)(Wrapped);
 
   // eslint-disable-next-line no-shadow
-  var DropdownListSpotlightDecorator = function DropdownListSpotlightDecorator(props) {
+  var _DropdownListSpotlightDecorator = function DropdownListSpotlightDecorator(props) {
+    (0, _util.checkPropTypes)(_DropdownListSpotlightDecorator, props);
     var clientSiblingRef = (0, _react.useRef)(null);
-    var _useState = (0, _react.useState)({
+    var _useReducer = (0, _react.useReducer)(stateReducer, {
         prevChildren: props.children,
         prevFocused: null,
         prevSelected: props.selected,
         prevSelectedKey: getKey(props),
         ready: isSelectedValid(props) ? ReadyState.INIT : ReadyState.DONE
       }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
     var scrollToRef = (0, _react.useRef)(function () {});
     var lastFocusedKey = (0, _react.useRef)(null);
     (0, _react.useEffect)(function () {
@@ -250,10 +277,8 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     var focusSelected = function focusSelected() {
-      setState(function (value) {
-        return _objectSpread(_objectSpread({}, value), {}, {
-          ready: ReadyState.DONE
-        });
+      dispatch({
+        type: ReadyState.DONE
       });
     };
     var resetFocus = (0, _react.useCallback)(function (keysDiffer) {
@@ -264,12 +289,10 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
           adjustedFocusIndex = targetIndex;
         }
       }
-      setState({
-        prevChildren: props.children,
-        prevFocused: adjustedFocusIndex,
-        prevSelected: props.selected,
-        prevSelectedKey: getKey(props),
-        ready: ReadyState.INIT
+      dispatch({
+        adjustedFocusIndex: adjustedFocusIndex,
+        props: props,
+        type: ReadyState.INIT
       });
     }, [props]);
     var scrollIntoView = (0, _react.useCallback)(function () {
@@ -287,10 +310,8 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
         // @lime-item-small-height * 2 (TODO: large text mode not supported!)
         stickTo: 'start' // offset from the top of the dropdown
       });
-      setState(function (value) {
-        return _objectSpread(_objectSpread({}, value), {}, {
-          ready: ReadyState.SCROLLED
-        });
+      dispatch({
+        type: ReadyState.SCROLLED
       });
     }, [props, state.prevFocused]);
     (0, _react.useEffect)(function () {
@@ -301,7 +322,7 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
       } else {
         var key = getKey(props);
         var keysDiffer = key && state.prevSelectedKey && key !== state.prevSelectedKey;
-        if (keysDiffer || (!key || !state.prevSelectedKey) && state.prevSelected !== props.selected || !(0, _util.compareChildren)(state.prevChildren, props.children)) {
+        if (keysDiffer || (!key || !state.prevSelectedKey) && state.prevSelected !== props.selected || !(0, _util2.compareChildren)(state.prevChildren, props.children)) {
           resetFocus(keysDiffer);
         }
       }
@@ -332,8 +353,8 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
       scrollTo: setScrollTo
     }));
   };
-  DropdownListSpotlightDecorator.displayName = 'DropdownListSpotlightDecorator';
-  DropdownListSpotlightDecorator.propTypes = {
+  _DropdownListSpotlightDecorator.displayName = 'DropdownListSpotlightDecorator';
+  _DropdownListSpotlightDecorator.propTypes = {
     /*
            * Passed by DropdownBase to resume Spotlight
            *
@@ -353,7 +374,7 @@ var DropdownListSpotlightDecorator = (0, _hoc["default"])(function (config, Wrap
            */
     selected: _propTypes2["default"].number
   };
-  return DropdownListSpotlightDecorator;
+  return _DropdownListSpotlightDecorator;
 });
 var DropdownListDecorator = (0, _compose["default"])(DropdownListSpotlightDecorator, (0, _IdProvider["default"])({
   generateProp: null,

package/FlexiblePopupPanels/useNavButtonFocus.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.NavButtonFocusDecorator = void 0;
 exports.useNavButtonFocus = useNavButtonFocus;
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = require("react");
 var _FlexiblePopupPanelsModule = _interopRequireDefault(require("./FlexiblePopupPanels.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["index"];
@@ -23,14 +23,11 @@ var prevButtonSelector = ".".concat(_FlexiblePopupPanelsModule["default"].navCel
 var nextButtonSelector = ".".concat(_FlexiblePopupPanelsModule["default"].navCellAfter, " .").concat(_FlexiblePopupPanelsModule["default"].navButton);
 function useNavButtonFocus(_ref) {
   var index = _ref.index;
+  var prevIndex = (0, _util.usePrevious)(index);
   var autoFocus;
-  var _useRef = (0, _react.useRef)({
-      index: index
-    }),
-    ref = _useRef.current;
 
   // on index change
-  if (index !== ref.index) {
+  if (index !== prevIndex) {
     var current = _spotlight["default"].getCurrent();
     // if the currently focused component is a nav button
     if (current && current.classList.contains(_FlexiblePopupPanelsModule["default"].navButton)) {
@@ -39,7 +36,6 @@ function useNavButtonFocus(_ref) {
       // set autoFocus to point to the selector for the appropriate button
       autoFocus = prevButtonFocused ? prevButtonSelector : nextButtonSelector;
     }
-    ref.index = index;
   }
   return {
     autoFocus: autoFocus
@@ -47,9 +43,10 @@ function useNavButtonFocus(_ref) {
 }
 var NavButtonFocusDecorator = exports.NavButtonFocusDecorator = function NavButtonFocusDecorator(Wrapped) {
   // eslint-disable-next-line no-shadow
-  function NavButtonFocusDecorator(_ref2) {
-    var index = _ref2.index,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  function NavButtonFocusDecorator(props) {
+    (0, _util.checkPropTypes)(NavButtonFocusDecorator, props);
+    var index = props.index,
+      rest = _objectWithoutProperties(props, _excluded);
     var nav = useNavButtonFocus({
       index: index
     });

package/Heading/Heading.d.ts

@@ -36,7 +36,7 @@ corresponding internal elements and states of this component.
  * If the  `spacing`  prop is not set (defaulting to "auto"), these values automatically set
 the spacing to the correlated names.
  */
-  size?: "large" | "medium" | "small" | "tiny";
+  size?: "large" | "medium" | "small" | "tiny" | "title" | "subtitle";
   /**
    * The size of the spacing around the Heading.
    *

package/Heading/Heading.js

@@ -86,11 +86,11 @@ var HeadingBase = exports.HeadingBase = (0, _kind["default"])({
      * If the `spacing` prop is not set (defaulting to "auto"), these values automatically set
      * the spacing to the correlated names.
      *
-     * @type {('large'|'medium'|'small'|'tiny')}
+     * @type {('large'|'medium'|'small'|'tiny'|'title'|'subtitle')}
      * @default 'tiny'
      * @public
      */
-    size: _propTypes["default"].oneOf(['large', 'medium', 'small', 'tiny']),
+    size: _propTypes["default"].oneOf(['large', 'medium', 'small', 'tiny', 'title', 'subtitle']),
     /**
      * The size for slotBefore and slotAfter.
      * This size is used for remeasuring marquee metrics for Panels.Header.

package/Icon/Icon.d.ts

@@ -364,6 +364,7 @@ filepdf
 filedoc
 filexls
 subtitleru
+f1
 mypageru
 };
 ```

package/Icon/Icon.js

@@ -511,6 +511,7 @@ var IconBase = exports.IconBase = (0, _kind["default"])({
  * filedoc
  * filexls
  * subtitleru
+ * f1
  * mypageru
 };
  * ```

package/Icon/IconList.js

@@ -631,5 +631,7 @@ var _default = exports["default"] = {
   // file_xls
   subtitleru: 0x10017F,
   // subtitleru
+  f1: 0x0F01F8,
+  // f1
   mypageru: 0x0F01F7 // mypageru
 };

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,7 +180,7 @@ 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);
 }

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/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,