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

package/time-picker/time-picker.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,170 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
-
-var _TimePicker = _interopRequireDefault(require("carbon-components-react/lib/components/TimePicker/TimePicker.js"));
-
-var _TimePickerSelect = _interopRequireDefault(require("carbon-components-react/lib/components/TimePickerSelect/TimePickerSelect.js"));
-
-var _SelectItem = _interopRequireDefault(require("carbon-components-react/lib/components/SelectItem/SelectItem.js"));
-
-var _prepareProps = _interopRequireDefault(require("../prepare-props"));
-
-var _helperTextBlock = _interopRequireDefault(require("../helper-text-block/helper-text-block"));
-
-var TimePicker = function TimePicker(props) {
-  var _timezones$;
-
-  var _useFieldApi = (0, _useFieldApi2["default"])((0, _prepareProps["default"])(props)),
-      input = _useFieldApi.input,
-      meta = _useFieldApi.meta,
-      twelveHoursFormat = _useFieldApi.twelveHoursFormat,
-      timezones = _useFieldApi.timezones,
-      validateOnMount = _useFieldApi.validateOnMount,
-      helperText = _useFieldApi.helperText,
-      WrapperProps = _useFieldApi.WrapperProps,
-      rest = (0, _objectWithoutProperties2["default"])(_useFieldApi, ["input", "meta", "twelveHoursFormat", "timezones", "validateOnMount", "helperText", "WrapperProps"]);
-
-  var _useState = (0, _react.useState)(timezones ? (_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value : ''),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      timezone = _useState2[0],
-      selectTimezone = _useState2[1];
-
-  var _useState3 = (0, _react.useState)('AM'),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      format = _useState4[0],
-      selectFormat = _useState4[1];
-
-  var isMounted = (0, _react.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 = (0, _slicedToArray2["default"])(_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 = (0, _slicedToArray2["default"])(_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;
+var _timePickerString = _interopRequireDefault(require("../time-picker-string/time-picker-string"));
 
-      if (format === 'PM') {
-        hours = hours + 12;
-      }
-    } else {
-      hours = hours % 24;
-    }
+var _timePickerDate = _interopRequireDefault(require("../time-picker-date"));
 
-    minutes = minutes % 59;
-    var enhancedValue = new Date("Jan 1 2000 ".concat(hours, ":").concat(minutes, ":00 ").concat(timezone));
-    input.onChange(enhancedValue);
-    input.onBlur();
-  };
+var _excluded = ["useStringFormat"];
 
-  (0, _react.useEffect)(function () {
-    if (isMounted.current === true) {
-      enhnancedOnBlur();
-    } else {
-      isMounted.current = true;
-    }
-  }, [timezone, format]);
-  return /*#__PURE__*/_react["default"].createElement("div", WrapperProps, /*#__PURE__*/_react["default"].createElement(_TimePicker["default"], (0, _extends2["default"])({}, input, {
-    value: finalValue,
-    onBlur: enhnancedOnBlur,
-    key: input.name,
-    id: input.name,
-    invalid: Boolean(invalid),
-    invalidText: invalid || ''
-  }, rest), twelveHoursFormat && /*#__PURE__*/_react["default"].createElement(_TimePickerSelect["default"], {
-    labelText: "Period",
-    id: "".concat(rest.id || input.name, "-12h"),
-    onChange: function onChange(_ref4) {
-      var value = _ref4.target.value;
-      return selectFormat(value);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_SelectItem["default"], {
-    value: "AM",
-    text: "AM"
-  }), /*#__PURE__*/_react["default"].createElement(_SelectItem["default"], {
-    value: "PM",
-    text: "PM"
-  })), timezones && /*#__PURE__*/_react["default"].createElement(_TimePickerSelect["default"], {
-    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 = (0, _objectWithoutProperties2["default"])(_ref6, ["showAs"]);
-    return /*#__PURE__*/_react["default"].createElement(_SelectItem["default"], (0, _extends2["default"])({
-      key: tz.value,
-      text: tz.label
-    }, tz));
-  }))), /*#__PURE__*/_react["default"].createElement(_helperTextBlock["default"], {
-    helperText: !invalid && helperText,
-    warnText: warnText
-  }));
+var TimePicker = function TimePicker(_ref) {
+  var useStringFormat = _ref.useStringFormat,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return useStringFormat ? /*#__PURE__*/_react["default"].createElement(_timePickerString["default"], props) : /*#__PURE__*/_react["default"].createElement(_timePickerDate["default"], props);
 };
 
 TimePicker.propTypes = {
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  isRequired: _propTypes["default"].bool,
-  label: _propTypes["default"].node,
-  labelText: _propTypes["default"].node,
-  description: _propTypes["default"].node,
-  twelveHoursFormat: _propTypes["default"].bool,
-  timezones: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    value: _propTypes["default"].string.isRequired,
-    label: _propTypes["default"].node.isRequired,
-    showAs: _propTypes["default"].string.isRequired
-  })),
-  WrapperProps: _propTypes["default"].object
+  useStringFormat: _propTypes["default"].bool
 };
 var _default = TimePicker;
 exports["default"] = _default;

