@enact/limestone 1.3.0

package/Panels/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Header", {
+  enumerable: true,
+  get: function get() {
+    return _Header["default"];
+  }
+});
+Object.defineProperty(exports, "HeaderBase", {
+  enumerable: true,
+  get: function get() {
+    return _Header.HeaderBase;
+  }
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function get() {
+    return _Panel["default"];
+  }
+});
+Object.defineProperty(exports, "Panels", {
+  enumerable: true,
+  get: function get() {
+    return _Panels["default"];
+  }
+});
+Object.defineProperty(exports, "PanelsBase", {
+  enumerable: true,
+  get: function get() {
+    return _Panels["default"];
+  }
+});
+Object.defineProperty(exports, "Routable", {
+  enumerable: true,
+  get: function get() {
+    return _Routable["default"];
+  }
+});
+Object.defineProperty(exports, "Route", {
+  enumerable: true,
+  get: function get() {
+    return _Routable.Route;
+  }
+});
+exports["default"] = void 0;
+var _Routable = _interopRequireWildcard(require("@enact/ui/Routable"));
+var _Header = _interopRequireWildcard(require("./Header"));
+var _Panel = _interopRequireDefault(require("./Panel"));
+var _Panels = _interopRequireDefault(require("./Panels"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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); }
+/**
+ * Panels provides a way to manage different screens of an app.
+ *
+ * @module limestone/Panels
+ * @exports Header
+ * @exports Panel
+ * @exports Panels
+ * @exports PanelsBase
+ * @exports Routable
+ * @exports Route
+ */
+var _default = exports["default"] = _Panels["default"];

package/Panels/package.json

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

package/Panels/tests/Header-specs.js

@@ -0,0 +1,146 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Header = _interopRequireDefault(require("../Header"));
+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); }); }; }
+describe('Header Specs', function () {
+  test('should render with title text without changing case', function () {
+    var expected = 'cRaZy-cased super Header';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: expected
+      })
+    }));
+    var header = _react.screen.getByText(expected);
+    expect(header).toBeInTheDocument();
+  });
+  test('should support "wizard" type', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+      "data-testid": "header",
+      type: "wizard",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: "Wizard Header"
+      })
+    }));
+    var expected = 'wizard';
+    var header = _react.screen.getByTestId('header');
+    expect(header).toHaveClass(expected);
+  });
+  test('should support "compact" type', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+      "data-testid": "header",
+      type: "compact",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: "Compact Header"
+      })
+    }));
+    var expected = 'compact';
+    var header = _react.screen.getByTestId('header');
+    expect(header).toHaveClass(expected);
+  });
+  test('should have centered class applied when the centered prop is true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+      "data-testid": "header",
+      centered: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: "Centered Header"
+      })
+    }));
+    var expected = 'centered';
+    var header = _react.screen.getByTestId('header');
+    expect(header).toHaveClass(expected);
+  });
+  test('should support `slotAbove`', function () {
+    var expected = 'slot above';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Header["default"], {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("slotAbove", {
+        children: expected
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: "Slotted Header"
+      })]
+    }));
+    var slotAbove = _react.screen.getByText(expected);
+    var expectedClass = 'slotAbove';
+    expect(slotAbove).toHaveClass(expectedClass);
+  });
+  test('should support `slotBefore`', function () {
+    var expected = 'slot before';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Header["default"], {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("slotBefore", {
+        children: expected
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: "Slotted Header"
+      })]
+    }));
+    var slotBefore = _react.screen.getByText(expected).parentElement;
+    var expectedClass = 'slotBefore';
+    expect(slotBefore).toHaveClass(expectedClass);
+  });
+  test('should support `slotAfter`', function () {
+    var expected = 'slot after';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Header["default"], {
+      noCloseButton: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: "Slotted Header"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("slotAfter", {
+        children: expected
+      })]
+    }));
+    var slotAfter = _react.screen.getByText(expected).parentElement;
+    var expectedClass = 'slotAfter';
+    expect(slotAfter).toHaveClass(expectedClass);
+  });
+  test('should not render back button', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {}));
+    var backButton = _react.screen.queryByLabelText('go to previous');
+    expect(backButton).toBeNull();
+  });
+  test('should render close button when \'noCloseButton\' is not specified', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {}));
+    var closeButton = _react.screen.getByLabelText('Exit app');
+    expect(closeButton).toBeInTheDocument();
+  });
+  test('should not render close button when \'noCloseButton\' is set to true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+      noCloseButton: true
+    }));
+    var closeButton = _react.screen.queryByLabelText('Exit app');
+    expect(closeButton).toBeNull();
+  });
+  test('should call onClose when close button is clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleClose = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+      onClose: handleClose
+    }));
+    _react.fireEvent.click(_react.screen.getByRole('button'));
+    expect(handleClose).toHaveBeenCalled();
+    yield (0, _react.waitFor)(function () {
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  }));
+  test('should set close button "aria-label" to closeButtonAriaLabel', function () {
+    var label = 'custom close button label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+      closeButtonAriaLabel: label
+    }));
+    var closeButtonAriaLabel = _react.screen.getByLabelText(label);
+    var slotAfter = closeButtonAriaLabel.parentElement.parentElement;
+    expect(closeButtonAriaLabel).toBeInTheDocument();
+    expect(slotAfter).toHaveClass('slotAfter');
+  });
+  test('should set close button `shadowed` to true when `shadowed` is set to true', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {
+      shadowed: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
+        children: "title"
+      })
+    }));
+    var button = _react.screen.getByRole('button');
+    var expected = 'button shadowed';
+    expect(button).toHaveClass(expected);
+  });
+});

