@enact/limestone 1.3.0

package/Input/index.d.ts

@@ -0,0 +1,423 @@
+// Type definitions for limestone/Input
+
+import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
+import * as React from "react";
+import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface InputFieldBaseProps {
+  /**
+   * Passed by AnnounceDecorator for accessibility.
+   */
+  announce?: Function;
+  /**
+   * Disables InputField and becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+   * Blurs the input when the "enter" key is pressed.
+   */
+  dismissOnEnter?: boolean;
+  /**
+   * The icon to be placed at the end of the input.
+   */
+  iconAfter?: string;
+  /**
+   * The icon to be placed at the beginning of the input.
+   */
+  iconBefore?: string;
+  /**
+ * Indicates    is invalid and shows
+  , if set.
+ */
+  invalid?: boolean;
+  /**
+ * The tooltip text to be displayed when the input is
+  .
+ * 
+ * If this value is  _falsy_ , the tooltip will be shown with the default message.
+ */
+  invalidMessage?: string;
+  /**
+   * Called before the input value is changed.
+   *
+   * The change can be prevented by calling  `preventDefault`  on the event.
+   */
+  onBeforeChange?: Function;
+  /**
+   * Called when blurred.
+   */
+  onBlur?: Function;
+  /**
+ * Called when the input value is changed.
+ * 
+ * The event payload includes the current  `value`  as well as a  `stopPropagation()`  method
+which may be called to stop the original  `onChange`  event from the  `<input>`  from
+bubbling.
+ */
+  onChange?: Function;
+  /**
+   * Called when clicked.
+   */
+  onClick?: Function;
+  /**
+   * Called when focused.
+   */
+  onFocus?: Function;
+  /**
+   * Called when a key is pressed down.
+   */
+  onKeyDown?: Function;
+  /**
+   * Text to display when    is not set.
+   */
+  placeholder?: string;
+  /**
+   * The size of the input field.
+   */
+  size?: "large" | "small";
+  /**
+   * The type of input.
+   *
+   * Accepted values correspond to the standard HTML5 input types.
+   */
+  type?: string;
+  /**
+   * The value of the input.
+   */
+  value?: string | number;
+}
+/**
+ * A Limestone styled input component.
+ * 
+ * It supports start and end icons, but it does not support Spotlight. Apps should use
+  .
+ */
+
+export class InputFieldBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, InputFieldBaseProps>
+> {}
+
+export interface InputPopupBaseProps {
+  /**
+   * Passed by AnnounceDecorator for accessibility.
+   */
+  announce?: object;
+  /**
+   * Sets the hint string read when focusing the back button.
+   */
+  backButtonAriaLabel?: string;
+  /**
+   * Buttons to be included under the component.
+   *
+   * Typically, up to 3 buttons are used.
+   */
+  buttons?: JSX.Element | JSX.Element[];
+  /**
+   * Customize component style
+   */
+  css?: object;
+  /**
+   * Initial value of the input.
+   *
+   * This value is used for setting the  `defaultValue`  of the  `InputField` .
+   */
+  defaultValue?: string | number;
+  /**
+   * Disables the input popup.
+   */
+  disabled?: boolean;
+  /**
+   * Sets spotlightId to InputField.
+   */
+  inputFieldSpotlightId?: string;
+  /**
+ * Indicates the value is invalid and shows
+  , if set.
+ */
+  invalid?: boolean;
+  /**
+ * The tooltip text to be displayed when the input is
+  .
+ * 
+ * If this value is  _falsy_ , the tooltip will be shown with the default message.
+ */
+  invalidMessage?: string;
+  /**
+ * 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` .
+ */
+  length?: number;
+  /**
+   * The maximum length of number input fields.
+   *
+   * Overridden by  `length`  value.
+   */
+  maxLength?: 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.
+ */
+  minLength?: number;
+  /**
+   * Omits the back button.
+   */
+  noBackButton?: boolean;
+  /**
+   * Omits the submit button.
+   */
+  noSubmitButton?: boolean;
+  /**
+ * 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   .
+ */
+  numberInputField?: "auto" | "separated" | "joined" | "field";
+  /**
+   * Called before the input value is changed.
+   *
+   * The change can be prevented by calling  `preventDefault`  on the event.
+   */
+  onBeforeChange?: Function;
+  /**
+   * Called when the input value is changed.
+   */
+  onChange?: Function;
+  /**
+   * Called when the popup is closed.
+   */
+  onClose?: Function;
+  /**
+   * Called when input is complete.
+   */
+  onComplete?: Function;
+  /**
+   * Called when the popup is opened.
+   */
+  onOpenPopup?: Function;
+  /**
+   * Opens the popup.
+   */
+  open?: boolean;
+  /**
+   * Text displayed when value is not set.
+   */
+  placeholder?: string;
+  /**
+   * The "aria-label" for the popup when opened.
+   */
+  popupAriaLabel?: string;
+  /**
+   * Type of popup.
+   */
+  popupType?: "fullscreen" | "overlay";
+  /**
+   * Size of the input field.
+   */
+  size?: "large" | "small";
+  /**
+   * Subtitle below the title of popup.
+   */
+  subtitle?: string;
+  /**
+   * Title text of popup.
+   */
+  title?: string;
+  /**
+   * Type of the input.
+   */
+  type?:
+    | "text"
+    | "password"
+    | "number"
+    | "passwordnumber"
+    | "url"
+    | "tel"
+    | "passwordtel";
+}
+/**
+ * Base component for providing text input in the form of a popup without button.
+ */
+
+export class InputPopupBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, InputPopupBaseProps>
+> {}
+
+export interface InputFieldDecoratorProps
+  extends Merge<
+    ui_Changeable_ChangeableProps,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function InputFieldDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & InputFieldDecoratorProps>;
+
+export interface InputFieldProps
+  extends Merge<
+    Merge<
+      Merge<InputFieldBaseProps, ui_Changeable_ChangeableProps>,
+      spotlight_Spottable_SpottableProps
+    >,
+    limestone_Skinnable_SkinnableProps
+  > {
+  /**
+ * Focuses the internal input when the component gains 5-way focus.
+ * 
+ * By default, the internal input is not editable when the component is focused via 5-way and must
+be selected to become interactive. In pointer mode, the input will be editable when clicked.
+ */
+  autoFocus?: boolean;
+  /**
+   * Applies a disabled style and prevents interacting with the component.
+   */
+  disabled?: boolean;
+  /**
+   * Sets the initial value.
+   */
+  defaultValue?: string;
+  /**
+   * Blurs the input when the "enter" key is pressed.
+   */
+  dismissOnEnter?: boolean;
+  /**
+   * Called when the internal input is focused.
+   */
+  onActivate?: Function;
+  /**
+   * Called when the internal input loses focus.
+   */
+  onDeactivate?: Function;
+  /**
+   * Called when the component is removed when it had focus.
+   */
+  onSpotlightDisappear?: Function;
+  /**
+   * Disables spotlight navigation into the component.
+   */
+  spotlightDisabled?: boolean;
+}
+/**
+ * A Spottable, Limestone styled input component with embedded icon support.
+ * 
+ * By default,  `InputField`  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.
+ */
+
+export class InputField extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, InputFieldProps>
+> {}
+
+export interface InputBaseProps {
+  /**
+   * Disables the button that activates the input popup.
+   */
+  disabled?: boolean;
+  /**
+   * Text displayed when value is not set.
+   */
+  placeholder?: string;
+  /**
+   * The size of the input field.
+   */
+  size?: "large" | "small";
+  /**
+   * Type of the input.
+   */
+  type?:
+    | "text"
+    | "password"
+    | "number"
+    | "passwordnumber"
+    | "url"
+    | "tel"
+    | "passwordtel";
+  /**
+   * The value of the input.
+   */
+  value?: string | number;
+}
+/**
+ * Base component for providing text input in the form of a popup.
+ */
+
+export class InputBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, InputBaseProps>
+> {}
+
+export interface InputDecoratorProps
+  extends Merge<
+    Merge<ui_Toggleable_ToggleableProps, ui_Changeable_ChangeableProps>,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function InputDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & InputDecoratorProps>;
+
+export interface InputProps extends InputBaseProps {}
+/**
+ * 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.
+ */
+
+export class Input extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, InputProps>
+> {}
+
+export interface InputPopupProps extends InputPopupBaseProps {}
+/**
+ * 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.
+ */
+
+export class InputPopup extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, InputPopupProps>
+> {}
+
+export default Input;

