@telus-uds/components-web 2.43.0 → 2.44.0

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 31 Oct 2024 05:02:44 GMT and should not be manually modified.
+This log was last generated on Wed, 13 Nov 2024 17:18:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.44.0
+
+Wed, 13 Nov 2024 17:18:39 GMT
+
+### Minor changes
+
+- `DatePicker`: add initialVisibleMonth prop (guillermo.peitzner@telus.com)
+
 ## 2.43.0
 
-Thu, 31 Oct 2024 05:02:44 GMT
+Thu, 31 Oct 2024 05:09:12 GMT
 
 ### Minor changes
 

package/lib/DatePicker/DatePicker.js

@@ -71,6 +71,12 @@ const PortalPositionedContainer = /*#__PURE__*/_styledComponents.default.div.wit
   }
 });
 const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
+const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
+  if (initialVisibleMonth === '' || inputDate instanceof _moment.default) {
+    return null;
+  }
+  return () => (0, _moment.default)(initialVisibleMonth);
+};
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -114,6 +120,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     prevTestID = '',
     nextTestID = '',
     placeholder = 'DD / MM / YYYY',
+    initialVisibleMonth = '',
     ...rest
   } = _ref3;
   const [inputDate, setInputDate] = _react.default.useState(date instanceof _moment.default ? date : undefined);
@@ -337,7 +344,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
           date: inputDate,
           onDateChange: onChange,
-          focused: inputDate ?? isFocused,
+          focused: (inputDate ?? isFocused) || initialVisibleMonth !== '',
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,
@@ -347,6 +354,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
+          initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
           renderMonthElement: _ref7 => {
             let {
               month
@@ -410,6 +418,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
                 phrases: getCopy(),
                 id: id,
                 renderNavNextButton: renderNextButton,
+                initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
                 renderMonthElement: _ref8 => {
                   let {
                     month
@@ -506,7 +515,11 @@ DatePicker.propTypes = {
   /**
    * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
    */
-  placeholder: _propTypes.default.string
+  placeholder: _propTypes.default.string,
+  /**
+   * The initial month to display when the calendar is opened. Expects a string in the format `YYYY-MM`
+   */
+  initialVisibleMonth: _propTypes.default.string
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib-module/DatePicker/DatePicker.js

@@ -66,6 +66,12 @@ const PortalPositionedContainer = /*#__PURE__*/styled.div.withConfig({
   }
 });
 const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
+const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
+  if (initialVisibleMonth === '' || inputDate instanceof moment) {
+    return null;
+  }
+  return () => moment(initialVisibleMonth);
+};
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -109,6 +115,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     prevTestID = '',
     nextTestID = '',
     placeholder = 'DD / MM / YYYY',
+    initialVisibleMonth = '',
     ...rest
   } = _ref3;
   const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined);
@@ -332,7 +339,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           date: inputDate,
           onDateChange: onChange,
-          focused: inputDate ?? isFocused,
+          focused: (inputDate ?? isFocused) || initialVisibleMonth !== '',
           onFocusChange: onFocusChange,
           numberOfMonths: 1,
           hideKeyboardShortcutsPanel: true,
@@ -342,6 +349,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
+          initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
           renderMonthElement: _ref7 => {
             let {
               month
@@ -405,6 +413,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
                 phrases: getCopy(),
                 id: id,
                 renderNavNextButton: renderNextButton,
+                initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
                 renderMonthElement: _ref8 => {
                   let {
                     month
@@ -501,6 +510,10 @@ DatePicker.propTypes = {
   /**
    * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
    */
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  /**
+   * The initial month to display when the calendar is opened. Expects a string in the format `YYYY-MM`
+   */
+  initialVisibleMonth: PropTypes.string
 };
 export default DatePicker;

package/package.json

@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.43.0"
+  "version": "2.44.0"
 }

package/src/DatePicker/DatePicker.jsx

@@ -58,6 +58,13 @@ const PortalPositionedContainer = styled.div({
 
 const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/
 
+const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
+  if (initialVisibleMonth === '' || inputDate instanceof moment) {
+    return null
+  }
+  return () => moment(initialVisibleMonth)
+}
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -100,6 +107,7 @@ const DatePicker = React.forwardRef(
       prevTestID = '',
       nextTestID = '',
       placeholder = 'DD / MM / YYYY',
+      initialVisibleMonth = '',
       ...rest
     },
     ref
@@ -321,7 +329,7 @@ const DatePicker = React.forwardRef(
               <DayPickerSingleDateController
                 date={inputDate}
                 onDateChange={onChange}
-                focused={inputDate ?? isFocused}
+                focused={(inputDate ?? isFocused) || initialVisibleMonth !== ''}
                 onFocusChange={onFocusChange}
                 numberOfMonths={1}
                 hideKeyboardShortcutsPanel={true}
@@ -331,6 +339,7 @@ const DatePicker = React.forwardRef(
                 renderNavNextButton={renderNextButton}
                 isOutsideRange={isDayDisabled}
                 phrases={getCopy()}
+                initialVisibleMonth={getInitialVisibleMonth(initialVisibleMonth, inputDate)}
                 renderMonthElement={({ month }) => (
                   <MonthCenterContainer>
                     <div>
@@ -414,6 +423,7 @@ const DatePicker = React.forwardRef(
                       phrases={getCopy()}
                       id={id}
                       renderNavNextButton={renderNextButton}
+                      initialVisibleMonth={getInitialVisibleMonth(initialVisibleMonth, inputDate)}
                       renderMonthElement={({ month }) => (
                         <MonthCenterContainer>
                           <div>
@@ -516,7 +526,11 @@ DatePicker.propTypes = {
   /**
    * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
    */
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  /**
+   * The initial month to display when the calendar is opened. Expects a string in the format `YYYY-MM`
+   */
+  initialVisibleMonth: PropTypes.string
 }
 
 export default DatePicker