magneto365.ui 2.43.0 → 2.43.1

package/dist/cjs/index.js

@@ -376,7 +376,7 @@ var Info = "https://static.magneto365.com/lib/assets/ae6472919de3f2cd.svg";
 
 var Instagram = "https://static.magneto365.com/lib/assets/2f6e7422de96c0e8.svg";
 
-var IsoLogoMagneto = "https://static.magneto365.com/lib/assets/d5409b4266bf1d18.svg";
+var IsoLogoMagneto = "https://static.magneto365.com/lib/assets/e121976c355f1394.svg";
 
 var IsoLogoMagnetoDark = "https://static.magneto365.com/lib/assets/7e60e6c4b8305a5e.svg";
 
@@ -526,10 +526,12 @@ var Avatar = Component$1N;
 
 var BAR_LOADER_PREFIX = '--bar-loader';
 
-function generateYearArray() {
+function generateYearArray(additionalYears, pastYears) {
+    if (additionalYears === void 0) { additionalYears = 26; }
+    if (pastYears === void 0) { pastYears = 74; }
     var currentYear = new Date().getFullYear();
-    var startYear = currentYear - 74;
-    var endYear = currentYear + 26;
+    var startYear = currentYear - pastYears;
+    var endYear = currentYear + additionalYears;
     var yearsCount = endYear - startYear + 1;
     var yearsArray = Array.from({ length: yearsCount }, function (_, index) { return startYear + index; }).reverse();
     if (currentYear > endYear) {
@@ -538,8 +540,8 @@ function generateYearArray() {
         var newYears = Array.from({ length: difference }, function (_, index) { return endYear + 1 + index; });
         yearsArray = yearsArray.concat(newYears);
     }
-    var yearsArraytoString = yearsArray.map(function (year) { return year.toString(); });
-    return { yearsArray: yearsArray, yearsArraytoString: yearsArraytoString };
+    var yearsArrayToString = yearsArray.map(function (year) { return year.toString(); });
+    return { yearsArray: yearsArray, yearsArrayToString: yearsArrayToString };
 }
 
 function parseDate(value) {
@@ -549,8 +551,7 @@ function parseDate(value) {
 }
 
 var monthOptionsValue = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-var yearOptionsValue = generateYearArray().yearsArray;
-var yearOptionsLabel = generateYearArray().yearsArraytoString;
+var _a$3 = generateYearArray(), yearsArray = _a$3.yearsArray, yearsArrayToString = _a$3.yearsArrayToString;
 //Story const
 var months = [
     'January',
@@ -569,8 +570,8 @@ var months = [
 var storyYears = [];
 for (var i = 0; i < Math.min(monthOptionsValue.length, months.length); i++) {
 }
-for (var i = 0; i < Math.min(yearOptionsValue.length, yearOptionsLabel.length); i++) {
-    storyYears.push({ optionValue: yearOptionsValue[i], optionLabel: yearOptionsLabel[i] });
+for (var i = 0; i < Math.min(yearsArray.length, yearsArrayToString.length); i++) {
+    storyYears.push({ optionValue: yearsArray[i], optionLabel: yearsArrayToString[i] });
 }
 
 var imageProps = {
@@ -941,15 +942,16 @@ var styles$1D = {"magneto-ui--date-picker__wrapper":"mg_date_picker_magneto-ui--
 var defaultValue$1 = function (value) {
     return value ? parseDate(value) : { initialMonth: '', initialYear: '' };
 };
-var yearOptionsList = yearOptionsLabel === null || yearOptionsLabel === void 0 ? void 0 : yearOptionsLabel.map(function (optionLabel, index) { return ({
-    optionValue: yearOptionsValue[index],
-    optionLabel: optionLabel
-}); });
 var Component$1H = function (_a) {
-    var monthOptionsLabels = _a.monthOptionsLabels, monthPlaceholder = _a.monthPlaceholder, yearPlaceholder = _a.yearPlaceholder, value = _a.value, disabled = _a.disabled, onChange = _a.onChange;
+    var monthOptionsLabels = _a.monthOptionsLabels, monthPlaceholder = _a.monthPlaceholder, yearPlaceholder = _a.yearPlaceholder, value = _a.value, disabled = _a.disabled, onChange = _a.onChange, futureYears = _a.futureYears, pastYears = _a.pastYears;
     var _b = React.useState(defaultValue$1(value).initialMonth), selectedMonth = _b[0], setSelectedMonth = _b[1];
     var _c = React.useState(defaultValue$1(value).initialYear), selectedYear = _c[0], setSelectedYear = _c[1];
     var FIRST_OF_MONTH = 1;
+    var _d = generateYearArray(futureYears, pastYears), yearsArrayToString = _d.yearsArrayToString, yearsArray = _d.yearsArray;
+    var yearOptionsList = yearsArrayToString === null || yearsArrayToString === void 0 ? void 0 : yearsArrayToString.map(function (optionLabel, index) { return ({
+        optionValue: yearsArray[index],
+        optionLabel: optionLabel
+    }); });
     var monthOptionsList = monthOptionsLabels === null || monthOptionsLabels === void 0 ? void 0 : monthOptionsLabels.map(function (optionLabel, index) { return ({
         optionValue: monthOptionsValue[index],
         optionLabel: optionLabel
@@ -3765,7 +3767,7 @@ var fixArrayDate = function (array) {
     return dateArray.setArray(array).fixMonth().getArray();
 };
 
-var styles$Q = {"date-input":"mg_date_input_date-input_1hkg2","date-input__input":"mg_date_input_date-input_input_1hkg2","date-input__separator":"mg_date_input_date-input_separator_1hkg2","date-input__separator--filled":"mg_date_input_date-input_separator--filled_1hkg2","date-input--fit":"mg_date_input_date-input--fit_1hkg2","date-input--error":"mg_date_input_date-input--error_1hkg2","date-input__left":"mg_date_input_date-input_left_1hkg2","date-input__right":"mg_date_input_date-input_right_1hkg2"};
+var styles$Q = {"date-input":"mg_date_input_date-input_1dbwv","date-input__input":"mg_date_input_date-input_input_1dbwv","date-input__separator":"mg_date_input_date-input_separator_1dbwv","date-input__separator--filled":"mg_date_input_date-input_separator--filled_1dbwv","date-input--fit":"mg_date_input_date-input--fit_1dbwv","date-input--error":"mg_date_input_date-input--error_1dbwv","date-input__left":"mg_date_input_date-input_left_1dbwv","date-input__right":"mg_date_input_date-input_right_1dbwv"};
 
 // placeholder to every input.
 var placeholder = ['D', 'D', 'M', 'M', 'A', 'A', 'A', 'A'];
@@ -3777,6 +3779,8 @@ var Component$Y = function (_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, value = _a.value, _c = _a.onChange, onChange = _c === void 0 ? function () { return null; } : _c, _d = _a.fit, fit = _d === void 0 ? false : _d, _e = _a.hasError, hasError = _e === void 0 ? false : _e;
     // Represent the value of every input field (there are 8 in total).
     var _f = React.useState(Array(8).fill('')), internalValues = _f[0], setInternalValues = _f[1];
+    // With for every input text
+    var _g = React.useState('2ch'), width = _g[0], setWidth = _g[1];
     // An array of references of every input field.
     var inputsRef = React.useRef([]);
     // Last value emited to onChange function
@@ -3861,6 +3865,18 @@ var Component$Y = function (_a) {
             setInternalValues(__spreadArray(__spreadArray(__spreadArray([], day, true), month, true), year, true));
         }
     }, [value]);
+    React.useEffect(function () {
+        if (inputsRef.current && inputsRef.current[0]) {
+            // get font-family
+            var computedStyle = window.getComputedStyle(inputsRef.current[0]);
+            var canvas = document.createElement('canvas');
+            var context = canvas.getContext('2d');
+            if (!context)
+                return;
+            context.font = "18px ".concat(computedStyle.fontFamily);
+            setWidth(context.measureText('M').width);
+        }
+    }, []);
     return (React__default["default"].createElement("div", { className: [
             styles$Q['date-input'],
             className,
@@ -3875,7 +3891,7 @@ var Component$Y = function (_a) {
             [2, 4].includes(index) ? (
             // include / separator in date (DD / MM / YYYY)
             React__default["default"].createElement("span", { className: [styles$Q['date-input__separator'], value ? styles$Q['date-input__separator--filled'] : ''].join(' ') }, "/")) : null,
-            React__default["default"].createElement("input", { className: styles$Q['date-input__input'], type: "text", maxLength: 1, value: value, placeholder: placeholder[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e.key); }, onPaste: function (e) { return handlePaste(index, e); }, ref: function (el) { return (inputsRef.current[index] = el); }, inputMode: "numeric" }))); }),
+            React__default["default"].createElement("input", { className: styles$Q['date-input__input'], style: { width: width }, type: "text", maxLength: 1, value: value, placeholder: placeholder[index], onChange: function (e) { return handleChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e.key); }, onPaste: function (e) { return handlePaste(index, e); }, ref: function (el) { return (inputsRef.current[index] = el); }, inputMode: "numeric" }))); }),
         React__default["default"].createElement("div", { className: styles$Q['date-input__right'], onClick: function () {
                 var _a;
                 (_a = inputsRef.current[inputsRef.current.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -5041,12 +5057,8 @@ var styles$j = {"magneto-ui--mobile-date-picker":"mg_mobile_date_picker_magneto-
 var defaultValue = function (value) {
     return value ? parseDate(value) : { initialMonth: '', initialYear: '' };
 };
-var yearDateOptions = yearOptionsLabel === null || yearOptionsLabel === void 0 ? void 0 : yearOptionsLabel.map(function (optionLabel, index) { return ({
-    optionValue: yearOptionsValue[index],
-    optionLabel: optionLabel
-}); });
 var Component$q = function (_a) {
-    var applyLabel = _a.applyLabel, cancelLabel = _a.cancelLabel, disabled = _a.disabled, monthsLabels = _a.monthsLabels, monthPlaceholder = _a.monthPlaceholder, yearPlaceholder = _a.yearPlaceholder, onChange = _a.onChange, selectionMonthHeader = _a.selectionMonthHeader, selectionYearHeader = _a.selectionYearHeader, value = _a.value;
+    var applyLabel = _a.applyLabel, cancelLabel = _a.cancelLabel, disabled = _a.disabled, monthsLabels = _a.monthsLabels, monthPlaceholder = _a.monthPlaceholder, yearPlaceholder = _a.yearPlaceholder, onChange = _a.onChange, selectionMonthHeader = _a.selectionMonthHeader, selectionYearHeader = _a.selectionYearHeader, value = _a.value, futureYears = _a.futureYears, pastYears = _a.pastYears;
     var mainClass = 'magneto-ui--mobile-date-picker__container';
     var valueClass = '-value';
     var disabledClass = '-disabled';
@@ -5054,6 +5066,11 @@ var Component$q = function (_a) {
     var _c = React.useState(false), isYearPickerOpen = _c[0], setIsYearPickerOpen = _c[1];
     var _d = React.useState(defaultValue(value).initialMonth), monthSelected = _d[0], setMonthSelected = _d[1];
     var _e = React.useState(defaultValue(value).initialYear), yearSelected = _e[0], setYearSelected = _e[1];
+    var _f = generateYearArray(futureYears, pastYears), yearsArrayToString = _f.yearsArrayToString, yearsArray = _f.yearsArray;
+    var yearDateOptions = yearsArrayToString === null || yearsArrayToString === void 0 ? void 0 : yearsArrayToString.map(function (optionLabel, index) { return ({
+        optionValue: yearsArray[index],
+        optionLabel: optionLabel
+    }); });
     var FIRST_OF_MONTH = 1;
     var FALSY_VALUE_VALIDATION = monthSelected === 0 || monthSelected || yearSelected;
     var componentClass = "".concat(mainClass).concat(FALSY_VALUE_VALIDATION ? valueClass : '').concat(disabled ? disabledClass : '').trim();