package/Input/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.Input;
+  }
+});
+Object.defineProperty(exports, "InputBase", {
+  enumerable: true,
+  get: function get() {
+    return _Input.InputBase;
+  }
+});
+Object.defineProperty(exports, "InputDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _Input.InputDecorator;
+  }
+});
+Object.defineProperty(exports, "InputField", {
+  enumerable: true,
+  get: function get() {
+    return _InputField.InputField;
+  }
+});
+Object.defineProperty(exports, "InputFieldBase", {
+  enumerable: true,
+  get: function get() {
+    return _InputField.InputFieldBase;
+  }
+});
+Object.defineProperty(exports, "InputFieldDecorator", {
+  enumerable: true,
+  get: function get() {
+    return _InputField.InputFieldDecorator;
+  }
+});
+Object.defineProperty(exports, "InputPopup", {
+  enumerable: true,
+  get: function get() {
+    return _Input.InputPopup;
+  }
+});
+Object.defineProperty(exports, "InputPopupBase", {
+  enumerable: true,
+  get: function get() {
+    return _Input.InputPopupBase;
+  }
+});
+Object.defineProperty(exports, "calcAriaLabel", {
+  enumerable: true,
+  get: function get() {
+    return _util.calcAriaLabel;
+  }
+});
+Object.defineProperty(exports, "convertToPasswordFormat", {
+  enumerable: true,
+  get: function get() {
+    return _util.convertToPasswordFormat;
+  }
+});
+exports["default"] = void 0;
+Object.defineProperty(exports, "extractInputFieldProps", {
+  enumerable: true,
+  get: function get() {
+    return _util.extractInputFieldProps;
+  }
+});
+var _Input = require("./Input");
+var _InputField = require("./InputField");
+var _util = require("./util");
+/**
+ * Popup style inputs for text and numbers.
+ *
+ * @module limestone/Input
+ * @exports Input
+ * @exports InputBase
+ * @exports InputDecorator
+ * @exports InputField
+ * @exports InputFieldBase
+ * @exports InputFieldDecorator
+ */
+var _default = exports["default"] = _Input.Input;