package/Panels/tests/Panels-specs.js

@@ -0,0 +1,257 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Header = _interopRequireDefault(require("../Header"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _Panels = _interopRequireDefault(require("../Panels"));
+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); }); }; }
+describe('Panels Specs', function () {
+  test('should set {autoFocus} on child to "default-element" on first render', function () {
+    var DivPanel = function DivPanel(_ref) {
+      var autoFocus = _ref.autoFocus,
+        id = _ref.id;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "panel",
+        id: id,
+        children: autoFocus
+      });
+    };
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
+      index: 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {})
+    }));
+    var expected = 'default-element';
+    var actual = _react.screen.getByTestId('panel').textContent;
+    expect(actual).toBe(expected);
+  });
+  test('should set {autoFocus} on child to "default-element" when navigating to a higher index', function () {
+    var DivPanel = function DivPanel(_ref2) {
+      var autoFocus = _ref2.autoFocus,
+        id = _ref2.id;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "panel",
+        id: id,
+        children: autoFocus
+      });
+    };
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        index: 0,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {
+          id: "p2"
+        })]
+      })),
+      rerender = _render.rerender;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {
+        id: "p2"
+      })]
+    }));
+    var expected = 'default-element';
+    var actual = _react.screen.getAllByTestId('panel')[0].textContent;
+    expect(actual).toBe(expected);
+  });
+  test('should not set {autoFocus} on child when navigating to a higher index when it has an autoFocus prop set', function () {
+    var DivPanel = function DivPanel(_ref3) {
+      var autoFocus = _ref3.autoFocus,
+        id = _ref3.id;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-testid": "panel",
+        id: id,
+        children: autoFocus
+      });
+    };
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        index: 0,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {
+          id: "p2",
+          autoFocus: "last-focused"
+        })]
+      })),
+      rerender = _render2.rerender;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DivPanel, {
+        id: "p2",
+        autoFocus: "last-focused"
+      })]
+    }));
+    var expected = 'last-focused';
+    var panel = _react.screen.getAllByTestId('panel')[0];
+    expect(panel.textContent).toBe(expected);
+    expect(panel.id).toBe('p2');
+  });
+  test('should return a ref to the root Panel node', function () {
+    var ref = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+      ref: ref
+    }));
+    var expected = 'ARTICLE';
+    var actual = ref.mock.calls[0][0].nodeName;
+    expect(actual).toBe(expected);
+  });
+  describe('with Panel and Header', function () {
+    test('should not render back button on the first panel', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
+        index: 0,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })
+      }));
+      var backButton = _react.screen.queryByLabelText('go to previous');
+      expect(backButton).toBeNull();
+    });
+    test('should render back button when not on the first panel', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        index: 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })]
+      }));
+      var backButton = _react.screen.getByLabelText('go to previous');
+      expect(backButton).toBeInTheDocument();
+    });
+    test('should fire `onBack` with `onBack` type when back clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+      var handleBack = jest.fn();
+      var user = _userEvent["default"].setup();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        index: 1,
+        onBack: handleBack,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })]
+      }));
+      yield user.click(_react.screen.getByLabelText('go to previous'));
+      var expected = {
+        type: 'onBack'
+      };
+      yield (0, _react.waitFor)(function () {
+        var actual = handleBack.mock.calls.length && handleBack.mock.calls[0][0];
+        expect(actual).toMatchObject(expected);
+      });
+    }));
+    test('should not render back button when not on the first panel and \'noBackButton\' is set to true', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        index: 1,
+        noBackButton: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })]
+      }));
+      var backButton = _react.screen.queryByLabelText('go to previous');
+      expect(backButton).toBeNull();
+    });
+    test('should not render back button when \'noBackButton\' is set on `Panel` 2', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        index: 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          noBackButton: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })]
+      }));
+      var backButton = _react.screen.queryByLabelText('go to previous');
+      expect(backButton).toBeNull();
+    });
+    test('should render back button on panel 3 when \'noBackButton\' is set on panel 2', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        index: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          noBackButton: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })]
+      }));
+      var backButton = _react.screen.getByLabelText('go to previous');
+      expect(backButton).toBeInTheDocument();
+    });
+    test('should set back button "aria-label" to backButtonAriaLabel', function () {
+      var label = 'custom back button label';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        backButtonAriaLabel: label,
+        index: 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })]
+      }));
+      var backButton = _react.screen.getByLabelText(label);
+      var backButtonContainer = backButton.parentElement.parentElement;
+      var expectedClass = 'slotBefore';
+      expect(backButton).toBeInTheDocument();
+      expect(backButtonContainer).toHaveClass(expectedClass);
+    });
+    test('should set back button "aria-label" to backButtonAriaLabel when defined only on a panel', function () {
+      var label = 'custom back button label';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Panels["default"], {
+        index: 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          backButtonAriaLabel: label,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })]
+      }));
+      var backButton = _react.screen.getByLabelText(label);
+      var backButtonContainer = backButton.parentElement.parentElement;
+      var expectedClass = 'slotBefore';
+      expect(backButton).toBeInTheDocument();
+      expect(backButtonContainer).toHaveClass(expectedClass);
+    });
+    test('should render close button', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
+        index: 0,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })
+      }));
+      var closeButton = _react.screen.getByLabelText('Exit app');
+      var closeButtonContainer = closeButton.parentElement.parentElement;
+      var expectedClass = 'slotAfter';
+      expect(closeButton).toBeInTheDocument();
+      expect(closeButtonContainer).toHaveClass(expectedClass);
+    });
+    test('should not render close button when \'noCloseButton\' is set to true', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
+        index: 0,
+        noCloseButton: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })
+      }));
+      var closeButton = _react.screen.queryByLabelText('Exit app');
+      expect(closeButton).toBeNull();
+    });
+    test('should set close button "aria-label" to closeButtonAriaLabel', function () {
+      var label = 'custom close button label';
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Panels["default"], {
+        closeButtonAriaLabel: label,
+        index: 0,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Panel["default"], {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header["default"], {})
+        })
+      }));
+      var closeButton = _react.screen.getByLabelText(label);
+      var closeButtonContainer = closeButton.parentElement.parentElement;
+      var expectedClass = 'slotAfter';
+      expect(closeButton).toBeInTheDocument();
+      expect(closeButtonContainer).toHaveClass(expectedClass);
+    });
+  });
+});

