@elliemae/ds-legacy-time-picker 1.0.0-rc.1

package/dist/cjs/moveElementOnScroll.js

@@ -0,0 +1,94 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var moveElementOnScroll_exports = {};
+__export(moveElementOnScroll_exports, {
+  MoveElementOnScroll: () => MoveElementOnScroll,
+  default: () => moveElementOnScroll_default
+});
+module.exports = __toCommonJS(moveElementOnScroll_exports);
+var React = __toESM(require("react"));
+function MoveElementOnScroll(element, {
+  container,
+  min = 0,
+  max = element.offsetHeight,
+  speed = 1,
+  smooth = 2,
+  onUpdate = () => null,
+  onEndScroll = () => null
+}) {
+  let moving = false;
+  let pos = min;
+  let lastPos = pos;
+  const requestFrame = function() {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
+      window.setTimeout(func, 1e3 / 50);
+    };
+  }();
+  function update() {
+    moving = true;
+    const delta = (pos - lastPos) / smooth;
+    lastPos += delta;
+    if (Math.abs(delta) > 0.7) {
+      requestFrame(() => {
+        onUpdate(lastPos, delta);
+        update();
+      });
+    } else {
+      onEndScroll(pos);
+      moving = false;
+    }
+  }
+  function scrolling(e) {
+    e.preventDefault();
+    let delta = e.delta || e.wheelDelta;
+    if (delta === void 0) {
+      delta = -e.detail;
+      delta *= 10 * speed;
+    }
+    pos += -delta * speed;
+    pos = Math.max(min, Math.min(pos, max));
+    if (!moving) {
+      update();
+    }
+  }
+  container.addEventListener("mousewheel", scrolling, false);
+  container.addEventListener("DOMMouseScroll", scrolling, false);
+  return {
+    unsubscribe: () => {
+      container.removeEventListener("mousewheel", scrolling);
+      container.removeEventListener("DOMMouseScroll", scrolling);
+    },
+    updatePosition: (newPos) => {
+      pos = -newPos;
+      lastPos = -pos;
+    }
+  };
+}
+var moveElementOnScroll_default = MoveElementOnScroll;
+//# sourceMappingURL=moveElementOnScroll.js.map

