@elliemae/ds-form 2.3.0-alpha.8 → 2.3.0-next.10

package/cjs/TimeInput/TimeInputs.js

@@ -0,0 +1,372 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+var moment = require('moment');
+var utils = require('./utils.js');
+var constants = require('@elliemae/ds-shared/constants');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = 'input-times-group';
+const InputTimesGroup = dsClassnames.aggregatedClasses('div')(blockName);
+const TimeInput = dsClassnames.aggregatedClasses('input')(blockName, 'input');
+const Divider = dsClassnames.aggregatedClasses('span')(blockName, 'divider', _ref => {
+  let {
+    value
+  } = _ref;
+  return {
+    value
+  };
+}); // eslint-disable-next-line react/prop-types
+
+const TimeDivider = _ref2 => {
+  let {
+    content = ':',
+    value = ''
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](Divider, {
+    value: !!value
+  }, void 0, content);
+};
+
+const TimeInputs = _ref3 => {
+  let {
+    time,
+    format,
+    use12Hours,
+    step = 1,
+    showHours,
+    showMinutes,
+    showSeconds,
+    onChange,
+    disabled,
+    innerRef,
+    clearable,
+    'arial-label': ariaLabel,
+    'aria-label': ariaLabel2
+  } = _ref3;
+  const [meridiem, setMeridiem] = React.useState('');
+  const [hours, setHours] = React.useState('');
+  const [minutes, setMinutes] = React.useState('');
+  const [hasInputValue, setHasInputValue] = React.useState(false);
+  const [seconds, setSeconds] = React.useState('');
+  const [currentKey, setCurrentKey] = React.useState('');
+  const [hasInputBeenTriggered, setHasInputBeenTriggered] = React.useState(false);
+  const [lastTypedNumber, setLastTypedNumber] = React.useState(null);
+  React.useEffect(() => {
+    if (time && moment__default["default"](time).isValid()) {
+      const timeValues = utils.getTimeValuesFromTime(time, format, use12Hours);
+      setMeridiem(timeValues.meridiem);
+      setHours(timeValues.hours);
+      setMinutes(timeValues.minutes);
+      setSeconds(timeValues.seconds);
+    } else {
+      setMeridiem('');
+      setHours('');
+      setMinutes('');
+      setSeconds('');
+    }
+  }, [time, format, use12Hours]);
+  React.useEffect(() => {
+    const selectedTime = time || moment__default["default"]();
+
+    if (isTimeCompletelySet() && selectedTime.hours && hasInputBeenTriggered) {
+      if (showHours && hours) selectedTime.hours(hours);
+      if (showMinutes && minutes) selectedTime.minutes(minutes);
+      if (showSeconds && seconds) selectedTime.seconds(seconds);
+
+      if (use12Hours && meridiem) {
+        const nextHours = meridiem.toLowerCase() === constants.AM ? hours % 12 : hours % 12 + 12;
+        selectedTime.hour(nextHours);
+      }
+
+      onChange(selectedTime);
+      setHasInputBeenTriggered(false);
+    }
+  }, [hours, minutes, seconds, meridiem]);
+
+  const focusNextInputIfNeeded = (currentEl, max, number) => {
+    if (utils.shouldFocusNextInput(max, number, currentEl.value) && !utils.isArrowIncrementDecrement(currentKey) && !hasInputValue) {
+      utils.focusNextInput(currentEl);
+    }
+  };
+
+  const getNextTimeValue = function (value) {
+    let incrementing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    const parsedValue = utils.parseTimeNumberFromText(value);
+    return incrementing ? parsedValue + step : parsedValue - step;
+  };
+
+  const onInputFocus = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.target.select();
+  };
+
+  const onClick = e => {
+    if (e.target.value) {
+      setHasInputValue(true);
+    }
+  }; // eslint-disable-next-line max-statements
+
+
+  const onKeyDown = (event, max) => {
+    const {
+      target
+    } = event;
+    const {
+      value
+    } = target;
+    setLastTypedNumber(event.key);
+
+    switch (event.key) {
+      case constants.ARROW_UP:
+        {
+          event.preventDefault();
+          setCurrentKey(event.key);
+          const incrementedValue = getNextTimeValue(value);
+          utils.setNativeValue(event.target, incrementedValue);
+          break;
+        }
+
+      case constants.ARROW_DOWN:
+        {
+          event.preventDefault();
+          setCurrentKey(event.key);
+          const decrementedValue = getNextTimeValue(value, false);
+          utils.setNativeValue(event.target, decrementedValue);
+          break;
+        }
+
+      case constants.BACKSPACE:
+        {
+          event.preventDefault();
+
+          if (!value) {
+            utils.focusPreviousInput(event.target);
+          } else {
+            utils.setNativeValue(event.target, '');
+          }
+
+          break;
+        }
+
+      case constants.ESCAPE:
+        {
+          event.preventDefault();
+          event.target.blur();
+          break;
+        }
+
+      case constants.HOME:
+        {
+          event.preventDefault();
+          utils.setNativeValue(event.target, String(max));
+          utils.focusNextInput(event.target);
+          break;
+        }
+
+      case constants.END:
+        {
+          event.preventDefault();
+          utils.setNativeValue(event.target, '00');
+          utils.focusNextInput(event.target);
+          break;
+        }
+
+      case constants.SHIFT:
+        event.preventDefault();
+        setCurrentKey(event.key);
+        break;
+    }
+  };
+
+  const isTimeCompletelySet = () => {
+    let neededValues = [];
+    if (showHours) neededValues = [...neededValues, hours || null];
+    if (showMinutes) neededValues = [...neededValues, minutes || null];
+    if (showSeconds) neededValues = [...neededValues, seconds || null];
+    if (use12Hours) neededValues = [...neededValues, meridiem || null];
+    return !neededValues.some(value => !value);
+  };
+
+  const handleSecondsChange = e => {
+    const {
+      value
+    } = e.target;
+    const secondsHandled = utils.parseTimeNumberFromText(value);
+    const nextSeconds = utils.getValidTimeNumber(constants.GENERAL_TIME_RANGE, secondsHandled, lastTypedNumber);
+    setSeconds(utils.formatSeconds(format, nextSeconds));
+    setHasInputBeenTriggered(true);
+    focusNextInputIfNeeded(e.target, constants.GENERAL_TIME_RANGE.max, value);
+  };
+
+  const handleMinutesChange = e => {
+    const {
+      value
+    } = e.target;
+    const minutesHandled = utils.parseTimeNumberFromText(value);
+    const nextMinutes = utils.getValidTimeNumber(constants.GENERAL_TIME_RANGE, minutesHandled, lastTypedNumber);
+    setMinutes(utils.formatMinutes(format, nextMinutes));
+    setHasInputBeenTriggered(true);
+    focusNextInputIfNeeded(e.target, constants.GENERAL_TIME_RANGE.max, value);
+  };
+
+  const handleHoursChange = e => {
+    const {
+      value
+    } = e.target;
+    const hour = utils.parseTimeNumberFromText(value);
+    const hoursRange = use12Hours ? constants.HOUR_RANGE_12 : constants.HOUR_RANGE_24;
+    const nextHour = utils.getValidTimeNumber(hoursRange, hour, lastTypedNumber);
+    setHours(utils.formatHour(format, nextHour));
+    setHasInputBeenTriggered(true);
+    focusNextInputIfNeeded(e.target, hoursRange.max, value);
+  };
+
+  const handleMeridiemKeyDown = e => {
+    if (e.key === constants.ARROW_UP || e.key === 'a') {
+      setMeridiem(utils.formatMeridiem(format, constants.AM));
+    } else if (e.key === constants.ARROW_DOWN || e.key === 'p') {
+      setMeridiem(utils.formatMeridiem(format, constants.PM));
+    } else if (e.key === constants.SHIFT) {
+      setCurrentKey(e.key);
+    } else if (e.key === constants.BACKSPACE) {
+      setMeridiem('');
+    }
+
+    setHasInputBeenTriggered(true);
+  };
+
+  const handleMeridiemBlur = e => {
+    const {
+      value
+    } = e.target;
+
+    if (value !== constants.AM && value !== constants.PM) {
+      setMeridiem('');
+    }
+  };
+
+  const handleOnBlur = event => {
+    const selectedTime = moment__default["default"]();
+
+    if (clearable && !event.currentTarget.contains(event.relatedTarget)) {
+      if (showHours && hours) selectedTime.hours(hours);
+      if (showMinutes && minutes) selectedTime.minutes(minutes);
+      if (showSeconds && seconds) selectedTime.seconds(seconds);
+
+      if (use12Hours && meridiem) {
+        const nextHours = meridiem.toLowerCase() === constants.AM ? hours % 12 : hours % 12 + 12;
+        selectedTime.hour(nextHours);
+      }
+
+      onChange(selectedTime);
+    }
+  };
+
+  const renderSecondsInput = () => {
+    if (!showSeconds) return null;
+    return /*#__PURE__*/React.createElement(TimeInput, _objectSpread(_objectSpread({}, utils.commonInputProps(e => onKeyDown(e, constants.GENERAL_TIME_RANGE.max), onInputFocus, onClick)), {}, {
+      key: "seconds-input",
+      "data-testid": "ds-time-input__seconds",
+      "aria-label": ariaLabel || ariaLabel2 || 'Seconds Input',
+      disabled: disabled // eslint-disable-next-line no-return-assign
+      ,
+      innerRef: node => node,
+      onChange: handleSecondsChange,
+      placeholder: utils.placeholderFormat(constants.PLACEHOLDER_TIME.seconds, format),
+      value: seconds
+    }));
+  };
+
+  const renderMinutesInput = () => {
+    if (!showMinutes) return null;
+    return /*#__PURE__*/React.createElement(TimeInput, _objectSpread(_objectSpread({}, utils.commonInputProps(e => onKeyDown(e, constants.GENERAL_TIME_RANGE.max), onInputFocus, onClick)), {}, {
+      key: "minutes-input",
+      "data-testid": "ds-time-input__minutes",
+      "aria-label": ariaLabel || ariaLabel2 || 'Minutes Input',
+      disabled: disabled // eslint-disable-next-line no-return-assign
+      ,
+      innerRef: node => node,
+      onChange: handleMinutesChange,
+      placeholder: utils.placeholderFormat(constants.PLACEHOLDER_TIME.minutes, format),
+      value: minutes
+    }));
+  };
+
+  const renderHoursInput = () => {
+    if (!showHours) return null;
+    const hourFormatRange = use12Hours ? constants.HOUR_RANGE_12 : constants.HOUR_RANGE_24;
+    return /*#__PURE__*/React.createElement(TimeInput, _objectSpread(_objectSpread({}, utils.commonInputProps(e => onKeyDown(e, hourFormatRange.max), onInputFocus, onClick)), {}, {
+      key: "hour-input",
+      "data-testid": "ds-time-input__hours",
+      "aria-label": ariaLabel || ariaLabel2 || 'Hours Input',
+      disabled: disabled // eslint-disable-next-line no-return-assign
+      ,
+      innerRef: node => node,
+      onChange: handleHoursChange,
+      placeholder: utils.placeholderFormat(constants.PLACEHOLDER_TIME.hour, format, use12Hours),
+      value: hours
+    }));
+  };
+
+  const renderMeridiemInput = () => {
+    if (!use12Hours) return null;
+    return /*#__PURE__*/React.createElement(TimeInput, _objectSpread(_objectSpread({}, utils.commonInputProps), {}, {
+      key: "meridiem-input",
+      "data-testid": "ds-time-input__ampm",
+      "aria-label": ariaLabel || ariaLabel2 || 'Meridiem Input',
+      disabled: disabled,
+      onBlur: handleMeridiemBlur,
+      onKeyDown: handleMeridiemKeyDown,
+      placeholder: utils.placeholderFormat(constants.PLACEHOLDER_TIME.meridiem, format),
+      value: meridiem
+    }));
+  };
+
+  const renderTimeInputs = () => {
+    const inputs = [renderHoursInput(), renderMinutesInput(), renderSecondsInput()];
+    /* eslint-disable indent */
+
+    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([index ? /*#__PURE__*/_jsx__default["default"](TimeDivider // eslint-disable-next-line react/no-array-index-key
+    , {
+      content: ":",
+      value: input.props.value
+    }, index) : null, input]) : acc, []);
+    /* eslint-enable indent */
+
+    return [inputsWithDividers, /*#__PURE__*/React__default["default"].createElement('span', {
+      key: 'span'
+    }), // hack for next/prev focus
+    renderMeridiemInput()];
+  };
+
+  return /*#__PURE__*/_jsx__default["default"](InputTimesGroup, {
+    onBlur: handleOnBlur,
+    innerRef: innerRef
+  }, void 0, renderTimeInputs());
+};
+
+module.exports = TimeInputs;