package/Picker/Picker.d.ts

@@ -0,0 +1,193 @@
+// Type definitions for limestone/Picker
+
+import * as React from "react";
+import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
+import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
+
+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 PickerBaseProps {
+  /**
+   * Picker value list.
+   */
+  children: React.ReactNode;
+  /**
+   * The  `aria-valuetext`  for the picker.
+   *
+   * By default,  `aria-valuetext`  is set to the current selected child text.
+   */
+  "aria-valuetext"?: string;
+  /**
+ * Determines which key to adjust the picker's value for the joined horizontal one.
+ * *  `'enter'`  allows the user to use the enter key to adjust the picker's value
+ * *  `'arrow'`  allows the user to use the left or right keys to adjust the picker's value.
+ * 
+ * The default value for joined horizontal picker is  `'enter'` .
+If    is  `'vertical'`  or
+   is undefined or is  `false` , this prop is ignored.
+ */
+  changedBy?: "enter" | "arrow";
+  /**
+ * 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:
+ * *  `title`  - The title component class
+ * *  `inlineTitle`  - The title component class when  `inlineTitle`  is true
+ */
+  css?: object;
+  /**
+ * The voice control labels for the  `children` .
+ * 
+ * By default,  `data-webos-voice-labels-ext`  is generated from  `children` . However, if
+ `children`  is not an array of numbers or strings,  `data-webos-voice-labels-ext`  should be
+set to an array of labels.
+ */
+  "data-webos-voice-labels-ext"?: number[] | string[];
+  /**
+ * A custom icon for the decrementer.
+ * 
+ * All strings supported by    are supported. Without a
+custom icon, the default is used, and is automatically changed when the
+   is changed.
+ */
+  decrementIcon?: string;
+  /**
+   * Disables the picker.
+   */
+  disabled?: boolean;
+  /**
+ * A custom icon for the incrementer.
+ * 
+ * All strings supported by    are supported. Without a
+custom icon, the default is used, and is automatically changed when the
+   is changed.
+ */
+  incrementIcon?: string;
+  /**
+   * Applies inline styling to the title.
+   */
+  inlineTitle?: boolean;
+  /**
+ * Allows the user to use the arrow keys or enter key to adjust the picker's value.
+ * 
+ * Key presses are captured in the directions of the increment and decrement buttons but
+others are unaffected. A non-joined Picker allows navigation in any direction, but
+requires individual ENTER presses on the incrementer and decrementer buttons. Pointer
+interaction is the same for both formats.
+ */
+  joined?: boolean;
+  /**
+ * Disables marqueeing of items.
+ * 
+ * By default, each picker item is wrapped by a
+  . When this is set, the items will
+not be wrapped.
+ */
+  marqueeDisabled?: boolean;
+  /**
+   * Disables transition animation.
+   */
+  noAnimation?: boolean;
+  /**
+   * Called when the  `value`  changes.
+   */
+  onChange?: Function;
+  /**
+   * Orientation of the picker.
+   *
+   * Controls whether the buttons are arranged horizontally or vertically around the value.
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+ * When  `true` , the picker buttons operate in the reverse direction such that pressing
+up/left decrements the value and down/right increments the value. This is more natural
+for vertical lists of text options where "up" implies a spatial change rather than
+incrementing the value.
+ * 
+ * If this prop is omitted, it will be determined by  `orientation` .
+For example, if  `orientation`  is  `vertical` ,  `reverse`  is  `true` .
+Conversely, if  `orientation`  is  `horizontal` ,  `reverse`  is  `false` .
+ */
+  reverse?: boolean;
+  /**
+   * The primary text of the  `Picker` .
+   *
+   * The screen readers read out the title text when the  `joined`  prop is false
+   */
+  title?: string;
+  /**
+ * The type of picker. It determines the aria-label for the next and previous buttons.
+ * 
+ * Depending on the  `type` ,  `joined` ,  `decrementAriaLabel` , and  `incrementAriaLabel` ,
+the screen readers read out differently when Spotlight is on the next button, the previous button,
+or the picker itself.
+ * 
+ * For example, if Spotlight is on the next button, the  `joined`  prop is false,
+and aria label props( `decrementAriaLabel`  and  `incrementAriaLabel` ) are not defined,
+then the screen readers read out as follows.
+ `'string'`  type:  `'next item'` 
+ `'number'`  type:  `'press ok button to increase the value'`
+ */
+  type?: "number" | "string";
+  /**
+   * Index of the selected child.
+   */
+  value?: number;
+  /**
+ * The width of the picker.
+ * 
+ * A number can be used to set the minimum number of characters to be shown. Setting a
+number to less than the number of characters in the longest value will cause the width to
+grow for the longer values.
+ * 
+ * A string can be used to select from pre-defined widths:
+ * *  `'small'`  - numeric values
+ * *  `'medium'`  - single or short words
+ * *  `'large'`  - maximum-sized pickers taking full width of its parent
+ * 
+ * By default, the picker will size according to the longest valid value.
+ */
+  width?: "small" | "medium" | "large" | number;
+  /**
+ * Allows picker to continue from the start of the list after it reaches the end and
+vice versa.
+ */
+  wrap?: boolean;
+}
+/**
+ * The base  `Picker`  component.
+ *
+ * This version is not   .
+ */
+
+export class PickerBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, PickerBaseProps>
+> {}
+
+export interface PickerProps
+  extends Merge<
+    Merge<PickerBaseProps, ui_Changeable_ChangeableProps>,
+    limestone_Marquee_MarqueeControllerProps
+  > {
+  /**
+   * Default index of the selected child.
+   *
+   * _Note_ : Changing  `defaultValue`  after initial render has no effect.
+   */
+  defaultValue?: number;
+}
+/**
+ * A Picker component that allows selecting values from a list of values.
+ * 
+ * By default,  `Picker`  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 Picker extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, PickerProps>
+> {}
+
+export default Picker;