@elliemae/ds-controlled-form 2.0.0-alpha.10 → 2.0.0-alpha.11

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js

@@ -22,7 +22,7 @@ const TimeWheelContent = /*#__PURE__*/React.memo(({
     showShadow: showShadow,
     isControllerOnly: isControllerOnly,
     "data-testid": ControlledDateTimePickerDatatestid.CONTROLLER_COMPONENT.TIMEWHEEL
-  }, void 0, /*#__PURE__*/_jsx(StyledTimePickerHead, {}, void 0, `${hours || '__'}:${minutes || '__'} ${meridiem || '__'}`), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx(StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx("div", {}, void 0, "H"), /*#__PURE__*/_jsx("div", {}, void 0, "M"), /*#__PURE__*/_jsx("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx(StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx(HoursList, {}), /*#__PURE__*/_jsx(MinutesList, {}), /*#__PURE__*/_jsx(MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx(TimeWheelFooter, {})));
+  }, void 0, /*#__PURE__*/_jsx(StyledTimePickerHead, {}, void 0, "".concat(hours || '__', ":").concat(minutes || '__', " ").concat(meridiem || '__')), _StyledTimePickerWhee || (_StyledTimePickerWhee = /*#__PURE__*/_jsx(StyledTimePickerWheelsLegend, {}, void 0, /*#__PURE__*/_jsx("div", {}, void 0, "H"), /*#__PURE__*/_jsx("div", {}, void 0, "M"), /*#__PURE__*/_jsx("div", {}, void 0, "A"))), _StyledTimePickerWhee2 || (_StyledTimePickerWhee2 = /*#__PURE__*/_jsx(StyledTimePickerWheelWrapper, {}, void 0, /*#__PURE__*/_jsx(HoursList, {}), /*#__PURE__*/_jsx(MinutesList, {}), /*#__PURE__*/_jsx(MeridiemList, {}))), _TimeWheelFooter || (_TimeWheelFooter = /*#__PURE__*/_jsx(TimeWheelFooter, {})));
 });
 
 export { TimeWheelContent };

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js

@@ -17,7 +17,7 @@ const TimeWheelIconTrigger = () => {
     ariaCurrentValueForInputs
   } = useContext(TimeWheelContext);
   return useMemo(() => /*#__PURE__*/_jsx(DSButtonV2, {
-    "aria-label": `time picker context menu trigger, ${ariaCurrentValueForInputs}`,
+    "aria-label": "time picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",
     size: BUTTON_SIZES.M,
     innerRef: handleSetTriggerRef,

package/esm/controlled-date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js

@@ -11,7 +11,7 @@ const hoursStartPositionOffset = 1; // if array start from 01, this is 1, if sta
 
 const getTotalMinuteListWithStep = (step = 1) => {
   const length = Math.ceil(60 / step);
-  return new Array(length).fill('_').map((_v, i) => prependStringWithPlaceHolders(`${i * step}`, 2));
+  return new Array(length).fill('_').map((_v, i) => prependStringWithPlaceHolders("".concat(i * step), 2));
 };
 
 const useCurrentDisplayedWheelsLogic = ({
@@ -90,7 +90,7 @@ const useCurrentDisplayedWheelsLogic = ({
   }, [handleChangeHours]);
   const handleChangeCurrHour = useCallback((offset, e) => {
     const newH = currHourNum + offset;
-    if (newH > 0 && newH <= 12) handleChangeHours(prependStringWithPlaceHolders(`${newH}`, 2), e);
+    if (newH > 0 && newH <= 12) handleChangeHours(prependStringWithPlaceHolders("".concat(newH), 2), e);
   }, [currHourNum, handleChangeHours]);
   const handlePrevHour = useCallback(e => {
     handleChangeCurrHour(-1, e);
@@ -103,7 +103,7 @@ const useCurrentDisplayedWheelsLogic = ({
   }, [handleChangeMinutes]);
   const handleChangeCurrMinute = useCallback((offset, e) => {
     const newM = currMinuteNum + offset;
-    if (newM >= 0 && newM <= 59) handleChangeMinutes(prependStringWithPlaceHolders(`${newM}`, 2), e);
+    if (newM >= 0 && newM <= 59) handleChangeMinutes(prependStringWithPlaceHolders("".concat(newM), 2), e);
   }, [currMinuteNum, handleChangeMinutes]);
   const handlePrevMinute = useCallback(e => {
     handleChangeCurrMinute(-minutesInterval, e);

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

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useMemo } from 'react';
 import { usePopper } from 'react-popper';
 import { useOnClickOutside } from '../../../utils/hooks/useOnClickOutside.js';

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

@@ -24,10 +24,7 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   theme,
   isControllerOnly,
   hasError
-}) => isControllerOnly ? undefined : `
-  height: 28px;    
-  border: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]};
-  `, ({
+}) => isControllerOnly ? undefined : "\n  height: 28px;    \n  border: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], ";\n  "), ({
   justPicker
 }) => justPicker ? '0' : '2px', ({
   withAnyPicker
@@ -46,9 +43,7 @@ const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   theme,
   isControllerOnly,
   hasError
-}) => isControllerOnly ? undefined : `
-    border-left: 1px solid ${hasError ? theme.colors.danger[900] : theme.colors.neutral[200]}
-    `);
+}) => isControllerOnly ? undefined : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    "));
 const StyledFocusWithIn = /*#__PURE__*/styled(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;}}"], ({

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

