@enact/limestone 1.3.0

package/DayPicker/DaySelectorDecorator.js

@@ -0,0 +1,301 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DaySelectorDecorator = void 0;
+exports.getSelectedDayString = getSelectedDayString;
+var _handle = require("@enact/core/handle");
+var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _util = require("@enact/core/util");
+var _i18n = _interopRequireDefault(require("@enact/i18n"));
+var _DateFmt = _interopRequireDefault(require("ilib/lib/DateFmt"));
+var _LocaleInfo = _interopRequireDefault(require("ilib/lib/LocaleInfo"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["dayNameLength", "locale", "selected"];
+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 SELECTED_DAY_TYPES = {
+  EVERY_DAY: 0,
+  EVERY_WEEKDAY: 1,
+  EVERY_WEEKEND: 2,
+  SELECTED_DAYS: 3,
+  SELECTED_NONE: 4
+};
+function localizeDay(day, firstDayOfWeek) {
+  return (day - firstDayOfWeek + 7) % 7;
+}
+function generalizeDay(day, firstDayOfWeek) {
+  return (day + firstDayOfWeek) % 7;
+}
+
+// Accepts a localized array with "firstDayOfWeek" at index 0 and returns a
+// "Sunday at index 0" array.
+function generalizeSelected(selected, state) {
+  if (state.firstDayOfWeek === 0 || !selected) {
+    return selected;
+  }
+  return selected.map(function (v) {
+    return generalizeDay(v, state.firstDayOfWeek);
+  }).sort();
+}
+
+// Accepts a "Sunday at index 0" selected array or number and returns a
+// localized array or number.
+function localizeSelected(selected, state) {
+  if (state.firstDayOfWeek === 0 || selected == null) {
+    return selected;
+  }
+  if (typeof selected === 'number') {
+    return localizeDay(selected, state.firstDayOfWeek);
+  }
+  return selected.map(function (v) {
+    return localizeDay(v, state.firstDayOfWeek);
+  });
+}
+var memoLocaleState = (0, _util.memoize)(function (key, dayNameLength) {
+  var df = new _DateFmt["default"]({
+    length: 'full'
+  });
+  var sdf = new _DateFmt["default"]({
+    length: dayNameLength
+  });
+  var li = new _LocaleInfo["default"](_i18n["default"].getLocale());
+  var daysOfWeek = df.getDaysOfWeek();
+  var days = sdf.getDaysOfWeek();
+  var firstDayOfWeek = li.getFirstDayOfWeek();
+  var state = {
+    abbreviatedDayNames: days,
+    firstDayOfWeek: firstDayOfWeek,
+    fullDayNames: daysOfWeek,
+    weekendEnd: 0,
+    weekendStart: 6
+  };
+  if (li.getWeekEndStart) {
+    state.weekendStart = li.getWeekEndStart();
+  }
+  if (li.getWeekEndEnd) {
+    state.weekendEnd = li.getWeekEndEnd();
+  }
+  return state;
+});
+
+// Accepts an array of names in "sunday at index 0" and returns a localized array
+function orderDays(names, state) {
+  var result = [];
+  for (var i = 0; i < 7; i++) {
+    var index = generalizeDay(i, state.firstDayOfWeek);
+    result[i] = names[index];
+  }
+  return result;
+}
+function getLocaleState(dayNameLength, locale) {
+  if (typeof window === 'undefined') {
+    return {
+      abbreviatedDayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+      firstDayOfWeek: 0,
+      fullDayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+      weekendEnd: 0,
+      weekendStart: 6
+    };
+  }
+  return memoLocaleState(dayNameLength + locale, dayNameLength);
+}
+
+/*
+ * Determines which day type should be returned, based on the selected indices.
+ *
+ * @param {Number[]} [selected] Array of day indexes
+ * @param {String[]} [dayNameLength] The format for names of days
+ * @param {String[]} [locale]
+ *
+ * @returns {Number}
+ */
+function calcSelectedDayType(selected, state) {
+  if (selected == null || !Array.isArray(selected)) return SELECTED_DAY_TYPES.SELECTED_NONE;
+  var weekendStart = false,
+    weekendEnd = false,
+    index;
+  var length = selected.length,
+    weekendLength = state.weekendStart === state.weekendEnd ? 1 : 2;
+  if (length === 0) return SELECTED_DAY_TYPES.SELECTED_NONE;
+  if (length === 7) return SELECTED_DAY_TYPES.EVERY_DAY;
+  for (var i = 0; i < length; i++) {
+    index = selected[i];
+    weekendStart = weekendStart || state.weekendStart === index;
+    weekendEnd = weekendEnd || state.weekendEnd === index;
+  }
+  if (weekendStart && weekendEnd && length === weekendLength) {
+    return SELECTED_DAY_TYPES.EVERY_WEEKEND;
+  } else if (!weekendStart && !weekendEnd && length === 7 - weekendLength) {
+    return SELECTED_DAY_TYPES.EVERY_WEEKDAY;
+  } else {
+    return SELECTED_DAY_TYPES.SELECTED_DAYS;
+  }
+}
+
+/**
+ * Determines whether it should return "Every Day", "Every Weekend", "Every Weekday" or list of
+ * days for a given selected day type.
+ *
+ * @memberof limestone/DayPicker
+ * @param {(Number|Number[])?} selected Selected day(s)
+ * @param {String} [noneText] String to be returned when no days are selected
+ * @param {String} [dayNameLength] The format for names of days
+ *
+ * @returns {String} "Every Day", "Every Weekend", "Every Week", list of days or `noneText`
+ */
+function getSelectedDayString(selected) {
+  var noneText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var dayNameLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'long';
+  var everyDayText = (0, _$L["default"])('Every Day'),
+    everyWeekdayText = (0, _$L["default"])('Every Weekday'),
+    everyWeekendText = (0, _$L["default"])('Every Weekend'),
+    locale = _i18n["default"].getLocale();
+  var state = getLocaleState(dayNameLength, locale);
+  if (selected != null) {
+    selected = (0, _util.coerceArray)(selected);
+  }
+  var type = calcSelectedDayType(selected, state);
+  var format = function format(list) {
+    var separator = locale === 'fa-IR' ? '، ' : ', ';
+
+    // sort the selected array with firstDayOfWeek first before mapping to text
+    return list.slice().sort(function (a, b) {
+      return localizeDay(a, state.firstDayOfWeek) - localizeDay(b, state.firstDayOfWeek);
+    }).map(function (dayIndex) {
+      return state.abbreviatedDayNames[dayIndex];
+    }).join(separator);
+  };
+  switch (type) {
+    case SELECTED_DAY_TYPES.EVERY_DAY:
+      return everyDayText;
+    case SELECTED_DAY_TYPES.EVERY_WEEKEND:
+      return everyWeekendText;
+    case SELECTED_DAY_TYPES.EVERY_WEEKDAY:
+      return everyWeekdayText;
+    case SELECTED_DAY_TYPES.SELECTED_DAYS:
+      return format(selected);
+    case SELECTED_DAY_TYPES.SELECTED_NONE:
+      return noneText;
+  }
+}
+var daySelectorDecoratorDefaultProps = {
+  dayNameLength: 'long',
+  disabled: false
+};
+
+/**
+ * Applies Limestone specific behaviors to {@link limestone/DayPicker.DayPicker|DayPicker}.
+ *
+ * @hoc
+ * @memberof limestone/DayPicker
+ * @mixes ui/Changeable.Changeable
+ * @mixes limestone/Skinnable.Skinnable
+ * @omit onChange
+ * @omit value
+ * @omit defaultValue
+ * @private
+ */
+var DaySelectorDecorator = exports.DaySelectorDecorator = (0, _hoc["default"])(function (config, Wrapped) {
+  var DaySelector = function DaySelector(props) {
+    var daySelectorDecoratorProps = (0, _util.setDefaultProps)(props, daySelectorDecoratorDefaultProps);
+    var dayNameLength = daySelectorDecoratorProps.dayNameLength,
+      locale = daySelectorDecoratorProps.locale,
+      selected = daySelectorDecoratorProps.selected,
+      rest = _objectWithoutProperties(daySelectorDecoratorProps, _excluded);
+    var state = getLocaleState(dayNameLength, locale);
+    var localSelected = localizeSelected(selected, state);
+    var abbreviatedDayNames = orderDays(state.abbreviatedDayNames, state);
+    var fullDayNames = orderDays(state.fullDayNames, state);
+    var handleSelect = (0, _react.useCallback)(function (_ref) {
+      var selectedDay = _ref.selected;
+      // adjust the selected value beforehand so getSelectedDayString always operates on the
+      // standard, "Sunday as index 0" format
+      var generalSelected = generalizeSelected(selectedDay, state);
+      var content = getSelectedDayString(generalSelected, '', dayNameLength);
+      (0, _handle.forwardCustom)('onSelect', function () {
+        return {
+          selected: generalSelected,
+          content: content
+        };
+      })(null, daySelectorDecoratorProps);
+    }, [dayNameLength, daySelectorDecoratorProps, state]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, rest), {}, {
+      onSelect: handleSelect,
+      selected: localSelected,
+      children: abbreviatedDayNames.map(function (children, index) {
+        return {
+          children: children,
+          // "short" dayNameLength can result in the same name so adding index
+          key: "".concat(index, " ").concat(children),
+          'aria-label': fullDayNames[index]
+        };
+      })
+    }));
+  };
+  DaySelector.displayName = 'DaySelectorDecorator';
+  DaySelector.propTypes = /** @lends limestone/DayPicker.DaySelectorDecorator.prototype */{
+    /**
+     * The "aria-label" for the selector.
+     *
+     * @memberof limestone/DayPicker.DaySelectorDecorator.prototype
+     * @type {String}
+     * @private
+     */
+    'aria-label': _propTypes["default"].string,
+    /**
+     * The format for names of days.
+     *
+     * @type {('short'|'medium'|'long'|'full')}
+     * @default 'long'
+     * @public
+     */
+    dayNameLength: _propTypes["default"].oneOf(['short', 'medium', 'long', 'full']),
+    /**
+     * Applies a disabled style and prevents interacting with the component.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * Current locale.
+     *
+     * @type {String}
+     * @public
+     */
+    locale: _propTypes["default"].string,
+    /**
+     * Called when a day is selected or unselected.
+     *
+     * The event payload will be an object with the following members:
+     * * `selected` - An array of numbers representing the selected days, 0 indexed
+     * * `content` - Localized string representing the selected days
+     *
+     * @type {Function}
+     * @public
+     */
+    onSelect: _propTypes["default"].func,
+    /**
+     * An array of numbers (0-indexed) representing the selected days of the week.
+     *
+     * @type {Number|Number[]}
+     * @public
+     */
+    selected: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].arrayOf(_propTypes["default"].number)])
+  };
+  DaySelector.defaultPropValues = daySelectorDecoratorDefaultProps;
+  return DaySelector;
+});
+var _default = exports["default"] = DaySelectorDecorator;

