@elliemae/ds-time-picker 2.2.0 → 2.3.0-alpha.3

package/cjs/PickerPanel.js

@@ -1,157 +1,117 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-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');
-var memoizeOne = require('memoize-one');
-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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var memoizeOne__default = /*#__PURE__*/_interopDefaultLegacy(memoizeOne);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-
-var _SelectedCircle, _ChevronSmallUp, _ChevronSmallDown;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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
-  };
-});
-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,
-    disabled
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var PickerPanel_exports = {};
+__export(PickerPanel_exports, {
+  PickerPanel: () => PickerPanel,
+  default: () => PickerPanel
 });
-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 React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_lodash = require("lodash");
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_memoize_one = __toESM(require("memoize-one"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_button = require("@elliemae/ds-button");
+var import_moveElementOnScroll = require("./moveElementOnScroll");
+var import_utils = require("./utils");
+const blockName = "time-picker-panel";
+const Container = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, null, ({ scrolling }) => ({ scrolling }));
+const Wrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "wrapper");
+const PickerItemListContainer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "item-list-container");
+const PickerItemList = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "item-list");
+const PickerHeader = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "header");
+const PickerItemContainer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "item", ({ selected, disabled }) => ({
+  selected,
+  disabled
+}));
+const PickerSelectedOptionSelected = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "selected-container");
+const SelectedCircle = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "selected-circle");
+const ArrowButtonContainer = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "arrow-container");
+const getOptionIndex = (options, selectedOption, valueProperty = "value") => {
+  const index = options.findIndex((option) => option[valueProperty] === selectedOption);
+  return (0, import_utils.validateIndex)(index, options);
 };
-
 const arrowProps = {
-  buttonType: 'text',
+  buttonType: "text",
   fluidHeight: true,
   fluidWidth: true,
-  size: 's'
+  size: "s"
 };
