@elliemae/ds-controlled-form 2.0.0-alpha.1 → 2.0.0-alpha.13

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

@@ -2,12 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
+var constants = require('./constants.js');
 var stringHelpers = require('./stringHelpers.js');
 var numberHelpers = require('./numberHelpers.js');
 
-/* eslint-disable max-lines */
-const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 const getLastDayOfMonth = (month, year) => new Date(year, month + 1, 0);
 const isValidDayForTheMonth = (month, year, day) => {
   var _Date, _Date$getMonth;
@@ -26,9 +28,9 @@ const isValidDayForTheMonthDateString = dateString => {
   const monthDateMonth = monthInt - 1;
   return ((_getDayFromDateString = getDayFromDateString(dateString)) === null || _getDayFromDateString === void 0 ? void 0 : (_getDayFromDateString2 = _getDayFromDateString.getMonth) === null || _getDayFromDateString2 === void 0 ? void 0 : _getDayFromDateString2.call(_getDayFromDateString)) === monthDateMonth;
 };
-const getValidationDateStringMetaInfo = (dateString, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-getIsOutOfRangeDay = day => false, // eslint-disable-next-line @typescript-eslint/no-unused-vars
-getIsDisabledDay = day => false) => {
+const getValidationDateStringMetaInfo = function (dateString) {
+  let getIsOutOfRangeDay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : day => false;
+  let getIsDisabledDay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : day => false;
   const metaInfo = {};
 
   if (!stringHelpers.isIncompleteString(dateString)) {
@@ -63,15 +65,17 @@ const dateAddMonths = (date, value) => {
 };
 const dateAddYear = (date, value) => dateAddMonths(date, value * 12);
 // sumFromDateValues supports negative values to "subtract"
-const sumFromDateValues = ({
-  month,
-  year,
-  day = 1
-}, {
-  monthsToSum = 0,
-  yearsToSum = 0,
-  daysToSum = 0
-}) => {
+const sumFromDateValues = (_ref, _ref2) => {
+  let {
+    month,
+    year,
+    day = 1
+  } = _ref;
+  let {
+    monthsToSum = 0,
+    yearsToSum = 0,
+    daysToSum = 0
+  } = _ref2;
   let newDate = new Date(year, month, day);
   if (yearsToSum) newDate = dateAddYear(newDate, yearsToSum);
   if (monthsToSum) newDate = dateAddMonths(newDate, monthsToSum);
@@ -91,22 +95,26 @@ const sumValuesToDate = (day, sumValues) => {
   } = sumFromDateValues(dateAsVals, sumValues);
   return new Date(year, month, newD);
 };
-const subtractYears = (date, howManyMore = 1) => {
+const subtractYears = function (date) {
+  let howManyMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const newDate = new Date(date.getTime());
   newDate.setFullYear(date.getFullYear() - howManyMore);
   return newDate;
 };
-const subtractMonths = (date, howManyMore = 1) => {
+const subtractMonths = function (date) {
+  let howManyMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const newDate = new Date(date.getTime());
   newDate.setMonth(date.getMonth() - howManyMore);
   return newDate;
 };
-const sumMonths = (date, howManyMore = 1) => {
+const sumMonths = function (date) {
+  let howManyMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const newDate = new Date(date.getTime());
   newDate.setMonth(date.getMonth() + howManyMore);
   return newDate;
 };
-const sumYears = (date, howManyMore = 1) => {
+const sumYears = function (date) {
+  let howManyMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   const newDate = new Date(date.getTime());
   newDate.setFullYear(date.getFullYear() + howManyMore);
   return newDate;
@@ -188,11 +196,20 @@ const getDateValuesFromDate = day => {
   };
 };
 const getDateStringFromDay = day => {
-  const monthFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getMonth() + 1}`, 2); // months from 1-12
+  const monthFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getMonth() + 1), 2); // months from 1-12
 
-  const dayFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getDate()}`, 2);
-  const yearFromDay = stringHelpers.prependStringWithPlaceHolders(`${day.getFullYear()}`, 4);
-  return `${monthFromDay}/${dayFromDay}/${yearFromDay}`;
+  const dayFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getDate()), 2);
+  const yearFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(day.getFullYear()), 4);
+  return "".concat(monthFromDay, "/").concat(dayFromDay, "/").concat(yearFromDay);
+};
+const getTimeStringFromDay = day => {
+  const hoursNum = day.getHours();
+  const meridiem = hoursNum > 12 ? 'PM' : 'AM';
+  const twelveHourFormat = hoursNum > 12 ? hoursNum - 12 : hoursNum;
+  const minutesNum = day.getMinutes();
+  const hoursFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(twelveHourFormat), 2);
+  const minutesFromDay = stringHelpers.prependStringWithPlaceHolders("".concat(minutesNum), 2);
+  return "".concat(hoursFromDay, ":").concat(minutesFromDay, " ").concat(meridiem);
 };
 const getDayFromDateString = dateString => {
   const {
@@ -206,7 +223,7 @@ const getDayFromDateString = dateString => {
   if (monthNum !== -1 && dayNum !== -1 && yearNum !== -1 && isValidDayForTheMonth(monthNum - 1, yearNum, dayNum)) return new Date(yearNum, monthNum - 1, dayNum);
   return null;
 };
-const getMonthNameByMonthNumber = monthNumber => monthNames[monthNumber];
+const getMonthNameByMonthNumber = monthNumber => constants.monthNames[monthNumber];
 const isSameDateMoment = (dateA, dateB) => {
   var _dateA$getTime, _dateB$getTime;
 
@@ -241,6 +258,7 @@ exports.getHowManyDaysInMonth = getHowManyDaysInMonth;
 exports.getLastDayOfMonth = getLastDayOfMonth;
 exports.getLastXDaysFromPreviousMonth = getLastXDaysFromPreviousMonth;
 exports.getMonthNameByMonthNumber = getMonthNameByMonthNumber;
+exports.getTimeStringFromDay = getTimeStringFromDay;
 exports.getValidationDateStringMetaInfo = getValidationDateStringMetaInfo;
 exports.isLeapYear = isLeapYear;
 exports.isSameDateMoment = isSameDateMoment;

package/cjs/controlled-date-time-picker/utils/dateTimeHelpers.js

@@ -2,6 +2,11 @@
 
 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 dateHelpers = require('./dateHelpers.js');
 var timeHelpers = require('./timeHelpers.js');
@@ -12,7 +17,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const getValidatioDateTimeStringMetaInfo = (dateString, timeString, validators) => _objectSpread(_objectSpread({}, dateHelpers.getValidationDateStringMetaInfo(dateString, validators.getIsOutOfRangeDay, validators.getIsDisabledDay)), timeHelpers.getValidationTimeStringMetaInfo(timeString, validators.getIsDisabledTime));
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const getValidationDateTimeStringMetaInfo = (dateString, timeString, validators) => _objectSpread(_objectSpread({}, dateHelpers.getValidationDateStringMetaInfo(dateString, validators.getIsOutOfRangeDay, validators.getIsDisabledDay)), timeHelpers.getValidationTimeStringMetaInfo(timeString, validators.getIsDisabledTime));
 
-exports.getValidatioDateTimeStringMetaInfo = getValidatioDateTimeStringMetaInfo;
+exports.getValidationDateTimeStringMetaInfo = getValidationDateTimeStringMetaInfo;

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

@@ -14,7 +14,7 @@ const useGetMonthYearFromDateStringOrEmptyStartingMonth = () => {
     }
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return React.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/cjs/controlled-date-time-picker/utils/stringHelpers.js

@@ -2,28 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.string.replace.js');
+var constants = require('./constants.js');
+var numberHelpers = require('./numberHelpers.js');
 
 /* eslint-disable max-lines */
-const prependStringWithPlaceHolders = (val, finalLength, placeholder = '0') => {
+
+const prependStringWithPlaceHolders = function (val, finalLength) {
+  let placeholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0';
   if (val.length === finalLength) return val;
   const stringAsAnArray = val.split('').reverse();
   return new Array(finalLength).fill(placeholder).map((_c, i) => stringAsAnArray[i] ? stringAsAnArray[i] : placeholder).reverse().join('');
 };
-const fillStringWithPlaceHolders = (val, finalLength, placeholder = '_') => {
+const fillStringWithPlaceHolders = function (val, finalLength) {
+  let placeholder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '_';
   if (val.length === finalLength) return val;
   const stringAsAnArray = val.split('');
   return new Array(finalLength).fill(placeholder).map((_c, i) => stringAsAnArray[i] ? stringAsAnArray[i] : placeholder).join('');
 };
-const getFormattedDateString = ({
-  month,
-  day,
-  year
-}) => {
+const getFormattedDateString = _ref => {
+  let {
+    month,
+    day,
+    year
+  } = _ref;
   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;
@@ -63,18 +72,19 @@ const isValidDateString = testString => {
   if (Number.parseInt(month, 10) > 12 || Number.parseInt(day, 10) > 31 || Number.parseInt(year, 10) > 9999) return false;
   return true;
 };
-const getFormattedTimeString = ({
-  hours,
-  minutes,
-  // seconds,
-  meridiem
-}) => {
+const getFormattedTimeString = _ref2 => {
+  let {
+    hours,
+    minutes,
+    // seconds,
+    meridiem
+  } = _ref2;
   const finalHour = fillStringWithPlaceHolders(hours, 2);
   const finalMinutes = fillStringWithPlaceHolders(minutes, 2); // const finalSeconds = fillStringWithPlaceHolders(seconds, 2); // <-- seconds format
 
   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;
@@ -82,7 +92,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;
@@ -114,10 +124,25 @@ const isValidTimeString = testString => {
   if (Number.parseInt(hours, 10) > 12 || Number.parseInt(minutes, 10) > 60) return false;
   return true;
 };
-const isIncompleteString = (testString, placeholder = '_') => testString === '' || testString.includes(placeholder);
+const isIncompleteString = function (testString) {
+  let placeholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_';
+  return testString === '' || testString.includes(placeholder);
+};
 const isEmptyDateStringMask = testString => testString === '__/__/____';
 const isEmptyTimeStringMask = testString => testString === '__:__ __';
 const isEmptyDateTimeStringMask = testString => testString === '__/__/____ __:__ __';
+const getAriaDayFromDateString = dateString => {
+  const {
+    month: monthString,
+    day: dayString,
+    year: yearString
+  } = deconstructValuesFromDateString(dateString);
+  const monthNum = numberHelpers.convertToPositiveNumberIfPossible(monthString);
+  const dayNum = numberHelpers.convertToPositiveNumberIfPossible(dayString);
+  const yearNum = numberHelpers.convertToPositiveNumberIfPossible(yearString);
+  if (monthNum === -1 || dayNum === -1 || yearNum === -1) return '';
+  return "".concat(constants.monthNames[monthNum - 1], " ").concat(constants.announcableCardinalDays[dayNum], " ").concat(yearNum);
+};
 
 exports.dateTimeToDate = dateTimeToDate;
 exports.dateTimeToTime = dateTimeToTime;
@@ -125,6 +150,7 @@ exports.deconstructTimeValues = deconstructTimeValues;
 exports.deconstructValuesFromDateString = deconstructValuesFromDateString;
 exports.deconstructValuesFromTimeString = deconstructValuesFromTimeString;
 exports.fillStringWithPlaceHolders = fillStringWithPlaceHolders;
+exports.getAriaDayFromDateString = getAriaDayFromDateString;
 exports.getFormattedDateString = getFormattedDateString;
 exports.getFormattedTimeString = getFormattedTimeString;
 exports.isEmptyDateStringMask = isEmptyDateStringMask;

package/cjs/controlled-date-time-picker/utils/timeHelpers.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var stringHelpers = require('./stringHelpers.js');
 
-const getValidationTimeStringMetaInfo = (timeString, getIsDisabledTime = timeS => false) => {
+const getValidationTimeStringMetaInfo = function (timeString) {
+  let getIsDisabledTime = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : timeS => false;
   const metaInfo = {};
 
   if (!stringHelpers.isIncompleteString(timeString)) {

package/cjs/controlled-toggle/ControlledToggle.js

@@ -4,9 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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.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 React = require('react');
-var propTypes = require('./propTypes.js');
+var uid = require('uid');
 var reactDesc = require('react-desc');
+var propTypes = require('./propTypes.js');
 var styles = require('./styles.js');
 var defaultProps = require('./defaultProps.js');
 var addTooltipOnReadOnly = require('./utils/addTooltipOnReadOnly.js');
@@ -19,26 +26,29 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-const DSControlledToggle = ({
-  labelOn,
-  labelOff,
-  name,
-  value,
-  checked,
-  onClick,
-  size,
-  readOnly,
-  active,
-  disabled,
-  containerProps
-}) => {
+const DSControlledToggle = _ref => {
+  let {
+    labelOn,
+    labelOff,
+    name,
+    value,
+    checked,
+    onChange,
+    size,
+    readOnly,
+    active,
+    disabled,
+    containerProps,
+    id
+  } = _ref;
   const [isLongerTextRendering, setIsLongerTextRendering] = React.useState(false);
   const [width, setWidth] = React.useState(0);
   const labelTextRef = React.useRef(null);
   const widthTextRef = React.useRef(null);
   const longerText = React.useMemo(() => labelOn.length > labelOff.length ? labelOn : labelOff, [labelOff, labelOn]);
+  const instanceUID = React.useMemo(() => uid.uid(5), []);
   React.useEffect(() => {
     if (labelTextRef.current) {
       setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
@@ -49,43 +59,49 @@ const DSControlledToggle = ({
       setWidth(widthTextRef.current.clientWidth);
     }
   }, [widthTextRef]);
-  const handleClick = React.useCallback(() => {
+  const handleOnChange = React.useCallback(() => {
     if (disabled || readOnly) return;
-    onClick();
-  }, [disabled, readOnly, onClick]);
+    onChange();
+  }, [disabled, readOnly, onChange]);
   const handleKeyDown = React.useCallback(e => {
-    if (disabled || readOnly) return;
-    if (e.key === ' ' || e.key === 'Enter') onClick();
-  }, [disabled, readOnly, onClick]);
+    if (disabled || readOnly) {
+      e.preventDefault();
+    }
+
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onChange();
+    }
+  }, [disabled, onChange, readOnly]);
   return addTooltipOnReadOnly.addTooltipOnReadOnly( /*#__PURE__*/jsxRuntime.jsxs(styles.StyledContainer, _objectSpread(_objectSpread({
-    "aria-disabled": disabled,
-    "aria-checked": checked,
-    role: "checkbox",
-    checked: checked,
     size: size,
-    tabIndex: 0,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
     "data-testid": "ds-controlled-toggle"
   }, containerProps), {}, {
-    children: [/*#__PURE__*/_jsx__default['default'](styles.StyledInput, {
+    children: [/*#__PURE__*/_jsx__default["default"](styles.StyledInput, {
       type: "checkbox",
-      id: "checkbox",
       name: name,
       value: value,
-      "data-testid": "ds-controlled-toggle-checkbox"
-    }), /*#__PURE__*/_jsx__default['default'](styles.StyledLabel, {
-      htmlFor: "checkbox",
+      checked: checked,
+      "data-testid": "ds-controlled-toggle-checkbox",
+      id: id || instanceUID,
+      "aria-disabled": disabled,
+      "aria-checked": checked,
+      tabIndex: 0,
+      onChange: handleOnChange,
+      onKeyDown: handleKeyDown
+    }), /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
       checked: checked,
       size: size,
       width: width
-    }, void 0, /*#__PURE__*/_jsx__default['default'](styles.StyledVisibleContent, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledVisibleContent, {
       checked: checked,
       size: size,
       readOnly: readOnly,
       active: active,
-      disabled: disabled
-    }, void 0, /*#__PURE__*/_jsx__default['default'](styles.StyledCircle, {
+      disabled: disabled,
+      htmlFor: id ? undefined : instanceUID,
+      as: id ? 'p' : 'label'
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCircle, {
       checked: checked,
       size: size,
       readOnly: readOnly,

package/cjs/controlled-toggle/propTypes.js

@@ -10,12 +10,13 @@ const propTypes = {
   value: reactDesc.PropTypes.string.description('Value attribute for toggle'),
   name: reactDesc.PropTypes.string.description('Name attribute for toggle'),
   checked: reactDesc.PropTypes.bool.description('Wether the toggle is checked or not'),
-  onClick: reactDesc.PropTypes.func.description('OnClick callback'),
+  onchange: reactDesc.PropTypes.func.description('OnClick callback'),
   size: reactDesc.PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),
   readOnly: reactDesc.PropTypes.bool.description('Wether the toggle is readOnly or not'),
   active: reactDesc.PropTypes.bool.description('Wether the toggle has active styles or not'),
   disabled: reactDesc.PropTypes.bool.description('Wether the toggle is disabled or not'),
-  containerProps: reactDesc.PropTypes.shape({}).description('Set of properties attached to the main container')
+  containerProps: reactDesc.PropTypes.shape({}).description('Set of properties attached to the main container'),
+  id: reactDesc.PropTypes.string.description('Unique id.')
 };
 
 exports.propTypes = propTypes;