@adyen/adyen-platform-experience-web 0.1.1 → 1.0.0-beta

package/dist/es/components/internal/DataGrid/components/TableBody.js

@@ -1,11 +1,28 @@
-import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { TableCells as n } from "./TableCells.js";
-import { Fragment as p } from "preact";
-const f = ({
-  data: r,
-  columns: m,
-  customCells: l
-}) => /* @__PURE__ */ o(p, { children: r == null ? void 0 : r.map((e) => /* @__PURE__ */ o("tr", { className: "adyen-fp-data-grid__row", children: /* @__PURE__ */ o(n, { columns: m, customCells: l, item: e }) }, e)) });
+import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
+import useCoreContext from "../../../../core/Context/useCoreContext.js";
+import { noop } from "../../../../utils/common/index.js";
+import { TableCells } from "./TableCells.js";
+import { k } from "../../../../../preact.module-38e5a571.mjs";
+const TableBody = ({
+  data,
+  columns,
+  customCells,
+  onRowHover
+}) => {
+  const { i18n } = useCoreContext();
+  return /* @__PURE__ */ o(k, { children: data == null ? void 0 : data.map((item, index) => /* @__PURE__ */ o(
+    "tr",
+    {
+      className: "adyen-pe-data-grid__row",
+      onMouseEnter: i18n.has(`tooltip.${item == null ? void 0 : item.category}`) ? () => onRowHover(index) : noop,
+      onFocus: i18n.has(`tooltip.${item == null ? void 0 : item.category}`) ? () => onRowHover(index) : noop,
+      onMouseLeave: i18n.has(`tooltip.${item == null ? void 0 : item.category}`) ? () => onRowHover() : noop,
+      onBlur: i18n.has(`tooltip.${item == null ? void 0 : item.category}`) ? () => onRowHover() : noop,
+      children: /* @__PURE__ */ o(TableCells, { columns, customCells, item, rowIndex: index })
+    },
+    item
+  )) });
+};
 export {
-  f as TableBody
+  TableBody
 };

package/dist/es/components/internal/DataGrid/components/TableCells.js

@@ -1,19 +1,27 @@
-import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import d from "../DataGridCell.js";
-import { Fragment as l } from "preact";
-const o = ({
-  columns: b,
-  customCells: a,
-  item: i
-}) => /* @__PURE__ */ n(l, { children: b.map(({ key: r }) => a != null && a[r] ? /* @__PURE__ */ n(d, {
-  "aria-labelledby": String(r),
-  // TODO create safeguard to remove "as any" assertion
-  children: a[r]({
-    key: r,
-    value: i[r],
-    item: i
-  })
-}, r) : /* @__PURE__ */ n(d, { "aria-labelledby": String(r), children: i[r] }, r)) });
+import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
+import DataGridCell from "../DataGridCell.js";
+import { k } from "../../../../../preact.module-38e5a571.mjs";
+const TableCells = ({
+  columns,
+  customCells,
+  item,
+  rowIndex
+}) => {
+  return /* @__PURE__ */ o(k, { children: columns.map(({ key }) => {
+    if (customCells == null ? void 0 : customCells[key])
+      return /* @__PURE__ */ o(DataGridCell, {
+        "aria-labelledby": String(key),
+        // TODO create safeguard to remove "as any" assertion
+        children: customCells[key]({
+          key,
+          value: item[key],
+          item,
+          rowIndex
+        })
+      }, key);
+    return /* @__PURE__ */ o(DataGridCell, { "aria-labelledby": String(key), children: item[key] }, key);
+  }) });
+};
 export {
-  o as TableCells
+  TableCells
 };

package/dist/es/components/internal/DataGrid/hooks/useInteractiveDataGrid.js