@@ -41,7 +41,7 @@ const HHInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `hours input field ${ariaCurrentValueForInputs}`,
+    "aria-label": "hours input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.HOUR
   });
 });

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

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useCallback } from 'react';
 import { Styled2DigitsInput } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
@@ -42,7 +43,7 @@ const MeridiemInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `meridiem input field ${ariaCurrentValueForInputs}`,
+    "aria-label": "meridiem input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MERIDIEM
   });
 });

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

@@ -39,7 +39,7 @@ const MinutesInput = /*#__PURE__*/React.memo(({
     value: value,
     ref: contextRef,
     placeholder: placeholder,
-    "aria-label": `minutes input field ${ariaCurrentValueForInputs}`,
+    "aria-label": "minutes input field ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.TIME_INPUTS.MINUTE
   });
 });

package/esm/controlled-date-time-picker/parts/TimeInputs/useTimeInputs.js

@@ -94,7 +94,7 @@ const useTimeInputs = () => {
       const hoursInteger = Number.isNaN(hoursStringConvertedToInteger) ? 0 : hoursStringConvertedToInteger;
       let newHours;
       if (key === 'ArrowUp') newHours = hoursInteger + 1 <= 12 ? hoursInteger + 1 : hoursInteger;else newHours = hoursInteger - 1 > 1 ? hoursInteger - 1 : 1;
-      newHours = prependStringWithPlaceHolders(`${newHours}`, 2);
+      newHours = prependStringWithPlaceHolders("".concat(newHours), 2);
       handleChangeHours(newHours, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, handleChangeHours, hours]);
@@ -155,7 +155,7 @@ const useTimeInputs = () => {
       const minutesInteger = Number.isNaN(minutesStringConvertedToInteger) ? 0 : minutesStringConvertedToInteger;
       let newMinutes;
       if (key === 'ArrowUp') newMinutes = minutesInteger + minutesInterval <= 59 ? minutesInteger + minutesInterval : minutesInteger;else newMinutes = minutesInteger - minutesInterval > 0 ? minutesInteger - minutesInterval : 0;
-      newMinutes = prependStringWithPlaceHolders(`${newMinutes}`, 2);
+      newMinutes = prependStringWithPlaceHolders("".concat(newMinutes), 2);
       handleChangeMinutes(newMinutes, e);
     }
   }, [onHomeKeyDown, onEndKeyDown, minutes, minutesInterval, handleChangeMinutes]);
@@ -257,7 +257,7 @@ const useTimeInputs = () => {
     var _e$target5, _e$target5$value, _e$target5$value$toUp;
 
     let newMeridiem = e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$value = _e$target5.value) === null || _e$target5$value === void 0 ? void 0 : (_e$target5$value$toUp = _e$target5$value.toUpperCase) === null || _e$target5$value$toUp === void 0 ? void 0 : _e$target5$value$toUp.call(_e$target5$value);
