@telus-uds/components-web 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 14 Jun 2023 00:01:25 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Jun 2023 19:30:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.8.1
+
+Wed, 14 Jun 2023 19:30:33 GMT
+
+### Patches
+
+- datepicker prop bug fix (srikanthkhari@gmail.com)
+
 ## 2.8.0
 
-Wed, 14 Jun 2023 00:01:25 GMT
+Wed, 14 Jun 2023 00:06:30 GMT
 
 ### Minor changes
 

package/lib/DatePicker/DatePicker.js

@@ -127,9 +127,9 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     validation,
     ...rest
   } = _ref;
-  const [inputDate, setInputDate] = (0, _react.useState)(date);
+  const [inputDate, setInputDate] = (0, _react.useState)(date instanceof _moment.default ? date : undefined);
+  const [inputText, setInputText] = (0, _react.useState)(date instanceof _moment.default ? date.format(dateFormat) : '');
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [inputText, setInputText] = (0, _react.useState)((0, _moment.default)(date, dateFormat, true).isValid() ? date : '');
   const [isClickedInside, setIsClickedInside] = (0, _react.useState)(false);
   const getCopy = (0, _componentsBase.useCopy)({
     dictionary: _dictionary.default,
@@ -180,7 +180,6 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const viewport = (0, _componentsBase.useViewport)();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
-  const value = date ?? inputDate;
 
   const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     displayName: "DatePicker__HiddenInputFieldContainer",
@@ -259,11 +258,11 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           ref: ref,
           id: id,
           type: "text",
-          value: (value === null || value === void 0 ? void 0 : value.format('DD/MM/YYYY')) ?? '',
+          value: inputText,
           readOnly: true
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
-        date: value,
+        date: inputDate,
         onDateChange: onChange,
         focused: isFocused,
         onFocusChange: onFocusChange,
@@ -304,7 +303,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         value: inputText,
         validation: validation,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
-          date: value,
+          date: inputDate,
           onDateChange: onChange,
           focused: isFocused,
           onFocusChange: onFocusChange,

package/lib-module/DatePicker/DatePicker.js

@@ -101,9 +101,9 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     validation,
     ...rest
   } = _ref;
-  const [inputDate, setInputDate] = useState(date);
+  const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined);
+  const [inputText, setInputText] = useState(date instanceof moment ? date.format(dateFormat) : '');
   const [isFocused, setIsFocused] = useState(false);
-  const [inputText, setInputText] = useState(moment(date, dateFormat, true).isValid() ? date : '');
   const [isClickedInside, setIsClickedInside] = useState(false);
   const getCopy = useCopy({
     dictionary,
@@ -154,7 +154,6 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const viewport = useViewport();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
-  const value = date ?? inputDate;
   const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
     displayName: "DatePicker__HiddenInputFieldContainer",
     componentId: "components-web__sc-mz8fi3-2"
@@ -231,11 +230,11 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
           ref: ref,
           id: id,
           type: "text",
-          value: (value === null || value === void 0 ? void 0 : value.format('DD/MM/YYYY')) ?? '',
+          value: inputText,
           readOnly: true
         })
       }), /*#__PURE__*/_jsx(DayPickerSingleDateController, {
-        date: value,
+        date: inputDate,
         onDateChange: onChange,
         focused: isFocused,
         onFocusChange: onFocusChange,
@@ -276,7 +275,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
         value: inputText,
         validation: validation,
         children: /*#__PURE__*/_jsx(SingleDatePicker, {
-          date: value,
+          date: inputDate,
           onDateChange: onChange,
           focused: isFocused,
           onFocusChange: onFocusChange,

package/package.json

@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.8.0"
+  "version": "2.8.1"
 }

package/src/DatePicker/DatePicker.jsx

@@ -95,9 +95,12 @@ const DatePicker = forwardRef(
     },
     ref
   ) => {
-    const [inputDate, setInputDate] = useState(date)
+    const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined)
+    const [inputText, setInputText] = useState(
+      date instanceof moment ? date.format(dateFormat) : ''
+    )
+
     const [isFocused, setIsFocused] = useState(false)
-    const [inputText, setInputText] = useState(moment(date, dateFormat, true).isValid() ? date : '')
     const [isClickedInside, setIsClickedInside] = useState(false)
     const getCopy = useCopy({ dictionary, copy })
     const onFocusChange = ({ focused }) => {
@@ -135,7 +138,6 @@ const DatePicker = forwardRef(
     const daySize = getResponsiveDaySize(inline, viewport)
     const circleSize = getResponsiveCircleSize(inline, viewport)
 
-    const value = date ?? inputDate
     const HiddenInputFieldContainer = styled.div`
       height: ${(props) => props.height};
       width: ${(props) => props.width};
@@ -202,16 +204,10 @@ const DatePicker = forwardRef(
               height={hiddenInputFieldContainerHeight}
               width={hiddenInputFieldContainerWidth}
             >
-              <input
-                ref={ref}
-                id={id}
-                type="text"
-                value={value?.format('DD/MM/YYYY') ?? ''}
-                readOnly
-              />
+              <input ref={ref} id={id} type="text" value={inputText} readOnly />
             </HiddenInputFieldContainer>
             <DayPickerSingleDateController
-              date={value}
+              date={inputDate}
               onDateChange={onChange}
               focused={isFocused}
               onFocusChange={onFocusChange}
@@ -253,7 +249,7 @@ const DatePicker = forwardRef(
               validation={validation}
             >
               <SingleDatePicker
-                date={value}
+                date={inputDate}
                 onDateChange={onChange}
                 focused={isFocused}
                 onFocusChange={onFocusChange}