@elliemae/ds-time-picker 2.2.0-alpha.2 → 2.2.0-beta.0

package/cjs/PickerPanel.js

@@ -1,117 +1,157 @@
-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);
+'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
   };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var PickerPanel_exports = {};
-__export(PickerPanel_exports, {
-  PickerPanel: () => PickerPanel,
-  default: () => PickerPanel
 });
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_lodash = __toESM(require("lodash"));
-var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
-var import_memoize_one = __toESM(require("memoize-one"));
-var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_moveElementOnScroll = __toESM(require("./moveElementOnScroll"));
-var import_utils = __toESM(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 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);
 };
+
 const arrowProps = {
-  buttonType: "text",
+  buttonType: 'text',
   fluidHeight: true,
   fluidWidth: true,
-  size: "s"
+  size: 's'
 };
-class PickerPanel extends import_react.Component {
+class PickerPanel extends React.Component {
   constructor(props) {
     super(props);
-    this.computeContainerTranslation = (0, import_memoize_one.default)((index) => {
-      const { options, valueProperty } = this.props;
-      const { selectedOption, scrolling } = this.state;
+    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);
+      if (this.scrollHandler && !scrolling) this.scrollHandler.updatePosition(listYPosition);
       return listYPosition;
     });
+
     this.renderHeader = () => {
-      const { header } = this.props;
-      return /* @__PURE__ */ import_react.default.createElement(PickerHeader, null, header);
+      const {
+        header
+      } = this.props;
+      return /*#__PURE__*/_jsx__default["default"](PickerHeader, {}, void 0, header);
     };
-    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.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(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 import_moveElementOnScroll.MoveElementOnScroll(pickerListEl, {
+    this.scrollHandler = new 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, { prevProps }) {
-    const { selected, valueProperty, options } = nextProps;
+
+  static getDerivedStateFromProps(nextProps, _ref3) {
+    let {
+      prevProps
+    } = _ref3;
+    const {
+      selected,
+      valueProperty,
+      options
+    } = nextProps;
+
     if (selected !== prevProps.selected) {
       return {
         selectedOption: selected,
@@ -119,181 +159,244 @@ class PickerPanel extends import_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) => ({
-      ...state,
+    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 {
+      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 (prev && focusedElement === lastColumn) {
-          prev.focus();
-        } else if (focusedElement === lastColumn) {
-          firstColumn.focus();
-        } else {
-          const position = (0, import_lodash.findIndex)(restColumns, focusedElement);
-          restColumns[position + 1].focus();
+
+      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;
         }
-        break;
-      }
-      default:
-        break;
     }
   }
+
   moveTo(index, scrolling) {
-    const { options } = this.props;
-    const { selectedOption } = this.state;
-    const validIndex = (0, import_utils.validateIndex)(index, options);
+    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
+
   }
+
   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__ */ import_react.default.createElement(Wrapper, null, hasHeader && this.renderHeader(), /* @__PURE__ */ import_react.default.createElement(Container, {
-      classProps: { scrolling },
+    return /*#__PURE__*/_jsx__default["default"](Wrapper, {}, void 0, hasHeader && this.renderHeader(), /*#__PURE__*/_jsx__default["default"](Container, {
+      classProps: {
+        scrolling
+      },
       onKeyDown: this.handleKeyDown,
       tabIndex: 0
-    }, /* @__PURE__ */ import_react.default.createElement(PickerSelectedOptionSelected, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](PickerSelectedOptionSelected, {
       innerRef: this.selectedOptionRef
-    }, /* @__PURE__ */ import_react.default.createElement(SelectedCircle, null)), /* @__PURE__ */ import_react.default.createElement(ArrowButtonContainer, null, /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
-      ...arrowProps,
+    }, 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": `${type}-chevron-up`,
+      "data-testid": "".concat(type, "-chevron-up"),
       disabled: activeIndex <= 0,
-      icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallUp, null),
+      icon: _ChevronSmallUp || (_ChevronSmallUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallUp, {})),
       onClick: this.handleStepMoveUp,
       tabIndex: -1
-    })), /* @__PURE__ */ import_react.default.createElement(PickerItemListContainer, {
+    }))), /*#__PURE__*/_jsx__default["default"](PickerItemListContainer, {
       innerRef: this.pickerListContainerRef,
       style: {
         height: this.listHeight
       }
-    }, /* @__PURE__ */ import_react.default.createElement(PickerItemList, {
-      "data-testid": `${type}-list`,
+    }, void 0, /*#__PURE__*/_jsx__default["default"](PickerItemList, {
+      "data-testid": "".concat(type, "-list"),
       innerRef: this.pickerListRef,
       style: {
-        transform: `translateY(${listYPosition}px)`
+        transform: "translateY(".concat(listYPosition, "px)")
       }
-    }, options.map((option, index) => {
+    }, 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;
+      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?.hour && valueFormatted < to?.hour || type === "minutes" && value >= from?.min && value < to?.min) {
+        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 (type === "minutes" && (time?.hour() > to?.hour || time?.hour() < from?.hour)) {
+
+        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 === "am" && from?.hour == 0 && to?.hour >= 12) {
+
+        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 (label === "pm" && to?.hour == 24) {
+
+        if (label === 'pm' && (to === null || to === void 0 ? void 0 : to.hour) == 24) {
           disabled = true;
         }
       }
+
       option.disabled = disabled;
-      return /* @__PURE__ */ import_react.default.createElement(PickerItemContainer, {
-        key: value,
+      return /*#__PURE__*/_jsx__default["default"](PickerItemContainer, {
         classProps: {
           selected: selectedOption ? value === selectedOption : index === 0,
           disabled
         },
         innerRef: this.pickerItemRef,
         onClick: () => {
-          if (!disabled)
-            this.handleOptionSelect(value, index);
+          if (!disabled) this.handleOptionSelect(value, index);
         }
-      }, label);
-    }))), /* @__PURE__ */ import_react.default.createElement(ArrowButtonContainer, null, /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
-      ...arrowProps,
+      }, value, label);
+    }))), /*#__PURE__*/_jsx__default["default"](ArrowButtonContainer, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread(_objectSpread({}, arrowProps), {}, {
       "aria-label": "Chevron Down",
-      "data-testid": `${type}-chevron-down`,
+      "data-testid": "".concat(type, "-chevron-down"),
       disabled: activeIndex >= options.length - 1,
-      icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronSmallDown, null),
+      icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {})),
       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 = __toCommonJS(PickerPanel_exports);
-//# sourceMappingURL=PickerPanel.js.map
+
+module.exports = PickerPanel;