@motor-hero/ui-kit 0.44.1 → 0.45.0

package/dist/index.js

@@ -671,30 +671,35 @@ function useInfiniteScrollSentinel({
   loading,
   onLoadMore
 }) {
-  const listRef = React4.useRef(null);
-  const sentinelRef = React4.useRef(null);
+  const [listNode, setListNode] = React4.useState(null);
+  const [sentinelNode, setSentinelNode] = React4.useState(
+    null
+  );
   const loadingRef = React4.useRef(loading);
   const onLoadMoreRef = React4.useRef(onLoadMore);
+  const listRef = React4.useCallback((node) => {
+    setListNode(node);
+  }, []);
+  const sentinelRef = React4.useCallback((node) => {
+    setSentinelNode(node);
+  }, []);
   React4.useEffect(() => {
     loadingRef.current = loading;
     onLoadMoreRef.current = onLoadMore;
   });
   React4.useEffect(() => {
-    if (!enabled) return;
-    const root = listRef.current;
-    const sentinel = sentinelRef.current;
-    if (!root || !sentinel) return;
+    if (!enabled || !listNode || !sentinelNode) return;
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries[0]?.isIntersecting && !loadingRef.current) {
           onLoadMoreRef.current?.();
         }
       },
-      { root, rootMargin: "0px 0px 100px 0px" }
+      { root: listNode, rootMargin: "0px 0px 100px 0px" }
     );
-    observer.observe(sentinel);
+    observer.observe(sentinelNode);
     return () => observer.disconnect();
-  }, [enabled]);
+  }, [enabled, listNode, sentinelNode]);
   return { listRef, sentinelRef };
 }
 
@@ -725,7 +730,14 @@ function Combobox({
   const [search, setSearch] = React5.useState("");
   const isDesktop = useIsDesktop();
   const isServer = onSearchChange !== void 0;
-  const selected = selectedOption?.value === value ? selectedOption : options.find((option) => option.value === value) ?? (creatable && value ? { value, label: value } : void 0);
+  const labelCache = React5.useRef(/* @__PURE__ */ new Map());
+  const fromPage = selectedOption?.value === value ? selectedOption : options.find((option) => option.value === value);
+  React5.useEffect(() => {
+    for (const option of options) labelCache.current.set(option.value, option);
+    if (selectedOption)
+      labelCache.current.set(selectedOption.value, selectedOption);
+  });
+  const selected = fromPage ?? (value ? labelCache.current.get(value) : void 0) ?? (creatable && value ? { value, label: value } : void 0);
   const handleOpenChange = (next) => {
     setOpen(next);
     if (!next) setSearch("");
@@ -1534,7 +1546,7 @@ function HighlightPill({
 }
 
 // src/components/mobile-card-list.tsx
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var SCROLL_THRESHOLD = 8;
 function MobileCardList({
@@ -1545,8 +1557,8 @@ function MobileCardList({
   loadingCount = 5,
   className
 }) {
-  const start = useRef3(null);
-  const scrolled = useRef3(false);
+  const start = useRef4(null);
+  const scrolled = useRef4(false);
   const onTouchStart = (e) => {
     const t = e.touches[0];
     start.current = { x: t.clientX, y: t.clientY };
@@ -1602,7 +1614,7 @@ import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
 import { Moon, Sun, Monitor } from "lucide-react";
 
 // src/components/theme-provider.tsx
-import { createContext, useContext, useEffect as useEffect4, useState as useState8 } from "react";
+import { createContext, useContext, useEffect as useEffect5, useState as useState9 } from "react";
 
 // src/lib/company-theme.ts
 var VAR_MAP = {
@@ -1643,10 +1655,10 @@ function ThemeProvider({
   companyTheme,
   ...props
 }) {
-  const [theme, setTheme] = useState8(
+  const [theme, setTheme] = useState9(
     () => localStorage.getItem(storageKey) || defaultTheme
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const root = window.document.documentElement;
     const applyResolved = (resolved) => {
       root.classList.remove("light", "dark");
@@ -1769,12 +1781,14 @@ function MultiCombobox({
   const [open, setOpen] = React8.useState(false);
   const isDesktop = useIsDesktop();
   const isServer = onSearchChange !== void 0;
-  const seen = /* @__PURE__ */ new Set();
-  const selected = [...selectedOptions ?? [], ...options].filter((option) => {
-    if (!value.includes(option.value) || seen.has(option.value)) return false;
-    seen.add(option.value);
-    return true;
+  const labelCache = React8.useRef(/* @__PURE__ */ new Map());
+  const byValue = /* @__PURE__ */ new Map();
+  for (const option of options) byValue.set(option.value, option);
+  for (const option of selectedOptions ?? []) byValue.set(option.value, option);
+  React8.useEffect(() => {
+    for (const [key, option] of byValue) labelCache.current.set(key, option);
   });
+  const selected = value.map((v) => byValue.get(v) ?? labelCache.current.get(v)).filter((option) => option !== void 0);
   const { listRef, sentinelRef } = useInfiniteScrollSentinel({
     enabled: isServer && !!hasMore,
     loading,
@@ -2118,7 +2132,7 @@ function ResponsiveDataView({
 // src/components/row-actions-menu.tsx
 import * as DropdownMenu3 from "@radix-ui/react-dropdown-menu";
 import { ChevronRight as ChevronRight3, MoreVertical } from "lucide-react";
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { Drawer as DrawerPrimitive6 } from "vaul";
 import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var triggerClass = "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
@@ -2132,7 +2146,7 @@ function RowActionsMenu({
   renderLink = defaultRenderLink
 }) {
   const isDesktop = useIsDesktop();
-  const [open, setOpen] = useState11(false);
+  const [open, setOpen] = useState12(false);
   if (actions.length === 0) return null;
   const trigger = /* @__PURE__ */ jsx27(
     "button",
@@ -2473,7 +2487,7 @@ function Toaster(props) {
 }
 
 // src/hooks/use-company-subdomain.ts
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 var ALWAYS_RESERVED = ["www", "localhost"];
 function getSubdomain(hostname, reservedSubdomains = []) {
   const labels = hostname.split(".");
@@ -2506,7 +2520,7 @@ function useCompanySubdomain(opts = {}) {
     overrideStorageKey = "company-subdomain",
     reservedSubdomains = []
   } = opts;
-  const [subdomain] = useState12(() => {
+  const [subdomain] = useState13(() => {
     if (enableOverride) {
       const override = resolveOverride(overrideStorageKey);
       if (override) return override;
@@ -2518,20 +2532,20 @@ function useCompanySubdomain(opts = {}) {
 }
 
 // src/hooks/use-disclosure.ts
-import { useCallback as useCallback2, useState as useState13 } from "react";
+import { useCallback as useCallback3, useState as useState14 } from "react";
 function useDisclosure(initial = false) {
-  const [open, setOpen] = useState13(initial);
-  const onOpen = useCallback2(() => setOpen(true), []);
-  const onClose = useCallback2(() => setOpen(false), []);
-  const onToggle = useCallback2(() => setOpen((v) => !v), []);
+  const [open, setOpen] = useState14(initial);
+  const onOpen = useCallback3(() => setOpen(true), []);
+  const onClose = useCallback3(() => setOpen(false), []);
+  const onToggle = useCallback3(() => setOpen((v) => !v), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
 
 // src/hooks/use-toast.ts
 import { toast } from "sonner";
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 function useCustomToast() {
-  const showToast = useCallback3(
+  const showToast = useCallback4(
     (title, description, status = "success") => {
       switch (status) {
         case "success":