@@ -1,78 +1,7 @@
-import { useReducer as I, useCallback as o } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import p from "../../../../hooks/useReflex/hooks/useReflex.js";
-import { InteractionKeyCode as s } from "../../../types.js";
-import { INITIAL_STATE as R } from "../DataGrid.js";
-const l = ({ totalRows: x }) => {
-  const [i, a] = I(
-    (e, t) => {
-      const n = x;
-      if (n > 1) {
-        const d = t.index;
-        if (d < n && d >= 0)
-          return t.type === "ACTIVE" ? Object.freeze({ ...e, index: t.index ?? 0, activeIndex: t.index }) : Object.freeze({ ...e, index: t.index ?? 0, activeIndex: -1 });
-      }
-      return e;
-    },
-    R
-  ), r = p(
-    o(
-      (e) => {
-        var n;
-        if (!(e instanceof Element))
-          return;
-        const t = Number((n = e.dataset) == null ? void 0 : n.index);
-        i.activeIndex === -1 && t === 0 || t === i.index ? e.setAttribute("tabindex", "0") : e.setAttribute("tabindex", "-1"), t === i.activeIndex && (e == null || e.focus());
-      },
-      [i.activeIndex, i.index]
-    )
-  ), c = o(
-    (e) => {
-      var n, d;
-      if (!(((n = e.target) == null ? void 0 : n.localName) === "tr")) {
-        e.code === s.ARROW_LEFT && a({
-          type: "ACTIVE",
-          index: i.index
-        });
-        return;
-      }
-      switch (e.code) {
-        case s.ARROW_DOWN:
-        case s.ARROW_UP:
-          a({
-            type: "ACTIVE",
-            index: e.code === s.ARROW_DOWN ? i.index + 1 : i.index - 1
-          });
-          break;
-        case s.HOME:
-          a({
-            type: "ACTIVE",
-            index: 0
-          });
-          break;
-        case s.END:
-          a({
-            type: "ACTIVE",
-            index: x - 1
-          });
-          break;
-        case s.ENTER:
-          (d = e.currentTarget) == null || d.click();
-          break;
-        default:
-          return;
-      }
-      e.stopPropagation();
-    },
-    [x, i.index]
-  ), f = o(
-    (e) => (t) => {
-      var d;
-      (!(((d = t.target) == null ? void 0 : d.localName) === "tr") || i.index === -1) && a({ type: "CURRENT", index: e });
-    },
-    [i.index]
-  );
-  return { listeners: { onKeyDownCapture: c, onFocusCapture: f }, ref: r, activeIndex: i.activeIndex, currentIndex: i.index };
-};
+import "../../../../../hooks.module-8565d716.mjs";
+import "../../../../hooks/useReflex/hooks/useReflex.js";
+import "../../../../../types-0aaff3aa.mjs";
+import { u } from "../../../../../index-6e47f755.mjs";
 export {
-  l as useInteractiveDataGrid
+  u as useInteractiveDataGrid
 };

package/dist/es/components/internal/DataGrid/index.js

@@ -0,0 +1,4 @@
+import { D } from "../../../../index-6e47f755.mjs";
+export {
+  D as default
+};

package/dist/es/components/internal/DataGrid/tests/DataGrid.test.js

