@agg-market/ui 1.0.0 → 2.0.0

package/dist/{chunk-P23GR7NX.mjs → chunk-422MCIXV.mjs}

@@ -6,7 +6,7 @@ import {
 import {
   fallbackLineColors,
   lineColorByVenue
-} from "./chunk-JH5VMNDL.mjs";
+} from "./chunk-V52WSZHQ.mjs";
 
 // src/events/item-details/event-list-item-details.utils.ts
 import dayjs from "dayjs";

package/dist/chunk-4KMFDCAH.mjs

@@ -0,0 +1,371 @@
+import {
+  defaultSettlementDifferencesTitle,
+  defaultSettlementSectionLabel,
+  getTradingVenueLabel
+} from "./chunk-OBCHURW5.mjs";
+import {
+  Skeleton,
+  skeletonViews
+} from "./chunk-V52WSZHQ.mjs";
+import {
+  VenueLogo
+} from "./chunk-D7JTOGYP.mjs";
+import {
+  Icon
+} from "./chunk-PZTHM6WG.mjs";
+import {
+  Card
+} from "./chunk-FO2QCB4Z.mjs";
+import {
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName
+} from "./chunk-GJ4U5NCE.mjs";
+
+// src/trading/settlement/index.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var getSettlementHeaderClassName = () => {
+  return "flex items-center justify-between gap-4";
+};
+var Settlement = ({
+  sectionLabel = defaultSettlementSectionLabel,
+  question,
+  differencesTitle = defaultSettlementDifferencesTitle,
+  differences,
+  venues,
+  defaultExpandedVenue,
+  expandedVenue,
+  isLoading = false,
+  onExpandedVenueChange,
+  onShowMore,
+  className
+}) => {
+  var _a, _b;
+  const labels = useLabels();
+  const { enableAnimations } = useSdkUiConfig();
+  const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
+  const resolvedDifferencesTitle = differencesTitle === defaultSettlementDifferencesTitle ? labels.trading.settlementDifferencesTitle : differencesTitle;
+  const [internalExpandedVenue, setInternalExpandedVenue] = useState(
+    (_b = defaultExpandedVenue != null ? defaultExpandedVenue : (_a = venues[0]) == null ? void 0 : _a.venue) != null ? _b : null
+  );
+  const [expandedDescriptionByVenue, setExpandedDescriptionByVenue] = useState({});
+  const [overflowingDescriptionByVenue, setOverflowingDescriptionByVenue] = useState({});
+  const [collapsedDescriptionByVenue, setCollapsedDescriptionByVenue] = useState({});
+  const descriptionWrapperRefs = useRef(/* @__PURE__ */ new Map());
+  const descriptionMeasureRefs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (expandedVenue === void 0)
+      return;
+    setInternalExpandedVenue(expandedVenue);
+  }, [expandedVenue]);
+  const resolvedExpandedVenue = expandedVenue === void 0 ? internalExpandedVenue : expandedVenue;
+  const handleVenueClick = (venue) => {
+    const nextVenue = resolvedExpandedVenue === venue ? null : venue;
+    if (expandedVenue === void 0) {
+      setInternalExpandedVenue(nextVenue);
+    }
+    onExpandedVenueChange == null ? void 0 : onExpandedVenueChange(nextVenue);
+  };
+  const handleDescriptionWrapperRef = useCallback(
+    (venue, element) => {
+      if (!element) {
+        descriptionWrapperRefs.current.delete(venue);
+        return;
+      }
+      descriptionWrapperRefs.current.set(venue, element);
+    },
+    []
+  );
+  const handleDescriptionMeasureRef = useCallback(
+    (venue, element) => {
+      if (!element) {
+        descriptionMeasureRefs.current.delete(venue);
+        return;
+      }
+      descriptionMeasureRefs.current.set(venue, element);
+    },
+    []
+  );
+  const updateDescriptionLayout = useCallback(
+    (venue, description, showMoreLabel) => {
+      const descriptionWrapperElement = descriptionWrapperRefs.current.get(venue);
+      const descriptionMeasureElement = descriptionMeasureRefs.current.get(venue);
+      if (!descriptionWrapperElement || !descriptionMeasureElement)
+        return;
+      const wrapperWidth = descriptionWrapperElement.clientWidth;
+      if (wrapperWidth <= 0)
+        return;
+      const computedStyles = window.getComputedStyle(descriptionWrapperElement);
+      const parsedLineHeight = Number.parseFloat(computedStyles.lineHeight);
+      const lineHeight = Number.isFinite(parsedLineHeight) ? parsedLineHeight : 20;
+      const maxHeight = lineHeight * 2 + 1;
+      descriptionMeasureElement.style.width = `${wrapperWidth}px`;
+      const getHeight = (value) => {
+        descriptionMeasureElement.textContent = value;
+        return descriptionMeasureElement.scrollHeight;
+      };
+      const fullHeight = getHeight(description);
+      if (fullHeight <= maxHeight) {
+        setOverflowingDescriptionByVenue((currentState) => {
+          if (currentState[venue] === false)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: false
+          });
+        });
+        setCollapsedDescriptionByVenue((currentState) => {
+          if (currentState[venue] === description)
+            return currentState;
+          return __spreadProps(__spreadValues({}, currentState), {
+            [venue]: description
+          });
+        });
+        return;
+      }
+      const suffix = `... ${showMoreLabel}`;
+      let left = 0;
+      let right = description.length;
+      let bestLength = 0;
+      while (left <= right) {
+        const middle = Math.floor((left + right) / 2);
+        const candidate = description.slice(0, middle).trimEnd();
+        const candidateHeight = getHeight(`${candidate}${suffix}`);
+        if (candidateHeight <= maxHeight) {
+          bestLength = middle;
+          left = middle + 1;
+          continue;
+        }
+        right = middle - 1;
+      }
+      const collapsedDescription = description.slice(0, bestLength).trimEnd();
+      setOverflowingDescriptionByVenue((currentState) => {
+        if (currentState[venue] === true)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: true
+        });
+      });
+      setCollapsedDescriptionByVenue((currentState) => {
+        if (currentState[venue] === collapsedDescription)
+          return currentState;
+        return __spreadProps(__spreadValues({}, currentState), {
+          [venue]: collapsedDescription
+        });
+      });
+    },
+    []
+  );
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const frameId = window.requestAnimationFrame(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  useEffect(() => {
+    if (!resolvedExpandedVenue)
+      return;
+    if (expandedDescriptionByVenue[resolvedExpandedVenue])
+      return;
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const expandedVenueItem = venues.find((venueItem) => venueItem.venue === resolvedExpandedVenue);
+    if (!expandedVenueItem)
+      return;
+    const descriptionWrapperElement = descriptionWrapperRefs.current.get(resolvedExpandedVenue);
+    if (!descriptionWrapperElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      var _a2;
+      updateDescriptionLayout(
+        resolvedExpandedVenue,
+        expandedVenueItem.description,
+        (_a2 = expandedVenueItem.showMoreLabel) != null ? _a2 : "Show more"
+      );
+    });
+    resizeObserver.observe(descriptionWrapperElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [expandedDescriptionByVenue, resolvedExpandedVenue, updateDescriptionLayout, venues]);
+  const handleDescriptionShowMoreClick = (event, venue) => {
+    event == null ? void 0 : event.stopPropagation();
+    setExpandedDescriptionByVenue((currentState) => {
+      if (currentState[venue])
+        return currentState;
+      return __spreadProps(__spreadValues({}, currentState), {
+        [venue]: true
+      });
+    });
+    onShowMore == null ? void 0 : onShowMore(venue);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ariaLabel: labels.trading.settlementLoading,
+        className,
+        view: skeletonViews.settlement
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "flex flex-col w-full gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: getSettlementHeaderClassName(), children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: resolvedDifferencesTitle }),
+          /* @__PURE__ */ jsx("ul", { className: "list-disc pl-5 text-agg-sm leading-agg-5 text-agg-foreground", children: differences.map((difference) => /* @__PURE__ */ jsx("li", { children: difference }, difference)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
+          var _a2, _b2;
+          const venueLabel = getTradingVenueLabel(venue.venue, venue.label);
+          const isExpanded = resolvedExpandedVenue === venue.venue;
+          const isDescriptionExpanded = !!expandedDescriptionByVenue[venue.venue];
+          const isDescriptionOverflowing = !!overflowingDescriptionByVenue[venue.venue];
+          const shouldShowDescriptionCta = isExpanded && isDescriptionOverflowing && !isDescriptionExpanded;
+          const resolvedShowMoreLabel = (_a2 = venue.showMoreLabel) != null ? _a2 : "Show more";
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "flex items-center gap-2 text-left",
+                  "cursor-pointer disabled:cursor-not-allowed hover:opacity-50",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[opacity,color] duration-200 ease-in-out"
+                  )
+                ),
+                "aria-expanded": isExpanded,
+                "aria-label": labels.trading.settlementDetailsAria(venueLabel),
+                onClick: () => handleVenueClick(venue.venue),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    VenueLogo,
+                    {
+                      venue: venue.venue,
+                      size: "small",
+                      ariaLabel: venueLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground",
+                        isExpanded ? "text-agg-primary" : "text-agg-foreground"
+                      ),
+                      children: venueLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: isExpanded ? "chevron-up" : "chevron-down",
+                      size: "small",
+                      className: "text-agg-foreground",
+                      color: "currentColor"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": !isExpanded,
+                className: cn(
+                  "grid overflow-hidden",
+                  isExpanded ? "mt-2 grid-rows-[1fr] opacity-100" : "mt-0 grid-rows-[0fr] opacity-0",
+                  !isExpanded && "pointer-events-none",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-[grid-template-rows,opacity,margin-top] duration-300 ease-in-out"
+                  )
+                ),
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: (element) => handleDescriptionWrapperRef(venue.venue, element),
+                    className: "relative min-h-0",
+                    children: [
+                      /* @__PURE__ */ jsxs("p", { className: "min-h-0 text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                        isDescriptionExpanded || !isDescriptionOverflowing ? venue.description : (_b2 = collapsedDescriptionByVenue[venue.venue]) != null ? _b2 : venue.description,
+                        shouldShowDescriptionCta ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          "... ",
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              tabIndex: isExpanded ? 0 : -1,
+                              className: cn(
+                                "cursor-pointer disabled:cursor-not-allowed",
+                                "text-agg-sm leading-agg-5 text-agg-foreground underline-offset-2 hover:underline hover:font-agg-bold",
+                                getMotionClassName(
+                                  enableAnimations,
+                                  "transition-[text-decoration] duration-200 ease-in-out"
+                                )
+                              ),
+                              "aria-label": labels.trading.settlementShowMoreAria(
+                                resolvedShowMoreLabel,
+                                venueLabel
+                              ),
+                              onClick: (event) => handleDescriptionShowMoreClick(event, venue.venue),
+                              children: resolvedShowMoreLabel
+                            }
+                          )
+                        ] }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          ref: (element) => handleDescriptionMeasureRef(venue.venue, element),
+                          "aria-hidden": true,
+                          className: "pointer-events-none invisible fixed top-0 left-0 -z-10 whitespace-normal text-agg-sm leading-agg-5"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ] }, venue.venue);
+        }) })
+      ]
+    }
+  );
+};
+Settlement.displayName = "Settlement";
+
+export {
+  Settlement
+};