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

package/esm/PickerPanel.js

@@ -1,13 +1,15 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import _toArray from '@babel/runtime/helpers/esm/toArray';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import React, { Component } from 'react';
 import { findIndex } from 'lodash';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
@@ -16,378 +18,368 @@ import { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';
 import DSButton from '@elliemae/ds-button';
 import { MoveElementOnScroll } from './moveElementOnScroll.js';
 import { validateIndex } from './utils.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _SelectedCircle, _ChevronSmallUp, _ChevronSmallDown;
 
 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(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; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-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 = aggregatedClasses('div')(blockName, null, function (_ref) {
-  var scrolling = _ref.scrolling;
+const blockName = 'time-picker-panel';
+const Container = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    scrolling
+  } = _ref;
   return {
-    scrolling: scrolling
+    scrolling
   };
 });
-var Wrapper = aggregatedClasses('div')(blockName, 'wrapper');
-var PickerItemListContainer = aggregatedClasses('div')(blockName, 'item-list-container');
-var PickerItemList = aggregatedClasses('div')(blockName, 'item-list');
-var PickerHeader = aggregatedClasses('div')(blockName, 'header');
-var PickerItemContainer = aggregatedClasses('div')(blockName, 'item', function (_ref2) {
-  var selected = _ref2.selected,
-      disabled = _ref2.disabled;
+const Wrapper = aggregatedClasses('div')(blockName, 'wrapper');
+const PickerItemListContainer = aggregatedClasses('div')(blockName, 'item-list-container');
+const PickerItemList = aggregatedClasses('div')(blockName, 'item-list');
+const PickerHeader = aggregatedClasses('div')(blockName, 'header');
+const PickerItemContainer = aggregatedClasses('div')(blockName, 'item', _ref2 => {
+  let {
+    selected,
+    disabled
+  } = _ref2;
   return {
-    selected: selected,
-    disabled: disabled
+    selected,
+    disabled
   };
 });
-var PickerSelectedOptionSelected = aggregatedClasses('div')(blockName, 'selected-container');
-var SelectedCircle = aggregatedClasses('div')(blockName, 'selected-circle');
-var ArrowButtonContainer = 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 = aggregatedClasses('div')(blockName, 'selected-container');
+const SelectedCircle = aggregatedClasses('div')(blockName, 'selected-circle');
+const ArrowButtonContainer = 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 validateIndex(index, options);
 };
 
-var arrowProps = {
+const arrowProps = {
   buttonType: 'text',
   fluidHeight: true,
   fluidWidth: true,
   size: 's'
 };
-
-var PickerPanel = /*#__PURE__*/function (_Component) {
-  _inherits(PickerPanel, _Component);
-
-  var _super = _createSuper(PickerPanel);
-
-  function PickerPanel(props) {
-    var _this;
-
-    _classCallCheck(this, PickerPanel);
-
-    _this = _super.call(this, props);
-    _this.computeContainerTranslation = memoizeOne(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 Component {
+  constructor(props) {
+    super(props);
+    this.computeContainerTranslation = memoizeOne(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.createElement(PickerHeader, null, header);
+    this.renderHeader = () => {
+      const {
+        header
+      } = this.props;
+      return /*#__PURE__*/_jsx(PickerHeader, {}, void 0, header);
     };
 
-    _this.pickerListContainerRef = /*#__PURE__*/React.createRef();
-    _this.pickerListRef = /*#__PURE__*/React.createRef();
-    _this.pickerItemRef = /*#__PURE__*/React.createRef();
-    _this.selectedOptionRef = /*#__PURE__*/React.createRef();
-    _this.state = {
+    this.pickerListContainerRef = /*#__PURE__*/React.createRef();
+    this.pickerListRef = /*#__PURE__*/React.createRef();
+    this.pickerItemRef = /*#__PURE__*/React.createRef();
+    this.selectedOptionRef = /*#__PURE__*/React.createRef();
+    this.state = {
       selectedOption: props.selected,
       activeIndex: 0,
       // eslint-disable-next-line react/no-unused-state
       prevProps: {}
     };
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleStepMoveUp = _this.handleStepMoveUp.bind(_assertThisInitialized(_this));
-    _this.handleStepMoveDown = _this.handleStepMoveDown.bind(_assertThisInitialized(_this));
-    return _this;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleStepMoveUp = this.handleStepMoveUp.bind(this);
+    this.handleStepMoveDown = this.handleStepMoveDown.bind(this);
   }
 
-  _createClass(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(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(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(_document$getElements),
-          firstColumn = _document$getElements2[0],
-          restColumns = _document$getElements2.slice(1);
-
-      var _restColumns$slice = restColumns.slice(-1),
-          _restColumns$slice2 = _slicedToArray(_restColumns$slice, 1),
-          lastColumn = _restColumns$slice2[0];
-
-      var _document$getElements3 = document.getElementsByClassName('DayPickerNavigation_button'),
-          _document$getElements4 = _slicedToArray(_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 = 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 = 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 = 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.createElement(Wrapper, null, hasHeader && this.renderHeader(), /*#__PURE__*/React.createElement(Container, {
-        classProps: {
-          scrolling: scrolling
-        },
-        onKeyDown: this.handleKeyDown,
-        tabIndex: 0
-      }, /*#__PURE__*/React.createElement(PickerSelectedOptionSelected, {
-        innerRef: this.selectedOptionRef
-      }, /*#__PURE__*/React.createElement(SelectedCircle, null)), /*#__PURE__*/React.createElement(ArrowButtonContainer, null, /*#__PURE__*/React.createElement(DSButton, _extends({}, arrowProps, {
-        "aria-label": "Chevron Up",
-        "data-testid": "".concat(type, "-chevron-up"),
-        disabled: activeIndex <= 0,
-        icon: /*#__PURE__*/React.createElement(ChevronSmallUp, null),
-        onClick: this.handleStepMoveUp,
-        tabIndex: -1
-      }))), /*#__PURE__*/React.createElement(PickerItemListContainer, {
-        innerRef: this.pickerListContainerRef,
-        style: {
-          height: this.listHeight
-        }
-      }, /*#__PURE__*/React.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 = 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(Wrapper, {}, void 0, hasHeader && this.renderHeader(), /*#__PURE__*/_jsx(Container, {
+      classProps: {
+        scrolling
+      },
+      onKeyDown: this.handleKeyDown,
+      tabIndex: 0
+    }, void 0, /*#__PURE__*/_jsx(PickerSelectedOptionSelected, {
+      innerRef: this.selectedOptionRef
+    }, void 0, _SelectedCircle || (_SelectedCircle = /*#__PURE__*/_jsx(SelectedCircle, {}))), /*#__PURE__*/_jsx(ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({}, arrowProps), {}, {
+      "aria-label": "Chevron Up",
+      "data-testid": "".concat(type, "-chevron-up"),
+      disabled: activeIndex <= 0,
+      icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx(ChevronSmallUp, {})),
+      onClick: this.handleStepMoveUp,
+      tabIndex: -1
+    }))), /*#__PURE__*/_jsx(PickerItemListContainer, {
+      innerRef: this.pickerListContainerRef,
+      style: {
+        height: this.listHeight
+      }
+    }, void 0, /*#__PURE__*/_jsx(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.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.createElement(ArrowButtonContainer, null, /*#__PURE__*/React.createElement(DSButton, _extends({}, arrowProps, {
-        "aria-label": "Chevron Down",
-        "data-testid": "".concat(type, "-chevron-down"),
-        disabled: activeIndex >= options.length - 1,
-        icon: /*#__PURE__*/React.createElement(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(PickerItemContainer, {
+        classProps: {
+          selected: selectedOption ? value === selectedOption : index === 0,
+          disabled
+        },
+        innerRef: this.pickerItemRef,
+        onClick: () => {
+          if (!disabled) this.handleOptionSelect(value, index);
+        }
+      }, value, label);
+    }))), /*#__PURE__*/_jsx(ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({}, arrowProps), {}, {
+      "aria-label": "Chevron Down",
+      "data-testid": "".concat(type, "-chevron-down"),
+      disabled: activeIndex >= options.length - 1,
+      icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+      onClick: this.handleStepMoveDown,
+      tabIndex: -1
+    })))));
+  }
 
-  return PickerPanel;
-}(Component);
+}
 PickerPanel.defaultProps = {
   valueProperty: 'value',
   labelProperty: 'label',
@@ -398,4 +390,3 @@ PickerPanel.defaultProps = {
 };
 
 export { PickerPanel as default };
-//# sourceMappingURL=PickerPanel.js.map