package/DayPicker/package.json

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

package/DayPicker/tests/DayPicker-specs.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _i18n = _interopRequireDefault(require("@enact/i18n"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _DayPicker = _interopRequireWildcard(require("../DayPicker"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 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); }); }; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+describe('DayPicker', function () {
+  test('should not select any item when there is no passed prop `selected`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPicker["default"], {}));
+    var allDays = _react.screen.getAllByRole('checkbox');
+    var _iterator = _createForOfIteratorHelper(allDays),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var day = _step.value;
+        expect(day).toHaveAttribute('aria-checked', 'false');
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+  test('should select day when passed prop \'selected\'', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPicker["default"], {
+      selected: [1]
+    }));
+    var selectedDay = _react.screen.getAllByRole('checkbox')[2];
+    var expected = 'selected';
+    expect(selectedDay).toHaveClass(expected);
+  });
+  test('should select day when passed prop \'selected\' as a number', function () {
+    // We need to change the locale to firstDayOfWeek !== 0.
+    // If firstDayOfWeek === 0, the number type check conditional statement
+    // is skipped due to the fast execution path of localizeSelected(), which
+    // reduces code coverage.
+    _i18n["default"].setLocale('es-ES');
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPicker["default"], {
+      locale: "es-ES",
+      selected: 1
+    }));
+    var selectedDay = _react.screen.getAllByRole('checkbox')[1];
+    var expected = 'selected';
+    expect(selectedDay).toHaveClass(expected);
+  });
+  test('should emit an onSelect event with \'onSelect\' type when selecting days', /*#__PURE__*/_asyncToGenerator(function* () {
+    _i18n["default"].setLocale('en-US');
+    var handleSelect = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPicker["default"], {
+      onSelect: handleSelect
+    }));
+    var item = _react.screen.getAllByRole('checkbox')[2];
+    yield user.click(item);
+    expect(handleSelect).toHaveBeenCalledWith({
+      content: 'Mon',
+      selected: [1],
+      type: 'onSelect'
+    });
+  }));
+  test('should include \'content\' in onSelect event payload which respects dayNameLength', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleSelect = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPicker["default"], {
+      onSelect: handleSelect,
+      dayNameLength: "short"
+    }));
+
+    // select Monday
+    var item = _react.screen.getByText('Monday');
+    yield user.click(item);
+    var expected = {
+      // M is the "short" value from ilib for Monday
+      content: 'M'
+    };
+    var actual = handleSelect.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  }));
+  test('should return \'None\' when selected is null', function () {
+    var label = (0, _DayPicker.getSelectedDayString)(null, 'None');
+    var expected = 'None';
+    expect(label).toBe(expected);
+  });
+  test('should return \'None\' when selected is empty', function () {
+    var label = (0, _DayPicker.getSelectedDayString)([], 'None');
+    var expected = 'None';
+    expect(label).toBe(expected);
+  });
+  test('should return \'Every Weekend\' when all selected', function () {
+    var selected = [0, 6];
+    var label = (0, _DayPicker.getSelectedDayString)(selected);
+    var expected = 'Every Weekend';
+    expect(label).toBe(expected);
+  });
+  test('should return \'Every Weekday\' when all selected', function () {
+    var selected = [1, 2, 3, 4, 5];
+    var label = (0, _DayPicker.getSelectedDayString)(selected);
+    var expected = 'Every Weekday';
+    expect(label).toBe(expected);
+  });
+  test('should return \'Every Day\' when all selected', function () {
+    var selected = [0, 1, 2, 3, 4, 5, 6];
+    var label = (0, _DayPicker.getSelectedDayString)(selected);
+    var expected = 'Every Day';
+    expect(label).toBe(expected);
+  });
+  describe('with alternate first day of week', function () {
+    test('should accept and emit a generalized selected array', /*#__PURE__*/_asyncToGenerator(function* () {
+      _i18n["default"].setLocale('es-ES');
+      var handleSelect = jest.fn();
+      var user = _userEvent["default"].setup();
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPicker["default"], {
+        defaultSelected: [0],
+        locale: "es-ES",
+        onSelect: handleSelect
+      }));
+
+      // select Lunes (Monday) which is the first day of the week for es-ES
+      var item = _react.screen.getAllByRole('checkbox')[0];
+      yield user.click(item);
+      var expected = {
+        // Expect Sunday (0) and Monday (1) to be selected
+        selected: [0, 1]
+      };
+      var actual = handleSelect.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    }));
+  });
+});

