@draftbit/core 47.0.1-9fd6f2.2 → 47.0.1-ed6e56.2

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -352,6 +352,7 @@ const DatePicker = _ref => {
   }, /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
     value: getValidDate(),
     mode: mode,
+    displayMode: "default",
     isVisible: pickerVisible,
     toggleVisibility: toggleVisibility,
     onChange: (_event, data) => {

package/lib/commonjs/components/DatePicker/DatePickerComponent.js

@@ -5,22 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _datetimepicker = _interopRequireDefault(require("@react-native-community/datetimepicker"));
 var _reactNativeModalDatetimePicker = _interopRequireDefault(require("react-native-modal-datetime-picker"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DatePickerComponent = _ref => {
   let {
     value,
     onChange,
+    displayMode = "default",
     mode,
     toggleVisibility
   } = _ref;
-  return _reactNative.Platform.OS === "ios" || _reactNative.Platform.OS === "android" ? /*#__PURE__*/_react.default.createElement(_reactNativeModalDatetimePicker.default, {
+  return /*#__PURE__*/_react.default.createElement(_reactNativeModalDatetimePicker.default, {
     date: value,
     mode: mode,
     isVisible: true,
-    display: _reactNative.Platform.OS === "ios" ? "spinner" : "default",
+    display: displayMode,
     onCancel: () => {
       console.log("Picker cancelled before selecting anything.");
       toggleVisibility();
@@ -28,11 +27,6 @@ const DatePickerComponent = _ref => {
     onConfirm: data => {
       onChange(null, data);
     }
-  }) : /*#__PURE__*/_react.default.createElement(_datetimepicker.default, {
-    value: value,
-    mode: mode,
-    onChange: onChange,
-    display: "default"
   });
 };
 var _default = DatePickerComponent;

package/lib/commonjs/components/DatePicker/DatePickerComponent.web.js

@@ -43,7 +43,6 @@ const DatePickerComponent = _ref => {
       onChange(null, d);
     },
     onClose: () => toggleVisibility(),
-    variant: "dialog",
     TextFieldComponent: () => null
   })));
 };

package/lib/commonjs/components/DatePicker/DatePickerInput.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _dateformat = _interopRequireDefault(require("dateformat"));
+var _Portal = _interopRequireDefault(require("../Portal/Portal"));
+var _Touchable = _interopRequireDefault(require("../Touchable"));
+var _DatePickerComponent = _interopRequireDefault(require("./DatePickerComponent"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const DatePickerInput = _ref => {
+  let {
+    style,
+    date,
+    onDateChange = () => {},
+    defaultValue,
+    disabled = false,
+    mode = "date",
+    format,
+    androidDisplay = "default",
+    iosDisplay = "default",
+    webDisplay = "dialog",
+    placeholder,
+    ...props
+  } = _ref;
+  const [value, setValue] = React.useState(date || defaultValue);
+  React.useEffect(() => {
+    if (defaultValue != null) {
+      setValue(defaultValue);
+    }
+  }, [defaultValue]);
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const getValidDate = () => {
+    if (!value) {
+      return new Date();
+    }
+    return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
+  };
+  const formatDate = () => {
+    if (!value) return "";
+    let newDate = getValidDate();
+    if (format) return (0, _dateformat.default)(newDate, format);
+    if (mode === "time") {
+      return "".concat(newDate.toLocaleTimeString());
+    }
+    if (mode === "datetime") {
+      return "".concat(newDate.toLocaleString());
+    }
+    return "".concat(MONTHS[newDate.getMonth()], " ").concat(newDate.getDate(), ", ").concat(newDate.getFullYear());
+  };
+  const toggleVisibility = async () => {
+    setPickerVisible(!pickerVisible);
+    focused ? _handleBlur() : _handleFocus();
+  };
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  React.useEffect(() => {
+    setValue(date);
+  }, [date]);
+  const _handleFocus = () => {
+    if (disabled) {
+      return;
+    }
+    setFocused(true);
+  };
+  const _handleBlur = () => {
+    if (disabled) {
+      return;
+    }
+    setFocused(false);
+  };
+  return /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_Touchable.default, {
+    disabled: disabled,
+    onPress: toggleVisibility
+  }, /*#__PURE__*/React.createElement(_reactNative.TextInput, _extends({
+    value: formatDate(),
+    placeholder: placeholder,
+    editable: !disabled,
+    onFocus: _handleFocus,
+    onBlur: _handleBlur,
+    style: style
+  }, props))), pickerVisible && /*#__PURE__*/React.createElement(_Portal.default, null, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: {
+      paddingTop: insets.top,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right
+    }
+  }, _reactNative.Platform.OS === "web" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
+    value: getValidDate(),
+    mode: mode,
+    isVisible: pickerVisible,
+    toggleVisibility: toggleVisibility,
+    onChange: (_event, data) => {
+      toggleVisibility();
+      setValue(data);
+      onDateChange(data);
+    }
+  }), _reactNative.Platform.OS === "ios" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
+    value: getValidDate(),
+    mode: mode,
+    displayMode: iosDisplay,
+    isVisible: pickerVisible,
+    toggleVisibility: toggleVisibility,
+    onChange: (_event, data) => {
+      toggleVisibility();
+      setValue(data);
+      onDateChange(data);
+    }
+  }), _reactNative.Platform.OS === "android" && /*#__PURE__*/React.createElement(_DatePickerComponent.default, {
+    value: getValidDate(),
+    mode: mode,
+    variant: webDisplay,
+    displayMode: androidDisplay,
+    isVisible: pickerVisible,
+    toggleVisibility: toggleVisibility,
+    onChange: (_event, data) => {
+      toggleVisibility();
+      setValue(data);
+      onDateChange(data);
+    }
+  }))));
+};
+var _default = DatePickerInput;
+exports.default = _default;