package/dist/cjs/moveElementOnScroll.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/moveElementOnScroll.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export function MoveElementOnScroll(\n  element,\n  {\n    container,\n    min = 0,\n    max = element.offsetHeight,\n    speed = 1,\n    smooth = 2,\n    onUpdate = () => null,\n    onEndScroll = () => null,\n  },\n) {\n  let moving = false;\n  let pos = min;\n  let lastPos = pos;\n\n  // todo: move this to utils if we finally need it\n  const requestFrame = (function () {\n    return (\n      window.requestAnimationFrame ||\n      window.webkitRequestAnimationFrame ||\n      window.mozRequestAnimationFrame ||\n      window.oRequestAnimationFrame ||\n      window.msRequestAnimationFrame ||\n      function (func) {\n        window.setTimeout(func, 1000 / 50);\n      }\n    );\n  })();\n\n  function update() {\n    moving = true;\n    const delta = (pos - lastPos) / smooth;\n    lastPos += delta;\n\n    if (Math.abs(delta) > 0.7) {\n      requestFrame(() => {\n        onUpdate(lastPos, delta);\n        update();\n      });\n    } else {\n      onEndScroll(pos);\n      moving = false;\n    }\n  }\n\n  function scrolling(e) {\n    e.preventDefault(); // disable default scrolling\n    let delta = e.delta || e.wheelDelta;\n    if (delta === undefined) {\n      // for firefox\n      delta = -e.detail;\n      delta *= 10 * speed;\n    }\n\n    pos += -delta * speed;\n    pos = Math.max(min, Math.min(pos, max)); // limit scrolling\n    if (!moving) {\n      update();\n    }\n  }\n\n  container.addEventListener('mousewheel', scrolling, false);\n  container.addEventListener('DOMMouseScroll', scrolling, false);\n\n  return {\n    unsubscribe: () => {\n      container.removeEventListener('mousewheel', scrolling);\n      container.removeEventListener('DOMMouseScroll', scrolling);\n    },\n    updatePosition: (newPos) => {\n      pos = -newPos;\n      lastPos = -pos;\n    },\n  };\n}\n\nexport default MoveElementOnScroll;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,SAAS,oBACd,SACA;AAAA,EACE;AAAA,EACA,MAAM;AAAA,EACN,MAAM,QAAQ;AAAA,EACd,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AACtB,GACA;AACA,MAAI,SAAS;AACb,MAAI,MAAM;AACV,MAAI,UAAU;AAGd,QAAM,eAAgB,WAAY;AAChC,WACE,OAAO,yBACP,OAAO,+BACP,OAAO,4BACP,OAAO,0BACP,OAAO,2BACP,SAAU,MAAM;AACd,aAAO,WAAW,MAAM,MAAO,EAAE;AAAA,IACnC;AAAA,EAEJ,EAAG;AAEH,WAAS,SAAS;AAChB,aAAS;AACT,UAAM,SAAS,MAAM,WAAW;AAChC,eAAW;AAEX,QAAI,KAAK,IAAI,KAAK,IAAI,KAAK;AACzB,mBAAa,MAAM;AACjB,iBAAS,SAAS,KAAK;AACvB,eAAO;AAAA,MACT,CAAC;AAAA,IACH,OAAO;AACL,kBAAY,GAAG;AACf,eAAS;AAAA,IACX;AAAA,EACF;AAEA,WAAS,UAAU,GAAG;AACpB,MAAE,eAAe;AACjB,QAAI,QAAQ,EAAE,SAAS,EAAE;AACzB,QAAI,UAAU,QAAW;AAEvB,cAAQ,CAAC,EAAE;AACX,eAAS,KAAK;AAAA,IAChB;AAEA,WAAO,CAAC,QAAQ;AAChB,UAAM,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,GAAG,CAAC;AACtC,QAAI,CAAC,QAAQ;AACX,aAAO;AAAA,IACT;AAAA,EACF;AAEA,YAAU,iBAAiB,cAAc,WAAW,KAAK;AACzD,YAAU,iBAAiB,kBAAkB,WAAW,KAAK;AAE7D,SAAO;AAAA,IACL,aAAa,MAAM;AACjB,gBAAU,oBAAoB,cAAc,SAAS;AACrD,gBAAU,oBAAoB,kBAAkB,SAAS;AAAA,IAC3D;AAAA,IACA,gBAAgB,CAAC,WAAW;AAC1B,YAAM,CAAC;AACP,gBAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF;AAEA,IAAO,8BAAQ;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/utils.js

@@ -0,0 +1,72 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  convertTimeString: () => convertTimeString,
+  getOptionIndex: () => getOptionIndex,
+  isAM: () => isAM,
+  validateIndex: () => validateIndex
+});
+module.exports = __toCommonJS(utils_exports);
+var React = __toESM(require("react"));
+const validateIndex = (index, options) => {
+  if (index < 0)
+    return 0;
+  if (index >= options.length)
+    return options.length - 1;
+  return index;
+};
+const getOptionIndex = (options, selectedOption, valueProperty = "value") => {
+  const index = options.findIndex((option) => option[valueProperty] === selectedOption);
+  return validateIndex(index, options);
+};
+const isAM = (time) => time && time.hour() < 12;
+const convertTimeString = (string) => {
+  if (!string)
+    return null;
+  let meridiem = "AM";
+  if (string.toUpperCase().includes("PM"))
+    meridiem = "PM";
+  const arr = string.split(":");
+  let hour = parseInt(arr[0], 10);
+  if (meridiem === "PM" && hour !== 12)
+    hour += 12;
+  if (meridiem === "AM" && hour === 12)
+    hour = 0;
+  if (meridiem === "PM" && hour === 12)
+    hour = 12;
+  const min = parseInt(arr[1], 10);
+  const sec = parseInt(arr[2], 10);
+  return {
+    hour,
+    min,
+    sec
+  };
+};
+//# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const validateIndex = (index, options) => {\n  if (index < 0) return 0;\n  if (index >= options.length) return options.length - 1;\n  return index;\n};\n\nexport const getOptionIndex = (options, selectedOption, valueProperty = 'value') => {\n  const index = options.findIndex((option) => option[valueProperty] === selectedOption);\n  return validateIndex(index, options);\n};\n\nexport const isAM = (time) => time && time.hour() < 12;\n\nexport const convertTimeString = (string) => {\n  if (!string) return null;\n  let meridiem = 'AM';\n  if (string.toUpperCase().includes('PM')) meridiem = 'PM';\n\n  const arr = string.split(':');\n  let hour = parseInt(arr[0], 10);\n  if (meridiem === 'PM' && hour !== 12) hour += 12; // formats to 24\n  if (meridiem === 'AM' && hour === 12) hour = 0;\n  if (meridiem === 'PM' && hour === 12) hour = 12;\n\n  const min = parseInt(arr[1], 10);\n  const sec = parseInt(arr[2], 10);\n\n  return {\n    hour,\n    min,\n    sec,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,gBAAgB,CAAC,OAAO,YAAY;AAC/C,MAAI,QAAQ;AAAG,WAAO;AACtB,MAAI,SAAS,QAAQ;AAAQ,WAAO,QAAQ,SAAS;AACrD,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,SAAS,gBAAgB,gBAAgB,YAAY;AAClF,QAAM,QAAQ,QAAQ,UAAU,CAAC,WAAW,OAAO,aAAa,MAAM,cAAc;AACpF,SAAO,cAAc,OAAO,OAAO;AACrC;AAEO,MAAM,OAAO,CAAC,SAAS,QAAQ,KAAK,KAAK,IAAI;AAE7C,MAAM,oBAAoB,CAAC,WAAW;AAC3C,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,WAAW;AACf,MAAI,OAAO,YAAY,EAAE,SAAS,IAAI;AAAG,eAAW;AAEpD,QAAM,MAAM,OAAO,MAAM,GAAG;AAC5B,MAAI,OAAO,SAAS,IAAI,CAAC,GAAG,EAAE;AAC9B,MAAI,aAAa,QAAQ,SAAS;AAAI,YAAQ;AAC9C,MAAI,aAAa,QAAQ,SAAS;AAAI,WAAO;AAC7C,MAAI,aAAa,QAAQ,SAAS;AAAI,WAAO;AAE7C,QAAM,MAAM,SAAS,IAAI,CAAC,GAAG,EAAE;AAC/B,QAAM,MAAM,SAAS,IAAI,CAAC,GAAG,EAAE;AAE/B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/DSTimePicker.js

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { PropTypes, describe } from "@elliemae/ds-legacy-props-helpers";
+import Moment from "moment";
+import TimePickerImpl from "./TimePickerImpl.js";
+const DSTimePicker = ({
+  containerProps = {},
+  innerRef,
+  className = "",
+  disabled = false,
+  value = "",
+  format,
+  style = {},
+  onChange = () => null,
+  onOpen = () => null,
+  isOpen = void 0,
+  clearable = false,
+  hasHeader = true,
+  hasHeaderDisplay = false,
+  "aria-label": ariaLabel,
+  zIndex = "auto",
+  placement = "bottom",
+  disabledTimes,
+  minutesInterval = 1
+}) => /* @__PURE__ */ jsx(
+  TimePickerImpl,
+  {
+    ref: innerRef,
+    "aria-label": ariaLabel,
+    className,
+    clearable,
+    containerProps,
+    disabled,
+    format,
+    hasHeader,
+    hasHeaderDisplay,
+    isOpen,
+    onChange,
+    onOpen,
+    placement,
+    style,
+    value,
+    zIndex,
+    minutesInterval,
+    disabledTimes
+  }
+);
+DSTimePicker.defaultProps = {
+  format: "hh:mm:ss A"
+};
+const props = {
+  /** a11y label */
+  "aria-label": PropTypes.string.description("a11y label"),
+  /** inject props to time picker wrapper */
+  containerProps: PropTypes.object.description("inject props to time picker wrapper"),
+  /** Whether the time picker is disabled or not */
+  disabled: PropTypes.bool.description("Whether the time picker is disabled or not"),
+  /** Time picker value */
+  value: PropTypes.instanceOf(Moment).description("Time picker value"),
+  /** Time format (hh:mm:ss, H:m:s) */
+  format: PropTypes.string.description("Time format (hh:mm:ss, H:m:s)"),
+  /** toggle header style */
+  hasHeader: PropTypes.bool.description("toggle header style"),
+  /** toggle header display */
+  hasHeaderDisplay: PropTypes.bool.description("toggle header display"),
+  /** Handler when time picker value changes */
+  onChange: PropTypes.func.description("Handler when time picker value changes"),
+  /** Handler when the time picker menu opens */
+  onOpen: PropTypes.func.description("Handler when the time picker menu opens"),
+  /** Whether the time picker menu is opened or not */
+  isOpen: PropTypes.bool.description("Whether the time picker menu is opened or not"),
+  /** ref for time picker input */
+  innerRef: PropTypes.func.description("ref for time picker input"),
+  /** Enable to clear the time picker value */
+  clearable: PropTypes.bool.description("Enable to clear the time picker value"),
+  /** class for time picker */
+  className: PropTypes.string.description("class for time picker"),
+  /** style object */
+  style: PropTypes.object.description("style object"),
+  /** z index for menu */
+  zIndex: PropTypes.number.description("z index for menu"),
+  /** DSPopper placement */
+  placement: PropTypes.string.description("DSPopper placement"),
+  /** disabled time */
+  disabledTimes: PropTypes.object.description("disabled time"),
+  /** steps for the picker */
+  minutesInterval: PropTypes.number.description("steps for the picker")
+};
+DSTimePicker.propTypes = props;
+DSTimePicker.displayName = "DSTimePicker";
+const DSTimePickerWithSchema = describe(DSTimePicker);
+DSTimePickerWithSchema.propTypes = props;
+var DSTimePicker_default = DSTimePicker;
+export {
+  DSTimePicker,
+  DSTimePickerWithSchema,
+  DSTimePicker_default as default
+};
+//# sourceMappingURL=DSTimePicker.js.map

