@enact/limestone 1.3.0

package/Input/tests/InputField-specs.js

@@ -0,0 +1,292 @@
+"use strict";
+
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _ = require("../");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var isPaused = function isPaused() {
+  return _spotlight["default"].isPaused() ? 'paused' : 'not paused';
+};
+describe('InputField Specs', function () {
+  test('should have an input element', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {}));
+    var inputField = _react.screen.getByLabelText('Input field');
+    expect(inputField).toBeInTheDocument();
+  });
+  test('should include a placeholder if specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      placeholder: "hello"
+    }));
+    var inputField = _react.screen.getByLabelText('hello Input field');
+    var expected = 'hello';
+    var actual = inputField.textContent;
+    expect(actual).toBe(expected);
+  });
+  test('should callback onChange with `onChange` type when the text changes', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var value = 'blah';
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      onChange: handleChange
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    yield user.type(inputField, value);
+    var expected = {
+      type: 'onChange'
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(handleChange).toHaveBeenCalled();
+    expect(actual).toMatchObject(expected);
+  }));
+  test('should forward an event with a stopPropagation method from onChange handler', function () {
+    var handleChange = jest.fn();
+    var value = 'blah';
+    var evt = {
+      target: {
+        value: value
+      },
+      stopPropagation: jest.fn()
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      onChange: handleChange
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    _react.fireEvent.change(inputField, evt);
+    var actual = typeof handleChange.mock.calls[0][0].stopPropagation === 'function';
+    expect(actual).toBeTruthy();
+  });
+  test('should not bubble the native event when stopPropagation from onChange is called', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var value = 'smt';
+    function stop(ev) {
+      ev.stopPropagation();
+    }
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      onChange: handleChange,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+        onChange: stop
+      })
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    yield user.type(inputField, value);
+    expect(handleChange).not.toHaveBeenCalled();
+  }));
+  test('should callback onBeforeChange with `onBeforeChange` type before the text changes', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleBeforeChange = jest.fn();
+    var value = 'blah';
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      onBeforeChange: handleBeforeChange
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    yield user.type(inputField, value);
+    var expected = {
+      type: 'onBeforeChange'
+    };
+    var actual = handleBeforeChange.mock.calls.length && handleBeforeChange.mock.calls[0][0];
+    expect(handleBeforeChange).toHaveBeenCalled();
+    expect(actual).toMatchObject(expected);
+  }));
+  test('should prevent onChange if onBeforeChange prevents', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleBeforeChange = jest.fn(function (ev) {
+      return ev.preventDefault();
+    });
+    var handleChange = jest.fn();
+    var value = 'blah';
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      onBeforeChange: handleBeforeChange,
+      onChange: handleChange
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    yield user.type(inputField, value);
+    expect(handleChange).not.toHaveBeenCalled();
+  }));
+  test('should blur input on enter if dismissOnEnter', function () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      onBlur: handleChange,
+      dismissOnEnter: true
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    _react.fireEvent.mouseDown(inputField);
+    _react.fireEvent.keyUp(inputField, {
+      which: 13,
+      keyCode: 13,
+      code: 13
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
+  test('should activate input on enter', function () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      onActivate: handleChange
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    _react.fireEvent.keyDown(inputField, {
+      which: 13,
+      keyCode: 13,
+      code: 13
+    });
+    _react.fireEvent.keyUp(inputField, {
+      which: 13,
+      keyCode: 13,
+      code: 13
+    });
+    expect(handleChange).toHaveBeenCalled();
+  });
+  test('should not activate input on enter when disabled', function () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      disabled: true,
+      onActivate: handleChange
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    _react.fireEvent.keyDown(inputField, {
+      which: 13,
+      keyCode: 13,
+      code: 13
+    });
+    _react.fireEvent.keyUp(inputField, {
+      which: 13,
+      keyCode: 13,
+      code: 13
+    });
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+  test('should be able to be disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      disabled: true
+    }));
+    var actual = _react.screen.getByLabelText('Input field');
+    var expected = 'disabled';
+    expect(actual).toHaveAttribute(expected);
+  });
+  test('should reflect the value if specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      value: "hello"
+    }));
+    var inputField = _react.screen.getByLabelText('hello Input field');
+    var actual = inputField.textContent;
+    var expected = 'hello';
+    expect(actual).toBe(expected);
+  });
+  test('should have dir equal to rtl when there is rtl text', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      value: "\u05E9\u05D5\u05E2\u05DC \u05D4\u05D7\u05D5\u05DD \u05D4\u05D6\u05E8\u05D9\u05D6 \u05E7\u05E4\u05E5 \u05DE\u05E2\u05DC \u05D4\u05DB\u05DC\u05D1 \u05D4\u05E2\u05E6\u05DC\u05DF.\u05E6\u05D9\u05E4\u05D5\u05E8 \u05E2\u05E4\u05D4 \u05D4\u05E9\u05E2\u05D5\u05E2\u05D9\u05EA \u05E2\u05DD \u05E9\u05E7\u05D9"
+    }));
+    var inputField = _react.screen.getByLabelText('שועל החום הזריז קפץ מעל הכלב העצלן.ציפור עפה השעועית עם שקי' + ' Input field').children.item(2);
+    var expectedAttribute = 'dir';
+    var expectedValue = 'rtl';
+    expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
+  });
+  test('should have dir equal to ltr when there is ltr text', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      value: "content"
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    var expectedAttribute = 'dir';
+    var expectedValue = 'ltr';
+    expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
+  });
+  test('should have dir equal to rtl when there is rtl text in the placeholder', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      placeholder: "\u05E9\u05D5\u05E2\u05DC \u05D4\u05D7\u05D5\u05DD \u05D4\u05D6\u05E8\u05D9\u05D6 \u05E7\u05E4\u05E5 \u05DE\u05E2\u05DC \u05D4\u05DB\u05DC\u05D1 \u05D4\u05E2\u05E6\u05DC\u05DF.\u05E6\u05D9\u05E4\u05D5\u05E8 \u05E2\u05E4\u05D4 \u05D4\u05E9\u05E2\u05D5\u05E2\u05D9\u05EA \u05E2\u05DD \u05E9\u05E7\u05D9"
+    }));
+    var inputField = _react.screen.getByPlaceholderText('שועל החום הזריז קפץ מעל הכלב העצלן.ציפור עפה השעועית עם שקי');
+    var expectedAttribute = 'dir';
+    var expectedValue = 'rtl';
+    expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
+  });
+  test('should have dir equal to ltr when there is ltr text in the placeholder', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      placeholder: "content"
+    }));
+    var inputField = _react.screen.getByPlaceholderText('content');
+    var expectedAttribute = 'dir';
+    var expectedValue = 'ltr';
+    expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
+  });
+  test('should have dir equal to rtl when there is ltr text in the placeholder, but rtl text in value', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      placeholder: "content",
+      value: "\u05E9\u05D5\u05E2\u05DC \u05D4\u05D7\u05D5\u05DD \u05D4\u05D6\u05E8\u05D9\u05D6 \u05E7\u05E4\u05E5 \u05DE\u05E2\u05DC \u05D4\u05DB\u05DC\u05D1 \u05D4\u05E2\u05E6\u05DC\u05DF.\u05E6\u05D9\u05E4\u05D5\u05E8 \u05E2\u05E4\u05D4 \u05D4\u05E9\u05E2\u05D5\u05E2\u05D9\u05EA \u05E2\u05DD \u05E9\u05E7\u05D9"
+    }));
+    var inputField = _react.screen.getByPlaceholderText('content');
+    var expectedAttribute = 'dir';
+    var expectedValue = 'rtl';
+    expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
+  });
+  test('should have dir equal to ltr when there is rtl text in the placeholder, but ltr text in value', function () {
+    var placeholder = 'שועל החום הזריז קפץ מעל הכלב העצלן.ציפור עפה השעועית עם שקי';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      placeholder: placeholder,
+      value: "content"
+    }));
+    var inputField = _react.screen.getByPlaceholderText(placeholder);
+    var expectedAttribute = 'dir';
+    var expectedValue = 'ltr';
+    expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
+  });
+  test('should pause spotlight when input has focus', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {}));
+    var inputField = _react.screen.getByPlaceholderText('');
+    _react.fireEvent.mouseDown(inputField);
+    var expected = 'paused';
+    var actual = isPaused();
+    _spotlight["default"].resume();
+    expect(actual).toBe(expected);
+  });
+  test('should resume spotlight on unmount', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {})),
+      unmount = _render.unmount;
+    var inputField = _react.screen.getByPlaceholderText('');
+    _react.fireEvent.mouseDown(inputField);
+    unmount();
+    var expected = 'not paused';
+    var actual = isPaused();
+    _spotlight["default"].resume();
+    expect(actual).toBe(expected);
+  });
+  test('should display invalid message if it invalid and invalid message exists', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      invalid: true,
+      invalidMessage: "invalid message"
+    }));
+    var invalidText = _react.screen.getByText('invalid message').parentElement.parentElement;
+    var expected = 'tooltipLabel';
+    expect(invalidText).toBeInTheDocument();
+    expect(invalidText).toHaveClass(expected);
+  });
+  test('should not display invalid message if it is valid', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      invalidMessage: "invalid message"
+    }));
+    var actual = _react.screen.queryByText('invalid message');
+    expect(actual).toBeNull();
+  });
+  test('should set voice intent if specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      "data-webos-voice-intent": "Select"
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    var expectedAttribute = 'data-webos-voice-intent';
+    var expectedValue = 'Select';
+    expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
+  });
+  test('should set voice label if specified', function () {
+    var customLabel = 'input label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
+      "data-webos-voice-label": customLabel
+    }));
+    var inputField = _react.screen.getByPlaceholderText('');
+    var expectedAttribute = 'data-webos-voice-label';
+    expect(inputField).toHaveAttribute(expectedAttribute, customLabel);
+  });
+});