-class PickerPanel extends React.Component {
+class PickerPanel extends import_react.Component {
   constructor(props) {
     super(props);
-    this.computeContainerTranslation = memoizeOne__default["default"](index => {
-      const {
-        options,
-        valueProperty
-      } = this.props;
-      const {
-        selectedOption,
-        scrolling
-      } = this.state;
+    this.computeContainerTranslation = (0, import_memoize_one.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);
+      if (this.scrollHandler && !scrolling)
+        this.scrollHandler.updatePosition(listYPosition);
       return listYPosition;
     });
-
     this.renderHeader = () => {
-      const {
-        header
-      } = this.props;
-      return /*#__PURE__*/_jsx__default["default"](PickerHeader, {}, void 0, header);
+      const { header } = this.props;
+      return /* @__PURE__ */ import_react.default.createElement(PickerHeader, null, 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.pickerListContainerRef = import_react.default.createRef();
+    this.pickerListRef = import_react.default.createRef();
+    this.pickerItemRef = import_react.default.createRef();
+    this.selectedOptionRef = import_react.default.createRef();
     this.state = {
       selectedOption: props.selected,
       activeIndex: 0,
-      // eslint-disable-next-line react/no-unused-state
       prevProps: {}
     };
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleStepMoveUp = this.handleStepMoveUp.bind(this);
-    this.handleStepMoveDown = this.handleStepMoveDown.bind(this);
   }
-
   componentDidMount() {
     this.computeSizes();
     const pickerListContainerEl = this.pickerListContainerRef.current;
     const pickerListEl = this.pickerListRef.current;
-    this.scrollHandler = new moveElementOnScroll.MoveElementOnScroll(pickerListEl, {
+    this.scrollHandler = new import_moveElementOnScroll.MoveElementOnScroll(pickerListEl, {
       container: pickerListContainerEl,
       min: -this.minYListPosition,
       max: this.maxYListPosition,
       onUpdate: (pos, delta) => {
-        const {
-          options
-        } = this.props;
+        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
-        });
+        this.setState({ scrolling: false });
       }
     });
     this.computeContainerTranslation();
   }
-
   componentWillUnmount() {
     this.scrollHandler.unsubscribe();
   }
-
-  static getDerivedStateFromProps(nextProps, _ref3) {
-    let {
-      prevProps
-    } = _ref3;
-    const {
-      selected,
-      valueProperty,
-      options
-    } = nextProps;
-
+  static getDerivedStateFromProps(nextProps, { prevProps }) {
+    const { selected, valueProperty, options } = nextProps;
     if (selected !== prevProps.selected) {
       return {
         selectedOption: selected,
@@ -159,244 +119,181 @@ class PickerPanel extends React.Component {
         prevProps: nextProps
       };
     }
-
     return null;
   }
-
   getOptionValue(option) {
-    const {
-      valueProperty
-    } = this.props;
+    const { valueProperty } = this.props;
     return option[valueProperty];
   }
-
   getOptionLabel(option) {
-    const {
-      labelProperty
-    } = this.props;
+    const { labelProperty } = this.props;
     return option[labelProperty];
   }
-
   computeSizes() {
-    const {
-      options,
-      numberItemsOnScreen
-    } = this.props;
-    const {
-      offsetHeight: optionHeight
-    } = this.pickerItemRef.current;
+    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), {}, {
+    const { onChange } = this.props;
+    this.setState((state) => ({
+      ...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 { 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 [prev] = document.getElementsByClassName("DayPickerNavigation_button");
     const focusedElement = document.activeElement;
-
     switch (e.key) {
-      case 'Home':
+      case "Home":
         this.moveTo(0);
         break;
-
-      case 'End':
+      case "End":
         this.moveTo(options.length - 1);
         break;
-
-      case 'ArrowUp':
+      case "ArrowUp":
         this.moveTo(activeIndex - 1);
         break;
-
-      case 'ArrowDown':
+      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();
-          }
-
-          break;
+      case "Tab": {
+        e.preventDefault();
+        if (prev && focusedElement === lastColumn) {
+          prev.focus();
+        } else if (focusedElement === lastColumn) {
+          firstColumn.focus();
+        } else {
+          const position = (0, import_lodash.findIndex)(restColumns, focusedElement);
+          restColumns[position + 1].focus();
         }
+        break;
+      }
+      default:
+        break;
     }
   }
-
   moveTo(index, scrolling) {
-    const {
-      options
-    } = this.props;
-    const {
-      selectedOption
-    } = this.state;
-    const validIndex = utils.validateIndex(index, options);
+    const { options } = this.props;
+    const { selectedOption } = this.state;
+    const validIndex = (0, import_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
-
+    }
   }
-
   handleStepMoveUp() {
-    const {
-      activeIndex
-    } = this.state;
-    const {
-      arrowStep,
-      options
-    } = this.props;
+    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);
+    const nextValidOption = options.find((op) => !op.disabled);
     this.moveTo(nextPos, true, nextValidOption);
   }
-
   handleStepMoveDown() {
-    const {
-      activeIndex
-    } = this.state;
-    const {
-      arrowStep,
-      options
-    } = this.props;
+    const { activeIndex } = this.state;
+    const { arrowStep, options } = this.props;
     const supposedPos = activeIndex + arrowStep;
     const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;
     this.moveTo(nextPos);
   }
-
   render() {
-    const {
-      options,
-      hasHeader,
-      type,
-      time,
-      meridiem,
-      disabledTimes
-    } = this.props;
-    const {
-      selectedOption,
-      activeIndex,
-      scrolling
-    } = this.state;
+    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
-      },
+    return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, hasHeader && this.renderHeader(), /* @__PURE__ */ import_react.default.createElement(Container, {
+      classProps: { scrolling },
       onKeyDown: this.handleKeyDown,
       tabIndex: 0
-    }, void 0, /*#__PURE__*/_jsx__default["default"](PickerSelectedOptionSelected, {
+    }, /* @__PURE__ */ import_react.default.createElement(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), {}, {
+    }, /* @__PURE__ */ import_react.default.createElement(SelectedCircle, null)), /* @__PURE__ */ import_react.default.createElement(ArrowButtonContainer, null, /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
+      ...arrowProps,
       "aria-label": "Chevron Up",
-      "data-testid": "".concat(type, "-chevron-up"),
+      "data-testid": `${type}-chevron-up`,
       disabled: activeIndex <= 0,
-      icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})),
+      icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallUp, null),
       onClick: this.handleStepMoveUp,
       tabIndex: -1
-    }))), /*#__PURE__*/_jsx__default["default"](PickerItemListContainer, {
+    })), /* @__PURE__ */ import_react.default.createElement(PickerItemListContainer, {
       innerRef: this.pickerListContainerRef,
       style: {
         height: this.listHeight
       }
-    }, void 0, /*#__PURE__*/_jsx__default["default"](PickerItemList, {
-      "data-testid": "".concat(type, "-list"),
+    }, /* @__PURE__ */ import_react.default.createElement(PickerItemList, {
+      "data-testid": `${type}-list`,
       innerRef: this.pickerListRef,
       style: {
-        transform: "translateY(".concat(listYPosition, "px)")
+        transform: `translateY(${listYPosition}px)`
       }
-    }, void 0, options.map((option, index) => {
+    }, 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;
+      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)) {
+        const { from, to } = disabledTimes;
+        if (type === "hour" && valueFormatted >= from?.hour && valueFormatted < to?.hour || type === "minutes" && value >= from?.min && value < to?.min) {
           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))) {
+        if (type === "minutes" && (time?.hour() > to?.hour || time?.hour() < from?.hour)) {
           disabled = false;
         }
-
-        if (label === 'am' && (from === null || from === void 0 ? void 0 : from.hour) == 0 && (to === null || to === void 0 ? void 0 : to.hour) >= 12) {
+        if (label === "am" && from?.hour == 0 && to?.hour >= 12) {
           disabled = true;
         }
-
-        if (label === 'pm' && (to === null || to === void 0 ? void 0 : to.hour) == 24) {
+        if (label === "pm" && to?.hour == 24) {
           disabled = true;
         }
       }
-
       option.disabled = disabled;
-      return /*#__PURE__*/_jsx__default["default"](PickerItemContainer, {
+      return /* @__PURE__ */ import_react.default.createElement(PickerItemContainer, {
+        key: value,
         classProps: {
           selected: selectedOption ? value === selectedOption : index === 0,
           disabled
         },
         innerRef: this.pickerItemRef,
         onClick: () => {
-          if (!disabled) this.handleOptionSelect(value, index);
+          if (!disabled)
+            this.handleOptionSelect(value, index);
         }
-      }, value, label);
-    }))), /*#__PURE__*/_jsx__default["default"](ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, arrowProps), {}, {
+      }, label);
+    }))), /* @__PURE__ */ import_react.default.createElement(ArrowButtonContainer, null, /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
+      ...arrowProps,
       "aria-label": "Chevron Down",
-      "data-testid": "".concat(type, "-chevron-down"),
+      "data-testid": `${type}-chevron-down`,
       disabled: activeIndex >= options.length - 1,
-      icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
+      icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, null),
       onClick: this.handleStepMoveDown,
       tabIndex: -1
