ublo-lib 1.44.4 → 1.44.6

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

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

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

@@ -18,5 +18,5 @@ export default function Controls({ barRef, distance }) {
             bar.scrollLeft = currentScroll + distance;
         }
     };
-    return (_jsxs("div", { className: css.controls, children: [_jsx(Button, { variant: "transparent", className: css.control, onClick: scrollTo(LEFT), "aria-label": "Previous", children: _jsx(Icons.ArrowLeft, { className: css.icon }) }), _jsx(Button, { variant: "transparent", className: css.control, onClick: scrollTo(RIGHT), "aria-label": "Next", children: _jsx(Icons.ArrowRight, { className: css.icon }) })] }));
+    return (_jsxs("div", { className: css.controls, "data-controls": "", children: [_jsx(Button, { variant: "transparent", className: css.control, onClick: scrollTo(LEFT), "aria-label": "Previous", "data-control": "prev", children: _jsx(Icons.ArrowLeft, { className: css.icon }) }), _jsx(Button, { variant: "transparent", className: css.control, onClick: scrollTo(RIGHT), "aria-label": "Next", "data-control": "next", children: _jsx(Icons.ArrowRight, { className: css.icon }) })] }));
 }

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

@@ -1,7 +1,8 @@
-export default function PeriodPicker({ setClosed, force, onChange, hidePastDates, ubloContext, }: {
+export default function PeriodPicker({ className, setClosed, onChange, force, hidePastDates, ubloContext, }: {
+    className?: any;
     setClosed?: any;
-    force?: boolean;
     onChange?: any;
+    force?: boolean;
     hidePastDates?: boolean;
     ubloContext?: {};
 }): import("react/jsx-runtime").JSX.Element;

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;;;;;;4CA2MC"}
+{"version":3,"file":"period-picker.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/period-picker/period-picker.js"],"names":[],"mappings":"AA2BA;;;;;;;4CA4MC"}

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, hidePastDates = false, ubloContext = {}, }) {
+export default function PeriodPicker({ className = undefined, setClosed = undefined, onChange = undefined, force = false, hidePastDates = false, ubloContext = {}, }) {
     const ref = React.useRef(null);
     const { lang, cmsMode, metadata, path } = {
         ...ubloContext,
@@ -36,7 +36,7 @@ export default function PeriodPicker({ setClosed = undefined, force = false, onC
     const beginWeek = weeks[0];
     const endWeek = weeks[weeks.length - 1];
     const showDialog = force && selected === null;
-    const pickerClasses = classNames(css.picker, {
+    const pickerClasses = classNames(css.picker, className, {
         [css.pickerDialogOpened]: showDialog && mustFilterSections,
         [css.pickerEditing]: !mustFilterSections,
     });

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

@@ -1 +1 @@
-{"version":3,"file":"weeks.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/period-picker/weeks.js"],"names":[],"mappings":";AAWA,+EA6CG;uBAxDoB,OAAO"}
+{"version":3,"file":"weeks.d.ts","sourceRoot":"","sources":["../../../../src/esf/components/period-picker/weeks.js"],"names":[],"mappings":";AAWA,+EAiDG;uBA5DoB,OAAO"}

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

@@ -10,14 +10,16 @@ const { publicRuntimeConfig } = getConfig();
 const { periods } = publicRuntimeConfig.season || {};
 const Weeks = React.forwardRef(({ weeks, lang, ...props }, ref) => {
     React.useEffect(() => {
-        const bar = ref.current;
-        if (props.selected === undefined || !bar)
-            return;
-        const selectedItem = bar.querySelector(`.${css.itemSelected}`);
-        if (!selectedItem)
-            return;
-        const { clientWidth, offsetLeft } = selectedItem;
-        bar.scrollLeft = offsetLeft - clientWidth * 1.5;
+        window.requestAnimationFrame(() => {
+            const bar = ref.current;
+            if (bar) {
+                const selectedItem = bar.querySelector(`.${css.itemSelected}`);
+                if (selectedItem) {
+                    const { clientWidth, offsetLeft } = selectedItem;
+                    bar.scrollLeft = offsetLeft - clientWidth * 1.5;
+                }
+            }
+        });
     }, [props.selected, ref]);
     const classes = classNames(css.weeks, {
         [css.withPeriods]: periods,
@@ -27,23 +29,12 @@ const Weeks = React.forwardRef(({ weeks, lang, ...props }, ref) => {
 Weeks.displayName = "Weeks";
 export default Weeks;
 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;
@@ -69,5 +60,5 @@ function Week({ lang, week, beginWeek, endWeek, selected, select, forceSeasonSwi
         select(week);
         openExtendedPicker();
     };
-    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 })] }))] }));
+    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 })] }))] }));
 }

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

@@ -28,6 +28,7 @@
     --item-height: 20px;
 
     padding: 0 26px;
+    scrollbar-width: none;
   }
 }
 

package/package.json

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