Merge branch 'main' into refactor-pricing

Shelf-nu · May 8, 2024 · a955ea6 · a955ea6
2 parents e158902 + e908356
commit a955ea6
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 27 deletions.
diff --git a/app/components/booking/availability-select.tsx b/app/components/booking/availability-select.tsx
@@ -44,9 +44,6 @@ export function AvailabilitySelect() {
         position="popper"
         align="end"
         sideOffset={4}
-        ref={(ref) =>
-          ref?.addEventListener("touchend", (e) => e.preventDefault())
-        }
       >
         <div className="max-h-[320px] overflow-auto">
           <SelectItem

diff --git a/app/components/custody/custodian-user-select.tsx b/app/components/custody/custodian-user-select.tsx
@@ -55,14 +55,7 @@ export default function CustodianUserSelect(
           <SelectValue placeholder="Select a team member" />
         </SelectTrigger>
         <div>
-          <SelectContent
-            className="w-[352px]"
-            position="popper"
-            align="start"
-            ref={(ref) =>
-              ref?.addEventListener("touchend", (e) => e.preventDefault())
-            }
-          >
+          <SelectContent className="w-[352px]" position="popper" align="start">
             {teamMembers.length > 0 ? (
               <div className=" max-h-[320px] overflow-auto">
                 {teamMembers.map((member) => (

diff --git a/app/components/forms/select.tsx b/app/components/forms/select.tsx
@@ -32,11 +32,13 @@ const SelectTrigger = React.forwardRef<
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(function SelectContent({ className, children, ...props }, ref) {
+>(function SelectContent({ className, children, ...props }, _ref) {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
-        ref={ref}
+        ref={(ref) =>
+          ref?.addEventListener("touchend", (e) => e.preventDefault())
+        }
         className={tw(
           " relative z-50 overflow-hidden rounded border border-gray-300 bg-white  p-3  shadow-md animate-in fade-in-80",
           className

diff --git a/app/components/icons/library.tsx b/app/components/icons/library.tsx
@@ -84,8 +84,9 @@ export function ItemsIcon(props: SVGProps<SVGSVGElement>) {
 export function SettingsIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width={22}
-      height={22}
+      width="100%"
+      height="100%"
+      viewBox="0 0 22 22"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}

diff --git a/app/components/layout/sidebar/menu-items.tsx b/app/components/layout/sidebar/menu-items.tsx
@@ -108,7 +108,9 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                   onClick={toggleMobileNav}
                   title={item.label}
                 >
-                  <i className="icon pl-[2px] text-gray-500">{item.icon}</i>
+                  <i className="icon inline-flex pl-[2px] text-gray-500">
+                    {item.icon}
+                  </i>
                   <span className="text whitespace-nowrap transition duration-200 ease-linear">
                     {item.label}
                   </span>
@@ -145,7 +147,9 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                   onClick={toggleMobileNav}
                   title={item.label}
                 >
-                  <i className="icon pl-[2px] text-gray-500">{item.icon}</i>
+                  <i className="icon inline-flex pl-[2px] text-gray-500">
+                    {item.icon}
+                  </i>
                   <span className="text whitespace-nowrap transition duration-200 ease-linear">
                     {item.label}
                   </span>
@@ -169,7 +173,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                     workspaceSwitching ? "pointer-events-none" : ""
                   )}
                 >
-                  <i className="icon pl-[2px] text-gray-500">
+                  <i className="icon inline-flex pl-[2px] text-gray-500">
                     <Icon icon="switch" />
                   </i>
                   <span className="text whitespace-nowrap transition duration-200 ease-linear">

diff --git a/app/components/layout/sidebar/organization-select.tsx b/app/components/layout/sidebar/organization-select.tsx
@@ -26,14 +26,7 @@ export const OrganizationSelect = ({
       <SelectTrigger className="w-full px-3 py-2">
         <SelectValue />
       </SelectTrigger>
-      <SelectContent
-        position="popper"
-        className="w-full"
-        align="start"
-        ref={(ref) =>
-          ref?.addEventListener("touchend", (e) => e.preventDefault())
-        }
-      >
+      <SelectContent position="popper" className="w-full" align="start">
         <div className=" max-h-[320px] w-[253px] overflow-auto">
           {organizations.map((org) => (
             <SelectItem

diff --git a/app/routes/_layout+/locations.$locationId.tsx b/app/routes/_layout+/locations.$locationId.tsx
@@ -259,6 +259,7 @@ export default function LocationPage() {
                     to="add-assets"
                     variant="primary"
                     icon="plus"
+                    className="whitespace-nowrap"
                   >
                     Manage assets
                   </Button>

diff --git a/app/utils/use-controlled-dropdown-menu.ts b/app/utils/use-controlled-dropdown-menu.ts
@@ -19,7 +19,14 @@ export function useControlledDropdownMenu(
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
+      const target = event.target as Node;
+      const alertDialog = document.querySelector('[role="alertdialog"]');
+
+      if (
+        ref.current &&
+        !ref.current.contains(target) &&
+        (!alertDialog || !alertDialog.contains(target))
+      ) {
         setOpen(false);
       }
     };