@enact/limestone 1.3.0

package/Input/Input.js

@@ -0,0 +1,715 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.InputPopupBase = exports.InputPopup = exports.InputDecorator = exports.InputBase = exports.Input = void 0;
+var _handle = require("@enact/core/handle");
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _SpotlightContainerDecorator = require("@enact/spotlight/SpotlightContainerDecorator");
+var _AnnounceDecorator = require("@enact/ui/AnnounceDecorator");
+var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
+var _Toggleable = _interopRequireDefault(require("@enact/ui/Toggleable"));
+var _Layout = _interopRequireWildcard(require("@enact/ui/Layout"));
+var _classnames = _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 _Button = _interopRequireDefault(require("../Button"));
+var _Popup = _interopRequireDefault(require("../Popup"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _Heading = _interopRequireDefault(require("../Heading"));
+var _NumberField = _interopRequireDefault(require("./NumberField"));
+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"],
+  _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); }
+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 prepareInputEventPayload = function prepareInputEventPayload(ev) {
+  return {
+    value: ev.target.value
+  };
+};
+var isPasswordType = function isPasswordType(type) {
+  return type && type.includes('password');
+};
+
+/**
+ * Base component for providing text input in the form of a popup without button.
+ *
+ * @class InputPopupBase
+ * @memberof limestone/Input
+ * @ui
+ * @public
+ */
+var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
+  name: 'InputPopup',
+  propTypes: /** @lends limestone/Input.InputPopupBase.prototype */{
+    /**
+     * Passed by AnnounceDecorator for accessibility.
+     *
+     * @type {Object}
+     * @public
+     */
+    announce: _propTypes["default"].func,
+    /**
+     * Sets the hint string read when focusing the back button.
+     *
+     * @type {String}
+     * @default 'go to previous'
+     * @public
+     */
+    backButtonAriaLabel: _propTypes["default"].string,
+    /**
+     * Buttons to be included under the component.
+     *
+     * Typically, up to 3 buttons are used.
+     *
+     * @type {Element|Element[]}
+     * @public
+     */
+    buttons: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
+    /**
+     * Customize component style
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes["default"].object,
+    /**
+     * Initial value of the input.
+     *
+     * This value is used for setting the `defaultValue` of the `InputField`.
+     * @see {@link limestone/Input.InputField}
+     * @type {String|Number}
+     * @public
+     */
+    defaultValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    /**
+     * Disables the input popup.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * Sets spotlightId to InputField.
+     *
+     * @type {String}
+     * @public
+     */
+    inputFieldSpotlightId: _propTypes["default"].string,
+    /**
+     * Indicates the value is invalid and shows
+     * {@link limestone/Input.InputPopupBase.invalidMessage|invalidMessage}, if set.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    invalid: _propTypes["default"].bool,
+    /**
+     * The tooltip text to be displayed when the input is
+     * {@link limestone/Input.InputPopupBase.invalid|invalid}.
+     *
+     * If this value is *falsy*, the tooltip will be shown with the default message.
+     *
+     * @type {String}
+     * @default 'Please enter a valid value.'
+     * @public
+     */
+    invalidMessage: _propTypes["default"].string,
+    /**
+     * Set the length of number input field.
+     *
+     * Sets the amount of numbers this field will collect. Any number between 1 and 6
+     * (inclusive) will render individual number cells, greater than 6 will render a single box
+     * with numbers in it. This only has an effect on `'number'` and `'passwordnumber'` `type`
+     * and when `numberInputField` is `'auto'`.
+     *
+     * This value will override `minLength` and `maxLength`.
+     *
+     * @type {Number}
+     * @public
+     */
+    length: _propTypes["default"].number,
+    /**
+     * The maximum length of number input fields.
+     *
+     * Overridden by `length` value.
+     *
+     * @type {Number}
+     * @default 4
+     * @public
+     */
+    maxLength: _propTypes["default"].number,
+    /**
+     * The minimum length of number input fields.
+     *
+     * Overridden by `length` value.
+     *
+     * When smaller than `maxLength`, number type inputs will show a submit button and will not
+     * auto-submit when the length reaches `maxLength`. Defaults to the `maxLength` value.
+     *
+     * @type {Number}
+     * @public
+     */
+    minLength: _propTypes["default"].number,
+    /**
+     * Omits the back button.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noBackButton: _propTypes["default"].bool,
+    /**
+     * Omits the submit button.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noSubmitButton: _propTypes["default"].bool,
+    /**
+     * The type of numeric input to use.
+     *
+     * The default is to display separated digits when `length` is less than `7`. If `field` is
+     * set, a standard `InputField` will be used instead of the normal number input.
+     *
+     * This has no effect on other {@link limestone/Input.InputPopupBase.type|types}.
+     *
+     * @type {('auto'|'separated'|'joined'|'field')}
+     * @default 'auto'
+     * @public
+     */
+    numberInputField: _propTypes["default"].oneOf(['auto', 'separated', 'joined', 'field']),
+    /**
+     * Called before the input value is changed.
+     *
+     * The change can be prevented by calling `preventDefault` on the event.
+     *
+     * @type {Function}
+     * @public
+     */
+    onBeforeChange: _propTypes["default"].func,
+    /**
+     * Called when the input value is changed.
+     *
+     * @type {Function}
+     * @public
+     */
+    onChange: _propTypes["default"].func,
+    /**
+     * Called when the popup is closed.
+     *
+     * @type {Function}
+     * @public
+     */
+    onClose: _propTypes["default"].func,
+    /**
+     * Called when input is complete.
+     *
+     * @type {Function}
+     * @public
+     */
+    onComplete: _propTypes["default"].func,
+    /**
+     * Called when the popup is opened.
+     *
+     * @type {Function}
+     * @public
+     */
+    onOpenPopup: _propTypes["default"].func,
+    /**
+     * Opens the popup.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    open: _propTypes["default"].bool,
+    /**
+     * Text displayed when value is not set.
+     *
+     * @type {String}
+     * @public
+     */
+    placeholder: _propTypes["default"].string,
+    /**
+     * The "aria-label" for the popup when opened.
+     *
+     * @type {String}
+     * @public
+     */
+    popupAriaLabel: _propTypes["default"].string,
+    /**
+     * Type of popup.
+     *
+     * @type {('fullscreen'|'overlay')}
+     * @default 'fullscreen'
+     * @public
+     */
+    popupType: _propTypes["default"].oneOf(['fullscreen', 'overlay']),
+    /**
+     * Size of the input field.
+     *
+     * @type {('large'|'small')}
+     * @default 'small'
+     * @public
+     */
+    size: _propTypes["default"].oneOf(['small', 'large']),
+    /**
+     * Subtitle below the title of popup.
+     *
+     * @type {String}
+     * @default ''
+     * @public
+     */
+    subtitle: _propTypes["default"].string,
+    /**
+     * Title text of popup.
+     *
+     * @type {String}
+     * @default ''
+     * @public
+     */
+    title: _propTypes["default"].string,
+    /**
+     * Type of the input.
+     *
+     * @type {('text'|'password'|'number'|'passwordnumber'|'url'|'tel'|'passwordtel')}
+     * @default 'text'
+     * @public
+     */
+    type: _propTypes["default"].oneOf(['text', 'password', 'number', 'passwordnumber', 'url', 'tel', 'passwordtel'])
+  },
+  defaultProps: {
+    defaultValue: '',
+    popupType: 'fullscreen',
+    numberInputField: 'auto',
+    size: 'small',
+    subtitle: '',
+    title: '',
+    type: 'text'
+  },
+  styles: {
+    css: _InputModule["default"],
+    className: 'input',
+    publicClassNames: ['textField']
+  },
+  handlers: {
+    onShow: (0, _handle.handle)((0, _handle.forwardCustom)('onShow'), function (ev, _ref) {
+      var type = _ref.type;
+      return !type.includes('number');
+    }, function () {
+      return _spotlight["default"].setPointerMode(false);
+    }),
+    onNumberComplete: (0, _handle.handle)(function (ev, props) {
+      setTimeout(function () {
+        (0, _handle.forward)('onComplete', ev, props);
+        (0, _handle.forward)('onClose', ev, props);
+      }, 250);
+      return true;
+    }),
+    onInputKeyDown: (0, _handle.handle)((0, _handle.forKey)('enter'),
+    // Ensure that the source of the enter is the <input>
+    function (_ref2) {
+      var target = _ref2.target;
+      return target.nodeName === 'INPUT';
+    }, (0, _handle.forwardCustom)('onComplete', prepareInputEventPayload), (0, _handle.forwardCustom)('onClose'))
+  },
+  computed: {
+    buttons: function buttons(_ref3) {
+      var _buttons = _ref3.buttons;
+      return (0, _util.mapAndFilterChildren)(_buttons, function (button, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          shrink: true,
+          children: button
+        }, "button".concat(index));
+      }) || null;
+    },
+    maxLength: function maxLength(_ref4) {
+      var length = _ref4.length,
+        _maxLength = _ref4.maxLength;
+      return length || _maxLength;
+    },
+    minLength: function minLength(_ref5) {
+      var length = _ref5.length,
+        maxLength = _ref5.maxLength,
+        _minLength = _ref5.minLength;
+      if (length) return length;
+      if (_minLength != null) return _minLength;
+      if (maxLength != null) return maxLength;
+      return _util2.DEFAULT_LENGTH;
+    },
+    popupClassName: function popupClassName(_ref6) {
+      var popupType = _ref6.popupType,
+        type = _ref6.type,
+        styler = _ref6.styler;
+      return styler.join('inputPopup', popupType, type);
+    },
+    inputAreaClassName: function inputAreaClassName(_ref7) {
+      var buttons = _ref7.buttons,
+        styler = _ref7.styler;
+      return styler.join('inputArea', buttons ? 'withButtons' : '');
+    }
+  },
+  render: function render(_ref8) {
+    var announce = _ref8.announce,
+      backButtonAriaLabel = _ref8.backButtonAriaLabel,
+      buttons = _ref8.buttons,
+      children = _ref8.children,
+      css = _ref8.css,
+      defaultValue = _ref8.defaultValue,
+      disabled = _ref8.disabled,
+      inputAreaClassName = _ref8.inputAreaClassName,
+      inputFieldSpotlightId = _ref8.inputFieldSpotlightId,
+      noBackButton = _ref8.noBackButton,
+      noSubmitButton = _ref8.noSubmitButton,
+      numberInputField = _ref8.numberInputField,
+      onBeforeChange = _ref8.onBeforeChange,
+      onClose = _ref8.onClose,
+      onNumberComplete = _ref8.onNumberComplete,
+      onInputKeyDown = _ref8.onInputKeyDown,
+      onShow = _ref8.onShow,
+      open = _ref8.open,
+      placeholder = _ref8.placeholder,
+      popupAriaLabel = _ref8.popupAriaLabel,
+      popupClassName = _ref8.popupClassName,
+      popupType = _ref8.popupType,
+      size = _ref8.size,
+      subtitle = _ref8.subtitle,
+      title = _ref8.title,
+      type = _ref8.type,
+      maxLength = _ref8.maxLength,
+      minLength = _ref8.minLength,
+      rest = _objectWithoutProperties(_ref8, _excluded);
+    var id = "inputPopup";
+    var ariaLabelledBy = popupAriaLabel ? null : "".concat(id, "_title ").concat(id, "_subtitle");
+    var _extractInputFieldPro = (0, _util2.extractInputFieldProps)(_objectSpread({
+        disabled: disabled
+      }, rest)),
+      value = _extractInputFieldPro.value,
+      inputProps = _objectWithoutProperties(_extractInputFieldPro, _excluded2);
+    var numberMode = numberInputField !== 'field' && (type === 'number' || type === 'passwordnumber');
+    // Set up the back button
+    var backButton = !noBackButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+      "aria-label": backButtonAriaLabel == null ? (0, _$L["default"])('go to previous') : backButtonAriaLabel,
+      className: css.back,
+      css: css,
+      disabled: disabled,
+      icon: "arrowhookleft",
+      iconFlip: "auto",
+      onClick: onClose
+    }) : null;
+    var heading = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], {
+      id: "".concat(id, "_title"),
+      size: "title",
+      marqueeOn: "render",
+      alignment: "center",
+      className: css.title,
+      children: title
+    });
+    delete rest.length;
+    delete rest.onComplete;
+    delete rest.onOpenPopup;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "aria-owns": id,
+      className: css.inputPopupWrapper,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Popup["default"], {
+        id: id,
+        "aria-label": popupAriaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        css: css,
+        onClose: onClose,
+        onShow: onShow,
+        position: popupType === 'fullscreen' ? 'fullscreen' : 'center',
+        className: popupClassName,
+        noAlertRole: true,
+        noAnimation: true,
+        open: open,
+        role: "region",
+        children: [popupType === 'fullscreen' ? backButton : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout["default"], {
+          orientation: "vertical",
+          className: css.inputBody,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+            shrink: true,
+            className: css.titles,
+            children: [popupType === 'fullscreen' ? heading : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [backButton, heading]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], {
+              id: "".concat(id, "_subtitle"),
+              size: "subtitle",
+              marqueeOn: "render",
+              alignment: "center",
+              className: css.subtitle,
+              children: subtitle
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout.Cell, {
+            shrink: true,
+            className: inputAreaClassName,
+            children: [numberMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberField["default"], _objectSpread(_objectSpread({}, inputProps), {}, {
+              announce: announce,
+              buttonSize: popupType === 'fullscreen' ? 'large' : 'small',
+              maxLength: (0, _util2.limitNumberLength)(popupType, maxLength),
+              minLength: (0, _util2.limitNumberLength)(popupType, minLength),
+              defaultValue: defaultValue || value,
+              onBeforeChange: onBeforeChange,
+              onComplete: onNumberComplete,
+              showKeypad: true,
+              type: type === 'passwordnumber' ? 'password' : 'number',
+              numberInputField: numberInputField,
+              noSubmitButton: noSubmitButton
+            })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputField["default"], _objectSpread(_objectSpread({}, inputProps), {}, {
+              className: (0, _classnames["default"])(css.textField, _SpotlightContainerDecorator.spotlightDefaultClass),
+              css: css,
+              maxLength: maxLength,
+              minLength: minLength,
+              size: size,
+              autoFocus: true,
+              type: type,
+              defaultValue: defaultValue || value,
+              placeholder: placeholder,
+              onBeforeChange: onBeforeChange,
+              onKeyDown: onInputKeyDown,
+              spotlightId: inputFieldSpotlightId
+            })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+              shrink: true,
+              className: css.contentArea,
+              children: children
+            })]
+          }), buttons ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            shrink: true,
+            className: css.buttonArea,
+            children: buttons
+          }) : null]
+        })]
+      })
+    });
+  }
+});
+
+/**
+ * Base component for providing text input in the form of a popup.
+ *
+ * @class InputBase
+ * @memberof limestone/Input
+ * @ui
+ * @public
+ */
+var InputBase = exports.InputBase = (0, _kind["default"])({
+  name: 'Input',
+  propTypes: /** @lends limestone/Input.InputBase.prototype */{
+    /**
+     * Disables the button that activates the input popup.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    announce: _propTypes["default"].func,
+    /**
+     * Disables the button that activates the input popup.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * Text displayed when value is not set.
+     *
+     * @type {String}
+     * @default '-'
+     * @public
+     */
+    placeholder: _propTypes["default"].string,
+    /**
+     * The size of the input field.
+     *
+     * @type {('large'|'small')}
+     * @default 'small'
+     * @public
+     */
+    size: _propTypes["default"].oneOf(['small', 'large']),
+    /**
+     * Type of the input.
+     *
+     * @type {('text'|'password'|'number'|'passwordnumber'|'url'|'tel'|'passwordtel')}
+     * @default 'text'
+     * @public
+     */
+    type: _propTypes["default"].oneOf(['text', 'password', 'number', 'passwordnumber', 'url', 'tel', 'passwordtel']),
+    /**
+     * The value of the input.
+     *
+     * @see {@link limestone/Input.InputField}
+     * @type {String|Number}
+     * @public
+     */
+    value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  },
+  defaultProps: {
+    placeholder: '-',
+    type: 'text'
+  },
+  handlers: {
+    onClick: (0, _handle.handle)((0, _handle.forward)('onClick'), (0, _handle.forward)('onOpenPopup'))
+  },
+  computed: {
+    buttonAriaLabel: function buttonAriaLabel(_ref9) {
+      var placeholder = _ref9.placeholder,
+        type = _ref9.type,
+        value = _ref9.value;
+      if (value || value === 0) {
+        type = isPasswordType(type) ? 'password' : type;
+        return (0, _util2.calcAriaLabel)('', type, type === 'number' ? value.toString().split('') : value.toString());
+      }
+      return (0, _util2.calcAriaLabel)('', null, placeholder);
+    },
+    buttonLabel: function buttonLabel(_ref0) {
+      var placeholder = _ref0.placeholder,
+        type = _ref0.type,
+        value = _ref0.value;
+      if (value || value === 0) {
+        return isPasswordType(type) ? (0, _util2.convertToPasswordFormat)(value.toString()) : value.toString();
+      } else {
+        return placeholder;
+      }
+    }
+  },
+  render: function render(_ref1) {
+    var announce = _ref1.announce,
+      buttonAriaLabel = _ref1.buttonAriaLabel,
+      buttonLabel = _ref1.buttonLabel,
+      type = _ref1.type,
+      size = _ref1.size,
+      disabled = _ref1.disabled,
+      value = _ref1.value,
+      placeholder = _ref1.placeholder,
+      onClick = _ref1.onClick,
+      className = _ref1.className,
+      style = _ref1.style,
+      rest = _objectWithoutProperties(_ref1, _excluded3);
+    var ariaProps = (0, _util.extractAriaProps)(rest);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InputPopupBase, _objectSpread({
+        announce: announce,
+        type: type,
+        size: size,
+        disabled: disabled,
+        defaultValue: value,
+        placeholder: placeholder
+      }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({
+        size: size,
+        disabled: disabled,
+        className: className,
+        style: style,
+        onClick: onClick,
+        "aria-label": buttonAriaLabel
+      }, ariaProps), {}, {
+        children: buttonLabel
+      }))]
+    });
+  }
+});
+
+// eslint-disable-next-line no-shadow
+var AnnounceDecorator = function AnnounceDecorator(Wrapped) {
+  return function AnnounceDecorator(props) {
+    var _useAnnounce = (0, _AnnounceDecorator.useAnnounce)(),
+      announce = _useAnnounce.announce,
+      children = _useAnnounce.children;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, props), {}, {
+        announce: announce
+      })), children]
+    });
+  };
+};
+
+/**
+ * Limestone specific item behaviors to apply to {@link limestone/Input.InputBase|Input}.
+ *
+ * @class InputDecorator
+ * @hoc
+ * @memberof limestone/Input
+ * @mixes ui/Toggleable.Toggleable
+ * @mixes ui/Changeable.Changeable
+ * @mixes limestone/Skinnable.Skinnable
+ * @public
+ */
+var InputDecorator = exports.InputDecorator = (0, _compose["default"])(_Pure["default"], (0, _Toggleable["default"])({
+  activate: 'onOpenPopup',
+  deactivate: 'onClose',
+  prop: 'open'
+}), (0, _Slottable["default"])({
+  slots: ['buttons']
+}), (0, _Changeable["default"])({
+  change: 'onComplete'
+}), AnnounceDecorator, _Skinnable["default"]);
+
+/**
+ * Provides an input in the form of a popup.
+ *
+ * Usage:
+ * ```
+ * <Input
+ *   onComplete={this.handleInputComplete}
+ *   placeholder="Placeholder"
+ *   subtitle="TitleBelow"
+ *   title="Title"
+ * />
+ * ```
+ *
+ * By default, `Input` maintains the state of its `value` property. Supply the `defaultValue`
+ * property to control its initial value. If you wish to directly control updates to the
+ * component, supply a value to `value` at creation time and update it in response to `onChange`
+ * events.
+ *
+ * @class Input
+ * @memberof limestone/Input
+ * @extends limestone/Input.InputBase
+ * @ui
+ * @public
+ */
+var Input = exports.Input = InputDecorator(InputBase);
+
+/**
+ * Provides an input popup without button.
+ *
+ * Usage:
+ * ```
+ * <InputPopup
+ *   open={this.state.open}
+ *   onComplete={this.handleInputPopupComplete}
+ *   placeholder="Placeholder"
+ *   subtitle="Subtitle"
+ *   title="Title"
+ * />
+ * ```
+ *
+ * By default, `InputPopup` maintains the state of its `value` property. Supply the `defaultValue`
+ * property to control its initial value. If you wish to directly control updates to the
+ * component, supply a value to `value` at creation time and update it in response to `onChange`
+ * events.
+ *
+ * @class InputPopup
+ * @memberof limestone/Input
+ * @extends limestone/Input.InputPopupBase
+ * @ui
+ * @public
+ */
+var InputPopup = exports.InputPopup = InputDecorator(InputPopupBase);
+var _default = exports["default"] = Input;