package/Input/tests/InputPopup-specs.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Input = require("../Input");
+var _jsxRuntime = require("react/jsx-runtime");
+var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+describe('InputPopup Specs', function () {
+  test('should be rendered opened if open is set to true', function () {
+    var placeholder = 'InputPopup Placeholder';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.InputPopup, {
+        open: true,
+        placeholder: placeholder
+      })
+    }));
+    var actual = _react.screen.getByPlaceholderText(placeholder);
+    expect(actual).toBeTruthy();
+  });
+  test('should set the input default value', function () {
+    var str = 'This is the default value';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.InputPopup, {
+        defaultValue: str,
+        open: true
+      })
+    }));
+    var actual = _react.screen.getByDisplayValue(str);
+    expect(actual).toBeTruthy();
+  });
+  test('should set the input value', function () {
+    var str = 'This is the value';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.InputPopup, {
+        open: true,
+        value: str
+      })
+    }));
+    var actual = _react.screen.getByDisplayValue(str);
+    expect(actual).toBeTruthy();
+  });
+  test('should set value instead defaultValue when both values are set', function () {
+    var strDefaultValue = 'This is the default value';
+    var strValue = 'This is the value';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.InputPopup, {
+        defaultValue: strDefaultValue,
+        open: true,
+        value: strValue
+      })
+    }));
+    var actual = _react.screen.getByDisplayValue(strValue);
+    expect(actual).toBeTruthy();
+  });
+});

