@elliemae/ds-controlled-form 2.3.1 → 3.0.0-alpha.3

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

@@ -1,84 +0,0 @@
-'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

@@ -1,119 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var dsGrid = 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"](dsGrid.Grid).withConfig({
-  componentId: "sc-1t4k08s-1"
-})(["padding-top:2px;margin:auto;"]);
-const StyledColonSeparator = /*#__PURE__*/styled__default["default"](dsGrid.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"](dsGrid.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"](dsGrid.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"](dsGrid.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

@@ -1,61 +0,0 @@
-'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

@@ -1,63 +0,0 @@
-'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

@@ -1,59 +0,0 @@
-'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

@@ -1,90 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-var React = require('react');
-var dsGrid = 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"](dsGrid.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;