@onereach/ui-components 19.2.0 → 19.2.1

package/dist/bundled/components/OrDataGridV3/OrDataGrid.js

@@ -1 +1 @@
-export { s as default } from '../OrDataGridV3-68fc4d4a.js';
+export { s as default } from '../OrDataGridV3-607bd571.js';

package/dist/bundled/components/OrDataGridV3/index.js

@@ -1 +1 @@
-export { D as DataGridVariant, s as OrDataGridV3 } from '../OrDataGridV3-68fc4d4a.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from '../OrDataGridV3-607bd571.js';

package/dist/bundled/components/OrDataGridV3/styles.js

@@ -1 +1 @@
-export { a as DataGrid } from '../OrDataGridV3-68fc4d4a.js';
+export { a as DataGrid } from '../OrDataGridV3-607bd571.js';

package/dist/bundled/components/{OrDataGridV3-68fc4d4a.js → OrDataGridV3-607bd571.js}

@@ -1,13 +1,13 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, resolveComponent, normalizeStyle, Fragment, createBlock, watch, createElementVNode, createSlots, withCtx, createVNode, renderList, createTextVNode, toDisplayString } from 'vue';
 import { s as script$f } from './OrCheckboxV3-775b2227.js';
-import { s as script$g } from './OrDatePickerV3-645dbd2b.js';
-import { s as script$h } from './OrDateTimePickerV3-948d583e.js';
+import { s as script$g } from './OrDatePickerV3-3c11a0c8.js';
+import { s as script$h } from './OrDateTimePickerV3-4499a5fe.js';
 import { s as script$i } from './OrInputV3-08632ecc.js';
 import { s as script$j } from './OrRatingV3-2a906a67.js';
 import { s as script$k } from './OrSelectV3-8c297b29.js';
 import { s as script$l } from './OrSwitchV3-9dff8d01.js';
 import { s as script$m } from './OrTagInputV3-05553dc2.js';
-import { s as script$n } from './OrTimePickerV3-29f9bdfa.js';
+import { s as script$n } from './OrTimePickerV3-b61abf08.js';
 import { e as useElementSize } from './OrAutocompleteV3-839e5aa2.js';
 import { s as script$o } from './OrIconV3-9807ee48.js';
 import { s as script$p } from './OrPaginationV3-d4c44779.js';

package/dist/bundled/components/OrDateFormatV3/OrDateFormat.js

@@ -1 +1 @@
-export { s as default } from '../OrDateFormatV3-a754f32e.js';
+export { s as default } from '../OrDateFormatV3-7523e0b0.js';

package/dist/bundled/components/OrDateFormatV3/index.js

@@ -1 +1 @@
-export { s as OrDateFormatV3 } from '../OrDateFormatV3-a754f32e.js';
+export { s as OrDateFormatV3 } from '../OrDateFormatV3-7523e0b0.js';

package/dist/bundled/components/OrDateFormatV3/styles.js

@@ -1 +1 @@
-export { D as DateFormat } from '../OrDateFormatV3-a754f32e.js';
+export { D as DateFormat } from '../OrDateFormatV3-7523e0b0.js';

