@elliemae/ds-controlled-form 2.3.0-alpha.6 → 2.3.0-next.0

package/cjs/controlled-date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var reactPopper = require('react-popper');
+var ControlledDateTimePickerCTX = require('../../../ControlledDateTimePickerCTX.js');
+var useOnClickOutside = require('../../../utils/hooks/useOnClickOutside.js');
+
+const usePopperTriggerLogic = () => {
+  const {
+    pickerButtonRef,
+    props: {
+      onPickerClose,
+      onPickerOpen
+    },
+    currHourBtnRef,
+    isWithCalendarToo
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  const [showTimePicker, setShowTimePicker] = React.useState(false);
+  const [referenceElement, setReferenceElement] = React.useState(null);
+  const [popperElement, setPopperElement] = React.useState(null);
+  const [arrowElement, setArrowElement] = React.useState(null);
+  const usePopperHelpers = reactPopper.usePopper(referenceElement, popperElement, {
+    modifiers: [{
+      name: 'arrow',
+      options: {
+        element: arrowElement
+      }
+    }]
+  });
+  const closeTimePicker = React.useCallback(() => {
+    setShowTimePicker(false);
+    onPickerClose();
+  }, [onPickerClose]);
+  const handleToggleTimePicker = React.useCallback(() => {
+    setShowTimePicker(oldShowCalendar => {
+      if (!oldShowCalendar) {
+        onPickerOpen();
+        if (!isWithCalendarToo) setTimeout(() => {
+          var _currHourBtnRef$curre, _currHourBtnRef$curre2;
+
+          return currHourBtnRef === null || currHourBtnRef === void 0 ? void 0 : (_currHourBtnRef$curre = currHourBtnRef.current) === null || _currHourBtnRef$curre === void 0 ? void 0 : (_currHourBtnRef$curre2 = _currHourBtnRef$curre.focus) === null || _currHourBtnRef$curre2 === void 0 ? void 0 : _currHourBtnRef$curre2.call(_currHourBtnRef$curre);
+        });
+      } else onPickerClose();
+
+      return !oldShowCalendar;
+    });
+  }, [currHourBtnRef, isWithCalendarToo, onPickerClose, onPickerOpen]);
+  useOnClickOutside.useOnClickOutside(popperElement, e => {
+    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
+
+    if (!(pickerButtonRef !== null && pickerButtonRef !== void 0 && (_pickerButtonRef$curr = pickerButtonRef.current) !== null && _pickerButtonRef$curr !== void 0 && (_pickerButtonRef$curr2 = _pickerButtonRef$curr.contains) !== null && _pickerButtonRef$curr2 !== void 0 && _pickerButtonRef$curr2.call(_pickerButtonRef$curr, e === null || e === void 0 ? void 0 : e.target))) closeTimePicker();
+  });
+  const handleSetTriggerRef = React.useCallback(newRef => {
+    pickerButtonRef.current = newRef;
+    setReferenceElement(newRef);
+  }, [pickerButtonRef]);
+  const handleMenuWrapperKeyDown = React.useCallback(e => {
+    const {
+      key
+    } = e;
+
+    if (key === 'Escape') {
+      var _pickerButtonRef$curr3, _pickerButtonRef$curr4;
+
+      closeTimePicker();
+      pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+    }
+  }, [closeTimePicker, pickerButtonRef]);
+  return React.useMemo(() => ({
+    showTimePicker,
+    setShowTimePicker,
+    setPopperElement,
+    setArrowElement,
+    usePopperHelpers,
+    handleToggleTimePicker,
+    handleSetTriggerRef,
+    handleMenuWrapperKeyDown
+  }), [handleMenuWrapperKeyDown, handleSetTriggerRef, handleToggleTimePicker, showTimePicker, usePopperHelpers]);
+};
+
+exports.usePopperTriggerLogic = usePopperTriggerLogic;

package/cjs/controlled-date-time-picker/parts/Styleds.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var Grid = require('@elliemae/ds-grid');
+var DSButton = require('@elliemae/ds-button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/* eslint-disable max-lines */
+const ResettedInput = /*#__PURE__*/styled__default["default"].input.withConfig({
+  componentId: "sc-1t4k08s-0"
+})(["border:none;box-shadow:none;background:none;text-align:center;height:100%;display:flex;align-items:center;:focus{outline:none;}padding-top:2px;"]);
+const StyledSeparator = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+  componentId: "sc-1t4k08s-1"
+})(["padding-top:2px;margin:auto;"]);
+const StyledColonSeparator = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+  componentId: "sc-1t4k08s-2"
+})(["padding-bottom:1px;margin:auto;"]);
+const Styled2DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput).withConfig({
+  componentId: "sc-1t4k08s-3"
+})(["width:100%;height:100%;", ""], _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? "color: #616b7f;" : "";
+});
+const StyledMin4DigitsInput = /*#__PURE__*/styled__default["default"](ResettedInput).withConfig({
+  componentId: "sc-1t4k08s-4"
+})(["width:100%;height:100%;", ""], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? "color: #616b7f;" : "";
+});
+const StyledInputsWrapperGrid = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+  componentId: "sc-1t4k08s-5"
+})(["width:max-content;align-items:center;", " border-color:", ";border-radius:2px;padding-left:", ";padding-right:", ";position:relative;", ""], _ref3 => {
+  let {
+    isControllerOnly
+  } = _ref3;
+  return isControllerOnly ? "" : "\n  height: 28px;    \n  border-width: 1px;\n  border-style: solid;\n  ";
+}, _ref4 => {
+  let {
+    theme,
+    hasError,
+    disabled
+  } = _ref4;
+  if (hasError) return theme.colors.danger[900];
+  if (disabled) return theme.colors.neutral[400];
+  return theme.colors.neutral[200];
+}, _ref5 => {
+  let {
+    justPicker
+  } = _ref5;
+  return justPicker ? '0' : '2px';
+}, _ref6 => {
+  let {
+    withAnyPicker
+  } = _ref6;
+  return withAnyPicker ? '' : '0';
+}, _ref7 => {
+  let {
+    theme,
+    disabled
+  } = _ref7;
+  return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
+});
+const StyledDateInputsWrapperGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1t4k08s-6"
+})(["display:grid;grid-template-columns:24px min-content 24px min-content 48px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
+const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1t4k08s-7"
+})(["display:grid;grid-template-columns:24px min-content 24px min-content 24px min-content 24px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
+const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+  componentId: "sc-1t4k08s-8"
+})(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], _ref8 => {
+  let {
+    isControllerOnly
+  } = _ref8;
+  return isControllerOnly ? "" : "height: 26px;";
+}, _ref9 => {
+  let {
+    theme,
+    isControllerOnly,
+    hasError
+  } = _ref9;
+  return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
+});
+const StyledFocusWithIn = /*#__PURE__*/styled__default["default"](Grid.Grid).withConfig({
+  componentId: "sc-1t4k08s-9"
+})(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.brand[700];
+});
+const StyledClearButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
+  componentId: "sc-1t4k08s-10"
+})(["height:26px;position:relative;visibility:", ";"], _ref11 => {
+  let {
+    shouldDisplay
+  } = _ref11;
+  return shouldDisplay ? 'visible' : 'hidden';
+});
+
+exports.Styled2DigitsInput = Styled2DigitsInput;
+exports.StyledClearButton = StyledClearButton;
+exports.StyledColonSeparator = StyledColonSeparator;
+exports.StyledDateInputsWrapperGrid = StyledDateInputsWrapperGrid;
+exports.StyledFocusWithIn = StyledFocusWithIn;
+exports.StyledInputsWrapperGrid = StyledInputsWrapperGrid;
+exports.StyledMin4DigitsInput = StyledMin4DigitsInput;
+exports.StyledPickersIconsWrapperGrid = StyledPickersIconsWrapperGrid;
+exports.StyledSeparator = StyledSeparator;
+exports.StyledTimeInputsWrapperGrid = StyledTimeInputsWrapperGrid;

