ublo-lib 1.44.2 → 1.44.4

package/es/esf/components/period-picker/period-picker.d.ts

@@ -1,7 +1,8 @@
-export default function PeriodPicker({ setClosed, force, onChange, ubloContext, }: {
+export default function PeriodPicker({ setClosed, force, onChange, hidePastDates, ubloContext, }: {
     setClosed?: any;
     force?: boolean;
     onChange?: any;
+    hidePastDates?: boolean;
     ubloContext?: {};
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=period-picker.d.ts.map

package/es/esf/components/period-picker/period-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"period-picker.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/period-picker/period-picker.js"],"names":[],"mappings":"AA2BA;;;;;4CAyMC"}
+{"version":3,"file":"period-picker.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/period-picker/period-picker.js"],"names":[],"mappings":"AA2BA;;;;;;4CA2MC"}

package/es/esf/components/period-picker/period-picker.js

@@ -18,7 +18,7 @@ const { publicRuntimeConfig } = getConfig();
 const { start, end, forceSeasonSwitch = false, extend, } = publicRuntimeConfig.season;
 const WEEK_STORAGE = "stayWeek";
 const EXTEND_STAY_PICKER_APPEARANCE_DELAY = 1000;
-export default function PeriodPicker({ setClosed = undefined, force = false, onChange = undefined, ubloContext = {}, }) {
+export default function PeriodPicker({ setClosed = undefined, force = false, onChange = undefined, hidePastDates = false, ubloContext = {}, }) {
     const ref = React.useRef(null);
     const { lang, cmsMode, metadata, path } = {
         ...ubloContext,
@@ -129,5 +129,5 @@ export default function PeriodPicker({ setClosed = undefined, force = false, onC
         setOpened(false);
         openExtendedPicker();
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: pickerClasses, children: _jsxs("div", { className: css.inner, children: [_jsxs("div", { className: css.header, children: [_jsx("div", { className: css.iconContainer, children: _jsx(Icons.Calendar, { className: css.icon }) }), _jsx(Title, { lang: lang, stay: stay }), _jsx(Controls, { barRef: ref, distance: 200 })] }), _jsx(Weeks, { ref: ref, lang: lang, weeks: weeks, beginWeek: beginWeek, endWeek: endWeek, selected: selected, select: select, forceSeasonSwitch: forceSeasonSwitch, openExtendedPicker: openExtendedPicker }), _jsx(Warning, { lang: lang, warn: warn, setWarn: setWarn, selectWeek: selectWeek, chosenWeek: chosenWeek }), _jsx(ExtendedStayPicker, { lang: lang, stay: stay, extend: extend, week: selected, endWeek: endWeek, forceSeasonSwitch: forceSeasonSwitch, opened: extendedOpened, setExtendedOpened: setExtendedOpened, onChange: onChange })] }) }), _jsx(Popup, { mustFilterSections: mustFilterSections, showDialog: showDialog, opened: opened, selectAndClose: selectAndClose, onChange: onChange })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: pickerClasses, children: _jsxs("div", { className: css.inner, children: [_jsxs("div", { className: css.header, children: [_jsx("div", { className: css.iconContainer, children: _jsx(Icons.Calendar, { className: css.icon }) }), _jsx(Title, { lang: lang, stay: stay }), _jsx(Controls, { barRef: ref, distance: 200 })] }), _jsx(Weeks, { ref: ref, lang: lang, weeks: weeks, beginWeek: beginWeek, endWeek: endWeek, selected: selected, select: select, forceSeasonSwitch: forceSeasonSwitch, openExtendedPicker: openExtendedPicker, hidePastDates: hidePastDates }), _jsx(Warning, { lang: lang, warn: warn, setWarn: setWarn, selectWeek: selectWeek, chosenWeek: chosenWeek }), _jsx(ExtendedStayPicker, { lang: lang, stay: stay, extend: extend, week: selected, endWeek: endWeek, forceSeasonSwitch: forceSeasonSwitch, opened: extendedOpened, setExtendedOpened: setExtendedOpened, onChange: onChange })] }) }), _jsx(Popup, { mustFilterSections: mustFilterSections, showDialog: showDialog, opened: opened, selectAndClose: selectAndClose, onChange: onChange })] }));
 }

package/es/esf/components/period-picker/weeks.js

@@ -26,13 +26,26 @@ const Weeks = React.forwardRef(({ weeks, lang, ...props }, ref) => {
 });
 Weeks.displayName = "Weeks";
 export default Weeks;
-function Week({ lang, week, beginWeek, endWeek, selected, select, forceSeasonSwitch, openExtendedPicker, }) {
+function Week({ lang, week, beginWeek, endWeek, selected, select, forceSeasonSwitch, openExtendedPicker, hidePastDates, }) {
+    const ref = React.useRef(null);
     const now = new Date();
     const prevDate = Dates.weekToDate(week - 1, endWeek, forceSeasonSwitch);
     const currDate = Dates.weekToDate(week, endWeek, forceSeasonSwitch);
     const nextDate = Dates.weekToDate(week + 1, endWeek, forceSeasonSwitch);
     const isSelected = selected === week;
     const isPast = now.getTime() > nextDate.getTime();
+    React.useEffect(() => {
+        const target = ref.current;
+        if (target && isSelected) {
+            target.scrollIntoView({
+                behavior: "smooth",
+                block: "start",
+                inline: "start",
+            });
+        }
+    }, [isSelected]);
+    if (hidePastDates && isPast)
+        return null;
     const isFirst = week === beginWeek;
     const isLast = week === endWeek;
     const prevYear = prevDate.getFullYear();
@@ -56,5 +69,5 @@ function Week({ lang, week, beginWeek, endWeek, selected, select, forceSeasonSwi
         select(week);
         openExtendedPicker();
     };
-    return (_jsxs("div", { className: weekClasses, children: [_jsx(Button, { className: css.button, onClick: selectWeek, "aria-label": `${Dates.weekToLongDate(week)} - ${Dates.weekToLongDate(week + 1)}`, disabled: isPast }), _jsxs("div", { className: css.date, children: [_jsx("div", { className: css.dateFrom, children: Dates.formatShort(currDate) }), isLast && (_jsx("div", { className: css.dateTo, children: Dates.formatShort(nextDate) }))] }), showMonth && (_jsxs("span", { className: css.month, children: [formattedMonth, " ", showYear && _jsx("b", { className: css.year, children: currYear })] }))] }));
+    return (_jsxs("div", { ref: ref, className: weekClasses, children: [_jsx(Button, { className: css.button, onClick: selectWeek, "aria-label": `${Dates.weekToLongDate(week)} - ${Dates.weekToLongDate(week + 1)}`, disabled: isPast }), _jsxs("div", { className: css.date, children: [_jsx("div", { className: css.dateFrom, children: Dates.formatShort(currDate) }), isLast && (_jsx("div", { className: css.dateTo, children: Dates.formatShort(nextDate) }))] }), showMonth && (_jsxs("span", { className: css.month, children: [formattedMonth, " ", showYear && _jsx("b", { className: css.year, children: currYear })] }))] }));
 }

package/es/esf/components/period-picker/weeks.module.css

@@ -19,6 +19,7 @@
   padding: 0 26px 10px 26px;
   overflow: auto;
   scroll-behavior: smooth;
+  scrollbar-width: thin;
 }
 
 @media (min-width: 1100px) {
@@ -27,7 +28,6 @@
     --item-height: 20px;
 
     padding: 0 26px;
-    overflow: visible;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.44.2",
+  "version": "1.44.4",
   "peerDependencies": {
     "classnames": "^2.5.1",
     "dt-design-system": "^3.12.0",