@@ -0,0 +1,190 @@
+import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
+import { g as getQueriesForElement, r as render } from "../../../../../index-2c0f6175.mjs";
+import { u as userEvent } from "../../../../../index-944be685.mjs";
+import { D as DataGrid } from "../../../../../index-6e47f755.mjs";
+import { d as describe, b as beforeEach, t as test, g as globalExpect, v as vi } from "../../../../../vendor-vi.a3ff54b1-5e924357.mjs";
+const TRANSACTION_DETAILS_1 = {
+  id: "1WEPGD5VS767881Q",
+  amount: { currency: "EUR", value: 12e3 },
+  status: "Reversed",
+  category: "Payment",
+  paymentMethod: { type: "paypal" },
+  creationDate: "2022-08-29T14:47:03+02:00"
+};
+const TRANSACTION_DETAILS_2 = {
+  id: "3KVM0J5V771942G",
+  amount: { currency: "EUR", value: 950200 },
+  status: "Reversed",
+  category: "Refund",
+  bankAccount: {
+    accountNumberLastFourDigits: "1100"
+  },
+  creationDate: "2022-09-29T14:47:03+02:00"
+};
+const TRANSACTION_DETAILS_3 = {
+  id: "1WEPGE5W23KIX9U5",
+  amount: { currency: "USD", value: -4e3 },
+  status: "Booked",
+  category: "Fee",
+  paymentMethod: { type: "klarna" },
+  creationDate: "2022-08-29T14:47:03+02:00"
+};
+const TRANSACTION_DETAILS_4 = {
+  id: "1WEPGE5W2I3OPAQ6",
+  amount: { currency: "EUR", value: 45e3 },
+  status: "Reversed",
+  category: "Capital",
+  paymentMethod: { lastFourDigits: "2894", type: "visa" },
+  creationDate: "2022-08-29T14:47:03+02:00"
+};
+const TRANSACTION_DETAILS_5 = {
+  id: "1VVF0E5W838BKHRK",
+  amount: { currency: "EUR", value: 690500 },
+  status: "Booked",
+  category: "Transfer",
+  creationDate: "2022-08-29T14:47:03+02:00"
+};
+const TRANSACTION_DETAILS_6 = {
+  id: "1WEPGE5W838BO42V",
+  amount: { currency: "EUR", value: 85050 },
+  status: "Booked",
+  category: "Capital",
+  paymentMethod: { type: "klarna" },
+  creationDate: "2022-08-29T14:47:03+02:00"
+};
+const TRANSACTION_DETAILS_7 = {
+  id: "1WEPGE5W838BO47L",
+  amount: { currency: "EUR", value: 3e3 },
+  status: "Pending",
+  category: "Capital",
+  paymentMethod: { lastFourDigits: "9471", type: "amex" },
+  creationDate: "2022-08-29T14:47:03+02:00"
+};
+const TRANSACTION_DETAILS_8 = {
+  id: "1VVF0D5V370945D",
+  amount: { currency: "EUR", value: 82e4 },
+  status: "Booked",
+  category: "Correction",
+  bankAccount: {
+    accountNumberLastFourDigits: "2975"
+  },
+  creationDate: "2022-08-29T14:47:03+02:00"
+};
+const TRANSACTION_DETAILS_9 = {
+  id: "1WEPGE5W23KIX9T7",
+  amount: { currency: "EUR", value: 55e3 },
+  status: "Booked",
+  category: "Capital",
+  paymentMethod: { lastFourDigits: "1011", type: "visa" },
+  creationDate: "2022-08-29T14:47:03+02:00"
+};
+const BASIC_TRANSACTIONS_LIST = [
+  TRANSACTION_DETAILS_1,
+  TRANSACTION_DETAILS_2,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_3,
+  TRANSACTION_DETAILS_4,
+  TRANSACTION_DETAILS_5,
+  TRANSACTION_DETAILS_6,
+  TRANSACTION_DETAILS_7,
+  TRANSACTION_DETAILS_8,
+  TRANSACTION_DETAILS_9
+];
+const columns = [
+  {
+    key: "creationDate",
+    label: "Date"
+  },
+  {
+    key: "status",
+    label: "Status"
+  },
+  {
+    key: "paymentMethod",
+    label: "Type"
+  }
+];
+describe("DataGrid component with clickable rows", () => {
+  beforeEach(async (context) => {
+    const mockEventHandler = vi.fn();
+    const mockHover = vi.fn();
+    const screen = render(
+      /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+        DataGrid,
+        {
+          data: BASIC_TRANSACTIONS_LIST,
+          columns,
+          loading: false,
+          onRowClick: { callback: mockEventHandler, retrievedField: "id" },
+          onRowHover: mockHover,
+          customCells: {
+            paymentMethod: ({ item }) => {
+              var _a;
+              return (
+                // Add this interactive element to test every possible keyboard interaction (left arrow or tab+shift to get focus back on the row)
+                /* @__PURE__ */ o("span", { tabIndex: 0, role: "button", children: (_a = item.paymentMethod) == null ? void 0 : _a.type })
+              );
+            }
+          }
+        }
+      ) })
+    );
+    const table = screen.getByRole("table");
+    const user = userEvent.setup();
+    const getRow = (index = 0) => {
+      return getQueriesForElement(getQueriesForElement(table).getAllByRole("rowgroup")[1]).getAllByRole("row")[index];
+    };
+    context.screen = screen;
+    context.mockEventHandler = mockEventHandler;
+    context.user = user;
+    context.getRow = getRow;
+  });
+  test("The rows are focusable", async ({ getRow, user }) => {
+    const firstRow = getRow(0);
+    globalExpect(document.body).toHaveFocus();
+    await user.tab();
+    globalExpect(firstRow).toHaveFocus();
+  });
+  test("The list is traversed with the keyboard arrows", async ({ getRow, user }) => {
+    const secondRow = getRow(1);
+    const thirdRow = getRow(2);
+    await user.tab();
+    await user.keyboard("[ArrowDown]");
+    globalExpect(secondRow).toHaveFocus();
+    await user.keyboard("[ArrowDown]");
+    globalExpect(thirdRow).toHaveFocus();
+    await user.keyboard("[ArrowUp]");
+    globalExpect(secondRow).toHaveFocus();
+    const buttonWithinRow = getQueriesForElement(secondRow).getByRole("button");
+    await user.tab();
+    globalExpect(buttonWithinRow).toHaveFocus();
+    await user.keyboard("[ArrowLeft]");
+    globalExpect(secondRow).toHaveFocus();
+    await user.tab();
+    globalExpect(buttonWithinRow).toHaveFocus();
+    await user.tab({ shift: true });
+    globalExpect(secondRow).toHaveFocus();
+  });
+  test("The click event is triggered with the ENTER key", async ({ user, mockEventHandler }) => {
+    await user.tab();
+    await user.keyboard("[Enter]");
+    globalExpect(mockEventHandler).toHaveBeenCalled();
+  });
+});