package/Dropdown/Dropdown.d.ts

@@ -0,0 +1,135 @@
+// Type definitions for limestone/Dropdown
+
+import * as React from "react";
+import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
+import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
+import { SpotlightContainerDecoratorProps as spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps } from "@enact/spotlight/SpotlightContainerDecorator";
+import { ButtonProps as limestone_Button_ButtonProps } from "limestone/Button";
+import { ContextualPopupDecoratorProps as limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps } from "limestone/ContextualPopupDecorator";
+
+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 DropdownBaseProps
+  extends Omit<
+    Merge<
+      limestone_Button_ButtonProps,
+      limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps
+    >,
+    "popupComponent"
+  > {
+  /**
+   * The "aria-label" for the Dropdown.
+   */
+  "aria-label"?: string;
+  /**
+ * Items to be displayed in the  `Dropdown`  when  `open` .
+ * 
+ * Takes either an array of strings or an array of objects. When strings, the values will be
+used in the generated components as the readable text. When objects, the properties will
+be passed onto an  `Item`  component;  `children`  as well as a unique  `key`  properties are
+required.
+ */
+  children?:
+    | string[]
+    | {
+        key: number | string;
+        children: string | React.ComponentType;
+        [propName: string]: any;
+      }[];
+  /**
+   * Placement of the Dropdown.
+   */
+  direction?: "above" | "below";
+  /**
+   * Disables Dropdown, making it non-interactive.
+   */
+  disabled?: boolean;
+  /**
+   * Called when the Dropdown is closing.
+   */
+  onClose?: Function;
+  /**
+   * Called when the Dropdown is opening.
+   */
+  onOpen?: Function;
+  /**
+   * Called when an item is selected.
+   *
+   * The event payload will be an object with the following members:
+   * *  `data`  - The value for the option as received in the  `children`  prop
+   * *  `selected`  - Number representing the selected option, 0 indexed
+   */
+  onSelect?: Function;
+  /**
+   * Displays the items.
+   */
+  open?: boolean;
+  /**
+   * Text displayed in the Dropdown when nothing is selected.
+   *
+   * The placeholder will be replaced by the selected item.
+   */
+  placeholder?: string;
+  /**
+   * Index of the selected item.
+   */
+  selected?: number;
+  /**
+   * The size of the Dropdown's    component.
+   */
+  size?: "large" | "small";
+  /**
+   * Primary title text of the Dropdown.
+   */
+  title?: string;
+  /**
+   * Width of the Dropdown.
+   */
+  width?: "huge" | "large" | "x-large" | "medium" | "small" | "tiny" | number;
+}
+/**
+ * A stateless Dropdown component.
+ */
+
+export class DropdownBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, DropdownBaseProps>
+> {}
+
+export interface DropdownDecoratorProps
+  extends Merge<
+    Merge<ui_Changeable_ChangeableProps, ui_Toggleable_ToggleableProps>,
+    spotlight_SpotlightContainerDecorator_SpotlightContainerDecoratorProps
+  > {
+  /**
+   * Displays the items.
+   */
+  open?: boolean;
+  /**
+   * Index of the selected item.
+   */
+  selected?: number;
+  /**
+   * The initial selected index when  `selected`  is not defined.
+   */
+  defaultSelected?: number;
+}
+export function DropdownDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & DropdownDecoratorProps>;
+
+export interface DropdownProps extends DropdownBaseProps {}
+/**
+ * A Limestone Dropdown component.
+ * 
+ * By default,  `Dropdown`  maintains the state of its  `selected`  property. Supply the
+ `defaultSelected`  property to control its initial value. If you wish to directly control updates
+to the component, supply a value to  `selected`  at creation time and update it in response to
+ `onSelect`  events.
+ */
+
+export class Dropdown extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, DropdownProps>
+> {}
+
+export default Dropdown;