package/lib/module/components/DatePicker/DatePicker.js

@@ -343,6 +343,7 @@ const DatePicker = _ref => {
   }, /*#__PURE__*/React.createElement(DateTimePicker, {
     value: getValidDate(),
     mode: mode,
+    displayMode: "default",
     isVisible: pickerVisible,
     toggleVisibility: toggleVisibility,
     onChange: (_event, data) => {

package/lib/module/components/DatePicker/DatePickerComponent.js

@@ -1,19 +1,18 @@
 import React from "react";
-import { Platform } from "react-native";
-import DateTimePicker from "@react-native-community/datetimepicker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 const DatePickerComponent = _ref => {
   let {
     value,
     onChange,
+    displayMode = "default",
     mode,
     toggleVisibility
   } = _ref;
-  return Platform.OS === "ios" || Platform.OS === "android" ? /*#__PURE__*/React.createElement(DateTimePickerModal, {
+  return /*#__PURE__*/React.createElement(DateTimePickerModal, {
     date: value,
     mode: mode,
     isVisible: true,
-    display: Platform.OS === "ios" ? "spinner" : "default",
+    display: displayMode,
     onCancel: () => {
       console.log("Picker cancelled before selecting anything.");
       toggleVisibility();
@@ -21,11 +20,6 @@ const DatePickerComponent = _ref => {
     onConfirm: data => {
       onChange(null, data);
     }
-  }) : /*#__PURE__*/React.createElement(DateTimePicker, {
-    value: value,
-    mode: mode,
-    onChange: onChange,
-    display: "default"
   });
 };
 export default DatePickerComponent;

package/lib/module/components/DatePicker/DatePickerComponent.web.js

@@ -36,7 +36,6 @@ const DatePickerComponent = _ref => {
       onChange(null, d);
     },
     onClose: () => toggleVisibility(),
-    variant: "dialog",
     TextFieldComponent: () => null
   })));
 };

package/lib/module/components/DatePicker/DatePickerInput.js

@@ -0,0 +1,123 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from "react";
+import { View, TextInput, Platform } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import dateFormat from "dateformat";
+import Portal from "../Portal/Portal";
+import Touchable from "../Touchable";
+import DateTimePicker from "./DatePickerComponent";
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const DatePickerInput = _ref => {
+  let {
+    style,
+    date,
+    onDateChange = () => {},
+    defaultValue,
+    disabled = false,
+    mode = "date",
+    format,
+    androidDisplay = "default",
+    iosDisplay = "default",
+    webDisplay = "dialog",
+    placeholder,
+    ...props
+  } = _ref;
+  const [value, setValue] = React.useState(date || defaultValue);
+  React.useEffect(() => {
+    if (defaultValue != null) {
+      setValue(defaultValue);
+    }
+  }, [defaultValue]);
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const getValidDate = () => {
+    if (!value) {
+      return new Date();
+    }
+    return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
+  };
+  const formatDate = () => {
+    if (!value) return "";
+    let newDate = getValidDate();
+    if (format) return dateFormat(newDate, format);
+    if (mode === "time") {
+      return "".concat(newDate.toLocaleTimeString());
+    }
+    if (mode === "datetime") {
+      return "".concat(newDate.toLocaleString());
+    }
+    return "".concat(MONTHS[newDate.getMonth()], " ").concat(newDate.getDate(), ", ").concat(newDate.getFullYear());
+  };
+  const toggleVisibility = async () => {
+    setPickerVisible(!pickerVisible);
+    focused ? _handleBlur() : _handleFocus();
+  };
+  const insets = useSafeAreaInsets();
+  React.useEffect(() => {
+    setValue(date);
+  }, [date]);
+  const _handleFocus = () => {
+    if (disabled) {
+      return;
+    }
+    setFocused(true);
+  };
+  const _handleBlur = () => {
+    if (disabled) {
+      return;
+    }
+    setFocused(false);
+  };
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Touchable, {
+    disabled: disabled,
+    onPress: toggleVisibility
+  }, /*#__PURE__*/React.createElement(TextInput, _extends({
+    value: formatDate(),
+    placeholder: placeholder,
+    editable: !disabled,
+    onFocus: _handleFocus,
+    onBlur: _handleBlur,
+    style: style
+  }, props))), pickerVisible && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
+    style: {
+      paddingTop: insets.top,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right
+    }
+  }, Platform.OS === "web" && /*#__PURE__*/React.createElement(DateTimePicker, {
+    value: getValidDate(),
+    mode: mode,
+    isVisible: pickerVisible,
+    toggleVisibility: toggleVisibility,
+    onChange: (_event, data) => {
+      toggleVisibility();
+      setValue(data);
+      onDateChange(data);
+    }
+  }), Platform.OS === "ios" && /*#__PURE__*/React.createElement(DateTimePicker, {
+    value: getValidDate(),
+    mode: mode,
+    displayMode: iosDisplay,
+    isVisible: pickerVisible,
+    toggleVisibility: toggleVisibility,
+    onChange: (_event, data) => {
+      toggleVisibility();
+      setValue(data);
+      onDateChange(data);
+    }
+  }), Platform.OS === "android" && /*#__PURE__*/React.createElement(DateTimePicker, {
+    value: getValidDate(),
+    mode: mode,
+    variant: webDisplay,
+    displayMode: androidDisplay,
+    isVisible: pickerVisible,
+    toggleVisibility: toggleVisibility,
+    onChange: (_event, data) => {
+      toggleVisibility();
+      setValue(data);
+      onDateChange(data);
+    }
+  }))));
+};
+export default DatePickerInput;