package/dist/es/components/internal/DatePicker/DatePicker.js

@@ -1,54 +1,71 @@
-import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import _ from "classnames";
-import { forwardRef as y } from "../../../external/preact/compat/dist/compat.module.js";
-import { useState as p, useMemo as i, useCallback as N } from "../../../external/preact/hooks/dist/hooks.module.js";
-import O from "../../../core/Context/useCoreContext.js";
-import { noop as P } from "../../../utils/common/index.js";
-import I from "../../../hooks/useReflex/hooks/useReflex.js";
-import M from "../Calendar/hooks/useTimezone.js";
-import { DEFAULT_FIRST_WEEK_DAY as v } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
-import x from "./components/TimeRangeSelector/TimeRangeSelector.js";
-import D from "../Calendar/hooks/useCalendarControlsRendering.js";
-import "./DatePicker.scss.js";
-import E from "../Calendar/Calendar.js";
-import g from "../Calendar/calendar/facade/index.js";
-import { EMPTY_OBJECT as S } from "../../../utils/common/constants.js";
-const A = y((e, u) => {
-  const { i18n: r } = O(), [T, k] = D(e.renderControl), [C, a] = p(performance.now()), t = i(() => e.showTimezoneInfo !== !1, [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = M({ timezone: e.timezone, withClock: t }), z = i(() => _([{ "adyen-fp-datepicker--with-timezone": t }, "adyen-fp-datepicker"]), [t]), w = i(() => t ? { values: { offset: c, time: m } } : S, [c, m, t]), o = I(P, u), R = N(() => {
-    var l, s, f, d, h;
-    a(performance.now()), (l = o.current) != null && l.from && ((s = o.current) != null && s.to) && ((h = e.onHighlight) == null || h.call(e, +((f = o.current) == null ? void 0 : f.from), +((d = o.current) == null ? void 0 : d.to)));
-  }, [a, e.onHighlight]);
-  return /* @__PURE__ */ n("div", { className: z, children: [
-    /* @__PURE__ */ n("div", { className: "adyen-fp-datepicker__selector-container", children: /* @__PURE__ */ n(
-      x,
+import '../../../../DatePicker.css';
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import cx from "classnames";
+import { k } from "../../../../compat.module-a4d537ff.mjs";
+import { h, F, T } from "../../../../hooks.module-8565d716.mjs";
+import useCoreContext from "../../../core/Context/useCoreContext.js";
+import { noop } from "../../../utils/common/index.js";
+import useReflex from "../../../hooks/useReflex/hooks/useReflex.js";
+import useTimezone from "../Calendar/hooks/useTimezone.js";
+import { DEFAULT_FIRST_WEEK_DAY } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
+import TimeRangeSelector from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import "../Calendar/calendar/timerange/presets/lastMonth.js";
+import "../../../core/Localization/datetime/restamper/restamper.js";
+import "../../../core/Localization/datetime/restamper/constants.js";
+import "../Calendar/calendar/timerange/presets/thisMonth.js";
+import "../Calendar/calendar/timerange/presets/yearToDate.js";
+import Calendar from "../Calendar/Calendar.js";
+import calendar from "../Calendar/calendar/facade/index.js";
+import useCalendarControlsRendering from "../Calendar/hooks/useCalendarControlsRendering.js";
+import { EMPTY_OBJECT } from "../../../utils/common/constants.js";
+const DatePicker$1 = "";
+const DatePicker = k((props, ref) => {
+  const { i18n } = useCoreContext();
+  const [controlsRenderer, controlsContainerRef] = useCalendarControlsRendering(props.renderControl);
+  const [lastUpdatedTimestamp, setLastUpdatedTimestamp] = h(performance.now());
+  const withTimezone = F(() => props.showTimezoneInfo !== false, [props.showTimezoneInfo]);
+  const { clockTime: time, GMTOffset: offset } = useTimezone({ timezone: props.timezone, withClock: withTimezone });
+  const datePickerClassName = F(() => cx([{ "adyen-pe-datepicker--with-timezone": withTimezone }, "adyen-pe-datepicker"]), [withTimezone]);
+  const timezoneI18nOptions = F(() => withTimezone ? { values: { offset, time } } : EMPTY_OBJECT, [offset, time, withTimezone]);
+  const calendarRef = useReflex(noop, ref);
+  const onHighlight = T(() => {
+    var _a, _b, _c, _d, _e;
+    setLastUpdatedTimestamp(performance.now());
+    if (((_a = calendarRef.current) == null ? void 0 : _a.from) && ((_b = calendarRef.current) == null ? void 0 : _b.to)) {
+      (_e = props.onHighlight) == null ? void 0 : _e.call(props, +((_c = calendarRef.current) == null ? void 0 : _c.from), +((_d = calendarRef.current) == null ? void 0 : _d.to));
+    }
+  }, [setLastUpdatedTimestamp, props.onHighlight]);
+  return /* @__PURE__ */ o("div", { className: datePickerClassName, children: [
+    /* @__PURE__ */ o("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ o(
+      TimeRangeSelector,
       {
-        now: e.now,
-        calendarRef: o,
-        onTimeRangeSelected: e.onPresetOptionSelected,
-        options: e.timeRangePresetOptions,
-        selectedOption: e.selectedPresetOption,
-        timestamp: C,
-        timezone: e.timezone
+        now: props.now,
+        calendarRef,
+        onTimeRangeSelected: props.onPresetOptionSelected,
+        options: props.timeRangePresetOptions,
+        selectedOption: props.selectedPresetOption,
+        timestamp: lastUpdatedTimestamp,
+        timezone: props.timezone
       }
     ) }),
-    /* @__PURE__ */ n("div", { ref: k, role: "group", className: "adyen-fp-datepicker__controls", "aria-label": r.get("calendar.controls") }),
-    /* @__PURE__ */ n(
-      E,
+    /* @__PURE__ */ o("div", { ref: controlsContainerRef, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": i18n.get("calendar.controls") }),
+    /* @__PURE__ */ o(
+      Calendar,
       {
-        ...e,
-        ref: o,
-        firstWeekDay: v,
-        dynamicBlockRows: !0,
-        onlyCellsWithin: !0,
-        controls: e.controls ?? g.controls.MINIMAL,
-        highlight: e.highlight ?? g.highlight.MANY,
-        onHighlight: R,
-        renderControl: T
+        ...props,
+        ref: calendarRef,
+        firstWeekDay: DEFAULT_FIRST_WEEK_DAY,
+        dynamicBlockRows: true,
+        onlyCellsWithin: true,
+        controls: props.controls ?? calendar.controls.MINIMAL,
+        highlight: props.highlight ?? calendar.highlight.MANY,
+        onHighlight,
+        renderControl: controlsRenderer
       }
     ),
-    t && /* @__PURE__ */ n("div", { className: "adyen-fp-datepicker__timezone", children: r.get("calendar.timezone", w) })
+    withTimezone && /* @__PURE__ */ o("div", { className: "adyen-pe-datepicker__timezone", children: i18n.get("calendar.timezone", timezoneI18nOptions) })
   ] });
-}), V = A;
+});
 export {
-  V as default
+  DatePicker as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/TimeRangeSelector.js

@@ -1,22 +1,49 @@
-import { jsx as C } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as j, useCallback as w, useRef as O, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import x from "../../../FormFields/Select/Select.js";
-import { useTimeRangeSelection as D } from "./useTimeRangeSelection.js";
-const k = ({
-  calendarRef: o,
-  onTimeRangeSelected: t,
-  timestamp: s,
-  ...S
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { F, T, _, p } from "../../../../../../hooks.module-8565d716.mjs";
+import Select from "../../../FormFields/Select/Select.js";
+import { useTimeRangeSelection } from "./useTimeRangeSelection.js";
+const TimeRangeSelector = ({
+  calendarRef,
+  onTimeRangeSelected,
+  timestamp,
+  ...useTimeRangeSelectionConfig
 }) => {
-  const { customSelection: f, from: c, onSelection: l, options: m, selectedOption: r, to: n } = D(S), b = j(() => Object.freeze(m.map((e) => ({ id: e, name: e }))), [m]), h = w(({ target: e }) => l(e == null ? void 0 : e.value), [l]), u = O(!0), p = O(s);
-  return i(() => {
-    o != null && o.current && c && n && (u.current = !0, o.current.from = new Date(c), o.current.to = new Date(n));
-  }, [o, c, n]), i(() => {
-    p.current !== s && (p.current = s, u.current ? u.current = !1 : f());
-  }, [f, s]), i(() => {
-    r && (t == null || t(r));
-  }, [r, t]), /* @__PURE__ */ C(x, { items: b, filterable: !1, multiSelect: !1, onChange: h, selected: r });
-}, I = k;
+  const { customSelection, from, onSelection, options, selectedOption, to } = useTimeRangeSelection(useTimeRangeSelectionConfig);
+  const selectOptions = F(() => Object.freeze(options.map((id) => ({ id, name: id }))), [options]);
+  const onSelectedOptionChanged = T(({ target }) => onSelection(target == null ? void 0 : target.value), [onSelection]);
+  const rangeSelectionInProgress = _(true);
+  const cachedTimestamp = _(timestamp);
+  p(() => {
+    if ((calendarRef == null ? void 0 : calendarRef.current) && from && to) {
+      rangeSelectionInProgress.current = true;
+      calendarRef.current.from = new Date(from);
+      calendarRef.current.to = new Date(to);
+    }
+  }, [calendarRef, from, to]);
+  p(() => {
+    if (cachedTimestamp.current !== timestamp) {
+      cachedTimestamp.current = timestamp;
+      if (rangeSelectionInProgress.current) {
+        rangeSelectionInProgress.current = false;
+      } else
+        customSelection();
+    }
+  }, [customSelection, timestamp]);
+  p(() => {
+    selectedOption && (onTimeRangeSelected == null ? void 0 : onTimeRangeSelected(selectedOption));
+  }, [selectedOption, onTimeRangeSelected]);
+  return /* @__PURE__ */ o(
+    Select,
+    {
+      setToTargetWidth: true,
+      items: selectOptions,
+      filterable: false,
+      multiSelect: false,
+      onChange: onSelectedOptionChanged,
+      selected: selectedOption
+    }
+  );
+};
 export {
-  I as default
+  TimeRangeSelector as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/index.js

@@ -0,0 +1,7 @@
+import { default as default2 } from "./TimeRangeSelector.js";
+import { getTimeRangeSelectionDefaultPresetOptions, useTimeRangeSelection } from "./useTimeRangeSelection.js";
+export {
+  default2 as default,
+  getTimeRangeSelectionDefaultPresetOptions,
+  useTimeRangeSelection
+};