package/Input/package.json

@@ -0,0 +1,3 @@
+{
+    "main": "index.js"
+}

package/Input/pointer.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.releasePointer = exports.lockPointer = void 0;
+var _handle = require("@enact/core/handle");
+var active;
+var capturedDown = false;
+
+// if there is a focused input (there should be) and the target is not the input
+var shouldCapture = function shouldCapture(_ref) {
+  var target = _ref.target;
+  return active && target !== active;
+};
+var isCapturing = function isCapturing() {
+  return capturedDown && active;
+};
+var setCapturing = function setCapturing(capturing) {
+  return (0, _handle.returnsTrue)(function () {
+    return capturedDown = capturing;
+  });
+};
+var handlePointerDown = (0, _handle.handle)(shouldCapture,
+// If we should capture the click
+_handle.preventDefault,
+// prevent the down event bubbling
+_handle.stop,
+// (and stop propagation to support touch)
+setCapturing(true) // and flag that we've started capturing a down event
+);
+var handlePointerUp = (0, _handle.handle)(isCapturing,
+// if a down event was captured
+_handle.preventDefault,
+// prevent the up event bubbling
+_handle.stop // (and stop propagation to support touch)
+);
+
+// This is attached to both click and touchend. On some systems (e.g. Chrome), click events are
+// fired when you touch anything but other systems (e.g. iOS) will only emit click events when you
+// touch a clickable component (something with a tabindex). By attaching the same handler to both,
+// we ensure that we do not leave this module in an unstable state where it thinks capturing is
+// active but focus is not on the input.
+var handleTap = (0, _handle.handle)(isCapturing,
+// if a down event was captured
+_handle.stop,
+// prevent the click event from propagating
+_handle.preventDefault,
+// prevent touchend from triggering a click after releasing lock
+setCapturing(false),
+// clear the capturing flag
+function () {
+  return active.blur();
+} // and blur the active node
+);
+var handleTouchStart = (0, _handle.handle)(shouldCapture,
+// If we should capture the click
+_handle.stop,
+// prevent other components from handling this event
+setCapturing(true) // and flag that we've started capturing a down event
+);
+
+// Lock the pointer from emitting click events until released
+var lockPointer = exports.lockPointer = function lockPointer(target) {
+  active = target;
+  document.addEventListener('mousedown', handlePointerDown, {
+    capture: true
+  });
+  document.addEventListener('mouseup', handlePointerUp, {
+    capture: true
+  });
+  document.addEventListener('touchstart', handleTouchStart, {
+    capture: true
+  });
+  document.addEventListener('touchend', handleTap, {
+    capture: true
+  });
+  document.addEventListener('click', handleTap, {
+    capture: true
+  });
+};
+
+// Release the pointer and allow subsequent click events
+var releasePointer = exports.releasePointer = function releasePointer(target) {
+  if (target === active) {
+    active = null;
+    document.removeEventListener('mousedown', handlePointerDown, {
+      capture: true
+    });
+    document.removeEventListener('mouseup', handlePointerUp, {
+      capture: true
+    });
+    document.removeEventListener('touchstart', handleTouchStart, {
+      capture: true
+    });
+    document.removeEventListener('touchend', handleTap, {
+      capture: true
+    });
+    document.removeEventListener('click', handleTap, {
+      capture: true
+    });
+  }
+};