package/dist/esm/DSTimePicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTimePicker.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport Moment from 'moment';\nimport TimePickerImpl from './TimePickerImpl.js';\n\nconst DSTimePicker = ({\n  containerProps = {},\n  innerRef,\n  className = '',\n  disabled = false,\n  value = '',\n  format,\n  style = {},\n  onChange = () => null,\n  onOpen = () => null,\n  isOpen = undefined,\n  clearable = false,\n  hasHeader = true,\n  hasHeaderDisplay = false,\n  'aria-label': ariaLabel,\n  zIndex = 'auto',\n  placement = 'bottom',\n  disabledTimes,\n  minutesInterval = 1,\n}) => (\n  <TimePickerImpl\n    ref={innerRef}\n    aria-label={ariaLabel}\n    className={className}\n    clearable={clearable}\n    containerProps={containerProps}\n    disabled={disabled}\n    format={format}\n    hasHeader={hasHeader}\n    hasHeaderDisplay={hasHeaderDisplay}\n    isOpen={isOpen}\n    onChange={onChange}\n    onOpen={onOpen}\n    placement={placement}\n    style={style}\n    value={value}\n    zIndex={zIndex}\n    minutesInterval={minutesInterval}\n    disabledTimes={disabledTimes}\n  />\n);\n\nDSTimePicker.defaultProps = {\n  format: 'hh:mm:ss A',\n};\n\nconst props = {\n  /** a11y label */\n  'aria-label': PropTypes.string.description('a11y label'),\n  /** inject props to time picker wrapper */\n  containerProps: PropTypes.object.description('inject props to time picker wrapper'),\n  /** Whether the time picker is disabled or not */\n  disabled: PropTypes.bool.description('Whether the time picker is disabled or not'),\n  /** Time picker value */\n  value: PropTypes.instanceOf(Moment).description('Time picker value'),\n  /** Time format (hh:mm:ss, H:m:s) */\n  format: PropTypes.string.description('Time format (hh:mm:ss, H:m:s)'),\n  /** toggle header style */\n  hasHeader: PropTypes.bool.description('toggle header style'),\n  /** toggle header display */\n  hasHeaderDisplay: PropTypes.bool.description('toggle header display'),\n  /** Handler when time picker value changes */\n  onChange: PropTypes.func.description('Handler when time picker value changes'),\n  /** Handler when the time picker menu opens */\n  onOpen: PropTypes.func.description('Handler when the time picker menu opens'),\n  /** Whether the time picker menu is opened or not */\n  isOpen: PropTypes.bool.description('Whether the time picker menu is opened or not'),\n  /** ref for time picker input */\n  innerRef: PropTypes.func.description('ref for time picker input'),\n  /** Enable to clear the time picker value */\n  clearable: PropTypes.bool.description('Enable to clear the time picker value'),\n  /** class for time picker */\n  className: PropTypes.string.description('class for time picker'),\n  /** style object */\n  style: PropTypes.object.description('style object'),\n  /** z index for menu */\n  zIndex: PropTypes.number.description('z index for menu'),\n  /** DSPopper placement */\n  placement: PropTypes.string.description('DSPopper placement'),\n  /** disabled time */\n  disabledTimes: PropTypes.object.description('disabled time'),\n  /** steps for the picker */\n  minutesInterval: PropTypes.number.description('steps for the picker'),\n};\n\nDSTimePicker.propTypes = props;\nDSTimePicker.displayName = 'DSTimePicker';\nconst DSTimePickerWithSchema = describe(DSTimePicker);\nDSTimePickerWithSchema.propTypes = props;\n\nexport { DSTimePicker, DSTimePickerWithSchema };\nexport default DSTimePicker;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyBrB;AAxBF,SAAS,WAAW,gBAAgB;AACpC,OAAO,YAAY;AACnB,OAAO,oBAAoB;AAE3B,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,kBAAkB;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,KAAK;AAAA,IACL,cAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;AAGF,aAAa,eAAe;AAAA,EAC1B,QAAQ;AACV;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,cAAc,UAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEvD,gBAAgB,UAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAElF,UAAU,UAAU,KAAK,YAAY,4CAA4C;AAAA;AAAA,EAEjF,OAAO,UAAU,WAAW,MAAM,EAAE,YAAY,mBAAmB;AAAA;AAAA,EAEnE,QAAQ,UAAU,OAAO,YAAY,+BAA+B;AAAA;AAAA,EAEpE,WAAW,UAAU,KAAK,YAAY,qBAAqB;AAAA;AAAA,EAE3D,kBAAkB,UAAU,KAAK,YAAY,uBAAuB;AAAA;AAAA,EAEpE,UAAU,UAAU,KAAK,YAAY,wCAAwC;AAAA;AAAA,EAE7E,QAAQ,UAAU,KAAK,YAAY,yCAAyC;AAAA;AAAA,EAE5E,QAAQ,UAAU,KAAK,YAAY,+CAA+C;AAAA;AAAA,EAElF,UAAU,UAAU,KAAK,YAAY,2BAA2B;AAAA;AAAA,EAEhE,WAAW,UAAU,KAAK,YAAY,uCAAuC;AAAA;AAAA,EAE7E,WAAW,UAAU,OAAO,YAAY,uBAAuB;AAAA;AAAA,EAE/D,OAAO,UAAU,OAAO,YAAY,cAAc;AAAA;AAAA,EAElD,QAAQ,UAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA,EAEvD,WAAW,UAAU,OAAO,YAAY,oBAAoB;AAAA;AAAA,EAE5D,eAAe,UAAU,OAAO,YAAY,eAAe;AAAA;AAAA,EAE3D,iBAAiB,UAAU,OAAO,YAAY,sBAAsB;AACtE;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
+  "names": []
+}

