fix: navigation active (#5270)

Author: lisalupi

.changeset/rude-paths-stick.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": patch
+---
+
+`Navigation`: isActive should work when the Item is wrapped in a Link/NavLink (React rooter)

packages/plus/src/components/Navigation/components/Item.tsx

@@ -116,7 +116,8 @@ const StyledMenuItem = styled(Menu.Item, {
     }
 
     ${StyledBadge} {
-      opacity: ${({ isPinnable, pinnedFeature }) => (isPinnable && pinnedFeature ? 0 : 1)};
+      opacity: ${({ isPinnable, pinnedFeature }) =>
+        isPinnable && pinnedFeature ? 0 : 1};
     }
   }
 `
@@ -265,6 +266,10 @@ const ContainerCategoryIcon = styled(Stack)`
 
 type ItemType = 'default' | 'pinned' | 'pinnedGroup'
 
+type LinkProps = {
+  to: string
+  children?: { props: ItemProps }
+}
 type ItemProps = {
   children?: ReactNode
   /**
@@ -433,9 +438,18 @@ export const Item = memo(
       if (!children) return false
 
       return (
-        Children.map(children, child =>
-          isValidElement<ItemProps>(child) ? child.props?.active : false,
-        ) as boolean[]
+        Children.map(children, child => {
+          if (isValidElement<ItemProps | LinkProps>(child)) {
+            // In case the Item is wrapped in a link
+            if ('to' in child.props) {
+              return child.props.children?.props.active
+            }
+
+            return child.props.active
+          }
+
+          return null
+        }) as boolean[]
       ).includes(true)
     }, [children])
 

packages/ui/src/components/NumberInput/index.tsx

@@ -298,37 +298,31 @@ export const NumberInput = forwardRef(
       [localRef, min, onChange],
     )
 
-    const isMinusDisabled = useMemo(
-      () => {
-        if (!localRef?.current?.value || localRef?.current?.value === '') {
-          return false
-        }
+    const isMinusDisabled = useMemo(() => {
+      if (!localRef?.current?.value || localRef?.current?.value === '') {
+        return false
+      }
 
-        const numericValue = Number(localRef?.current?.value)
-        if (Number.isNaN(numericValue)) return false
+      const numericValue = Number(localRef?.current?.value)
+      if (Number.isNaN(numericValue)) return false
 
-        const minValue = typeof min === 'number' ? min : Number(min)
+      const minValue = typeof min === 'number' ? min : Number(min)
 
-        return Number.isNaN(numericValue) || numericValue <= minValue
-      }, // eslint-disable-next-line react-hooks/exhaustive-deps
-      [localRef?.current?.value, min],
-    )
+      return Number.isNaN(numericValue) || numericValue <= minValue
+    }, [localRef?.current?.value, min])
 
-    const isPlusDisabled = useMemo(
-      () => {
-        if (!localRef?.current?.value || localRef?.current?.value === '') {
-          return false
-        }
+    const isPlusDisabled = useMemo(() => {
+      if (!localRef?.current?.value || localRef?.current?.value === '') {
+        return false
+      }
 
-        const numericValue = Number(localRef?.current?.value)
-        if (Number.isNaN(numericValue)) return false
+      const numericValue = Number(localRef?.current?.value)
+      if (Number.isNaN(numericValue)) return false
 
-        const maxValue = typeof max === 'number' ? max : Number(max)
+      const maxValue = typeof max === 'number' ? max : Number(max)
 
-        return numericValue >= maxValue
-      }, // eslint-disable-next-line react-hooks/exhaustive-deps
-      [localRef?.current?.value, max],
-    )
+      return numericValue >= maxValue
+    }, [localRef?.current?.value, max])
 
     const helperSentiment = useMemo(() => {
       if (error) {