cr-ui-lib 1.1.113 → 1.1.115

package/dist/index.d.mts

@@ -530,6 +530,17 @@ declare type PopupWrapperProps = {
 } & React.HTMLAttributes<HTMLElement>;
 declare const PopupWrapper: ({ children, className, isOpen, stayMounted, closePopup, hasClosePopup, ...rest }: PopupWrapperProps) => JSX.Element | null;
 
+declare type PopupWrapperV2Props = {
+    children?: React.ReactNode;
+    className?: string;
+    isOpen: boolean;
+    stayMounted?: boolean;
+    closePopup?: () => void;
+    hasClosePopup?: boolean;
+    isPortal?: boolean;
+} & React.HTMLAttributes<HTMLElement>;
+declare const PopupWrapperV2: ({ children, className, isOpen, stayMounted, closePopup, hasClosePopup, isPortal, ...rest }: PopupWrapperV2Props) => JSX.Element | null;
+
 declare type LayoutProps = {
     children: React.ReactNode;
     wrapperClassName?: string;
@@ -568,4 +579,4 @@ declare function toEndOfDay(date: Date): Date;
 declare function toMidnight(date: Date): Date;
 declare function isSameDateMDY(date1: Date, date2: Date): boolean;
 
-export { Box, BoxBody, BoxHeader, Button, CollapseButton, type Column, CommonInput, CommonInputSingle, DateRangePicker, DynamicTable, DynamicTableV2, ErrorToast, GraphedCard, GroupedCheckboxDropdown, Label, Modal, MultiBarGraph, MultiLineGraph, MultipleAutoSuggestionInput, NavBar, type NavBarProps, Pagination, PlainButton, PopupWrapper, SelectionButton, SideNav, type LayoutProps as SideNavProps, SimpleCard, SingleDateInput, SingleLineGraph, SingleListInput, SingleSelectDropdown, SuccessToast, TableHeader, TimeInput, isSameDateMDY, toEndOfDay, toMidnight, validateAndFormatInput, validateDate, validateDateRange };
+export { Box, BoxBody, BoxHeader, Button, CollapseButton, type Column, CommonInput, CommonInputSingle, DateRangePicker, DynamicTable, DynamicTableV2, ErrorToast, GraphedCard, GroupedCheckboxDropdown, Label, Modal, MultiBarGraph, MultiLineGraph, MultipleAutoSuggestionInput, NavBar, type NavBarProps, Pagination, PlainButton, PopupWrapper, PopupWrapperV2, SelectionButton, SideNav, type LayoutProps as SideNavProps, SimpleCard, SingleDateInput, SingleLineGraph, SingleListInput, SingleSelectDropdown, SuccessToast, TableHeader, TimeInput, isSameDateMDY, toEndOfDay, toMidnight, validateAndFormatInput, validateDate, validateDateRange };

package/dist/index.d.ts

@@ -530,6 +530,17 @@ declare type PopupWrapperProps = {
 } & React.HTMLAttributes<HTMLElement>;
 declare const PopupWrapper: ({ children, className, isOpen, stayMounted, closePopup, hasClosePopup, ...rest }: PopupWrapperProps) => JSX.Element | null;
 
+declare type PopupWrapperV2Props = {
+    children?: React.ReactNode;
+    className?: string;
+    isOpen: boolean;
+    stayMounted?: boolean;
+    closePopup?: () => void;
+    hasClosePopup?: boolean;
+    isPortal?: boolean;
+} & React.HTMLAttributes<HTMLElement>;
+declare const PopupWrapperV2: ({ children, className, isOpen, stayMounted, closePopup, hasClosePopup, isPortal, ...rest }: PopupWrapperV2Props) => JSX.Element | null;
+
 declare type LayoutProps = {
     children: React.ReactNode;
     wrapperClassName?: string;
@@ -568,4 +579,4 @@ declare function toEndOfDay(date: Date): Date;
 declare function toMidnight(date: Date): Date;
 declare function isSameDateMDY(date1: Date, date2: Date): boolean;
 
-export { Box, BoxBody, BoxHeader, Button, CollapseButton, type Column, CommonInput, CommonInputSingle, DateRangePicker, DynamicTable, DynamicTableV2, ErrorToast, GraphedCard, GroupedCheckboxDropdown, Label, Modal, MultiBarGraph, MultiLineGraph, MultipleAutoSuggestionInput, NavBar, type NavBarProps, Pagination, PlainButton, PopupWrapper, SelectionButton, SideNav, type LayoutProps as SideNavProps, SimpleCard, SingleDateInput, SingleLineGraph, SingleListInput, SingleSelectDropdown, SuccessToast, TableHeader, TimeInput, isSameDateMDY, toEndOfDay, toMidnight, validateAndFormatInput, validateDate, validateDateRange };
+export { Box, BoxBody, BoxHeader, Button, CollapseButton, type Column, CommonInput, CommonInputSingle, DateRangePicker, DynamicTable, DynamicTableV2, ErrorToast, GraphedCard, GroupedCheckboxDropdown, Label, Modal, MultiBarGraph, MultiLineGraph, MultipleAutoSuggestionInput, NavBar, type NavBarProps, Pagination, PlainButton, PopupWrapper, PopupWrapperV2, SelectionButton, SideNav, type LayoutProps as SideNavProps, SimpleCard, SingleDateInput, SingleLineGraph, SingleListInput, SingleSelectDropdown, SuccessToast, TableHeader, TimeInput, isSameDateMDY, toEndOfDay, toMidnight, validateAndFormatInput, validateDate, validateDateRange };

package/dist/index.js

@@ -3628,8 +3628,12 @@ function SingleSelectDropdown({
       setIsOpen(!isOpen);
     }
   };
+  const hasMounted = React.useRef(false);
+  React.useEffect(() => {
+    hasMounted.current = true;
+  }, []);
   const openList = () => {
-    if (!disabled) {
+    if (!disabled && !isOpen && hasMounted.current) {
       setIsOpen(true);
     }
   };
@@ -3837,7 +3841,6 @@ function SingleSelectDropdown({
           "input",
           {
             type: "text",
-            autoFocus: true,
             onClick: openList,
             onFocus: openList,
             className: tailwindMerge.twMerge(
@@ -5601,6 +5604,84 @@ var PopupWrapper = ({
   );
 };
 var PopupWrapper_default = PopupWrapper;
+var PopupWrapperV2 = ({
+  children,
+  className,
+  isOpen = false,
+  stayMounted = false,
+  closePopup,
+  hasClosePopup = false,
+  isPortal = false,
+  ...rest
+}) => {
+  const anchorRef = React.useRef(null);
+  const [portalStyle, setPortalStyle] = React.useState({});
+  React.useEffect(() => {
+    if (!isPortal || !isOpen) return;
+    const updatePosition = () => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      const parent = anchor.parentElement;
+      if (!parent) return;
+      const rect = parent.getBoundingClientRect();
+      setPortalStyle({
+        position: "fixed",
+        top: rect.bottom + 4,
+        right: window.innerWidth - rect.right,
+        width: "20rem",
+        zIndex: 9999
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isPortal, isOpen]);
+  if (!stayMounted && !isOpen) return null;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      style: isPortal ? portalStyle : void 0,
+      className: tailwindMerge.twMerge(
+        isPortal ? "shadow-lg bg-white rounded-lg p-4 w-80 border border-opacity-10" : "absolute right-0 top-1 mt-10 shadow-lg bg-white rounded-lg p-4 w-80 z-10 border border-opacity-10",
+        isOpen ? "block" : "hidden",
+        className
+      ),
+      children: [
+        hasClosePopup && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: closePopup, className: "cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "17.5",
+            height: "17.5",
+            viewBox: "0 0 14 14",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M11.0837 3.739L10.2612 2.9165L7.00033 6.17734L3.73949 2.9165L2.91699 3.739L6.17783 6.99984L2.91699 10.2607L3.73949 11.0832L7.00033 7.82234L10.2612 11.0832L11.0837 10.2607L7.82283 6.99984L11.0837 3.739Z",
+                fill: "#4B5563"
+              }
+            )
+          }
+        ) }) }),
+        children
+      ]
+    }
+  );
+  if (isPortal) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: anchorRef, style: { display: "none" } }),
+      reactDom.createPortal(content, document.body)
+    ] });
+  }
+  return content;
+};
+var PopupWrapperV2_default = PopupWrapperV2;
 var SideNav = ({
   children,
   wrapperClassName,
@@ -5705,6 +5786,7 @@ exports.NavBar = NavBar_default;
 exports.Pagination = Pagination;
 exports.PlainButton = PlainButton_default;
 exports.PopupWrapper = PopupWrapper_default;
+exports.PopupWrapperV2 = PopupWrapperV2_default;
 exports.SelectionButton = SelectionButton_default;
 exports.SideNav = SideNav_default;
 exports.SimpleCard = SimpleCard_default;