package/time-picker-base/index.d.ts

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

package/time-picker-base/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _timePickerBase["default"];
+  }
+});
+
+var _timePickerBase = _interopRequireWildcard(require("./time-picker-base"));
+
+Object.keys(_timePickerBase).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _timePickerBase[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _timePickerBase[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/time-picker-base/package.json

@@ -0,0 +1 @@
+{"main":"index.js","module":"../esm/time-picker-base","typings":"index.d.ts"}

package/time-picker-base/time-picker-base.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import { AnyObject, Input } from "@data-driven-forms/react-form-renderer";
+
+import { FormGroupProps } from "../form-group";
+
+import { TimePickerProps as CarbonTimePickerProps, SelectItemProps } from 'carbon-components-react';
+
+export interface Timezone extends SelectItemProps {
+    value: string;
+    label?: string;
+}
+
+interface InternalTimePickerBaseProps extends CarbonTimePickerProps, AnyObject {
+    twelveHoursFormat?: boolean;
+    timezones?: Timezone[];
+    input: Input<any>;
+    enhnancedOnBlur?: () => void;
+    enhancedOnChange?: (value: string) => void;
+    finalValue: any;
+    warnText?: ReactNode;
+    selectFormat: (value: 'AM' | 'PM') => void;
+    selectTimezone: (value: string) => void;
+}
+
+export type TimePickerBaseProps = InternalTimePickerBaseProps & FormGroupProps;
+
+declare const TimePickerBase: React.ComponentType<TimePickerBaseProps>;
+
+export default TimePickerBase;

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _TimePicker = _interopRequireDefault(require("carbon-components-react/lib/components/TimePicker/TimePicker.js"));
+
+var _TimePickerSelect = _interopRequireDefault(require("carbon-components-react/lib/components/TimePickerSelect/TimePickerSelect.js"));
+
+var _SelectItem = _interopRequireDefault(require("carbon-components-react/lib/components/SelectItem/SelectItem.js"));
+
+var _helperTextBlock = _interopRequireDefault(require("../helper-text-block/helper-text-block"));
+
+var _excluded = ["WrapperProps", "input", "enhnancedOnBlur", "enhancedOnChange", "finalValue", "invalid", "twelveHoursFormat", "timezones", "helperText", "warnText", "selectFormat", "selectTimezone"],
+    _excluded2 = ["showAs"];
+
+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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("div", WrapperProps, /*#__PURE__*/_react["default"].createElement(_TimePicker["default"], (0, _extends2["default"])({}, 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["default"].createElement(_TimePickerSelect["default"], {
+    labelText: "Period",
+    id: "".concat(rest.id || input.name, "-12h"),
+    onChange: function onChange(_ref2) {
+      var value = _ref2.target.value;
+      return selectFormat(value);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_SelectItem["default"], {
+    value: "AM",
+    text: "AM"
+  }), /*#__PURE__*/_react["default"].createElement(_SelectItem["default"], {
+    value: "PM",
+    text: "PM"
+  })), timezones && /*#__PURE__*/_react["default"].createElement(_TimePickerSelect["default"], {
+    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 = (0, _objectWithoutProperties2["default"])(_ref4, _excluded2);
+    return /*#__PURE__*/_react["default"].createElement(_SelectItem["default"], (0, _extends2["default"])({
+      key: tz.value,
+      text: tz.label
+    }, tz));
+  }))), /*#__PURE__*/_react["default"].createElement(_helperTextBlock["default"], {
+    helperText: !invalid && helperText,
+    warnText: warnText
+  }));
+};
+
+TimePickerBase.propTypes = {
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  label: _propTypes["default"].node,
+  labelText: _propTypes["default"].node,
+  description: _propTypes["default"].node,
+  twelveHoursFormat: _propTypes["default"].bool,
+  timezones: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    value: _propTypes["default"].string.isRequired,
+    label: _propTypes["default"].node.isRequired,
+    showAs: _propTypes["default"].string
+  })),
+  WrapperProps: _propTypes["default"].object,
+  input: _propTypes["default"].shape({
+    name: _propTypes["default"].string
+  }).isRequired,
+  enhnancedOnBlur: _propTypes["default"].func,
+  enhancedOnChange: _propTypes["default"].func,
+  finalValue: _propTypes["default"].any,
+  invalid: _propTypes["default"].node,
+  helperText: _propTypes["default"].node,
+  warnText: _propTypes["default"].node,
+  selectFormat: _propTypes["default"].func.isRequired,
+  selectTimezone: _propTypes["default"].func.isRequired
+};
+var _default = TimePickerBase;
+exports["default"] = _default;

