@elliemae/ds-controlled-form 1.57.1-rc.0 → 2.0.0-alpha.11

package/esm/controlled-toggle/styles.js

@@ -1,113 +1,89 @@
 import styled from 'styled-components';
 import { containerHeight, borderRadius, margin, labelHeight, handleBorderColor, handleBackgroundColor, handleCursors, circleValues, handleFontSize } from './utils/styleHelpers.js';
 
-var StyledContainer = /*#__PURE__*/styled.div.withConfig({
+const StyledContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-v733m4-0"
-})(["display:inline-flex;width:fit-content;justify-content:center;align-items:center;height:", ";border-radius:", ";outline:none;position:relative;border:2px solid transparent;&:hover,&:focus-within{border:2px solid ", ";&:after{content:'';height:calc(100% + 4px);width:calc(100% + 4px);border:1px solid ", ";border-radius:20px;position:absolute;}}"], function (_ref) {
-  var size = _ref.size;
-  return containerHeight[size];
-}, function (_ref2) {
-  var size = _ref2.size;
-  return borderRadius[size];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.colors.brand[300];
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors.brand[600];
-});
-var StyledLabel = /*#__PURE__*/styled.div.withConfig({
+})(["display:inline-flex;width:fit-content;justify-content:center;align-items:center;height:", ";border-radius:", ";outline:none;position:relative;border:2px solid transparent;&:hover,&:focus-within{border:2px solid ", ";&:after{content:'';height:calc(100% + 4px);width:calc(100% + 4px);border:1px solid ", ";border-radius:20px;position:absolute;}}"], ({
+  size
+}) => containerHeight[size], ({
+  size
+}) => borderRadius[size], ({
+  theme
+}) => theme.colors.brand[300], ({
+  theme
+}) => theme.colors.brand[600]);
+const StyledLabel = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-v733m4-1"
-})(["width:", ";height:", ";z-index:2;outline:none;border-radius:", ";"], function (_ref5) {
-  var width = _ref5.width,
-      size = _ref5.size;
-  return "calc(".concat(width, "px + ").concat(margin[size], ")");
-}, function (_ref6) {
-  var size = _ref6.size;
-  return labelHeight[size];
-}, function (_ref7) {
-  var size = _ref7.size;
-  return labelHeight[size];
-});
-var StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
+})(["width:", ";height:", ";z-index:2;outline:none;border-radius:", ";"], ({
+  width,
+  size
+}) => "calc(".concat(width, "px + ").concat(margin[size], ")"), ({
+  size
+}) => labelHeight[size], ({
+  size
+}) => labelHeight[size]);
+const StyledVisibleContent = /*#__PURE__*/styled.label.withConfig({
   componentId: "sc-v733m4-2"
-})(["display:flex;margin:0;padding:0;align-items:center;height:100%;flex-direction:", ";border-radius:", ";border:", ";transition:background-color 0.2s;background-color:", ";&:hover{cursor:", ";}"], function (_ref8) {
-  var checked = _ref8.checked;
-  return checked ? 'row-reverse' : 'row';
-}, function (_ref9) {
-  var size = _ref9.size;
-  return "calc(".concat(labelHeight[size], " - 4px)");
-}, function (_ref10) {
-  var theme = _ref10.theme,
-      size = _ref10.size,
-      checked = _ref10.checked,
-      disabled = _ref10.disabled,
-      readOnly = _ref10.readOnly,
-      active = _ref10.active;
-  return size === 's' ? "1px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme)) : "\n    2px solid ".concat(handleBorderColor(checked, disabled, readOnly, active, theme), "\n    ");
-}, function (_ref11) {
-  var theme = _ref11.theme,
-      checked = _ref11.checked,
-      disabled = _ref11.disabled,
-      readOnly = _ref11.readOnly,
-      active = _ref11.active;
-  return handleBackgroundColor(checked, disabled, readOnly, active, theme);
-}, function (_ref12) {
-  var disabled = _ref12.disabled,
-      readOnly = _ref12.readOnly;
-  return handleCursors(disabled, readOnly);
-});
-var StyledCircle = /*#__PURE__*/styled.div.withConfig({
+})(["display:flex;margin:0;padding:0;align-items:center;height:100%;flex-direction:", ";border-radius:", ";border:", ";transition:background-color 0.2s;background-color:", ";&:hover{cursor:", ";}"], ({
+  checked
+}) => checked ? 'row-reverse' : 'row', ({
+  size
+}) => "calc(".concat(labelHeight[size], " - 4px)"), ({
+  theme,
+  size,
+  checked,
+  disabled,
+  readOnly,
+  active
+}) => 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,
+  readOnly,
+  active
+}) => handleBackgroundColor(checked, disabled, readOnly, active, theme), ({
+  disabled,
+  readOnly
+}) => handleCursors(disabled, readOnly));
+const StyledCircle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-v733m4-3"
-})(["height:", ";width:", ";border-radius:50%;background-color:", ";"], function (_ref13) {
-  var size = _ref13.size;
-  return circleValues[size];
-}, function (_ref14) {
-  var size = _ref14.size;
-  return circleValues[size];
-}, function (_ref15) {
-  var theme = _ref15.theme,
-      readOnly = _ref15.readOnly;
-  return readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'];
-});
-var StyledText = /*#__PURE__*/styled.div.withConfig({
+})(["height:", ";width:", ";border-radius:50%;background-color:", ";"], ({
+  size
+}) => circleValues[size], ({
+  size
+}) => circleValues[size], ({
+  theme,
+  readOnly
+}) => readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000']);
+const StyledText = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-v733m4-4"
-})(["display:flex;flex-grow:1;line-height:1;margin-bottom:-0.12rem;align-items:center;justify-content:", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], function (_ref16) {
-  var isLongerTextRendering = _ref16.isLongerTextRendering;
-  return isLongerTextRendering ? 'flex-start' : 'center';
-}, function (_ref17) {
-  var theme = _ref17.theme,
-      size = _ref17.size;
-  return handleFontSize(size, theme);
-}, function (_ref18) {
-  var theme = _ref18.theme;
-  return theme.fontWeights.semibold;
-}, function (_ref19) {
-  var theme = _ref19.theme,
-      disabled = _ref19.disabled;
-  return disabled ? '#5c6574' : theme.colors.neutral['000'];
-}, function (_ref20) {
-  var isLongerTextRendering = _ref20.isLongerTextRendering,
-      checked = _ref20.checked;
-  return isLongerTextRendering && checked ? "margin-left: 6px;" : undefined;
-}, function (_ref21) {
-  var isLongerTextRendering = _ref21.isLongerTextRendering,
-      checked = _ref21.checked;
-  return isLongerTextRendering && !checked ? "margin-left: 4px;" : undefined;
-});
-var StyledInput = /*#__PURE__*/styled.input.withConfig({
+})(["display:flex;flex-grow:1;line-height:1;margin-bottom:-0.12rem;align-items:center;justify-content:", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], ({
+  isLongerTextRendering
+}) => isLongerTextRendering ? 'flex-start' : 'center', ({
+  theme,
+  size
+}) => handleFontSize(size, theme), ({
+  theme
+}) => theme.fontWeights.semibold, ({
+  theme,
+  disabled
+}) => disabled ? '#5c6574' : theme.colors.neutral['000'], ({
+  isLongerTextRendering,
+  checked
+}) => isLongerTextRendering && checked ? "margin-left: 6px;" : undefined, ({
+  isLongerTextRendering,
+  checked
+}) => 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;"]);
-var SetLabelWidth = /*#__PURE__*/styled.div.withConfig({
+const SetLabelWidth = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-v733m4-6"
-})(["font-size:", ";font-weight:", ";width:auto;position:absolute;white-space:nowrap;visibility:hidden;"], function (_ref22) {
-  var theme = _ref22.theme,
-      size = _ref22.size;
-  return handleFontSize(size, theme);
-}, function (_ref23) {
-  var theme = _ref23.theme;
-  return theme.fontWeights.semibold;
-});
+})(["font-size:", ";font-weight:", ";width:auto;position:absolute;white-space:nowrap;visibility:hidden;"], ({
+  theme,
+  size
+}) => handleFontSize(size, theme), ({
+  theme
+}) => theme.fontWeights.semibold);
 
 export { SetLabelWidth, StyledCircle, StyledContainer, StyledInput, StyledLabel, StyledText, StyledVisibleContent };