package/lib/typescript/src/components/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EAKf,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAStD,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,KAAK,EAAE,KAAK,CAAC;IAMb,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,QAAQ,GACV,cAAc,CAAC;;;;AA+fjB,wBAAqC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EAKf,MAAM,cAAc,CAAC;AAStB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAStD,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,KAAK,EAAE,KAAK,CAAC;IAMb,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,QAAQ,GACV,cAAc,CAAC;;;;AAggBjB,wBAAqC"}

package/lib/typescript/src/components/DatePicker/DatePickerComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAE9E,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CA4BjE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"DatePickerComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAE9E,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAsBjE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/typescript/src/components/DatePicker/DatePickerComponent.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerComponent.web.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponent.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiD9E,wBAA8C"}
+{"version":3,"file":"DatePickerComponent.web.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponent.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,wBAAwB,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgD9E,wBAA8C"}

package/lib/typescript/src/components/DatePicker/DatePickerComponentType.d.ts

@@ -5,6 +5,8 @@ export interface DatePickerComponentProps {
     mode: "date" | "time" | "datetime";
     toggleVisibility: () => void;
     isVisible?: boolean;
+    displayMode?: "default" | "compact" | "inline" | "spinner" | "clock" | "calendar" | undefined;
+    variant?: "dialog" | "inline" | undefined;
     theme?: typeof theme;
 }
 //# sourceMappingURL=DatePickerComponentType.d.ts.map

