@sparrowengg/integrations-templates-frontend 6.0.5 → 7.0.0-bulkify.2

package/dist/cjs/mapping/components/custom-date-menu.js

@@ -3,43 +3,147 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var string = require('../../node_modules/@internationalized/date/dist/string.js');
+var CalendarDate = require('../../node_modules/@internationalized/date/dist/private/CalendarDate.js');
+var conversion = require('../../node_modules/@internationalized/date/dist/private/conversion.js');
+var string = require('../../node_modules/@internationalized/date/dist/private/string.js');
 var dayjs_min = require('../../node_modules/dayjs/dayjs.min.js');
 var popover = require('../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js');
 var input = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js');
 var calendar = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/calendar.js');
 var calendar$1 = require('../../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js');
 
-function parseStringToDateValue(v) {
+const DISPLAY_DATETIME_SEP = " \u2022 ";
+function parseDisplayDatetimeString(trimmed) {
+  if (!trimmed.includes(DISPLAY_DATETIME_SEP)) {
+    return null;
+  }
+  const [datePart, timePart] = trimmed.split(DISPLAY_DATETIME_SEP).map((s) => s.trim());
+  const dateSegs = datePart.split("/");
+  if (dateSegs.length !== 3) {
+    return null;
+  }
+  const timeSegs = timePart.split(":");
+  if (timeSegs.length < 2) {
+    return null;
+  }
+  const month = Number(dateSegs[0]);
+  const day = Number(dateSegs[1]);
+  const year = Number(dateSegs[2]);
+  const hour = Number(timeSegs[0]);
+  const minute = Number(timeSegs[1]);
+  const second = timeSegs[2] != null && timeSegs[2] !== "" ? Number(timeSegs[2]) : 0;
+  if ([month, day, year, hour, minute, second].some((n) => Number.isNaN(n))) {
+    return null;
+  }
+  if (month < 1 || month > 12 || day < 1 || day > 31) {
+    return null;
+  }
+  try {
+    return new CalendarDate.CalendarDateTime(year, month, day, hour, minute, second);
+  } catch (e) {
+    return null;
+  }
+}
+function parseStringToDateValue(v, variant = "date") {
+  const todayCalendarDate = string.parseDate(dayjs_min.default().format("YYYY-MM-DD"));
   if (v == null || String(v).trim() === "") {
-    return string.parseDate(dayjs_min.default().format("YYYY-MM-DD"));
+    if (variant === "datetime") {
+      const d = dayjs_min.default();
+      return new CalendarDate.CalendarDateTime(
+        d.year(),
+        d.month() + 1,
+        d.date(),
+        d.hour(),
+        d.minute(),
+        d.second()
+      );
+    }
+    return todayCalendarDate;
   }
   const trimmed = String(v).trim();
   try {
+    if (variant === "datetime") {
+      const fromDisplay = parseDisplayDatetimeString(trimmed);
+      if (fromDisplay) {
+        return fromDisplay;
+      }
+    }
     if (/^\d{4}-\d{2}-\d{2}/.test(trimmed)) {
-      return string.parseDate(trimmed.slice(0, 10));
+      const base = string.parseDate(trimmed.slice(0, 10));
+      return variant === "datetime" ? conversion.toCalendarDateTime(base) : base;
     }
     const parsed = dayjs_min.default(trimmed);
     if (parsed.isValid()) {
+      if (variant === "datetime") {
+        return new CalendarDate.CalendarDateTime(
+          parsed.year(),
+          parsed.month() + 1,
+          parsed.date(),
+          parsed.hour(),
+          parsed.minute(),
+          parsed.second()
+        );
+      }
       return string.parseDate(parsed.format("YYYY-MM-DD"));
     }
   } catch (e) {
   }
-  return string.parseDate(dayjs_min.default().format("YYYY-MM-DD"));
+  return variant === "datetime" ? conversion.toCalendarDateTime(todayCalendarDate) : todayCalendarDate;
 }
 function formatCalendarDateParts(d) {
   return `${d.year}-${String(d.month).padStart(2, "0")}-${String(d.day).padStart(2, "0")}`;
 }
+function dateValueToJsDate(d) {
+  const withTime = "hour" in d ? d : conversion.toCalendarDateTime(d);
+  const hour = withTime.hour;
+  const minute = withTime.minute;
+  const second = "second" in withTime ? withTime.second : 0;
+  return new Date(d.year, d.month - 1, d.day, hour, minute, second);
+}
+function dateValueHasClockTime(d) {
+  return "hour" in d && typeof d.hour === "number";
+}
+function coerceDateChange(next, variant) {
+  if (variant !== "datetime" || dateValueHasClockTime(next)) {
+    return next;
+  }
+  return conversion.toCalendarDateTime(next);
+}
+function resolveApplyValue(calendarState, fallback, variant) {
+  const fromState = calendarState.value;
+  if (variant !== "datetime") {
+    return fromState != null ? fromState : fallback;
+  }
+  if (fromState == null) {
+    return dateValueHasClockTime(fallback) ? fallback : conversion.toCalendarDateTime(fallback);
+  }
+  if (dateValueHasClockTime(fromState)) {
+    return fromState;
+  }
+  if (dateValueHasClockTime(fallback)) {
+    const fb = fallback;
+    const merged = new CalendarDate.CalendarDateTime(
+      fromState.year,
+      fromState.month,
+      fromState.day,
+      fb.hour,
+      fb.minute,
+      "second" in fb ? fb.second : 0
+    );
+    return merged;
+  }
+  return conversion.toCalendarDateTime(fromState);
+}
 const CustomDateMenu = ({
   onChangeHandler,
   value,
   variant = "datetime"
 }) => {
   const [popoverOpen, setPopoverOpen] = React.useState(false);
-  const [date, setDate] = React.useState(() => parseStringToDateValue(value));
+  const [date, setDate] = React.useState(() => parseStringToDateValue(value, variant));
   React.useEffect(() => {
-    setDate(parseStringToDateValue(value));
-  }, [value]);
+    setDate(parseStringToDateValue(value, variant));
+  }, [value, variant]);
   const inputDisplay = React.useMemo(() => {
     if (value == null || String(value).trim() === "") {
       return "";
@@ -75,13 +179,14 @@ const CustomDateMenu = ({
         size: "md",
         footerActionText: "Apply",
         value: date,
-        onChange: setDate,
+        onChange: (next) => setDate(coerceDateChange(next, variant)),
         showTimePicker: variant === "datetime",
-        footerAction: () => {
+        footerAction: (calendarState) => {
+          const resolved = resolveApplyValue(calendarState, date, variant);
           if (variant === "date") {
-            onChangeHandler(formatCalendarDateParts(date));
+            onChangeHandler(formatCalendarDateParts(resolved));
           } else {
-            const jsDate = new Date(date.year, date.month - 1, date.day);
+            const jsDate = dateValueToJsDate(resolved);
             onChangeHandler(dayjs_min.default(jsDate).format("MM/DD/YYYY \u2022 HH:mm"));
           }
           setPopoverOpen(false);

package/dist/cjs/mapping/components/custom-date-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-date-menu.js","sources":["../../../../src/mapping/components/custom-date-menu.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  Calendar,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@sparrowengg/twigs-react\";\nimport { CalendarIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { parseDate, DateValue } from \"@internationalized/date\";\nimport dayjs from \"dayjs\";\n\nexport type CustomDateMenuVariant = \"datetime\" | \"date\";\n\ntype CustomDateMenuProps = {\n  onChangeHandler: (value: string) => void;\n  value: string | null | undefined;\n  /** `datetime` matches legacy mapping default (time + \"•\" format). `date` is calendar-only, ISO `YYYY-MM-DD` on apply. */\n  variant?: CustomDateMenuVariant;\n};\n\nfunction parseStringToDateValue(v: string | null | undefined): DateValue {\n  if (v == null || String(v).trim() === \"\") {\n    return parseDate(dayjs().format(\"YYYY-MM-DD\"));\n  }\n  const trimmed = String(v).trim();\n  try {\n    if (/^\\d{4}-\\d{2}-\\d{2}/.test(trimmed)) {\n      return parseDate(trimmed.slice(0, 10));\n    }\n    const parsed = dayjs(trimmed);\n    if (parsed.isValid()) {\n      return parseDate(parsed.format(\"YYYY-MM-DD\"));\n    }\n  } catch {\n    // fall through\n  }\n  return parseDate(dayjs().format(\"YYYY-MM-DD\"));\n}\n\nfunction formatCalendarDateParts(d: DateValue): string {\n  return `${d.year}-${String(d.month).padStart(2, \"0\")}-${String(d.day).padStart(2, \"0\")}`;\n}\n\nconst CustomDateMenu: React.FC<CustomDateMenuProps> = ({\n  onChangeHandler,\n  value,\n  variant = \"datetime\",\n}) => {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [date, setDate] = useState<DateValue>(() => parseStringToDateValue(value));\n\n  useEffect(() => {\n    setDate(parseStringToDateValue(value));\n  }, [value]);\n\n  const inputDisplay = useMemo(() => {\n    if (value == null || String(value).trim() === \"\") {\n      return \"\";\n    }\n    const s = String(value);\n    if (variant === \"datetime\" && s.includes(\"•\")) {\n      return s;\n    }\n    const parsed = dayjs(s);\n    if (parsed.isValid()) {\n      return variant === \"date\"\n        ? parsed.format(\"MM/DD/YYYY\")\n        : parsed.format(\"MM/DD/YYYY • HH:mm\");\n    }\n    return s;\n  }, [value, variant]);\n\n  const datetimePlaceholder = dayjs(new Date()).format(\"MM/DD/YYYY • HH:mm\");\n\n  return (\n    <Popover open={popoverOpen} onOpenChange={(open) => setPopoverOpen(open)}>\n      <PopoverTrigger asChild>\n        <Input\n          value={\n            inputDisplay ||\n            (variant === \"datetime\" ? datetimePlaceholder : \"\")\n          }\n          size=\"lg\"\n          readOnly\n          rightIcon={<CalendarIcon />}\n        />\n      </PopoverTrigger>\n      <PopoverContent\n        sideOffset={3}\n        css={{ width: 260, padding: 0, borderRadius: \"$xl\" }}\n      >\n        <Calendar\n          size=\"md\"\n          footerActionText=\"Apply\"\n          value={date}\n          onChange={setDate}\n          showTimePicker={variant === \"datetime\"}\n          footerAction={() => {\n            if (variant === \"date\") {\n              onChangeHandler(formatCalendarDateParts(date));\n            } else {\n              const jsDate = new Date(date.year, date.month - 1, date.day);\n              onChangeHandler(dayjs(jsDate).format(\"MM/DD/YYYY • HH:mm\"));\n            }\n            setPopoverOpen(false);\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default CustomDateMenu;\n"],"names":["parseDate","dayjs","useState","useEffect","useMemo","Popover","PopoverTrigger","Input","CalendarIcon","PopoverContent","Calendar"],"mappings":"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"}
+{"version":3,"file":"custom-date-menu.js","sources":["../../../../src/mapping/components/custom-date-menu.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  Calendar,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@sparrowengg/twigs-react\";\nimport { CalendarIcon } from \"@sparrowengg/twigs-react-icons\";\nimport {\n  parseDate,\n  DateValue,\n  CalendarDateTime,\n  toCalendarDateTime,\n} from \"@internationalized/date\";\nimport dayjs from \"dayjs\";\n\n/** Twigs `footerAction` passes calendar state; only `value` is used here. */\ntype CalendarApplyState = {\n  value: DateValue | null;\n};\n\nexport type CustomDateMenuVariant = \"datetime\" | \"date\";\n\ntype CustomDateMenuProps = {\n  onChangeHandler: (value: string) => void;\n  value: string | null | undefined;\n  /** `datetime` matches legacy mapping default (time + \"•\" format). `date` is calendar-only, ISO `YYYY-MM-DD` on apply. */\n  variant?: CustomDateMenuVariant;\n};\n\nconst DISPLAY_DATETIME_SEP = \" • \";\n\n/** Parses values produced by `dayjs(...).format(\"MM/DD/YYYY • HH:mm\")` for calendar state. */\nfunction parseDisplayDatetimeString(trimmed: string): CalendarDateTime | null {\n  if (!trimmed.includes(DISPLAY_DATETIME_SEP)) {\n    return null;\n  }\n  const [datePart, timePart] = trimmed.split(DISPLAY_DATETIME_SEP).map((s) => s.trim());\n  const dateSegs = datePart.split(\"/\");\n  if (dateSegs.length !== 3) {\n    return null;\n  }\n  const timeSegs = timePart.split(\":\");\n  if (timeSegs.length < 2) {\n    return null;\n  }\n  const month = Number(dateSegs[0]);\n  const day = Number(dateSegs[1]);\n  const year = Number(dateSegs[2]);\n  const hour = Number(timeSegs[0]);\n  const minute = Number(timeSegs[1]);\n  const second = timeSegs[2] != null && timeSegs[2] !== \"\" ? Number(timeSegs[2]) : 0;\n  if ([month, day, year, hour, minute, second].some((n) => Number.isNaN(n))) {\n    return null;\n  }\n  if (month < 1 || month > 12 || day < 1 || day > 31) {\n    return null;\n  }\n  try {\n    return new CalendarDateTime(year, month, day, hour, minute, second);\n  } catch {\n    return null;\n  }\n}\n\nfunction parseStringToDateValue(\n  v: string | null | undefined,\n  variant: CustomDateMenuVariant = \"date\",\n): DateValue {\n  const todayCalendarDate = parseDate(dayjs().format(\"YYYY-MM-DD\"));\n  if (v == null || String(v).trim() === \"\") {\n    if (variant === \"datetime\") {\n      const d = dayjs();\n      return new CalendarDateTime(\n        d.year(),\n        d.month() + 1,\n        d.date(),\n        d.hour(),\n        d.minute(),\n        d.second(),\n      );\n    }\n    return todayCalendarDate;\n  }\n  const trimmed = String(v).trim();\n  try {\n    if (variant === \"datetime\") {\n      const fromDisplay = parseDisplayDatetimeString(trimmed);\n      if (fromDisplay) {\n        return fromDisplay;\n      }\n    }\n    if (/^\\d{4}-\\d{2}-\\d{2}/.test(trimmed)) {\n      const base = parseDate(trimmed.slice(0, 10));\n      return variant === \"datetime\" ? toCalendarDateTime(base) : base;\n    }\n    const parsed = dayjs(trimmed);\n    if (parsed.isValid()) {\n      if (variant === \"datetime\") {\n        return new CalendarDateTime(\n          parsed.year(),\n          parsed.month() + 1,\n          parsed.date(),\n          parsed.hour(),\n          parsed.minute(),\n          parsed.second(),\n        );\n      }\n      return parseDate(parsed.format(\"YYYY-MM-DD\"));\n    }\n  } catch {\n    // fall through\n  }\n  return variant === \"datetime\"\n    ? toCalendarDateTime(todayCalendarDate)\n    : todayCalendarDate;\n}\n\nfunction formatCalendarDateParts(d: DateValue): string {\n  return `${d.year}-${String(d.month).padStart(2, \"0\")}-${String(d.day).padStart(2, \"0\")}`;\n}\n\nfunction dateValueToJsDate(d: DateValue): Date {\n  const withTime = \"hour\" in d ? d : toCalendarDateTime(d);\n  const hour = withTime.hour;\n  const minute = withTime.minute;\n  const second = \"second\" in withTime ? withTime.second : 0;\n  return new Date(d.year, d.month - 1, d.day, hour, minute, second);\n}\n\nfunction dateValueHasClockTime(d: DateValue): boolean {\n  return \"hour\" in d && typeof (d as { hour?: unknown }).hour === \"number\";\n}\n\n/** Twigs `Calendar` + `showTimePicker` require `CalendarDateTime` / `ZonedDateTime`, not plain `CalendarDate`. */\nfunction coerceDateChange(next: DateValue, variant: CustomDateMenuVariant): DateValue {\n  if (variant !== \"datetime\" || dateValueHasClockTime(next)) {\n    return next;\n  }\n  return toCalendarDateTime(next);\n}\n\nfunction resolveApplyValue(\n  calendarState: CalendarApplyState,\n  fallback: DateValue,\n  variant: CustomDateMenuVariant,\n): DateValue {\n  const fromState = calendarState.value;\n  if (variant !== \"datetime\") {\n    return fromState != null ? fromState : fallback;\n  }\n\n  // With Twigs `showTimePicker`, `calendarState.value` often stays a `CalendarDate` while the\n  // time UI updates the controlled `value` via `onChange` only. Prefer merging day from state\n  // with clock time from React `fallback` when state has no time-of-day.\n  if (fromState == null) {\n    return dateValueHasClockTime(fallback) ? fallback : toCalendarDateTime(fallback);\n  }\n\n  if (dateValueHasClockTime(fromState)) {\n    return fromState;\n  }\n\n  if (dateValueHasClockTime(fallback)) {\n    const fb = fallback as CalendarDateTime;\n    const merged = new CalendarDateTime(\n      fromState.year,\n      fromState.month,\n      fromState.day,\n      fb.hour,\n      fb.minute,\n      \"second\" in fb ? fb.second : 0,\n    );\n    return merged;\n  }\n\n  return toCalendarDateTime(fromState);\n}\n\nconst CustomDateMenu: React.FC<CustomDateMenuProps> = ({\n  onChangeHandler,\n  value,\n  variant = \"datetime\",\n}) => {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [date, setDate] = useState<DateValue>(() => parseStringToDateValue(value, variant));\n\n  useEffect(() => {\n    setDate(parseStringToDateValue(value, variant));\n  }, [value, variant]);\n\n  const inputDisplay = useMemo(() => {\n    if (value == null || String(value).trim() === \"\") {\n      return \"\";\n    }\n    const s = String(value);\n    if (variant === \"datetime\" && s.includes(\"•\")) {\n      return s;\n    }\n    const parsed = dayjs(s);\n    if (parsed.isValid()) {\n      return variant === \"date\"\n        ? parsed.format(\"MM/DD/YYYY\")\n        : parsed.format(\"MM/DD/YYYY • HH:mm\");\n    }\n    return s;\n  }, [value, variant]);\n\n  const datetimePlaceholder = dayjs(new Date()).format(\"MM/DD/YYYY • HH:mm\");\n\n  return (\n    <Popover open={popoverOpen} onOpenChange={(open) => setPopoverOpen(open)}>\n      <PopoverTrigger asChild>\n        <Input\n          value={\n            inputDisplay ||\n            (variant === \"datetime\" ? datetimePlaceholder : \"\")\n          }\n          size=\"lg\"\n          readOnly\n          rightIcon={<CalendarIcon />}\n        />\n      </PopoverTrigger>\n      <PopoverContent\n        sideOffset={3}\n        css={{ width: 260, padding: 0, borderRadius: \"$xl\" }}\n      >\n        <Calendar\n          size=\"md\"\n          footerActionText=\"Apply\"\n          value={date}\n          onChange={(next) => setDate(coerceDateChange(next, variant))}\n          showTimePicker={variant === \"datetime\"}\n          footerAction={(calendarState) => {\n            const resolved = resolveApplyValue(calendarState, date, variant);\n            if (variant === \"date\") {\n              onChangeHandler(formatCalendarDateParts(resolved));\n            } else {\n              const jsDate = dateValueToJsDate(resolved);\n              onChangeHandler(dayjs(jsDate).format(\"MM/DD/YYYY • HH:mm\"));\n            }\n            setPopoverOpen(false);\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default CustomDateMenu;\n"],"names":["CalendarDateTime","parseDate","dayjs","toCalendarDateTime","useState","useEffect","useMemo","Popover","PopoverTrigger","Input","CalendarIcon","PopoverContent","Calendar"],"mappings":"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"}

package/dist/cjs/mapping/components/mapping.js

@@ -14,7 +14,7 @@ var useSurveyData = require('../hooks/use-survey-data.js');
 var useFieldHandler = require('../hooks/use-field-handler.js');
 require('../../node_modules/dayjs/dayjs.min.js');
 var deriveConditionData = require('../../dynamic-mapping/helpers/derive-condition-data.js');
-var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.js');
+var v4 = require('../../packages/frontend-templates/node_modules/uuid/dist/esm-browser/v4.js');
 var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
 var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
 var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');

package/dist/cjs/node_modules/@floating-ui/core/dist/floating-ui.core.js

@@ -58,6 +58,74 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   return coords;
 }
 
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = floatingUi_utils.evaluate(options, state);
+  const paddingObject = floatingUi_utils.getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = floatingUi_utils.rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = floatingUi_utils.rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
+const MAX_RESET_COUNT = 50;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -72,7 +140,10 @@ const computePosition = async (reference, floating, config) => {
     middleware = [],
     platform
   } = config;
-  const validMiddleware = middleware.filter(Boolean);
+  const platformWithDetectOverflow = platform.detectOverflow ? platform : {
+    ...platform,
+    detectOverflow
+  };
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
   let rects = await platform.getElementRects({
     reference,
@@ -84,13 +155,17 @@ const computePosition = async (reference, floating, config) => {
     y
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
-  let middlewareData = {};
   let resetCount = 0;
-  for (let i = 0; i < validMiddleware.length; i++) {
+  const middlewareData = {};
+  for (let i = 0; i < middleware.length; i++) {
+    const currentMiddleware = middleware[i];
+    if (!currentMiddleware) {
+      continue;
+    }
     const {
       name,
       fn
-    } = validMiddleware[i];
+    } = currentMiddleware;
     const {
       x: nextX,
       y: nextY,
@@ -104,7 +179,7 @@ const computePosition = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform,
+      platform: platformWithDetectOverflow,
       elements: {
         reference,
         floating
@@ -112,14 +187,11 @@ const computePosition = async (reference, floating, config) => {
     });
     x = nextX != null ? nextX : x;
     y = nextY != null ? nextY : y;
-    middlewareData = {
-      ...middlewareData,
-      [name]: {
-        ...middlewareData[name],
-        ...data
-      }
+    middlewareData[name] = {
+      ...middlewareData[name],
+      ...data
     };
-    if (reset && resetCount <= 50) {
+    if (reset && resetCount < MAX_RESET_COUNT) {
       resetCount++;
       if (typeof reset === 'object') {
         if (reset.placement) {
@@ -149,71 +221,6 @@ const computePosition = async (reference, floating, config) => {
   };
 };
 
-/**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary on each side.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = 'clippingAncestors',
-    rootBoundary = 'viewport',
-    elementContext = 'floating',
-    altBoundary = false,
-    padding = 0
-  } = floatingUi_utils.evaluate(options, state);
-  const paddingObject = floatingUi_utils.getPaddingObject(padding);
-  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = floatingUi_utils.rectToClientRect(await platform.getClippingRect({
-    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === 'floating' ? {
-    x,
-    y,
-    width: rects.floating.width,
-    height: rects.floating.height
-  } : rects.reference;
-  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = floatingUi_utils.rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
-}
-
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -346,7 +353,7 @@ const flip = function (options) {
         fallbackPlacements.push(...floatingUi_utils.getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -453,7 +460,8 @@ const hide = function (options) {
     options,
     async fn(state) {
       const {
-        rects
+        rects,
+        platform
       } = state;
       const {
         strategy = 'referenceHidden',
@@ -462,7 +470,7 @@ const hide = function (options) {
       switch (strategy) {
         case 'referenceHidden':
           {
-            const overflow = await detectOverflow(state, {
+            const overflow = await platform.detectOverflow(state, {
               ...detectOverflowOptions,
               elementContext: 'reference'
             });
@@ -476,7 +484,7 @@ const hide = function (options) {
           }
         case 'escaped':
           {
-            const overflow = await detectOverflow(state, {
+            const overflow = await platform.detectOverflow(state, {
               ...detectOverflowOptions,
               altBoundary: true
             });
@@ -599,7 +607,8 @@ const shift = function (options) {
       const {
         x,
         y,
-        placement
+        placement,
+        platform
       } = state;
       const {
         mainAxis: checkMainAxis = true,
@@ -622,7 +631,7 @@ const shift = function (options) {
         x,
         y
       };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const crossAxis = floatingUi_utils.getSideAxis(floatingUi_utils.getSide(placement));
       const mainAxis = floatingUi_utils.getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -754,7 +763,7 @@ const size = function (options) {
         apply = () => {},
         ...detectOverflowOptions
       } = floatingUi_utils.evaluate(options, state);
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const side = floatingUi_utils.getSide(placement);
       const alignment = floatingUi_utils.getAlignment(placement);
       const isYAxis = floatingUi_utils.getSideAxis(placement) === 'y';