package/time-picker-date/index.d.ts

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

package/time-picker-date/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _timePickerDate["default"];
+  }
+});
+
+var _timePickerDate = _interopRequireWildcard(require("./time-picker-date"));
+
+Object.keys(_timePickerDate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _timePickerDate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _timePickerDate[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/time-picker-date/package.json

@@ -0,0 +1 @@
+{"main":"index.js","module":"../esm/time-picker-date","typings":"index.d.ts"}

package/time-picker-date/time-picker-date.d.ts

@@ -0,0 +1,21 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+import { FormGroupProps } from "../form-group";
+
+import { TimePickerProps as CarbonTimePickerProps, SelectItemProps } from 'carbon-components-react';
+
+export interface Timezone extends SelectItemProps {
+    value: string;
+    label?: string;
+}
+
+interface InternalTimePickerProps extends CarbonTimePickerProps {
+    twelveHoursFormat?: boolean;
+    timezones?: Timezone[];
+}
+
+export type TimePickerDateProps = InternalTimePickerProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const TimePickerDate: React.ComponentType<TimePickerDateProps>;
+
+export default TimePickerDate;

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

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _useFieldApi2 = _interopRequireDefault(require("@data-driven-forms/react-form-renderer/use-field-api"));
+
+var _prepareProps = _interopRequireDefault(require("../prepare-props"));
+
+var _timePickerBase = _interopRequireDefault(require("../time-picker-base"));
+
+var _excluded = ["input", "meta", "twelveHoursFormat", "timezones", "validateOnMount", "helperText", "WrapperProps"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TimePickerDate = function TimePickerDate(props) {
+  var _timezones$;
+
+  var _useFieldApi = (0, _useFieldApi2["default"])((0, _prepareProps["default"])(props)),
+      input = _useFieldApi.input,
+      meta = _useFieldApi.meta,
+      twelveHoursFormat = _useFieldApi.twelveHoursFormat,
+      timezones = _useFieldApi.timezones,
+      validateOnMount = _useFieldApi.validateOnMount,
+      helperText = _useFieldApi.helperText,
+      WrapperProps = _useFieldApi.WrapperProps,
+      rest = (0, _objectWithoutProperties2["default"])(_useFieldApi, _excluded);
+
+  var _useState = (0, _react.useState)(timezones ? (_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value : ''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      timezone = _useState2[0],
+      selectTimezone = _useState2[1];
+
+  var _useState3 = (0, _react.useState)('AM'),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      format = _useState4[0],
+      selectFormat = _useState4[1];
+
+  var isMounted = (0, _react.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 = (0, _slicedToArray2["default"])(_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 = (0, _slicedToArray2["default"])(_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();
+  };
+
+  (0, _react.useEffect)(function () {
+    if (isMounted.current === true) {
+      enhnancedOnBlur();
+    } else {
+      isMounted.current = true;
+    }
+  }, [timezone, format]);
+  return /*#__PURE__*/_react["default"].createElement(_timePickerBase["default"], (0, _extends2["default"])({
+    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["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  isRequired: _propTypes["default"].bool,
+  label: _propTypes["default"].node,
+  labelText: _propTypes["default"].node,
+  description: _propTypes["default"].node,
+  twelveHoursFormat: _propTypes["default"].bool,
+  timezones: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    value: _propTypes["default"].string.isRequired,
+    label: _propTypes["default"].node.isRequired,
+    showAs: _propTypes["default"].string
+  })),
+  WrapperProps: _propTypes["default"].object
+};
+var _default = TimePickerDate;
+exports["default"] = _default;

package/time-picker-string/index.d.ts

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

package/time-picker-string/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _timePickerString["default"];
+  }
+});
+
+var _timePickerString = _interopRequireWildcard(require("./time-picker-string"));
+
+Object.keys(_timePickerString).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _timePickerString[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _timePickerString[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/time-picker-string/package.json

@@ -0,0 +1 @@
+{"main":"index.js","module":"../esm/time-picker-string","typings":"index.d.ts"}

package/time-picker-string/time-picker-string.d.ts

@@ -0,0 +1,21 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+import { FormGroupProps } from "../form-group";
+
+import { TimePickerProps as CarbonTimePickerProps, SelectItemProps } from 'carbon-components-react';
+
+export interface Timezone extends SelectItemProps {
+    value: string;
+    label?: string;
+}
+
+interface InternalTimePickerProps extends CarbonTimePickerProps {
+    twelveHoursFormat?: boolean;
+    timezones?: Timezone[];
+}
+
+export type TimePickerStringProps = InternalTimePickerProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const TimePickerString: React.ComponentType<TimePickerStringProps>;
+
+export default TimePickerString;