package/lib/typescript/src/components/DatePicker/DatePickerComponentType.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerComponentType.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponentType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAE9C,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACnC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC;CACtB"}
+{"version":3,"file":"DatePickerComponentType.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerComponentType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAE9C,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACnC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EACR,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,SAAS,CAAC;IACd,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC;CACtB"}

package/lib/typescript/src/components/DatePicker/DatePickerInput.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { StyleProp, ViewStyle, TextInputProps } from "react-native";
+declare type Props = {
+    style?: StyleProp<ViewStyle>;
+    date?: Date;
+    format?: string;
+    onDateChange?: (data?: Date) => void;
+    defaultValue?: Date;
+    disabled?: boolean;
+    mode?: "date" | "time" | "datetime";
+    androidDisplay: "default" | "spinner" | "calendar" | "clock";
+    iosDisplay: "default" | "spinner" | "compact" | "inline";
+    webDisplay: "dialog" | "inline";
+    placeholder?: string;
+} & TextInputProps;
+declare const DatePickerInput: React.FC<React.PropsWithChildren<Props>>;
+export default DatePickerInput;
+//# sourceMappingURL=DatePickerInput.d.ts.map

package/lib/typescript/src/components/DatePicker/DatePickerInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/DatePicker/DatePickerInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,SAAS,EACT,SAAS,EACT,cAAc,EAGf,MAAM,cAAc,CAAC;AAQtB,aAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;IACpC,cAAc,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC7D,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzD,UAAU,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,cAAc,CAAC;AAiBnB,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAmJ7D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.0.1-9fd6f2.2+9fd6f28",
+  "version": "47.0.1-ed6e56.2+ed6e56c",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,9 +41,9 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^47.0.1-9fd6f2.2+9fd6f28",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/pickers": "^3.2.10",
+    "@draftbit/types": "^47.0.1-ed6e56.2+ed6e56c",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/pickers": "^3.3.10",
     "@react-native-community/slider": "4.2.4",
     "@react-native-picker/picker": "2.4.8",
     "@shopify/flash-list": "1.3.1",
@@ -53,7 +53,7 @@
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
-    "react-native-modal-datetime-picker": "^13.0.0",
+    "react-native-modal-datetime-picker": "^14.0.1",
     "react-native-svg": "13.4.0",
     "react-native-typography": "^1.4.1",
     "react-native-web-swiper": "^2.2.3"
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "9fd6f289b4dc38787b6d90b479ef5977e85ba64e"
+  "gitHead": "ed6e56cc6bfd9104faf3be1257309cbd08796cf5"
 }

package/src/components/DatePicker/DatePicker.js

@@ -333,7 +333,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                             paddingRight: insets.right,
                         },
                     ] },