package/Input/util.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.limitNumberLength = exports.extractInputProps = exports.extractInputFieldProps = exports.convertToPasswordFormat = exports.calcAriaLabel = exports.SEPARATE_DIGITS_LIMIT = exports.OVERLAY_JOINED_DIGITS_LIMIT = exports.FULLSCREEN_JOINED_DIGITS_LIMIT = exports.DEFAULT_LENGTH = void 0;
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _warning = _interopRequireDefault(require("warning"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// A default value for the numeric field length. Used by maxLength and minLength.
+var DEFAULT_LENGTH = exports.DEFAULT_LENGTH = 4;
+
+// The cutoff length, at which point the numeric field switches from separated boxes to one box
+var SEPARATE_DIGITS_LIMIT = exports.SEPARATE_DIGITS_LIMIT = 6;
+var OVERLAY_JOINED_DIGITS_LIMIT = exports.OVERLAY_JOINED_DIGITS_LIMIT = 10;
+var FULLSCREEN_JOINED_DIGITS_LIMIT = exports.FULLSCREEN_JOINED_DIGITS_LIMIT = 25;
+
+/**
+ * Determines the `aria-label` for an Input
+ *
+ * @method
+ * @memberof limestone/Input
+ * @param   {String}  prefix   Text to precede the value in the aria-label
+ * @param   {String}  type     `type` of the Input
+ * @param   {String}  [value]  Current value of the input
+ * @returns {String}           `aria-label` value
+ * @private
+ */
+var calcAriaLabel = exports.calcAriaLabel = function calcAriaLabel(prefix, type) {
+  var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var hint = (0, _$L["default"])('Input field');
+  if ((type === 'password' || type === 'passwordtel') && value) {
+    var character = value.length > 1 ? (0, _$L["default"])('characters') : (0, _$L["default"])('character');
+    value = "".concat(value.length, " ").concat(character);
+  }
+  return "".concat(prefix, " ").concat(value, " ").concat(hint);
+};
+var convertToPasswordFormat = exports.convertToPasswordFormat = function convertToPasswordFormat(value) {
+  var replacement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '*';
+  return replacement.repeat(value && value.length);
+};
+
+/**
+ * Removes `<InputField>` related props from `props` and returns them in a new object.
+ *
+ * Useful when redirecting `<InputField>` related props from a non-input root element to the
+ * `<InputField>` component.
+ *
+ * @method
+ * @memberof limestone/Input
+ * @param   {Object} props  Props object
+ * @returns {Object}        input related props
+ * @private
+ */
+var extractInputFieldProps = exports.extractInputFieldProps = function extractInputFieldProps(props) {
+  var inputProps = {};
+  Object.keys(props).forEach(function (key) {
+    switch (key) {
+      case 'autoComplete':
+      case 'data-webos-voice-group-label':
+      case 'data-webos-voice-intent':
+      case 'data-webos-voice-label':
+      case 'disabled':
+      case 'dismissOnEnter':
+      case 'iconAfter':
+      case 'iconBefore':
+      case 'invalid':
+      case 'invalidMessage':
+      case 'list':
+      case 'maxLength':
+      case 'minLength':
+      case 'onActivate':
+      case 'onChange':
+      case 'onBlur':
+      case 'onDeactivate':
+      case 'pattern':
+      case 'required':
+      case 'size':
+      case 'value':
+        inputProps[key] = props[key];
+        delete props[key];
+    }
+  });
+  return inputProps;
+};
+
+/**
+ * Removes `<input>` related props from `props` and returns them in a new object.
+ *
+ * Useful when redirecting `<input>` related props from a non-input root element to the `<input>`
+ * element.
+ *
+ * @method
+ * @memberof limestone/Input
+ * @param   {Object} props  Props object
+ * @returns {Object}        input related props
+ * @private
+ */
+var extractInputProps = exports.extractInputProps = function extractInputProps(props) {
+  var inputProps = {};
+  Object.keys(props).forEach(function (key) {
+    switch (key) {
+      case 'autoComplete':
+      case 'list':
+      case 'maxLength':
+      case 'minLength':
+      case 'pattern':
+      case 'required':
+      case 'size':
+        inputProps[key] = props[key];
+        delete props[key];
+    }
+  });
+  return inputProps;
+};
+var limitNumberLength = exports.limitNumberLength = function limitNumberLength(popupType, length) {
+  var limitedLength = length;
+  if (popupType === 'fullscreen') {
+    if (length > FULLSCREEN_JOINED_DIGITS_LIMIT) {
+      limitedLength = FULLSCREEN_JOINED_DIGITS_LIMIT;
+      process.env.NODE_ENV !== "production" ? (0, _warning["default"])(false, "Max length of fullscreen type input must not exceed ".concat(FULLSCREEN_JOINED_DIGITS_LIMIT, " digits.")) : void 0;
+    }
+  } else if (popupType === 'overlay') {
+    if (length > OVERLAY_JOINED_DIGITS_LIMIT) {
+      limitedLength = OVERLAY_JOINED_DIGITS_LIMIT;
+      process.env.NODE_ENV !== "production" ? (0, _warning["default"])(false, "Max length of overlay type input must not exceed ".concat(OVERLAY_JOINED_DIGITS_LIMIT, " digits.")) : void 0;
+    }
+  }
+  return limitedLength;
+};

package/Item/Item.d.ts

@@ -0,0 +1,108 @@
+// Type definitions for limestone/Item
+
+import { ItemDecoratorProps as ui_Item_ItemDecoratorProps } from "@enact/ui/Item";
+import { SlottableProps as ui_Slottable_SlottableProps } from "@enact/ui/Slottable";
+import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { ItemBaseProps as ui_Item_ItemBaseProps } from "@enact/ui/Item";
+import * as React from "react";
+
+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 ItemBaseProps extends ui_Item_ItemBaseProps {
+  /**
+   * Centers the slots and content.
+   */
+  centered?: boolean;
+  /**
+   * Called with a reference to the root component.
+   */
+  componentRef?: object | Function;
+  /**
+ * Customizes the component by mapping the supplied collection of CSS class names to the
+corresponding internal elements and states of this component.
+ * 
+ * The following classes are supported:
+ * *  `item`  - The root class name
+ * *  `slotBefore`  - The slot (container) preceding the text of this component
+ * *  `slotAfter`  - The slot (container) following the text of this component
+ * *  `selected`  - Applied to a  `selected`  button
+ */
+  css?: object;
+  /**
+   * Applies a disabled style and the control becomes non-interactive.
+   */
+  disabled?: boolean;
+  /**
+   * Applies inline styling to the item.
+   */
+  inline?: boolean;
+  /**
+   * The label to be displayed along with the text.
+   */
+  label?: React.ReactNode;
+  /**
+   * The position of the label relative to the primary content,  `children` .
+   */
+  labelPosition?: "above" | "after" | "before" | "below";
+  /**
+   * Determines what triggers the marquee to start its animation.
+   */
+  marqueeOn?: "focus" | "hover" | "render";
+  /**
+ * Nodes to be inserted after  `children` .
+ * 
+ * For LTR locales, the nodes are inserted to the right of the primary content. For RTL
+locales, the nodes are inserted to the left. If nothing is specified, nothing, not even
+an empty container, is rendered in this place.
+ */
+  slotAfter?: React.ReactNode;
+  /**
+ * Nodes to be inserted before  `children`  and  `label` .
+ * 
+ * For LTR locales, the nodes are inserted to the left of the primary content. For RTL
+locales, the nodes are inserted to the right. If nothing is specified, nothing, not even
+an empty container, is rendered in this place.
+ */
+  slotBefore?: React.ReactNode;
+}
+/**
+ * A Limestone styled item without any behavior.
+ */
+
+export class ItemBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ItemBaseProps>
+> {}
+
+export interface ItemDecoratorProps
+  extends Merge<
+    Merge<
+      Merge<
+        Merge<ui_Item_ItemDecoratorProps, ui_Slottable_SlottableProps>,
+        spotlight_Spottable_SpottableProps
+      >,
+      limestone_Marquee_MarqueeControllerProps
+    >,
+    limestone_Skinnable_SkinnableProps
+  > {}
+export function ItemDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ItemDecoratorProps>;
+
+export interface ItemProps extends Merge<ItemBaseProps, ItemDecoratorProps> {}
+/**
+ * A Limestone styled item with built-in support for marqueed text, and Spotlight focus.
+ * 
+ * Usage:
+ * ```
+<Item>Item Content</Item>
+```
+ */
+
+export class Item extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, ItemProps>
+> {}
+
+export default Item;