package/cjs/controlled-date-time-picker/parts/TimeInputs/HHInput.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Styleds = require('../Styleds.js');
+var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const regExpNumbers = /^[0-9]+$/;
+
+const isInvalidHour = hours => {
+  if (hours === '') return false;
+  const numberOnly = regExpNumbers.test(hours);
+  return hours.length > 2 || hours === '00' || !numberOnly || Number.parseInt(hours, 10) > 12;
+};
+
+const HHInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef,
+    autoFocusHourInput
+  } = _ref;
+  const validateOnChange = React.useCallback(e => {
+    var _e$target;
+
+    if (isInvalidHour(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsxRuntime.jsx(Styleds.Styled2DigitsInput, {
+    autoFocus: autoFocusHourInput,
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR,
+    disabled: disabled,
+    "aria-disabled": disabled
+  });
+});
+
+exports.HHInput = HHInput;

package/cjs/controlled-date-time-picker/parts/TimeInputs/MeridiemInput.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var Styleds = require('../Styleds.js');
+var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const validFirstDigits = ['a', 'A', 'p', 'P'];
+const validSecondDigits = ['m', 'M'];
+
+const isInvalidMeridiem = meridiem => {
+  if (meridiem === '') return false;
+  const [firstDigit, secondDigit] = meridiem === null || meridiem === void 0 ? void 0 : meridiem.split('');
+  const isValidFirstDigit = meridiem.length < 1 && !firstDigit || validFirstDigits.includes(firstDigit);
+  const isValidSecondDigit = !secondDigit || validSecondDigits.includes(secondDigit);
+  return meridiem.length > 2 || !isValidFirstDigit || !isValidSecondDigit;
+};
+
+const MeridiemInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef
+  } = _ref;
+  const validateOnChange = React.useCallback(e => {
+    var _e$target;
+
+    if (isInvalidMeridiem(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsxRuntime.jsx(Styleds.Styled2DigitsInput, {
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM,
+    disabled: disabled,
+    "aria-disabled": disabled
+  });
+});
+
+exports.MeridiemInput = MeridiemInput;

package/cjs/controlled-date-time-picker/parts/TimeInputs/MinutesInput.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
+var Styleds = require('../Styleds.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const regExpNumbers = /^[0-9]+$/;
+
+const isInvalidMinute = minutes => {
+  if (minutes === '') return false;
+  const numberOnly = regExpNumbers.test(minutes);
+  return minutes.length > 2 || !numberOnly || Number.parseInt(minutes, 10) > 60;
+};
+
+const MinutesInput = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onChange,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    value,
+    disabled,
+    placeholder,
+    ariaCurrentValueForInputs,
+    contextRef
+  } = _ref;
+  const validateOnChange = React.useCallback(e => {
+    var _e$target;
+
+    if (isInvalidMinute(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+      e.preventDefault();
+      return;
+    }
+
+    onChange(e);
+  }, [onChange]);
+  return /*#__PURE__*/jsxRuntime.jsx(Styleds.Styled2DigitsInput, {
+    onChange: validateOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    value: value,
+    ref: contextRef,
+    placeholder: placeholder,
+    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE,
+    disabled: disabled,
+    "aria-disabled": disabled
+  });
+});
+
+exports.MinutesInput = MinutesInput;

package/cjs/controlled-date-time-picker/parts/TimeInputs/TimeInputs.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var Grid = require('@elliemae/ds-grid');
+var ControlledDateTimePickerCTX = require('../../ControlledDateTimePickerCTX.js');
+var HHInput = require('./HHInput.js');
+var MinutesInput = require('./MinutesInput.js');
+var MeridiemInput = require('./MeridiemInput.js');
+var useTimeInputs = require('./useTimeInputs.js');
+var config = require('../config.js');
+var Styleds = require('../Styleds.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _StyledColonSeparator, _StyledSeparator;
+const TimeInputs = () => {
+  const {
+    hours,
+    minutes,
+    // seconds,
+    meridiem,
+    autoFocusHourInput,
+    disabled,
+    onHoursChange,
+    onMinutesChange,
+    // onSecondsChange,
+    onMeridiemChange,
+    onHoursBlur,
+    onMinutesBlur,
+    // onSecondsBlur,
+    onMeridiemBlur,
+    onHoursFocus,
+    onMeridiemFocus,
+    onMinutesFocus,
+    onHoursKeyDown,
+    onMinutesKeyDown,
+    // onSecondsKeyDown,
+    onMeridiemKeyDown
+  } = useTimeInputs.useTimeInputs(); // we do this here so HHInput,MinutesInput, MeridiemInput can be pure components memoized via React.memo
+
+  const {
+    hourInputRef,
+    minutesInputRef,
+    meridiemInputRef,
+    ariaCurrentValueForInputs
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
+  return /*#__PURE__*/_jsx__default["default"](Grid.Grid, {
+    cols: [config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth]
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](HHInput.HHInput, {
+    value: hours,
+    onChange: onHoursChange,
+    onBlur: onHoursBlur,
+    onFocus: onHoursFocus,
+    onKeyDown: onHoursKeyDown,
+    contextRef: hourInputRef,
+    placeholder: "HH",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    autoFocusHourInput: autoFocusHourInput,
+    disabled: disabled
+  })), _StyledColonSeparator || (_StyledColonSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledColonSeparator, {
+    alignItems: "center"
+  }, void 0, ":")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MinutesInput.MinutesInput, {
+    value: minutes,
+    onChange: onMinutesChange,
+    onBlur: onMinutesBlur,
+    onFocus: onMeridiemFocus,
+    onKeyDown: onMinutesKeyDown,
+    contextRef: minutesInputRef,
+    placeholder: "MM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
+  })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledSeparator, {}, void 0, " ")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](MeridiemInput.MeridiemInput, {
+    value: meridiem,
+    onChange: onMeridiemChange,
+    onBlur: onMeridiemBlur,
+    onFocus: onMinutesFocus,
+    onKeyDown: onMeridiemKeyDown,
+    contextRef: meridiemInputRef,
+    placeholder: "AM",
+    ariaCurrentValueForInputs: ariaCurrentValueForInputs,
+    disabled: disabled
+  })));
+};
+
+exports.TimeInputs = TimeInputs;