-                    React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                    React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, displayMode: "default", isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
                             toggleVisibility();
                             setValue(data);
                             onDateChange(data);

package/src/components/DatePicker/DatePicker.tsx

@@ -515,6 +515,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               <DateTimePicker
                 value={getValidDate()}
                 mode={mode}
+                displayMode="default"
                 isVisible={pickerVisible}
                 toggleVisibility={toggleVisibility}
                 onChange={(_event: any, data: any) => {

package/src/components/DatePicker/DatePickerComponent.js

@@ -1,13 +1,11 @@
 import React from "react";
-import { Platform } from "react-native";
-import DateTimePicker from "@react-native-community/datetimepicker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
-const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, }) => {
-    return Platform.OS === "ios" || Platform.OS === "android" ? (React.createElement(DateTimePickerModal, { date: value, mode: mode, isVisible: true, display: Platform.OS === "ios" ? "spinner" : "default", onCancel: () => {
+const DatePickerComponent = ({ value, onChange, displayMode = "default", mode, toggleVisibility, }) => {
+    return (React.createElement(DateTimePickerModal, { date: value, mode: mode, isVisible: true, display: displayMode, onCancel: () => {
             console.log("Picker cancelled before selecting anything.");
             toggleVisibility();
         }, onConfirm: (data) => {
             onChange(null, data);
-        } })) : (React.createElement(DateTimePicker, { value: value, mode: mode, onChange: onChange, display: "default" }));
+        } }));
 };
 export default DatePickerComponent;

package/src/components/DatePicker/DatePickerComponent.tsx

@@ -1,21 +1,20 @@
 import React from "react";
-import { Platform } from "react-native";
-import DateTimePicker from "@react-native-community/datetimepicker";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 import { DatePickerComponentProps as Props } from "./DatePickerComponentType";
 
 const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
   value,
   onChange,
+  displayMode = "default",
   mode,
   toggleVisibility,
 }) => {
-  return Platform.OS === "ios" || Platform.OS === "android" ? (
+  return (
     <DateTimePickerModal
       date={value}
       mode={mode}
       isVisible={true}
-      display={Platform.OS === "ios" ? "spinner" : "default"}
+      display={displayMode}
       onCancel={() => {
         console.log("Picker cancelled before selecting anything.");
         toggleVisibility();
@@ -24,13 +23,6 @@ const DatePickerComponent: React.FC<React.PropsWithChildren<Props>> = ({
         onChange(null, data);
       }}
     />
-  ) : (
-    <DateTimePicker
-      value={value}
-      mode={mode}
-      onChange={onChange}
-      display={"default"}
-    />
   );
 };
 

package/src/components/DatePicker/DatePickerComponent.web.js

@@ -25,6 +25,6 @@ const DatePickerComponent = ({ value, onChange, mode, toggleVisibility, isVisibl
             React.createElement(Picker, { value: value, open: isVisible, onChange: (d) => {
                     toggleVisibility();
                     onChange(null, d);
-                }, onClose: () => toggleVisibility(), variant: "dialog", TextFieldComponent: () => null }))));
+                }, onClose: () => toggleVisibility(), TextFieldComponent: () => null }))));
 };
 export default withTheme(DatePickerComponent);

package/src/components/DatePicker/DatePickerComponent.web.tsx

@@ -48,7 +48,6 @@ const DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
             onChange(null, d);
           }}
           onClose={() => toggleVisibility()}
-          variant="dialog"
           TextFieldComponent={() => null}
         />
       </ThemeProvider>

package/src/components/DatePicker/DatePickerComponentType.ts

@@ -6,5 +6,14 @@ export interface DatePickerComponentProps {
   mode: "date" | "time" | "datetime";
   toggleVisibility: () => void;
   isVisible?: boolean;
+  displayMode?:
+    | "default"
+    | "compact"
+    | "inline"
+    | "spinner"
+    | "clock"
+    | "calendar"
+    | undefined;
+  variant?: "dialog" | "inline" | undefined;
   theme?: typeof theme;
 }