-    })))));
+    }))));
   }
-
 }
 PickerPanel.defaultProps = {
-  valueProperty: 'value',
-  labelProperty: 'label',
+  valueProperty: "value",
+  labelProperty: "label",
   numberItemsOnScreen: 5,
-  // this number should be impair
   options: [],
   arrowStep: 1
 };
-
-module.exports = PickerPanel;
+module.exports = __toCommonJS(PickerPanel_exports);
+//# sourceMappingURL=PickerPanel.js.map

package/cjs/PickerPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/PickerPanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable eqeqeq */\n/* eslint-disable react/prop-types */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { findIndex } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport memoizeOne from 'memoize-one';\nimport { ChevronSmallUp, ChevronSmallDown } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { MoveElementOnScroll } from './moveElementOnScroll';\nimport { validateIndex } from './utils';\n\nconst blockName = 'time-picker-panel';\n\nconst Container = aggregatedClasses('div')(blockName, null, ({ scrolling }) => ({ scrolling }));\nconst Wrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst PickerItemListContainer = aggregatedClasses('div')(blockName, 'item-list-container');\nconst PickerItemList = aggregatedClasses('div')(blockName, 'item-list');\nconst PickerHeader = aggregatedClasses('div')(blockName, 'header');\nconst PickerItemContainer = aggregatedClasses('div')(blockName, 'item', ({ selected, disabled }) => ({\n  selected,\n  disabled,\n}));\nconst PickerSelectedOptionSelected = aggregatedClasses('div')(blockName, 'selected-container');\nconst SelectedCircle = aggregatedClasses('div')(blockName, 'selected-circle');\nconst ArrowButtonContainer = aggregatedClasses('div')(blockName, 'arrow-container');\n\nconst getOptionIndex = (options, selectedOption, valueProperty = 'value') => {\n  const index = options.findIndex((option) => option[valueProperty] === selectedOption);\n  return validateIndex(index, options);\n};\n\nconst arrowProps = {\n  buttonType: 'text',\n  fluidHeight: true,\n  fluidWidth: true,\n  size: 's',\n};\n\nexport default class PickerPanel extends Component {\n  computeContainerTranslation = memoizeOne((index) => {\n    const { options, valueProperty } = this.props;\n    const { selectedOption, scrolling } = this.state;\n\n    const selectedOptionIndex = index || getOptionIndex(options, selectedOption, valueProperty);\n    const listYPosition = this.minYListPosition - selectedOptionIndex * this.optionHeight;\n\n    if (this.scrollHandler && !scrolling) this.scrollHandler.updatePosition(listYPosition);\n\n    return listYPosition;\n  });\n\n  constructor(props) {\n    super(props);\n    this.pickerListContainerRef = React.createRef();\n    this.pickerListRef = React.createRef();\n    this.pickerItemRef = React.createRef();\n    this.selectedOptionRef = React.createRef();\n\n    this.state = {\n      selectedOption: props.selected,\n      activeIndex: 0,\n      // eslint-disable-next-line react/no-unused-state\n      prevProps: {},\n    };\n  }\n\n  componentDidMount() {\n    this.computeSizes();\n    const pickerListContainerEl = this.pickerListContainerRef.current;\n    const pickerListEl = this.pickerListRef.current;\n\n    this.scrollHandler = new MoveElementOnScroll(pickerListEl, {\n      container: pickerListContainerEl,\n      min: -this.minYListPosition,\n      max: this.maxYListPosition,\n      onUpdate: (pos, delta) => {\n        const { options } = this.props;\n        const index =\n          options.length - -Math.floor((pos - this.maxYListPosition) / this.optionHeight) + (delta > 0 ? 1 : -1);\n        this.moveTo(index, true);\n      },\n      onEndScroll: () => {\n        this.setState({ scrolling: false });\n      },\n    });\n    this.computeContainerTranslation();\n  }\n\n  componentWillUnmount() {\n    this.scrollHandler.unsubscribe();\n  }\n\n  static getDerivedStateFromProps(nextProps, { prevProps }) {\n    const { selected, valueProperty, options } = nextProps;\n    if (selected !== prevProps.selected) {\n      return {\n        selectedOption: selected,\n        activeIndex: getOptionIndex(options, selected, valueProperty),\n        prevProps: nextProps,\n      };\n    }\n    return null;\n  }\n\n  getOptionValue(option) {\n    const { valueProperty } = this.props;\n    return option[valueProperty];\n  }\n\n  getOptionLabel(option) {\n    const { labelProperty } = this.props;\n    return option[labelProperty];\n  }\n\n  computeSizes() {\n    const { options, numberItemsOnScreen } = this.props;\n    const { offsetHeight: optionHeight } = this.pickerItemRef.current;\n\n    this.optionHeight = optionHeight;\n    this.listHeight = this.optionHeight * numberItemsOnScreen;\n\n    this.minYListPosition = this.listHeight / 2 - this.optionHeight / 2;\n    this.maxYListPosition = this.optionHeight * (options.length - Math.ceil(numberItemsOnScreen / 2));\n  }\n\n  handleOptionSelect(optionValue, index, scrolling) {\n    const { onChange } = this.props;\n    this.setState(\n      (state) => ({\n        ...state,\n        scrolling,\n        selectedOption: optionValue,\n        activeIndex: index,\n      }),\n      () => {\n        onChange(optionValue, index);\n      },\n    );\n  }\n\n  // TODO: this needs a refactor from de FocusGroup\n  // eslint-disable-next-line max-statements\n  handleKeyDown(e) {\n    const { activeIndex } = this.state;\n    const { options } = this.props;\n    const [firstColumn, ...restColumns] = document.getElementsByClassName('em-ds-time-picker-panel');\n    const [lastColumn] = restColumns.slice(-1);\n    const [prev] = document.getElementsByClassName('DayPickerNavigation_button');\n    const focusedElement = document.activeElement;\n\n    switch (e.key) {\n      case 'Home':\n        this.moveTo(0);\n        break;\n      case 'End':\n        this.moveTo(options.length - 1);\n        break;\n      case 'ArrowUp':\n        this.moveTo(activeIndex - 1);\n        break;\n      case 'ArrowDown':\n        this.moveTo(activeIndex + 1);\n        break;\n      case 'Tab': {\n        e.preventDefault();\n        // If it is DateTimePicker, move focus to prev arrow element\n        if (prev && focusedElement === lastColumn) {\n          prev.focus();\n        } else if (focusedElement === lastColumn) {\n          firstColumn.focus();\n        } else {\n          const position = findIndex(restColumns, focusedElement);\n          restColumns[position + 1].focus();\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  moveTo(index, scrolling) {\n    const { options } = this.props;\n    const { selectedOption } = this.state;\n    const validIndex = validateIndex(index, options);\n    const option = options[validIndex];\n    const optionValue = this.getOptionValue(option);\n    if (selectedOption !== optionValue && option.disabled !== true) {\n      this.handleOptionSelect(optionValue, validIndex, scrolling);\n    }\n    // TO-DO: if date disabled, add nextValidOption selection\n  }\n\n  handleStepMoveUp() {\n    const { activeIndex } = this.state;\n    const { arrowStep, options } = this.props;\n    const supposedPos = activeIndex - arrowStep;\n    const nextPos = supposedPos >= 0 ? supposedPos : activeIndex - 1;\n\n    const nextValidOption = options.find((op) => !op.disabled);\n    this.moveTo(nextPos, true, nextValidOption);\n  }\n\n  handleStepMoveDown() {\n    const { activeIndex } = this.state;\n    const { arrowStep, options } = this.props;\n    const supposedPos = activeIndex + arrowStep;\n    const nextPos = supposedPos <= options.length ? supposedPos : activeIndex + 1;\n    this.moveTo(nextPos);\n  }\n\n  renderHeader = () => {\n    const { header } = this.props;\n\n    return <PickerHeader>{header}</PickerHeader>;\n  };\n\n  render() {\n    const { options, hasHeader, type, time, meridiem, disabledTimes } = this.props;\n    const { selectedOption, activeIndex, scrolling } = this.state;\n\n    const listYPosition = this.computeContainerTranslation(activeIndex);\n\n    return (\n      <Wrapper>\n        {hasHeader && this.renderHeader()}\n        <Container classProps={{ scrolling }} onKeyDown={this.handleKeyDown} tabIndex={0}>\n          <PickerSelectedOptionSelected innerRef={this.selectedOptionRef}>\n            <SelectedCircle />\n          </PickerSelectedOptionSelected>\n          <ArrowButtonContainer>\n            <DSButton\n              {...arrowProps}\n              aria-label=\"Chevron Up\"\n              data-testid={`${type}-chevron-up`}\n              disabled={activeIndex <= 0}\n              icon={<ChevronSmallUp />}\n              onClick={this.handleStepMoveUp}\n              tabIndex={-1}\n            />\n          </ArrowButtonContainer>\n          <PickerItemListContainer\n            innerRef={this.pickerListContainerRef}\n            style={{\n              height: this.listHeight,\n            }}\n          >\n            <PickerItemList\n              data-testid={`${type}-list`}\n              innerRef={this.pickerListRef}\n              style={{\n                transform: `translateY(${listYPosition}px)`,\n              }}\n            >\n              {options.map((option, index) => {\n                const value = this.getOptionValue(option);\n                const label = this.getOptionLabel(option);\n                let valueFormatted;\n                if (meridiem === 'AM') valueFormatted = value;\n                else if (meridiem === 'PM' && value === 12) valueFormatted = value;\n                else if (meridiem === 'PM') valueFormatted = value + 12;\n\n                let disabled = false;\n                if (disabledTimes) {\n                  const { from, to } = disabledTimes;\n                  if (\n                    (type === 'hour' && valueFormatted >= from?.hour && valueFormatted < to?.hour) ||\n                    (type === 'minutes' && value >= from?.min && value < to?.min)\n                  ) {\n                    disabled = true;\n                  }\n                  if (type === 'minutes' && (time?.hour() > to?.hour || time?.hour() < from?.hour)) {\n                    disabled = false;\n                  }\n                  if (label === 'am' && from?.hour == 0 && to?.hour >= 12) {\n                    disabled = true;\n                  }\n                  if (label === 'pm' && to?.hour == 24) {\n                    disabled = true;\n                  }\n                }\n\n                option.disabled = disabled;\n\n                return (\n                  <PickerItemContainer\n                    key={value}\n                    classProps={{\n                      selected: selectedOption ? value === selectedOption : index === 0,\n                      disabled,\n                    }}\n                    innerRef={this.pickerItemRef}\n                    onClick={() => {\n                      if (!disabled) this.handleOptionSelect(value, index);\n                    }}\n                  >\n                    {label}\n                  </PickerItemContainer>\n                );\n              })}\n            </PickerItemList>\n          </PickerItemListContainer>\n          <ArrowButtonContainer>\n            <DSButton\n              {...arrowProps}\n              aria-label=\"Chevron Down\"\n              data-testid={`${type}-chevron-down`}\n              disabled={activeIndex >= options.length - 1}\n              icon={<ChevronSmallDown />}\n              onClick={this.handleStepMoveDown}\n              tabIndex={-1}\n            />\n          </ArrowButtonContainer>\n        </Container>\n      </Wrapper>\n    );\n  }\n}\n\nPickerPanel.defaultProps = {\n  valueProperty: 'value',\n  labelProperty: 'label',\n  numberItemsOnScreen: 5, // this number should be impair\n  options: [],\n  arrowStep: 1,\n};\n\nexport { PickerPanel };", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}