package/cjs/TimeInput/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSTimeInput = require('./DSTimeInput.js');
+var TimeInputImpl = require('./TimeInputImpl.js');
+
+
+
+exports.DSTimeInputWithSchema = DSTimeInput.DSTimeInputWithSchema;
+exports["default"] = DSTimeInput["default"];
+exports.TimeInputImpl = TimeInputImpl;

package/cjs/TimeInput/utils.js

@@ -0,0 +1,153 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsUtilities = require('@elliemae/ds-utilities');
+var constants = require('@elliemae/ds-shared/constants');
+
+const isAM = time => time && time.hour() < 12;
+
+const isArrowIncrementDecrement = key => key === constants.ARROW_DOWN || key === constants.ARROW_UP || key === constants.SHIFT;
+const setNativeValue = (element, value) => {
+  if (!Object.getOwnPropertyDescriptor(element, 'value')) return;
+  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
+  const prototype = Object.getPrototypeOf(element);
+  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
+
+  if (valueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    valueSetter.call(element, value);
+  }
+
+  element.dispatchEvent(new Event('input', {
+    bubbles: true
+  }));
+};
+const placeholderFormat = (position, format, use12Hours) => {
+  if (position === constants.PLACEHOLDER_TIME.hour) {
+    return _placeholderHour(format, use12Hours);
+  }
+
+  if (position === constants.PLACEHOLDER_TIME.minutes) {
+    return format.indexOf('mm') > -1 ? 'mm' : 'm';
+  }
+
+  if (position === constants.PLACEHOLDER_TIME.seconds) {
+    return format.indexOf('ss') > -1 ? 'ss' : 's';
+  }
+
+  if (position === constants.PLACEHOLDER_TIME.meridiem) {
+    return format.indexOf('A') > -1 ? 'A' : 'a';
+  }
+};
+
+const _placeholderHour = (format, use12Hours) => {
+  if (use12Hours) {
+    return format.indexOf('hh') > -1 ? 'hh' : 'h';
+  }
+
+  return format.indexOf('HH') > -1 ? 'HH' : 'H';
+};
+
+const formatTimeNumber = (value, shouldAddLeadingZeros) => {
+  if (value === null || value === undefined) return '';
+  return shouldAddLeadingZeros ? dsUtilities.addLeadingZeros(2)(value) : String(value);
+};
+
+const formatMinutes = (format, value) => {
+  const shouldAddLeadingZeros = format.indexOf('mm') > -1;
+  return formatTimeNumber(value, shouldAddLeadingZeros);
+};
+const formatSeconds = (format, value) => {
+  const shouldAddLeadingZeros = format.indexOf('ss') > -1;
+  return formatTimeNumber(value, shouldAddLeadingZeros);
+};
+const formatHour = (format, value) => {
+  const shouldAddLeadingZeros = format.indexOf('HH') > -1 || format.indexOf('hh') > -1;
+  return formatTimeNumber(value, shouldAddLeadingZeros);
+};
+const formatMeridiem = (format, value) => format.indexOf('A') > -1 ? value.toUpperCase() : value.toLowerCase();
+const parseTimeNumberFromText = stringValue => {
+  const parsedInt = dsUtilities.parseInt(stringValue);
+  if (dsUtilities.isNaN(parsedInt)) return null;
+  return parsedInt;
+};
+const focusNextInput = currentEl => {
+  const nextElement = currentEl.nextElementSibling;
+
+  if (nextElement && nextElement.nextElementSibling) {
+    nextElement.nextElementSibling.focus();
+  }
+};
+const focusPreviousInput = currentEl => {
+  const previousElement = currentEl.previousElementSibling;
+
+  if (previousElement && previousElement.previousElementSibling) {
+    previousElement.previousElementSibling.focus();
+  }
+};
+const getValidTimeNumber = (_ref, number, typed) => {
+  let {
+    min,
+    max
+  } = _ref;
+  if (number === undefined || number === null) return null;
+
+  if (number > max) {
+    if (dsUtilities.isNaN(typed)) return dsUtilities.parseInt(typed);
+    return max;
+  }
+
+  if (number < min) return min;
+  return number;
+};
+const shouldFocusNextInput = function (max) {
+  let number = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let stringValue = arguments.length > 2 ? arguments[2] : undefined;
+  const safeString = String(stringValue);
+  const cleanString = safeString.startsWith('00') ? safeString.slice(1) : safeString;
+  return number * 10 > max || String(max).length === cleanString.length;
+};
+const getTimeValuesFromTime = (time, format, use12Hours) => {
+  if (!time || !time.hour) return {};
+  const hours = use12Hours ? time.hour() % 12 || 12 : time.hour();
+  const minutes = time.minutes();
+  const seconds = time.seconds();
+  const meridiem = !isAM(time) ? constants.PM : constants.AM;
+  return {
+    hours: formatHour(format, hours),
+    minutes: formatMinutes(format, minutes),
+    seconds: formatSeconds(format, seconds),
+    meridiem
+  };
+};
+const resetTimeValues = () => ({
+  hours: '',
+  minutes: '',
+  seconds: '',
+  meridiem: constants.AM
+});
+const commonInputProps = (onKeyDown, onInputFocus, onClick) => ({
+  pattern: '[0-9]*',
+  type: 'text',
+  onKeyDown,
+  onClick,
+  onFocus: onInputFocus
+});
+
+exports.commonInputProps = commonInputProps;
+exports.focusNextInput = focusNextInput;
+exports.focusPreviousInput = focusPreviousInput;
+exports.formatHour = formatHour;
+exports.formatMeridiem = formatMeridiem;
+exports.formatMinutes = formatMinutes;
+exports.formatSeconds = formatSeconds;
+exports.getTimeValuesFromTime = getTimeValuesFromTime;
+exports.getValidTimeNumber = getValidTimeNumber;
+exports.isArrowIncrementDecrement = isArrowIncrementDecrement;
+exports.parseTimeNumberFromText = parseTimeNumberFromText;
+exports.placeholderFormat = placeholderFormat;
+exports.resetTimeValues = resetTimeValues;
+exports.setNativeValue = setNativeValue;
+exports.shouldFocusNextInput = shouldFocusNextInput;

