@data-driven-forms/carbon-component-mapper 3.11.4 → 3.13.0

package/esm/select/select.js

@@ -2,6 +2,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _typeof from "@babel/runtime/helpers/typeof";
+var _excluded = ["options"],
+    _excluded2 = ["invalidText", "hideSelectedOptions", "noOptionsMessage", "onInputChange", "options", "isFetching", "invalid", "isMulti", "classNamePrefix", "closeMenuOnSelect", "onChange", "originalOnChange", "carbonLabel", "placeholder", "isDisabled"],
+    _excluded3 = ["invalidText", "hideSelectedOptions", "noOptionsMessage", "onInputChange", "options", "isFetching", "invalid", "isMulti", "classNamePrefix", "closeMenuOnSelect", "onChange", "originalOnChange", "carbonLabel", "placeholder", "isDisabled"],
+    _excluded4 = ["isSearchable", "isClearable", "isDisabled", "isMulti", "invalidText", "hideSelectedOptions", "noOptionsMessage", "onInputChange", "options", "isFetching", "invalid", "classNamePrefix", "closeMenuOnSelect", "originalOnChange", "placeholder", "value"],
+    _excluded5 = ["isSearchable", "isClearable", "isDisabled", "isMulti", "invalidText", "hideSelectedOptions", "noOptionsMessage", "onInputChange", "options", "isFetching", "invalid", "classNamePrefix", "closeMenuOnSelect", "originalOnChange", "placeholder", "labelText", "onChange", "value"],
+    _excluded6 = ["isMulti", "isSearchable", "isClearable", "loadOptions", "input", "meta", "validateOnMount", "helperText"];
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
@@ -34,7 +40,7 @@ export var getMultiValue = function getMultiValue(value, options) {
 var renderOptions = function renderOptions(options) {
   return options.map(function (option, index) {
     var options = option.options,
-        rest = _objectWithoutProperties(option, ["options"]);
+        rest = _objectWithoutProperties(option, _excluded);
 
     if (options) {
       return /*#__PURE__*/React.createElement(SelectItemGroup, _extends({
@@ -66,7 +72,7 @@ var ClearedMultiSelectFilterable = function ClearedMultiSelectFilterable(_ref3)
       carbonLabel = _ref3.carbonLabel,
       placeholder = _ref3.placeholder,
       isDisabled = _ref3.isDisabled,
-      rest = _objectWithoutProperties(_ref3, ["invalidText", "hideSelectedOptions", "noOptionsMessage", "onInputChange", "options", "isFetching", "invalid", "isMulti", "classNamePrefix", "closeMenuOnSelect", "onChange", "originalOnChange", "carbonLabel", "placeholder", "isDisabled"]);
+      rest = _objectWithoutProperties(_ref3, _excluded2);
 
   return /*#__PURE__*/React.createElement(MultiSelect.Filterable, _extends({
     disabled: isDisabled
@@ -117,7 +123,7 @@ var ClearedMultiSelect = function ClearedMultiSelect(_ref4) {
       carbonLabel = _ref4.carbonLabel,
       placeholder = _ref4.placeholder,
       isDisabled = _ref4.isDisabled,
-      rest = _objectWithoutProperties(_ref4, ["invalidText", "hideSelectedOptions", "noOptionsMessage", "onInputChange", "options", "isFetching", "invalid", "isMulti", "classNamePrefix", "closeMenuOnSelect", "onChange", "originalOnChange", "carbonLabel", "placeholder", "isDisabled"]);
+      rest = _objectWithoutProperties(_ref4, _excluded3);
 
   return /*#__PURE__*/React.createElement(MultiSelect, _extends({
     disabled: isDisabled
@@ -173,7 +179,7 @@ var ClearedSelect = function ClearedSelect(_ref5) {
       originalOnChange = _ref5.originalOnChange,
       placeholder = _ref5.placeholder,
       value = _ref5.value,
-      rest = _objectWithoutProperties(_ref5, ["isSearchable", "isClearable", "isDisabled", "isMulti", "invalidText", "hideSelectedOptions", "noOptionsMessage", "onInputChange", "options", "isFetching", "invalid", "classNamePrefix", "closeMenuOnSelect", "originalOnChange", "placeholder", "value"]);
+      rest = _objectWithoutProperties(_ref5, _excluded4);
 
   return /*#__PURE__*/React.createElement(CarbonSelect, _extends({
     value: getSelectValue(value, isMulti),
@@ -242,7 +248,8 @@ var ClearedSelectSearchable = function ClearedSelectSearchable(_ref7) {
       placeholder = _ref7.placeholder,
       labelText = _ref7.labelText,
       onChange = _ref7.onChange,
-      rest = _objectWithoutProperties(_ref7, ["isSearchable", "isClearable", "isDisabled", "isMulti", "invalidText", "hideSelectedOptions", "noOptionsMessage", "onInputChange", "options", "isFetching", "invalid", "classNamePrefix", "closeMenuOnSelect", "originalOnChange", "placeholder", "labelText", "onChange"]);
+      value = _ref7.value,
+      rest = _objectWithoutProperties(_ref7, _excluded5);
 
   return /*#__PURE__*/React.createElement(ComboBox, _extends({
     disabled: isFetching
@@ -250,7 +257,7 @@ var ClearedSelectSearchable = function ClearedSelectSearchable(_ref7) {
     id: rest.name,
     invalid: Boolean(invalidText),
     invalidText: invalidText,
-    initialSelectedItem: getComboInitialValue(rest.value, options),
+    initialSelectedItem: getComboInitialValue(value, options),
     items: options,
     placeholder: placeholder,
     titleText: labelText,
@@ -277,7 +284,8 @@ ClearedSelectSearchable.propTypes = {
   isRequired: PropTypes.bool,
   isSearchable: PropTypes.bool,
   isClearable: PropTypes.bool,
-  labelText: PropTypes.string
+  labelText: PropTypes.string,
+  value: PropTypes.any
 };
 
 var Select = function Select(props) {
@@ -290,7 +298,7 @@ var Select = function Select(props) {
       meta = _useFieldApi.meta,
       validateOnMount = _useFieldApi.validateOnMount,
       helperText = _useFieldApi.helperText,
-      rest = _objectWithoutProperties(_useFieldApi, ["isMulti", "isSearchable", "isClearable", "loadOptions", "input", "meta", "validateOnMount", "helperText"]);
+      rest = _objectWithoutProperties(_useFieldApi, _excluded6);
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),

package/esm/slider/slider.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["input", "meta", "isRequired", "validateOnMount", "helperText", "WrapperProps"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
@@ -15,7 +16,7 @@ var Slider = function Slider(props) {
       validateOnMount = _useFieldApi.validateOnMount,
       helperText = _useFieldApi.helperText,
       WrapperProps = _useFieldApi.WrapperProps,
-      rest = _objectWithoutProperties(_useFieldApi, ["input", "meta", "isRequired", "validateOnMount", "helperText", "WrapperProps"]);
+      rest = _objectWithoutProperties(_useFieldApi, _excluded);
 
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   var warnText = (meta.touched || validateOnMount) && meta.warning;

package/esm/sub-form/sub-form.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["fields", "component", "title", "description", "TitleElement", "DescriptionElement", "TitleProps", "DescriptionProps", "HeaderProps"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -23,7 +24,7 @@ var SubForm = function SubForm(_ref) {
       TitleProps = _ref.TitleProps,
       DescriptionProps = _ref.DescriptionProps,
       HeaderProps = _ref.HeaderProps,
-      rest = _objectWithoutProperties(_ref, ["fields", "component", "title", "description", "TitleElement", "DescriptionElement", "TitleProps", "DescriptionProps", "HeaderProps"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var formOptions = useFormApi();
 
@@ -32,7 +33,7 @@ var SubForm = function SubForm(_ref) {
 
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: clsx(tab, rest.className)
-  }), (title || description) && /*#__PURE__*/React.createElement("div", HeaderProps, title && React.createElement(TitleElement, TitleProps, title), description && React.createElement(DescriptionElement, DescriptionProps, description)), formOptions.renderForm(fields, formOptions));
+  }), (title || description) && /*#__PURE__*/React.createElement("div", HeaderProps, title && /*#__PURE__*/React.createElement(TitleElement, TitleProps, title), description && /*#__PURE__*/React.createElement(DescriptionElement, DescriptionProps, description)), formOptions.renderForm(fields, formOptions));
 };
 
 SubForm.propTypes = {

package/esm/switch/switch.js

@@ -1,15 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["input", "meta", "onText", "offText", "validateOnMount", "helperText", "WrapperProps"],
+    _excluded2 = ["checked"];
 
-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 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(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; }
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import Toggle from "carbon-components-react/es/components/Toggle/Toggle.js";
+import Toggle from "carbon-components-react/es/components/Toggle/next/Toggle.js";
 import prepareProps from '../prepare-props';
 import HelperTextBlock from '../helper-text-block/helper-text-block';
 
@@ -24,13 +26,13 @@ var Switch = function Switch(props) {
       validateOnMount = _useFieldApi.validateOnMount,
       helperText = _useFieldApi.helperText,
       WrapperProps = _useFieldApi.WrapperProps,
-      rest = _objectWithoutProperties(_useFieldApi, ["input", "meta", "onText", "offText", "validateOnMount", "helperText", "WrapperProps"]);
+      rest = _objectWithoutProperties(_useFieldApi, _excluded);
 
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   var warnText = (meta.touched || validateOnMount) && meta.warning;
 
   var checked = input.checked,
-      inputRest = _objectWithoutProperties(input, ["checked"]);
+      inputRest = _objectWithoutProperties(input, _excluded2);
 
   return /*#__PURE__*/React.createElement("div", WrapperProps, /*#__PURE__*/React.createElement(Toggle, _extends({}, inputRest, {
     toggled: checked,

package/esm/tabs/tabs.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["fields", "component", "name", "TabWrapperProps"],
+    _excluded2 = ["fields", "name", "label", "title"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -20,7 +22,7 @@ var Tabs = function Tabs(_ref) {
       component = _ref.component,
       name = _ref.name,
       TabWrapperProps = _ref.TabWrapperProps,
-      props = _objectWithoutProperties(_ref, ["fields", "component", "name", "TabWrapperProps"]);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var formOptions = useFormApi();
 
@@ -32,7 +34,7 @@ var Tabs = function Tabs(_ref) {
         name = _ref2.name,
         label = _ref2.label,
         title = _ref2.title,
-        rest = _objectWithoutProperties(_ref2, ["fields", "name", "label", "title"]);
+        rest = _objectWithoutProperties(_ref2, _excluded2);
 
     return /*#__PURE__*/React.createElement(Tab, _extends({}, rest, {
       id: name,

package/esm/text-field/text-field.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["input", "meta", "validateOnMount", "labelText"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
@@ -13,7 +14,7 @@ var TextField = function TextField(props) {
       meta = _useFieldApi.meta,
       validateOnMount = _useFieldApi.validateOnMount,
       labelText = _useFieldApi.labelText,
-      rest = _objectWithoutProperties(_useFieldApi, ["input", "meta", "validateOnMount", "labelText"]);
+      rest = _objectWithoutProperties(_useFieldApi, _excluded);
 
   var Component = input.type === 'number' ? NumberInput : TextInput;
 

package/esm/textarea/textarea.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["input", "meta", "validateOnMount", "helperText"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
@@ -12,7 +13,7 @@ var Textarea = function Textarea(props) {
       meta = _useFieldApi.meta,
       validateOnMount = _useFieldApi.validateOnMount,
       helperText = _useFieldApi.helperText,
-      rest = _objectWithoutProperties(_useFieldApi, ["input", "meta", "validateOnMount", "helperText"]);
+      rest = _objectWithoutProperties(_useFieldApi, _excluded);
 
   var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   var text = (meta.touched || validateOnMount) && meta.warning || helperText;

package/esm/time-picker/time-picker.js

@@ -1,157 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import React, { useState, useEffect, useRef } from 'react';
+var _excluded = ["useStringFormat"];
+import React from 'react';
 import PropTypes from 'prop-types';
-import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import CarbonTimePicker from "carbon-components-react/es/components/TimePicker/TimePicker.js";
-import TimePickerSelect from "carbon-components-react/es/components/TimePickerSelect/TimePickerSelect.js";
-import SelectItem from "carbon-components-react/es/components/SelectItem/SelectItem.js";
-import prepareProps from '../prepare-props';
-import HelperTextBlock from '../helper-text-block/helper-text-block';
+import TimePickerString from '../time-picker-string/time-picker-string';
+import TimePickerDate from '../time-picker-date';
 
-var TimePicker = function TimePicker(props) {
-  var _timezones$;
+var TimePicker = function TimePicker(_ref) {
+  var useStringFormat = _ref.useStringFormat,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useFieldApi = useFieldApi(prepareProps(props)),
-      input = _useFieldApi.input,
-      meta = _useFieldApi.meta,
-      twelveHoursFormat = _useFieldApi.twelveHoursFormat,
-      timezones = _useFieldApi.timezones,
-      validateOnMount = _useFieldApi.validateOnMount,
-      helperText = _useFieldApi.helperText,
-      WrapperProps = _useFieldApi.WrapperProps,
-      rest = _objectWithoutProperties(_useFieldApi, ["input", "meta", "twelveHoursFormat", "timezones", "validateOnMount", "helperText", "WrapperProps"]);
-
-  var _useState = useState(timezones ? (_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value : ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      timezone = _useState2[0],
-      selectTimezone = _useState2[1];
-
-  var _useState3 = useState('AM'),
-      _useState4 = _slicedToArray(_useState3, 2),
-      format = _useState4[0],
-      selectFormat = _useState4[1];
-
-  var isMounted = useRef(false);
-  var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
-  var warnText = (meta.touched || validateOnMount) && meta.warning;
-  var finalValue = input.value;
-
-  if (input.value instanceof Date) {
-    var _timezones$find;
-
-    var _input$value$toLocale = input.value.toLocaleTimeString('en-us', {
-      hour12: !!twelveHoursFormat,
-      timeZone: timezones === null || timezones === void 0 ? void 0 : (_timezones$find = timezones.find(function (_ref) {
-        var value = _ref.value;
-        return value === timezone;
-      })) === null || _timezones$find === void 0 ? void 0 : _timezones$find.showAs
-    }).split(':'),
-        _input$value$toLocale2 = _slicedToArray(_input$value$toLocale, 2),
-        _input$value$toLocale3 = _input$value$toLocale2[0],
-        hours = _input$value$toLocale3 === void 0 ? '00' : _input$value$toLocale3,
-        _input$value$toLocale4 = _input$value$toLocale2[1],
-        minutes = _input$value$toLocale4 === void 0 ? '00' : _input$value$toLocale4;
-
-    finalValue = "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
-  }
-
-  var enhnancedOnBlur = function enhnancedOnBlur() {
-    var _finalValue;
-
-    var _ref2 = ((_finalValue = finalValue) === null || _finalValue === void 0 ? void 0 : _finalValue.split(':')) || [],
-        _ref3 = _slicedToArray(_ref2, 2),
-        _ref3$ = _ref3[0],
-        hours = _ref3$ === void 0 ? '00' : _ref3$,
-        _ref3$2 = _ref3[1],
-        minutes = _ref3$2 === void 0 ? '00' : _ref3$2;
-
-    if (!hours || isNaN(hours)) {
-      hours = '00';
-    }
-
-    if (!minutes || isNaN(minutes)) {
-      minutes = '00';
-    }
-
-    if (twelveHoursFormat) {
-      hours = hours % 12;
-
-      if (format === 'PM') {
-        hours = hours + 12;
-      }
-    } else {
-      hours = hours % 24;
-    }
-
-    minutes = minutes % 59;
-    var enhancedValue = new Date("Jan 1 2000 ".concat(hours, ":").concat(minutes, ":00 ").concat(timezone));
-    input.onChange(enhancedValue);
-    input.onBlur();
-  };
-
-  useEffect(function () {
-    if (isMounted.current === true) {
-      enhnancedOnBlur();
-    } else {
-      isMounted.current = true;
-    }
-  }, [timezone, format]);
-  return /*#__PURE__*/React.createElement("div", WrapperProps, /*#__PURE__*/React.createElement(CarbonTimePicker, _extends({}, input, {
-    value: finalValue,
-    onBlur: enhnancedOnBlur,
-    key: input.name,
-    id: input.name,
-    invalid: Boolean(invalid),
-    invalidText: invalid || ''
-  }, rest), twelveHoursFormat && /*#__PURE__*/React.createElement(TimePickerSelect, {
-    labelText: "Period",
-    id: "".concat(rest.id || input.name, "-12h"),
-    onChange: function onChange(_ref4) {
-      var value = _ref4.target.value;
-      return selectFormat(value);
-    }
-  }, /*#__PURE__*/React.createElement(SelectItem, {
-    value: "AM",
-    text: "AM"
-  }), /*#__PURE__*/React.createElement(SelectItem, {
-    value: "PM",
-    text: "PM"
-  })), timezones && /*#__PURE__*/React.createElement(TimePickerSelect, {
-    labelText: "Timezone",
-    id: "".concat(rest.id || input.name, "-timezones"),
-    onChange: function onChange(_ref5) {
-      var value = _ref5.target.value;
-      return selectTimezone(value);
-    }
-  }, timezones.map(function (_ref6) {
-    var showAs = _ref6.showAs,
-        tz = _objectWithoutProperties(_ref6, ["showAs"]);
-
-    return /*#__PURE__*/React.createElement(SelectItem, _extends({
-      key: tz.value,
-      text: tz.label
-    }, tz));
-  }))), /*#__PURE__*/React.createElement(HelperTextBlock, {
-    helperText: !invalid && helperText,
-    warnText: warnText
-  }));
+  return useStringFormat ? /*#__PURE__*/React.createElement(TimePickerString, props) : /*#__PURE__*/React.createElement(TimePickerDate, props);
 };
 
 TimePicker.propTypes = {
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  label: PropTypes.node,
-  labelText: PropTypes.node,
-  description: PropTypes.node,
-  twelveHoursFormat: PropTypes.bool,
-  timezones: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    label: PropTypes.node.isRequired,
-    showAs: PropTypes.string.isRequired
-  })),
-  WrapperProps: PropTypes.object
+  useStringFormat: PropTypes.bool
 };
 export default TimePicker;

package/esm/time-picker-base/index.js

@@ -0,0 +1,2 @@
+export { default } from './time-picker-base';
+export * from './time-picker-base';

package/esm/time-picker-base/time-picker-base.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["WrapperProps", "input", "enhnancedOnBlur", "enhancedOnChange", "finalValue", "invalid", "twelveHoursFormat", "timezones", "helperText", "warnText", "selectFormat", "selectTimezone"],
+    _excluded2 = ["showAs"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import CarbonTimePicker from "carbon-components-react/es/components/TimePicker/TimePicker.js";
+import TimePickerSelect from "carbon-components-react/es/components/TimePickerSelect/TimePickerSelect.js";
+import SelectItem from "carbon-components-react/es/components/SelectItem/SelectItem.js";
+import HelperTextBlock from '../helper-text-block/helper-text-block';
+
+var TimePickerBase = function TimePickerBase(_ref) {
+  var WrapperProps = _ref.WrapperProps,
+      input = _ref.input,
+      enhnancedOnBlur = _ref.enhnancedOnBlur,
+      enhancedOnChange = _ref.enhancedOnChange,
+      finalValue = _ref.finalValue,
+      invalid = _ref.invalid,
+      twelveHoursFormat = _ref.twelveHoursFormat,
+      timezones = _ref.timezones,
+      helperText = _ref.helperText,
+      warnText = _ref.warnText,
+      selectFormat = _ref.selectFormat,
+      selectTimezone = _ref.selectTimezone,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", WrapperProps, /*#__PURE__*/React.createElement(CarbonTimePicker, _extends({}, input, enhnancedOnBlur && {
+    onBlur: enhnancedOnBlur
+  }, enhancedOnChange && {
+    onChange: function onChange(e) {
+      return enhancedOnChange(e.target.value);
+    }
+  }, {
+    onBlur: enhnancedOnBlur,
+    value: finalValue,
+    key: input.name,
+    id: input.name,
+    invalid: Boolean(invalid),
+    invalidText: invalid || ''
+  }, rest), twelveHoursFormat && /*#__PURE__*/React.createElement(TimePickerSelect, {
+    labelText: "Period",
+    id: "".concat(rest.id || input.name, "-12h"),
+    onChange: function onChange(_ref2) {
+      var value = _ref2.target.value;
+      return selectFormat(value);
+    }
+  }, /*#__PURE__*/React.createElement(SelectItem, {
+    value: "AM",
+    text: "AM"
+  }), /*#__PURE__*/React.createElement(SelectItem, {
+    value: "PM",
+    text: "PM"
+  })), timezones && /*#__PURE__*/React.createElement(TimePickerSelect, {
+    labelText: "Timezone",
+    id: "".concat(rest.id || input.name, "-timezones"),
+    onChange: function onChange(_ref3) {
+      var value = _ref3.target.value;
+      return selectTimezone(value);
+    }
+  }, timezones.map(function (_ref4) {
+    var showAs = _ref4.showAs,
+        tz = _objectWithoutProperties(_ref4, _excluded2);
+
+    return /*#__PURE__*/React.createElement(SelectItem, _extends({
+      key: tz.value,
+      text: tz.label
+    }, tz));
+  }))), /*#__PURE__*/React.createElement(HelperTextBlock, {
+    helperText: !invalid && helperText,
+    warnText: warnText
+  }));
+};
+
+TimePickerBase.propTypes = {
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  labelText: PropTypes.node,
+  description: PropTypes.node,
+  twelveHoursFormat: PropTypes.bool,
+  timezones: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+    showAs: PropTypes.string
+  })),
+  WrapperProps: PropTypes.object,
+  input: PropTypes.shape({
+    name: PropTypes.string
+  }).isRequired,
+  enhnancedOnBlur: PropTypes.func,
+  enhancedOnChange: PropTypes.func,
+  finalValue: PropTypes.any,
+  invalid: PropTypes.node,
+  helperText: PropTypes.node,
+  warnText: PropTypes.node,
+  selectFormat: PropTypes.func.isRequired,
+  selectTimezone: PropTypes.func.isRequired
+};
+export default TimePickerBase;

package/esm/time-picker-date/index.js

@@ -0,0 +1,2 @@
+export { default } from './time-picker-date';
+export * from './time-picker-date';

package/esm/time-picker-date/time-picker-date.js

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["input", "meta", "twelveHoursFormat", "timezones", "validateOnMount", "helperText", "WrapperProps"];
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
+import prepareProps from '../prepare-props';
+import TimePickerBase from '../time-picker-base';
+
+var TimePickerDate = function TimePickerDate(props) {
+  var _timezones$;
+
+  var _useFieldApi = useFieldApi(prepareProps(props)),
+      input = _useFieldApi.input,
+      meta = _useFieldApi.meta,
+      twelveHoursFormat = _useFieldApi.twelveHoursFormat,
+      timezones = _useFieldApi.timezones,
+      validateOnMount = _useFieldApi.validateOnMount,
+      helperText = _useFieldApi.helperText,
+      WrapperProps = _useFieldApi.WrapperProps,
+      rest = _objectWithoutProperties(_useFieldApi, _excluded);
+
+  var _useState = useState(timezones ? (_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value : ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      timezone = _useState2[0],
+      selectTimezone = _useState2[1];
+
+  var _useState3 = useState('AM'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      format = _useState4[0],
+      selectFormat = _useState4[1];
+
+  var isMounted = useRef(false);
+  var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
+  var warnText = (meta.touched || validateOnMount) && meta.warning;
+  var finalValue = input.value;
+
+  if (input.value instanceof Date) {
+    var _timezones$find;
+
+    var _input$value$toLocale = input.value.toLocaleTimeString('en-us', {
+      hour12: !!twelveHoursFormat,
+      timeZone: timezones === null || timezones === void 0 ? void 0 : (_timezones$find = timezones.find(function (_ref) {
+        var value = _ref.value;
+        return value === timezone;
+      })) === null || _timezones$find === void 0 ? void 0 : _timezones$find.showAs
+    }).split(':'),
+        _input$value$toLocale2 = _slicedToArray(_input$value$toLocale, 2),
+        _input$value$toLocale3 = _input$value$toLocale2[0],
+        hours = _input$value$toLocale3 === void 0 ? '00' : _input$value$toLocale3,
+        _input$value$toLocale4 = _input$value$toLocale2[1],
+        minutes = _input$value$toLocale4 === void 0 ? '00' : _input$value$toLocale4;
+
+    finalValue = "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
+  }
+
+  var enhnancedOnBlur = function enhnancedOnBlur() {
+    var _finalValue;
+
+    var _ref2 = ((_finalValue = finalValue) === null || _finalValue === void 0 ? void 0 : _finalValue.split(':')) || [],
+        _ref3 = _slicedToArray(_ref2, 2),
+        _ref3$ = _ref3[0],
+        hours = _ref3$ === void 0 ? '00' : _ref3$,
+        _ref3$2 = _ref3[1],
+        minutes = _ref3$2 === void 0 ? '00' : _ref3$2;
+
+    if (!hours || isNaN(hours)) {
+      hours = '00';
+    }
+
+    if (!minutes || isNaN(minutes)) {
+      minutes = '00';
+    }
+
+    if (twelveHoursFormat) {
+      hours = hours % 12;
+
+      if (format === 'PM') {
+        hours = hours + 12;
+      }
+    } else {
+      hours = hours % 24;
+    }
+
+    minutes = minutes % 59;
+    var enhancedValue = new Date("Jan 1 2000 ".concat(hours, ":").concat(minutes, ":00 ").concat(timezone));
+    input.onChange(enhancedValue);
+    input.onBlur();
+  };
+
+  useEffect(function () {
+    if (isMounted.current === true) {
+      enhnancedOnBlur();
+    } else {
+      isMounted.current = true;
+    }
+  }, [timezone, format]);
+  return /*#__PURE__*/React.createElement(TimePickerBase, _extends({
+    WrapperProps: WrapperProps,
+    input: input,
+    enhnancedOnBlur: enhnancedOnBlur,
+    finalValue: finalValue,
+    invalid: invalid,
+    twelveHoursFormat: twelveHoursFormat,
+    timezones: timezones,
+    helperText: helperText,
+    warnText: warnText,
+    selectFormat: selectFormat,
+    selectTimezone: selectTimezone
+  }, rest));
+};
+
+TimePickerDate.propTypes = {
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  labelText: PropTypes.node,
+  description: PropTypes.node,
+  twelveHoursFormat: PropTypes.bool,
+  timezones: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+    showAs: PropTypes.string
+  })),
+  WrapperProps: PropTypes.object
+};
+export default TimePickerDate;

package/esm/time-picker-string/index.js

@@ -0,0 +1,2 @@
+export { default } from './time-picker-string';
+export * from './time-picker-string';