-//# sourceMappingURL=styles.js.map

package/esm/controlled-toggle/utils/addTooltipOnReadOnly.js

@@ -1,8 +1,9 @@
-import React from 'react';
-import { DSTooltipV2 } from '@elliemae/ds-tooltip';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { DSTooltipV2 } from '@elliemae/ds-basic/Tooltip';
 
-var addTooltipOnReadOnly = function addTooltipOnReadOnly(Component, readOnly) {
-  if (readOnly) return /*#__PURE__*/React.createElement(DSTooltipV2, {
+const addTooltipOnReadOnly = (Component, readOnly) => {
+  if (readOnly) return /*#__PURE__*/_jsx(DSTooltipV2, {
     title: "Read Only",
     offset: [0, 9],
     triggerComponent: Component
@@ -11,4 +12,3 @@ var addTooltipOnReadOnly = function addTooltipOnReadOnly(Component, readOnly) {
 };
 
 export { addTooltipOnReadOnly };
-//# sourceMappingURL=addTooltipOnReadOnly.js.map

package/esm/controlled-toggle/utils/styleHelpers.js

@@ -1,31 +1,31 @@
-var circleValues = {
+const circleValues = {
   s: '14px',
   m: '20px',
   l: '28px'
 };
-var margin = {
+const margin = {
   s: '26px',
   m: '34px',
   l: '42px'
 };
-var containerHeight = {
+const containerHeight = {
   s: '20px',
   m: '28px',
   l: '36px'
 };
-var labelHeight = {
+const labelHeight = {
   s: '16px',
   m: '24px',
   l: '32px'
 };
-var borderRadius = {
+const borderRadius = {
   s: '16px',
   m: '20px',
   l: '22px'
 };
-var handleFontSize = function handleFontSize(size, _ref) {
-  var fontSizes = _ref.fontSizes;
-
+const handleFontSize = (size, {
+  fontSizes
+}) => {
   switch (size) {
     case 's':
       return fontSizes.microText[200];
@@ -40,9 +40,9 @@ var handleFontSize = function handleFontSize(size, _ref) {
       return '15px';
   }
 };
-var handleBackgroundColor = function handleBackgroundColor(checked, disabled, readOnly, active, _ref2) {
-  var colors = _ref2.colors;
-
+const handleBackgroundColor = (checked, disabled, readOnly, active, {
+  colors
+}) => {
   if (disabled) {
     return colors.neutral[100];
   } else if (readOnly) {
@@ -57,9 +57,9 @@ var handleBackgroundColor = function handleBackgroundColor(checked, disabled, re
     return colors.neutral[600];
   }
 };
-var handleBorderColor = function handleBorderColor(checked, disabled, readOnly, active, _ref3) {
-  var colors = _ref3.colors;
-
+const handleBorderColor = (checked, disabled, readOnly, active, {
+  colors
+}) => {
   if (disabled) {
     return colors.neutral[100];
   } else if (readOnly) {
@@ -74,7 +74,7 @@ var handleBorderColor = function handleBorderColor(checked, disabled, readOnly,
     return colors.neutral[700];
   }
 };
-var handleCursors = function handleCursors(disabled, readOnly) {
+const handleCursors = (disabled, readOnly) => {
   if (disabled) {
     return 'not-allowed';
   } else if (readOnly) {
@@ -83,4 +83,3 @@ var handleCursors = function handleCursors(disabled, readOnly) {
 };
 
 export { borderRadius, circleValues, containerHeight, handleBackgroundColor, handleBorderColor, handleCursors, handleFontSize, labelHeight, margin };
-//# sourceMappingURL=styleHelpers.js.map

package/esm/index.js

@@ -10,110 +10,3 @@ export { getValidationDateTimeStringMetaInfo } from './controlled-date-time-pick
 export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './controlled-date-time-picker/utils/dateHelpers.js';
 export { getValidationTimeStringMetaInfo } from './controlled-date-time-picker/utils/timeHelpers.js';
 export { DSControlledToggle, DSControlledToggleWithSchema } from './controlled-toggle/ControlledToggle.js';
-import 'react';
-import 'react-desc';
-import '@elliemae/ds-truncated-tooltip-text';
-import './controlled-checkbox/propTypes.js';
-import './controlled-checkbox/styles.js';
-import 'styled-components';
-import './controlled-checkbox/utils/styleHelpers.js';
-import './controlled-checkbox/config/useValidateProps.js';
-import '@elliemae/ds-props-helpers';
-import './controlled-checkbox/utils/setMultipleRefs.js';
-import './controlled-date-range-picker/config/useControlledDateRangePicker.js';
-import 'uid';
-import './controlled-date-range-picker/config/useGetPropsWithDefault.js';
-import './controlled-date-range-picker/ControlledDateRangePickerCTX.js';
-import './controlled-date-range-picker/config/useRangePickerLogic.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import './controlled-date-range-picker/parts/ControlledDateRangeContent.js';
-import './controlled-date-range-picker/parts/ControlledDateRangeFromDate.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import './controlled-date-range-picker/parts/ControlledDateRangeToDate.js';
-import './controlled-date-range-picker/parts/ControlledDateRangeCalendar.js';
-import './controlled-date-range-picker/propTypes.js';
-import './controlled-date-time-picker/propTypes.js';
-import './controlled-date-time-picker/config/useControlledDateTimePicker.js';
-import './controlled-date-time-picker/config/useGetPropsWithDefault.js';
-import './controlled-date-time-picker/ControlledDateTimePickerCTX.js';
-import './controlled-date-time-picker/config/useGetDestructuredValues.js';
-import './controlled-date-time-picker/utils/numberHelpers.js';
-import './controlled-date-time-picker/utils/constants.js';
-import './controlled-date-time-picker/config/useValidateProps.js';
-import '@babel/runtime/helpers/esm/typeof';
-import './controlled-date-time-picker/parts/ControlledDateTimePickerContent.js';
-import '@elliemae/ds-grid';
-import './controlled-date-time-picker/parts/Styleds.js';
-import '@elliemae/ds-button';
-import './controlled-date-time-picker/parts/DateInputs/DateInputs.js';
-import './controlled-date-time-picker/parts/DateInputs/MMInput.js';
-import './controlled-date-time-picker/parts/DateInputs/DDInput.js';
-import './controlled-date-time-picker/parts/DateInputs/YYYYInput.js';
-import './controlled-date-time-picker/parts/DateInputs/useDateInputs.js';
-import './controlled-date-time-picker/parts/config.js';
-import './controlled-date-time-picker/parts/TimeInputs/TimeInputs.js';
-import './controlled-date-time-picker/parts/TimeInputs/HHInput.js';
-import './controlled-date-time-picker/parts/TimeInputs/MinutesInput.js';
-import './controlled-date-time-picker/parts/TimeInputs/MeridiemInput.js';
-import './controlled-date-time-picker/parts/TimeInputs/useTimeInputs.js';
-import './controlled-date-time-picker/parts/Pickers/PickersIcons.js';
-import './controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js';
-import './controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js';
-import '@elliemae/ds-icons';
-import './controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js';
-import './controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/Styleds.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarContent.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarBody.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarMonthDays.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/Day.js';
-import '@babel/runtime/helpers/esm/extends';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarContext.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/Styleds.js';
-import '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import '@elliemae/ds-system';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarWeekDays.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarHead.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarFooter.js';
-import './controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelWrapper.js';
-import './controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContent.js';
-import './controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/Styleds.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/HoursList.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/MinutesList.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelFooter.js';
-import './controlled-date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js';
-import 'react-popper';
-import './controlled-date-time-picker/utils/hooks/useOnClickOutside.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/Calendar.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/CalendarWrapper.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/useKeyboardHandlers.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/useFocusLogic.js';
-import './controlled-date-time-picker/utils/hooks/useGetStartingFocusedDay.js';
-import './controlled-date-time-picker/utils/hooks/useGetDayFromDateString.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js';
-import './controlled-date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js';
-import './controlled-date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheel.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/useConfigTimePickerCTX.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js';
-import './controlled-date-time-picker/parts/Pickers/TimeWheel/useKeyboardHandlers.js';
-import './controlled-date-time-picker/parts/ClearButton/ClearButton.js';
-import '@elliemae/ds-icon';
-import './controlled-date-time-picker/parts/ClearButton/useClearButton.js';
-import './controlled-toggle/propTypes.js';
-import './controlled-toggle/styles.js';
-import './controlled-toggle/utils/styleHelpers.js';
-import './controlled-toggle/defaultProps.js';
-import './controlled-toggle/utils/addTooltipOnReadOnly.js';
-import '@elliemae/ds-tooltip';
-//# sourceMappingURL=index.js.map