@elliemae/ds-time-picker 1.60.0 → 2.0.0-alpha.12

package/cjs/PickerPanel.js

@@ -1,15 +1,17 @@
 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _toArray = require('@babel/runtime/helpers/toArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
-var _createClass = require('@babel/runtime/helpers/createClass');
-var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
-var _inherits = require('@babel/runtime/helpers/inherits');
-var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
-var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var lodash = require('lodash');
 var dsClassnames = require('@elliemae/ds-classnames');
@@ -18,394 +20,376 @@ var dsIcons = require('@elliemae/ds-icons');
 var DSButton = require('@elliemae/ds-button');
 var moveElementOnScroll = require('./moveElementOnScroll.js');
 var utils = require('./utils.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _toArray__default = /*#__PURE__*/_interopDefaultLegacy(_toArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
-var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
-var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
-var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
-var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
-var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _SelectedCircle, _ChevronSmallUp, _ChevronSmallDown;
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var blockName = 'time-picker-panel';
-var Container = dsClassnames.aggregatedClasses('div')(blockName, null, function (_ref) {
-  var scrolling = _ref.scrolling;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const blockName = 'time-picker-panel';
+const Container = dsClassnames.aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    scrolling
+  } = _ref;
   return {
-    scrolling: scrolling
+    scrolling
   };
 });
-var Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
-var PickerItemListContainer = dsClassnames.aggregatedClasses('div')(blockName, 'item-list-container');
-var PickerItemList = dsClassnames.aggregatedClasses('div')(blockName, 'item-list');
-var PickerHeader = dsClassnames.aggregatedClasses('div')(blockName, 'header');
-var PickerItemContainer = dsClassnames.aggregatedClasses('div')(blockName, 'item', function (_ref2) {
-  var selected = _ref2.selected,
-      disabled = _ref2.disabled;
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper');
+const PickerItemListContainer = dsClassnames.aggregatedClasses('div')(blockName, 'item-list-container');
+const PickerItemList = dsClassnames.aggregatedClasses('div')(blockName, 'item-list');
+const PickerHeader = dsClassnames.aggregatedClasses('div')(blockName, 'header');
+const PickerItemContainer = dsClassnames.aggregatedClasses('div')(blockName, 'item', _ref2 => {
+  let {
+    selected,
+    disabled
+  } = _ref2;
   return {
-    selected: selected,
-    disabled: disabled
+    selected,
+    disabled
   };
 });
-var PickerSelectedOptionSelected = dsClassnames.aggregatedClasses('div')(blockName, 'selected-container');
-var SelectedCircle = dsClassnames.aggregatedClasses('div')(blockName, 'selected-circle');
-var ArrowButtonContainer = dsClassnames.aggregatedClasses('div')(blockName, 'arrow-container');
-
-var getOptionIndex = function getOptionIndex(options, selectedOption) {
-  var valueProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
-  var index = options.findIndex(function (option) {
-    return option[valueProperty] === selectedOption;
-  });
+const PickerSelectedOptionSelected = dsClassnames.aggregatedClasses('div')(blockName, 'selected-container');
+const SelectedCircle = dsClassnames.aggregatedClasses('div')(blockName, 'selected-circle');
+const ArrowButtonContainer = dsClassnames.aggregatedClasses('div')(blockName, 'arrow-container');
+
+const getOptionIndex = function (options, selectedOption) {
+  let valueProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
+  const index = options.findIndex(option => option[valueProperty] === selectedOption);
   return utils.validateIndex(index, options);
 };
 
-var arrowProps = {
+const arrowProps = {
   buttonType: 'text',
   fluidHeight: true,
   fluidWidth: true,
   size: 's'
 };
-
-var PickerPanel = /*#__PURE__*/function (_Component) {
-  _inherits__default['default'](PickerPanel, _Component);
-
-  var _super = _createSuper(PickerPanel);
-
-  function PickerPanel(props) {
-    var _this;
-
-    _classCallCheck__default['default'](this, PickerPanel);
-
-    _this = _super.call(this, props);
-    _this.computeContainerTranslation = memoizeOne__default['default'](function (index) {
-      var _this$props = _this.props,
-          options = _this$props.options,
-          valueProperty = _this$props.valueProperty;
-      var _this$state = _this.state,
-          selectedOption = _this$state.selectedOption,
-          scrolling = _this$state.scrolling;
-      var selectedOptionIndex = index || getOptionIndex(options, selectedOption, valueProperty);
-      var listYPosition = _this.minYListPosition - selectedOptionIndex * _this.optionHeight;
-      if (_this.scrollHandler && !scrolling) _this.scrollHandler.updatePosition(listYPosition);
+class PickerPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.computeContainerTranslation = memoizeOne__default["default"](index => {
+      const {
+        options,
+        valueProperty
+      } = this.props;
+      const {
+        selectedOption,
+        scrolling
+      } = this.state;
+      const selectedOptionIndex = index || getOptionIndex(options, selectedOption, valueProperty);
+      const listYPosition = this.minYListPosition - selectedOptionIndex * this.optionHeight;
+      if (this.scrollHandler && !scrolling) this.scrollHandler.updatePosition(listYPosition);
       return listYPosition;
     });
 
-    _this.renderHeader = function () {
-      var header = _this.props.header;
-      return /*#__PURE__*/React__default['default'].createElement(PickerHeader, null, header);
+    this.renderHeader = () => {
+      const {
+        header
+      } = this.props;
+      return /*#__PURE__*/_jsx__default["default"](PickerHeader, {}, void 0, header);
     };
 
-    _this.pickerListContainerRef = /*#__PURE__*/React__default['default'].createRef();
-    _this.pickerListRef = /*#__PURE__*/React__default['default'].createRef();
-    _this.pickerItemRef = /*#__PURE__*/React__default['default'].createRef();
-    _this.selectedOptionRef = /*#__PURE__*/React__default['default'].createRef();
-    _this.state = {
+    this.pickerListContainerRef = /*#__PURE__*/React__default["default"].createRef();
+    this.pickerListRef = /*#__PURE__*/React__default["default"].createRef();
+    this.pickerItemRef = /*#__PURE__*/React__default["default"].createRef();
+    this.selectedOptionRef = /*#__PURE__*/React__default["default"].createRef();
+    this.state = {
       selectedOption: props.selected,
       activeIndex: 0,
       // eslint-disable-next-line react/no-unused-state
       prevProps: {}
     };
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized__default['default'](_this));
-    _this.handleStepMoveUp = _this.handleStepMoveUp.bind(_assertThisInitialized__default['default'](_this));
-    _this.handleStepMoveDown = _this.handleStepMoveDown.bind(_assertThisInitialized__default['default'](_this));
-    return _this;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleStepMoveUp = this.handleStepMoveUp.bind(this);
+    this.handleStepMoveDown = this.handleStepMoveDown.bind(this);
   }
 
-  _createClass__default['default'](PickerPanel, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      this.computeSizes();
-      var pickerListContainerEl = this.pickerListContainerRef.current;
-      var pickerListEl = this.pickerListRef.current;
-      this.scrollHandler = new moveElementOnScroll.MoveElementOnScroll(pickerListEl, {
-        container: pickerListContainerEl,
-        min: -this.minYListPosition,
-        max: this.maxYListPosition,
-        onUpdate: function onUpdate(pos, delta) {
-          var options = _this2.props.options;
-          var index = options.length - -Math.floor((pos - _this2.maxYListPosition) / _this2.optionHeight) + (delta > 0 ? 1 : -1);
-
-          _this2.moveTo(index, true);
-        },
-        onEndScroll: function onEndScroll() {
-          _this2.setState({
-            scrolling: false
-          });
-        }
-      });
-      this.computeContainerTranslation();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.scrollHandler.unsubscribe();
-    }
-  }, {
-    key: "getOptionValue",
-    value: function getOptionValue(option) {
-      var valueProperty = this.props.valueProperty;
-      return option[valueProperty];
-    }
-  }, {
-    key: "getOptionLabel",
-    value: function getOptionLabel(option) {
-      var labelProperty = this.props.labelProperty;
-      return option[labelProperty];
-    }
-  }, {
-    key: "computeSizes",
-    value: function computeSizes() {
-      var _this$props2 = this.props,
-          options = _this$props2.options,
-          numberItemsOnScreen = _this$props2.numberItemsOnScreen;
-      var optionHeight = this.pickerItemRef.current.offsetHeight;
-      this.optionHeight = optionHeight;
-      this.listHeight = this.optionHeight * numberItemsOnScreen;
-      this.minYListPosition = this.listHeight / 2 - this.optionHeight / 2;
-      this.maxYListPosition = this.optionHeight * (options.length - Math.ceil(numberItemsOnScreen / 2));
-    }
-  }, {
-    key: "handleOptionSelect",
-    value: function handleOptionSelect(optionValue, index, scrolling) {
-      var onChange = this.props.onChange;
-      this.setState(function (state) {
-        return _objectSpread(_objectSpread({}, state), {}, {
-          scrolling: scrolling,
-          selectedOption: optionValue,
-          activeIndex: index
+  componentDidMount() {
+    this.computeSizes();
+    const pickerListContainerEl = this.pickerListContainerRef.current;
+    const pickerListEl = this.pickerListRef.current;
+    this.scrollHandler = new moveElementOnScroll.MoveElementOnScroll(pickerListEl, {
+      container: pickerListContainerEl,
+      min: -this.minYListPosition,
+      max: this.maxYListPosition,
+      onUpdate: (pos, delta) => {
+        const {
+          options
+        } = this.props;
+        const index = options.length - -Math.floor((pos - this.maxYListPosition) / this.optionHeight) + (delta > 0 ? 1 : -1);
+        this.moveTo(index, true);
+      },
+      onEndScroll: () => {
+        this.setState({
+          scrolling: false
         });
-      }, function () {
-        onChange(optionValue, index);
-      });
-    } // TODO: this needs a refactor from de FocusGroup
-    // eslint-disable-next-line max-statements
-
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(e) {
-      var activeIndex = this.state.activeIndex;
-      var options = this.props.options;
-
-      var _document$getElements = document.getElementsByClassName('em-ds-time-picker-panel'),
-          _document$getElements2 = _toArray__default['default'](_document$getElements),
-          firstColumn = _document$getElements2[0],
-          restColumns = _document$getElements2.slice(1);
-
-      var _restColumns$slice = restColumns.slice(-1),
-          _restColumns$slice2 = _slicedToArray__default['default'](_restColumns$slice, 1),
-          lastColumn = _restColumns$slice2[0];
-
-      var _document$getElements3 = document.getElementsByClassName('DayPickerNavigation_button'),
-          _document$getElements4 = _slicedToArray__default['default'](_document$getElements3, 1),
-          prev = _document$getElements4[0];
-
-      var focusedElement = document.activeElement;
-
-      switch (e.key) {
-        case 'Home':
-          this.moveTo(0);
-          break;
+      }
+    });
+    this.computeContainerTranslation();
+  }
 
-        case 'End':
-          this.moveTo(options.length - 1);
-          break;
+  componentWillUnmount() {
+    this.scrollHandler.unsubscribe();
+  }
 
-        case 'ArrowUp':
-          this.moveTo(activeIndex - 1);
-          break;
+  static getDerivedStateFromProps(nextProps, _ref3) {
+    let {
+      prevProps
+    } = _ref3;
+    const {
+      selected,
+      valueProperty,
+      options
+    } = nextProps;
+
+    if (selected !== prevProps.selected) {
+      return {
+        selectedOption: selected,
+        activeIndex: getOptionIndex(options, selected, valueProperty),
+        prevProps: nextProps
+      };
+    }
 
-        case 'ArrowDown':
-          this.moveTo(activeIndex + 1);
-          break;
+    return null;
+  }
 
-        case 'Tab':
-          {
-            e.preventDefault(); // If it is DateTimePicker, move focus to prev arrow element
+  getOptionValue(option) {
+    const {
+      valueProperty
+    } = this.props;
+    return option[valueProperty];
+  }
 
-            if (prev && focusedElement === lastColumn) {
-              prev.focus();
-            } else if (focusedElement === lastColumn) {
-              firstColumn.focus();
-            } else {
-              var position = lodash.findIndex(restColumns, focusedElement);
-              restColumns[position + 1].focus();
-            }
+  getOptionLabel(option) {
+    const {
+      labelProperty
+    } = this.props;
+    return option[labelProperty];
+  }
 
-            break;
+  computeSizes() {
+    const {
+      options,
+      numberItemsOnScreen
+    } = this.props;
+    const {
+      offsetHeight: optionHeight
+    } = this.pickerItemRef.current;
+    this.optionHeight = optionHeight;
+    this.listHeight = this.optionHeight * numberItemsOnScreen;
+    this.minYListPosition = this.listHeight / 2 - this.optionHeight / 2;
+    this.maxYListPosition = this.optionHeight * (options.length - Math.ceil(numberItemsOnScreen / 2));
+  }
+
+  handleOptionSelect(optionValue, index, scrolling) {
+    const {
+      onChange
+    } = this.props;
+    this.setState(state => _objectSpread(_objectSpread({}, state), {}, {
+      scrolling,
+      selectedOption: optionValue,
+      activeIndex: index
+    }), () => {
+      onChange(optionValue, index);
+    });
+  } // TODO: this needs a refactor from de FocusGroup
+  // eslint-disable-next-line max-statements
+
+
+  handleKeyDown(e) {
+    const {
+      activeIndex
+    } = this.state;
+    const {
+      options
+    } = this.props;
+    const [firstColumn, ...restColumns] = document.getElementsByClassName('em-ds-time-picker-panel');
+    const [lastColumn] = restColumns.slice(-1);
+    const [prev] = document.getElementsByClassName('DayPickerNavigation_button');
+    const focusedElement = document.activeElement;
+
+    switch (e.key) {
+      case 'Home':
+        this.moveTo(0);
+        break;
+
+      case 'End':
+        this.moveTo(options.length - 1);
+        break;
+
+      case 'ArrowUp':
+        this.moveTo(activeIndex - 1);
+        break;
+
+      case 'ArrowDown':
+        this.moveTo(activeIndex + 1);
+        break;
+
+      case 'Tab':
+        {
+          e.preventDefault(); // If it is DateTimePicker, move focus to prev arrow element
+
+          if (prev && focusedElement === lastColumn) {
+            prev.focus();
+          } else if (focusedElement === lastColumn) {
+            firstColumn.focus();
+          } else {
+            const position = lodash.findIndex(restColumns, focusedElement);
+            restColumns[position + 1].focus();
           }
-      }
-    }
-  }, {
-    key: "moveTo",
-    value: function moveTo(index, scrolling) {
-      var options = this.props.options;
-      var selectedOption = this.state.selectedOption;
-      var validIndex = utils.validateIndex(index, options);
-      var option = options[validIndex];
-      var optionValue = this.getOptionValue(option);
-
-      if (selectedOption !== optionValue && option.disabled !== true) {
-        this.handleOptionSelect(optionValue, validIndex, scrolling);
-      } // TO-DO: if date disabled, add nextValidOption selection
 
-    }
-  }, {
-    key: "handleStepMoveUp",
-    value: function handleStepMoveUp() {
-      var activeIndex = this.state.activeIndex;
-      var _this$props3 = this.props,
-          arrowStep = _this$props3.arrowStep,
-          options = _this$props3.options;
-      var supposedPos = activeIndex - arrowStep;
-      var nextPos = supposedPos >= 0 ? supposedPos : activeIndex - 1;
-      var nextValidOption = options.find(function (op) {
-        return !op.disabled;
-      });
-      this.moveTo(nextPos, true, nextValidOption);
-    }
-  }, {
-    key: "handleStepMoveDown",
-    value: function handleStepMoveDown() {
-      var activeIndex = this.state.activeIndex;
-      var _this$props4 = this.props,
-          arrowStep = _this$props4.arrowStep,
-          options = _this$props4.options;
-      var supposedPos = activeIndex + arrowStep;
-      var nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;
-      this.moveTo(nextPos);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props5 = this.props,
-          options = _this$props5.options,
-          hasHeader = _this$props5.hasHeader,
-          type = _this$props5.type,
-          time = _this$props5.time,
-          meridiem = _this$props5.meridiem,
-          disabledTimes = _this$props5.disabledTimes;
-      var _this$state2 = this.state,
-          selectedOption = _this$state2.selectedOption,
-          activeIndex = _this$state2.activeIndex,
-          scrolling = _this$state2.scrolling;
-      var listYPosition = this.computeContainerTranslation(activeIndex);
-      return /*#__PURE__*/React__default['default'].createElement(Wrapper, null, hasHeader && this.renderHeader(), /*#__PURE__*/React__default['default'].createElement(Container, {
-        classProps: {
-          scrolling: scrolling
-        },
-        onKeyDown: this.handleKeyDown,
-        tabIndex: 0
-      }, /*#__PURE__*/React__default['default'].createElement(PickerSelectedOptionSelected, {
-        innerRef: this.selectedOptionRef
-      }, /*#__PURE__*/React__default['default'].createElement(SelectedCircle, null)), /*#__PURE__*/React__default['default'].createElement(ArrowButtonContainer, null, /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], _extends__default['default']({}, arrowProps, {
-        "aria-label": "Chevron Up",
-        "data-testid": "".concat(type, "-chevron-up"),
-        disabled: activeIndex <= 0,
-        icon: /*#__PURE__*/React__default['default'].createElement(dsIcons.ChevronSmallUp, null),
-        onClick: this.handleStepMoveUp,
-        tabIndex: -1
-      }))), /*#__PURE__*/React__default['default'].createElement(PickerItemListContainer, {
-        innerRef: this.pickerListContainerRef,
-        style: {
-          height: this.listHeight
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(PickerItemList, {
-        "data-testid": "".concat(type, "-list"),
-        innerRef: this.pickerListRef,
-        style: {
-          transform: "translateY(".concat(listYPosition, "px)")
+          break;
         }
-      }, options.map(function (option, index) {
-        var value = _this3.getOptionValue(option);
+    }
+  }
 
-        var label = _this3.getOptionLabel(option);
+  moveTo(index, scrolling) {
+    const {
+      options
+    } = this.props;
+    const {
+      selectedOption
+    } = this.state;
+    const validIndex = utils.validateIndex(index, options);
+    const option = options[validIndex];
+    const optionValue = this.getOptionValue(option);
+
+    if (selectedOption !== optionValue && option.disabled !== true) {
+      this.handleOptionSelect(optionValue, validIndex, scrolling);
+    } // TO-DO: if date disabled, add nextValidOption selection
 
-        var valueFormatted;
-        if (meridiem === 'AM') valueFormatted = value;else if (meridiem === 'PM' && value === 12) valueFormatted = value;else if (meridiem === 'PM') valueFormatted = value + 12;
-        var disabled = false;
+  }
 
-        if (disabledTimes) {
-          var from = disabledTimes.from,
-              to = disabledTimes.to;
+  handleStepMoveUp() {
+    const {
+      activeIndex
+    } = this.state;
+    const {
+      arrowStep,
+      options
+    } = this.props;
+    const supposedPos = activeIndex - arrowStep;
+    const nextPos = supposedPos >= 0 ? supposedPos : activeIndex - 1;
+    const nextValidOption = options.find(op => !op.disabled);
+    this.moveTo(nextPos, true, nextValidOption);
+  }
 
-          if (type === 'hour' && valueFormatted >= (from === null || from === void 0 ? void 0 : from.hour) && valueFormatted < (to === null || to === void 0 ? void 0 : to.hour) || type === 'minutes' && value >= (from === null || from === void 0 ? void 0 : from.min) && value < (to === null || to === void 0 ? void 0 : to.min)) {
-            disabled = true;
-          }
+  handleStepMoveDown() {
+    const {
+      activeIndex
+    } = this.state;
+    const {
+      arrowStep,
+      options
+    } = this.props;
+    const supposedPos = activeIndex + arrowStep;
+    const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;
+    this.moveTo(nextPos);
+  }
 
-          if (type === 'minutes' && ((time === null || time === void 0 ? void 0 : time.hour()) > (to === null || to === void 0 ? void 0 : to.hour) || (time === null || time === void 0 ? void 0 : time.hour()) < (from === null || from === void 0 ? void 0 : from.hour))) {
-            disabled = false;
-          }
+  render() {
+    const {
+      options,
+      hasHeader,
+      type,
+      time,
+      meridiem,
+      disabledTimes
+    } = this.props;
+    const {
+      selectedOption,
+      activeIndex,
+      scrolling
+    } = this.state;
+    const listYPosition = this.computeContainerTranslation(activeIndex);
+    return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, hasHeader && this.renderHeader(), /*#__PURE__*/_jsx__default["default"](Container, {
+      classProps: {
+        scrolling
+      },
+      onKeyDown: this.handleKeyDown,
+      tabIndex: 0
+    }, void 0, /*#__PURE__*/_jsx__default["default"](PickerSelectedOptionSelected, {
+      innerRef: this.selectedOptionRef
+    }, void 0, _SelectedCircle || (_SelectedCircle = /*#__PURE__*/_jsx__default["default"](SelectedCircle, {}))), /*#__PURE__*/_jsx__default["default"](ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, arrowProps), {}, {
+      "aria-label": "Chevron Up",
+      "data-testid": "".concat(type, "-chevron-up"),
+      disabled: activeIndex <= 0,
+      icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})),
+      onClick: this.handleStepMoveUp,
+      tabIndex: -1
+    }))), /*#__PURE__*/_jsx__default["default"](PickerItemListContainer, {
+      innerRef: this.pickerListContainerRef,
+      style: {
+        height: this.listHeight
+      }
+    }, void 0, /*#__PURE__*/_jsx__default["default"](PickerItemList, {
+      "data-testid": "".concat(type, "-list"),
+      innerRef: this.pickerListRef,
+      style: {
+        transform: "translateY(".concat(listYPosition, "px)")
+      }
+    }, void 0, options.map((option, index) => {
+      const value = this.getOptionValue(option);
+      const label = this.getOptionLabel(option);
+      let valueFormatted;
+      if (meridiem === 'AM') valueFormatted = value;else if (meridiem === 'PM' && value === 12) valueFormatted = value;else if (meridiem === 'PM') valueFormatted = value + 12;
+      let disabled = false;
+
+      if (disabledTimes) {
+        const {
+          from,
+          to
+        } = disabledTimes;
+
+        if (type === 'hour' && valueFormatted >= (from === null || from === void 0 ? void 0 : from.hour) && valueFormatted < (to === null || to === void 0 ? void 0 : to.hour) || type === 'minutes' && value >= (from === null || from === void 0 ? void 0 : from.min) && value < (to === null || to === void 0 ? void 0 : to.min)) {
+          disabled = true;
+        }
 
-          if (label === 'am' && (from === null || from === void 0 ? void 0 : from.hour) == 0 && (to === null || to === void 0 ? void 0 : to.hour) >= 12) {
-            disabled = true;
-          }
+        if (type === 'minutes' && ((time === null || time === void 0 ? void 0 : time.hour()) > (to === null || to === void 0 ? void 0 : to.hour) || (time === null || time === void 0 ? void 0 : time.hour()) < (from === null || from === void 0 ? void 0 : from.hour))) {
+          disabled = false;
+        }
 
-          if (label === 'pm' && (to === null || to === void 0 ? void 0 : to.hour) == 24) {
-            disabled = true;
-          }
+        if (label === 'am' && (from === null || from === void 0 ? void 0 : from.hour) == 0 && (to === null || to === void 0 ? void 0 : to.hour) >= 12) {
+          disabled = true;
         }
 
-        option.disabled = disabled;
-        return /*#__PURE__*/React__default['default'].createElement(PickerItemContainer, {
-          key: value,
-          classProps: {
-            selected: selectedOption ? value === selectedOption : index === 0,
-            disabled: disabled
-          },
-          innerRef: _this3.pickerItemRef,
-          onClick: function onClick() {
-            if (!disabled) _this3.handleOptionSelect(value, index);
-          }
-        }, label);
-      }))), /*#__PURE__*/React__default['default'].createElement(ArrowButtonContainer, null, /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], _extends__default['default']({}, arrowProps, {
-        "aria-label": "Chevron Down",
-        "data-testid": "".concat(type, "-chevron-down"),
-        disabled: activeIndex >= options.length - 1,
-        icon: /*#__PURE__*/React__default['default'].createElement(dsIcons.ChevronSmallDown, null),
-        onClick: this.handleStepMoveDown,
-        tabIndex: -1
-      })))));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, _ref3) {
-      var prevProps = _ref3.prevProps;
-      var selected = nextProps.selected,
-          valueProperty = nextProps.valueProperty,
-          options = nextProps.options;
-
-      if (selected !== prevProps.selected) {
-        return {
-          selectedOption: selected,
-          activeIndex: getOptionIndex(options, selected, valueProperty),
-          prevProps: nextProps
-        };
+        if (label === 'pm' && (to === null || to === void 0 ? void 0 : to.hour) == 24) {
+          disabled = true;
+        }
       }
 
-      return null;
-    }
-  }]);
+      option.disabled = disabled;
+      return /*#__PURE__*/_jsx__default["default"](PickerItemContainer, {
+        classProps: {
+          selected: selectedOption ? value === selectedOption : index === 0,
+          disabled
+        },
+        innerRef: this.pickerItemRef,
+        onClick: () => {
+          if (!disabled) this.handleOptionSelect(value, index);
+        }
+      }, value, label);
+    }))), /*#__PURE__*/_jsx__default["default"](ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, arrowProps), {}, {
+      "aria-label": "Chevron Down",
+      "data-testid": "".concat(type, "-chevron-down"),
+      disabled: activeIndex >= options.length - 1,
+      icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
+      onClick: this.handleStepMoveDown,
+      tabIndex: -1
+    })))));
+  }
 
-  return PickerPanel;
-}(React.Component);
+}
 PickerPanel.defaultProps = {
   valueProperty: 'value',
   labelProperty: 'label',
@@ -416,4 +400,3 @@ PickerPanel.defaultProps = {
 };
 
 module.exports = PickerPanel;
-//# sourceMappingURL=PickerPanel.js.map