package/dist/esm/DSTimePickerMenu.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@elliemae/ds-legacy-system";
+import TimePickerMenu from "./TimePickerMenu.js";
+const DSTimePickerMenuWrapper = styled.div`
+  display: flex;
+  height: 18.6rem;
+`;
+const DSTimePickerMenu = (props) => /* @__PURE__ */ jsx(DSTimePickerMenuWrapper, { children: /* @__PURE__ */ jsx(TimePickerMenu, { ...props }) });
+var DSTimePickerMenu_default = DSTimePickerMenu;
+export {
+  DSTimePickerMenu,
+  DSTimePickerMenu_default as default
+};
+//# sourceMappingURL=DSTimePickerMenu.js.map

package/dist/esm/DSTimePickerMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTimePickerMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport TimePickerMenu from './TimePickerMenu.js';\n\nconst DSTimePickerMenuWrapper = styled.div`\n  display: flex;\n  height: 18.6rem;\n`;\nconst DSTimePickerMenu = (props) => (\n  <DSTimePickerMenuWrapper>\n    <TimePickerMenu {...props} />\n  </DSTimePickerMenuWrapper>\n);\nexport { DSTimePickerMenu };\nexport default DSTimePickerMenu;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACUnB;AATJ,SAAS,cAAc;AACvB,OAAO,oBAAoB;AAE3B,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAIvC,MAAM,mBAAmB,CAAC,UACxB,oBAAC,2BACC,8BAAC,kBAAgB,GAAG,OAAO,GAC7B;AAGF,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/PickerPanel.js