package/src/components/DatePicker/DatePickerInput.js

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { View, TextInput, Platform, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import dateFormat from "dateformat";
+import Portal from "../Portal/Portal";
+import Touchable from "../Touchable";
+import DateTimePicker from "./DatePickerComponent";
+const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const DatePickerInput = ({ style, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, androidDisplay = "default", iosDisplay = "default", webDisplay = "dialog", placeholder, ...props }) => {
+    const [value, setValue] = React.useState(date || defaultValue);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setValue(defaultValue);
+        }
+    }, [defaultValue]);
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const getValidDate = () => {
+        if (!value) {
+            return new Date();
+        }
+        return typeof (value === null || value === void 0 ? void 0 : value.getMonth) === "function" ? value : new Date();
+    };
+    const formatDate = () => {
+        if (!value)
+            return "";
+        let newDate = getValidDate();
+        if (format)
+            return dateFormat(newDate, format);
+        if (mode === "time") {
+            return `${newDate.toLocaleTimeString()}`;
+        }
+        if (mode === "datetime") {
+            return `${newDate.toLocaleString()}`;
+        }
+        return `${MONTHS[newDate.getMonth()]} ${newDate.getDate()}, ${newDate.getFullYear()}`;
+    };
+    const toggleVisibility = async () => {
+        setPickerVisible(!pickerVisible);
+        focused ? _handleBlur() : _handleFocus();
+    };
+    const insets = useSafeAreaInsets();
+    React.useEffect(() => {
+        setValue(date);
+    }, [date]);
+    const _handleFocus = () => {
+        if (disabled) {
+            return;
+        }
+        setFocused(true);
+    };
+    const _handleBlur = () => {
+        if (disabled) {
+            return;
+        }
+        setFocused(false);
+    };
+    return (React.createElement(View, null,
+        React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
+            React.createElement(TextInput, { value: formatDate(), placeholder: placeholder, editable: !disabled, onFocus: _handleFocus, onBlur: _handleBlur, style: style, ...props })),
+        pickerVisible && (React.createElement(Portal, null,
+            React.createElement(View, { style: {
+                    paddingTop: insets.top,
+                    paddingBottom: insets.bottom,
+                    paddingLeft: insets.left,
+                    paddingRight: insets.right,
+                } },
+                Platform.OS === "web" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                        toggleVisibility();
+                        setValue(data);
+                        onDateChange(data);
+                    } })),
+                Platform.OS === "ios" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, displayMode: iosDisplay, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                        toggleVisibility();
+                        setValue(data);
+                        onDateChange(data);
+                    } })),
+                Platform.OS === "android" && (React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, variant: webDisplay, displayMode: androidDisplay, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
+                        toggleVisibility();
+                        setValue(data);
+                        onDateChange(data);
+                    } })))))));
+};
+export default DatePickerInput;

package/src/components/DatePicker/DatePickerInput.tsx