package/dist/bundled/components/{OrDateFormatV3-a754f32e.js → OrDateFormatV3-7523e0b0.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from 'vue';
 import { useDateFormat } from '../hooks/useDateFormat.js';
 import { useLocale } from '../hooks/useLocale.js';
-import { f as formatDate } from './OrDateTimePickerV3-948d583e.js';
+import { f as formatDate } from './OrDateTimePickerV3-4499a5fe.js';
 
 const DateFormat = [
 // Layout

package/dist/bundled/components/OrDatePickerV3/OrDatePicker.js

@@ -1 +1 @@
-export { s as default } from '../OrDatePickerV3-645dbd2b.js';
+export { s as default } from '../OrDatePickerV3-3c11a0c8.js';

package/dist/bundled/components/OrDatePickerV3/index.js

@@ -1 +1 @@
-export { s as OrDatePickerV3 } from '../OrDatePickerV3-645dbd2b.js';
+export { s as OrDatePickerV3 } from '../OrDatePickerV3-3c11a0c8.js';

package/dist/bundled/components/OrDatePickerV3/styles.js

@@ -1 +1 @@
-export { D as DatePicker, a as DatePickerPopover } from '../OrDatePickerV3-645dbd2b.js';
+export { D as DatePicker, a as DatePickerPopover } from '../OrDatePickerV3-3c11a0c8.js';

package/dist/bundled/components/{OrDatePickerV3-645dbd2b.js → OrDatePickerV3-3c11a0c8.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, toRef, watch, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, vShow, createElementVNode } from 'vue';
-import { a as script$1, b as script$2, c as script$3, d as script$4, e as script$5, g as script$6, h as getCurrentDate, i as formatMobileDate } from './OrDateTimePickerV3-948d583e.js';
+import { a as script$1, b as script$2, c as script$3, d as script$4, e as script$5, g as script$6, h as getCurrentDate, i as formatMobileDate } from './OrDateTimePickerV3-4499a5fe.js';
 import { s as script$7 } from './OrErrorV3-cff3a70c.js';
 import { s as script$8 } from './OrHintV3-a9a95858.js';
 import { s as script$9 } from './OrIconV3-9807ee48.js';

package/dist/bundled/components/OrDateRangePickerV3/OrDateRangePicker.js

@@ -1 +1 @@
-export { s as default } from '../OrDateRangePickerV3-021ef0fe.js';
+export { s as default } from '../OrDateRangePickerV3-f13790a5.js';

package/dist/bundled/components/OrDateRangePickerV3/index.js

@@ -1 +1 @@
-export { s as OrDateRangePickerV3 } from '../OrDateRangePickerV3-021ef0fe.js';
+export { s as OrDateRangePickerV3 } from '../OrDateRangePickerV3-f13790a5.js';

package/dist/bundled/components/OrDateRangePickerV3/styles.js

@@ -1 +1 @@
-export { D as DateRangePicker, a as DateRangePickerPopover } from '../OrDateRangePickerV3-021ef0fe.js';
+export { D as DateRangePicker, a as DateRangePickerPopover } from '../OrDateRangePickerV3-f13790a5.js';

package/dist/bundled/components/{OrDateRangePickerV3-021ef0fe.js → OrDateRangePickerV3-f13790a5.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, toRef, watch, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, createElementVNode, vShow } from 'vue';
-import { a as script$1, b as script$2, c as script$3, d as script$4, e as script$5, g as script$6, h as getCurrentDate, j as getNextMonthDate, i as formatMobileDate } from './OrDateTimePickerV3-948d583e.js';
+import { a as script$1, b as script$2, c as script$3, d as script$4, e as script$5, g as script$6, h as getCurrentDate, j as getNextMonthDate, i as formatMobileDate } from './OrDateTimePickerV3-4499a5fe.js';
 import { s as script$7 } from './OrErrorV3-cff3a70c.js';
 import { s as script$8 } from './OrHintV3-a9a95858.js';
 import { s as script$9 } from './OrIconV3-9807ee48.js';

package/dist/bundled/components/OrDateTimeFormatV3/OrDateTimeFormat.js

@@ -1 +1 @@
-export { s as default } from '../OrDateTimeFormatV3-e936bf16.js';
+export { s as default } from '../OrDateTimeFormatV3-9318ab89.js';

package/dist/bundled/components/OrDateTimeFormatV3/index.js

@@ -1 +1 @@
-export { s as OrDateTimeFormatV3 } from '../OrDateTimeFormatV3-e936bf16.js';
+export { s as OrDateTimeFormatV3 } from '../OrDateTimeFormatV3-9318ab89.js';

package/dist/bundled/components/OrDateTimeFormatV3/styles.js

@@ -1 +1 @@
-export { D as DateTimeFormat } from '../OrDateTimeFormatV3-e936bf16.js';
+export { D as DateTimeFormat } from '../OrDateTimeFormatV3-9318ab89.js';

package/dist/bundled/components/{OrDateTimeFormatV3-e936bf16.js → OrDateTimeFormatV3-9318ab89.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, toRef, openBlock, createElementBlock, n
 import { useDateFormat } from '../hooks/useDateFormat.js';
 import { useTimeFormat } from '../hooks/useTimeFormat.js';
 import { useLocale } from '../hooks/useLocale.js';
-import { f as formatDate, k as formatTime } from './OrDateTimePickerV3-948d583e.js';
+import { f as formatDate, k as formatTime } from './OrDateTimePickerV3-4499a5fe.js';
 
 const DateTimeFormat = [
 // Layout

package/dist/bundled/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1 +1 @@
-export { s as default } from '../OrDateTimePickerV3-948d583e.js';
+export { s as default } from '../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/index.js

@@ -1 +1 @@
-export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate } from '../OrDateTimePickerV3-948d583e.js';
+export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate, o as scrollToElementWithinContainer } from '../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/styles.js

@@ -1 +1 @@
-export { D as DateTimePicker, o as DateTimePickerDatePopover, p as DateTimePickerTimePopover } from '../OrDateTimePickerV3-948d583e.js';
+export { D as DateTimePicker, p as DateTimePickerDatePopover, q as DateTimePickerTimePopover } from '../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/utils/formatDate.js

@@ -1 +1 @@
-export { f as formatDate } from '../../OrDateTimePickerV3-948d583e.js';
+export { f as formatDate } from '../../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/utils/formatMobileDate.js

@@ -1 +1 @@
-export { i as formatMobileDate } from '../../OrDateTimePickerV3-948d583e.js';
+export { i as formatMobileDate } from '../../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/utils/formatMobileTime.js

@@ -1,2 +1,2 @@
 import '../../../types/TimeFormat.js';
-export { n as formatMobileTime } from '../../OrDateTimePickerV3-948d583e.js';
+export { n as formatMobileTime } from '../../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/utils/formatTime.js

@@ -1,2 +1,2 @@
 import '../../../types/TimeFormat.js';
-export { k as formatTime } from '../../OrDateTimePickerV3-948d583e.js';
+export { k as formatTime } from '../../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/utils/getCurrentDate.js

@@ -1 +1 @@
-export { h as getCurrentDate } from '../../OrDateTimePickerV3-948d583e.js';
+export { h as getCurrentDate } from '../../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/utils/getNextMonthDate.js

@@ -1 +1 @@
-export { j as getNextMonthDate } from '../../OrDateTimePickerV3-948d583e.js';
+export { j as getNextMonthDate } from '../../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/utils/index.d.ts

@@ -4,3 +4,4 @@ export * from './formatMobileTime';
 export * from './formatTime';
 export * from './getCurrentDate';
 export * from './getNextMonthDate';
+export * from './scrollToElementWithinContainer';

package/dist/bundled/components/OrDateTimePickerV3/utils/index.js

@@ -1 +1 @@
-export { f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate } from '../../OrDateTimePickerV3-948d583e.js';
+export { f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate, o as scrollToElementWithinContainer } from '../../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/OrDateTimePickerV3/utils/scrollToElementWithinContainer.d.ts

@@ -0,0 +1 @@
+export declare const scrollToElementWithinContainer: (element: HTMLElement, container: HTMLElement) => void;

package/dist/bundled/components/OrDateTimePickerV3/utils/scrollToElementWithinContainer.js

@@ -0,0 +1 @@
+export { o as scrollToElementWithinContainer } from '../../OrDateTimePickerV3-4499a5fe.js';

package/dist/bundled/components/{OrDateTimePickerV3-948d583e.js → OrDateTimePickerV3-4499a5fe.js}

@@ -65,6 +65,18 @@ const getNextMonthDate = () => {
   return new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth() + 1, currentDate.getUTCDate()));
 };
 
