@enact/limestone 1.3.0 → 1.10.0

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',
@@ -337,7 +346,9 @@ var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
       return (0, _util.mapAndFilterChildren)(_buttons, function (button, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
           shrink: true,
-          children: button
+          children: /*#__PURE__*/(0, _react.cloneElement)(button, {
+            css: _InputModule["default"]
+          })
         }, "button".concat(index));
       }) || null;
     },
@@ -357,9 +368,14 @@ var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
     },
     popupClassName: function popupClassName(_ref6) {
       var popupType = _ref6.popupType,
+        subtitle = _ref6.subtitle,
+        title = _ref6.title,
         type = _ref6.type,
         styler = _ref6.styler;
-      return styler.join('inputPopup', popupType, type);
+      return styler.join('inputPopup', popupType, type, {
+        noTitle: !title,
+        noSubtitle: !subtitle
+      });
     },
     inputAreaClassName: function inputAreaClassName(_ref7) {
       var buttons = _ref7.buttons,
@@ -377,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,
@@ -478,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

@@ -93,23 +93,27 @@
   font-size: var(--primitive-font-size-90);
 }
 .inputPopup.fullscreen .back {
-  top: 2.25rem;
-  left: 2.75rem;
+  top: var(--primitive-spacing-108);
+  left: var(--primitive-spacing-132);
   right: initial;
 }
 :global(.enact-locale-right-to-left) .inputPopup.fullscreen .back {
   left: initial;
-  right: 2.75rem;
+  right: var(--primitive-spacing-132);
 }
 .inputPopup.fullscreen .inputBody {
-  padding: 2.25rem 5.25rem 0 5.25rem;
+  padding: calc(var(--primitive-spacing-156) - var(--primitive-spacing-48)) NaNrem - var(--primitive-spacing-72)) 0 NaNrem - var(--primitive-spacing-72));
 }
 :global(.enact-orientation-portrait) .inputPopup.fullscreen .inputBody {
-  padding: 1rem 1.25rem 0 1.25rem;
+  padding: calc(var(--primitive-spacing-96) - var(--primitive-spacing-48)) calc(var(--primitive-spacing-132) - var(--primitive-spacing-72)) 0 calc(var(--primitive-spacing-132) - var(--primitive-spacing-72));
 }
 .inputPopup.fullscreen .titles {
   height: 4.75rem;
 }
+:global(.enact-orientation-portrait) .inputPopup.fullscreen .titles {
+  margin-inline: var(--primitive-spacing-132);
+  width: initial;
+}
 .inputPopup.fullscreen .title {
   font-size: var(--primitive-font-size-108);
 }
@@ -117,7 +121,7 @@
   font-size: var(--primitive-font-size-108);
 }
 .inputPopup.fullscreen .separated {
-  gap: 1.25rem;
+  gap: var(--primitive-spacing-60);
 }
 .inputPopup.fullscreen .numberCell {
   width: 3.75rem;
@@ -188,6 +192,9 @@
 .inputPopup.overlay .body {
   padding: var(--primitive-spacing-84) var(--primitive-spacing-60);
 }
+.inputPopup.overlay:is(.noTitle, .noSubtitle) .titles {
+  height: 2.5rem;
+}
 .inputPopup.overlay .title {
   margin: 0 var(--primitive-spacing-144) 0 var(--primitive-spacing-144);
   font-size: var(--primitive-font-size-90);
@@ -196,11 +203,14 @@
   font-size: var(--primitive-font-size-90);
 }
 .inputPopup.overlay .inputArea {
-  margin: var(--primitive-spacing-60) 0 0 0;
+  margin: var(--primitive-spacing-60) 0 var(--primitive-spacing-24);
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+:has(.number, .passwordnumber, .withButtons) .inputPopup.overlay .inputArea {
+  margin-bottom: 0;
+}
 .inputPopup.overlay .inputArea .textField {
   width: 21.5rem;
 }
@@ -226,7 +236,7 @@
   font-size: var(--primitive-font-size-40);
 }
 .inputPopup.overlay .keypad {
-  margin: var(--primitive-spacing-132) 4.125rem 1.25rem 4.125rem;
+  margin: var(--primitive-spacing-132) 4.125rem var(--primitive-spacing-60) 4.125rem;
   width: 13rem;
   justify-content: flex-end;
   column-gap: var(--primitive-spacing-60);
@@ -238,6 +248,7 @@
   height: 4rem;
 }
 .inputPopup.overlay .buttonArea {
+  align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -320,6 +331,9 @@
 .inputPopup:global(.neutral).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+.inputPopup:global(.neutral).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.enact-a11y-high-contrast) .inputPopup:global(.neutral):global(.highContrast) {
   background-color: var(--semantic-color-background-full-default);
 }
@@ -394,6 +408,9 @@
 :global(.enact-a11y-high-contrast) .inputPopup:global(.neutral):global(.highContrast).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+:global(.enact-a11y-high-contrast) .inputPopup:global(.neutral):global(.highContrast).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 .inputPopup:global(.light) {
   background-color: var(--semantic-color-background-full-default);
 }
@@ -468,6 +485,9 @@
 .inputPopup:global(.light).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+.inputPopup:global(.light).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 .inputPopup:global(.game) {
   --semantic-color-surface-default: #2d224c;
   --semantic-color-surface-default-focused: #6d2fa1;
@@ -545,6 +565,9 @@
 .inputPopup:global(.game).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+.inputPopup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.green) .inputPopup:global(.game) {
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
@@ -621,6 +644,9 @@
 :global(.green) .inputPopup:global(.game).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+:global(.green) .inputPopup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.orange) .inputPopup:global(.game) {
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
@@ -697,3 +723,6 @@
 :global(.orange) .inputPopup:global(.game).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+:global(.orange) .inputPopup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-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,10 +301,18 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
       return (0, _util3.calcAriaLabel)(title, type, value);
     },
     className: function className(_ref3) {
-      var invalid = _ref3.invalid,
+      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);
     },
@@ -306,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,
@@ -317,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;
@@ -337,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",
@@ -383,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.