@zohodesk/components 1.6.14 → 1.6.16

package/es/Tab/Tabs.js

@@ -107,8 +107,7 @@ class Tabs extends React.Component {
     }
   }
 
-  setMaxDim() {
-    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  setMaxDim(totalDimension = 0) {
     let {
       selectedTab
     } = this.props; // let actual = Object.keys(tabDimensions).reduce(
@@ -409,10 +408,9 @@ class Tabs extends React.Component {
     togglePopup(e, boxPosition);
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       tabletMode: mediaQueryOR([{
         maxWidth: 700
@@ -432,10 +430,9 @@ class Tabs extends React.Component {
     });
   }
 
-  getMoreList(_ref2) {
-    let {
-      moreTabs
-    } = _ref2;
+  getMoreList({
+    moreTabs
+  }) {
     const validElements = [];
     React.Children.map(moreTabs, child => {
       const isValidElement = /*#__PURE__*/React.isValidElement(child);
@@ -447,10 +444,9 @@ class Tabs extends React.Component {
     return validElements;
   }
 
-  handleFilterSuggestions(_ref3) {
-    let {
-      moreTabs
-    } = _ref3;
+  handleFilterSuggestions({
+    moreTabs
+  }) {
     const {
       showTitleInMoreOptions
     } = this.props;
@@ -582,82 +578,79 @@ class Tabs extends React.Component {
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
-    }, _ref4 => {
+    }, ({
+      tabletMode
+    }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      isActive: isPopupReady,
+      isAnimate: true,
+      size: "medium",
+      customClass: {
+        customDropBoxWrap: `${moreContainerClass} ${popupClass}`
+      },
+      boxPosition: position,
+      getRef: getContainerRef,
+      isBoxPaddingNeed: false,
+      isArrow: false,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      isRestrictScroll: isRestrictScroll,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, DropBoxProps, {
+      isResponsivePadding: true,
+      needFocusScope: true,
+      dataId: `${dataId}_dropbox`,
+      onClick: removeClose,
+      onClose: this.togglePopup
+    }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
+      className: tabsStyle.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+      placeHolder: placeHolderText,
+      onChange: this.handleChange,
+      value: searchValue,
+      onClear: this.handleSearchValueClear,
+      size: searchBoxSize,
+      customProps: {
+        TextBoxProps: {
+          'data-a11y-autofocus': true
+        }
+      },
+      dataId: `${dataId}_search`,
+      autoComplete: false,
+      name: "search"
+    }, TextBoxIconProps))) : null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true,
+      scroll: "vertical",
+      className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
+      onScroll: this.onScroll,
+      dataId: `${dataId}_Tabs`
+    }, moreTabsListItems.length ? moreTabsListItems.map(data => {
       let {
-        tabletMode
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
-        isActive: isPopupReady,
-        isAnimate: true,
-        size: "medium",
+        text,
+        id,
+        title,
+        isLink,
+        href,
+        children,
+        dataId
+      } = data;
+      const value = text ? text : showTitleInMoreOptions ? title : null;
+      return /*#__PURE__*/React.createElement(ListItem, _extends({
+        key: id,
+        value: value,
+        onClick: this.moreTabSelect,
+        id: id,
+        title: title || text,
+        isLink: isLink,
+        href: href,
+        autoHover: true,
         customClass: {
-          customDropBoxWrap: `${moreContainerClass} ${popupClass}`
-        },
-        boxPosition: position,
-        getRef: getContainerRef,
-        isBoxPaddingNeed: false,
-        isArrow: false,
-        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
-        isRestrictScroll: isRestrictScroll,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset
-      }, DropBoxProps, {
-        isResponsivePadding: true,
-        needFocusScope: true,
-        dataId: `${dataId}_dropbox`,
-        onClick: removeClose,
-        onClose: this.togglePopup
-      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), hasSearch ? /*#__PURE__*/React.createElement(Box, {
-        className: tabsStyle.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-        placeHolder: placeHolderText,
-        onChange: this.handleChange,
-        value: searchValue,
-        onClear: this.handleSearchValueClear,
-        size: searchBoxSize,
-        customProps: {
-          TextBoxProps: {
-            'data-a11y-autofocus': true
-          }
+          customListItem: menuItemClass
         },
-        dataId: `${dataId}_search`,
-        autoComplete: false,
-        name: "search"
-      }, TextBoxIconProps))) : null, /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        shrink: true,
-        scroll: "vertical",
-        className: `${tabsStyle.listWrapper} ${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: this.onScroll,
-        dataId: `${dataId}_Tabs`
-      }, moreTabsListItems.length ? moreTabsListItems.map(data => {
-        let {
-          text,
-          id,
-          title,
-          isLink,
-          href,
-          children,
-          dataId
-        } = data;
-        const value = text ? text : showTitleInMoreOptions ? title : null;
-        return /*#__PURE__*/React.createElement(ListItem, _extends({
-          key: id,
-          value: value,
-          onClick: this.moreTabSelect,
-          id: id,
-          title: title || text,
-          isLink: isLink,
-          href: href,
-          autoHover: true,
-          customClass: {
-            customListItem: menuItemClass
-          },
-          target: "self",
-          dataId: `${dataId}_Tab`
-        }, ListItemProps), !showTitleInMoreOptions ? children : null);
-      }) : this.renderEmptyState()));
-    })) : null);
+        target: "self",
+        dataId: `${dataId}_Tab`
+      }, ListItemProps), !showTitleInMoreOptions ? children : null);
+    }) : this.renderEmptyState())))) : null);
   }
 
   render() {

package/es/Typography/css/cssJSLogic.js

@@ -1,10 +1,9 @@
 import { compileClassNames } from '@zohodesk/utils';
 import { letterspacingMapping, lineheightMapping } from "../utils";
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   let {
     $flag_reset,
     shouldReset,

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -34,8 +34,7 @@ export default class VelocityAnimationGroup extends React.Component {
 
     if (postEnterStyles && typeof postEnterStyles === 'object') {
       elements.forEach(rootElement => {
-        Object.entries(postEnterStyles).forEach(_ref => {
-          let [cssProperty, cssValue] = _ref;
+        Object.entries(postEnterStyles).forEach(([cssProperty, cssValue]) => {
           rootElement.style[cssProperty] = cssValue;
         });
       });

package/es/utils/Common.js

@@ -49,14 +49,11 @@ export function encodeForHtml(str) {
 
   return str;
 }
-export function getListOfDetails() {
-  let Obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let fn = arguments.length > 1 ? arguments[1] : undefined;
+export function getListOfDetails(Obj = {}, fn) {
   const ids = Object.keys(Obj) || [];
   return ids.map(id => fn(Obj[id]));
 }
-export function capitalize() {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+export function capitalize(value = '') {
   let newValue = '';
 
   for (let i = 0; i < value.length; i++) {
@@ -69,18 +66,12 @@ export function capitalize() {
 
   return newValue;
 }
-export function bind() {
-  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
-    handlers[_key] = arguments[_key];
-  }
-
+export function bind(...handlers) {
   handlers.forEach(handler => {
     this[handler] = this[handler].bind(this);
   });
 }
-export function getFullName() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getFullName(firstName = '', lastName = '') {
   let fullName = '';
 
   if (firstName !== null && firstName !== '') {
@@ -93,8 +84,7 @@ export function getFullName() {
 
   return fullName;
 }
-export function getStringifiedOutputForJson() {
-  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export function getStringifiedOutputForJson(input = {}) {
   const keys = Object.keys(input);
   const modifiedInput = keys.reduce((curr, next) => {
     const values = input[next] || [];
@@ -130,19 +120,14 @@ export function filterValue(obj, val) {
   });
   return result;
 }
-export function merge() {
-  let oldObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let newObj = arguments.length > 1 ? arguments[1] : undefined;
+export function merge(oldObj = {}, newObj) {
   const copyOfOld = Object.assign({}, oldObj);
   return Object.keys(newObj).reduce((res, key) => {
     res[key] = Object.assign({}, res[key] || {}, newObj[key]);
     return res;
   }, copyOfOld);
 }
-export function formatValue() {
-  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
-  let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
+export function formatValue(values = [], valueField = 'id', textField = 'name') {
   return values && values.map(value => {
     let formattedValue = value;
 
@@ -166,8 +151,7 @@ export function bytesToSize(bytes) {
   const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
   return `${Math.round(bytes / Math.pow(1024, i), 2)} ${sizes[i]}`;
 }
-export function getMemSize(bytes) {
-  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
+export function getMemSize(bytes, size = !0) {
   const thresh = size ? 1000 : 1024;
 
   if (Math.abs(bytes) < thresh) {
@@ -300,11 +284,7 @@ export const debounce = function (func, wait) {
   };
 };
 let timerId;
-export const throttle = function (func, wait) {
-  for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-    args[_key2 - 2] = arguments[_key2];
-  }
-
+export const throttle = (func, wait, ...args) => {
   if (timerId) {
     return;
   }
@@ -374,8 +354,7 @@ export function getElementSpace(elementRef) {
     availableInsideSpace: availableInsideSpace
   };
 }
-export function getSearchString() {
-  let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+export function getSearchString(charachers = '') {
   return (charachers || '').toString().toLowerCase().trim(); //.replace(/\s+/g, '');
 }
 export function findScrollEnd(element) {

package/es/utils/datetime/common.js

@@ -4,9 +4,7 @@ let dateFormat = {
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   timeNames: ['a', 'p', 'am', 'pm', 'A', 'P', 'AM', 'PM']
 };
-export function pad(n) {
-  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  let z = arguments.length > 2 ? arguments[2] : undefined;
+export function pad(n, width = 1, z) {
   z = z || '0';
   n = `${n}`;
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
@@ -16,7 +14,10 @@ export function getTimeOffset() {
   const matchingOffset = Object.keys(offsetMap).find(offset => GMT.getTimezoneOffset() === Number(offset));
   return matchingOffset ? offsetMap[matchingOffset].toString().split(' ') : ['', ''];
 }
-export function formatDate(dateMill, mask) {
+export function formatDate(dateMill, mask, {
+  i18nShortMonths,
+  i18nMonths
+} = {}) {
   let date = new Date(dateMill);
   let O = getTimeOffset()[0];
   let Z = getTimeOffset()[1];
@@ -28,6 +29,10 @@ export function formatDate(dateMill, mask) {
   let M = date.getMinutes();
   let s = date.getSeconds();
   let L = date.getMilliseconds();
+  const defaultShortMonths = dateFormat.monthNames.slice(0, 12);
+  const defaultMonths = dateFormat.monthNames.slice(12);
+  const resolvedShortMonths = Array.isArray(i18nShortMonths) ? i18nShortMonths : defaultShortMonths;
+  const resolvedMonths = Array.isArray(i18nMonths) ? i18nMonths : defaultMonths;
   let flags = {
     d: d,
     O: O,
@@ -40,8 +45,8 @@ export function formatDate(dateMill, mask) {
     DDDD: dateFormat.dayNames[D + 7],
     M: m + 1,
     MM: pad(m + 1, 2),
-    MMM: dateFormat.monthNames[m],
-    MMMM: dateFormat.monthNames[m + 12],
+    MMM: resolvedShortMonths[m],
+    MMMM: resolvedMonths[m],
     yy: String(y).slice(2),
     YY: String(y).slice(2),
     yyyy: y,
@@ -90,9 +95,7 @@ export function replaceI18NValuesWithRegex(i18nStr, values) {
 export function unescapeUnicode(str) {
   return str.replace(/\\u([a-fA-F0-9]{4})/g, (g, m1) => String.fromCharCode(parseInt(m1, 16)));
 }
-export function getValues() {
-  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let diff = arguments.length > 1 ? arguments[1] : undefined;
+export function getValues(params = [], diff) {
   return params.map(param => diff[param]);
 }
 export function getI18NValue(i18n) {

package/es/utils/dropDownUtils.js

@@ -58,10 +58,7 @@ const getSearchFields = props => {
 // }
 
 
-export const isObjectContainsSearchString = function () {
-  let searchFields = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let obj = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+export const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj = {}) => {
   return searchFields.some(field => {
     const val = obj[field];
     if (val === null || val === undefined) return false;
@@ -444,13 +441,12 @@ export const makeGetOptionIdChange = () => createSelector([getOptions, getValueF
     return changedOptions;
   }, newOptions);
 });
-export const filterSelectedOptions = function () {
-  let {
-    selectedOptions = dummyArray,
-    propSelectedOptions = dummyArray,
-    disabledOptions = dummyArray,
-    limit
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+export const filterSelectedOptions = ({
+  selectedOptions = dummyArray,
+  propSelectedOptions = dummyArray,
+  disabledOptions = dummyArray,
+  limit
+} = {}) => {
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
 

package/es/utils/getInitial.js

@@ -1,6 +1,4 @@
-export function getInitial() {
-  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+export function getInitial(firstName = '', lastName = '') {
   let initial = '';
 
   if (firstName) {

package/es/v1/Button/css/cssJSLogic.js

@@ -5,15 +5,11 @@ import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS } from "../constants";
 
-const capitalize = function () {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return value.charAt(0).toUpperCase() + value.slice(1);
-};
+const capitalize = (value = '') => value.charAt(0).toUpperCase() + value.slice(1);
 
-export default function cssJSLogic(_ref) {
-  let {
-    props
-  } = _ref;
+export default function cssJSLogic({
+  props
+}) {
   const {
     palette,
     bgAppearance,

package/es/v1/Label/css/cssJSLogic.js

@@ -1,10 +1,9 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
 import commonStyle from "../../../common/common.module.css";
-export default function cssJSLogic(_ref) {
-  let {
-    style,
-    props
-  } = _ref;
+export default function cssJSLogic({
+  style,
+  props
+}) {
   const {
     shouldHighlightRequired,
     isRequired,

package/es/v1/Switch/css/cssJSLogic.js

@@ -1,9 +1,8 @@
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
-export default function cssJSLogic(_ref) {
-  let {
-    props,
-    style
-  } = _ref;
+export default function cssJSLogic({
+  props,
+  style
+}) {
   const {
     size,
     isChecked,

package/es/v1/helpers/colorHelpers/colorHelper.js

@@ -48,37 +48,27 @@ const toBorderIntensity = (tone, hasState, isLighter) => {
   return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
 };
 
-export const getBgClass = _ref => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref;
-  return paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
-};
-export const getTextClass = _ref2 => {
-  let {
-    state,
-    textTone
-  } = _ref2;
-  return paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
-};
-export const getBorderClass = _ref3 => {
-  let {
-    state,
-    tone,
-    isLighter
-  } = _ref3;
-  return paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
-};
-
-const buildPaletteClasses = (config, _ref4) => {
-  let {
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref4;
+export const getBgClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
+export const getTextClass = ({
+  state,
+  textTone
+}) => paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
+export const getBorderClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
+
+const buildPaletteClasses = (config, {
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const {
     tone,
     textTone,
@@ -159,14 +149,13 @@ const buildPaletteClasses = (config, _ref4) => {
   };
 };
 
-const getPaletteClasses = _ref5 => {
-  let {
-    palette,
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  } = _ref5;
+const getPaletteClasses = ({
+  palette,
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
+}) => {
   const config = PALETTE_CONFIG[palette];
   return config ? buildPaletteClasses(config, {
     bgAppearance,

package/lib/DateTime/DateWidget.js

@@ -102,6 +102,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
     _this.handleDateIconClick = _this.handleDateIconClick.bind(_assertThisInitialized(_this));
     _this.handleSelectionRangeDetails = _this.handleSelectionRangeDetails.bind(_assertThisInitialized(_this));
     _this.handleBlurSelectionRange = _this.handleBlurSelectionRange.bind(_assertThisInitialized(_this));
+    _this.getI18nMonthLabels = _this.getI18nMonthLabels.bind(_assertThisInitialized(_this));
     _this.state = {
       selected: '',
       displayText: '',
@@ -313,6 +314,15 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
 
       !isOpenOnly && togglePopup(e, "".concat(defaultPosition, "Right"));
     }
+  }, {
+    key: "getI18nMonthLabels",
+    value: function getI18nMonthLabels() {
+      var i18nKeys = this.props.i18nKeys;
+      return {
+        i18nShortMonths: i18nKeys.monthNamesShort || _constants.i18nShortMonths,
+        i18nMonths: i18nKeys.monthNames || _constants.i18nMonths
+      };
+    }
   }, {
     key: "handleSelectionRangeDetails",
     value: function handleSelectionRangeDetails(props) {
@@ -328,7 +338,12 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           hour = _this$state2.hour,
           minute = _this$state2.minute,
           noon = _this$state2.noon;
-      var selected = value === _constants.INVALID_DATE ? '' : value; //New UI Changes
+      var selected = value === _constants.INVALID_DATE ? '' : value;
+
+      var _this$getI18nMonthLab = this.getI18nMonthLabels(),
+          localizedShortMonths = _this$getI18nMonthLab.i18nShortMonths,
+          localizedMonths = _this$getI18nMonthLab.i18nMonths; //New UI Changes
+
 
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: false,
@@ -337,8 +352,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         isDateTime: isDateTime
       });
       var dateFormatSelection = (0, _dateFormat.getDateFormatSelection)(dateFormatDetails, isDateTime, {
-        i18nShortMonths: _constants.i18nShortMonths,
-        i18nMonths: _constants.i18nMonths,
+        i18nShortMonths: localizedShortMonths,
+        i18nMonths: localizedMonths,
         selectedValue: selected,
         day: day,
         month: month,
@@ -365,6 +380,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           value = props.value,
           is24Hour = props.is24Hour,
           isHideCurrentYear = props.isHideCurrentYear;
+
+      var _this$getI18nMonthLab2 = this.getI18nMonthLabels(),
+          localizedShortMonths = _this$getI18nMonthLab2.i18nShortMonths,
+          localizedMonths = _this$getI18nMonthLab2.i18nMonths;
+
       var dateFormatDetails = (0, _dateFormat.getDateFormatDetails)(dateFormat, {
         isHideCurrentYear: isHideCurrentYear,
         value: value,
@@ -383,7 +403,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           format = "".concat(newDateFormat, " ").concat(is24Hour ? 'HH:mm' : 'hh:mm A');
         }
 
-        displayText = (0, _common.formatDate)(convertedValue, format);
+        displayText = (0, _common.formatDate)(convertedValue, format, {
+          i18nShortMonths: localizedShortMonths,
+          i18nMonths: localizedMonths
+        });
       }
 
       return {
@@ -849,6 +872,10 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           isPopupOpen = _this$props9.isPopupOpen;
 
       if (isDateEdited || isFocused || isPopupReady || isPopupOpen) {
+        var _this$getI18nMonthLab3 = this.getI18nMonthLabels(),
+            localizedShortMonths = _this$getI18nMonthLab3.i18nShortMonths,
+            localizedMonths = _this$getI18nMonthLab3.i18nMonths;
+
         var _getDateDetails2 = (0, _dateFormat.getDateDetails)(selected, {
           day: day,
           month: month,
@@ -880,8 +907,8 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           minute: selectedMinute,
           noon: selectedNoon
         }, dateFormatDetails, isDateTime, {
-          i18nShortMonths: _constants.i18nShortMonths,
-          i18nMonths: _constants.i18nMonths,
+          i18nShortMonths: localizedShortMonths,
+          i18nMonths: localizedMonths,
           is24Hour: is24Hour
         });
         return dateTimeString;

package/lib/Select/Select.js

@@ -1136,7 +1136,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter({
+          closePopup: _this7.handlePopupClose
+        })) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, getChildren())));
       }) : null);