@@ -0,0 +1,195 @@
+import * as React from "react";
+import {
+  View,
+  StyleProp,
+  ViewStyle,
+  TextInputProps,
+  TextInput,
+  Platform,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import dateFormat from "dateformat";
+import Portal from "../Portal/Portal";
+import Touchable from "../Touchable";
+import DateTimePicker from "./DatePickerComponent";
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  date?: Date;
+  format?: string;
+  onDateChange?: (data?: Date) => void;
+  defaultValue?: Date;
+  disabled?: boolean;
+  mode?: "date" | "time" | "datetime";
+  androidDisplay: "default" | "spinner" | "calendar" | "clock";
+  iosDisplay: "default" | "spinner" | "compact" | "inline";
+  webDisplay: "dialog" | "inline";
+  placeholder?: string;
+} & TextInputProps;
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const DatePickerInput: React.FC<React.PropsWithChildren<Props>> = ({
+  style,
+  date,
+  onDateChange = () => {},
+  defaultValue,
+  disabled = false,
+  mode = "date",
+  format,
+  androidDisplay = "default",
+  iosDisplay = "default",
+  webDisplay = "dialog",
+  placeholder,
+  ...props
+}) => {
+  const [value, setValue] = React.useState<any>(date || defaultValue);
+
+  React.useEffect(() => {
+    if (defaultValue != null) {
+      setValue(defaultValue);
+    }
+  }, [defaultValue]);
+
+  const [pickerVisible, setPickerVisible] = React.useState(false);
+  const [focused, setFocused] = React.useState<boolean>(false);
+
+  const getValidDate = (): Date => {
+    if (!value) {
+      return new Date();
+    }
+    return typeof value?.getMonth === "function" ? value : new Date();
+  };
+
+  const formatDate = (): string => {
+    if (!value) return "";
+    let newDate = getValidDate();
+
+    if (format) return dateFormat(newDate, format);
+
+    if (mode === "time") {
+      return `${newDate.toLocaleTimeString()}`;
+    }
+
+    if (mode === "datetime") {
+      return `${newDate.toLocaleString()}`;
+    }
+
+    return `${
+      MONTHS[newDate.getMonth()]
+    } ${newDate.getDate()}, ${newDate.getFullYear()}`;
+  };
+
+  const toggleVisibility = async () => {
+    setPickerVisible(!pickerVisible);
+    focused ? _handleBlur() : _handleFocus();
+  };
+
+  const insets = useSafeAreaInsets();
+
+  React.useEffect(() => {
+    setValue(date);
+  }, [date]);
+
+  const _handleFocus = () => {
+    if (disabled) {
+      return;
+    }
+
+    setFocused(true);
+  };
+
+  const _handleBlur = () => {
+    if (disabled) {
+      return;
+    }
+    setFocused(false);
+  };
+
+  return (
+    <View>
+      <Touchable disabled={disabled} onPress={toggleVisibility}>
+        <TextInput
+          value={formatDate()}
+          placeholder={placeholder}
+          editable={!disabled}
+          onFocus={_handleFocus}
+          onBlur={_handleBlur}
+          style={style}
+          {...props}
+        />
+      </Touchable>
+      {pickerVisible && (
+        <Portal>
+          <View
+            style={{
+              paddingTop: insets.top,
+              paddingBottom: insets.bottom,
+              paddingLeft: insets.left,
+              paddingRight: insets.right,
+            }}
+          >
+            {Platform.OS === "web" && (
+              <DateTimePicker
+                value={getValidDate()}
+                mode={mode}
+                isVisible={pickerVisible}
+                toggleVisibility={toggleVisibility}
+                onChange={(_event: any, data: any) => {
+                  toggleVisibility();
+                  setValue(data);
+                  onDateChange(data);
+                }}
+              />
+            )}
+            {Platform.OS === "ios" && (
+              <DateTimePicker
+                value={getValidDate()}
+                mode={mode}
+                displayMode={iosDisplay}
+                isVisible={pickerVisible}
+                toggleVisibility={toggleVisibility}
+                onChange={(_event: any, data: any) => {
+                  toggleVisibility();
+                  setValue(data);
+                  onDateChange(data);
+                }}
+              />
+            )}
+            {Platform.OS === "android" && (
+              <DateTimePicker
+                value={getValidDate()}
+                mode={mode}
+                variant={webDisplay}
+                displayMode={androidDisplay}
+                isVisible={pickerVisible}
+                toggleVisibility={toggleVisibility}
+                onChange={(_event: any, data: any) => {
+                  toggleVisibility();
+                  setValue(data);
+                  onDateChange(data);
+                }}
+              />
+            )}
+          </View>
+        </Portal>
+      )}
+    </View>
+  );
+};
+
+export default DatePickerInput;