-    if (newMeridiem.length === 1) newMeridiem = `${newMeridiem}M`;
+    if (newMeridiem.length === 1) newMeridiem = "".concat(newMeridiem, "M");
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
@@ -283,7 +283,7 @@ const useTimeInputs = () => {
     var _e$target6, _e$target6$value, _e$target6$value$toUp;
 
     const newMeridiem = e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : (_e$target6$value = _e$target6.value) === null || _e$target6$value === void 0 ? void 0 : (_e$target6$value$toUp = _e$target6$value.toUpperCase) === null || _e$target6$value$toUp === void 0 ? void 0 : _e$target6$value$toUp.call(_e$target6$value);
-    if (newMeridiem.length === 1) handleChangeMeridiem(`${newMeridiem}M`, e, {
+    if (newMeridiem.length === 1) handleChangeMeridiem("".concat(newMeridiem, "M"), e, {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMeridiem]);

package/esm/controlled-date-time-picker/utils/dateHelpers.js

@@ -1,9 +1,9 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { createRef } from 'react';
 import { monthNames } from './constants.js';
 import { isIncompleteString, deconstructValuesFromDateString, prependStringWithPlaceHolders } from './stringHelpers.js';
 import { convertToPositiveNumberIfPossible } from './numberHelpers.js';
 
-/* eslint-disable max-lines */
 const getLastDayOfMonth = (month, year) => new Date(year, month + 1, 0);
 const isValidDayForTheMonth = (month, year, day) => {
   var _Date, _Date$getMonth;
@@ -184,11 +184,11 @@ const getDateValuesFromDate = day => {
   };
 };
 const getDateStringFromDay = day => {
-  const monthFromDay = prependStringWithPlaceHolders(`${day.getMonth() + 1}`, 2); // months from 1-12
+  const monthFromDay = prependStringWithPlaceHolders("".concat(day.getMonth() + 1), 2); // months from 1-12
 
-  const dayFromDay = prependStringWithPlaceHolders(`${day.getDate()}`, 2);
-  const yearFromDay = prependStringWithPlaceHolders(`${day.getFullYear()}`, 4);
-  return `${monthFromDay}/${dayFromDay}/${yearFromDay}`;
+  const dayFromDay = prependStringWithPlaceHolders("".concat(day.getDate()), 2);
+  const yearFromDay = prependStringWithPlaceHolders("".concat(day.getFullYear()), 4);
+  return "".concat(monthFromDay, "/").concat(dayFromDay, "/").concat(yearFromDay);
 };
 const getDayFromDateString = dateString => {
   const {

package/esm/controlled-date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js

@@ -10,7 +10,7 @@ const useGetMonthYearFromDateStringOrEmptyStartingMonth = () => {
     }
   } = useContext(ControlledDateTimePickerContext);
   return useMemo(() => {
-    const emptyPickerStartingMonthDefault = `${new Date().getMonth() + 1}/__/${new Date().getFullYear()}`;
+    const emptyPickerStartingMonthDefault = "".concat(new Date().getMonth() + 1, "/__/").concat(new Date().getFullYear());
     const {
       month: stringMonthVal,
       year: stringYearVal

package/esm/controlled-date-time-picker/utils/stringHelpers.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
 import { monthNames, announcableCardinalDays } from './constants.js';
 import { convertToPositiveNumberIfPossible } from './numberHelpers.js';
@@ -22,7 +23,7 @@ const getFormattedDateString = ({
   const finalMonth = fillStringWithPlaceHolders(month, 2);
   const finalDay = fillStringWithPlaceHolders(day, 2);
   const finalYear = fillStringWithPlaceHolders(year, 4);
-  return `${finalMonth}/${finalDay}/${finalYear}`;
+  return "".concat(finalMonth, "/").concat(finalDay, "/").concat(finalYear);
 };
 const dateTimeToDate = dateTime => {
   var _dateTime$split, _dateTime$split$call;
@@ -73,7 +74,7 @@ const getFormattedTimeString = ({
 
   const finalMeridiem = fillStringWithPlaceHolders(meridiem, 2); // return `${finalHour}:${finalMinutes}:${finalSeconds} ${finalMeridiem}`;// <-- seconds format
 
-  return `${finalHour}:${finalMinutes} ${finalMeridiem}`;
+  return "".concat(finalHour, ":").concat(finalMinutes, " ").concat(finalMeridiem);
 };
 const dateTimeToTime = dateTime => {
   var _dateTime$split2;
@@ -81,7 +82,7 @@ const dateTimeToTime = dateTime => {
   const [// eslint-disable-next-line @typescript-eslint/no-unused-vars
   _date, // timeNumbers = '__:__:__', // <-- seconds format
   timeNumbers = '__:__', timeMeridiem = '__'] = dateTime === null || dateTime === void 0 ? void 0 : (_dateTime$split2 = dateTime.split) === null || _dateTime$split2 === void 0 ? void 0 : _dateTime$split2.call(dateTime, ' ');
-  return `${timeNumbers} ${timeMeridiem}`;
+  return "".concat(timeNumbers, " ").concat(timeMeridiem);
 };
 const deconstructTimeValues = timeString => {
   var _timeString$split, _dirtyTimes$split;
@@ -127,7 +128,7 @@ const getAriaDayFromDateString = dateString => {
   const dayNum = convertToPositiveNumberIfPossible(dayString);
   const yearNum = convertToPositiveNumberIfPossible(yearString);
   if (monthNum === -1 || dayNum === -1 || yearNum === -1) return '';
-  return `${monthNames[monthNum - 1]} ${announcableCardinalDays[dayNum]} ${yearNum}`;
+  return "".concat(monthNames[monthNum - 1], " ").concat(announcableCardinalDays[dayNum], " ").concat(yearNum);
 };
 
 export { dateTimeToDate, dateTimeToTime, deconstructTimeValues, deconstructValuesFromDateString, deconstructValuesFromTimeString, fillStringWithPlaceHolders, getAriaDayFromDateString, getFormattedDateString, getFormattedTimeString, isEmptyDateStringMask, isEmptyDateTimeStringMask, isEmptyTimeStringMask, isIncompleteString, isValidDateString, isValidTimeString, prependStringWithPlaceHolders };

package/esm/controlled-toggle/ControlledToggle.js

@@ -1,5 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { uid } from 'uid';
 import { describe } from 'react-desc';
@@ -84,7 +85,7 @@ const DSControlledToggle = ({
       active: active,
       disabled: disabled,
       htmlFor: id ? undefined : instanceUID,
-      as: id ? 'p' : 'label'
+      as: id ? 'span' : 'label'
     }, void 0, /*#__PURE__*/_jsx(StyledCircle, {
       checked: checked,
       size: size,

package/esm/controlled-toggle/styles.js

@@ -17,7 +17,7 @@ const StyledLabel = /*#__PURE__*/styled.div.withConfig({
 })(["width:", ";height:", ";z-index:2;outline:none;border-radius:", ";"], ({
   width,
   size
-}) => `calc(${width}px + ${margin[size]})`, ({
+}) => "calc(".concat(width, "px + ").concat(margin[size], ")"), ({
   size
 }) => labelHeight[size], ({
   size
@@ -28,16 +28,14 @@ const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
   checked
 }) => checked ? 'row-reverse' : 'row', ({
   size
-}) => `calc(${labelHeight[size]} - 4px)`, ({
+}) => "calc(".concat(labelHeight[size], " - 4px)"), ({
   theme,
   size,
   checked,
   disabled,
   readOnly,
   active
-}) => size === 's' ? `1px solid ${handleBorderColor(checked, disabled, readOnly, active, theme)}` : `
-    2px solid ${handleBorderColor(checked, disabled, readOnly, active, theme)}
-    `, ({
+}) => size === 's' ? "1px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme)) : "\n    2px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme), "\n    "), ({
   theme,
   checked,
   disabled,
@@ -72,10 +70,10 @@ const StyledText = /*#__PURE__*/styled.div.withConfig({
 }) => disabled ? '#5c6574' : theme.colors.neutral['000'], ({
   isLongerTextRendering,
   checked
-}) => isLongerTextRendering && checked ? `margin-left: 6px;` : undefined, ({
+}) => isLongerTextRendering && checked ? "margin-left: 6px;" : undefined, ({
   isLongerTextRendering,
   checked
-}) => isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined);
+}) => isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined);
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-v733m4-5"
 })(["position:absolute;opacity:0;z-index:20;height:100%;width:100%;cursor:pointer;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -456,9 +456,9 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-alpha.10",
-    "@elliemae/ds-button": "2.0.0-alpha.10",
-    "@elliemae/ds-icons": "2.0.0-alpha.10",
+    "@elliemae/ds-basic": "2.0.0-alpha.11",
+    "@elliemae/ds-button": "2.0.0-alpha.11",
+    "@elliemae/ds-icons": "2.0.0-alpha.11",
     "prop-types": "~15.7.2",
     "react-desc": "^4.1.3",
     "react-popper": "~2.2.5"

package/cjs/package.json

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

package/esm/package.json

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