+const scrollToElementWithinContainer = (element, container) => {
+  const elementRect = element.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  // Determine if the element is fully visible within the container by comparing their positions.
+  const isFullyVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+  if (!isFullyVisible) {
+    // Calculate the new scrollTop value to center the element within the container.
+    // This involves adjusting for the height of the element and container, ensuring the element is centered.
+    container.scrollTop = element.offsetTop - container.offsetTop - container.clientHeight / 2 + element.clientHeight / 2;
+  }
+};
+
 const DateTimePickerDateControl = [
 // Layout
 'layout-inline-row',
@@ -868,6 +880,8 @@ var script$1 = defineComponent({
     var _a;
     // Refs & Styles
     const root = ref();
+    const hoursContainer = ref();
+    const minutesContainer = ref();
     const hoursButtons = ref([]);
     const minutesButtons = ref([]);
     const rootStyles = computed(() => ['or-date-time-picker-time-select-v3', ...DateTimePickerTimeSelect]);
@@ -896,17 +910,13 @@ var script$1 = defineComponent({
         }
         const activeHourButton = getActiveButton(hoursButtons.value, hoursOptions.value);
         const activeMinuteButton = getActiveButton(minutesButtons.value, minutesOptions.value);
-        if (activeHourButton) {
+        if (activeHourButton && hoursContainer.value) {
           // scroll to the active hour button within the hours container.
-          activeHourButton.scrollIntoView({
-            block: 'center'
-          });
+          scrollToElementWithinContainer(activeHourButton, hoursContainer.value);
         }
-        if (activeMinuteButton) {
+        if (activeMinuteButton && minutesContainer.value) {
           // scroll to the active minute button within the minutes container.
-          activeMinuteButton.scrollIntoView({
-            block: 'center'
-          });
+          scrollToElementWithinContainer(activeMinuteButton, minutesContainer.value);
         }
       });
     }, {
@@ -976,6 +986,8 @@ var script$1 = defineComponent({
     return {
       root,
       rootStyles,
+      hoursContainer,
+      minutesContainer,
       hoursButtons,
       minutesButtons,
       buttonGroupStyles,
@@ -997,6 +1009,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [createElementVNode("div", {
+    ref: 'hoursContainer',
     class: normalizeClass(_ctx.buttonGroupStyles)
   }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hoursOptions, value => {
     return openBlock(), createBlock(_component_OrButton, {
@@ -1013,6 +1026,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       _: 2 /* DYNAMIC */
     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "color", "disabled", "onClick"]);
   }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), createTextVNode(" : "), createElementVNode("div", {
+    ref: 'minutesContainer',
     class: normalizeClass(_ctx.buttonGroupStyles)
   }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.minutesOptions, value => {
     return openBlock(), createBlock(_component_OrButton, {
@@ -1495,4 +1509,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-date-time-picker-v3/OrDateTimePicker.vue";
 
-export { DateTimePicker as D, script$8 as a, script$7 as b, script$6 as c, script$5 as d, script$4 as e, formatDate as f, script$3 as g, getCurrentDate as h, formatMobileDate as i, getNextMonthDate as j, formatTime as k, script$2 as l, script$1 as m, formatMobileTime as n, DateTimePickerDatePopover as o, DateTimePickerTimePopover as p, script as s };
+export { DateTimePicker as D, script$8 as a, script$7 as b, script$6 as c, script$5 as d, script$4 as e, formatDate as f, script$3 as g, getCurrentDate as h, formatMobileDate as i, getNextMonthDate as j, formatTime as k, script$2 as l, script$1 as m, formatMobileTime as n, scrollToElementWithinContainer as o, DateTimePickerDatePopover as p, DateTimePickerTimePopover as q, script as s };

package/dist/bundled/components/OrTimeFormatV3/OrTimeFormat.js

@@ -1 +1 @@
-export { s as default } from '../OrTimeFormatV3-c1ffba45.js';
+export { s as default } from '../OrTimeFormatV3-3931b513.js';

package/dist/bundled/components/OrTimeFormatV3/index.js

@@ -1 +1 @@
-export { s as OrTimeFormatV3 } from '../OrTimeFormatV3-c1ffba45.js';
+export { s as OrTimeFormatV3 } from '../OrTimeFormatV3-3931b513.js';

package/dist/bundled/components/OrTimeFormatV3/styles.js

@@ -1 +1 @@
-export { T as TimeFormat } from '../OrTimeFormatV3-c1ffba45.js';
+export { T as TimeFormat } from '../OrTimeFormatV3-3931b513.js';

package/dist/bundled/components/{OrTimeFormatV3-c1ffba45.js → OrTimeFormatV3-3931b513.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, toRef, openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from 'vue';
 import { useTimeFormat } from '../hooks/useTimeFormat.js';
 import { useLocale } from '../hooks/useLocale.js';
-import { k as formatTime } from './OrDateTimePickerV3-948d583e.js';
+import { k as formatTime } from './OrDateTimePickerV3-4499a5fe.js';
 
 const TimeFormat = [
 // Layout

package/dist/bundled/components/OrTimePickerV3/OrTimePicker.js

@@ -1 +1 @@
-export { s as default } from '../OrTimePickerV3-29f9bdfa.js';
+export { s as default } from '../OrTimePickerV3-b61abf08.js';

package/dist/bundled/components/OrTimePickerV3/index.js

@@ -1 +1 @@
-export { s as OrTimePickerV3 } from '../OrTimePickerV3-29f9bdfa.js';
+export { s as OrTimePickerV3 } from '../OrTimePickerV3-b61abf08.js';

package/dist/bundled/components/OrTimePickerV3/styles.js

@@ -1 +1 @@
-export { T as TimePicker, a as TimePickerPopover } from '../OrTimePickerV3-29f9bdfa.js';
+export { T as TimePicker, a as TimePickerPopover } from '../OrTimePickerV3-b61abf08.js';

package/dist/bundled/components/{OrTimePickerV3-29f9bdfa.js → OrTimePickerV3-b61abf08.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, toRef, watch, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, vShow, createElementVNode } from 'vue';
-import { c as script$1, e as script$2, g as script$3, l as script$4, m as script$5, h as getCurrentDate, n as formatMobileTime } from './OrDateTimePickerV3-948d583e.js';
+import { c as script$1, e as script$2, g as script$3, l as script$4, m as script$5, h as getCurrentDate, n as formatMobileTime } from './OrDateTimePickerV3-4499a5fe.js';
 import { s as script$6 } from './OrErrorV3-cff3a70c.js';
 import { s as script$7 } from './OrHintV3-a9a95858.js';
 import { s as script$8 } from './OrIconV3-9807ee48.js';

package/dist/bundled/components/OrTimeRangePickerV3/OrTimeRangePicker.js

@@ -1 +1 @@
-export { s as default } from '../OrTimeRangePickerV3-b16a5b71.js';
+export { s as default } from '../OrTimeRangePickerV3-4e2746f9.js';

package/dist/bundled/components/OrTimeRangePickerV3/index.js

@@ -1 +1 @@
-export { s as OrTimeRangePickerV3 } from '../OrTimeRangePickerV3-b16a5b71.js';
+export { s as OrTimeRangePickerV3 } from '../OrTimeRangePickerV3-4e2746f9.js';

package/dist/bundled/components/OrTimeRangePickerV3/styles.js

@@ -1 +1 @@
-export { T as TimeRangePicker, a as TimeRangePickerPopover } from '../OrTimeRangePickerV3-b16a5b71.js';
+export { T as TimeRangePicker, a as TimeRangePickerPopover } from '../OrTimeRangePickerV3-4e2746f9.js';

package/dist/bundled/components/{OrTimeRangePickerV3-b16a5b71.js → OrTimeRangePickerV3-4e2746f9.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, toRef, watch, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, createElementVNode, vShow } from 'vue';
-import { c as script$1, e as script$2, g as script$3, l as script$4, m as script$5, h as getCurrentDate, n as formatMobileTime } from './OrDateTimePickerV3-948d583e.js';
+import { c as script$1, e as script$2, g as script$3, l as script$4, m as script$5, h as getCurrentDate, n as formatMobileTime } from './OrDateTimePickerV3-4499a5fe.js';
 import { s as script$6 } from './OrErrorV3-cff3a70c.js';
 import { s as script$7 } from './OrHintV3-a9a95858.js';
 import { s as script$8 } from './OrIconV3-9807ee48.js';

package/dist/bundled/components/index.js

@@ -24,13 +24,13 @@ export { s as OrCombinedInputV3 } from './OrCombinedInputV3-7aa0d255.js';
 export { s as OrConfirm } from './OrConfirm-3de90b03.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirmV3-82b876b1.js';
 export { default as OrContextMenuV3 } from './OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, s as OrDataGridV3 } from './OrDataGridV3-68fc4d4a.js';
-export { s as OrDateFormatV3 } from './OrDateFormatV3-a754f32e.js';
-export { s as OrDatePickerV3 } from './OrDatePickerV3-645dbd2b.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePickerV3-021ef0fe.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormatV3-e936bf16.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from './OrDataGridV3-607bd571.js';
+export { s as OrDateFormatV3 } from './OrDateFormatV3-7523e0b0.js';
+export { s as OrDatePickerV3 } from './OrDatePickerV3-3c11a0c8.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePickerV3-f13790a5.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormatV3-9318ab89.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, n as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-374b1e4c.js';
-export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate } from './OrDateTimePickerV3-948d583e.js';
+export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate, o as scrollToElementWithinContainer } from './OrDateTimePickerV3-4499a5fe.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './OrDrawerV3-82c79922.js';
 export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './OrDropAreaV3-f5cf734e.js';
 export { E as EditorTabsOverflow, s as OrEditorTabsV3 } from './OrEditorTabsV3-0266a3ce.js';
@@ -120,9 +120,9 @@ export { s as OrTextV3 } from './OrTextV3-3d9e530f.js';
 export { default as OrTextarea } from './OrTextarea/OrTextarea.js';
 export { s as OrTextareaV3 } from './OrTextareaV3-55191866.js';
 export { OrTextbox, TextboxTypes } from './OrTextbox/index.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormatV3-c1ffba45.js';
-export { s as OrTimePickerV3 } from './OrTimePickerV3-29f9bdfa.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePickerV3-b16a5b71.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormatV3-3931b513.js';
+export { s as OrTimePickerV3 } from './OrTimePickerV3-b61abf08.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePickerV3-4e2746f9.js';
 export { s as OrToast, a as OrToastContainer, P as PositionsX, c as PositionsY, d as ToastType, T as TransitionType, b as useQueue, u as useToast } from './OrToast-4f7d2737.js';
 export { a as OrToastContainerV3, s as OrToastV3, p as PropsV3, t as TypesV3, b as useQueueV3, u as useToastV3 } from './OrToastV3-2636ad96.js';
 export { OrTooltip, OrTooltipContent } from './OrTooltip/index.js';

package/dist/bundled/index.js

@@ -16,10 +16,10 @@ export { s as OrCombinedInputV3 } from './components/OrCombinedInputV3-7aa0d255.
 export { s as OrConfirm } from './components/OrConfirm-3de90b03.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './components/OrConfirmV3-82b876b1.js';
 export { default as OrContextMenuV3 } from './components/OrContextMenuV3/OrContextMenu.js';
-export { D as DataGridVariant, s as OrDataGridV3 } from './components/OrDataGridV3-68fc4d4a.js';
-export { s as OrDateFormatV3 } from './components/OrDateFormatV3-a754f32e.js';
-export { s as OrDateRangePickerV3 } from './components/OrDateRangePickerV3-021ef0fe.js';
-export { s as OrDateTimeFormatV3 } from './components/OrDateTimeFormatV3-e936bf16.js';
+export { D as DataGridVariant, s as OrDataGridV3 } from './components/OrDataGridV3-607bd571.js';
+export { s as OrDateFormatV3 } from './components/OrDateFormatV3-7523e0b0.js';
+export { s as OrDateRangePickerV3 } from './components/OrDateRangePickerV3-f13790a5.js';
+export { s as OrDateTimeFormatV3 } from './components/OrDateTimeFormatV3-9318ab89.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, n as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './components/OrDateTimePicker-374b1e4c.js';
 export { D as DrawerPlacement, s as OrDrawerV3 } from './components/OrDrawerV3-82c79922.js';
 export { D as DropAreaSize, s as OrDropAreaV3, a as approximateFileSize } from './components/OrDropAreaV3-f5cf734e.js';
@@ -64,8 +64,8 @@ export { default as OrTag } from './components/OrTag/OrTag.js';
 export { default as OrTextarea } from './components/OrTextarea/OrTextarea.js';
 export { s as OrTextareaV3 } from './components/OrTextareaV3-55191866.js';
 export { OrTextbox, TextboxTypes } from './components/OrTextbox/index.js';
-export { s as OrTimeFormatV3 } from './components/OrTimeFormatV3-c1ffba45.js';
-export { s as OrTimeRangePickerV3 } from './components/OrTimeRangePickerV3-b16a5b71.js';
+export { s as OrTimeFormatV3 } from './components/OrTimeFormatV3-3931b513.js';
+export { s as OrTimeRangePickerV3 } from './components/OrTimeRangePickerV3-4e2746f9.js';
 export { s as OrToast, a as OrToastContainer, P as PositionsX, c as PositionsY, d as ToastType, T as TransitionType, b as useQueue, u as useToast } from './components/OrToast-4f7d2737.js';
 export { a as OrToastContainerV3, s as OrToastV3, p as PropsV3, t as TypesV3, b as useQueueV3, u as useToastV3 } from './components/OrToastV3-2636ad96.js';
 export { OrTreeV3, TreeNodeDropPosition } from './components/OrTreeV3/index.js';
@@ -78,8 +78,8 @@ export { default as OrCheckbox } from './components/OrCheckbox/OrCheckbox.js';
 export { s as OrCheckboxTreeV3 } from './components/OrCheckboxTreeV3-c3c6067e.js';
 export { s as OrCheckboxV3 } from './components/OrCheckboxV3-775b2227.js';
 export { default as OrCollapse } from './components/OrCollapse/OrCollapse.js';
-export { s as OrDatePickerV3 } from './components/OrDatePickerV3-645dbd2b.js';
-export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate } from './components/OrDateTimePickerV3-948d583e.js';
+export { s as OrDatePickerV3 } from './components/OrDatePickerV3-3c11a0c8.js';
+export { a as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, s as OrDateTimePickerV3, f as formatDate, i as formatMobileDate, n as formatMobileTime, k as formatTime, h as getCurrentDate, j as getNextMonthDate, o as scrollToElementWithinContainer } from './components/OrDateTimePickerV3-4499a5fe.js';
 export { default as OrError } from './components/OrError/OrError.js';
 export { s as OrErrorV3 } from './components/OrErrorV3-cff3a70c.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './components/OrExpansionPanelV3-d4b16458.js';
@@ -126,7 +126,7 @@ export { s as OrTagsV3, T as TagsOverflow } from './components/OrTagsV3-f888ee0e
 export { s as OrTeleport } from './components/OrTeleport-2cb93adf.js';
 export { default as OrTeleportV3 } from './components/OrTeleportV3/OrTeleport.js';
 export { s as OrTextV3 } from './components/OrTextV3-3d9e530f.js';
-export { s as OrTimePickerV3 } from './components/OrTimePickerV3-29f9bdfa.js';
+export { s as OrTimePickerV3 } from './components/OrTimePickerV3-b61abf08.js';
 export { OrTooltip, OrTooltipContent } from './components/OrTooltip/index.js';
 export { s as OrTooltipV3 } from './components/OrTooltipV3-956d9020.js';
 export { DropdownClose } from './directives/dropdown-close.js';

package/dist/esm/components/index.js

@@ -41,7 +41,7 @@ export { OrDateTimeFormatV3 } from './or-date-time-format-v3/index.js';
 export { DEFAULT_TEXT, OrDateTimePicker, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './or-date-time-picker/index.js';
 export { s as OrDateTimePickerV3 } from '../OrDateTimePicker-2bdd4140.js';
 export { OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from './or-date-time-picker-v3/partials/index.js';
-export { f as formatDate, a as formatTime } from '../formatTime-a1de80d6.js';
+export { f as formatDate, a as formatTime, s as scrollToElementWithinContainer } from '../scrollToElementWithinContainer-f5107b92.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from '../getCurrentDate-9b88f8a8.js';
 export { getNextMonthDate } from './or-date-time-picker-v3/utils/index.js';
 export { DrawerPlacement, OrDrawerV3 } from './or-drawer-v3/index.js';

package/dist/esm/components/or-data-grid-v3/index.js

@@ -55,7 +55,7 @@ import '../../tokens/index.js';
 import '../../OrDateTimePicker-2bdd4140.js';
 import '../or-date-time-picker-v3/partials/index.js';
 import '../../useTimeMask-a5856b1a.js';
-import '../../formatTime-a1de80d6.js';
+import '../../scrollToElementWithinContainer-f5107b92.js';
 import '../../getCurrentDate-9b88f8a8.js';
 import '../or-rating-v3/index.js';
 import '../or-select-v3/index.js';

package/dist/esm/components/or-data-grid-v3/partials/index.js

@@ -40,7 +40,7 @@ import '../../../isAncestor-905b8d1d.js';
 import '../../or-input-box-v3/index.js';
 import '../../or-date-time-picker-v3/partials/index.js';
 import '../../../useTimeMask-a5856b1a.js';
-import '../../../formatTime-a1de80d6.js';
+import '../../../scrollToElementWithinContainer-f5107b92.js';
 import '../../or-button-v3/index.js';
 import '../../or-loader-v3/index.js';
 import '../../or-menu-item-v3/index.js';

package/dist/esm/components/or-date-format-v3/index.js

@@ -7,7 +7,7 @@ import '@onereach/styles/tailwind.config.json';
 import '../../types/index.js';
 import '../../OrDateTimePicker-2bdd4140.js';
 import '../or-date-time-picker-v3/partials/index.js';
-import { f as formatDate } from '../../formatTime-a1de80d6.js';
+import { f as formatDate } from '../../scrollToElementWithinContainer-f5107b92.js';
 import '../../tokens/index.js';
 import 'lodash/get';
 import 'lodash/isElement';

package/dist/esm/components/or-date-picker-v3/index.js

@@ -21,7 +21,7 @@ import '../../tokens/index.js';
 import 'lodash/get';
 import 'lodash/isElement';
 import '../../useTimeMask-a5856b1a.js';
-import '../../formatTime-a1de80d6.js';
+import '../../scrollToElementWithinContainer-f5107b92.js';
 import '../or-button-v3/index.js';
 import '../../constants-57e8b5da.js';
 import '../or-loader-v3/index.js';

package/dist/esm/components/or-date-range-picker-v3/index.js

@@ -23,7 +23,7 @@ import 'lodash/get';
 import 'lodash/isElement';
 import '@onereach/styles/screens.json';
 import '../../useTimeMask-a5856b1a.js';
-import '../../formatTime-a1de80d6.js';
+import '../../scrollToElementWithinContainer-f5107b92.js';
 import '../or-button-v3/index.js';
 import '../../constants-57e8b5da.js';
 import '../or-loader-v3/index.js';

package/dist/esm/components/or-date-time-format-v3/index.js

@@ -7,7 +7,7 @@ import '@onereach/styles/tailwind.config.json';
 import '../../types/index.js';
 import '../../OrDateTimePicker-2bdd4140.js';
 import '../or-date-time-picker-v3/partials/index.js';
-import { f as formatDate, a as formatTime } from '../../formatTime-a1de80d6.js';
+import { f as formatDate, a as formatTime } from '../../scrollToElementWithinContainer-f5107b92.js';
 import '../../tokens/index.js';
 import 'lodash/get';
 import 'lodash/isElement';

package/dist/esm/components/or-date-time-picker-v3/index.js

@@ -1,6 +1,6 @@
 export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker-2bdd4140.js';
 export { OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from './partials/index.js';
-export { f as formatDate, a as formatTime } from '../../formatTime-a1de80d6.js';
+export { f as formatDate, a as formatTime, s as scrollToElementWithinContainer } from '../../scrollToElementWithinContainer-f5107b92.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from '../../getCurrentDate-9b88f8a8.js';
 export { getNextMonthDate } from './utils/index.js';
 import 'vue';

package/dist/esm/components/or-date-time-picker-v3/partials/index.js

@@ -6,7 +6,7 @@ import '@vueuse/core';
 import { u as useProxyModelValue } from '../../../useProxyModelValue-55ed539b.js';
 import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
-import { f as formatDate, a as formatTime } from '../../../formatTime-a1de80d6.js';
+import { f as formatDate, a as formatTime, s as scrollToElementWithinContainer } from '../../../scrollToElementWithinContainer-f5107b92.js';
 import { OrButtonV3 as script$8 } from '../../or-button-v3/index.js';
 import { OrLabelV3 as script$9 } from '../../or-label-v3/index.js';
 import { OrIconButtonV3 as script$b } from '../../or-icon-button-v3/index.js';
@@ -834,6 +834,8 @@ var script = defineComponent({
     var _a;
     // Refs & Styles
     const root = ref();
+    const hoursContainer = ref();
+    const minutesContainer = ref();
     const hoursButtons = ref([]);
     const minutesButtons = ref([]);
     const rootStyles = computed(() => ['or-date-time-picker-time-select-v3', ...DateTimePickerTimeSelect]);
@@ -862,17 +864,13 @@ var script = defineComponent({
         }
         const activeHourButton = getActiveButton(hoursButtons.value, hoursOptions.value);
         const activeMinuteButton = getActiveButton(minutesButtons.value, minutesOptions.value);
-        if (activeHourButton) {
+        if (activeHourButton && hoursContainer.value) {
           // scroll to the active hour button within the hours container.
-          activeHourButton.scrollIntoView({
-            block: 'center'
-          });
+          scrollToElementWithinContainer(activeHourButton, hoursContainer.value);
         }
-        if (activeMinuteButton) {
+        if (activeMinuteButton && minutesContainer.value) {
           // scroll to the active minute button within the minutes container.
-          activeMinuteButton.scrollIntoView({
-            block: 'center'
-          });
+          scrollToElementWithinContainer(activeMinuteButton, minutesContainer.value);
         }
       });
     }, {
@@ -942,6 +940,8 @@ var script = defineComponent({
     return {
       root,
       rootStyles,
+      hoursContainer,
+      minutesContainer,
       hoursButtons,
       minutesButtons,
       buttonGroupStyles,
@@ -963,6 +963,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: 'root',
     class: normalizeClass(_ctx.rootStyles)
   }, [createElementVNode("div", {
+    ref: 'hoursContainer',
     class: normalizeClass(_ctx.buttonGroupStyles)
   }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hoursOptions, value => {
     return openBlock(), createBlock(_component_OrButton, {
@@ -979,6 +980,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _: 2 /* DYNAMIC */
     }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "color", "disabled", "onClick"]);
   }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), createTextVNode(" : "), createElementVNode("div", {
+    ref: 'minutesContainer',
     class: normalizeClass(_ctx.buttonGroupStyles)
   }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.minutesOptions, value => {
     return openBlock(), createBlock(_component_OrButton, {

package/dist/esm/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue.d.ts

@@ -41,6 +41,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     root: import("vue").Ref<HTMLElement | undefined>;
     rootStyles: import("vue").ComputedRef<string[]>;
+    hoursContainer: import("vue").Ref<HTMLElement | undefined>;
+    minutesContainer: import("vue").Ref<HTMLElement | undefined>;
     hoursButtons: import("vue").Ref<any[]>;
     minutesButtons: import("vue").Ref<any[]>;
     buttonGroupStyles: import("vue").ComputedRef<string[]>;

package/dist/esm/components/or-date-time-picker-v3/utils/index.d.ts

@@ -4,3 +4,4 @@ export * from './formatMobileTime';
 export * from './formatTime';
 export * from './getCurrentDate';
 export * from './getNextMonthDate';
+export * from './scrollToElementWithinContainer';

package/dist/esm/components/or-date-time-picker-v3/utils/index.js

@@ -1,4 +1,4 @@
-export { f as formatDate, a as formatTime } from '../../../formatTime-a1de80d6.js';
+export { f as formatDate, a as formatTime, s as scrollToElementWithinContainer } from '../../../scrollToElementWithinContainer-f5107b92.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from '../../../getCurrentDate-9b88f8a8.js';
 import '../../../types/index.js';
 

package/dist/esm/components/or-date-time-picker-v3/utils/scrollToElementWithinContainer.d.ts

@@ -0,0 +1 @@
+export declare const scrollToElementWithinContainer: (element: HTMLElement, container: HTMLElement) => void;

package/dist/esm/components/or-time-format-v3/index.js

@@ -7,7 +7,7 @@ import '@onereach/styles/screens.json';
 import '@onereach/styles/tailwind.config.json';
 import '../../OrDateTimePicker-2bdd4140.js';
 import '../or-date-time-picker-v3/partials/index.js';
-import { a as formatTime } from '../../formatTime-a1de80d6.js';
+import { a as formatTime } from '../../scrollToElementWithinContainer-f5107b92.js';
 import 'lodash/get';
 import 'lodash/isElement';
 import '../../tokens/index.js';

package/dist/esm/components/or-time-picker-v3/index.js

@@ -21,7 +21,7 @@ import 'lodash/get';
 import 'lodash/isElement';
 import '../../tokens/index.js';
 import '../../useTimeMask-a5856b1a.js';
-import '../../formatTime-a1de80d6.js';
+import '../../scrollToElementWithinContainer-f5107b92.js';
 import '../or-button-v3/index.js';
 import '../../constants-57e8b5da.js';
 import '../or-loader-v3/index.js';

package/dist/esm/components/or-time-range-picker-v3/index.js

@@ -22,7 +22,7 @@ import 'lodash/isElement';
 import '../../tokens/index.js';
 import '@onereach/styles/screens.json';
 import '../../useTimeMask-a5856b1a.js';
-import '../../formatTime-a1de80d6.js';
+import '../../scrollToElementWithinContainer-f5107b92.js';
 import '../or-button-v3/index.js';
 import '../../constants-57e8b5da.js';
 import '../or-loader-v3/index.js';

package/dist/esm/index.js

@@ -41,7 +41,7 @@ export { OrDateTimeFormatV3 } from './components/or-date-time-format-v3/index.js
 export { DEFAULT_TEXT, OrDateTimePicker, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './components/or-date-time-picker/index.js';
 export { s as OrDateTimePickerV3 } from './OrDateTimePicker-2bdd4140.js';
 export { OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from './components/or-date-time-picker-v3/partials/index.js';
-export { f as formatDate, a as formatTime } from './formatTime-a1de80d6.js';
+export { f as formatDate, a as formatTime, s as scrollToElementWithinContainer } from './scrollToElementWithinContainer-f5107b92.js';
 export { f as formatMobileDate, a as formatMobileTime, g as getCurrentDate } from './getCurrentDate-9b88f8a8.js';
 export { getNextMonthDate } from './components/or-date-time-picker-v3/utils/index.js';
 export { DrawerPlacement, OrDrawerV3 } from './components/or-drawer-v3/index.js';

package/dist/esm/scrollToElementWithinContainer-f5107b92.js

@@ -0,0 +1,36 @@
+import { TimeFormat } from './types/index.js';
+
+const formatDate = (value, format, locale) => {
+  if (typeof format === 'function') {
+    return format(value, locale);
+  }
+  return value.toLocaleString(locale, {
+    dateStyle: format,
+    timeZone: 'UTC'
+  });
+};
+
+const formatTime = (value, format, locale) => {
+  if (typeof format === 'function') {
+    return format(value, locale);
+  }
+  return value.toLocaleString(locale, {
+    timeStyle: 'short',
+    hourCycle: format !== TimeFormat.Auto ? format : undefined,
+    timeZone: 'UTC'
+  });
+};
+
+const scrollToElementWithinContainer = (element, container) => {
+  const elementRect = element.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  // Determine if the element is fully visible within the container by comparing their positions.
+  const isFullyVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+  if (!isFullyVisible) {
+    // Calculate the new scrollTop value to center the element within the container.
+    // This involves adjusting for the height of the element and container, ensuring the element is centered.
+    container.scrollTop = element.offsetTop - container.offsetTop - container.clientHeight / 2 + element.clientHeight / 2;
+  }
+};
+
+export { formatTime as a, formatDate as f, scrollToElementWithinContainer as s };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "19.2.0",
+  "version": "19.2.1",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v3",
   "sideEffects": false,
@@ -33,7 +33,7 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^19.2.0",
+    "@onereach/styles": "^19.2.1",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -141,5 +141,5 @@
     },
     "./package.json": "./package.json"
   },
-  "gitHead": "1498c583cd01d1463f69711a5d50ed3abb7a78a0"
+  "gitHead": "22dfd1cd755742885366f9877c8748ff50a08593"
 }

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -3,7 +3,10 @@
     :ref="'root'"
     :class="rootStyles"
   >
-    <div :class="buttonGroupStyles">
+    <div
+      :ref="'hoursContainer'"
+      :class="buttonGroupStyles"
+    >
       <OrButton
         v-for="value in hoursOptions"
         :ref="'hoursButtons'"
@@ -20,7 +23,10 @@
 
     :
 
-    <div :class="buttonGroupStyles">
+    <div
+      :ref="'minutesContainer'"
+      :class="buttonGroupStyles"
+    >
       <OrButton
         v-for="value in minutesOptions"
         :ref="'minutesButtons'"
@@ -66,6 +72,7 @@ import { FilterFunction, FormatFunction, TimeFormat } from '../../../../types';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { DateTimePickerModelValue } from '../../types';
 import * as Styles from './styles';
+import { scrollToElementWithinContainer } from '../../utils';
 
 export default defineComponent({
   name: 'OrDateTimePickerTimeSelect',
@@ -137,6 +144,8 @@ export default defineComponent({
   setup(props, context) {
     // Refs & Styles
     const root = ref<HTMLElement>();
+    const hoursContainer = ref<HTMLElement>();
+    const minutesContainer = ref<HTMLElement>();
     const hoursButtons = ref<InstanceType<typeof OrButton>[]>([]);
     const minutesButtons = ref<InstanceType<typeof OrButton>[]>([]);
 
@@ -194,14 +203,14 @@ export default defineComponent({
         const activeHourButton = getActiveButton(hoursButtons.value, hoursOptions.value);
         const activeMinuteButton = getActiveButton(minutesButtons.value, minutesOptions.value);
 
-        if (activeHourButton) {
+        if (activeHourButton && hoursContainer.value) {
           // scroll to the active hour button within the hours container.
-          activeHourButton.scrollIntoView({ block: 'center' });
+          scrollToElementWithinContainer(activeHourButton, hoursContainer.value);
         }
 
-        if (activeMinuteButton) {
+        if (activeMinuteButton && minutesContainer.value) {
           // scroll to the active minute button within the minutes container.
-          activeMinuteButton.scrollIntoView({ block: 'center' });
+          scrollToElementWithinContainer(activeMinuteButton, minutesContainer.value);
         }
       });
     }, { immediate: true });
@@ -293,6 +302,9 @@ export default defineComponent({
       root,
       rootStyles,
 
+      hoursContainer,
+      minutesContainer,
+
       hoursButtons,
       minutesButtons,
 

package/src/components/or-date-time-picker-v3/utils/index.ts

@@ -4,3 +4,4 @@ export * from './formatMobileTime';
 export * from './formatTime';
 export * from './getCurrentDate';
 export * from './getNextMonthDate';
+export * from './scrollToElementWithinContainer';

package/src/components/or-date-time-picker-v3/utils/scrollToElementWithinContainer.ts

@@ -0,0 +1,13 @@
+export const scrollToElementWithinContainer = (element: HTMLElement, container: HTMLElement): void => {
+  const elementRect = element.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+
+  // Determine if the element is fully visible within the container by comparing their positions.
+  const isFullyVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+
+  if (!isFullyVisible) {
+    // Calculate the new scrollTop value to center the element within the container.
+    // This involves adjusting for the height of the element and container, ensuring the element is centered.
+    container.scrollTop = element.offsetTop - container.offsetTop - (container.clientHeight / 2) + (element.clientHeight / 2);
+  }
+};

package/dist/esm/formatTime-a1de80d6.js

@@ -1,24 +0,0 @@
-import { TimeFormat } from './types/index.js';
-
-const formatDate = (value, format, locale) => {
-  if (typeof format === 'function') {
-    return format(value, locale);
-  }
-  return value.toLocaleString(locale, {
-    dateStyle: format,
-    timeZone: 'UTC'
-  });
-};
-
-const formatTime = (value, format, locale) => {
-  if (typeof format === 'function') {
-    return format(value, locale);
-  }
-  return value.toLocaleString(locale, {
-    timeStyle: 'short',
-    hourCycle: format !== TimeFormat.Auto ? format : undefined,
-    timeZone: 'UTC'
-  });
-};
-
-export { formatTime as a, formatDate as f };