package/cjs/Toggle/DSToggle.js

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var reactDesc = require('react-desc');
+var DSToggleImpl = require('./DSToggleImpl.js');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["containerProps", "hasError", "readOnly", "disabled", "checked", "labelOn", "labelOff", "name", "value", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSToggle = _ref => {
+  let {
+    containerProps,
+    hasError,
+    readOnly,
+    disabled,
+    checked,
+    labelOn,
+    labelOff,
+    name,
+    value,
+    size
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(DSToggleImpl, _objectSpread(_objectSpread({}, otherProps), {}, {
+    checked: checked,
+    containerProps: containerProps,
+    disabled: disabled,
+    hasError: hasError,
+    labelOff: labelOff,
+    labelOn: labelOn,
+    name: name,
+    readOnly: readOnly,
+    size: size,
+    value: value
+  }));
+};
+
+DSToggle.defaultProps = {
+  labelOn: 'ON',
+  labelOff: 'OFF',
+  size: 's',
+  hasError: false,
+  readOnly: false,
+  disabled: false,
+  checked: undefined
+};
+const props = {
+  /**
+   * Set of Properties attached to the main container
+   */
+  containerProps: reactDesc.PropTypes.shape({}).description('Set of Properties attached to the main container'),
+
+  /**
+   * Whether the toggle has error or not
+   */
+  hasError: reactDesc.PropTypes.bool.description('Whether the toggle has error or not'),
+
+  /**
+   * Whether the toggle is read only or not
+   */
+  readOnly: reactDesc.PropTypes.bool.description('Whether the toggle is read only or not'),
+
+  /**
+   * Whether the toggle is disabled or not
+   */
+  disabled: reactDesc.PropTypes.bool.description('Whether the toggle is disabled or not'),
+
+  /**
+   * Whether the toggle is checked or not
+   */
+  checked: reactDesc.PropTypes.bool.description('Whether the toggle is checked or not'),
+
+  /**
+   * Allows a function that is triggered once the toggle changes
+   */
+  onChange: reactDesc.PropTypes.func.description('Allows a function that is triggered once the toggle changes'),
+
+  /**
+   * Label to show when the toggle is ON
+   */
+  labelOn: reactDesc.PropTypes.string.description('Label to show when the toggle is ON'),
+
+  /**
+   * Label to show when the toggle is OFF
+   */
+  labelOff: reactDesc.PropTypes.string.description('Label to show when the toggle is OFF'),
+
+  /**
+   * Default value once the component is initialized
+   */
+  value: reactDesc.PropTypes.string.description('Default value once the component is initialized'),
+
+  /**
+   * ['s', 'm', 'l']
+   */
+  size: reactDesc.PropTypes.oneOf(propTypes.dsBasicSizes).description("['s', 'm', 'l']"),
+
+  /**
+   * Input name
+   */
+  name: reactDesc.PropTypes.string.description('Input name')
+};
+const DSToggleWithSchema = reactDesc.describe(DSToggle);
+DSToggleWithSchema.propTypes = props;
+
+exports.DSToggleWithSchema = DSToggleWithSchema;
+exports["default"] = DSToggle;