@@ -0,0 +1,307 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { Component } from "react";
+import { findIndex } from "lodash";
+import { aggregatedClasses } from "@elliemae/ds-legacy-classnames";
+import memoizeOne from "memoize-one";
+import { ChevronSmallUp, ChevronSmallDown } from "@elliemae/ds-legacy-icons";
+import { DSButton } from "@elliemae/ds-legacy-button";
+import { MoveElementOnScroll } from "./moveElementOnScroll.js";
+import { validateIndex } from "./utils.js";
+const blockName = "time-picker-panel";
+const Container = aggregatedClasses("div")(blockName, null, ({ scrolling }) => ({ scrolling }));
+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", ({ selected, disabled }) => ({
+  selected,
+  disabled
+}));
+const PickerSelectedOptionSelected = aggregatedClasses("div")(blockName, "selected-container");
+const SelectedCircle = aggregatedClasses("div")(blockName, "selected-circle");
+const ArrowButtonContainer = aggregatedClasses("div")(blockName, "arrow-container");
+const getOptionIndex = (options, selectedOption, valueProperty = "value") => {
+  const index = options.findIndex((option) => option[valueProperty] === selectedOption);
+  return validateIndex(index, options);
+};
+const arrowProps = {
+  buttonType: "text",
+  fluidHeight: true,
+  fluidWidth: true,
+  size: "s"
+};
+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.pickerListContainerRef = React2.createRef();
+    this.pickerListRef = React2.createRef();
+    this.pickerItemRef = React2.createRef();
+    this.selectedOptionRef = React2.createRef();
+    this.state = {
+      selectedOption: props.selected,
+      activeIndex: 0,
+      // eslint-disable-next-line react/no-unused-state
+      prevProps: {}
+    };
+    this.getOptionValue = this.getOptionValue.bind(this);
+    this.getOptionLabel = this.getOptionLabel.bind(this);
+    this.computeSizes = this.computeSizes.bind(this);
+    this.handleOptionSelect = this.handleOptionSelect.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.moveTo = this.moveTo.bind(this);
+    this.handleStepMoveUp = this.handleStepMoveUp.bind(this);
+    this.handleStepMoveDown = this.handleStepMoveDown.bind(this);
+    this.renderHeader = this.renderHeader.bind(this);
+  }
+  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 });
+      }
+    });
+    this.computeContainerTranslation();
+  }
+  componentWillUnmount() {
+    this.scrollHandler.unsubscribe();
+  }
+  static getDerivedStateFromProps(nextProps, { prevProps }) {
+    const { selected, valueProperty, options } = nextProps;
+    if (selected !== prevProps.selected) {
+      return {
+        selectedOption: selected,
+        activeIndex: getOptionIndex(options, selected, valueProperty),
+        prevProps: nextProps
+      };
+    }
+    return null;
+  }
+  getOptionValue(option) {
+    const { valueProperty } = this.props;
+    return option[valueProperty];
+  }
+  getOptionLabel(option) {
+    const { labelProperty } = this.props;
+    return option[labelProperty];
+  }
+  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) => ({
+        ...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 (prev && focusedElement === lastColumn) {
+          prev.focus();
+        } else if (focusedElement === lastColumn) {
+          firstColumn.focus();
+        } else {
+          const position = findIndex(restColumns, focusedElement);
+          restColumns[position + 1].focus();
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  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);
+    }
+  }
+  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);
+  }
+  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);
+  }
+  renderHeader() {
+    const { header } = this.props;
+    return /* @__PURE__ */ jsx(PickerHeader, { children: header });
+  }
+  render() {
+    const { options, hasHeader, type, time, meridiem, disabledTimes } = this.props;
+    const { selectedOption, activeIndex, scrolling } = this.state;
+    const listYPosition = this.computeContainerTranslation(activeIndex);
+    return /* @__PURE__ */ jsxs(Wrapper, { children: [
+      hasHeader && this.renderHeader(),
+      /* @__PURE__ */ jsxs(Container, { classProps: { scrolling }, onKeyDown: this.handleKeyDown, tabIndex: 0, children: [
+        /* @__PURE__ */ jsx(PickerSelectedOptionSelected, { innerRef: this.selectedOptionRef, children: /* @__PURE__ */ jsx(SelectedCircle, {}) }),
+        /* @__PURE__ */ jsx(ArrowButtonContainer, { children: /* @__PURE__ */ jsx(
+          DSButton,
+          {
+            ...arrowProps,
+            "aria-label": "Chevron Up",
+            "data-testid": `${type}-chevron-up`,
+            disabled: activeIndex <= 0,
+            icon: /* @__PURE__ */ jsx(ChevronSmallUp, {}),
+            onClick: this.handleStepMoveUp,
+            tabIndex: -1
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PickerItemListContainer,
+          {
+            innerRef: this.pickerListContainerRef,
+            style: {
+              height: this.listHeight
+            },
+            children: /* @__PURE__ */ jsx(
+              PickerItemList,
+              {
+                "data-testid": `${type}-list`,
+                innerRef: this.pickerListRef,
+                style: {
+                  transform: `translateY(${listYPosition}px)`
+                },
+                children: 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?.hour && valueFormatted < to?.hour || type === "minutes" && value >= from?.min && value < to?.min) {
+                      disabled = true;
+                    }
+                    if (type === "minutes" && (time?.hour() > to?.hour || time?.hour() < from?.hour)) {
+                      disabled = false;
+                    }
+                    if (label === "am" && from?.hour == 0 && to?.hour >= 12) {
+                      disabled = true;
+                    }
+                    if (label === "pm" && to?.hour == 24) {
+                      disabled = true;
+                    }
+                  }
+                  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);
+                      },
+                      children: label
+                    },
+                    value
+                  );
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(ArrowButtonContainer, { children: /* @__PURE__ */ jsx(
+          DSButton,
+          {
+            ...arrowProps,
+            "aria-label": "Chevron Down",
+            "data-testid": `${type}-chevron-down`,
+            disabled: activeIndex >= options.length - 1,
+            icon: /* @__PURE__ */ jsx(ChevronSmallDown, {}),
+            onClick: this.handleStepMoveDown,
+            tabIndex: -1
+          }
+        ) })
+      ] })
+    ] });
+  }
+}
+PickerPanel.defaultProps = {
+  valueProperty: "value",
+  labelProperty: "label",
+  numberItemsOnScreen: 5,
+  // this number should be impair
+  options: [],
+  arrowStep: 1
+};
+export {
+  PickerPanel,
+  PickerPanel as default
+};
+//# sourceMappingURL=PickerPanel.js.map